HTML5 for all

Christian Heilmann, Mozilla, Converge SE, Columbia, SC, June 2011 Picture of win by Marina Lawson, who rocks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML - cest moi!</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="magic.js"> </script></head><body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>HTML5, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p></body></html>

<!DOCTYPE html><html lang="en"><head> <title>HTML5, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <header><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </section> <footer><p>By me!</p></footer></body></html>

<sec tion > <n <asid av> <hea e> < <art der> hgro icle><ma <foo up> rk> < ter> deta <tim <ﬁgc ils> < e> aptio ﬁgur n> .. e> .

<video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>

And that’s it!

http://www.20thingsilearned.com/

http://wheelsofsteel.nethttp://wheelsofsteel.net

Using capacities...

http://folding.stanford.edu/http://folding.stanford.edu/

10.2 bnAndroid Devices

42.3 bniPhones

2 numbers I made up and showed in a keynote style fashion!

Building thefuture web...

NIH http://en.wikipedia.org/wiki/Not_Invented_Herehttp://www.flickr.com/photos/tillwe/1526490488/http://www.flickr.com/photos/london/51301816/

Old and goodprinciples.

CMD+U(CTRL+U)

Company support

http://www.youtube.com/watch?v=p92QfWOw88I

http://forums.silverlight.net/forums/p/230502/562077.aspx

Screencast of Nikebetterworld http://nikebetterworld.com/

http://www.nissanusa.com/leaf-electric-car/index

Adapting tochange...

HTML(5)Markup general WTFJavaScript APIsStuff for Browser/Parser developers

Let’s check thetoy box!

http://c64.superdefault.com/

Mediaqueries http://jasonweaver.name

HTML5 Video + Canvas http://thisshell.com

History pushstate http://github.com

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

http://highcharts.com

Local Storage http://www.flickr.com/photos/blude/2665906010/

Offline

Geolocation

Web Sockets

WebGL http://bodybrowser.googlelabs.com

WebGL http://pepetz.com

http://ro.me

https://demos.mozilla.org/en-US/#holo-mobile

http://animatable.com

http://wheelsofsteel.nethttp://www.schillmania.com/content/entries/2011/wheels-of-steel/

http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor

Help is available!

http://butterapp.org | http://popcorn.js

http://html5boilerplate.com/

http://www.modernizr.com/

http://diveintohtml5.org/

http://html5doctor.com/

http://www.htmlfivewow.com/

https://build.phonegap.com/

http://webowonder.org

Thank you!Chris Heilmann@codepo8http://wait-till-i.com

http://paper.li	3
http://twitter.com	2
https://twitter.com	1
http://cr.lk	1

HTML5 for all

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 7

Statistics

HTML5 for all Presentation Transcript