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

HTML5 &The Open Web

Mozilla is aglobal non-proﬁt dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good

@robertnyman

What is HTML5?

Semantics APIs

Platforms!

must die!!! rea lly Not

HTML5 semantics

HTML5 Forms

http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/

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

LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication

var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();

web-socket-js Socket.IO

Geolocation

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

Ofﬂine Web Applications

if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesnt 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 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/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,

Questions

Is it ready? Will HTML5 be around?

Is it ready?

http://caniuse.com/

Will HTML5 be around?

Try new things

Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

http://www.revista.espiritolivre.org	816
http://www-ig-opensocial.googleusercontent.com	35
http://newsblur.com	32
http://www.newsblur.com	29
http://drbeat.li	27
http://hacks.mozilla.org	25
http://webdesigning.collected.info	18
https://hacks.mozilla.org	14
http://thewebdesign.collected.info	12
http://www.tux-es.org	11
http://127.0.0.1	10
http://us-w1.rockmelt.com	7
http://lanyrd.com	6
http://htmlfive.collected.info	3
http://www.hanrss.com	3
http://webcache.googleusercontent.com	2
http://html55.collected.info	1
http://xianguo.com	1
http://fever.lightcorp.net	1
http://1kpl.us	1

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

by Robert Nyman on Apr 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 1,054

Statistics

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