HTML5
Friend or Foe?
The Open Web
  Friend or Foe?
Remy Sharp.
Non-Flash-er.
http://remysharp.com/html5-spell-death-to-flash/
"Flash is dead!"
Is Flash is dead?
Should Flash
be worried?
Video killed the
radio Flash star?
http://youtube.com/watch?v=uofWfXOzX-g
Flash based

• Capture video
• Encode to FLV
• Upload/create SWF to play FLV
• Copy & paste <object> code
Flash based

• Capture video
• Encode to FLV
• Upload/create SWF to play FLV
         create

• Copy & paste <object> code
Open web based

• Capture video
• Encode to mp4
• Add
  <video src="foo.mp4" />
<video src="dizzy.mp4" />
<video src="dizzy.mp4" controls/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=utf-8 />
  <title>Video Example</title>
</head>
<body>
<video src=...
Scripting
var video = document.getElementsByTagName('video')[0];
if (video.paused) {
  video.play();
}
var video = document.getElementsByTagName('video')[0];
if (video.paused) {
  video.play();
}

// position & asTime defined...
API
•   play(), pause(), canPlayType(t)
API
•   play(), pause(), canPlayType(t)

•   currentTime, paused, duration,
    loop, autoplay, muted, volume, etc
API
•   play(), pause(), canPlayType(t)

•   currentTime, paused, duration,
    loop, autoplay, muted, volume, etc

•   pr...
Fullscreen?
Warning! User agents should not provide a public API to cause
videos to be shown full-screen. A script, combined with a ca...
Warning! User agents should not provide a public API to cause
videos to be shown full-screen. A script, combined with a ca...
Pros
Pros

• No plugins required
Pros

• No plugins required
• Simple API: play(), pause() etc
Pros

• No plugins required
• Simple API: play(), pause() etc
• Video & Audio API the same
Pros

• No plugins required
• Simple API: play(), pause() etc
• Video & Audio API the same
• Player chrome is HTML & CSS
Cons
Cons

• Accessibility?
Cons

• Accessibility?
Cons

• Accessibility?
• Codecs
Cons

• Accessibility?
• Codecs
• IE
<video src="dizzy.mp4" controls/>
<video controls>
  <source src="dizzy.ogv" />
  <source src="dizzy.mp4" />
</video>
Video for Everybody
<video width="640" height="360" poster="dizzy.jpg" controls>
  <source src="dizzy.ogv" type="video/ogg...
Flash will be
needed for video
 for a while yet.
fonts
sIFR & Cufon
• Native font rendering
• IE works via EOT

• Doesn't work in Firefox 3 - 7%
Streaming
Sockets
• Pushed data relies on Flash
• Pushed data relies on Flash
• If no Flash, switches to polling
• Pushed data relies on Flash
• If no Flash, switches to polling
• Polling bad for high concurrency
• Had to work in corporate environment
• Corp env were blocking odd traffic &
  Flash

• Needed to be pure JS solution
• I...
WebSocket
var ws = new WebSocket("ws://hostname:80/");

