Post on 15-Jan-2015
description
Friday, November 18, 11
Friday, November 18, 11
#wvhtml5Friday, November 18, 11
Friday, 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
“
Friday, November 18, 11
4,835,049,149
Friday, November 18, 11
www.lingscars.comFriday, November 18, 11
Friday, November 18, 11
TIMELINE
Friday, November 18, 11
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.
Friday, November 18, 11
In the thinking of its creators, HTML5 was always just HTML.”
~ Jeffrey Zeldman
zeldman.com/2011/01/27/html5-vs-html
“
Friday, November 18, 11
Natural evolutionof HTML.
blog.whatwg.org/html-is-the-new-html5Friday, November 18, 11
ApplicationPlatform
SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA
DEVICE ACCESS
CONNECTIVITY OFFLINE STORAGEPERFORMANCE &
INTEGRATION
Friday, November 18, 11
SEMANTICSFriday, November 18, 11
<!DOCTYPE html>
Friday, November 18, 11
<meta charset=“utf-8”>
Friday, November 18, 11
<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>
Hat Tip: Jeremy KeithFriday, November 18, 11
<header> <nav> <footer><section> <article><aside> <details>
<summary> <figure><video> <audio>
<canvas>
Friday, November 18, 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 KeithFriday, November 18, 11
<footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav></footer>
Hat Tip: Jeremy KeithFriday, November 18, 11
<time>
Friday, November 18, 11
<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
<input type=”email”>
<input type=”url”>
Friday, November 18, 11
dev.opera.com/articles/view/new-form-features-in-HTML5Friday, November 18, 11
<nsfw>
Friday, November 18, 11
<nsfw>
<figure>
<video src="party.mp4"></video>
<figcaption>Party!</figcaption>
</figure>
</nsfw>
Friday, November 18, 11
<section>
<article>
Friday, November 18, 11
...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
Friday, November 18, 11
andyrutledge.com/news-redux.phpFriday, November 18, 11
andyrutledge.com/news-redux.phpFriday, November 18, 11
Section or
Article?
andyrutledge.com/news-redux.phpFriday, November 18, 11
Section or
Article?
andyrutledge.com/news-redux.phpFriday, November 18, 11
Section or
Article?
andyrutledge.com/news-redux.phpFriday, November 18, 11
Section or
Article?
andyrutledge.com/news-redux.phpFriday, November 18, 11
andyrutledge.com/news-redux.phpFriday, November 18, 11
<article>
</article>andyrutledge.com/news-redux.php
Friday, November 18, 11
<article>
</article>
<header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details></header>
andyrutledge.com/news-redux.phpFriday, November 18, 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>
andyrutledge.com/news-redux.phpFriday, November 18, 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><div id=”content”> <p>When the 79th minute...</p> <p>...</p></div>
andyrutledge.com/news-redux.phpFriday, November 18, 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><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.phpFriday, November 18, 11
<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
Friday, November 18, 11
nikebetterworld.comFriday, November 18, 11
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>
Friday, November 18, 11
<section>
<article>
logical sections of sites and applications.
content that can be used elsewhere.
Friday, November 18, 11
<section>
<article>
logical sections of sites and applications.
content that can be used elsewhere.
gsnedders.html5.org/outlinerFriday, November 18, 11
Beyond the Rendering Engine
Friday, November 18, 11
<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
Friday, November 18, 11
WHY?Friday, November 18, 11
You already know it.
Friday, November 18, 11
What about browser support, man?
Friday, November 18, 11
Friday, November 18, 11
Browsers already know it, too.
Friday, November 18, 11
html5shiv
html5shiv.googlecode.comFriday, November 18, 11
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.
Friday, November 18, 11
Because of IE6.
Friday, November 18, 11
95% of the Webdoesn’t validate.
Friday, November 18, 11
Resources
Friday, November 18, 11
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
phonegap.comFriday, November 18, 11
MORE RESOURCES
- html5doctor.com
- html5.validator.nu
- html5demos.com
- html5accessibility.com/HTML5ASS/
- html5labs.interoperabilitybridges.com
- twitter.com/jc/html5
Friday, November 18, 11
4,835,049,149
Friday, November 18, 11
400 New people come
online every minute.
Friday, November 18, 11
disneydigitalbooks.go.com/tron/Friday, November 18, 11
“Do or do not. There is no try.”
~ Yoda
Friday, November 18, 11
Thank you.
Twitter: @jc Web: jcornelius.com
Friday, November 18, 11