HTML5 JavaScript 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

Post a comment
Embed Video
Edit your comment Cancel

19 Favorites

HTML5 JavaScript APIs - Presentation Transcript

  1. Is AP L5 HTM HTML5 JavaScript APIs jsconf.eu 2009
  2. 2022
  3. 2022 = two completely interoperable implementations
  4. CSS 2.1
  5. HTML5
  6. HTML5 Web Forms Offline History API Audio/Video Drag & Drop Undo Canvas 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("It's all okay"); } else { alert("Something's gone wrong..."); return false; } };
  17. Less JavaScript on donkey work == more JavaScript on awesome work.
  18. Native Media Elements
  19. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/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-shockw src="http://www.youtube.com/v/oHg allowscriptaccess="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 rather quiet...shhh... •Firefox needs the right content-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 gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  42. var ctx = canvas.getContext('2d'); // Create radial gradient var 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 gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad;
  44. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  45. ctx.toDataURL("image/png");
  46. ctx.toDataURL("image/png"); data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yez CzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT+ +fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAs YQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+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 +QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55D gCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQ IAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzy FAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/ gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo +Qb7F4pcI/E +AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAg QZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDE HUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQW CHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBI kVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0C QWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDEC BIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI 0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHND ECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUg TI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
  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 loop r = 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. Don't 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.manifest CACHE MANIFEST images/shade.jpg images/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 a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Server: 304 Not Browser: serve request manifest Modified locally file
  61. Storage (giant cookies)
  62. key/val SQLite
  63. key/value window based sessionStorage localStorage .setItem(key, value); .getItem(key);
  64. key/value window based sessionStorage domain based localStorage .setItem(key, value); .getItem(key);
  65. SQLite "User agents must implement the SQL dialect supported 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 tweets WHERE 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 tweets WHERE 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 tweets WHERE 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 tweets WHERE 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.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  79. worker.js importScripts('xhr.js', 'db.js'); onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  80. worker.js importScripts('xhr.js', 'db.js'); onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  81. worker.js importScripts('xhr.js', 'db.js'); onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  82. And a lot more...
  83. Attributes: data-*, itemProp, sandbox (on iframes) <progress> Microdata API, <meter> datagrid, XHR2 & <datalist> upload progress <ruby> querySelector Drag & Drop, History manager ARIA overlap
  84. http://www.whatwg.org/html5/ http://tr.im/whatwg_complete irc://irc.freenode.net/#whatwg
  85. Pro tip: cats can't Remy code for crap Sharp @rem (another) JavaScript Conference: full-frontal.org http://html5demos.com Links: http://tr.im/rs_jsconfeu

+ Remy SharpRemy Sharp, 3 weeks ago

custom

1986 views, 19 favs, 3 embeds more stats

HTML5 is all the rage with the cool kids, and altho more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 1986
    • 1871 on SlideShare
    • 115 from embeds
  • Comments 1
  • Favorites 19
  • Downloads 80
Most viewed embeds
  • 110 views on http://developer.yahoo.net
  • 4 views on http://speakerrate.com
  • 1 views on http://wildfire.gigya.com

more

All embeds
  • 110 views on http://developer.yahoo.net
  • 4 views on http://speakerrate.com
  • 1 views on http://wildfire.gigya.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