• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 & The Open Web -  at Nackademin
 

HTML5 & The Open Web - at Nackademin

on

  • 2,469 views

 

Statistics

Views

Total Views
2,469
Views on SlideShare
2,398
Embed Views
71

Actions

Likes
6
Downloads
36
Comments
1

6 Embeds 71

http://www.edutec.edu.sv 27
http://www.revista.espiritolivre.org 26
http://www.weebly.com 7
http://us-w1.rockmelt.com 6
http://www.capacitanet.org 4
http://127.0.0.1 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Have you ever been attracted by a hangbag for its model?Now, you have a chance to look through all these bags you have ever wanna see.Come on.Find one for youself.replica Burberry.Click here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 & The Open Web -  at Nackademin HTML5 & The Open Web - at Nackademin Presentation Transcript

    • HTML5 &The Open Web
    • Mozilla is aglobal non-profit 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
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • <meta charset="utf-8">
    • <header> <aside><article> <nav><section> <figure><footer> <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/B2Ghttps://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 () { // Devices battery level changed}, false);battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);battery.addEventListener("chargingtimechange", function () { // Devices charging time changed}, false);battery.addEventListener("dischargingtimechange", function () { // Devices 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,
    • 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/