Firefox OS
Lengyel Zsolt
zsolt.lengyel.it@gmail.com
Bringing the Open Web to
Mobile Devices OS
Bringing The Boot to Gecko
project was launched to enable
the Open Web as a platform for
mobile devices. We’re making
inno...
Operators and developers write apps
and services for one platform and then
rewrite them for others. Users who
want to buy ...
Opportunities for
Developers
Using HTML5 and the new Mozillaproposed standard APIs, developers
everywhere will be able to create
amazing experiences an...
Customization for OEMs & Operators
OEMs and operators will be able to
provide content and services across
their entire device portfolio, regardless
of OS. An...
Consumer Freedom
Consumers who use devices based on the Open
Web platform will be able to easily access and
download their own content rega...
New Web Standards
Firefox OS produces an implementation of
these new Web standards to free mobile
platforms from the encumbrances of the
rul...
Components
GAI
A

APPS
GECKO
GONK
GONK
Lower level operating system, consisting of a
Linux kernel and HAL
(Hardware Abstraction Layer).
Possibility to expose any...
GECKO
The application runtime.
The rendering engine in Firefox for HTML5,
CSS & JavaScript.
Implements a number of APIs.
GAIA
The user interface.
Built entirely by HTML5 & Open Web APIs.
Web APIs
The Boot to Gecko project is based entirely
on open standards and the source code is
open and accessible to all.
Where ope...
WEBTELEPHONY
// Telephony object
var tel = navigator.mozTelephony;
// Check if the phone is muted (read/write property)
console.log(tel...
// Place a call
var cal = tel.dial(“123456789”);
// Events for that call
call.onstatechange = function (event) {
/*
Possible values for state:
"dialing", "ringing", "busy"...
// Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming c...
WEBSMS
// SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Recieve a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};
BATTERY
STATUS API
var battery = navigator.mozBattery
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (ba...
VIBRATION API
// Vibrate for one second
navigator.mozVibrate(1000);
// Vibration pattern [vibrationTime, pause,…]
navigator.mozVibrate([...
CONTACTS API
var contact = new mozContact();
contact.init({name: "Tom"});
var request = navigator.mozContacts.save(contact);
request.on...
SETTINGS API
var settings = window.navigator.mozSettings;
settings.getLock().set({"background":
"pretty.png"});
DEVICE
STORAGE API
var storage = navigator.getDeviceStorage("videos"),
cursor = storage.enumerate();
cursor.onerror = function() {
console.er...
SCREEN
ORIENTATION
API
// Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
"landscape-primary"
"l...
NETWORK
INFORMATION
API
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connectrion.metered;
KEYBOARD/IME
API
var keyboard = window.navigator.mozKeyboard;
keyboard.sendKey(0, keyCode);
Web Apps from Mozilla
Vibration
API,
Screen
Orientation,
Geolocation API, Mouse Lock API, Open
WebApps, Network Information API, Battery
Status ...
Writing Apps, Mozilla Marketplace
Web apps are apps built using standard Web technologies. They work
in any modern Web browser, and can be developed using y...
Steps to Take
1.

Develop Web App using
HTML5, CSS, & Javascript

2.

Create an app manifest file

3.

Publish/install the app
Develop Web App using
HTML5, CSS & JavaScript
Reuse any existing web site/app or develop from scratch with open
web standards.
Utilize HTML5 features such as localStora...
Create an app manifest file
Create a file with a .webapp extension
{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/...
MANIFEST CHECKER
Publish/install the app
Mozilla Marketplace
Installing/hosting the app
var request = navigator.mozApps.install(
"http://mozillalabs.com/MozillaBall.webapp",
{
user_id: "some_user"
}
);
request....
Development tools
Your favourite tools
App Manager
Thank you for your attention!

Questions
Firefox os-introduction
Firefox os-introduction
Firefox os-introduction
Firefox os-introduction
Firefox os-introduction
Upcoming SlideShare
Loading in...5
×

Firefox os-introduction

886

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox os-introduction

  1. 1. Firefox OS Lengyel Zsolt zsolt.lengyel.it@gmail.com
  2. 2. Bringing the Open Web to Mobile Devices OS
  3. 3. Bringing The Boot to Gecko project was launched to enable the Open Web as a platform for mobile devices. We’re making innovation possible by driving the development of new Web standards.
  4. 4. Operators and developers write apps and services for one platform and then rewrite them for others. Users who want to buy phones, e-readers and game consoles from different manufacturers often need to repurchase apps for each device.
  5. 5. Opportunities for Developers
  6. 6. Using HTML5 and the new Mozillaproposed standard APIs, developers everywhere will be able to create amazing experiences and apps. Developers will no longer need to learn and develop against platform-specific native APIs.
  7. 7. Customization for OEMs & Operators
  8. 8. OEMs and operators will be able to provide content and services across their entire device portfolio, regardless of OS. And they will be able to customize user experiences, manage app distribution and retain customer attention, loyalty and billing relationships.
  9. 9. Consumer Freedom
  10. 10. Consumers who use devices based on the Open Web platform will be able to easily access and download their own content regardless of which OS they use.
  11. 11. New Web Standards
  12. 12. Firefox OS produces an implementation of these new Web standards to free mobile platforms from the encumbrances of the rules and restrictions of existing proprietary platforms.
  13. 13. Components
  14. 14. GAI A APPS GECKO GONK
  15. 15. GONK
  16. 16. Lower level operating system, consisting of a Linux kernel and HAL (Hardware Abstraction Layer). Possibility to expose anything from the hardware to Gecko.
  17. 17. GECKO
  18. 18. The application runtime. The rendering engine in Firefox for HTML5, CSS & JavaScript. Implements a number of APIs.
  19. 19. GAIA
  20. 20. The user interface. Built entirely by HTML5 & Open Web APIs.
  21. 21. Web APIs
  22. 22. The Boot to Gecko project is based entirely on open standards and the source code is open and accessible to all. Where open standards are missing, we're working with standards bodies and other vendors to create them.
  23. 23. WEBTELEPHONY
  24. 24. // 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);
  25. 25. // Place a call var cal = tel.dial(“123456789”);
  26. 26. // Events for that call call.onstatechange = function (event) { /* Possible values for state: "dialing", "ringing", "busy", "connecting", "connected", "disconnecting", "disconnected", "incoming" */ console.log(event.state); }; // Above options as direct events call.onconnected = function () { // Call was connected }; call.ondisconnected = function () { // Call was disconnected };
  27. 27. // 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(); // Iterating over calls, and taking action depending on their changed status tel.oncallschanged = function (event) { tel.calls.forEach(function (call) { // Log the state of each call console.log(call.state); }); };
  28. 28. WEBSMS
  29. 29. // SMS object var sms = navigator.mozSMS; // Send a message sms.send("123456789", "Hello world!");
  30. 30. // Recieve a message sms.onreceived = function (event) { // Read message console.log(event.message); };
  31. 31. BATTERY STATUS API
  32. 32. var battery = navigator.mozBattery 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); }
  33. 33. VIBRATION API
  34. 34. // Vibrate for one second navigator.mozVibrate(1000); // Vibration pattern [vibrationTime, pause,…] navigator.mozVibrate([200, 100, 200, 100]); // Vibrate for 5 seconds navigator.mozVibrate(5000); // Turn off vibration navigator.mozVibrate(0);
  35. 35. CONTACTS API
  36. 36. 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") };
  37. 37. SETTINGS API
  38. 38. var settings = window.navigator.mozSettings; settings.getLock().set({"background": "pretty.png"});
  39. 39. DEVICE STORAGE API
  40. 40. var storage = navigator.getDeviceStorage("videos"), cursor = storage.enumerate(); cursor.onerror = function() { console.error("Error in DeviceStorage.enumerate()", cursor.error.name); }; cursor.onsuccess = function() { if (!cursor.result) return; var file = cursor.result; // If this isn't a video, skip it if (file.type.substring(0, 6) !== "video/") { cursor.continue(); return; } // If it isn't playable, skip it var testplayer = document.createElement("video"); if (!testplayer.canPlayType(file.type)) { cursor.continue(); return; } }
  41. 41. SCREEN ORIENTATION API
  42. 42. // Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
  43. 43. NETWORK INFORMATION API
  44. 44. var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connectrion.metered;
  45. 45. KEYBOARD/IME API
  46. 46. var keyboard = window.navigator.mozKeyboard; keyboard.sendKey(0, keyCode);
  47. 47. Web Apps from Mozilla
  48. 48. Vibration API, Screen Orientation, Geolocation API, Mouse Lock API, Open WebApps, Network Information API, Battery Status API, Alarm API, Push Notifications API, WebFM API / FMRadio, WebPayment, IndexedDB, Ambient light sensor, Proximity sensor, Notification Security Levels HOSTED Device Storage API Browser API TCP Socket API Contacts API systemXHR WebTelephony, WebSMS, Idle API, Settings API, Power Management API, Mobile Connection API, WiFi Information API, WebBluetooth, Permissions API, Network Stats API, Camera API, Time/Clock API, Attention screen, Voicemail PRIVILEGED CERTIFIED
  49. 49. Writing Apps, Mozilla Marketplace
  50. 50. Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools. The Open Web apps project proposes some small additions to existing sites to turn them into apps that run in a rich, fun, and powerful computing environment. These apps run on desktop browsers and mobile devices, and are easier for a user to discover and launch than Web sites.
  51. 51. Steps to Take
  52. 52. 1. Develop Web App using HTML5, CSS, & Javascript 2. Create an app manifest file 3. Publish/install the app
  53. 53. Develop Web App using HTML5, CSS & JavaScript
  54. 54. Reuse any existing web site/app or develop from scratch with open web standards. Utilize HTML5 features such as localStorage, offline manifest, IndexedDB and access Web APIs for more options. Responsive web design for adapting to varying resolutions and screen orientation.
  55. 55. Create an app manifest file
  56. 56. Create a file with a .webapp extension
  57. 57. { "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/" } }, "it": { "description": "Azione aperta emozionante di sviluppo di fotoricettore!", "developer": { "url": "http://it.mozillalabs.com/" } } }, "default_locale": "en" }
  58. 58. MANIFEST CHECKER
  59. 59. Publish/install the app
  60. 60. Mozilla Marketplace
  61. 61. Installing/hosting the app
  62. 62. var request = navigator.mozApps.install( "http://mozillalabs.com/MozillaBall.webapp", { user_id: "some_user" } ); request.onsuccess = function() { // Success! Notification, launch page etc } request.onerror = function() { // Failed. this.error.name has details }
  63. 63. Development tools
  64. 64. Your favourite tools
  65. 65. App Manager
  66. 66. Thank you for your attention! Questions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×