SlideShare une entreprise Scribd logo
AEI - Journée du libre - 19 Septembre 2015
Firefox OS dans le web
Christophe Villeneuve
@hellosct1
AEI - Journée du libre - 19 Septembre 2015
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
Consultant IT
AEI - Journée du libre - 19 Septembre 2015
Aujourd'hui
● Le début du commencement
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
Le Futur
● Un web sur...
Smartphone
Tablette
TV OS – exemple : Panasonic
AEI - Journée du libre - 19 Septembre 2015
Quelques dates
● 1.0 – Décembre 2012 (Gecko 18)
● 1.1 – Mars 2013
● 1.2 – Septembre 2013 (Gecko 23)
● 1.3 – Janvier 2014 (Gecko 28)
● 1.4 – Avril 2014 (Gecko 30)
● 2.0 – Juillet 2014 (Gecko 32)
● 2.1 – Octobre 2014 (Gecko 34)
● 2.2 – Avril 2015 (Gecko 36)
● 2.5 - Prévision Fin 2015 (Gecko...)
Plateforme ouverte mobile
AEI - Journée du libre - 19 Septembre 2015
Vos besoins
● Technique
● Logiciels
● Matériels
● Composants
AEI - Journée du libre - 19 Septembre 2015
Technique : les standards du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials
AEI - Journée du libre - 19 Septembre 2015
Logiciels
● Gedit
● Notepad++
● Eclipse
● Brackets
● ...
Editeur de texte
● Firefox ou autre
– Outils de Débug
– Web IDE
– Firefox OS App
Manager
Navigateur
AEI - Journée du libre - 19 Septembre 2015
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 KLIFOpen L Pixi 3
AEI - Journée du libre - 19 Septembre 2015
Appareils mobiles (2/2)
Samsung
Nexus
Samsung
Galaxy
Sony
Etc... Voir :
- B2G-Installer en Add-on
- Builds communautaires
AEI - Journée du libre - 19 Septembre 2015
AEI - Journée du libre - 19 Septembre 2015
Contrôle APPs
- Multitouch
- WebTelephony
- WebSMS
- Geolocalisation
- Battery API
- WebNFC
- WebVibration
- WebContacts
- FullScreen API
- Settings API
- WebUSB
- Camera
- WebBluetooth
- WebGL
AEI - Journée du libre - 19 Septembre 2015
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
AEI - Journée du libre - 19 Septembre 2015
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)
AEI - Journée du libre - 19 Septembre 2015
➢GONK
✔
 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
➢GECKO
AEI - Journée du libre - 19 Septembre 2015
➢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
AEI - Journée du libre - 19 Septembre 2015
AEI - Journée du libre - 19 Septembre 2015
Architecture
Firefox OSWeb
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
{
  "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
AEI - Journée du libre - 19 Septembre 2015
CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
NETWORK:
*
Manifest.appcache
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
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;
    }
  }
AEI - Journée du libre - 19 Septembre 2015
<!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
AEI - Journée du libre - 19 Septembre 2015
Tester l'application
Navigateur
Mobile
http://mdn.github.io/battery-quickstart-finished-example/
AEI - Journée du libre - 19 Septembre 2015
Simulateur
● Firefox OS simulator WEBIDE
https://developer.mozilla.org/fr/docs/Outils/WebIDE
AEI - Journée du libre - 19 Septembre 2015
Web IDE
AEI - Journée du libre - 19 Septembre 2015
Résultat
AEI - Journée du libre - 19 Septembre 2015
Débug
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/
AEI - Journée du libre - 19 Septembre 2015
Choisir le moyen de consommer
Le market des
smartphones
Supermarché
AEI - Journée du libre - 19 Septembre 2015
✔
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
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/validator
Validateur
AEI - Journée du libre - 19 Septembre 2015
Déployer votre API
https://marketplace.firefox.com/developers/submit/
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
API Marketplace
API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/
Marketplace
AEI - Journée du libre - 19 Septembre 2015
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 ?
AEI - Journée du libre - 19 Septembre 2015
Merci
Blog : http://firefoxos.mozfr.org

