HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!
30. http://camendesign.com/code/video_for_everybody
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash"
data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally.
customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"OGG"</a>
</p>
39. 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.
53. pixels.data[i * 4 + 0];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a
54. pixels.data[i * 4 + 1];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a
55. pixels.data[i * 4 + 2];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a
56. pixels.data[i * 4 + 3];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a
57. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
}
58. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
This says loop
over each pixel
}
59. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
}
60. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
}
61. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
}
62. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
// don't need to do the alphachannel
}
63. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
// don't need to do the alphachannel
}
ctx.putImageData(px, 0, 0);
112. http://j.mp/geoshim
if (!navigator.geolocation) {
navigator.geolocation = (function (window) {
function getCurrentPosition(callback) {
// source: http://www.maxmind.com/app/javascript_city
var geourl = 'http://j.maxmind.com/app/geoip.js_' + Math.random(),
iframe = document.createElement('iframe'),
doc, win;
iframe.style.display = 'none';
window.document.body.appendChild(iframe);
doc = iframe.contentDocument || iframe.contentWindow.document;
win = iframe.contentWindow;
// once the script has loaded, it triggers an onload event
iframe.onload = function () {
// assign all the captured values across to our geo object
var geo = {
coords: {
latitude: win.geoip_latitude(),
longitude: win.geoip_longitude()
// other values are supported, i.e. accuracy, speed, heading, etc
},
timestamp: (new Date()).getTime()
137. CACHE MANIFEST
CACHE:
app.js
Served from cache app.css
index.html
NETWORK:
/live/*
FALLBACK:
* offline.html
138. CACHE MANIFEST
CACHE:
app.js
app.css
index.html
Requests to
http://mysite.com/live/x NETWORK:
/live/*
must go via the web
FALLBACK:
* offline.html
139. CACHE MANIFEST
CACHE:
app.js
app.css
Requests for files not
index.html
found in the cache,
NETWORK:
are directed to /live/*
offline.html (when
FALLBACK:
offline). / offline.html
140. 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
141. 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
142. 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
143. 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
144. 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
145. 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
146. 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
147. 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
148. 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
153. Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - embedding of data
Microdata
Cross server messaging
embedded attribute data
mime-type registration
DXHTML6
154. Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - embedding of data
Microdata
Cross server messaging
embedded attribute data
mime-type registration Lie.
DXHTML6