The Why of HTML5 - ConvergeSE 2012

Hi! I’m J. @jc #convergese jcornelius.com

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

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.

HTML5 Jun. 2004 I’ll get you! 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
ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION

SEMANTICS

<!DOCTYPE html>

<h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip:
Jeremy Keith

<a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith

<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

<footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip:
Jeremy Keith

<div class=”header”> <h1>Title</h1> </div>

<header> <h1>Title</h1> </header>

<header> <h1>Title</h1> <h2>Subtitle</h2> </header>

<header> <h1>Title</h1> <h2>Subtitle</h2> <ul class=”nav”> <li><a href=”#”>Link</a><li> <li><a href=”#”>Link</a><li> <li><a
href=”#”>Link</a><li> </ul> </header>

<header> <h1>Title</h1> <h2>Subtitle</h2> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a href=”#”>Link</a>
</nav> </header>

<header> <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a>
<a href=”#”>Link</a> </nav> </header>

<article> <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> <p> ... </p> <p> ...
</p> </article>

<header> <h1>Page Title</h1> </header> <article> <hgroup> <h1>Article Title</h1> <h2>Article Subtitle</h2>
</hgroup> </article> <footer> <h3>Links</h3> <nav> ... </nav> </footer> http://gsnedders.html5.org/outliner/ 1. Page Title a. Article Title b. Links

<footer> <ul class=”subnav”> <li><a href=”#”>Link</a></li> <li><a href=”#”>Link</a></li> <li><a href=”#”>Link</a></li> </ul>
<p>Copyright © 2012</p> </footer>

<footer> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a href=”#”>Link</a> </nav> <p>Copyright
© 2012</p> </footer>

nav { padding:.35em .5em; } header nav { border-bottom:2px solid
#aaa; margin:1.65em 0; } footer nav { border-top:1px solid #ddd; margin:3em 0 0; }

...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? andyrutledge.com/news-redux.php

<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> andyrutledge.com/news-redux.php

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

<section> <article> logical sections of sites and applications. content that
can be used elsewhere. gsnedders.html5.org/outliner

<time>

<p> ConvergeSE is <time datetime=”2012-04-27”> Today </time> in Columbia, SC.
</p>

datetime="14:30" datetime="2011-11-17T14:30+00:00" datetime="2011-11-17T14:30Z" <time> ✔ ✘ datetime="0300 B.C." datetime="July 2004"

<article> <header> <p>Published on <time datetime=”2012-04-27” pubdate>April 27th, 2012</time> </p>
</header> <div class=”content”> ... </div> </article>

<form>

W3C Table of Content Attributes http://dev.w3.org/html5/spec/single-page.html#the-input-element

<div class="placeholding-input email"> <input type="text" class="text-input email-input" name="session[email]" title="Email Address"
autocomplete="on"> <span class="placeholder">Email Address</span> </div>

<label class="email"> <input type="email" name="session[email]" title="Email Address" autocomplete="on"> </label> (blame
Internet Explorer)

<label> Part Number: <input type=”text” pattern=”[0-9][A-Z]{3}” title="A part number is
a digit followed by three uppercase letters."> </label>

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

<audio src="song.oga" controls> <a href="song.oga">Download </a> </audio>

Chrome Firefox Safari Opera ( requires { display:block } )

<video src=”video.ogv” poster=”poster.jpg” width=”320” height=”240” controls> <a href=”video.ogv”>Download</a> </video>

<video poster=”poster.jpg” width=”320” height=”240” controls> <source src=”video.ogv” type=”video/ogg”> <source src=”video.mp4”
type=”video/mp4”> <a href=”video.ogv”>Download</a>  </video>

Chrome Firefox Safari Opera

www.thisshell.com

<nsfw>

<nsfw> <figure> <video src="party.mp4"></video> <figcaption>Party!</figcaption> </figure> </nsfw>

Beyond the Rendering Engine

<b><i>Hi there</b></i>

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/

http://mbostock.github.com/d3/

http://www.cuttherope.ie/dev/

If you want to deliver a Web experience on multiple
devices, you have to do it in HTML5” “ ~ Danny Winokur Vice President and 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(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... document.createElement(); html5shiv.googlecode.com

Because it’s already all around you.

Because of IE.

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. 4,835,049,149

disneydigitalbooks.go.com/tron/

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

@jc #convergese jcornelius.com Thanks!

The Why of HTML5 - ConvergeSE 2012

The Why of HTML5 - ConvergeSE 2012

More Decks by J Cornelius

Other Decks in Technology

Featured

Transcript