HTML5 JS APIs
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 JS APIs

on

  • 106,665 views

Standards.next for HTML5 JavaScript APIs

Standards.next for HTML5 JavaScript APIs

Statistics

Views

Total Views
106,665
Views on SlideShare
91,860
Embed Views
14,805

Actions

Likes
91
Downloads
1,776
Comments
12

40 Embeds 14,805

http://www.labnol.org 11844
http://www.slideshare.net 1058
http://blog.dreamcss.com 585
http://congdongthongtin.com 375
http://www.askqtp.com 284
http://www.tozoy.com 200
http://nvd-sap.dowdensite.com 151
http://blog.jeanbaptistedumont.com 90
http://www.learnnpublish.com 47
http://translate.googleusercontent.com 27
http://ehealth.kcl.ac.uk 25
http://localhost 19
http://tingletech.tumblr.com 11
http://firecracker.ytnobody.net 10
http://paper.li 7
http://cdn.pearltrees.com 7
http://lanyrd.com 7
http://dumont.typepad.com 6
http://tech-buzz.net 5
http://www.lifeyun.com 5
http://core.traackr.com 4
http://123.preprommtv.appspot.com 4
http://fruendt-online.de 4
http://127.0.0.1 4
http://www.mashme.tv 3
http://techberry.blogspot.com 3
http://hi.chibaole.com 3
http://webcache.googleusercontent.com 3
http://a0.twimg.com 2
http://www.e-presentations.us 2
http://74.6.117.48 1
http://one-more-site.blogspot.com 1
http://74.125.113.132 1
http://feeds.labnol.org 1
http://mysecretwebsite.blogspot.com 1
http://lumiere.ens.fr 1
http://74.125.93.132 1
http://vnwindowsblog.tk 1
http://twittertim.es 1
http://www.ikmarkcremer.nl 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 12 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 JS APIs Presentation Transcript

  • 1. JavaScript APIs HTML5 Remy Sharp @rem standards.next
  • 2. JavaScript APIs HTML5 & friends! Remy Sharp @rem standards.next
  • 3. HTML5: 2022?
  • 4. Bollocks.
  • 5. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 6. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 7. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 8. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 9. APIs •Canvas •Geolocation •Drag & Drop? •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 10. Documentation
  • 11. www.whatwg.org/html5/ dev.w3.org/html5/ irc://irc.freenode.net/#whatwg
  • 12. Canvas
  • 13. Canvas
  • 14. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  • 15. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  • 16. Drag'n Drop
  • 17. Drag'n Drop
  • 18. Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
  • 19. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  • 20. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  • 21. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 22. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 23. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 24. http://html5demos.com/drag
  • 25. http://html5demos.com/drag
  • 26. Of ine Applications
  • 27. Of ine Applications
  • 28. Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
  • 29. Enable <html manifest="my.manifest" >
  • 30. my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg
  • 31. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
  • 32. Cache •On load will hit my.manifest
  • 33. Cache •On load will hit my.manifest •Change manifest: trigger reload
  • 34. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
  • 35. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
  • 36. Firefox
  • 37. window.addEventListener( 'offline', // online too online, // function true );
  • 38. function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
  • 39. http://html5demos.com/offline
  • 40. http://html5demos.com/offline
  • 41. navigator.onLine
  • 42. Geolocation
  • 43. Geolocation
  • 44. Not always accurate!
  • 45. navigator .geolocation .getCurrentPosition( success, err );
  • 46. Messaging
  • 47. Messaging
  • 48. Messaging •Communicate across domains •Across window object •With Workers •String transfer only
  • 49. .postMessage(str) .onMessage(event) event.data == str
  • 50. Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
  • 51. The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
  • 52. Web Workers
  • 53. Web Workers
  • 54. •Threads
  • 55. •Threads •Native or via Gears
  • 56. •Threads •Native or via Gears •Sandboxed
  • 57. •Threads •Native or via Gears •Sandboxed •Debugging?
  • 58. •importScripts •postMessage •onmessage •onconnect
  • 59. Without
  • 60. http://html5demos.com/worker
  • 61. Storage
  • 62. Storage
  • 63. 1. sessionStorage
  • 64. 1. sessionStorage 2. localStorage
  • 65. 1. sessionStorage 2. localStorage 3. database storage
  • 66. Storage sessionStorage.setItem(key, value) sessionStorage.getItem(key)
  • 67. Storage localStorage.setItem(key, value) localStorage.getItem(key)
  • 68. And more! Remy Sharp @rem remy@leftlogic.com html5demos.com remysharp.com full-frontal.org