HTML5: friend or foe (to Flash)?
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5: friend or foe (to Flash)?

  • 29,388 views
Uploaded on

A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs....

A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.

For Flash Brighton in Feb 2010.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
29,388
On Slideshare
21,376
From Embeds
8,012
Number of Embeds
53

Actions

Shares
Downloads
1,154
Comments
3
Likes
55

Embeds 8,012

http://www.pinceladasdaweb.com.br 3,072
http://storify.com 1,642
http://www.36kr.com 1,234
http://www.curated.by 650
http://remarked.home 271
http://bundlr.com 236
http://gobundlr.com 188
http://www.slideshare.net 171
http://sid05.tumblr.com 125
http://blog.dreamcss.com 52
http://www.scoop.it 44
http://localhost 43
http://xianguo.com 41
http://vidadegarbancito.blogspot.com.es 39
http://www.hksilicon.com 29
http://introf11sou.wikispaces.com 23
http://introf11sou.wikispaces.com 23
http://cmit-kdu.blogspot.com 18
http://www.mashme.tv 15
http://vidadegarbancito.blogspot.com 14
http://uonlive.com 7
http://paper.li 6
http://translate.google.com 6
http://menchusreplays.blogspot.com 4
http://www.reviewzin.com 4
http://secondaryartifacts.tumblr.com 4
http://www.zhuaxia.com 4
http://www.rafaelcorreia.net 4
http://safe.tumblr.com 4
http://translate.googleusercontent.com 4
http://unitechy.posterous.com 4
http://www.netvibes.com 3
http://lanyrd.com 3
http://mag.prohosting.com.pl 3
http://accesstoblockedsites.com 2
http://webcache.googleusercontent.com 2
http://www.cn.uonlive.com 2
http://static.slidesharecdn.com 1
http://menchusreplays.blogspot.com.es 1
http://cmit-kdu.blogspot.co.uk 1
http://dev.gobundlr.com 1
http://www.vidadegarbancito.blogspot.com.es 1
http://cache.baidu.com 1
http://bizlive.inxero.com 1
http://www.nofoon.com 1
http://old.xianguo.com 1
http://zhuaxia.com 1
http://localhost:3000 1
http://www.blogger.com 1
http://yaminter.blogspot.com 1

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. HTML5 Friend or Foe?
  • 2. The Open Web Friend or Foe?
  • 3. Remy Sharp. Non-Flash-er.
  • 4. http://remysharp.com/html5-spell-death-to-flash/
  • 5. "Flash is dead!"
  • 6. Is Flash is dead?
  • 7. Should Flash be worried?
  • 8. Video killed the radio Flash star?
  • 9. http://youtube.com/watch?v=uofWfXOzX-g
  • 10. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV • Copy & paste <object> code
  • 11. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV create • Copy & paste <object> code
  • 12. Open web based • Capture video • Encode to mp4 • Add <video src="foo.mp4" />
  • 13. <video src="dizzy.mp4" />
  • 14. <video src="dizzy.mp4" controls/>
  • 15. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Video Example</title> </head> <body> <video src="dizzy.mp4" controls/> </body> </html>
  • 16. Scripting
  • 17. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); }
  • 18. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); } // position & asTime defined elsewhere video.addEventListener('timeupdate', function () { positon.innerHTML = asTime(this.currentTime); }, false);
  • 19. API • play(), pause(), canPlayType(t)
  • 20. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc
  • 21. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc • progress, stalled, play, pause, waiting, canplay, seeking, timeupdate
  • 22. Fullscreen?
  • 23. Warning! User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full- screen videos when links are clicked or pages navigated. Instead, user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
  • 24. Warning! User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full- screen videos when links are clicked or pages navigated. Instead, user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
  • 25. Pros
  • 26. Pros • No plugins required
  • 27. Pros • No plugins required • Simple API: play(), pause() etc
  • 28. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same
  • 29. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same • Player chrome is HTML & CSS
  • 30. Cons
  • 31. Cons • Accessibility?
  • 32. Cons • Accessibility?
  • 33. Cons • Accessibility? • Codecs
  • 34. Cons • Accessibility? • Codecs • IE
  • 35. <video src="dizzy.mp4" controls/>
  • 36. <video controls> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  • 37. Video for Everybody <video width="640" height="360" poster="dizzy.jpg" controls> <source src="dizzy.ogv" type="video/ogg" /> <source src="dizzy.mp4" type="video/mp4" /><!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--><!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="dizzy.mp4"> <!--<![endif]--> <param name="src" value="dizzy.mp4" /> <param name="showlogo" value="false" /> <object width="640" height="380" type="application/x-shockwave-flash" data="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4"> <param name="movie" value="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4" /> <img src="dizzy.jpg" width="640" height="360" alt="Title of video" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--></object><!--<![endif]--> </video> <p>Download Video: <a href="dizzy.mp4">High Quality "MP4"</a> | <a href="dizzy.ogv">Low Quality "OGG"</a></p> http://camendesign.com/code/video_for_everybody
  • 38. Flash will be needed for video for a while yet.
  • 39. fonts
  • 40. sIFR & Cufon
  • 41. • Native font rendering • IE works via EOT • Doesn't work in Firefox 3 - 7%
  • 42. Streaming Sockets
  • 43. • Pushed data relies on Flash
  • 44. • Pushed data relies on Flash • If no Flash, switches to polling
  • 45. • Pushed data relies on Flash • If no Flash, switches to polling • Polling bad for high concurrency
  • 46. • Had to work in corporate environment • Corp env were blocking odd traffic & Flash • Needed to be pure JS solution • It's possible, but complicated
  • 47. WebSocket
  • 48. var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { // message in, let's convert it to JSON var data = JSON.parse(event.data); }; ws.onclose = function () {}; ws.onopen = function () {};
  • 49. var ws = new WebSocket("ws://localhost:8080/"); ws.onmessage = function(event) { var data = JSON.parse(event.data); var p = $(twitterlib.render(data)); if( $('#tweets > li').length > 15) { $('#tweets >li:last').slideDown(100, function() { $(this).remove(); }); } $('#tweets').prepend(p); p.slideDown(140); }; ws.onclose = function() { alert("socket closed"); }; ws.onopen = function() { //alert("connected..."); };
  • 50. Graphics
  • 51. 2D Graphics
  • 52. Canvas
  • 53. Google Analytics - Flash charts Interactive Demo - Canvas charts
  • 54. Let's get technical
  • 55. <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
  • 56. var ctx = canvas.getContext('2d');
  • 57. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  • 58. 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');
  • 59. 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;
  • 60. 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);
  • 61. Let's mix it up
  • 62. http://html5demos.com/canvas-grad
  • 63. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 64. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, Caclulate from x = event.clientX, the mouse the y = event.clientY, radius and rx = 600 * x / width, ry = 600 * y / width; colours var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 65. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; Re-render the var xc = gradient parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 66. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); Set the new fill grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); style and refill - the browser grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); handles the hard ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); work }; http://html5demos.com/canvas-grad
  • 67. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 68. canvas.toDataURL("image/png");
  • 69. canvas.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==
  • 70. Canvas + drawImage + Video =
  • 71. http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  • 72. 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); http://html5demos.com/video-canvas
  • 73. 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); http://html5demos.com/video-canvas
  • 74. ctx.getImageData(0, 0, w, h);
  • 75. ctx.getImageData(0, 0, w, h); 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 76. pixels.data[i * 4 + 0]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 77. pixels.data[i * 4 + 1]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 78. pixels.data[i * 4 + 2]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 79. pixels.data[i * 4 + 3]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 80. for (i = 0; i < pixels.data.length / 4; i++) { totals.r += pixels.data[i * 4 + 0]; // r totals.g += pixels.data[i * 4 + 1]; // g totals.b += pixels.data[i * 4 + 2]; // b } var r = parseInt(totals.r / (w*h)), g = parseInt(totals.g / (w*h)), b = parseInt(totals.b / (w*h)), rgb = [r, g, b].join(',');
  • 81. SVG
  • 82. ...using Flash!
  • 83. segue: just like screaming monkey
  • 84. 3D
  • 85. CSS Yeah, 3D CSS.
  • 86. #canvas { -webkit-perspective: 800; -webkit-perspective-origin: 50% 20em; } #rubiks { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(15deg) rotateY(15deg); } #rubiks .face1 { -webkit-transform: rotateX(90deg) translateZ (10.8em); } #rubiks .face2 { /* front */ -webkit-transform: translateZ(10.8em); } #rubiks .face3 { -webkit-transform: rotateY(90deg) translateZ
  • 87. WebGL
  • 88. Mobile?
  • 89. Offline
  • 90. Offline Apps • Application cache / manifest • Events: offline, online • navigator.onLine property
  • 91. Offline Apps • Application cache / manifest • Events: offline, online
  • 92. http://icanhaz.com/rubiks
  • 93. http://icanhaz.com/rubiks
  • 94. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 95. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 96. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  • 97. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  • 98. The Manifest 2. First line must be: CACHE MANIFEST
  • 99. The Manifest 3. Including page is implicitly included in the cache.
  • 100. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  • 101. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  • 102. The process
  • 103. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 104. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 105. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 106. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 107. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 108. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 109. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 110. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 111. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 112. Browser: I have a Problem: Browser: request Server: serve all manifest, cache assets Change of content requiresBrowser: Server: serve 2 refreshes applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 113. applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); }; window.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  • 114. Web Workers
  • 115. • "Threads"
  • 116. •"Threads" • Sandboxed
  • 117. •"Threads" • Sandboxed • Debugging can be tricky
  • 118. http://html5demos.com/worker
  • 119. app.html var w = new Worker('worker.js');
  • 120. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); };
  • 121. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  • 122. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 123. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 124. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 125. Can dos • Spawn more workers • setTimeout/Interval & clear • Access navigator • Error handling onerror • XHR (though responseXML is null)
  • 126. 8 workers Workers disabled
  • 127. 8 workers Workers disabled
  • 128. Geolocation
  • 129. Not always accurate!
  • 130. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 131. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 132. Microdata, datagrids, Accessible XHR2 & upload progress events Rich Internet Applications History manager, drag & drop ...and more!
  • 133. http://www.w3.org/TR/html5 http://tr.im/whatwg_complete irc://irc.freenode.net/#whatwg
  • 134. @rem remy@leftlogic.com http://delicious.com/remy.sharp/fb022010