SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
Firefox OS 
de la théorie à la pratique 
Christophe Villeneuve 
@hellosct1
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
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 UX 
● Tout en application Web
➢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 exposé le JS 
✔ Isolé de Gaia 
✔ Communication par Gecko 
Architecture (1/3)
➢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
➢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
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 Débug 
– Firefox OS App 
Manager
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": { 
"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
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é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;
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; 
} 
}
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>
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 
(developpement/gestionnaire d'applications) 
about:app-manager 
ou 
● Démarrer simulator 
● Ajouter l'API
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://developer.mozilla.org/en­US/ 
docs/Mozilla/Firefox_OS
Merci 
Sources des slides : 
Tristant Nitot 
Loic Cuguen 
https://developer.mozilla.org/fr/Apps/Quickstart

Contenu connexe

En vedette

Declaration patrimoine-le-foll
Declaration patrimoine-le-follDeclaration patrimoine-le-foll
Declaration patrimoine-le-foll
Le Point
 
Lectura marketing
Lectura marketingLectura marketing
Lectura marketing
josue
 
Normampac présentation arrondissement rosemont
Normampac   présentation arrondissement rosemontNormampac   présentation arrondissement rosemont
Normampac présentation arrondissement rosemont
Louis-Alexandre Cazal
 
Diapositives frédérique létant
Diapositives frédérique létantDiapositives frédérique létant
Diapositives frédérique létant
Fredou
 
Protein synthesis flip book
Protein synthesis flip bookProtein synthesis flip book
Protein synthesis flip book
punxsyscience
 
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
Universidad Autónoma de Barcelona
 
Declaration patrimoine-pinel
Declaration patrimoine-pinelDeclaration patrimoine-pinel
Declaration patrimoine-pinel
Le Point
 
Reiser education sexuelle3
Reiser education sexuelle3Reiser education sexuelle3
Reiser education sexuelle3
Gerard Houdinet
 
Requisitos y canales de los alimentos latinos en los EEUU
Requisitos y canales de los alimentos latinos en los EEUURequisitos y canales de los alimentos latinos en los EEUU
Requisitos y canales de los alimentos latinos en los EEUU
Embajada de EE.UU. en el Perú
 

En vedette (20)

Comparing open source search engines
Comparing open source search enginesComparing open source search engines
Comparing open source search engines
 
Ariel et le calcul1
Ariel et le calcul1Ariel et le calcul1
Ariel et le calcul1
 
Artes Rupestre
Artes RupestreArtes Rupestre
Artes Rupestre
 
Declaration patrimoine-le-foll
Declaration patrimoine-le-follDeclaration patrimoine-le-foll
Declaration patrimoine-le-foll
 
Lectura marketing
Lectura marketingLectura marketing
Lectura marketing
 
Normampac présentation arrondissement rosemont
Normampac   présentation arrondissement rosemontNormampac   présentation arrondissement rosemont
Normampac présentation arrondissement rosemont
 
Fuente Álamo. Excavación Luis Alberto López Palomo. 2007
Fuente Álamo. Excavación Luis Alberto López Palomo. 2007Fuente Álamo. Excavación Luis Alberto López Palomo. 2007
Fuente Álamo. Excavación Luis Alberto López Palomo. 2007
 
Maybach et autres_jmc
Maybach et autres_jmcMaybach et autres_jmc
Maybach et autres_jmc
 
Diapositives frédérique létant
Diapositives frédérique létantDiapositives frédérique létant
Diapositives frédérique létant
 
Club de lectura
Club de lecturaClub de lectura
Club de lectura
 
Pedagogía cognitiva
Pedagogía cognitivaPedagogía cognitiva
Pedagogía cognitiva
 
Poly
PolyPoly
Poly
 
Protein synthesis flip book
Protein synthesis flip bookProtein synthesis flip book
Protein synthesis flip book
 
Actu Eco 03/10/2014
Actu Eco 03/10/2014Actu Eco 03/10/2014
Actu Eco 03/10/2014
 
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
Despidos colectivos. Sigue la saga Unipost. Notas a la sentencia de la AN de ...
 
Declaration patrimoine-pinel
Declaration patrimoine-pinelDeclaration patrimoine-pinel
Declaration patrimoine-pinel
 
code4lib 2011 : choses vues et entendues par l'ABES
code4lib 2011 : choses vues et entendues par l'ABEScode4lib 2011 : choses vues et entendues par l'ABES
code4lib 2011 : choses vues et entendues par l'ABES
 
Reiser education sexuelle3
Reiser education sexuelle3Reiser education sexuelle3
Reiser education sexuelle3
 
Bonne AnnéE De Louis
Bonne AnnéE De LouisBonne AnnéE De Louis
Bonne AnnéE De Louis
 
Requisitos y canales de los alimentos latinos en los EEUU
Requisitos y canales de los alimentos latinos en los EEUURequisitos y canales de los alimentos latinos en los EEUU
Requisitos y canales de los alimentos latinos en los EEUU
 

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

Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
goldoraf
 

Similaire à Firefox OS de la théorie à la pratique - OSDC (20)

Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
12-Factor
12-Factor12-Factor
12-Factor
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Solution d'OTA
Solution d'OTASolution d'OTA
Solution d'OTA
 
Aspect avec AspectJ
Aspect avec AspectJAspect avec AspectJ
Aspect avec AspectJ
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
 
Présentation de Node.js
Présentation de Node.jsPrésentation de Node.js
Présentation de Node.js
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, Kubernetes
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 

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

  • 1. Firefox OS de la théorie à la pratique Christophe Villeneuve @hellosct1
  • 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. Aujourd'hui ● La théorie ● La pratique ● Autre utilisation
  • 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.
  • 6. ➢GAIA ➢GECKO GONK https://mdn.mozillademos.org/files/4605/FirefoxOS.png
  • 7. 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)
  • 8. ➢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
  • 9. ➢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
  • 13. Les compétences Les compétences
  • 14. Les langages du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  • 15. Outils Editeur de texte ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Navigateur ● Firefox ou autre – Outils de Débug – Firefox OS App Manager
  • 16. Appareils mobiles (Quelques modèles) Alcatel One Touch Flame GeeksPhone ZTE Open C Intex Cloud FX
  • 17.
  • 18. Architecture Firefox OS Web Index.html Img=images Css= feuilles de styles js=javascripts
  • 19. { "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
  • 20. Manifest.appcache CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html
  • 21. 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;
  • 22. 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; } }
  • 23. 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>
  • 24. Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  • 25. 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
  • 30. ✔ 100 % le contrôle ✔ Pas d'intermédiaire ✔ Chez vous ✔ Déporté ✔ Sur la market Marketplace
  • 34. Industriels utilisant Firefox OS Kickstarter sur une clé HDMI
  • 35. 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
  • 36. Merci Sources des slides : Tristant Nitot Loic Cuguen https://developer.mozilla.org/fr/Apps/Quickstart