Firefox OS - Answering global challenges

50 %
50 %
Information about Firefox OS - Answering global challenges
Education

Published on February 19, 2014

Author: cheilmann

Source: slideshare.net

Description

An overview presentation of Firefox OS at the San Francisco Developer week

FIREFOX OS Answering global challenges Christian Heilmann (@codepo8) Developerweek, San Francisco, Feb. 2014

SOME FACTS… ★ Released in fourteen countries: Spain, Poland, Venezuela, Colombia, Peru, Uruguay, Mexico, Brasil (more soon) ★ Released with 7 mobile operator partners, 3 hardware partners ★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb… ★ Aimed at emerging markets/low end market ★ Aimed to be an alternative to feature phones and unavailable closed environments. ★ Open source - it is all on GitHub

"Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"

I LIVE BY THE RIVER…

PEOPLE ARE BUSY…

BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of existing practices ★ Open, independent, standardised

PROMISES OF HTML5

LOCKOUT

FIXING HTML ISSUES

FIREFOX OS

ARCHITECTURE Third Party HTML5 Apps GAIA Web APIs / Web Actitivies Gecko rendering engine Linux/Gonk (ADB enabled)

- + =

PREDICTABLE HTML5 SUPPORT

SECURITY

AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/

APPLICATION MANIFEST {
 "version": "1.0",
 "name": "MozillaBall",
 "description": "Exciting Open Web development action!",
 "icons": {
 "16": "/img/icon-16.png",
 "48": "/img/icon-48.png",
 "128": "/img/icon-128.png"
 },
 "developer": {
 "name": "Mozilla Labs",
 "url": "http://mozillalabs.com"
 },
 "installs_allowed_from": ["*"],
 "appcache_path": "/cache.manifest",
 "locales": {
 "es": {
 "description": "¡Acción abierta emocionante del desarrollo del Web!",
 "developer": {
 "url": "http://es.mozillalabs.com/"
 }
 }
 },
 "default_locale": "en"
 }


APPLICATIONS Web Content Privileged Web App Regular web content More access, more responsibility Installed Web App Certified Web App A regular web app Device-critical applications

APPLICATIONS

PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }

WEB APIS

WEB APIS (FOR ALL) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM API Mouse Lock API (W3C) WebPayment Open WebApps IndexedDB (W3C) Network Information API (W3C) Ambient light sensor Battery Status API (W3C) Proximity sensor Alarm API Notification

BATTERY STATUS API

BATTERY STATUS API var battery = navigator.battery;
 if (battery) {
 var batteryLevel = Math.round(battery.level * 100) + "%",
 charging = (battery.charging)? "" : "not ",
 chargingTime = parseInt(battery.chargingTime / 60, 10),
 dischargingTime = parseInt(battery.dischargingTime / 60, 10);
 
 // Set events
 battery.addEventListener("levelchange", setStatus, false);
 battery.addEventListener("chargingchange", setStatus, false);
 battery.addEventListener("chargingtimechange", setStatus, false);
 battery.addEventListener("dischargingtimechange", setStatus, false); }

VIBRATION API

VIBRATION API // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 navigator.vibrate([200, 100, 200, 100]);
 
 // Vibrate for 5 seconds
 navigator.vibrate(5000);
 
 // Turn off vibration
 navigator.vibrate(0);

NETWORK INFORMATION API

NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;


PAGE VISIBILITY

PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });

PUSH NOTIFICATIONS

PUSH NOTIFICATIONS (REQUEST)

PUSH NOTIFICATIONS (RECEIVE)

WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR

CONTACTS API

CONTACTS API var contact = new mozContact();
 contact.init({name: "Tom"});
 
 var request = navigator.mozContacts.save(contact);
 request.onsuccess = function() {
 console.log("Success");
 };
 
 request.onerror = function() {
 console.log("Error")
 };

WEB APIS (CERTIFIED APPS) ! ! WebTelephony WebBluetooth WebSMS Permissions API Idle API Network Stats API Settings API Camera API Power Management API Time/Clock API Mobile Connection API Attention screen WiFi Information API Voicemail

CERTIFIED APPS = THE OS :)