Contenu connexe

En vedette

Le service workers
Le service workersLe service workers
Le service workers
Christophe Villeneuve
 
Securite vie privee sont dans un bateau
Securite vie privee sont dans un bateauSecurite vie privee sont dans un bateau
Securite vie privee sont dans un bateau
Christophe Villeneuve
 
Protéger votre vie privee sur internet
Protéger votre vie privee sur internetProtéger votre vie privee sur internet
Protéger votre vie privee sur internet
Christophe Villeneuve
 
Le NewSchool en web
Le NewSchool en webLe NewSchool en web
Le NewSchool en web
Christophe Villeneuve
 
Le nouveau AMP : apache mariadb php
Le nouveau AMP : apache mariadb phpLe nouveau AMP : apache mariadb php
Le nouveau AMP : apache mariadb php
Christophe Villeneuve
 
Firefox OS - Api battery status
Firefox OS - Api battery statusFirefox OS - Api battery status
Firefox OS - Api battery status
Christophe Villeneuve
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
Christophe Villeneuve
 
Contrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLLContrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLL
Christophe Villeneuve
 
La sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLLLa sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLL
Christophe Villeneuve
 
L'open source dans les nouvelles architectures web
L'open source dans les nouvelles architectures webL'open source dans les nouvelles architectures web
L'open source dans les nouvelles architectures web
Christophe Villeneuve
 
Vie privee et les outils mozilla
Vie privee et les outils mozillaVie privee et les outils mozilla
Vie privee et les outils mozilla
Christophe Villeneuve
 
Chiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDBChiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDB
Christophe Villeneuve
 
A tous les niveaux la securite
A tous les niveaux la securiteA tous les niveaux la securite
A tous les niveaux la securite
Christophe Villeneuve
 
Comprendre la securite web
Comprendre la securite webComprendre la securite web
Comprendre la securite web
Christophe Villeneuve
 
Les tests de securite devops
Les tests de securite devopsLes tests de securite devops
Les tests de securite devops
Christophe Villeneuve
 
Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?
Christophe Villeneuve
 

En vedette (16)

Le service workers
Le service workersLe service workers
Le service workers
 
Securite vie privee sont dans un bateau
Securite vie privee sont dans un bateauSecurite vie privee sont dans un bateau
Securite vie privee sont dans un bateau
 
Protéger votre vie privee sur internet
Protéger votre vie privee sur internetProtéger votre vie privee sur internet
Protéger votre vie privee sur internet
 
Le NewSchool en web
Le NewSchool en webLe NewSchool en web
Le NewSchool en web
 
Le nouveau AMP : apache mariadb php
Le nouveau AMP : apache mariadb phpLe nouveau AMP : apache mariadb php
Le nouveau AMP : apache mariadb php
 
Firefox OS - Api battery status
Firefox OS - Api battery statusFirefox OS - Api battery status
Firefox OS - Api battery status
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
 
Contrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLLContrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLL
 
La sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLLLa sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLL
 
L'open source dans les nouvelles architectures web
L'open source dans les nouvelles architectures webL'open source dans les nouvelles architectures web
L'open source dans les nouvelles architectures web
 
Vie privee et les outils mozilla
Vie privee et les outils mozillaVie privee et les outils mozilla
Vie privee et les outils mozilla
 
Chiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDBChiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDB
 
A tous les niveaux la securite
A tous les niveaux la securiteA tous les niveaux la securite
A tous les niveaux la securite
 
Comprendre la securite web
Comprendre la securite webComprendre la securite web
Comprendre la securite web
 
Les tests de securite devops
Les tests de securite devopsLes tests de securite devops
Les tests de securite devops
 
Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?
 

Similaire à Firefox OS dans le web - Journée du libre 2015 Lille

Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec Odoo
Hassan WAHSISS
 
La face cachee des web extensions
La face cachee des web extensionsLa face cachee des web extensions
La face cachee des web extensions
Christophe Villeneuve
 
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
Christophe Villeneuve
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
Christophe Villeneuve
 
