The Open Web and what it means
5 likes•3,197 views
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.
![{
"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/85/The-Open-Web-and-what-it-means-25-320.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/85/The-Open-Web-and-what-it-means-56-320.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/85/The-Open-Web-and-what-it-means-65-320.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/85/The-Open-Web-and-what-it-means-76-320.jpg)
The Open Web and what it means
- 1. The Open Web and what it means
- 4. 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
- 7. @robertnyman
- 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 to https://browserid.org/verify with two parameters: curl -d "assertion=<ASSERTION>&audience=https:// mysite.com" "https://browserid.org/verify"
- 16. { "status": "okay", "email": "[email protected]", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org" }
- 20. pdf.js
- 21. Web Apps
- 22. Open Web technologies: HTML5, CSS, JavaScript A manifest file
- 23. Manifest file
- 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" }
- 27. Installing a Web App
- 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); } ); }
- 31. Web Apps and platforms
- 32. Introducing Web Runtime - WebRT
- 35. What's needed to run/install a Web App?
- 42. Marketplace
- 44. Dev tools
- 47. Fullscreen
- 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>
- 52. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
- 53. Camera
- 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. Battery
- 59. // Get battery level 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. IndexedDB
- 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. Boot to Gecko
- 71. Telephony & SMS
- 72. // Telephony object var 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 call var call = tel.dial("123456789");
- 73. // Receiving a call 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 var sms = navigator.mozSMS; // Send a message sms.send("123456789", "Hello world!"); // Recieve a message sms.onrecieved = function (event) { // Read message console.log(event.message); };
- 75. Vibration
- 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. Try new things
- 82. Take care of each other
- 83. Robert Nyman robertnyman.com/speaking/ [email protected] robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/