Embarquer le web
Dans un smartphone
Firefox OS
Christophe Villeneuve
@hellosct1
Qui... est Christophe Villeneuve ?
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptou...
Aujourd'hui
● Le début du commencement
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique
Le Web
● Principes simples
– URL/HTTP/HTML
● Standards ouverts
● Pas de Kit de Dév.
● Pas d'autorisation
● Disponible en D...
Le Futur
● Un web sur smartphone
Plateforme ouverte mobile
Vos besoins
● Technique
● Logiciels
● Matériels
● Composants
Technique : les standards du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials
Logiciels
● Gedit
● Notepad++
● Eclipse
● Brackets
● ...
Editeur de texte
● Firefox ou autre
– Outils de Débug
– Web IDE
–...
Appareils mobiles (1/2)
Alcatel One Touch
Flame
ZTE
Open C
GeeksPhone Intex
Cloud FX
Et beaucoup d'autres disponibles :
ht...
Appareils mobiles (2/2)
Samsung
Nexus 4
Samsung
Galaxy
Sony
Etc...
Contrôle APPs
- Multitouch
- WebTelephony
- WebSMS
- Geolocalisation
- Battery API
- WebNFC
- WebVibration
- WebContacts
-...
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
GONK
✔
 Couche basse
✔
 Kernel Linux + Matériels
✔
 Hardware 
✔
libre ou propriétaire
✔
 Abstraction Layer (HAL)
✔
Pas exp...
➢GONK
➢GECKO
✔
 Moteur de rendu HTML5
✔
 Gestion des API
✔
De plus en plus complet
✔
 Exécution des applications 
