Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5 - Yeah!
Search
J Cornelius
November 18, 2011
Technology
3
360
HTML5 - Yeah!
Presented at ReMix South, Aug. 6th 2011.
J Cornelius
November 18, 2011
Tweet
Share
More Decks by J Cornelius
See All by J Cornelius
Product Strategy for the New Normal
jc
0
30
Human-Centered Product Design
jc
3
350
Designing for Humans
jc
1
82
Redesign Your Design Thinking
jc
5
1.1k
Digital Fluency and User Experience
jc
1
210
Mobile Commerce Mistakes
jc
1
160
Design, Experience, Startups
jc
3
160
Design for Success - Fundamentals that Build Brand
jc
3
560
The Why of HTML5 - ConvergeSE 2012
jc
2
270
Other Decks in Technology
See All in Technology
さくらの夕べ Debianナイト - さくらのVPS編
dictoss
0
180
はじめてのSDET / My first challenge as a SDET
bun913
1
200
SREが実現する開発者体験の革新
sansantech
PRO
0
200
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
350
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
280
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
350
2025年春に見直したい、リソース最適化の基本
sogaoh
PRO
0
460
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
390
Amebaにおける Platform Engineeringの実践
kumorn5s
6
900
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
340
SDカードフォレンジック
su3158
0
270
IVRyにおけるNLP活用と NLP2025の関連論文紹介
keisukeosone
0
180
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Thoughts on Productivity
jonyablonski
69
4.6k
Facilitating Awesome Meetings
lara
54
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Adopting Sorbet at Scale
ufuk
76
9.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Into the Great Unknown - MozCon
thekraken
37
1.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
A better future with KSS
kneath
239
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Transcript
Monday, August 8, 11
#remixhtml5 Monday, August 8, 11
Monday, August 8, 11
WHY? Monday, August 8, 11
The Internet is a strange, huge beast. It is getting
bigger, faster and more mobile each day.” http://www.onlineschools.org/state-of-the-internet/soti.html “ Monday, August 8, 11
4,835,049,149 Monday, August 8, 11
www.lingscars.com Monday, August 8, 11
TIMELINE Monday, August 8, 11
HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise Monday, August
8, 11
HTML 3.2 Jan. 1997 Kenny G - Six of Hearts
Monday, August 8, 11
HTML 4 Dec. 1997 Eminem - The Slim Shady EP
Monday, August 8, 11
XHTML 1.0 Jan. 2000 The Presidents of the United States
of America - Lump Monday, August 8, 11
/> Monday, August 8, 11
XHTML 1.1 May 2001 Janet Jackson - All For You
Monday, August 8, 11
HTML5 Jun. 2004 Usher - Yeah! Monday, August 8, 11
HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/ Monday, August 8,
11
apple.com/html5 Monday, August 8, 11
Web 3.0 Web 2.0 What it’s not: Flash Killer Silverlight
Killer CSS3 jQuery Animations MooTools YUI Video Audio Games Everything Monday, August 8, 11
HTML 5 see that space? ...and it’s not Monday, August
8, 11
What it is. Monday, August 8, 11
In the thinking of its creators, HTML5 was always just
HTML.” ~ Jeffrey Zeldman http://www.zeldman.com/2011/01/27/html5-vs-html/ “ Monday, August 8, 11
Natural evolution of HTML. HTML http://blog.whatwg.org/html-is-the-new-html5 Monday, August 8, 11
Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE
ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11
SEMANTICS Monday, August 8, 11
/> > == /> > > but really Monday, August
8, 11
<!DOCTYPE html> Monday, August 8, 11
<meta charset=”utf-8”> Monday, August 8, 11
<h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip:
Jeremy Keith (@adactio) Monday, August 8, 11
<a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith (@adactio)
Monday, August 8, 11
<header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video>
<audio> <canvas> Monday, August 8, 11
<div class=”footer”> <div class=”nav”> <ul> <li><a href=”#”>This</a></li> <li><a href=”#”>That</a></li> </ul>
</div> </div> Hat Tip: Jeremy Keith (@adactio) Monday, August 8, 11
<footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip:
Jeremy Keith (@adactio) Monday, August 8, 11
<time> <input type=”email”> <input type=”url”> Monday, August 8, 11
http://dev.opera.com/articles/view/new-form-features-in-HTML5/ Monday, August 8, 11
<section> <article> Monday, August 8, 11
http://andyrutledge.com/news-redux.php Monday, August 8, 11
Section or Article? http://andyrutledge.com/news-redux.php Monday, August 8, 11
<article> </article> <header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details> </header>
<figure> <img src=”/photos/yay.jpg”> <figcaption>Laur...</figcaption> </figure> <section id=”content”> <p>When the 79th minute...</p> <p>...</p> </section> <aside> <a>Print</a> <a>Single Page</a> <ul><li>...</li><li>...</li></ul> </aside> http://andyrutledge.com/news-redux.php Monday, August 8, 11
Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE
ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11
www.nikebetterworld.com Monday, August 8, 11
www.thisshell.com Monday, August 8, 11
http://mbostock.github.com/d3/ex/stack.html Monday, August 8, 11
http://mbostock.github.com/d3/ex/bullet.html Monday, August 8, 11
phonegap.com Monday, August 8, 11
We realized we could do the full Pandora experience without
Flash.” ~ Tom Conrad, CTO - Pandora “ pandora.com/newpandora Monday, August 8, 11
WHY? Monday, August 8, 11
You already know it. Monday, August 8, 11
What about browser support, man? Monday, August 8, 11
Monday, August 8, 11
Browsers already know it, too. Monday, August 8, 11
document.createElement(); http://html5shiv.googlecode.com Monday, August 8, 11
document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... http://html5shiv.googlecode.com Monday, August
8, 11
Offline Storage Monday, August 8, 11
Geolocation Monday, August 8, 11
Because it’s already all around you. Monday, August 8, 11
Because of IE6. Monday, August 8, 11
95% of the Web doesn’t validate. Monday, August 8, 11
Beyond the Rendering Engine Monday, August 8, 11
<b><i>Hi there</b></i> http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11
Internet Explorer 9, Safari 5 <b><i>Hi there</i></b> <b><i>Hi there</i></b><i></i> Firefox,
Opera, Chrome http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11
Because it’s cool. Monday, August 8, 11
Resources Monday, August 8, 11
vid.ly Monday, August 8, 11
html5boilerplate.com @boiler_plate Monday, August 8, 11
modernizr.com @modernizr Monday, August 8, 11
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Monday, August 8, 11
MORE RESOURCES - diveintohtml5.com - html5doctor.com - html5wow.com - html5demos.com
- html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.com Monday, August 8, 11
400 New people come online every minute 4,835,049,149 Monday, August
8, 11
www.lingscars.com Monday, August 8, 11
nissanusa.com/leaf-electric-car Monday, August 8, 11
“Do or do not. There is no try.” ~ Yoda
Monday, August 8, 11
Thank you. J. Cornelius jcornelius.com Monday, August 8, 11