HTML5 &The Open Web
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
@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...
Geolocation
if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function (position) {        alert(position.coord...
Drag and Drop
Fullscreen
<button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () {    var viewFullScreen = docu...
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.t...
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.mu...
// Receiving a calltel.onincoming = function (event) {    var incomingCall = event.call;     // Get the number of the inco...
// SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onr...
Battery
// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";// Get whether device is charging or notvar...
battery.addEventLister("levelchange", function () {    // Devices battery level changed}, false);battery.addEventListener(...
Vibration
(function () {    document.querySelector("#vibrate-one-second").addEventListener("click",        function () {            ...
WebGL
squareVertexPositionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);vertices = [    ...
var teapotPositions = new Float32Array([ 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/c...
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web -  at Nackademin
Upcoming SlideShare
Loading in...5
×

HTML5 & The Open Web - at Nackademin

2,315

Published on

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,315
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 & The Open Web - at Nackademin

  1. 1. HTML5 &The Open Web
  2. 2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  3. 3. @robertnyman
  4. 4. What is HTML5?
  5. 5. Semantics APIs
  6. 6. Platforms!
  7. 7. must die!!! rea lly Not
  8. 8. HTML5 semantics
  9. 9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  10. 10. <meta charset="utf-8">
  11. 11. <header> <aside><article> <nav><section> <figure><footer> <figcaption>
  12. 12. Video
  13. 13. <video controls src="nasa.webm"></video>
  14. 14. Canvas
  15. 15. pdf.js
  16. 16. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  17. 17. 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);
  18. 18. Geolocation
  19. 19. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  20. 20. Drag and Drop
  21. 21. Fullscreen
  22. 22. <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>
  23. 23. mozRequestFullScreenWithKeys?
  24. 24. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  25. 25. Camera
  26. 26. <input type="file" id="take-picture" accept="image/*">
  27. 27. 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); }};
  28. 28. Boot to Gecko
  29. 29. https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  30. 30. Telephony & SMS
  31. 31. // 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");
  32. 32. // 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();
  33. 33. // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
  34. 34. Battery
  35. 35. // 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;
  36. 36. 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);
  37. 37. Vibration
  38. 38. (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);})();
  39. 39. WebGL
  40. 40. 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;}
  41. 41. 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,
  42. 42. Questions
  43. 43. Is it ready? Will HTML5 be around?
  44. 44. Is it ready?
  45. 45. http://caniuse.com/
  46. 46. Will HTML5 be around?
  47. 47. Try new things
  48. 48. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×