HTML5 battles still to be won
•
11 likes•1,866 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.
Recommended
More Related Content
More from Christian Heilmann
More from Christian Heilmann (20)
Recently uploaded
Recently uploaded (20)
HTML5 battles still to be won
- 1. HTML5 - Battles still to be won! Christian Heilmann, Mozilla, Open Web Camp 3, July 2011
- 2. Excitement.
- 9. Misnomer.
- 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. New Tech!
- 24. WebGL http://bodybrowser.googlelabs.com
- 25. http://ro.me
- 29. Screencast of Nikebetterworld http://nikebetterworld.com/
- 35. NIH http://en.wikipedia.org/wiki/Not_Invented_Here http://www.flickr.com/photos/tillwe/1526490488/ http://www.flickr.com/photos/london/51301816/
- 40. HTML5 = Using the capabilities of the technology we have instead of limiting ourselves to the lowest common denominator.
- 41. Adaptation
- 42. Separation of concerns.
- 43. In the old days... 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.
- 51. Causes to fight for.
- 54. Keep the web OS-independent
- 56. CMD+U (CTRL+U)
- 59. Things to applaud: Sane progressive enhancement.
- 67. Danger.
- 69. Support means you to test with it. Don’t support if you can’t ensure a good experience. Don’t waste testing time on the undead.
- 70. Check this out!
- 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/
- 77. Local Storage http://www.flickr.com/photos/blude/2665906010/
- 78. Offline http://www.flickr.com/photos/spentrails/3245564940
- 79. CSS3
- 80. Geolocation
- 88. Web Development has been a long and arduous journey...
- 89. It is time we have some fun!
- 90. Cheers! Chris Heilmann @codepo8 #mozilla #html5/freenet