Slide 1
Slide 1 text
Monday, August 8, 11
Slide 2
Slide 2 text
#remixhtml5
Monday, August 8, 11
Slide 3
Slide 3 text
Monday, August 8, 11
Slide 4
Slide 4 text
WHY?
Monday, August 8, 11
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
4,835,049,149
Monday, August 8, 11
Slide 7
Slide 7 text
www.lingscars.com
Monday, August 8, 11
Slide 8
Slide 8 text
TIMELINE
Monday, August 8, 11
Slide 9
Slide 9 text
HTML 2
Nov. 1995
Coolio - Gangsta’s Paradise
Monday, August 8, 11
Slide 10
Slide 10 text
HTML 3.2
Jan. 1997
Kenny G - Six of Hearts
Monday, August 8, 11
Slide 11
Slide 11 text
HTML 4
Dec. 1997
Eminem - The Slim Shady EP
Monday, August 8, 11
Slide 12
Slide 12 text
XHTML 1.0
Jan. 2000
The Presidents of the United States of America - Lump
Monday, August 8, 11
Slide 13
Slide 13 text
/>
Monday, August 8, 11
Slide 14
Slide 14 text
XHTML 1.1
May 2001
Janet Jackson - All For You
Monday, August 8, 11
Slide 15
Slide 15 text
HTML5
Jun. 2004
Usher - Yeah!
Monday, August 8, 11
Slide 16
Slide 16 text
HTML5
Jun. 2004
I’ll get
you!
apple.com/hotnews/thoughts-on-flash/
Monday, August 8, 11
Slide 17
Slide 17 text
apple.com/html5
Monday, August 8, 11
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
HTML 5
see that space?
...and it’s not
Monday, August 8, 11
Slide 20
Slide 20 text
What it is.
Monday, August 8, 11
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Natural evolution
of HTML.
HTML
http://blog.whatwg.org/html-is-the-new-html5
Monday, August 8, 11
Slide 23
Slide 23 text
Application
Platform
SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA
DEVICE
ACCESS
CONNECTIVITY OFFLINE STORAGE
PERFORMANCE &
INTEGRATION
Monday, August 8, 11
Slide 24
Slide 24 text
SEMANTICS
Monday, August 8, 11
Slide 25
Slide 25 text
/> >
==
/>
> >
but really
Monday, August 8, 11
Slide 26
Slide 26 text
Monday, August 8, 11
Slide 27
Slide 27 text
Monday, August 8, 11
Slide 30
Slide 30 text
<figure>
Monday, August 8, 11
Slide 33
Slide 33 text
Slide 34
Slide 34 text
http://dev.opera.com/articles/view/new-form-features-in-HTML5/
Monday, August 8, 11
Slide 35
Slide 35 text
Monday, August 8, 11
Slide 36
Slide 36 text
http://andyrutledge.com/news-redux.php
Monday, August 8, 11
Slide 37
Slide 37 text
Section
or
Article?
http://andyrutledge.com/news-redux.php
Monday, August 8, 11
Slide 38
Slide 38 text
Lauren Cheney Stan...
Frankfurt... by Shelly... <figure>
<figcaption>Laur...
When the 79th minute...
...
Print Single Page- ...
- ...
Slide 39
Slide 39 text
Application
Platform
SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA
DEVICE
ACCESS
CONNECTIVITY OFFLINE STORAGE
PERFORMANCE &
INTEGRATION
Monday, August 8, 11
Slide 40
Slide 40 text
www.nikebetterworld.com
Monday, August 8, 11
Slide 41
Slide 41 text
www.thisshell.com
Monday, August 8, 11
Slide 42
Slide 42 text
http://mbostock.github.com/d3/ex/stack.html
Monday, August 8, 11
Slide 43
Slide 43 text
http://mbostock.github.com/d3/ex/bullet.html
Monday, August 8, 11
Slide 44
Slide 44 text
phonegap.com
Monday, August 8, 11
Slide 45
Slide 45 text
We realized we could do the full
Pandora experience without Flash.”
~ Tom Conrad, CTO - Pandora
“
pandora.com/newpandora
Monday, August 8, 11
Slide 46
Slide 46 text
WHY?
Monday, August 8, 11
Slide 47
Slide 47 text
You already know it.
Monday, August 8, 11
Slide 48
Slide 48 text
What about browser support, man?
Monday, August 8, 11
Slide 49
Slide 49 text
Monday, August 8, 11
Slide 50
Slide 50 text
Browsers already
know it, too.
Monday, August 8, 11
Slide 51
Slide 51 text
document.createElement();
http://html5shiv.googlecode.com
Monday, August 8, 11
Slide 52
Slide 52 text
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“section”);
document.createElement(“nav”);
and so on...
http://html5shiv.googlecode.com
Monday, August 8, 11
Slide 53
Slide 53 text
Offline Storage
Monday, August 8, 11
Slide 54
Slide 54 text
Geolocation
Monday, August 8, 11
Slide 55
Slide 55 text
Because it’s already
all around you.
Monday, August 8, 11
Slide 56
Slide 56 text
Because of IE6.
Monday, August 8, 11
Slide 57
Slide 57 text
95% of the Web
doesn’t validate.
Monday, August 8, 11
Slide 58
Slide 58 text
Beyond the
Rendering Engine
Monday, August 8, 11
Slide 59
Slide 59 text
Hi there
http://labs.opera.com/news/2011/02/22/
Monday, August 8, 11
Slide 60
Slide 60 text
Internet Explorer 9, Safari 5
Hi there
Hi there
Firefox, Opera, Chrome
http://labs.opera.com/news/2011/02/22/
Monday, August 8, 11
Slide 61
Slide 61 text
Because it’s cool.
Monday, August 8, 11
Slide 62
Slide 62 text
Resources
Monday, August 8, 11
Slide 63
Slide 63 text
vid.ly
Monday, August 8, 11
Slide 64
Slide 64 text
html5boilerplate.com @boiler_plate
Monday, August 8, 11
Slide 65
Slide 65 text
modernizr.com @modernizr
Monday, August 8, 11
Slide 66
Slide 66 text
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Monday, August 8, 11
Slide 67
Slide 67 text
MORE RESOURCES
- diveintohtml5.com
- html5doctor.com
- html5wow.com
- html5demos.com
- html5accessibility.com/HTML5ASS/
- html5labs.interoperabilitybridges.com
Monday, August 8, 11
Slide 68
Slide 68 text
400
New people come
online every minute
4,835,049,149
Monday, August 8, 11
Slide 69
Slide 69 text
www.lingscars.com
Monday, August 8, 11
Slide 70
Slide 70 text
nissanusa.com/leaf-electric-car
Monday, August 8, 11
Slide 71
Slide 71 text
“Do or do not.
There is no try.”
~ Yoda
Monday, August 8, 11
Slide 72
Slide 72 text
Thank you.
J. Cornelius
jcornelius.com
Monday, August 8, 11