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
350
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
28
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
200
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
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
4
300
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
140
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.3k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
140
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
470
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
230
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Become a Pro
speakerdeck
PRO
26
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Automating Front-end Workflow
addyosmani
1367
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
610
210k
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