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 - Hell Yeah!
Search
J Cornelius
November 18, 2011
Technology
4
270
HTML5 - Hell Yeah!
Presented at Web Visions Atlanta, Nov. 17th 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
38
Human-Centered Product Design
jc
3
370
Designing for Humans
jc
1
89
Redesign Your Design Thinking
jc
5
1.2k
Digital Fluency and User Experience
jc
1
220
Mobile Commerce Mistakes
jc
1
160
Design, Experience, Startups
jc
3
170
Design for Success - Fundamentals that Build Brand
jc
3
570
The Why of HTML5 - ConvergeSE 2012
jc
2
280
Other Decks in Technology
See All in Technology
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
410
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
510
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
270
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.1k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
360
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
850
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
180
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Into the Great Unknown - MozCon
thekraken
40
2k
How GitHub (no longer) Works
holman
315
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
Scaling GitHub
holman
463
140k
Building Adaptive Systems
keathley
43
2.7k
Documentation Writing (for coders)
carmenintech
74
5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Six Lessons from altMBA
skipperchong
28
4k
Become a Pro
speakerdeck
PRO
29
5.5k
4 Signs Your Business is Dying
shpigford
184
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Friday, November 18, 11
Friday, November 18, 11
#wvhtml5 Friday, November 18, 11
Friday, November 18, 11
WHY? Friday, November 18, 11
The Internet is a strange, huge beast. It is getting
bigger, faster and more mobile each day.” www.onlineschools.org/state-of-the-internet/soti.html “ Friday, November 18, 11
4,835,049,149 Friday, November 18, 11
www.lingscars.com Friday, November 18, 11
Friday, November 18, 11
TIMELINE Friday, November 18, 11
HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise Friday, November
18, 11
HTML 3.2 Jan. 1997 Kenny G - Six of Hearts
Friday, November 18, 11
HTML 4 Dec. 1997 Eminem - The Slim Shady EP
Friday, November 18, 11
HTML5 Jun.
HTML5 Jun.
HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/ Friday, November 18, 11
HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/ Friday, November 18,
11
apple.com/html5 Friday, November 18, 11
apple.com/html5 Friday, November 18, 11
What it is. Friday, November 18, 11
In the thinking of its creators, HTML5 was always just
HTML.” ~ Jeffrey Zeldman zeldman.com/2011/01/27/html5-vs-html “ Friday, November 18, 11
Natural evolution of HTML. blog.whatwg.org/html-is-the-new-html5 Friday, November 18, 11
Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE
ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Friday, November 18, 11
SEMANTICS Friday, November 18, 11
<!DOCTYPE html> Friday, November 18, 11
<meta charset=“utf-8”> Friday, November 18, 11
<h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip:
Jeremy Keith Friday, November 18, 11
<a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith Friday,
November 18, 11
<header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video>
<audio> <canvas> Friday, November 18, 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 Friday, November 18, 11
<footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip:
Jeremy Keith Friday, November 18, 11
<time> Friday, November 18, 11
<p> Web Visions is <time datetime=”2011-11-17”> Today </time> at the
MacQuarium. </p> Friday, November 18, 11
datetime="14:30" datetime="2011-11-17T14:30+00:00" datetime="2011-11-17T14:30Z" <time> html5doctor.com/the-time-element Friday, November 18, 11
<input type=”email”> <input type=”url”> Friday, November 18, 11
dev.opera.com/articles/view/new-form-features-in-HTML5 Friday, November 18, 11
<nsfw> Friday, November 18, 11
<nsfw> <figure> <video src="party.mp4"></video> <figcaption>Party!</figcaption> </figure> </nsfw> Friday, November 18,
11
<section> <article> Friday, November 18, 11
...a self-contained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable, e.g. in syndication.” “ ~ W3C Specification Friday, November 18, 11
andyrutledge.com/news-redux.php Friday, November 18, 11
andyrutledge.com/news-redux.php Friday, November 18, 11
Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11
Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11
Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11
Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11
andyrutledge.com/news-redux.php Friday, November 18, 11
<article> </article> andyrutledge.com/news-redux.php Friday, November 18, 11
<article> </article> <header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details> </header>
andyrutledge.com/news-redux.php Friday, November 18, 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> andyrutledge.com/news-redux.php Friday, November 18, 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> <div id=”content”> <p>When the 79th minute...</p> <p>...</p> </div> andyrutledge.com/news-redux.php Friday, November 18, 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> <div id=”content”> <p>When the 79th minute...</p> <p>...</p> </div> <aside> <a>Print</a> <a>Single Page</a> <ul><li>...</li><li>...</li></ul> </aside> andyrutledge.com/news-redux.php Friday, November 18, 11
<section> represents a generic document or application section…not a generic
container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use <div> instead.” “ ~ Bruce Lawson Friday, November 18, 11
nikebetterworld.com Friday, November 18, 11
nikebetterworld.com Friday, November 18, 11
<section class="story" id="story-freext"> <article> <header> <h2>One shoe does good, the
other...</h2> <h1>Nike Free TR Fit</h1> <p>The Free TR Fit is designed with...</p> <a href="/nikeos/gamechangers/">Learn more</a> </header> </article> <div class="bg"></div> </section> Friday, November 18, 11
<section> <article> logical sections of sites and applications. content that
can be used elsewhere. Friday, November 18, 11
<section> <article> logical sections of sites and applications. content that
can be used elsewhere. gsnedders.html5.org/outliner Friday, November 18, 11
Beyond the Rendering Engine Friday, November 18, 11
<b><i>Hi there</b></i> labs.opera.com/news/2011/02/22/ Friday, November 18, 11
Internet Explorer 9, Safari 5 <b><i>Hi there</i></b> <b><i>Hi there</i></b><i></i> Firefox,
Opera, Chrome labs.opera.com/news/2011/02/22/ Friday, November 18, 11
pandora.com/newpandora Friday, November 18, 11
We realized we could do the full Pandora experience without
Flash.” ~ Tom Conrad, CTO - Pandora “ pandora.com/newpandora Friday, November 18, 11
If you want to deliver a Web experience on multiple
devices, you have to do it in HTML5” “ ~ Danny Winokur GM of Interactive Development - Adobe Friday, November 18, 11
WHY? Friday, November 18, 11
You already know it. Friday, November 18, 11
What about browser support, man? Friday, November 18, 11
Friday, November 18, 11
Browsers already know it, too. Friday, November 18, 11
html5shiv html5shiv.googlecode.com Friday, November 18, 11
document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... document.createElement(); html5shiv.googlecode.com Friday,
November 18, 11
Because it’s already all around you. Friday, November 18, 11
Because of IE6. Friday, November 18, 11
95% of the Web doesn’t validate. Friday, November 18, 11
Resources Friday, November 18, 11
html5boilerplate.com @boiler_plate Friday, November 18, 11
modernizr.com @modernizr Friday, November 18, 11
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Friday, November 18, 11
vid.ly Friday, November 18, 11
phonegap.com Friday, November 18, 11
MORE RESOURCES - html5doctor.com - html5.validator.nu - html5demos.com - html5accessibility.com/HTML5ASS/
- html5labs.interoperabilitybridges.com - twitter.com/jc/html5 Friday, November 18, 11
4,835,049,149 Friday, November 18, 11
400 New people come online every minute. Friday, November 18,
11
www.lingscars.com Friday, November 18, 11
disneydigitalbooks.go.com/tron/ Friday, November 18, 11
“Do or do not. There is no try.” ~ Yoda
Friday, November 18, 11
Thank you. Twitter: @jc Web: jcornelius.com Friday, November 18, 11