Your SlideShare is downloading. ×
0
Is                          AP    L5 HTMHTML5 JavaScript APIs         jsconf.eu 2009
2022
2022 = two completely  interoperableimplementations
CSS 2.1
HTML5
HTML5Web Forms     Offline       History APIAudio/Video   Drag & Drop   UndoCanvas        Editable      X-Domain          ...
“HTML5”
“HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas        •Workers•Offline
“HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas        •Workers•Offline
“HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas        •Workers•Offline
Web Forms 2.0  Actual search for "web forms", wtf? http://tr.im/webforms_pic ➙
"JavaScript is only good for image roll overs &    form validation"
"JavaScript is only good for image roll overs &    form validation"         :hover
"JavaScript is only good  for image roll overs &     form validation".hasFeature(WebForms, 2.0)
"JavaScript is only good  for image roll overs &     form validation"      awesome shit".hasFeature(WebForms, 2.0)
var f = document.querySelector(form);f.onsubmit = function () {   if ( this.checkValidity() ) {     alert("Its all okay");...
Less JavaScript on donkey work        == more JavaScripton awesome work.
Native Media Elements
<object classid="clsid:d27cdb6e-aheight="344" codebase="http://dowflash/swflash.cab#version=6,0,40,<param name="allowFullS...
<video src="dizzy.ogv" />
<video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
?
<video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
<video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object></video>
<video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- dow...
<video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
if (video.paused) {  if (video.ended) {    video.currentTime = 0;  }  video.play();} else {  video.pause();}
if (video.paused) {  if (video.ended) {    video.currentTime = 0;  }  video.play();} else {  video.pause();}
if (video.paused) {  if (video.ended) {    video.currentTime = 0;  }  video.play();} else {  video.pause();}
if (video.paused) {  if (video.ended) {    video.currentTime = 0;  }  video.play();} else {  video.pause();}
addEvent( video, timeupdate, function () {   positon.innerHTML =   ➥ asTime(this.currentTime); });
addEvent( video, timeupdate, function () {   positon.innerHTML =   ➥ asTime(this.currentTime); });
addEvent( video, timeupdate, function () {   positon.innerHTML =   ➥ asTime(this.currentTime); });
•play(), pause()•paused, ended, currentTime•canplay, timeupdate, ended•and a bunch more.
•Bugs tend to be ratherquiet...shhh...•Firefox needs the rightcontent-type•Safari will plough ahead
Accessibility?
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
Canvas(+ excanvas.js)
<!DOCTYPE html><html><head>  <title>Canvas</title></head><body>  <canvas></canvas></body></html>
var ctx = canvas.getContext(2d);
var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);
var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorS...
var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorS...
var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorS...
ctx.toDataURL("image/png");
ctx.toDataURL("image/png");data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ9...
Canvas    +drawImage    +  Video    =
ctx.getImageData() http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
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];
ctx.translate(canvas.width/2, canvas.height/2);ctx.scale(-1, 1);ctx.translate(-canvas.width/2, -canvas.height/2);ctx.drawI...
Dont use for evil
Of ine Applications
Of ine Applications
Of ine Apps•Application cache•Events: of ine, online•navigator.onLine property
http://icanhaz.com/rubiks
Enable<!DOCTYPE html><html manifest="my.manifest"><body><!-- my page --></body></html>
my.manifestCACHE MANIFESTimages/shade.jpgimages/bin.jpg#version 13
Cache•First line: CACHE MANIFEST•Requires text/cache-manifest•Recommend using versioning•window.applicationCache•Add it la...
The process
Browser: I have aBrowser: request   Server: serve all    manifest, cache                                            assets...
Storage(giant cookies)
key/val   SQLite
key/valuewindow based   sessionStorage               localStorage      .setItem(key, value);      .getItem(key);
key/valuewindow based   sessionStoragedomain based   localStorage      .setItem(key, value);      .getItem(key);
SQLite    "User agents mustimplement the SQL dialectsupported by Sqlite 3.6.19" Another one that fails   super silently :(
db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE m...
db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE m...
db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE m...
db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE m...
Geolocation
Geolocation
Not always accurate!
navigator  .geolocation  .getCurrentPosition(     success,     err  );
Web Workers
•"Threads"•Native or via Gears (or setTimeout hack?)•Sandboxed•Debugging?
http://html5demos.com/worker
•importScripts• postMessage• onmessage• onconnect
app.htmlvar w = new Worker(worker.js);w.onmessage = function (event) {   alert("msg: " + event.data);};w.postMessage(run);
worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) {   if (event.data == run) {     run();   }};function r...
worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) {   if (event.data == run) {     run();   }};function r...
worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) {   if (event.data == run) {     run();   }};function r...
And alotmore...
Attributes: data-*, itemProp,sandbox (on iframes)<progress>        Microdata API,<meter>           datagrid, XHR2 &<datali...
http://www.whatwg.org/html5/http://tr.im/whatwg_completeirc://irc.freenode.net/#whatwg
Pro tip: cats cantRemy                                  code for crapSharp@rem(another)JavaScript Conference:full-frontal....
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
×

