HTML5 battles still to be won

HTML5 - Battles still to bewon! Christian Heilmann, Mozilla, Open Web Camp 3, July 2011

Excitement.

http://www.20thingsilearned.com/

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

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

Misnomer.

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

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

New Tech!

WebGL http://bodybrowser.googlelabs.com

http://ro.me

http://animatable.com

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

Screencast of Nikebetterworld http://nikebetterworld.com/

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

http://www.flickr.com/photos/anvancy/2578351562/

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

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

HTML5 = Using the capabilities of the technology we have instead of limiting ourselves to the lowest common denominator.

Adaptation

Separation of concerns.

In the old days...Behaviour HTMLPresentationStructure

DHTML days (1)Behaviour JSPresentation HTMLStructure JS

DHTML days (2)Behaviour CSSPresentation JS HTMLStructure

The gospel (according to Zeldman)Behaviour JS CSSPresentation HTMLStructure

The now...Behaviour SS JS C ntation PreseStructure HTML

The challenge: Applying best practices of the past without sounding like grumpy old people.

The solution: Following the spirit of best practices and pointing out their benefits instead of harping on about them.

Agnosticismhttp://www.flickr.com/photos/amulligan/270191276/

Causes to fight for.

http://wufoo.com/html5/

Learn JavaScript!

Keep the web OS-independent

CMD+U(CTRL+U)

Things to applaud: Sane progressive enhancement.

http://benthebodyguard.com

http://animatable.com

What about oldinfrastructure?

http://html5boilerplate.com/

http://www.modernizr.com/

Danger.

Support means you to test withit.Don’t support if you can’tensure a good experience.Don’t waste testing time on theundead.

Check this out!

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 http://www.flickr.com/photos/spentrails/3245564940

Geolocation

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

http://diveintohtml5.org/

http://html5doctor.com/

https://build.phonegap.com/

Web Development has been a long and arduousjourney...

It is time we have some fun!

Cheers!Chris Heilmann @codepo8 #mozilla#html5/freenet

http://webprofessionals.org	714
http://lanyrd.com	22
http://feeds2.feedburner.com	14
https://twitter.com	8
http://twitter.com	7
http://tweetedtimes.com	2
http://paper.li	1

HTML5 battles still to be won

by Christian Heilmann on Jul 16, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 768

Statistics

HTML5 battles still to be won Presentation Transcript