Your SlideShare is downloading. ×
0
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
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

HTML5 JavaScript APIs

28,255

Published on

HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This …

HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This presentation will take you through demos and code behind the new JavaScript APIs, and explore where these features can be used

Published in: Technology, Design
4 Comments
67 Likes
Statistics
Notes
No Downloads
Views
Total Views
28,255
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1,238
Comments
4
Likes
67
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. Is AP L5 HTMHTML5 JavaScript APIs jsconf.eu 2009
  • 2. 2022
  • 3. 2022 = two completely interoperableimplementations
  • 4. CSS 2.1
  • 5. HTML5
  • 6. HTML5Web Forms Offline History APIAudio/Video Drag & Drop UndoCanvas Editable X-Domain Messaging
  • 7. “HTML5”
  • 8. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 9. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 10. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 11. Web Forms 2.0 Actual search for "web forms", wtf? http://tr.im/webforms_pic ➙
  • 12. "JavaScript is only good for image roll overs & form validation"
  • 13. "JavaScript is only good for image roll overs & form validation" :hover
  • 14. "JavaScript is only good for image roll overs & form validation".hasFeature(WebForms, 2.0)
  • 15. "JavaScript is only good for image roll overs & form validation" awesome shit".hasFeature(WebForms, 2.0)
  • 16. var f = document.querySelector(form);f.onsubmit = function () { if ( this.checkValidity() ) { alert("Its all okay"); } else { alert("Somethings gone wrong..."); return false; }};
  • 17. Less JavaScript on donkey work == more JavaScripton awesome work.
  • 18. Native Media Elements
  • 19. <object classid="clsid:d27cdb6e-aheight="344" codebase="http://dowflash/swflash.cab#version=6,0,40,<param name="allowFullScreen" val<param name="allowscriptaccess" v<param name="src" value="http://w<param name="allowfullscreen" val<embed type="application/x-shockwsrc="http://www.youtube.com/v/oHgallowscriptaccess="always" allowf</embed></object>
  • 20. <video src="dizzy.ogv" />
  • 21. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 22. ?
  • 23. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 24. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object></video>
  • 25. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- down to flash --> <object><param></object></video>
  • 26. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 27. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 28. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 29. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 30. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 31. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 32. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 33. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 34. •play(), pause()•paused, ended, currentTime•canplay, timeupdate, ended•and a bunch more.
  • 35. •Bugs tend to be ratherquiet...shhh...•Firefox needs the rightcontent-type•Safari will plough ahead
  • 36. Accessibility?
  • 37. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  • 38. Canvas(+ excanvas.js)
  • 39. <!DOCTYPE html><html><head> <title>Canvas</title></head><body> <canvas></canvas></body></html>
  • 40. var ctx = canvas.getContext(2d);
  • 41. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);
  • 42. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);
  • 43. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);// assign gradients to fillctx.fillStyle = grad;
  • 44. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);// assign gradients to fillctx.fillStyle = grad;// draw 600x600 fillctx.fillRect(0,0,600,600);
  • 45. ctx.toDataURL("image/png");
  • 46. ctx.toDataURL("image/png");data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yezCzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT++fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAsYQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN data:image/png;base64,...+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI+QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55DgCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQIAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzyFAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo+Qb7F4pcI/E+AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAgQZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDEHUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
  • 47. Canvas +drawImage + Video =
  • 48. ctx.getImageData() http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  • 49. frame = ctx.getImageData(0, 0, w, h);i = 0; // or via loopr = frame.data[i + 0];g = frame.data[i + 1];b = frame.data[i + 2];
  • 50. ctx.translate(canvas.width/2, canvas.height/2);ctx.scale(-1, 1);ctx.translate(-canvas.width/2, -canvas.height/2);ctx.drawImage( video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
  • 51. Dont use for evil
  • 52. Of ine Applications
  • 53. Of ine Applications
  • 54. Of ine Apps•Application cache•Events: of ine, online•navigator.onLine property
  • 55. http://icanhaz.com/rubiks
  • 56. Enable<!DOCTYPE html><html manifest="my.manifest"><body><!-- my page --></body></html>
  • 57. my.manifestCACHE MANIFESTimages/shade.jpgimages/bin.jpg#version 13
  • 58. Cache•First line: CACHE MANIFEST•Requires text/cache-manifest•Recommend using versioning•window.applicationCache•Add it last!
  • 59. The process
  • 60. Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updated Browser: only Server: 304 Not Browser: serverequest manifest Modified locally file
  • 61. Storage(giant cookies)
  • 62. key/val SQLite
  • 63. key/valuewindow based sessionStorage localStorage .setItem(key, value); .getItem(key);
  • 64. key/valuewindow based sessionStoragedomain based localStorage .setItem(key, value); .getItem(key);
  • 65. SQLite "User agents mustimplement the SQL dialectsupported by Sqlite 3.6.19" Another one that fails super silently :(
  • 66. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 67. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 68. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 69. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 70. Geolocation
  • 71. Geolocation
  • 72. Not always accurate!
  • 73. navigator .geolocation .getCurrentPosition( success, err );
  • 74. Web Workers
  • 75. •"Threads"•Native or via Gears (or setTimeout hack?)•Sandboxed•Debugging?
  • 76. http://html5demos.com/worker
  • 77. •importScripts• postMessage• onmessage• onconnect
  • 78. app.htmlvar w = new Worker(worker.js);w.onmessage = function (event) { alert("msg: " + event.data);};w.postMessage(run);
  • 79. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 80. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 81. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 82. And alotmore...
  • 83. Attributes: data-*, itemProp,sandbox (on iframes)<progress> Microdata API,<meter> datagrid, XHR2 &<datalist> upload progress<ruby> querySelectorDrag & Drop,History manager ARIA overlap
  • 84. http://www.whatwg.org/html5/http://tr.im/whatwg_completeirc://irc.freenode.net/#whatwg
  • 85. Pro tip: cats cantRemy code for crapSharp@rem(another)JavaScript Conference:full-frontal.orghttp://html5demos.comLinks: http://tr.im/rs_jsconfeu

×