Search

HTML5 JS APIs

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + remy.sharp Remy Sharp 4 months ago
    All demos are live and stealable here: http://html5demos.com (and I’m currently working on getting DnD working in Safari and IE8 - which apparently there’s slightly different handling to get them going)
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

23 Favorites

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

+ Remy SharpRemy Sharp, 4 months ago

custom

4803 views, 23 favs, 7 embeds more stats

Standards.next for HTML5 JavaScript APIs

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 4803
    • 4593 on SlideShare
    • 210 from embeds
  • Comments 1
  • Favorites 23
  • Downloads 98
Most viewed embeds
  • 192 views on http://www.labnol.org
  • 9 views on http://congdongthongtin.com
  • 5 views on http://tech-buzz.net
  • 1 views on http://74.125.113.132
  • 1 views on http://feeds.labnol.org

more

All embeds
  • 192 views on http://www.labnol.org
  • 9 views on http://congdongthongtin.com
  • 5 views on http://tech-buzz.net
  • 1 views on http://74.125.113.132
  • 1 views on http://feeds.labnol.org
  • 1 views on http://translate.googleusercontent.com
  • 1 views on http://mysecretwebsite.blogspot.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved