html5, the open web, and what it means for you - mdn hack day, sao paulo
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/1.jpg)
HTML5 &The Open Web
![Page 2: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/2.jpg)
![Page 3: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/3.jpg)
![Page 4: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/4.jpg)
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
![Page 5: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/5.jpg)
![Page 6: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/6.jpg)
![Page 8: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/8.jpg)
![Page 9: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/9.jpg)
What is HTML5?
![Page 10: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/10.jpg)
Semantics APIs
![Page 11: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/11.jpg)
Platforms!
![Page 13: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/13.jpg)
must die!!!Not really
![Page 14: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/14.jpg)
HTML5 semantics
![Page 15: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/15.jpg)
![Page 16: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/16.jpg)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
![Page 17: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/17.jpg)
<meta charset="utf-8">
![Page 18: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/18.jpg)
<header>
<article>
<section>
<footer>
<aside>
<nav>
<figure>
<figcaption>
![Page 19: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/19.jpg)
HTML5 Forms
![Page 20: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/20.jpg)
![Page 21: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/21.jpg)
![Page 22: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/22.jpg)
http://www.quirksmode.org/html5/inputs.html
http://www.quirksmode.org/html5/inputs_mobile.html
http://wufoo.com/html5/
![Page 28: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/28.jpg)
<video controls src="nasa.webm"></video>
![Page 29: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/29.jpg)
![Page 30: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/30.jpg)
Canvas
![Page 33: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/33.jpg)
pdf.js
![Page 34: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/34.jpg)
<canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
![Page 35: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/35.jpg)
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);
![Page 36: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/36.jpg)
History API
![Page 37: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/37.jpg)
window.history.pushState(state, title, url);
![Page 38: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/38.jpg)
var url = "http://robertnyman.com",title = "My blog",state = { address : url};
window.history.pushState(state, title, url);
![Page 39: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/39.jpg)
![Page 40: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/40.jpg)
Web Sockets
![Page 41: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/41.jpg)
What came before WebSockets?
Cross Frame Communication
HTTP Polling
LiveConnectForever Frame
AJAX
HTTP Long-Polling and XHR Streaming
![Page 42: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/42.jpg)
var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// Send dataws.send("Some data");
// Close the connectionws.close();
![Page 43: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/43.jpg)
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");};
![Page 44: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/44.jpg)
web-socket-js
Socket.IO
![Page 45: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/45.jpg)
Geolocation
![Page 46: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/46.jpg)
![Page 47: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/47.jpg)
![Page 48: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/48.jpg)
![Page 49: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/49.jpg)
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
![Page 50: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/50.jpg)
Offline Web Applications
![Page 51: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/51.jpg)
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;}
![Page 52: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/52.jpg)
// Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
![Page 53: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/53.jpg)
<!DOCTYPE html><html manifest="offline.appcache"><head>...
![Page 54: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/54.jpg)
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
![Page 55: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/55.jpg)
WebGL
![Page 56: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/56.jpg)
![Page 57: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/57.jpg)
![Page 58: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/58.jpg)
![Page 60: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/60.jpg)
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;}
![Page 61: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/61.jpg)
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,
![Page 64: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/64.jpg)
Questions
![Page 65: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/65.jpg)
Is it ready?
Will HTML5 be around?
![Page 66: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/66.jpg)
Is it ready?
![Page 67: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/67.jpg)
![Page 69: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/69.jpg)
Will HTML5 be around?
![Page 70: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/70.jpg)
![Page 71: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/71.jpg)
Try new things
![Page 72: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/72.jpg)
![Page 73: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/73.jpg)
![Page 74: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/74.jpg)
![Page 75: HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo](https://reader034.vdocuments.us/reader034/viewer/2022042606/54001db58d7f7249088b48aa/html5/thumbnails/75.jpg)
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/