HTML5 - Yeah!

Monday, August 8, 11

#remixhtml5Monday, 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.htmlMonday, August 8, 11

4,835,049,149Monday, August 8, 11

www.lingscars.comMonday, August 8, 11

TIMELINEMonday, August 8, 11

HTML 2 Nov. 1995 Coolio - Gangsta’s ParadiseMonday, August 8, 11

HTML 3.2 Jan. 1997 Kenny G - Six of HeartsMonday, August 8, 11

HTML 4 Dec. 1997 Eminem - The Slim Shady EPMonday, August 8, 11

XHTML 1.0 Jan. 2000 The Presidents of the United States of America - LumpMonday, August 8, 11

/>Monday, August 8, 11

XHTML 1.1 May 2001 Janet Jackson - All For YouMonday, August 8, 11

HTML5 Jun. 2004 Usher - Yeah!Monday, August 8, 11

I’ll get you! HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-ﬂash/Monday, August 8, 11

apple.com/html5Monday, August 8, 11

Web 2.0 Web 3.0 Everything jQuery MooTools What it’s not: Games Flash Killer YUI Audio CSS3 Silverlight Killer Animations VideoMonday, August 8, 11

...and it’s not HTML 5 see that space?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 HTML of HTML. http://blog.whatwg.org/html-is-the-new-html5Monday, August 8, 11

Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE PERFORMANCE & CONNECTIVITY OFFLINE STORAGE INTEGRATION ACCESSMonday, August 8, 11

SEMANTICSMonday, August 8, 11

/> == > but really > > />Monday, August 8, 11

<!DOCTYPE html>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> <ﬁgure> <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.phpMonday, August 8, 11

Section or Article? http://andyrutledge.com/news-redux.phpMonday, August 8, 11

<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></article> http://andyrutledge.com/news-redux.phpMonday, August 8, 11

Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE PERFORMANCE & CONNECTIVITY OFFLINE STORAGE INTEGRATION ACCESSMonday, August 8, 11

www.nikebetterworld.comMonday, August 8, 11

www.thisshell.comMonday, August 8, 11

http://mbostock.github.com/d3/ex/stack.htmlMonday, August 8, 11

http://mbostock.github.com/d3/ex/bullet.htmlMonday, August 8, 11

phonegap.comMonday, August 8, 11

“ We realized we could do the full Pandora experience without Flash.” ~ Tom Conrad, CTO - Pandora pandora.com/newpandoraMonday, 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

Browsers already know it, too.Monday, August 8, 11

document.createElement(); http://html5shiv.googlecode.comMonday, August 8, 11

document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... http://html5shiv.googlecode.comMonday, August 8, 11

Oﬄine StorageMonday, August 8, 11

GeolocationMonday, 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 EngineMonday, 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><i></i> Firefox, Opera, Chrome <b><i>Hi there</i></b> http://labs.opera.com/news/2011/02/22/Monday, August 8, 11

Because it’s cool.Monday, August 8, 11

ResourcesMonday, August 8, 11

vid.lyMonday, August 8, 11

html5boilerplate.com @boiler_plateMonday, August 8, 11

modernizr.com @modernizrMonday, August 8, 11

github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyﬁllsMonday, August 8, 11

MORE RESOURCES - diveintohtml5.com - html5doctor.com - html5wow.com - html5demos.com - html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.comMonday, August 8, 11

4,835,049,149 400 New people come online every minuteMonday, August 8, 11

www.lingscars.comMonday, August 8, 11

nissanusa.com/leaf-electric-carMonday, August 8, 11

“Do or do not. There is no try.” ~ YodaMonday, August 8, 11

Thank you. J. Cornelius jcornelius.comMonday, August 8, 11

HTML5 - Yeah!

by J Cornelius

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 5

Statistics

HTML5 - Yeah! Presentation Transcript

http://twitter.com	3
http://us-w1.rockmelt.com	2