nAcademy  Le 4 juin 2015 Neuros ­ 
Vos Projets Web
sur les plateformes ouvertes
Christophe Villeneuve
nAcademy  Le 4 juin 2015 Neuros ­ 
Qu'est ce une plateforme ouverte ?
● Un Web ouvert
● Une market
● Besoin de contrôler ses données / contenu
nAcademy  Le 4 juin 2015 Neuros ­ 
Avant
 
nAcademy  Le 4 juin 2015 Neuros ­ 
Les navigateurs Web
● Première génération
● 2ème génération
nAcademy  Le 4 juin 2015 Neuros ­ 
Les smartphones
 
Apple Google Microsoft
nAcademy  Le 4 juin 2015 Neuros ­ 
Le Futur
● Un web sur smartphone
nAcademy  Le 4 juin 2015 Neuros ­ 
Décomposition d'un smartphone
Applications
Système d'exploitation
Hardware / Device
Applications
Système d'exploitation
Hardware / Device
VS
nAcademy  Le 4 juin 2015 Neuros ­ 
GONK
GECKO
➢
GAIA
nAcademy  Le 4 juin 2015 Neuros ­ 
Contrôler vos offres / vos besoins
nAcademy  Le 4 juin 2015 Neuros ­ 
Matériels
● Samsung Nexus 
– S / 4G
● Samsung Galaxy 
– S II / Nexus
● Nexus 4
● Sony
● ...
● ZTE Open C
● Flame
● ZTE Open L
● LG Fx0
● ...
FirefoxOSAndroid
nAcademy  Le 4 juin 2015 Neuros ­ 
Choisir le moyen de consommer
Le market des 
smartphones
Supermarché
nAcademy  Le 4 juin 2015 Neuros ­ 
Fabriquons et proposons 
un produit (projet) Web
nAcademy  Le 4 juin 2015 Neuros ­ 
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
nAcademy  Le 4 juin 2015 Neuros ­ 
{
  "version": "1.0",
  "name": "DrupalFR",
  "description": "Drupal France et Francophonie",
  "launch_path": "/index.html",
  "icons": {
    "48": "/img/icons/drupalfr­48.png",
    "128": "/img/icons/drupalfr­128.png",
    "512": "/img/icons/drupalfr­512.png"
  },
  "developer": {
    "name": "Christophe Villeneuve",
    "url": "http://www.hello­design.fr"
  },
    "installs_allowed_from": [
    "*"
  ],
  "appcache_path": "/cache.manifest",
  "locales": {
    "fr": {
      "description": "Drupal France et Francophonie",
      "developer": {
        "url": "http://www.hello­design.fr"
      }
    }
  },
  "default_locale": "en"
}
Manifest.webapp
https://developer.mozilla.org/en­US/Apps/Build/Manifest
Options possibles : 
­ Fullscreen
­ Permission
­ Orientation
­ Serveur
­ Etc.
nAcademy  Le 4 juin 2015 Neuros ­ 
CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
Manifest.appcache
nAcademy  Le 4 juin 2015 Neuros ­ 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf­8">
<title>Drupal France et Francophonie</title>
<meta name="description" content="">
<meta name="viewport" content="width=device­width">   
<meta http­equiv="refresh" content="5;url=http://www.drupalfr.org">   
</head>
<body>
<p>Drupal France et Francophonie</p>
<p>Loading...</p>
</body>
</html> 
Index.html
nAcademy  Le 4 juin 2015 Neuros ­ 
Structure (1/2)
Firefox OSWeb
nAcademy  Le 4 juin 2015 Neuros ­ 
Structure (2/2)
CMS Drupal
/! Apache
nAcademy  Le 4 juin 2015 Neuros ­ 
Simulateur
● Firefox OS simulator WEBIDE
https://developer.mozilla.org/fr/docs/Outils/WebIDE
nAcademy  Le 4 juin 2015 Neuros ­ 
Résultat Simulateur (WebIDE Firefox)
nAcademy  Le 4 juin 2015 Neuros ­ 
Débug
nAcademy  Le 4 juin 2015 Neuros ­ 
https://marketplace.firefox.com/developers/
nAcademy  Le 4 juin 2015 Neuros ­ 
✔
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
nAcademy  Le 4 juin 2015 Neuros ­ 
https://marketplace.firefox.com/developers/validator
Validateur
nAcademy  Le 4 juin 2015 Neuros ­ 
Déployer votre API
https://marketplace.firefox.com/developers/submit/
nAcademy  Le 4 juin 2015 Neuros ­ 
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
nAcademy  Le 4 juin 2015 Neuros ­ 
API Marketplace
API : http://firefox­marketplace­api.readthedocs.org/en/latest/index.html
nAcademy  Le 4 juin 2015 Neuros ­ 
Marketplace
https://marketplace.firefox.com
nAcademy  Le 4 juin 2015 Neuros ­ 
Votre projet disponible 
sur les autres smartphones
nAcademy  Le 4 juin 2015 Neuros ­ 
Cordova
● Ancien nom : PhoneGap
● Fondation Apache
● Création d'API mobile en HTML/CSS/JS
– Android
– IOS
– Windows
– FirefoxOS
– ...
● http://fr.wikipedia.org/wiki/Apache_Cordova
Mode hybrid
nAcademy  Le 4 juin 2015 Neuros ­ 
Cordova par la pratique
● Installation Plugin (desktop)
sudo apt­get install cordova
● Fichier : manifest.webapp
{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": { "128": "/img/icon­128.png"  },
  "developer": {
    "name": "votre nom",
    "url": "http://votresite.com"
  },
  "default_locale": "en"
}
● Fichier index.html
<script type="text/javascript">
   app.initialize();
</script>
nAcademy  Le 4 juin 2015 Neuros ­ 
Et c'est tout
Pour Firefox OS
nAcademy  Le 4 juin 2015 Neuros ­ 
En résumé
● Contrôler et penser à... 
– Vos données
– Vos produits
– Vos contenus
– ...
nAcademy  Le 4 juin 2015 Neuros ­ 
Merci
Questions
@hellosct1
@neuros_paris
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://firefoxos.mozfr.org
nAcademy  Le 4 juin 2015 Neuros ­ 
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

Vos Projets web sur les plateformes ouvertes