HTML5 for all

8,943 views
8,781 views

Published on

Keynote at the Converge SE about HTML5 and how to use it/support the cause. Amazing intro picture by Marina Lawson as a father's day present to her Dad Bruce
!

Published in: Technology, Design
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
8,943
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
115
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

HTML5 for all

  1. 1. Christian Heilmann, Mozilla, Converge SE, Columbia, SC, June 2011 Picture of win by Marina Lawson, who rocks!
  2. 2. <!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>
  3. 3. <!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>
  4. 4. <!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>
  5. 5. <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> .
  6. 6. <video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>
  7. 7. <can vas>< /canv as>
  8. 8. And that’s it!
  9. 9. http://www.20thingsilearned.com/
  10. 10. http://wheelsofsteel.nethttp://wheelsofsteel.net
  11. 11. Using capacities...
  12. 12. http://folding.stanford.edu/http://folding.stanford.edu/
  13. 13. 10.2 bnAndroid Devices
  14. 14. 42.3 bniPhones
  15. 15. 2 numbers I made up and showed in a keynote style fashion!
  16. 16. Building thefuture web...
  17. 17. NIH http://en.wikipedia.org/wiki/Not_Invented_Herehttp://www.flickr.com/photos/tillwe/1526490488/http://www.flickr.com/photos/london/51301816/
  18. 18. Old and goodprinciples.
  19. 19. CMD+U(CTRL+U)
  20. 20. Company support
  21. 21. http://www.youtube.com/watch?v=p92QfWOw88I
  22. 22. http://forums.silverlight.net/forums/p/230502/562077.aspx
  23. 23. Screencast of Nikebetterworld http://nikebetterworld.com/
  24. 24. http://www.nissanusa.com/leaf-electric-car/index
  25. 25. Adapting tochange...
  26. 26. HTML(5)Markup general WTFJavaScript APIsStuff for Browser/Parser developers
  27. 27. Let’s check thetoy box!
  28. 28. http://c64.superdefault.com/
  29. 29. Mediaqueries http://jasonweaver.name
  30. 30. HTML5 Video + Canvas http://thisshell.com
  31. 31. History pushstate http://github.com
  32. 32. SVG http://mbostock.github.com/d3/
  33. 33. http://highcharts.com
  34. 34. Local Storage http://www.flickr.com/photos/blude/2665906010/
  35. 35. Offline
  36. 36. CSS3
  37. 37. Geolocation
  38. 38. Web Sockets
  39. 39. in3D
  40. 40. WebGL http://bodybrowser.googlelabs.com
  41. 41. WebGL http://pepetz.com
  42. 42. http://ro.me
  43. 43. https://demos.mozilla.org/en-US/#holo-mobile
  44. 44. http://animatable.com
  45. 45. http://animatable.com
  46. 46. http://wheelsofsteel.nethttp://www.schillmania.com/content/entries/2011/wheels-of-steel/
  47. 47. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor
  48. 48. Help is available!
  49. 49. http://butterapp.org | http://popcorn.js
  50. 50. http://html5boilerplate.com/
  51. 51. http://www.modernizr.com/
  52. 52. http://diveintohtml5.org/
  53. 53. http://html5doctor.com/
  54. 54. http://www.htmlfivewow.com/
  55. 55. https://build.phonegap.com/
  56. 56. http://webowonder.org
  57. 57. Thank you!Chris Heilmann@codepo8http://wait-till-i.com

×