Downloaded 26 times
![{ "version": "1.0", "name": "ABBAInfo", "description": "Getting some ABBA info", "icons": { "16": "/abbainfo/images/icon-16.png", "48": "/abbainfo/images/icon-48.png", "128": "/abbainfo/images/icon-128.png" }, "developer": { "name": "Robert Nyman", "url": "http://robertnyman.com" }, "installs_allowed_from": [ "*" ], "launch_path": "/abbainfo/", "locales": { }, "default_locale": "en" }](https://image.slidesharecdn.com/html5-web-5-1-120406044839-phpapp02/75/The-Open-Web-and-what-it-means-25-2048.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); } };](https://image.slidesharecdn.com/html5-web-5-1-120406044839-phpapp02/75/The-Open-Web-and-what-it-means-56-2048.jpg)
![putElephantInDb = function (blob) { // Open a transaction to the database var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE); // Put the blob into the dabase var put = transaction.objectStore("elephants").put(blob, "image"); // Retrieve the file that was just stored transaction.objectStore("elephants").get("image").onsuccess = function (event) { var imgFile = event.target.result; // Get window.URL object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.revokeObjectURL(imgURL); }; };](https://image.slidesharecdn.com/html5-web-5-1-120406044839-phpapp02/75/The-Open-Web-and-what-it-means-65-2048.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); })();](https://image.slidesharecdn.com/html5-web-5-1-120406044839-phpapp02/75/The-Open-Web-and-what-it-means-76-2048.jpg)
Uploaded byRobert Nyman
The Open Web and what it means
Mozilla is a nonprofit dedicated to empowering users and promoting open web standards. The document discusses Mozilla's Browser ID system for user authentication, tools for developing web applications including manifest files, installing apps, accessing device capabilities like the camera and battery, and using technologies like IndexedDB, HTML5, and CSS3. It also covers Mozilla's Boot to Gecko project and APIs for telephony, SMS, and vibration in mobile browsers.
The Open Web and what it means
- 1. The Open Web and what it means
- 4. Mozilla is a globalnon- profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 7.
- 14. <button id="browser-id">Log in</button> <script> document.querySelector("#browser-id").onclick = function () { navigator.id.get(function (assertion) { if (assertion) { AJAX request to your server with the assertion } }); } </script>
- 15. POST request tohttps://browserid.org/verify with two parameters: curl -d "assertion=<ASSERTION>&audience=https:// mysite.com" "https://browserid.org/verify"
- 16. { "status": "okay", "email": "lloyd@example.com", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org" }
- 17.
- 20.
- 21.
- 22. Open Web technologies: HTML5,CSS, JavaScript A manifest file
- 23.
- 25. { "version": "1.0", "name": "ABBAInfo", "description": "Getting some ABBA info", "icons": { "16": "/abbainfo/images/icon-16.png", "48": "/abbainfo/images/icon-48.png", "128": "/abbainfo/images/icon-128.png" }, "developer": { "name": "Robert Nyman", "url": "http://robertnyman.com" }, "installs_allowed_from": [ "*" ], "launch_path": "/abbainfo/", "locales": { }, "default_locale": "en" }
- 26.
- 27.
- 28. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback );
- 29. var mozApps =navigator.mozApps; if (mozApps) { navigator.mozApps.install( "http://localhost/abbainfo/manifest.webapp", { "userID": "Robocop" }, function () { console.log("Worked!"); console.log(result); }, function (result) { console.log("Failed :-("); console.log(result); } ); }
- 30.
- 31. Web Apps andplatforms
- 32. Introducing Web Runtime- WebRT
- 33.
- 34.
- 35. What's needed torun/install a Web App?
- 39.
- 41.
- 42.
- 44.
- 47.
- 50. <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>
- 51.
- 52. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
- 53.
- 55. <input type="file" id="take-picture"accept="image/*">
- 56. 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); } };
- 57.
- 59. // Get batterylevel in percentage var batteryLevel = battery.level * 100 + "%"; // Get whether device is charging or not var chargingStatus = battery.charging; // Time until the device is fully charged var batteryCharged = battery.chargingTime; // Time until the device is discharged var batteryDischarged = battery.dischargingTime;
- 60. 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);
- 61.
- 62. // IndexedDB var indexedDB= window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1; // Create/open database var request = indexedDB.open("elephantFiles", dbVersion);
- 63. createObjectStore = function(dataBase) { // Create an objectStore dataBase.createObjectStore("elephants"); } // Currently only in latest Firefox versions request.onupgradeneeded = function (event) { createObjectStore(event.target.result); };
- 64. request.onsuccess = function(event) { // Create XHR var xhr = new XMLHttpRequest(), blob; xhr.open("GET", "elephant.png", true); // Set the responseType to blob xhr.responseType = "blob"; xhr.addEventListener("load", function () { if (xhr.status === 200) { // Blob as response blob = xhr.response; // Put the received blob into IndexedDB putElephantInDb(blob); } }, false); // Send XHR xhr.send(); }
- 65. putElephantInDb = function(blob) { // Open a transaction to the database var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE); // Put the blob into the dabase var put = transaction.objectStore("elephants").put(blob, "image"); // Retrieve the file that was just stored transaction.objectStore("elephants").get("image").onsuccess = function (event) { var imgFile = event.target.result; // Get window.URL object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.revokeObjectURL(imgURL); }; };
- 66.
- 69.
- 71.
- 72. // Telephony object vartel = 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 call var call = tel.dial("123456789");
- 73. // Receiving acall tel.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 call call.hangUp();
- 74. // SMS object varsms = navigator.mozSMS; // Send a message sms.send("123456789", "Hello world!"); // Recieve a message sms.onrecieved = function (event) { // Read message console.log(event.message); };
- 75.
- 76. (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); })();
- 77.
- 82. Take care ofeach other
- 83. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/