HTML5 Hell Yeah!

Friday, November 18, 11


#wvhtml5Friday, 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

“


http://www.onlineschools.org/state-of-the-internet/soti.html

http://www.onlineschools.org/state-of-the-internet/soti.html

4,835,049,149


www.lingscars.comFriday, November 18, 11


TIMELINE


HTML 2Nov. 1995

Coolio - Gangsta’s ParadiseFriday, November 18, 11

HTML 3.2Jan. 1997

Kenny G - Six of HeartsFriday, November 18, 11

HTML 4Dec. 1997

Eminem - The Slim Shady EPFriday, November 18, 11

HTML5Jun.�� 2004

Usher - Yeah!Friday, November 18, 11

HTML5Jun.�� 2004

Usher - Yeah!Friday, November 18, 11

HTML5Jun. 2004

apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11

HTML5Jun. 2004

I’ll get you!

apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11

apple.com/html5Friday, November 18, 11

apple.com/html5Friday, November 18, 11

What it is.


In the thinking of its creators, HTML5 was always just HTML.”

~ Jeffrey Zeldman

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

“


http://www.zeldman.com/2011/01/27/html5-vs-html/

http://www.zeldman.com/2011/01/27/html5-vs-html/

Natural evolutionof HTML.

blog.whatwg.org/html-is-the-new-html5Friday, November 18, 11

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

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

ApplicationPlatform

SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA

DEVICE ACCESS

CONNECTIVITY OFFLINE STORAGEPERFORMANCE &

INTEGRATION


SEMANTICSFriday, November 18, 11

<!DOCTYPE html>


<meta charset=“utf-8”>


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

Hat Tip: Jeremy KeithFriday, November 18, 11

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


<header> <nav> <footer><section> <article><aside> <details>

<summary> <figure><video> <audio>

<canvas>


<div class=”footer”> <div class=”nav”> <ul> <li><a href=”#”>This</a></li> <li><a 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>Friday, November 18, 11

datetime="14:30"

datetime="2011-11-17T14:30+00:00"

datetime="2011-11-17T14:30Z"

<time>

html5doctor.com/the-time-elementFriday, November 18, 11

http://html5doctor.com/the-time-element/

http://html5doctor.com/the-time-element/

<input type=”email”>

<input type=”url”>


dev.opera.com/articles/view/new-form-features-in-HTML5Friday, November 18, 11

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

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

<nsfw>


<nsfw>

<figure>

<video src="party.mp4"></video>

<figcaption>Party!</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.phpFriday, November 18, 11

http://andyrutledge.com/news-redux.php





Section or

Article?




Section or

Article?




Section or

Article?




Section or

Article?








<article>

</article>andyrutledge.com/news-redux.php




<article>

</article>

<header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details></header>




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




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




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




<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.comFriday, November 18, 11

http://www.nikebetterworld.com


nikebetterworld.comFriday, 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>


http://www.nike.com/nikeos/p/gamechangers/en_US/cd_how_it_works

http://www.nike.com/nikeos/p/gamechangers/en_US/cd_how_it_works

<section>

<article>

logical sections of sites and applications.

content that can be used elsewhere.


<section>

<article>

logical sections of sites and applications.

content that can be used elsewhere.

gsnedders.html5.org/outlinerFriday, November 18, 11

http://gsnedders.html5.org/outliner/

http://gsnedders.html5.org/outliner/

Beyond the Rendering Engine


<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/newpandoraFriday, November 18, 11

We realized we could do the full Pandora experience without Flash.”

~ Tom Conrad, CTO - Pandora

“

pandora.com/newpandoraFriday, November 18, 11

If you want to deliver a Web experience on multiple devices, you have to do it in HTML5”

“

~ Danny WinokurGM of Interactive Development - Adobe


WHY?Friday, November 18, 11

You already know it.


What about browser support, man?



Browsers already know it, too.


html5shiv

html5shiv.googlecode.comFriday, November 18, 11

http://html5shiv.googlecode.com


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

document.createElement();

html5shiv.googlecode.comFriday, November 18, 11



Because it’s already all around you.


Because of IE6.


95% of the Webdoesn’t validate.


Resources


html5boilerplate.com @boiler_plateFriday, November 18, 11

modernizr.com @modernizrFriday, November 18, 11

github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsFriday, November 18, 11

vid.lyFriday, November 18, 11

http://mbostock.github.com/d3/ex/stack.html

http://mbostock.github.com/d3/ex/stack.html

phonegap.comFriday, November 18, 11

MORE RESOURCES

- html5doctor.com

- html5.validator.nu

- html5demos.com

- html5accessibility.com/HTML5ASS/

- html5labs.interoperabilitybridges.com

- twitter.com/jc/html5


4,835,049,149


400 New people come

online every minute.


www.lingscars.comFriday, November 18, 11

http://www.lingscars.com

http://www.lingscars.com

disneydigitalbooks.go.com/tron/Friday, November 18, 11

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

~ Yoda


Thank you.

Twitter: @jc Web: jcornelius.com


Technology

HTML5 Hell Yeah!