• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 battles still to be won
 

HTML5 battles still to be won

on

  • 11,176 views

HTML5 is here to stay. It is time to re-think some of the best practices we defined in the last years. This keynote of the open web camp in stanford, california describes what we should consider.

HTML5 is here to stay. It is time to re-think some of the best practices we defined in the last years. This keynote of the open web camp in stanford, california describes what we should consider.

Statistics

Views

Total Views
11,176
Views on SlideShare
10,391
Embed Views
785

Actions

Likes
11
Downloads
73
Comments
0

7 Embeds 785

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

HTML5 battles still to be won HTML5 battles still to be won Presentation Transcript

  • 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 <figc ils> < e> aptio figur n> .. e> .
  • <video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>
  • <can vas> </ca n vas>
  • 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
  • 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
  • CSS3
  • 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