Your SlideShare is downloading. ×
0
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 htt...
<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <title>HTML5, cest moi, ou HTML...</title>  <link rel="styl...
<!DOCTYPE html><html lang="en"><head>  <title>HTML5, cest moi, ou HTML...</title>  <link rel="stylesheet" href="styles.css...
<sec       tion            > <n      <asid      av> <hea       e> <       <art      der>       hgro       icle><ma        ...
<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.fli...
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 denomi...
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                            ...
The now...Behaviour                          SS                               JS                        C       ntation Pr...
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...
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
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
HTML5 battles still to be won
Upcoming SlideShare
Loading in...5
×

HTML5 battles still to be won

10,985

Published on

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.

Published in: Education, Technology, Design

Transcript of "HTML5 battles still to be won"

  1. 1. HTML5 - Battles still to bewon! Christian Heilmann, Mozilla, Open Web Camp 3, July 2011
  2. 2. Excitement.
  3. 3. http://www.20thingsilearned.com/
  4. 4. http://www.youtube.com/watch?v=p92QfWOw88I
  5. 5. http://wheelsofsteel.nethttp://wheelsofsteel.net
  6. 6. Misnomer.
  7. 7. <!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>
  8. 8. <!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>
  9. 9. <!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>
  10. 10. <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> .
  11. 11. <video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>
  12. 12. <can vas> </ca n vas>
  13. 13. HTML(5)Markup general WTFJavaScript APIsStuff for Browser/Parser developers
  14. 14. New Tech!
  15. 15. WebGL http://bodybrowser.googlelabs.com
  16. 16. http://ro.me
  17. 17. http://animatable.com
  18. 18. http://www.nissanusa.com/leaf-electric-car/index
  19. 19. Screencast of Nikebetterworld http://nikebetterworld.com/
  20. 20. http://wheelsofsteel.nethttp://www.schillmania.com/content/entries/2011/wheels-of-steel/
  21. 21. http://www.flickr.com/photos/anvancy/2578351562/
  22. 22. NIH http://en.wikipedia.org/wiki/Not_Invented_Herehttp://www.flickr.com/photos/tillwe/1526490488/http://www.flickr.com/photos/london/51301816/
  23. 23. http://folding.stanford.edu/http://folding.stanford.edu/
  24. 24. HTML5 = Using the capabilities of the technology we have instead of limiting ourselves to the lowest common denominator.
  25. 25. Adaptation
  26. 26. Separation of concerns.
  27. 27. In the old days...Behaviour HTMLPresentationStructure
  28. 28. DHTML days (1)Behaviour JSPresentation HTMLStructure JS
  29. 29. DHTML days (2)Behaviour CSSPresentation JS HTMLStructure
  30. 30. The gospel (according to Zeldman)Behaviour JS CSSPresentation HTMLStructure
  31. 31. The now...Behaviour SS JS C ntation PreseStructure HTML
  32. 32. The challenge: Applying best practices of the past without sounding like grumpy old people.
  33. 33. The solution: Following the spirit of best practices and pointing out their benefits instead of harping on about them.
  34. 34. Agnosticismhttp://www.flickr.com/photos/amulligan/270191276/
  35. 35. Causes to fight for.
  36. 36. http://wufoo.com/html5/
  37. 37. Learn JavaScript!
  38. 38. Keep the web OS-independent
  39. 39. CMD+U(CTRL+U)
  40. 40. Things to applaud: Sane progressive enhancement.
  41. 41. http://benthebodyguard.com
  42. 42. http://animatable.com
  43. 43. http://animatable.com
  44. 44. What about oldinfrastructure?
  45. 45. http://html5boilerplate.com/
  46. 46. http://www.modernizr.com/
  47. 47. Danger.
  48. 48. Support means you to test withit.Don’t support if you can’tensure a good experience.Don’t waste testing time on theundead.
  49. 49. Check this out!
  50. 50. http://c64.superdefault.com/
  51. 51. Mediaqueries http://jasonweaver.name
  52. 52. HTML5 Video + Canvas http://thisshell.com
  53. 53. History pushstate http://github.com
  54. 54. SVG http://mbostock.github.com/d3/
  55. 55. http://highcharts.com
  56. 56. Local Storage http://www.flickr.com/photos/blude/2665906010/
  57. 57. Offline http://www.flickr.com/photos/spentrails/3245564940
  58. 58. CSS3
  59. 59. Geolocation
  60. 60. https://demos.mozilla.org/en-US/#holo-mobile
  61. 61. http://diveintohtml5.org/
  62. 62. http://html5doctor.com/
  63. 63. https://build.phonegap.com/
  64. 64. Web Development has been a long and arduousjourney...
  65. 65. It is time we have some fun!
  66. 66. Cheers!Chris Heilmann @codepo8 #mozilla#html5/freenet
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×