html5 & the open web - at nackademin

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

@robertnyman

What is HTML5?

Semantics APIs

Platforms!

must die!!!Not rea

lly

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>

Video

<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);

Geolocation

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

Drag and Drop

Fullscreen

<button id="view-fullscreen">Fullscreen</button>

<script type="text/javascript">(function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }})(); </script>

mozRequestFullScreenWithKeys?

html:-moz-full-screen { background: red;}

html:-webkit-full-screen { background: red;}

Camera

<input type="file" id="take-picture" accept="image/*">

takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL;

// Create ObjectURL var imgURL = URL.createObjectURL(file);

// Set img src to ObjectURL showPicture.src = imgURL;

// Revoke ObjectURL URL.revokeObjectURL(imgURL); }};

Boot to Gecko

https://github.com/andreasgal/B2G

https://github.com/andreasgal/gaia

Telephony & SMS

// Telephony objectvar tel = navigator.mozTelephony;

// Check if the phone is muted (read/write property)console.log(tel.muted);

// Check if the speaker is enabled (read/write property)console.log(tel.speakerEnabled);

// Place a callvar call = tel.dial("123456789");

// Receiving a calltel.onincoming = function (event) { var incomingCall = event.call;

// Get the number of the incoming call console.log(incomingCall.number);

// Answer the call incomingCall.answer();};

// Disconnect a callcall.hangUp();

// SMS objectvar sms = navigator.mozSMS;

// Send a messagesms.send("123456789", "Hello world!");

// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};

Battery

// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";

// Get whether device is charging or notvar chargingStatus = battery.charging;

// Time until the device is fully chargedvar batteryCharged = battery.chargingTime;

// Time until the device is dischargedvar batteryDischarged = battery.dischargingTime;

battery.addEventLister("levelchange", function () { // Device's battery level changed}, false);

battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);

battery.addEventListener("chargingtimechange", function () { // Device's charging time changed}, false);

battery.addEventListener("dischargingtimechange", function () { // Device's discharging time changed}, false);

Vibration

(function () { document.querySelector("#vibrate-one-second").addEventListener("click", function () { navigator.mozVibrate(1000); }, false);

document.querySelector("#vibrate-twice").addEventListener("click", function () { navigator.mozVibrate([200, 100, 200, 100]); }, false);

document.querySelector("#vibrate-long-time").addEventListener("click", function () { navigator.mozVibrate(5000); }, false);

document.querySelector("#vibrate-off").addEventListener("click", function () { navigator.mozVibrate(0); }, false);})();

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?

http://caniuse.com/

Will HTML5 be around?

Try new things

Robert Nymanrobnyman@mozilla.comTwitter: @robertnyman

robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/