HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo

Mozilla is a
global non-
proﬁt dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public good

must die!!!
rea lly
Not

http://www.quirksmode.org/html5/inputs.html

http://www.quirksmode.org/html5/inputs_mobile.html

http://wufoo.com/html5/

<canvas id="my-canvas" width="500" height="500">
I am canvas
</canvas>

var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");

context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);

context.clearRect(40, 40, 20, 20);

window.history.pushState(state, title, url);

var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};

window.history.pushState(state, title, url);

LiveConnect
Forever Frame

HTTP Long-Polling and XHR Streaming

What came before WebSockets?

AJAX
HTTP Polling

Cross Frame Communication

var ws = new WebSocket("ws://robertnyman.com/wsmagic");

// Send data
ws.send("Some data");

// Close the connection
ws.close();

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert(position.coords.latitude + ", " + position.coords.longitude);
});
}

if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}

// Poll the navigator.onLine property
setInterval(function () {
console.log(navigator.onLine);
}, 1000);

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...

CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates

squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}

var teapotPositions = new Float32Array([ 17.83489990234375, 0, 30.573999404907227,
16.452699661254883, -7.000179767608643, 30.573999404907227, 16.223100662231445,
-6.902520179748535, 31.51460075378418, 17.586000442504883, 0, 31.51460075378418,
16.48940086364746, -7.015810012817383, 31.828100204467773, 17.87470054626465, 0,
31.828100204467773, 17.031099319458008, -7.246280193328857, 31.51460075378418,
18.46190071105957, 0, 31.51460075378418, 17.62779998779297, -7.500199794769287,
30.573999404907227, 19.108800888061523, 0, 30.573999404907227, 12.662699699401855,
-12.662699699401855, 30.573999404907227, 12.486100196838379, -12.486100196838379,
31.51460075378418, 12.690999984741211, -12.690999984741211, 31.828100204467773,
13.10789966583252, -13.10789966583252, 31.51460075378418, 13.56719970703125,
-13.56719970703125, 30.573999404907227, 7.000179767608643, -16.452699661254883,
30.573999404907227, 6.902520179748535, -16.223100662231445, 31.51460075378418,
7.015810012817383, -16.48940086364746, 31.828100204467773, 7.246280193328857,
-17.031099319458008, 31.51460075378418, 7.500199794769287, -17.62779998779297,
30.573999404907227, 0, -17.83489990234375, 30.573999404907227, 0, -17.586000442504883,
31.51460075378418, 0, -17.87470054626465, 31.828100204467773, 0, -18.46190071105957,
31.51460075378418, 0, -19.108800888061523, 30.573999404907227, 0, -17.83489990234375,
30.573999404907227, -7.483870029449463, -16.452699661254883, 30.573999404907227,
-7.106579780578613, -16.223100662231445, 31.51460075378418, 0, -17.586000442504883,
31.51460075378418, -7.07627010345459, -16.48940086364746, 31.828100204467773, 0,
-17.87470054626465, 31.828100204467773, -7.25383996963501, -17.031099319458008,
31.51460075378418, 0, -18.46190071105957, 31.51460075378418, -7.500199794769287,
-17.62779998779297, 30.573999404907227, 0, -19.108800888061523, 30.573999404907227,
-13.092700004577637, -12.662699699401855, 30.573999404907227, -12.667499542236328,
-12.486100196838379, 31.51460075378418, -12.744799613952637, -12.690999984741211,
31.828100204467773, -13.11460018157959, -13.10789966583252, 31.51460075378418,
-13.56719970703125, -13.56719970703125, 30.573999404907227, -16.61389923095703,
-7.000179767608643, 30.573999404907227, -16.291099548339844, -6.902520179748535,
31.51460075378418, -16.50950050354004, -7.015810012817383, 31.828100204467773,
-17.033599853515625, -7.246280193328857, 31.51460075378418, -17.62779998779297,
-7.500199794769287, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227,
-17.586000442504883, 0, 31.51460075378418, -17.87470054626465, 0, 31.828100204467773,
-18.46190071105957, 0, 31.51460075378418, -19.108800888061523, 0, 30.573999404907227,
-17.83489990234375, 0, 30.573999404907227, -16.452699661254883, 7.000179767608643,

Is it ready?

Will HTML5 be
around?

Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/

HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo

Similar to HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo (20)

More from Robert Nyman

More from Robert Nyman (20)

Recently uploaded

Recently uploaded (20)

HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo