SlideShare a Scribd company logo
1 of 162
Download to read offline
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?
HTML5: friend or foe (to Flash)?
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="dizzy.mp4" controls/>
</body>
</html>
HTML5: friend or foe (to Flash)?
Scripting
HTML5: friend or foe (to Flash)?
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 elsewhere
video.addEventListener('timeupdate', function () {
  positon.innerHTML = asTime(this.currentTime);
}, false);
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

•   progress, stalled, play, pause,
    waiting, canplay, seeking,
    timeupdate
Fullscreen?
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.
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.
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
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?
HTML5: friend or foe (to Flash)?
Cons

• Accessibility?
Cons

• Accessibility?
• Codecs
Cons

• Accessibility?
• Codecs
• IE
HTML5: friend or foe (to Flash)?
<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" />
  <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
Flash will be
needed for video
 for a while yet.
fonts
sIFR & Cufon
HTML5: friend or foe (to Flash)?
• Native font rendering
• IE works via EOT

• Doesn't work in Firefox 3 - 7%
Streaming
Sockets
HTML5: friend or foe (to Flash)?
• 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
• It's possible, but complicated
WebSocket
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 () {};
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...");
};
HTML5: friend or foe (to Flash)?
Graphics
2D Graphics
Canvas
HTML5: friend or foe (to Flash)?
Google Analytics - Flash charts




Interactive Demo - Canvas charts
HTML5: friend or foe (to Flash)?
Let's get technical
HTML5: friend or foe (to Flash)?
<!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.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');
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;
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);
HTML5: friend or foe (to Flash)?
Let's mix it up
http://html5demos.com/canvas-grad
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
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
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
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
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
canvas.toDataURL("image/png");
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==
Canvas
     +
drawImage
     +
   Video
     =
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
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.drawImage(
  video, 0, 0,
  video.width,
  video.height,
  0, 0,
  canvas.width,
  canvas.height);




http://html5demos.com/video-canvas
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
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   g    b    a
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[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(',');
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
SVG
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
...using Flash!
segue: just like
screaming monkey
3D
CSS
Yeah, 3D CSS.
HTML5: friend or foe (to Flash)?
#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
WebGL
HTML5: friend or foe (to Flash)?
Mobile?
HTML5: friend or foe (to Flash)?
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:
 Server: serve
                   applicationCache    Browser: reload
manifest assets
                       updated



                     Browser: only
Browser: serve                          Server: 304 Not
                   request manifest
   locally                                 Modified
                         file
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
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
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
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
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
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
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
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
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
applicationCache.onUpdateReady =
function () {
   applicationCache.swapCache();
   notice('reload');
};

window.onOnline =
function () {
   // fire an update to the cache
   applicationCache.update();
};
Web Workers
•   "Threads"
•"Threads"

• Sandboxed
•"Threads"

• Sandboxed
• Debugging can be tricky
HTML5: friend or foe (to Flash)?
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.postMessage('run');
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);
  }
}
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);
  }
}
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);
  }
}
Can dos

• Spawn more workers
• setTimeout/Interval & clear
• Access navigator
• Error handling onerror
• XHR (though responseXML is null)
8 workers   Workers disabled
8 workers   Workers disabled
Geolocation
HTML5: friend or foe (to Flash)?
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
});
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Microdata,
datagrids,
                  Accessible
XHR2 & upload
progress events   Rich
                  Internet
                  Applications
    History
    manager,
    drag & drop     ...and more!
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

More Related Content

What's hot

La netnographie, quelles évolutions ?
La netnographie, quelles évolutions ? La netnographie, quelles évolutions ?
La netnographie, quelles évolutions ? Maria Mercanti-Guérin
 
Organiser des événements avec le mind mapping
Organiser des événements avec le mind mappingOrganiser des événements avec le mind mapping
Organiser des événements avec le mind mappingRobert de Quelen
 
230317 (WR) v1 Wijze lessen en AI.pdf
230317 (WR) v1 Wijze lessen en AI.pdf230317 (WR) v1 Wijze lessen en AI.pdf
230317 (WR) v1 Wijze lessen en AI.pdfWilfredRubens.com
 