(runtime...
➢GONK
➢GECKO
➢GAIA
✔
 Interface utilisateur (IHM)
✔
 Construction API Full Web
✔
 HTML 5 + open Web
✔
 Communique avec Gec...
Architecture
Firefox OSWeb
Icônes
Ex : Firefox OS 2.x Pour nous
● icone-16.png
● icone-32.png
● icone-48.png
● icone-64.png
● icone-128.png
● icone-5...
{
  "version": "1.0",
  "name": "Batterie",
  "description": "Gestion de la batterie",
  "launch_path": "/index.html",
  "...
CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
Manifest.appcache
var battery = navigator.battery || navigator.mozBattery || 
navigator.webkitBattery;
// définir les éléments
var indicator...
if(battery.charging) {
  // batterie chargé
    if(chargingState == 1 || chargingState == 0) {
 
      batteryTop.style.ba...
<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
  <head>
    <meta charset="utf­8" />
    <title>Battery exa...
Tester l'application
Navigateur
Mobile
http://mdn.github.io/battery-quickstart-finished-example/
Simulateur
● Firefox OS simulator WEBIDE
https://developer.mozilla.org/fr/docs/Outils/WebIDE
Web IDE
Résultat
Débug
https://marketplace.firefox.com/developers/
Choisir le moyen de consommer
Le market des
smartphones
Supermarché
✔
100 % le contrôle
✔
Pas d'intermédiaire
✔
Chez vous
✔
Déporté
✔
Sur la market
✔
N'importe qui peut en 
développer une
✔
...
https://marketplace.firefox.com/developers/validator
Validateur
Déployer votre API
https://marketplace.firefox.com/developers/submit/
Catégorie
- Informations
- Pays / Langue
- Média
- Détails
- Assistance
- Info techniques
- Catégories
- Informations
- Pa...
API Marketplace
API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
https://marketplace.firefox.com/
Marketplace
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
https://developer.mozilla.org/fr/Firefox_OS/Developing_Gai...
Merci
Blog : http://firefoxos.mozfr.org
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Prochain SlideShare
Chargement dans…5
×

Embarquer le web dans un smartphone Firefox OS - RMLL 2015

1 880 vues

Publié le

Présentation effectuée par Christophe Villeneuve (@hellosct1) au RMLL 2015

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Embarquer le web dans un smartphone Firefox OS - RMLL 2015

  1. 1. Embarquer le web Dans un smartphone Firefox OS Christophe Villeneuve @hellosct1
  2. 2. Qui... est Christophe Villeneuve ? afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – Libre à toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant
  3. 3. Aujourd'hui ● Le début du commencement ● Vos besoins ● Mobile ? Le Quoi !!! ● La pratique
  4. 4. Le Web ● Principes simples – URL/HTTP/HTML ● Standards ouverts ● Pas de Kit de Dév. ● Pas d'autorisation ● Disponible en Doc ● ... ● 1ère génération ● 2ème génération
  5. 5. Le Futur ● Un web sur smartphone
  6. 6. Plateforme ouverte mobile
  7. 7. Vos besoins ● Technique ● Logiciels ● Matériels ● Composants
  8. 8. Technique : les standards du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  9. 9. Logiciels ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Editeur de texte ● Firefox ou autre – Outils de Débug – Web IDE – Firefox OS App Manager Navigateur
  10. 10. Appareils mobiles (1/2) Alcatel One Touch Flame ZTE Open C GeeksPhone Intex Cloud FX Et beaucoup d'autres disponibles : https://www.mozilla.org/fr/firefox/os/devices/ LG Fx0
  11. 11. Appareils mobiles (2/2) Samsung Nexus 4 Samsung Galaxy Sony Etc...
  12. 12. Contrôle APPs - Multitouch - WebTelephony - WebSMS - Geolocalisation - Battery API - WebNFC - WebVibration - WebContacts - FullScreen API - Settings API - WebUSB - Camera - WebBluetooth - WebGL
  13. 13. https://mdn.mozillademos.org/files/4605/FirefoxOS.png GONK ➢GECKO ➢GAIA
  14. 14. 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)
  15. 15. ➢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
  16. 16. ➢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
  17. 17. Architecture Firefox OSWeb
  18. 18. Icônes Ex : Firefox OS 2.x Pour nous ● icone-16.png ● icone-32.png ● icone-48.png ● icone-64.png ● icone-128.png ● icone-512.png
  19. 19. {   "version": "1.0",   "name": "Batterie",   "description": "Gestion de la batterie",   "launch_path": "/index.html",   "icons": {     "16": "/img/icons/rmll­16.png",     "32": "/img/icons/rmll­32.png",     "64": "/img/icons/rmll­64.png",     "128": "/img/icons/rmll­128.png",     "256": "/img/icons/rmll­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.rmll.info"       }     }   },   "default_locale": "en" } Manifest.webapp Options possibles : - Fullscreen - Permission - Orientation - Serveur - Etc. https://developer.mozilla.org/en-US/Apps/Build/Manifest
  20. 20. CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html Manifest.appcache
  21. 21. 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
  22. 22. 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;     }   }  Js/battery.js (suite)   } 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. 23. <!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> index.html
  24. 24. Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  25. 25. Simulateur ● Firefox OS simulator WEBIDE https://developer.mozilla.org/fr/docs/Outils/WebIDE
  26. 26. Web IDE
  27. 27. Résultat
  28. 28. Débug
  29. 29. https://marketplace.firefox.com/developers/
  30. 30. Choisir le moyen de consommer Le market des smartphones Supermarché
  31. 31. ✔ 100 % le contrôle ✔ Pas d'intermédiaire ✔ Chez vous ✔ Déporté ✔ Sur la market ✔ N'importe qui peut en  développer une ✔ Toutes les Apps ne sont  pas libres Market... Marketplace
  32. 32. https://marketplace.firefox.com/developers/validator Validateur
  33. 33. Déployer votre API https://marketplace.firefox.com/developers/submit/
  34. 34. Catégorie - Informations - Pays / Langue - Média - Détails - Assistance - Info techniques - Catégories - Informations - Pays / Langue - Média - Détails - Assistance - Info techniques - Catégories
  35. 35. API Marketplace API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
  36. 36. https://marketplace.firefox.com/ Marketplace
  37. 37. http://marketplace.mozilla.org http://www.mozilla.org/firefoxos https://developer.mozilla.org/fr/Firefox_OS/Developing_Gaia https://developer.mozilla.org/fr/Firefox_OS http://hacks.mozilla.org URL ?
  38. 38. Merci Blog : http://firefoxos.mozfr.org

×