Your SlideShare is downloading. ×
0
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Using HTML5 For a Great Open Web - Valtech Tech Days
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using HTML5 For a Great Open Web - Valtech Tech Days

5,733

Published on

Presentation given at Valtech Tech Days 2011

Presentation given at Valtech Tech Days 2011

Published in: Technology, Design
2 Comments
6 Likes
Statistics
Notes
  • Mathias,

    Thanks! With the XML prolog it depends on the use case, but yes, most of the time it’s not needed. Completely agree about .appcache, thought about that when I came to that slide during the presentation. :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice slide deck, Robert! :)

    Some feedback:

    Slide 7: No need for the XML prolog unless you save the file locally (or without the proper HTTP headers). See http://mathiasbynens.be/notes/xhtml5
    Slide 19: Better to use (and advocate) the `.appcache` extension instead of `.manifest`. See http://html5.org/tools/web-apps-tracker?from=5811&to=5812
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,733
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
110
Comments
2
Likes
6
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. Using HTML5 For a Great Open Web
  • 2. Why HTML5?
  • 3. <!DOCTYPE html>
  • 4. <DIV>A monkey</DIV><p id=john>John’s P</p><input type=text><input type="text"><input type="text" />
  • 5. As XHTML<?xml version="1.0"?><html xmlns="http://www.w3.org/1999/xhtml">MUST be application/xhtml+xml or application/xml<noscript>Not in XHTML</noscript>
  • 6. <audio> <aside> <nav> <section> <hgroup> <article><figure> <time> <header> <video> <figcaption> <footer>
  • 7. <input type="color"> <input type="range"><input type="number"> <input type="email"><input type="time"> <input type="search"><input type="month"> <input type="tel"><input type="date"> <input type="datetime"><input type="week"><input type="datetime-local"><input type="url">
  • 8. Web Storage
  • 9. sessionStorage.setItem("FU", "Sarah Palin");console.log(sessionStorage.getItem("FU"));
  • 10. localStorage.setItem("Job", "Politician");
  • 11. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing"};localStorage.setItem("sarah", JSON.stringify(sarahPalin));console.log(typeof JSON.parse(localStorage.getItem("sarah")));
  • 12. Web SQLIndexedDB
  • 13. Offline Web Applications
  • 14. <!DOCTYPE html><html manifest="offline.manifest"><head>...
  • 15. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  • 16. History API
  • 17. var url = "http://robertnyman.com", title = "My blog", state = { address : url };window.history.pushState(state.address, title, url);
  • 18. window.history.replaceState(state.address, title, url);
  • 19. Video
  • 20. <video controls src="nasa.webm"></video>
  • 21. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source></video>
  • 22. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  • 23. Canvas
  • 24. Apple even creates open standards for the web -Steve Jobs
  • 25. http://craftymind.com/factory/html5video/ CanvasVideo.html
  • 26. WebGL
  • 27. http://code.google.com/p/webglsamples/
  • 28. Flight of the Navigator
  • 29. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnymanPictures:Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/ Internet hole: http://cheezburger.com/View/3194058752Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Royal wedding: http://twitpic.com/4r3mes Pictures/Griffin-Family-History.htmStorage fail: http://failfun.com/funny-pictures/gangsta-fail/ Canvas: http://www.ioffer.com/c/Drawings-1000407Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie- 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpgmonster.html Go where Ive never been: http://musicisart.ws/diane-arbus/You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/ Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of- china/?quick_view=1 Super Mario Video: http://www.archive.org/details/Mario1_507
  • 30. We can’t change history, but we can change the future. Be nice to each other.

×