HTML5 JavaScript APIs

28,290

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 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,290
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1,241
Comments
4
Likes
67
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 JavaScript APIs"

  1. 1. Is AP L5 HTMHTML5 JavaScript APIs jsconf.eu 2009
  2. 2. 2022
  3. 3. 2022 = two completely interoperableimplementations
  4. 4. CSS 2.1
  5. 5. HTML5
  6. 6. HTML5Web Forms Offline History APIAudio/Video Drag & Drop UndoCanvas Editable X-Domain Messaging
  7. 7. “HTML5”
  8. 8. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  9. 9. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  10. 10. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  11. 11. Web Forms 2.0 Actual search for "web forms", wtf? http://tr.im/webforms_pic ➙
  12. 12. "JavaScript is only good for image roll overs & form validation"
  13. 13. "JavaScript is only good for image roll overs & form validation" :hover
  14. 14. "JavaScript is only good for image roll overs & form validation".hasFeature(WebForms, 2.0)
  15. 15. "JavaScript is only good for image roll overs & form validation" awesome shit".hasFeature(WebForms, 2.0)
  16. 16. var f = document.querySelector(form);f.onsubmit = function () { if ( this.checkValidity() ) { alert("Its all okay"); } else { alert("Somethings gone wrong..."); return false; }};
  17. 17. Less JavaScript on donkey work == more JavaScripton awesome work.
  18. 18. Native Media Elements
  19. 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. 20. <video src="dizzy.ogv" />
  21. 21. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  22. 22. ?
  23. 23. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  24. 24. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object></video>
  25. 25. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- down to flash --> <object><param></object></video>
  26. 26. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  27. 27. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  28. 28. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  29. 29. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  30. 30. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  31. 31. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  32. 32. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  33. 33. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  34. 34. •play(), pause()•paused, ended, currentTime•canplay, timeupdate, ended•and a bunch more.
  35. 35. •Bugs tend to be ratherquiet...shhh...•Firefox needs the rightcontent-type•Safari will plough ahead
  36. 36. Accessibility?
  37. 37. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  38. 38. Canvas(+ excanvas.js)
  39. 39. <!DOCTYPE html><html><head> <title>Canvas</title></head><body> <canvas></canvas></body></html>
  40. 40. var ctx = canvas.getContext(2d);
  41. 41. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);
  42. 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. 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. 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. 45. ctx.toDataURL("image/png");
  46. 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. 47. Canvas +drawImage + Video =
  48. 48. ctx.getImageData() http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  49. 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. 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. 51. Dont use for evil
  52. 52. Of ine Applications
  53. 53. Of ine Applications
  54. 54. Of ine Apps•Application cache•Events: of ine, online•navigator.onLine property
  55. 55. http://icanhaz.com/rubiks
  56. 56. Enable<!DOCTYPE html><html manifest="my.manifest"><body><!-- my page --></body></html>
  57. 57. my.manifestCACHE MANIFESTimages/shade.jpgimages/bin.jpg#version 13
  58. 58. Cache•First line: CACHE MANIFEST•Requires text/cache-manifest•Recommend using versioning•window.applicationCache•Add it last!
  59. 59. The process
  60. 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. 61. Storage(giant cookies)
  62. 62. key/val SQLite
  63. 63. key/valuewindow based sessionStorage localStorage .setItem(key, value); .getItem(key);
  64. 64. key/valuewindow based sessionStoragedomain based localStorage .setItem(key, value); .getItem(key);
  65. 65. SQLite "User agents mustimplement the SQL dialectsupported by Sqlite 3.6.19" Another one that fails super silently :(
  66. 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. 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. 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. 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. 70. Geolocation
  71. 71. Geolocation
  72. 72. Not always accurate!
  73. 73. navigator .geolocation .getCurrentPosition( success, err );
  74. 74. Web Workers
  75. 75. •"Threads"•Native or via Gears (or setTimeout hack?)•Sandboxed•Debugging?
  76. 76. http://html5demos.com/worker
  77. 77. •importScripts• postMessage• onmessage• onconnect
  78. 78. app.htmlvar w = new Worker(worker.js);w.onmessage = function (event) { alert("msg: " + event.data);};w.postMessage(run);
  79. 79. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  80. 80. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  81. 81. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  82. 82. And alotmore...
  83. 83. Attributes: data-*, itemProp,sandbox (on iframes)<progress> Microdata API,<meter> datagrid, XHR2 &<datalist> upload progress<ruby> querySelectorDrag & Drop,History manager ARIA overlap
  84. 84. http://www.whatwg.org/html5/http://tr.im/whatwg_completeirc://irc.freenode.net/#whatwg
  85. 85. Pro tip: cats cantRemy code for crapSharp@rem(another)JavaScript Conference:full-frontal.orghttp://html5demos.comLinks: http://tr.im/rs_jsconfeu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×