Firefox OS 
de la théorie à la pratique 
Christophe Villeneuve 
@hellosct1
Qui... est Christophe Villeneuve ? 
<< 
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – p...
Aujourd'hui 
● La théorie 
● La pratique 
● Autre utilisation
Firefox OS C'est 
● Navigation par onglets 
● Gestion mémoire 
● Créer vos applications 
personnalisées et 
différencier U...
➢GAIA 
➢GECKO 
GONK 
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK 
✔ Couche basse 
✔ Kernel Linux + Matériels 
✔ Hardware 
✔ libre ou propriétaire 
✔ Abstraction Layer (HAL) 
✔ Pas ex...
➢GONK 
➢GECKO 
✔ Moteur de rendu HTML5 
✔ Gestion des API 
✔ De plus en plus complet 
✔ Exécution des applications 
(runti...
➢GONK 
➢GECKO 
➢GAIA 
✔ Interface utilisateur (IHM) 
✔ Construction API Full Web 
✔ HTML 5 + open Web 
✔ Communique avec G...
Composants → Web apps
Gestion des demandes par Gonk
Système de communication
Les compétences 
Les compétences
Les langages du web 
https://developer.mozilla.org/en-US/docs/Web/Tutorials
Outils 
Editeur de texte 
● Gedit 
● Notepad++ 
● Eclipse 
● Brackets 
● ... 
Navigateur 
● Firefox ou autre 
– Outils de ...
Appareils mobiles (Quelques modèles) 
Alcatel One Touch 
Flame 
GeeksPhone 
ZTE 
Open C 
Intex 
Cloud FX
Architecture 
Firefox OS Web 
Index.html 
Img=images 
Css= feuilles de styles 
js=javascripts
{ 
"version": "1.0", 
"name": "Batterie", 
"description": "Gestion de la batterie", 
"launch_path": "/index.html", 
"icons...
Manifest.appcache 
CACHE MANIFEST 
# Version 1.0 
CACHE: 
/css/all.css 
/js/lib/all.js 
/js/all.js 
/index.html
Js/battery.js 
var battery = navigator.battery || navigator.mozBattery || 
navigator.webkitBattery; 
// définir les élémen...
Js/battery.js (suite) 
if(battery.charging) { 
// batterie chargé 
if(chargingState == 1 || chargingState == 0) { 
battery...
index.html 
<!DOCTYPE html> 
<html lang="en" manifest="manifest.appcache"> 
<head> 
<meta charset="utf­8" 
/> 
<title>Batt...
Tester l'application 
Navigateur 
Mobile 
http://mdn.github.io/battery-quickstart-finished-example/
Simulateur 
● Firefox OS simulator 
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ 
● Lancer App Manager 
(d...
App Manager
Résultat
Débug
https://marketplace.firefox.com/developers/
✔ 100 % le contrôle 
✔ Pas d'intermédiaire 
✔ Chez vous 
✔ Déporté 
✔ Sur la market 
Marketplace
https://marketplace.firefox.com/developers/validator 
Validateur
Marketplace 
https://marketplace.firefox.com/
Autre Utilisation
Industriels utilisant Firefox OS 
Kickstarter sur une clé HDMI
URL ? 
http://marketplace.mozilla.org 
http://www.mozilla.org/firefoxos 
http://wiki.mozilla.org/Gaia/Hacking 
https://dev...
Merci 
Sources des slides : 
Tristant Nitot 
Loic Cuguen 
https://developer.mozilla.org/fr/Apps/Quickstart
Firefox OS de la théorie à la pratique - OSDC
Firefox OS de la théorie à la pratique - OSDC
Prochain SlideShare
Chargement dans…5
×

Firefox OS de la théorie à la pratique - OSDC

3 875 vues

Publié le

Présentation effectuée à l'Open Source Developers Conference (OSDC.fr) 2014 sur "Firefox OS : De la théorie à la pratique" par Christophe Villeneuve

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Firefox OS de la théorie à la pratique - OSDC

  1. 1. Firefox OS de la théorie à la pratique Christophe Villeneuve @hellosct1
  2. 2. Qui... est Christophe Villeneuve ? << afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant
  3. 3. Aujourd'hui ● La théorie ● La pratique ● Autre utilisation
  4. 4. Firefox OS C'est ● Navigation par onglets ● Gestion mémoire ● Créer vos applications personnalisées et différencier UX ● Tout en application Web
  5. 5. ➢GAIA ➢GECKO GONK https://mdn.mozillademos.org/files/4605/FirefoxOS.png
  6. 6. GONK ✔ Couche basse ✔ Kernel Linux + Matériels ✔ Hardware ✔ libre ou propriétaire ✔ Abstraction Layer (HAL) ✔ Pas exposé le JS ✔ Isolé de Gaia ✔ Communication par Gecko Architecture (1/3)
  7. 7. ➢GONK ➢GECKO ✔ Moteur de rendu HTML5 ✔ Gestion des API ✔ De plus en plus complet ✔ Exécution des applications (runtime) ✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript Architecture
  8. 8. ➢GONK ➢GECKO ➢GAIA ✔ Interface utilisateur (IHM) ✔ Construction API Full Web ✔ HTML 5 + open Web ✔ Communique avec Gecko via des Web API ✔ Les Apps sont exécutés en mode sandbox ✔ Offline ✔ LocalStorage, appCache Architecture
  9. 9. Composants → Web apps
  10. 10. Gestion des demandes par Gonk
  11. 11. Système de communication
  12. 12. Les compétences Les compétences
  13. 13. Les langages du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  14. 14. Outils Editeur de texte ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Navigateur ● Firefox ou autre – Outils de Débug – Firefox OS App Manager
  15. 15. Appareils mobiles (Quelques modèles) Alcatel One Touch Flame GeeksPhone ZTE Open C Intex Cloud FX
  16. 16. Architecture Firefox OS Web Index.html Img=images Css= feuilles de styles js=javascripts
  17. 17. { "version": "1.0", "name": "Batterie", "description": "Gestion de la batterie", "launch_path": "/index.html", "icons": { "16": "/img/icons/osdc­16. png", "32": "/img/icons/osdc­32. png", "64": "/img/icons/osdc­64. png", "128": "/img/icons/osdc­128. png", "256": "/img/icons/osdc­256. png", }, "developer": { "name": "Hello / Sector One", "url": "http://www.hello­design. fr" }, "installs_allowed_from": ["*"], "appcache_path": "/manifest.appcache", "locales": { "fr": { "name" : "Batterie", "description": "gestion de la batterie", "developer": { "url": "http://www.triplea.fr/alchimie" } } }, "default_locale": "en" } Manifest.webapp
  18. 18. Manifest.appcache CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html
  19. 19. Js/battery.js var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; // définir les éléments var indicator1 = document.getElementById('indicator1'); var indicator2 = document.getElementById('indicator2'); var batteryCharge = document.getElementById('battery­charge'); var batteryTop = document.getElementById('battery­top'); var chargeIcon = document.getElementById('battery­charging'); // Position indicateur // 0 Initialisation, 1 batterie chargé, 2 batterie non chargé var chargingState = 0;
  20. 20. Js/battery.js (suite) if(battery.charging) { // batterie chargé if(chargingState == 1 || chargingState == 0) { batteryTop.style.backgroundColor = 'gold'; batteryCharge.style.backgroundColor = 'gold'; indicator2.innerHTML = "Battery is charging"; chargeIcon.style.visibility = 'visible'; createNotification("batterie chargé"); // flip the chargingState flag to 2 chargingState = 2; } } } else if(!battery.charging) { // Batterie non chargé if(chargingState == 2 || chargingState == 0) { batteryTop.style.backgroundColor = 'yellow'; batteryCharge.style.backgroundColor = 'yellow'; indicator2.innerHTML = "Battery not charging"; chargeIcon.style.visibility = 'hidden'; createNotification("batterie non chargé"); // flip the chargingState flag to 1 chargingState = 1; } }
  21. 21. index.html <!DOCTYPE html> <html lang="en" manifest="manifest.appcache"> <head> <meta charset="utf­8" /> <title>Battery example</title> <meta content="Gestion battery" name="description" /> <meta content="width=device­width, initial­scale= 1.0" name="viewport" /> <link href="/images/32.png" rel="icon" size="32x32" /> <link href="/images/64.png" rel="icon" size="64x64" /> <link href="/images/128.png" rel="icon" size="128x128" /> <link href="/images/256.png" rel="icon" size="256x256" /> <link href="/css/all.css" rel="stylesheet" type="text/css" /> </head> <body> // Votre code <script src="/javascripts/all.js" type="text/javascript"></script> <button id="install">Install app on device</button> </body> </html>
  22. 22. Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  23. 23. Simulateur ● Firefox OS simulator https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ ● Lancer App Manager (developpement/gestionnaire d'applications) about:app-manager ou ● Démarrer simulator ● Ajouter l'API
  24. 24. App Manager
  25. 25. Résultat
  26. 26. Débug
  27. 27. https://marketplace.firefox.com/developers/
  28. 28. ✔ 100 % le contrôle ✔ Pas d'intermédiaire ✔ Chez vous ✔ Déporté ✔ Sur la market Marketplace
  29. 29. https://marketplace.firefox.com/developers/validator Validateur
  30. 30. Marketplace https://marketplace.firefox.com/
  31. 31. Autre Utilisation
  32. 32. Industriels utilisant Firefox OS Kickstarter sur une clé HDMI
  33. 33. URL ? http://marketplace.mozilla.org http://www.mozilla.org/firefoxos http://wiki.mozilla.org/Gaia/Hacking https://developer.mozilla.org/en­US/ docs/Mozilla/Firefox_OS
  34. 34. Merci Sources des slides : Tristant Nitot Loic Cuguen https://developer.mozilla.org/fr/Apps/Quickstart

×