• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 JS APIs
 

HTML5 JS APIs

on

  • 105,903 views

Standards.next for HTML5 JavaScript APIs

Standards.next for HTML5 JavaScript APIs

Statistics

Views

Total Views
105,903
Views on SlideShare
91,174
Embed Views
14,729

Actions

Likes
91
Downloads
1,770
Comments
12

40 Embeds 14,729

http://www.labnol.org 11790
http://www.slideshare.net 1058
http://blog.dreamcss.com 585
http://congdongthongtin.com 356
http://www.askqtp.com 282
http://www.tozoy.com 200
http://nvd-sap.dowdensite.com 151
http://blog.jeanbaptistedumont.com 89
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

110 of 12 previous next Post a comment

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

110 of 12 previous next

Post Comment
Edit your comment

    HTML5 JS APIs HTML5 JS APIs Presentation Transcript

    • JavaScript APIs HTML5 Remy Sharp @rem standards.next
    • JavaScript APIs HTML5 & friends! Remy Sharp @rem standards.next
    • HTML5: 2022?
    • Bollocks.
    • APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
    • APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
    • APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
    • APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
    • APIs •Canvas •Geolocation •Drag & Drop? •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
    • Documentation
    • www.whatwg.org/html5/ dev.w3.org/html5/ irc://irc.freenode.net/#whatwg
    • Canvas
    • Canvas
    • document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
    • document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
    • Drag'n Drop
    • Drag'n Drop
    • Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
    • <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
    • <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
    • el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
    • el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
    • el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
    • http://html5demos.com/drag
    • http://html5demos.com/drag
    • Of ine Applications
    • Of ine Applications
    • Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
    • Enable <html manifest="my.manifest" >
    • my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg
    • Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
    • Cache •On load will hit my.manifest
    • Cache •On load will hit my.manifest •Change manifest: trigger reload
    • Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
    • Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
    • Firefox
    • window.addEventListener( 'offline', // online too online, // function true );
    • function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
    • http://html5demos.com/offline
    • http://html5demos.com/offline
    • navigator.onLine
    • Geolocation
    • Geolocation
    • Not always accurate!
    • navigator .geolocation .getCurrentPosition( success, err );
    • Messaging
    • Messaging
    • Messaging •Communicate across domains •Across window object •With Workers •String transfer only
    • .postMessage(str) .onMessage(event) event.data == str
    • Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
    • The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
    • Web Workers
    • Web Workers
    • •Threads
    • •Threads •Native or via Gears
    • •Threads •Native or via Gears •Sandboxed
    • •Threads •Native or via Gears •Sandboxed •Debugging?
    • •importScripts •postMessage •onmessage •onconnect
    • Without
    • http://html5demos.com/worker
    • Storage
    • Storage
    • 1. sessionStorage
    • 1. sessionStorage 2. localStorage
    • 1. sessionStorage 2. localStorage 3. database storage
    • Storage sessionStorage.setItem(key, value) sessionStorage.getItem(key)
    • Storage localStorage.setItem(key, value) localStorage.getItem(key)
    • And more! Remy Sharp @rem remy@leftlogic.com html5demos.com remysharp.com full-frontal.org