Plan
•Introduction
•Architecture
•Guidelines
•Création d'un écran
•Manifest
•Hosted/Packaged apps
•Permissions
•WebAPIs/We...
Firefox OS ???
http://www.mozilla.org/en-US/mission/

Nom de code : Boot To Gecko (B2G)
!

Firefox OS = Implémentation de ...
Firefox OS ???
Terminaux disponibles à la vente depuis Juillet 2013
Espagne, Pologne, Uruguay, Venezuela, Colombie, Mexiqu...
Architecture

Gonk : Noyau Linux + custom-built HAL (Hardware Abstraction Layer)
Gecko : Moteur de rendu HTML, CSS, JS bas...
Architecture

-

+

=

Gonk : Noyau Linux basé sur la version fournie par Android Open Source Project
Communication avec l...
UI Guidelines
http://www.mozilla.org/en-US/styleguide/products/firefox-os/

!
Création d’un écran
http://en.wikipedia.org/wiki/Single-page_application

<body role="application">
<section role="region"...
Manifest
https://developer.mozilla.org/en-US/Apps/Developing/Manifest
manifest.webapp
{
"version": "1",
"name": "Firefox O...
Manifest
Portage rapide
Hosted vs Packaged Apps
Hosted apps
!
!

•Hébergées sur votre propre
serveur (comme n’importe quel
site)
•Peuvent être ins...
Différentes permissions
https://developer.mozilla.org/en-US/docs/WebAPI

• Plain (web, default) : Toutes les apps qui ne d...
Différentes permissions
Web APIs
https://developer.mozilla.org/en-US/docs/WebAPI

Permettent d’accéder au hardware

// If this device supports the...
WebActivities
https://hacks.mozilla.org/2013/01/introducing-web-activities/
Similaire aux Intents (appels de fonctionnalit...
Simulateur
https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
Tips
Control + Shift + M
Command + Option + M
Gaia Building Blocks
http://buildingfirefoxos.com/

CSS animations
Buttons
Drawer (slide panel)
ActionBar (headers)
Input
L...
Hands-on
Fxos
Fxos
Prochain SlideShare
Chargement dans…5
×

Fxos

450 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
450
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Fxos

  1. 1. Plan •Introduction •Architecture •Guidelines •Création d'un écran •Manifest •Hosted/Packaged apps •Permissions •WebAPIs/WebActivities •Simulateur •Gaia Building Blocks •Hands-on
  2. 2. Firefox OS ??? http://www.mozilla.org/en-US/mission/ Nom de code : Boot To Gecko (B2G) ! Firefox OS = Implémentation de la mission de la fondation Mozilla (construire un meilleur Internet et un web plus ouvert et accessible à tous) sur la mobilité.
  3. 3. Firefox OS ??? Terminaux disponibles à la vente depuis Juillet 2013 Espagne, Pologne, Uruguay, Venezuela, Colombie, Mexique, Brésil… ZTE Open - Alcatel One Touch - Geeksphone Keon / Peaks
  4. 4. Architecture Gonk : Noyau Linux + custom-built HAL (Hardware Abstraction Layer) Gecko : Moteur de rendu HTML, CSS, JS basé sur celui du navigateur Firefox + Gestion des Web API Gaia : Interface utilisateur - Ensemble d’applications HTML5
  5. 5. Architecture - + = Gonk : Noyau Linux basé sur la version fournie par Android Open Source Project Communication avec le device via ADB (Android Debug Bridge) Fichiers apk (/system/app/) et police Roboto dans le filesystème Build.prop ClockWorkMod etc.
  6. 6. UI Guidelines http://www.mozilla.org/en-US/styleguide/products/firefox-os/ !
  7. 7. Création d’un écran http://en.wikipedia.org/wiki/Single-page_application <body role="application"> <section role="region" id="first-screen"> <header> <h1>My application</h1> </header> ! <article> My content </article> </section> ! <!-- Other sections --> </body>
  8. 8. Manifest https://developer.mozilla.org/en-US/Apps/Developing/Manifest manifest.webapp { "version": "1", "name": "Firefox OS Boilerplate App", "launch_path": "/index.html", "description": "Boilerplate Firefox OS app with example use cases to get started", "icons": { "60": "/images/logo60.png", "128": "/images/logo128.png" }, "developer": { "name": "Robert Nyman", "url": "http://robertnyman.com" }, "default_locale": "en", "permissions": { "desktop-notification": { "description": "To show notifications" }, "geolocation": { "description": "Marking out user location" } } }
  9. 9. Manifest Portage rapide
  10. 10. Hosted vs Packaged Apps Hosted apps ! ! •Hébergées sur votre propre serveur (comme n’importe quel site) •Peuvent être installées sur le device (avec un peu de JS + Manifest) •Facile à maintenir •Difficile de gérer le offline (appcache) •Limitées dans les APIs du système qu’elles peuvent utiliser Packaged apps ! ! •Distribuées dans un fichier .zip et installées dans l'appareil •Accès aux APIs du système •Mises à jour moins souples que pour les hosted apps (publication, validation Firefox Marketplace)
  11. 11. Différentes permissions https://developer.mozilla.org/en-US/docs/WebAPI • Plain (web, default) : Toutes les apps qui ne déclarent aucune permission particulière dans leur Manifest entrent dans cette catégorie. Elles ont accès à la plupart des APIs qui sont fournies dans les navigateurs, mais n’ont pas accès aux WebAPIs de Mozilla ! • Privileged : Accès à la plupart des APIs + certaines plus sensibles comme l’API des contacts du téléphone ou les alarmes système. Ces applications doivent être approuvées par Mozilla et signées par le MarketPlace pour pouvoir être installées sur les devices des utilisateurs - Processus de review plus long. ! • Certified : Seulement pour Mozilla et ses partenaires (constructeurs, telecom…) : Les applications certifiées ont accès à toutes les APIs, même les plus critiques (passer des appels etc.). Seules les apps inclues par défaut dans le système sont certifiées.
  12. 12. Différentes permissions
  13. 13. Web APIs https://developer.mozilla.org/en-US/docs/WebAPI Permettent d’accéder au hardware // If this device supports the vibrate API... if ('vibrate' in navigator) { // ... vibrate for a second navigator.vibrate(1000); } // Saving a contact var contact = new mozContact(); contact.init({name: 'Odin'}); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { /*...*/ }; request.onerror = function() { /*...*/ }; // Making calls var call = new MozActivity({ name: "dial", data: { number: "5555-9999" } });
  14. 14. WebActivities https://hacks.mozilla.org/2013/01/introducing-web-activities/ Similaire aux Intents (appels de fonctionnalités d’autres apps) // Open an image picker var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } }); // Open a URL var openURL = new MozActivity({ name: "view", data: { type: "url", // Possibly text/html in future versions url: "http://www.xebia.fr" } });
  15. 15. Simulateur https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
  16. 16. Tips Control + Shift + M Command + Option + M
  17. 17. Gaia Building Blocks http://buildingfirefoxos.com/ CSS animations Buttons Drawer (slide panel) ActionBar (headers) Input Lists Progress Value selectors etc…
  18. 18. Hands-on

×