HTML5 - Yeah!

Monday, August 8, 11

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

HTML 4 Dec. 1997 Eminem - The Slim Shady EP

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

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

HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-ﬂash/ 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

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

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

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

Oﬄine 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-Polyﬁlls 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

Thank you. J. Cornelius jcornelius.com Monday, August 8, 11

HTML5 - Yeah!

HTML5 - Yeah!

More Decks by J Cornelius

Other Decks in Technology

Featured

Transcript