83
The Open Web and what it means

The Open Web and what it means

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 4: The Open Web and what it means

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

Page 5: The Open Web and what it means
Page 6: The Open Web and what it means
Page 8: The Open Web and what it means
Page 9: The Open Web and what it means
Page 10: The Open Web and what it means
Page 14: The Open Web and what it means

<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>

Page 15: The Open Web and what it means

POST request to https://browserid.org/verify with two parameters:

curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"

Page 16: The Open Web and what it means

{ "status": "okay", "email": "[email protected]", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org"}

Page 17: The Open Web and what it means

navigator.id.logout();

Page 22: The Open Web and what it means

Open Web technologies:

HTML5, CSS, JavaScript

A manifest file

Page 23: The Open Web and what it means

Manifest file

Page 24: The Open Web and what it means
Page 25: The Open Web and what it means

{ "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"}

Page 26: The Open Web and what it means

MIME type:

application/x-web-app-manifest+json

Page 27: The Open Web and what it means

Installing a Web App

Page 28: The Open Web and what it means

navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);

Page 29: The Open Web and what it means

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); } );}

Page 30: The Open Web and what it means

offline & localStorage

Page 32: The Open Web and what it means

Introducing Web Runtime - WebRT

Page 33: The Open Web and what it means

Currently:

WindowsMacAndroid

Page 36: The Open Web and what it means
Page 37: The Open Web and what it means
Page 38: The Open Web and what it means
Page 40: The Open Web and what it means
Page 43: The Open Web and what it means
Page 45: The Open Web and what it means
Page 46: The Open Web and what it means
Page 48: The Open Web and what it means
Page 49: The Open Web and what it means
Page 50: The Open Web and what it means

<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>

Page 51: The Open Web and what it means

mozRequestFullScreenWithKeys?

Page 52: The Open Web and what it means

html:-moz-full-screen { background: red;}

html:-webkit-full-screen { background: red;}

Page 54: The Open Web and what it means
Page 55: The Open Web and what it means

<input type="file" id="take-picture" accept="image/*">

Page 56: The Open Web and what it means

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); }};

Page 58: The Open Web and what it means
Page 59: The Open Web and what it means

// 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;

Page 60: The Open Web and what it means

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);

Page 62: The Open Web and what it means

// 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);

Page 63: The Open Web and what it means

createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}

// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};

Page 64: The Open Web and what it means

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();}

Page 65: The Open Web and what it means

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); };};

Page 67: The Open Web and what it means
Page 68: The Open Web and what it means
Page 72: The Open Web and what it means

// 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");

Page 73: The Open Web and what it means

// 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();

Page 74: The Open Web and what it means

// SMS objectvar sms = navigator.mozSMS;

// Send a messagesms.send("123456789", "Hello world!");

// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};

Page 76: The Open Web and what it means

(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);})();

Page 78: The Open Web and what it means
Page 81: The Open Web and what it means
Page 82: The Open Web and what it means

Take care of each other