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
26
Human-Centered Product Design
jc
3
330
Designing for Humans
jc
1
81
Redesign Your Design Thinking
jc
5
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
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Engineer Career Talk
lycorp_recruit_jp
0
190
Platform Engineering for Software Developers and Architects
syntasso
1
520
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
強いチームと開発生産性
onk
PRO
35
11k
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
200
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
660
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Side Projects
sachag
452
42k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Rails Girls Zürich Keynote
gr2m
94
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing Experiences People Love
moore
138
23k
4 Signs Your Business is Dying
shpigford
180
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
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