ws.onmessage = function (event) {
   // message in, let's convert it to JSON...
var ws = new WebSocket("ws://localhost:8080/");
ws.onmessage = function(event) {
  var data = JSON.parse(event.data);
  va...
Graphics
2D Graphics
Canvas
Google Analytics - Flash charts




Interactive Demo - Canvas charts
Let's get technical
<!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 gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
Let's mix it up
http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event....
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,           Caclul...
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event....
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event....
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event....
canvas.toDataURL("image/png");
canvas.toDataURL("image/png");
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAE...
Canvas
     +
drawImage
     +
   Video
     =
http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(-1, 1);
ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.d...
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(-1, 1);
ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.d...
ctx.getImageData(0, 0, w, h);
ctx.getImageData(0, 0, w, h);


        0   1    2    3


   0    r   g    b    a


   1    r   g    b    a


  ...   r   ...
pixels.data[i * 4 + 0];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 1];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 2];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 3];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
for (i = 0; i   < pixels.data.length / 4; i++) {
  totals.r +=   pixels.data[i * 4 + 0]; // r
  totals.g +=   pixels.data[...
SVG
...using Flash!
segue: just like
screaming monkey
3D
CSS
Yeah, 3D CSS.
#canvas {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 20em;
}

#rubiks {
  -webkit-transform-style: pres...
WebGL
Mobile?
Offline
Offline Apps


•   Application cache / manifest

•   Events: offline, online
•   navigator.onLine property
Offline Apps


•   Application cache / manifest

•   Events: offline, online
http://icanhaz.com/rubiks
http://icanhaz.com/rubiks
Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
my.manifest
CACHE MANIFEST
app.html
css/style.css
js/app.js
#version 13
The Manifest

1. Serve as text/manifest, by
   adding to mime.types:

text/cache-manifest manifest
The Manifest

2. First line must be:


    CACHE MANIFEST
The Manifest

3. Including page is implicitly
   included in the cache.
The Manifest

4. Two futher namespaces:
   NETWORK & FALLBACK

    FALLBACK:
    / offline.html
The Manifest

5. Include some versioning to
   cache bust your manifest


      # version 16
The process
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                           assets...
Browser: I have a
     Problem:
Browser: request   Server: serve all   manifest, cache
                                   ...
applicationCache.onUpdateReady =
function () {
   applicationCache.swapCache();
   notice('reload');
};

window.onOnline =...
Web Workers
•   "Threads"
•"Threads"

• Sandboxed
•"Threads"

• Sandboxed
• Debugging can be tricky
http://html5demos.com/worker
app.html
var w = new Worker('worker.js');
app.html
var w = new Worker('worker.js');

w.onmessage = function (event) {
   alert("msg: " + event.data);
};
app.html
var w = new Worker('worker.js');

w.onmessage = function (event) {
   alert("msg: " + event.data);
};

w.postMess...
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
...
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
...
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
...
Can dos

• Spawn more workers
• setTimeout/Interval & clear
• Access navigator
• Error handling onerror
• XHR (though resp...
8 workers   Workers disabled
8 workers   Workers disabled
Geolocation
Not always accurate!
navigator.geolocation.getCurrentPosition(function (geo) {
  console.log(geo);
}, function () {
  // error handler
});
navigator.geolocation.getCurrentPosition(function (geo) {
  console.log(geo);
}, function () {
  // error handler
});
Microdata,
datagrids,
                  Accessible
XHR2 & upload
progress events   Rich
                  Internet
       ...
http://www.w3.org/TR/html5

http://tr.im/whatwg_complete

irc://irc.freenode.net/#whatwg
@rem
remy@leftlogic.com
http://delicious.com/remy.sharp/fb022010
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Upcoming SlideShare
Loading in...5
×

HTML5: friend or foe (to Flash)?

26,965

Published 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.

For Flash Brighton in Feb 2010.

Published in: Technology
3 Comments
55 Likes
Statistics
Notes
No Downloads
Views
Total Views
26,965
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
1,195
Comments
3
Likes
55
Embeds 0
No embeds

No notes for slide

HTML5: friend or foe (to Flash)?

  1. 1. HTML5 Friend or Foe?
  2. 2. The Open Web Friend or Foe?
  3. 3. Remy Sharp. Non-Flash-er.
  4. 4. http://remysharp.com/html5-spell-death-to-flash/
  5. 5. "Flash is dead!"
  6. 6. Is Flash is dead?
  7. 7. Should Flash be worried?
  8. 8. Video killed the radio Flash star?
  9. 9. http://youtube.com/watch?v=uofWfXOzX-g
  10. 10. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV • Copy & paste <object> code
  11. 11. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV create • Copy & paste <object> code
  12. 12. Open web based • Capture video • Encode to mp4 • Add <video src="foo.mp4" />
  13. 13. <video src="dizzy.mp4" />
  14. 14. <video src="dizzy.mp4" controls/>
  15. 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. 16. Scripting
  17. 17. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); }
  18. 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. 19. API • play(), pause(), canPlayType(t)
  20. 20. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc
  21. 21. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc • progress, stalled, play, pause, waiting, canplay, seeking, timeupdate
  22. 22. Fullscreen?
  23. 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. 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. 25. Pros
  26. 26. Pros • No plugins required
  27. 27. Pros • No plugins required • Simple API: play(), pause() etc
  28. 28. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same
  29. 29. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same • Player chrome is HTML & CSS
  30. 30. Cons
  31. 31. Cons • Accessibility?
  32. 32. Cons • Accessibility?
  33. 33. Cons • Accessibility? • Codecs
  34. 34. Cons • Accessibility? • Codecs • IE
  35. 35. <video src="dizzy.mp4" controls/>
  36. 36. <video controls> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  37. 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. 38. Flash will be needed for video for a while yet.
  39. 39. fonts
  40. 40. sIFR & Cufon
  41. 41. • Native font rendering • IE works via EOT • Doesn't work in Firefox 3 - 7%
  42. 42. Streaming Sockets
  43. 43. • Pushed data relies on Flash
  44. 44. • Pushed data relies on Flash • If no Flash, switches to polling
  45. 45. • Pushed data relies on Flash • If no Flash, switches to polling • Polling bad for high concurrency
  46. 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. 47. WebSocket
  48. 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. 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. 50. Graphics
  51. 51. 2D Graphics
  52. 52. Canvas
  53. 53. Google Analytics - Flash charts Interactive Demo - Canvas charts
  54. 54. Let's get technical
  55. 55. <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
  56. 56. var ctx = canvas.getContext('2d');
  57. 57. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  58. 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. 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. 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. 61. Let's mix it up
  62. 62. http://html5demos.com/canvas-grad
  63. 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. 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. 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. 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. 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. 68. canvas.toDataURL("image/png");
  69. 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. 70. Canvas + drawImage + Video =
  71. 71. http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  72. 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. 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. 74. ctx.getImageData(0, 0, w, h);
  75. 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. 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. 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. 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. 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. 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. 81. SVG
  82. 82. ...using Flash!
  83. 83. segue: just like screaming monkey
  84. 84. 3D
  85. 85. CSS Yeah, 3D CSS.
  86. 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. 87. WebGL
  88. 88. Mobile?
  89. 89. Offline
  90. 90. Offline Apps • Application cache / manifest • Events: offline, online • navigator.onLine property
  91. 91. Offline Apps • Application cache / manifest • Events: offline, online
  92. 92. http://icanhaz.com/rubiks
  93. 93. http://icanhaz.com/rubiks
  94. 94. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  95. 95. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  96. 96. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  97. 97. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  98. 98. The Manifest 2. First line must be: CACHE MANIFEST
  99. 99. The Manifest 3. Including page is implicitly included in the cache.
  100. 100. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  101. 101. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  102. 102. The process
  103. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 113. applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); }; window.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  114. 114. Web Workers
  115. 115. • "Threads"
  116. 116. •"Threads" • Sandboxed
  117. 117. •"Threads" • Sandboxed • Debugging can be tricky
  118. 118. http://html5demos.com/worker
  119. 119. app.html var w = new Worker('worker.js');
  120. 120. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); };
  121. 121. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  122. 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. 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. 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. 125. Can dos • Spawn more workers • setTimeout/Interval & clear • Access navigator • Error handling onerror • XHR (though responseXML is null)
  126. 126. 8 workers Workers disabled
  127. 127. 8 workers Workers disabled
  128. 128. Geolocation
  129. 129. Not always accurate!
  130. 130. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  131. 131. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  132. 132. Microdata, datagrids, Accessible XHR2 & upload progress events Rich Internet Applications History manager, drag & drop ...and more!
  133. 133. http://www.w3.org/TR/html5 http://tr.im/whatwg_complete irc://irc.freenode.net/#whatwg
  134. 134. @rem remy@leftlogic.com http://delicious.com/remy.sharp/fb022010
  1. A particular slide catching your eye?

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

×