Your SlideShare is downloading. ×
HTML5 battles still to be won
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 battles still to be won

10,892
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.

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
10,892
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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