html5, the open web, and what it means for you - mdn hack day, sao paulo
DESCRIPTION
TRANSCRIPT
HTML5 &The Open Web
Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
What is HTML5?
Semantics APIs
Platforms!
must die!!!Not really
HTML5 semantics
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<header>
<article>
<section>
<footer>
<aside>
<nav>
<figure>
<figcaption>
HTML5 Forms
http://www.quirksmode.org/html5/inputs.html
http://www.quirksmode.org/html5/inputs_mobile.html
http://wufoo.com/html5/
<video controls src="nasa.webm"></video>
Canvas
pdf.js
<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);
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = { address : url};
window.history.pushState(state, title, url);
Web Sockets
What came before WebSockets?
Cross Frame Communication
HTTP Polling
LiveConnectForever Frame
AJAX
HTTP Long-Polling and XHR Streaming
var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// Send dataws.send("Some data");
// Close the connectionws.close();
var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// When connection is openedws.onopen = function () { console.log("Connection opened!");};
// When you receive a messagews.onmessage = function (evt) { console.log(evt.data);};
// When you close the connectionws.onclose = function () { console.log("Connection closed");};
// When an error occurred ws.onerror = function () { console.log("An error occurred");};
web-socket-js
Socket.IO
Geolocation
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
Offline Web Applications
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 propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
WebGL
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, 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,
Questions
Is it ready?
Will HTML5 be around?
Is it ready?
Will HTML5 be around?
Try new things
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/