Graphotec granit opensource
Graphotec granit opensourceGraphotec granit opensource
Graphotec granit opensource
pjoulaud
 
Piloter son appareil photo numérique avec des logiciels libres
Piloter son appareil photo  numérique avec des logiciels  libresPiloter son appareil photo  numérique avec des logiciels  libres
Piloter son appareil photo numérique avec des logiciels libres
Robert Viseur
 
MUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows AppsMUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows Apps
mugstrasbourg
 
La sécurité dans les extensions Webs
La sécurité dans les extensions WebsLa sécurité dans les extensions Webs
La sécurité dans les extensions Webs
Christophe Villeneuve
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022
Frederic Leger
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
Christophe Villeneuve
 
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
Vincent Composieux
 
Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
Christophe Villeneuve
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
Meetup Mobile Montpellier
 
Développement Android
Développement AndroidDéveloppement Android
Développement Android
Franck SIMON
 
The hidden side of webExtensions
The hidden side of webExtensionsThe hidden side of webExtensions
The hidden side of webExtensions
Christophe Villeneuve
 
La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!
OCTO Technology
 
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
Smile I.T is open
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
Michael Laguerre
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
vincent aniort
 
Webinar Softlayer d'Avril 2015 - Francais
Webinar Softlayer d'Avril 2015 - FrancaisWebinar Softlayer d'Avril 2015 - Francais
Webinar Softlayer d'Avril 2015 - Francais
Nicolas Verdier
 

Similaire à Firefox OS dans le web - Journée du libre 2015 Lille (20)

Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec Odoo
 
La face cachee des web extensions
La face cachee des web extensionsLa face cachee des web extensions
La face cachee des web extensions
 
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
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
Graphotec granit opensource
Graphotec granit opensourceGraphotec granit opensource
Graphotec granit opensource
 
Piloter son appareil photo numérique avec des logiciels libres
Piloter son appareil photo  numérique avec des logiciels  libresPiloter son appareil photo  numérique avec des logiciels  libres
Piloter son appareil photo numérique avec des logiciels libres
 
MUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows AppsMUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows Apps
 
La sécurité dans les extensions Webs
La sécurité dans les extensions WebsLa sécurité dans les extensions Webs
La sécurité dans les extensions Webs
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
 
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
 
Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
Développement Android
Développement AndroidDéveloppement Android
Développement Android
 
The hidden side of webExtensions
The hidden side of webExtensionsThe hidden side of webExtensions
The hidden side of webExtensions
 
La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!
 
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
Meet'up "Linux et Android dans les systèmes embarqués et les objets connectés"
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
 
Webinar Softlayer d'Avril 2015 - Francais
Webinar Softlayer d'Avril 2015 - FrancaisWebinar Softlayer d'Avril 2015 - Francais
Webinar Softlayer d'Avril 2015 - Francais
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
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
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
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
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
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
Christophe Villeneuve
 
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
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
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 ?
Christophe Villeneuve
 
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
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
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
 
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
 
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
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
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
 

