HTML5 battles still to be won

  • 10,844 views
Uploaded 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.

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.

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,844
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
74
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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