CERTIFIED APPS = THE OS :) Dialer ! Contacts ! Settings ! SMS ! Web browser ! Gallery ! Video Player ! Music Player ! E-mail (POP, IMAP) ! Calendar Alarm Clock ! Camera ! Notes ! First Run Experience ! Notifications ! Home Screen ! Mozilla Marketplace ! System Updater ! Localization Support

WEB ACTIVITIES

GET A PHOTO? var getphoto = new MozActivity({
 name: "pick", 
 data: {
 type: ["image/png", "image/jpeg"], "image/jpg"]
 }
 });
 ! getphoto.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; getphoto.onerror = function () { // error };

APP DISTRIBUTION

FIREFOX OS MARKETPLACE https://marketplace.firefox.com/

INSTALL FROM THE WEB…

DYNAMIC APP WEB SEARCH

DEVELOPMENT ENVIRONMENT

DEVELOPER ENVIRONMENT

FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App

PROTOTYPING WITH JSFIDDLE 1. Write your code as a JSFiddle 2. Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app 3. Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/

BUILDING BLOCKS?

CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/

CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/

MOZILLA BRICK http://mozilla.github.io/brick/

MOZILLA BRICK <x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox> ! //JavaScript toggleButton.addEventListener("click", function() { flipBox.toggle(); }); http://mozilla.github.io/brick/

WHAT’S COOKING?

CORDOVA IMPLEMENTATION APIS • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration

CORDOVA IMPLEMENTATION APIS $ sudo npm install -g cordova $ cordova create hello com.example.hello HelloWorld $ cd hello $ cordova platform add firefoxos $ cordova prepare firefoxos

CAMERA API $ cordova plugin add org.apache.cordova.camera ! //Cordova code navigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1 });

MORE WEB APIS… Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API

APPMAKER! Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API

DEVELOPER HUB https://marketplace.firefox.com/developers/

MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/

FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/

FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

TO WRAP UP…

NOTHING IS WASTED… ! Aquarium Plants (Android w/ hand-coded native wrapper) Calc (iOS w/ hand-coded native wrapper) Calcula Hipoteca (Amazon Appstore) Captain Rogers (HTML5 Desktop) Cartelera Panama (Appcelerator Titanium) Fresh Food Finder (PhoneGap) Picross (WebOS) Reditr (Chrome Dev Store) Speed Cube Timer (Blackberry Webworks) Squarez (C++) Touch 12i (Windows Phone/ HTML5) https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/

THANKS! CHRIS HEILMANN @CODEPO8

Add a comment

Related presentations

Related pages

Firefox OS - Answering Global Challenges - YouTube

Presentation by Christian Heilmann during Developerweek, San Francisco, Feb 2014. Presented by www.tradeshift.com In this presentation Chris ...
Read more

Firefox OS - La plataforma que HTML5 merece (Episodio 1 ...

Firefox OS - La plataforma que HTML5 merece (Episodio 1) ... Firefox OS - Answering Global Challenges - Duration: 54:41. by Tradeshift 308 views.
Read more

Global Challenges | LinkedIn

Global Challenges, Emerging Technologies, ... Firefox OS - Answering global challenges. 6,281 Views. TSCInsights. Global challenges to outsourcing. 3,179 ...
Read more

Firefox | LinkedIn

Firefox OS - Answering global challenges. 6,281 Views. dynamis. HTML5 + Firefox OS. 3,342 Views. bobchao. Firefox OS Add-on in 10 minutes. 507 Views. mijia ...
Read more

Firefox – Desktop browser, Android, iOS, OS, Hello, Sync ...

Firefox OS. Get just what you need. Firefox Hello. ... Sync. Connect Firefox wherever you use it. Private Browsing. Now with Tracking Protection. Mozilla ...
Read more

Firefox OS for TV UX Overview | Mozilla UX

The television’s display comes with its challenges and ... so quick global navigation ... For more information and guides about Firefox OS ...
Read more

Cookies, caches and cows | The Economist

Translating technological terms throws up some peculiar challenges. ... behind Firefox, ... the Firefox OS will create a sort of global Rosetta ...
Read more

Download Firefox — Free Web Browser — Mozilla

Download Mozilla Firefox, ... Firefox is created by a global non-profit dedicated to putting individuals in ... Learn about Firefox OS; Download a fresh ...
Read more