0
HTML5 and the                       web of tomorrow!Christian Heilmann, Mozilla, Web2Day, Nantes, France, June 2011
Let’s take a lookat the web...
Where is themagic?
6.5 minutes = 45,000 picturesHTML4
Good enough?
Extendingbrowsers
NIHhttp://www.flickr.com/photos/tillwe/1526490488/http://www.flickr.com/photos/london/51301816/                           ...
Screencast of Nikebetterworld  http://nikebetterworld.com/
http://www.nissanusa.com/leaf-electric-car/index
CMD+U(CTRL+U)
Big players!
http://www.20thingsilearned.com/
http://www.htmlfivewow.com/
http://www.youtube.com/watch?v=p92QfWOw88I
http://forums.silverlight.net/forums/p/230502/562077.aspx
http://wheelsofsteel.nethttp://wheelsofsteel.net
You can be part of      this!
NIHhttp://en.wikipedia.org/wiki/Not_Invented_Here
Things that make mehappy!
<sec       tion            > <n      <asid      av> <hea       e> <       <art      der>       hgro       icle><ma        ...
File APIs            http://min.us
Mediaqueries   http://jasonweaver.name
Multimedia in HTML<video src="interview.ogv" controls>  <a href="interview.ogv">Download video</a></video>
http://www.w3.org/2010/05/video/mediaevents.html
HTML5 Video + Canvas     http://thisshell.com
History pushstate      http://github.com
SVG      http://mbostock.github.com/d3/
http://highcharts.com
Local Storage                http://www.flickr.com/photos/blude/2665906010/
Offline
CSS3
Geolocation
Web Sockets
2D is boring!
in3D
WebGL   http://bodybrowser.googlelabs.com
WebGL    http://pepetz.com
http://ro.me
http://wheelsofsteel.nethttp://www.schillmania.com/content/entries/2011/wheels-of-steel/
CSS3 animation + JS  http://benthebodyguard.com
https://demos.mozilla.org/en-US/#holo-mobile
How can you take part inthis ride?
Demand change!
Internet Explorer 6...
http://html5forxp.com
Support open   video!
http://youtube.com/html5
HTML5 Video, simple!
http://butterapp.org | http://popcorn.js
Start from a solid    baseline.
http://html5boilerplate.com/
http://www.modernizr.com/
https://build.phonegap.com/
Use good tools!
http://www.aloha-editor.org
http://butterapp.org | http://popcorn.js  http://www.aviary.com/html5editor
http://scribd.com
http://slideshare.net
http://animatable.com
http://animatable.com
Learn and discuss!
http://diveintohtml5.org/
http://html5doctor.com/
http://www.whatwg.org/mailing-list
http://webowonder.org
Merci!Chris Heilmann     @codepo8       #mozilla#html5/freenet
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
HTML5  and the  web of tomorrow!
Upcoming SlideShare
Loading in...5
×

HTML5 and the web of tomorrow!

14,336

Published on

Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.

4 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,336
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
265
Comments
4
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and the web of tomorrow!"

  1. 1. HTML5 and the web of tomorrow!Christian Heilmann, Mozilla, Web2Day, Nantes, France, June 2011
  2. 2. Let’s take a lookat the web...
  3. 3. Where is themagic?
  4. 4. 6.5 minutes = 45,000 picturesHTML4
  5. 5. Good enough?
  6. 6. Extendingbrowsers
  7. 7. NIHhttp://www.flickr.com/photos/tillwe/1526490488/http://www.flickr.com/photos/london/51301816/ Paving the road http://en.wikipedia.org/wiki/Not_Invented_Here
  8. 8. Screencast of Nikebetterworld http://nikebetterworld.com/
  9. 9. http://www.nissanusa.com/leaf-electric-car/index
  10. 10. CMD+U(CTRL+U)
  11. 11. Big players!
  12. 12. http://www.20thingsilearned.com/
  13. 13. http://www.htmlfivewow.com/
  14. 14. http://www.youtube.com/watch?v=p92QfWOw88I
  15. 15. http://forums.silverlight.net/forums/p/230502/562077.aspx
  16. 16. http://wheelsofsteel.nethttp://wheelsofsteel.net
  17. 17. You can be part of this!
  18. 18. NIHhttp://en.wikipedia.org/wiki/Not_Invented_Here
  19. 19. Things that make mehappy!
  20. 20. <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> .
  21. 21. File APIs http://min.us
  22. 22. Mediaqueries http://jasonweaver.name
  23. 23. Multimedia in HTML<video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>
  24. 24. http://www.w3.org/2010/05/video/mediaevents.html
  25. 25. HTML5 Video + Canvas http://thisshell.com
  26. 26. History pushstate http://github.com
  27. 27. SVG http://mbostock.github.com/d3/
  28. 28. http://highcharts.com
  29. 29. Local Storage http://www.flickr.com/photos/blude/2665906010/
  30. 30. Offline
  31. 31. CSS3
  32. 32. Geolocation
  33. 33. Web Sockets
  34. 34. 2D is boring!
  35. 35. in3D
  36. 36. WebGL http://bodybrowser.googlelabs.com
  37. 37. WebGL http://pepetz.com
  38. 38. http://ro.me
  39. 39. http://wheelsofsteel.nethttp://www.schillmania.com/content/entries/2011/wheels-of-steel/
  40. 40. CSS3 animation + JS http://benthebodyguard.com
  41. 41. https://demos.mozilla.org/en-US/#holo-mobile
  42. 42. How can you take part inthis ride?
  43. 43. Demand change!
  44. 44. Internet Explorer 6...
  45. 45. http://html5forxp.com
  46. 46. Support open video!
  47. 47. http://youtube.com/html5
  48. 48. HTML5 Video, simple!
  49. 49. http://butterapp.org | http://popcorn.js
  50. 50. Start from a solid baseline.
  51. 51. http://html5boilerplate.com/
  52. 52. http://www.modernizr.com/
  53. 53. https://build.phonegap.com/
  54. 54. Use good tools!
  55. 55. http://www.aloha-editor.org
  56. 56. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor
  57. 57. http://scribd.com
  58. 58. http://slideshare.net
  59. 59. http://animatable.com
  60. 60. http://animatable.com
  61. 61. Learn and discuss!
  62. 62. http://diveintohtml5.org/
  63. 63. http://html5doctor.com/
  64. 64. http://www.whatwg.org/mailing-list
  65. 65. http://webowonder.org
  66. 66. Merci!Chris Heilmann @codepo8 #mozilla#html5/freenet
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×