HTML5 - Yeah!
72
Monday, August 8, 11
-
Upload
j-cornelius -
Category
Technology
-
view
4.711 -
download
2
description
There's a lot of talk about the what and the how of HTML5. This talk aims to cover the why. Why you should care. Why it’s important. Why you should use it now.
Transcript of HTML5 - Yeah!
Monday, August 8, 11
#remixhtml5
Monday, August 8, 11
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.comMonday, August 8, 11
TIMELINE
Monday, August 8, 11
HTML 2Nov. 1995
Coolio - Gangsta’s ParadiseMonday, August 8, 11
HTML 3.2Jan. 1997
Kenny G - Six of HeartsMonday, August 8, 11
HTML 4Dec. 1997
Eminem - The Slim Shady EPMonday, August 8, 11
XHTML 1.0Jan. 2000
The Presidents of the United States of America - LumpMonday, August 8, 11
/> Monday, August 8, 11
XHTML 1.1May 2001
Janet Jackson - All For YouMonday, August 8, 11
HTML5Jun. 2004
Usher - Yeah!Monday, August 8, 11
HTML5Jun. 2004
I’ll get you!
apple.com/hotnews/thoughts-on-flash/Monday, August 8, 11
apple.com/html5Monday, August 8, 11
Web 3.0Web 2.0
What it’s not:Flash Killer
Silverlight KillerCSS3
jQuery
Animations
MooTools
YUI
VideoYUIYUI
AudioGames
Everything
Monday, August 8, 11
HTML 5see 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 evolutionof HTML.HTML
http://blog.whatwg.org/html-is-the-new-html5Monday, August 8, 11
ApplicationPlatform
SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA
DEVICE ACCESS
CONNECTIVITY OFFLINE STORAGEPERFORMANCE &
INTEGRATION
Monday, August 8, 11
SEMANTICS
Monday, August 8, 11
/> >==
/>> >
but really
Monday, August 8, 11
<!DOCTYPE html>
Monday, August 8, 11
<meta charset=”utf-8”>
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> <figure><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>
</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.phpMonday, August 8, 11
ApplicationPlatform
SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA
DEVICE ACCESS
CONNECTIVITY OFFLINE STORAGEPERFORMANCE &
INTEGRATION
Monday, August 8, 11
www.nikebetterworld.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
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
Offline 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 Webdoesn’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.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-PolyfillsMonday, 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
nissanusa.com/leaf-electric-carMonday, August 8, 11
“Do or do not. There is no try.”
~ Yoda
Monday, August 8, 11
Thank you.
J. Corneliusjcornelius.com
Monday, August 8, 11
