Your SlideShare is downloading. ×
0
The Open Web and what it means
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
@robertnyman
<button id="browser-id">Log in</button><script>    document.querySelector("#browser-id").onclick = function () {         n...
POST request to https://browserid.org/verify withtwo parameters:curl -d "assertion=<ASSERTION>&audience=https://mysite.com...
{    "status": "okay",    "email": "lloyd@example.com",    "audience": "https://mysite.com",    "expires": 1308859352261, ...
navigator.id.logout();
pdf.js
Web Apps
Open Web technologies:HTML5, CSS, JavaScriptA manifest file
Manifest file
{    "version": "1.0",    "name": "ABBAInfo",    "description": "Getting some ABBA info",    "icons": {        "16": "/abb...
MIME type:application/x-web-app-manifest+json
Installing a Web App
navigator.mozApps.install(    URLToManifestFile,    installData,    sucessCallback,    errorCallback);
var mozApps = navigator.mozApps;if (mozApps) {    navigator.mozApps.install(        "http://localhost/abbainfo/manifest.we...
offline & localStorage
Web Apps and platforms
Introducing Web Runtime - WebRT
Currently:WindowsMacAndroid
Future:As many aspossible
Whats needed to run/install a Web App?
HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
https://myapps.mozillalabs.com/
Marketplace
Dev tools
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...
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(...
IndexedDB
// IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.OIndexedDB || windo...
createObjectStore = function (dataBase) {    // Create an objectStore    dataBase.createObjectStore("elephants");}// Curre...
request.onsuccess = function (event) {    // Create XHR    var xhr = new XMLHttpRequest(),        blob;    xhr.open("GET",...
putElephantInDb = function (blob) {    // Open a transaction to the database    var transaction = db.transaction(["elephan...
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...
Vibration
(function () {    document.querySelector("#vibrate-one-second").addEventListener("click",        function () {            ...
Try new things
Take care of each other
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
The Open Web and what it means
Upcoming SlideShare
Loading in...5
×

The Open Web and what it means

2,338

Published on

Published in: Technology, Art & Photos
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,338
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "The Open Web and what it means"

  1. 1. The Open Web and what it means
  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. <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>
  5. 5. POST request to https://browserid.org/verify withtwo parameters:curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"
  6. 6. { "status": "okay", "email": "lloyd@example.com", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org"}
  7. 7. navigator.id.logout();
  8. 8. pdf.js
  9. 9. Web Apps
  10. 10. Open Web technologies:HTML5, CSS, JavaScriptA manifest file
  11. 11. Manifest file
  12. 12. { "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"}
  13. 13. MIME type:application/x-web-app-manifest+json
  14. 14. Installing a Web App
  15. 15. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
  16. 16. 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); } );}
  17. 17. offline & localStorage
  18. 18. Web Apps and platforms
  19. 19. Introducing Web Runtime - WebRT
  20. 20. Currently:WindowsMacAndroid
  21. 21. Future:As many aspossible
  22. 22. Whats needed to run/install a Web App?
  23. 23. HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
  24. 24. https://myapps.mozillalabs.com/
  25. 25. Marketplace
  26. 26. Dev tools
  27. 27. Fullscreen
  28. 28. <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>
  29. 29. mozRequestFullScreenWithKeys?
  30. 30. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  31. 31. Camera
  32. 32. <input type="file" id="take-picture" accept="image/*">
  33. 33. 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); }};
  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. IndexedDB
  38. 38. // IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction || window.OIDBTransaction ||window.msIDBTransaction, dbVersion = 1;// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion);
  39. 39. createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
  40. 40. 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();}
  41. 41. 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); };};
  42. 42. Boot to Gecko
  43. 43. https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  44. 44. Telephony & SMS
  45. 45. // 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");
  46. 46. // 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();
  47. 47. // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
  48. 48. Vibration
  49. 49. (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);})();
  50. 50. Try new things
  51. 51. Take care of each other
  52. 52. 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.

×