Downloaded 75 times
Uploaded byChristian Heilmann
HTML5 battles still to be won
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 battles still to be won
- 1. HTML5 - Battlesstill to be won! Christian Heilmann, Mozilla, Open Web Camp 3, July 2011
- 2.
- 5.
- 6.
- 7.
- 9.
- 10. <!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 - c'est 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>
- 15. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5, c'est 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>
- 16. <!DOCTYPE html> <html lang="en"> <head> <title>HTML5, c'est 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>
- 17. <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> .
- 19. <video src="interview.ogv" controls> <a href="interview.ogv">Download video</a> </video>
- 20. <can vas> </ca n vas>
- 21. HTML(5) Markup general WTF JavaScript APIs Stuff for Browser/Parser developers
- 22.
- 24. WebGL http://bodybrowser.googlelabs.com
- 25.
- 26.
- 28.
- 29. Screencast of Nikebetterworld http://nikebetterworld.com/
- 30.
- 31.
- 35. NIH http://en.wikipedia.org/wiki/Not_Invented_Here http://www.flickr.com/photos/tillwe/1526490488/ http://www.flickr.com/photos/london/51301816/
- 36.
- 40. HTML5 = Using the capabilities of the technology we have instead of limiting ourselves to the lowest common denominator.
- 41.
- 42. Separation of concerns.
- 43. In the olddays... Behaviour HTML Presentation Structure
- 44. DHTML days (1) Behaviour JS Presentation HTML Structure JS
- 45. DHTML days (2) Behaviour CSS Presentation JS HTML Structure
- 46. The gospel (according to Zeldman) Behaviour JS CSS Presentation HTML Structure
- 47. The now... Behaviour SS JS C ntation Prese Structure HTML
- 48. The challenge: Applying best practices of the past without sounding like grumpy old people.
- 49. The solution: Following the spirit of best practices and pointing out their benefits instead of harping on about them.
- 50.
- 51. Causes to fightfor.
- 52.
- 53.
- 54. Keep the webOS-independent
- 56.
- 59. Things to applaud: Sane progressive enhancement.
- 60.
- 61.
- 62.
- 63.
- 65.
- 66.
- 67.
- 69. Support means youto test with it. Don’t support if you can’t ensure a good experience. Don’t waste testing time on the undead.
- 70.
- 71.
- 72. Mediaqueries http://jasonweaver.name
- 73. HTML5 Video +Canvas http://thisshell.com
- 74. History pushstate http://github.com
- 75. SVG http://mbostock.github.com/d3/
- 76.
- 77. Local Storage http://www.flickr.com/photos/blude/2665906010/
- 78. Offline http://www.flickr.com/photos/spentrails/3245564940
- 79.
- 80.
- 81.
- 84.
- 85.
- 86.
- 88. Web Development hasbeen a long and arduous journey...
- 89. It is timewe have some fun!
- 90. Cheers! Chris Heilmann @codepo8 #mozilla #html5/freenet