Firefox OS pratiquer le web mobile - JDLL

Firefox OS
pratiquer le web mobile
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
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique

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
– Firefox OS App
Manager
Navigateur

Appareils mobiles (Quelques modèles)
Alcatel One Touch
Flame
ZTE
Open C
GeeksPhone Intex
Cloud FX
Et beaucoup d'autres disponibles :
https://www.mozilla.org/fr/firefox/os/1.3/

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 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

{
  "version": "1.0",
  "name": "Batterie",
  "description": "Gestion de la batterie",
  "launch_path": "/index.html",
  "icons": {
    "16": "/img/icons/osdc16.png",
  },
  "developer": {
    "name": "Hello / Sector One",
    "url": "http://www.hellodesign.fr"
  },
  "installs_allowed_from": ["*"],
  "appcache_path": "/manifest.appcache",
  "locales": {
    "fr": {
      "name" : "Batterie",
      "description": "gestion de la batterie",
      "developer": {
        "url": "http://www.jdll.org"
      }
    }
  },
  "default_locale": "en"
}
Manifest.webapp

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 indicator1 = document.getElementById('indicator1');
var indicator2 = document.getElementById('indicator2');
var batteryCharge = document.getElementById('batterycharge');
var batteryTop = document.getElementById('batterytop');
var chargeIcon = document.getElementById('batterycharging');
// Position indicateur
// 0 Initialisation, 1 batterie chargé, 2 batterie non chargé
var chargingState = 0;
Js/battery.js

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;
    }
  }

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
  <head>
    <meta charset="utf8" />
    <title>Battery example</title>
    <meta content="Gestion battery" name="description" />
    <meta content="width=devicewidth, initialscale=1.0" name="viewport" />
    <link href="/images/32.png" rel="icon" size="32x32" />
    <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

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

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

https://marketplace.firefox.com/
Marketplace

http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki.mozilla.org/Gaia/Hacking
https://developer.mozilla.org/enUS/docs/Mozilla/Firefox_OS
URL ?

Firefox OS pratiquer le web mobile - JDLL

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (7)

En vedette

En vedette (20)

Similaire à Firefox OS pratiquer le web mobile - JDLL

Similaire à Firefox OS pratiquer le web mobile - JDLL (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Dernier

Dernier (20)

Firefox OS pratiquer le web mobile - JDLL