HTML5 Hell Yeah!

#wvhtml5
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

4,835,049,149


www.lingscars.com

TIMELINE


HTML 2
Nov. 1995

Coolio - Gangsta’s Paradise

HTML 3.2
Jan. 1997

Kenny G - Six of Hearts

HTML 4
Dec. 1997

Eminem - The Slim Shady EP

HTML5
Jun.2004

Usher - Yeah!

HTML5
Jun. 2004

apple.com/hotnews/thoughts-on-ﬂash/

I’ll get
you! HTML5
Jun. 2004

apple.com/hotnews/thoughts-on-ﬂash/

apple.com/html5

What it is.


“ In the thinking of its
creators, HTML5 was
always just HTML.”
~ Jeffrey Zeldman

zeldman.com/2011/01/27/html5-vs-html

Natural evolution
of HTML.

blog.whatwg.org/html-is-the-new-html5

Application
Platform

SEMANTICS CSS 3 GRAPHICS 3D MULTIMEDIA

DEVICE PERFORMANCE
CONNECTIVITY OFFLINE STORAGE INTEGRATION
ACCESS


SEMANTICS

!DOCTYPE html


meta charset=“utf-8”


h2
a href=”#”Heading/a
/h2
p
a href=”#”Text/a
/p

Hat Tip: Jeremy Keith

a href=”#”
h2Heading/h2
pText/p
/a


header nav footer
section article
aside details
summary ﬁgure
video audio
canvas

div class=”footer”
div class=”nav”
ul
lia href=”#”This/a/li
lia href=”#”That/a/li
/ul
/div
/div

footer
nav
a href=”#”This/a
a href=”#”That/a
/nav
/footer


time


p
Web Visions is
time datetime=”2011-11-17”
Today
/time
at the MacQuarium.
/p

time
datetime=14:30
datetime=2011-11-17T14:30+00:00
datetime=2011-11-17T14:30Z

html5doctor.com/the-time-element

input type=”email”
input type=”url”


dev.opera.com/articles/view/new-form-features-in-HTML5

nsfw


nsfw
figure
video src=party.mp4/video
figcaptionParty!/figcaption
/figure
/nsfw


section
article


“ ...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


andyrutledge.com/news-redux.php

Section
or
Article?


article

/article

article
header
h2Lauren Cheney Stan.../h2
summaryFrankfurt.../summary
detailsby Shelly.../details
/header

/article

article
header
/header
figure
img src=”/photos/yay.jpg”
figcaptionLaur.../figcaption
/figure

/article

article
header
/header
ﬁgure
/ﬁgure
div id=”content”
pWhen the 79th minute.../p
p.../p
/div

/article

article
header
/header
ﬁgure
/ﬁgure
div id=”content”
pWhen the 79th minute.../p
p.../p
/div
aside
aPrint/a aSingle Page/a
ulli.../lili.../li/ul
/aside
/article

“ 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


nikebetterworld.com

section class=story id=story-freext
article
header
h2One shoe does good, the other.../h2
h1Nike Free TR Fit/h1
pThe Free TR Fit is designed with.../p
a href=/nikeos/gamechangers/Learn more/a
/header
/article
div class=bg/div
/section


section logical sections of
sites and applications.

article content that can be
used elsewhere.


section logical sections of
sites and applications.

article content that can be
used elsewhere.

gsnedders.html5.org/outliner

Beyond the
Rendering Engine


biHi there/b/i

labs.opera.com/news/2011/02/22/

Internet Explorer 9, Safari 5

biHi there/i/bi/i

Firefox, Opera, Chrome

biHi there/i/b

labs.opera.com/news/2011/02/22/

pandora.com/newpandora

“ We realized we could do the full
Pandora experience without Flash.”
~ Tom Conrad, CTO - Pandora

pandora.com/newpandora

“ 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


You already know it.


What about browser support, man?


Browsers already
know it, too.


html5shiv

html5shiv.googlecode.com

document.createElement();
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“section”);
document.createElement(“nav”);
and so on...

html5shiv.googlecode.com

Because it’s already
all around you.


Because of IE6.


95% of the Web
doesn’t validate.


Resources


html5boilerplate.com @boiler_plate

modernizr.com @modernizr

github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyﬁlls

vid.ly

phonegap.com

MORE RESOURCES
- html5doctor.com
- html5.validator.nu
- html5demos.com
- html5accessibility.com/HTML5ASS/
- html5labs.interoperabilitybridges.com
- twitter.com/jc/html5


400
New people come
online every minute.


disneydigitalbooks.go.com/tron/

“Do or do not.
There is no try.”
~ Yoda


Thank you.
Twitter: @jc Web: jcornelius.com


HTML5 Hell Yeah!

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

HTML5 Hell Yeah!