HTML5 battles still to be won

11,295 views
11,144 views

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
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,295
On SlideShare
0
From Embeds
0
Number of Embeds
787
Actions
Shares
0
Downloads
75
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

×