HTML5 for all

  • 8,451 views
Uploaded 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 …

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
!

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • The amazing intro picture is by Marina Lawson as a present for her dad Bruce for father's day! What a kid!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,451
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
111
Comments
1
Likes
9

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