Firefox OS dans le web - Journée du libre 2015 Lille

  • 1. AEI - Journée du libre - 19 Septembre 2015 Firefox OS dans le web Christophe Villeneuve @hellosct1 AEI - Journée du libre - 19 Septembre 2015
  • 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 Consultant IT
  • 3. AEI - Journée du libre - 19 Septembre 2015 Aujourd'hui ● Le début du commencement ● Vos besoins ● Mobile ? Le Quoi !!! ● La pratique
  • 4. AEI - Journée du libre - 19 Septembre 2015 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. AEI - Journée du libre - 19 Septembre 2015 Le Futur ● Un web sur... Smartphone Tablette TV OS – exemple : Panasonic
  • 6. AEI - Journée du libre - 19 Septembre 2015 Quelques dates ● 1.0 – Décembre 2012 (Gecko 18) ● 1.1 – Mars 2013 ● 1.2 – Septembre 2013 (Gecko 23) ● 1.3 – Janvier 2014 (Gecko 28) ● 1.4 – Avril 2014 (Gecko 30) ● 2.0 – Juillet 2014 (Gecko 32) ● 2.1 – Octobre 2014 (Gecko 34) ● 2.2 – Avril 2015 (Gecko 36) ● 2.5 - Prévision Fin 2015 (Gecko...)
  • 8. AEI - Journée du libre - 19 Septembre 2015 Vos besoins ● Technique ● Logiciels ● Matériels ● Composants
  • 9. AEI - Journée du libre - 19 Septembre 2015 Technique : les standards du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  • 10. AEI - Journée du libre - 19 Septembre 2015 Logiciels ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Editeur de texte ● Firefox ou autre – Outils de Débug – Web IDE – Firefox OS App Manager Navigateur
  • 11. AEI - Journée du libre - 19 Septembre 2015 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 KLIFOpen L Pixi 3
  • 12. AEI - Journée du libre - 19 Septembre 2015 Appareils mobiles (2/2) Samsung Nexus Samsung Galaxy Sony Etc... Voir : - B2G-Installer en Add-on - Builds communautaires
  • 13. AEI - Journée du libre - 19 Septembre 2015
  • 14. AEI - Journée du libre - 19 Septembre 2015 Contrôle APPs - Multitouch - WebTelephony - WebSMS - Geolocalisation - Battery API - WebNFC - WebVibration - WebContacts - FullScreen API - Settings API - WebUSB - Camera - WebBluetooth - WebGL
  • 15. AEI - Journée du libre - 19 Septembre 2015 https://mdn.mozillademos.org/files/4605/FirefoxOS.png GONK ➢GECKO ➢GAIA
  • 16. AEI - Journée du libre - 19 Septembre 2015 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)
  • 17. AEI - Journée du libre - 19 Septembre 2015 ➢GONK ✔  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 ➢GECKO
  • 18. AEI - Journée du libre - 19 Septembre 2015 ➢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
  • 19. AEI - Journée du libre - 19 Septembre 2015
  • 20. AEI - Journée du libre - 19 Septembre 2015 Architecture Firefox OSWeb
  • 21. AEI - Journée du libre - 19 Septembre 2015 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
  • 22. AEI - Journée du libre - 19 Septembre 2015 {   "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
  • 23. AEI - Journée du libre - 19 Septembre 2015 CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html NETWORK: * Manifest.appcache
  • 24. AEI - Journée du libre - 19 Septembre 2015 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
  • 25. AEI - Journée du libre - 19 Septembre 2015 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;     }   }
  • 26. AEI - Journée du libre - 19 Septembre 2015 <!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
  • 27. AEI - Journée du libre - 19 Septembre 2015 Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  • 28. AEI - Journée du libre - 19 Septembre 2015 Simulateur ● Firefox OS simulator WEBIDE https://developer.mozilla.org/fr/docs/Outils/WebIDE
  • 29. AEI - Journée du libre - 19 Septembre 2015 Web IDE
  • 30. AEI - Journée du libre - 19 Septembre 2015 Résultat
  • 31. AEI - Journée du libre - 19 Septembre 2015 Débug
  • 32. AEI - Journée du libre - 19 Septembre 2015 https://marketplace.firefox.com/developers/
  • 33. AEI - Journée du libre - 19 Septembre 2015 Choisir le moyen de consommer Le market des smartphones Supermarché
  • 34. AEI - Journée du libre - 19 Septembre 2015 ✔ 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
  • 35. AEI - Journée du libre - 19 Septembre 2015 https://marketplace.firefox.com/developers/validator Validateur
  • 36. AEI - Journée du libre - 19 Septembre 2015 Déployer votre API https://marketplace.firefox.com/developers/submit/
  • 37. AEI - Journée du libre - 19 Septembre 2015 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
  • 38. AEI - Journée du libre - 19 Septembre 2015 API Marketplace API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
  • 39. AEI - Journée du libre - 19 Septembre 2015 https://marketplace.firefox.com/ Marketplace
  • 40. AEI - Journée du libre - 19 Septembre 2015 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 ?
  • 41. AEI - Journée du libre - 19 Septembre 2015 Merci Blog : http://firefoxos.mozfr.org