html5 & the open web - at nackademin
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/1.jpg)
HTML5 &The Open Web
![Page 2: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/2.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 3: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/3.jpg)
![Page 5: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/5.jpg)
What is HTML5?
![Page 6: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/6.jpg)
Semantics APIs
![Page 7: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/7.jpg)
Platforms!
![Page 9: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/9.jpg)
must die!!!Not rea
lly
![Page 10: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/10.jpg)
HTML5 semantics
![Page 11: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/11.jpg)
![Page 12: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/12.jpg)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
![Page 13: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/13.jpg)
<meta charset="utf-8">
![Page 14: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/14.jpg)
<header>
<article>
<section>
<footer>
<aside>
<nav>
<figure>
<figcaption>
![Page 20: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/20.jpg)
<video controls src="nasa.webm"></video>
![Page 21: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/21.jpg)
![Page 22: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/22.jpg)
Canvas
![Page 25: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/25.jpg)
pdf.js
![Page 26: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/26.jpg)
<canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
![Page 27: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/27.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 28: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/28.jpg)
Geolocation
![Page 29: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/29.jpg)
![Page 30: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/30.jpg)
![Page 31: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/31.jpg)
![Page 32: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/32.jpg)
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
![Page 33: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/33.jpg)
Drag and Drop
![Page 34: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/34.jpg)
Fullscreen
![Page 35: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/35.jpg)
![Page 36: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/36.jpg)
![Page 37: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/37.jpg)
<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>
![Page 38: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/38.jpg)
mozRequestFullScreenWithKeys?
![Page 39: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/39.jpg)
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
![Page 41: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/41.jpg)
![Page 42: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/42.jpg)
<input type="file" id="take-picture" accept="image/*">
![Page 43: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/43.jpg)
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); }};
![Page 44: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/44.jpg)
Boot to Gecko
![Page 45: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/45.jpg)
![Page 46: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/46.jpg)
![Page 47: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/47.jpg)
https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia
![Page 48: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/48.jpg)
Telephony & SMS
![Page 49: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/49.jpg)
// 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");
![Page 50: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/50.jpg)
// 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();
![Page 51: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/51.jpg)
// SMS objectvar sms = navigator.mozSMS;
// Send a messagesms.send("123456789", "Hello world!");
// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
![Page 52: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/52.jpg)
Battery
![Page 53: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/53.jpg)
![Page 54: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/54.jpg)
// 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;
![Page 55: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/55.jpg)
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);
![Page 56: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/56.jpg)
Vibration
![Page 57: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/57.jpg)
(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);})();
![Page 58: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/58.jpg)
WebGL
![Page 59: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/59.jpg)
![Page 60: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/60.jpg)
![Page 61: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/61.jpg)
![Page 63: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/63.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 64: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/64.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 67: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/67.jpg)
Questions
![Page 68: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/68.jpg)
Is it ready?
Will HTML5 be around?
![Page 69: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/69.jpg)
Is it ready?
![Page 70: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/70.jpg)
![Page 72: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/72.jpg)
Will HTML5 be around?
![Page 73: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/73.jpg)
![Page 74: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/74.jpg)
Try new things
![Page 75: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/75.jpg)
![Page 76: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/76.jpg)
![Page 77: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/77.jpg)
![Page 78: HTML5 & The Open Web - at Nackademin](https://reader034.vdocument.in/reader034/viewer/2022051608/5408bb548d7f7267058b4584/html5/thumbnails/78.jpg)
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/