La communication et l'intelligence artificielle , les Chatbots
La communication et l'intelligence artificielle , les Chatbots La communication et l'intelligence artificielle , les Chatbots
La communication et l'intelligence artificielle , les Chatbots Meissa Rassoul SECK
 
Le reporting d'activité de Community Manager
Le reporting d'activité de Community ManagerLe reporting d'activité de Community Manager
Le reporting d'activité de Community ManagerPoleDocumentation.fr
 
OS16 - 4.P1.b Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...
OS16 - 4.P1.b   Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...OS16 - 4.P1.b   Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...
OS16 - 4.P1.b Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...EuFMD
 
Comment bien rédiger le Cahier des charges de votre site web
Comment bien rédiger le Cahier des charges de votre site webComment bien rédiger le Cahier des charges de votre site web
Comment bien rédiger le Cahier des charges de votre site webpolenumerique33
 
Lets Chat AI - and Not Just ChatGPT
Lets Chat AI - and Not Just ChatGPTLets Chat AI - and Not Just ChatGPT
Lets Chat AI - and Not Just ChatGPTBrian Pichman
 
EL ARTE DE HACER DINERO.pdf
EL ARTE DE HACER DINERO.pdfEL ARTE DE HACER DINERO.pdf
EL ARTE DE HACER DINERO.pdfMarlonGarcia100
 

What's hot (9)

La netnographie, quelles évolutions ?
La netnographie, quelles évolutions ? La netnographie, quelles évolutions ?
La netnographie, quelles évolutions ?
 
Organiser des événements avec le mind mapping
Organiser des événements avec le mind mappingOrganiser des événements avec le mind mapping
Organiser des événements avec le mind mapping
 
230317 (WR) v1 Wijze lessen en AI.pdf
230317 (WR) v1 Wijze lessen en AI.pdf230317 (WR) v1 Wijze lessen en AI.pdf
230317 (WR) v1 Wijze lessen en AI.pdf
 
La communication et l'intelligence artificielle , les Chatbots
La communication et l'intelligence artificielle , les Chatbots La communication et l'intelligence artificielle , les Chatbots
La communication et l'intelligence artificielle , les Chatbots
 
Le reporting d'activité de Community Manager
Le reporting d'activité de Community ManagerLe reporting d'activité de Community Manager
Le reporting d'activité de Community Manager
 
OS16 - 4.P1.b Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...
OS16 - 4.P1.b   Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...OS16 - 4.P1.b   Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...
OS16 - 4.P1.b Vaccine Efficacy of FMD Virus-Like Particles Produced by the ...
 
Comment bien rédiger le Cahier des charges de votre site web
Comment bien rédiger le Cahier des charges de votre site webComment bien rédiger le Cahier des charges de votre site web
Comment bien rédiger le Cahier des charges de votre site web
 
Lets Chat AI - and Not Just ChatGPT
Lets Chat AI - and Not Just ChatGPTLets Chat AI - and Not Just ChatGPT
Lets Chat AI - and Not Just ChatGPT
 
EL ARTE DE HACER DINERO.pdf
EL ARTE DE HACER DINERO.pdfEL ARTE DE HACER DINERO.pdf
EL ARTE DE HACER DINERO.pdf
 

Viewers also liked

Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Aduci
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015Johannes Thönes
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?Sergii Zhuk
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Stephan Hochdörfer
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App developmentRalf Schwoebel
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web ApplicationAllan Huang
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Stephan Hochdörfer
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)robinzimmermann
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestRalf Schwoebel
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
El ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosEl ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosivazorro
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications Sunny Sharma
 

Viewers also liked (14)

Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with Javascript
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App development
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web Application
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The Manifest
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
El ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosEl ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicos
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications
 

Similar to HTML5: friend or foe (to Flash)?

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02PL dream
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014Christian Heilmann
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015Christian Heilmann
 

Similar to HTML5: friend or foe (to Flash)? (20)

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
 

