Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Open Web and what it means

2,333

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Open Web and what it means
  • 2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • 3. @robertnyman
  • 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. POST request to https://browserid.org/verify withtwo parameters:curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"
  • 6. { "status": "okay", "email": "lloyd@example.com", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org"}
  • 7. navigator.id.logout();
  • 8. pdf.js
  • 9. Web Apps
  • 10. Open Web technologies:HTML5, CSS, JavaScriptA manifest file
  • 11. Manifest file
  • 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. MIME type:application/x-web-app-manifest+json
  • 14. Installing a Web App
  • 15. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
  • 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. offline & localStorage
  • 18. Web Apps and platforms
  • 19. Introducing Web Runtime - WebRT
  • 20. Currently:WindowsMacAndroid
  • 21. Future:As many aspossible
  • 22. Whats needed to run/install a Web App?
  • 23. HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
  • 24. https://myapps.mozillalabs.com/
  • 25. Marketplace
  • 26. Dev tools
  • 27. Fullscreen
  • 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. mozRequestFullScreenWithKeys?
  • 30. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  • 31. Camera
  • 32. <input type="file" id="take-picture" accept="image/*">
  • 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. Battery
  • 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. 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. IndexedDB
  • 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. createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
  • 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. 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. Boot to Gecko
  • 43. https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  • 44. Telephony & SMS
  • 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. // 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. // 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. Vibration
  • 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. Try new things
  • 51. Take care of each other
  • 52. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

×