More from Remy Sharp

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Forget the Web
Forget the WebForget the Web
Forget the WebRemy Sharp
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction ImplementationRemy Sharp
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the newRemy Sharp
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the webRemy Sharp
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless AppsRemy Sharp
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 

More from Remy Sharp (18)

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Forget the Web
Forget the WebForget the Web
Forget the Web
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction Implementation
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the web
 
TwitterLib.js
TwitterLib.jsTwitterLib.js
TwitterLib.js
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Recently uploaded

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Recently uploaded (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

HTML5: friend or foe (to Flash)?

  • 2. The Open Web Friend or Foe?
  • 6. Is Flash is dead?
  • 11. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV • Copy & paste <object> code
  • 12. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV create • Copy & paste <object> code
  • 13. Open web based • Capture video • Encode to mp4 • Add <video src="foo.mp4" />
  • 16. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Video Example</title> </head> <body> <video src="dizzy.mp4" controls/> </body> </html>
  • 20. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); }
  • 21. 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);
  • 22. API • play(), pause(), canPlayType(t)
  • 23. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc
  • 24. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc • progress, stalled, play, pause, waiting, canplay, seeking, timeupdate
  • 26. 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.
  • 27. 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.
  • 30. Pros
  • 32. Pros • No plugins required • Simple API: play(), pause() etc
  • 33. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same
  • 34. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same • Player chrome is HTML & CSS
  • 35. Cons
  • 43. <video controls> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  • 44. 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
  • 45. Flash will be needed for video for a while yet.
  • 46. fonts
  • 49. • Native font rendering • IE works via EOT • Doesn't work in Firefox 3 - 7%
  • 52. • Pushed data relies on Flash
  • 53. • Pushed data relies on Flash • If no Flash, switches to polling
  • 54. • Pushed data relies on Flash • If no Flash, switches to polling • Polling bad for high concurrency
  • 55. • Had to work in corporate environment • Corp env were blocking odd traffic & Flash • Needed to be pure JS solution • It's possible, but complicated
  • 57. 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 () {};
  • 58. 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..."); };
  • 64. Google Analytics - Flash charts Interactive Demo - Canvas charts
  • 68. <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
  • 69. var ctx = canvas.getContext('2d');
  • 70. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  • 71. 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');
  • 72. 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;
  • 73. 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);
  • 77. 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
  • 78. 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
  • 79. 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
  • 80. 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
  • 81. 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
  • 83. 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==
  • 84. Canvas + drawImage + Video =
  • 89. 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
  • 90. 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
  • 92. ctx.getImageData(0, 0, w, h); 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 93. pixels.data[i * 4 + 0]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 94. pixels.data[i * 4 + 1]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 95. pixels.data[i * 4 + 2]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 96. pixels.data[i * 4 + 3]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 97. 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(',');
  • 100. SVG
  • 105. 3D
  • 108. #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
  • 109. WebGL
  • 114. Offline Apps • Application cache / manifest • Events: offline, online • navigator.onLine property
  • 115. Offline Apps • Application cache / manifest • Events: offline, online
  • 118. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 119. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 121. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  • 122. The Manifest 2. First line must be: CACHE MANIFEST
  • 123. The Manifest 3. Including page is implicitly included in the cache.
  • 124. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  • 125. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  • 127. 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
  • 128. 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
  • 129. 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
  • 130. 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
  • 131. 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
  • 132. 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
  • 133. 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
  • 134. 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
  • 135. 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
  • 136. 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
  • 137. applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); }; window.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  • 139. "Threads"
  • 144. app.html var w = new Worker('worker.js');
  • 145. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); };
  • 146. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  • 147. 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); } }
  • 148. 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); } }
  • 149. 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); } }
  • 150. Can dos • Spawn more workers • setTimeout/Interval & clear • Access navigator • Error handling onerror • XHR (though responseXML is null)
  • 151. 8 workers Workers disabled
  • 152. 8 workers Workers disabled
  • 156. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 157. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 160. Microdata, datagrids, Accessible XHR2 & upload progress events Rich Internet Applications History manager, drag & drop ...and more!