SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Une plateforme ouverte, Firefox OS - Mozilla
Une plateforme ouverte, Firefox OS - MozillaUne plateforme ouverte, Firefox OS - Mozilla
Une plateforme ouverte, Firefox OS - Mozilla
 
Hack On Firefox OS - PSES
Hack On Firefox OS - PSESHack On Firefox OS - PSES
Hack On Firefox OS - PSES
 
PHP : Etat des lieux
PHP : Etat des lieuxPHP : Etat des lieux
PHP : Etat des lieux
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
 
Owasp
OwaspOwasp
Owasp
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
 
Plaquette Team Export Hauts-de-seine
Plaquette Team Export Hauts-de-seinePlaquette Team Export Hauts-de-seine
Plaquette Team Export Hauts-de-seine
 

Andere mochten auch

Proteger votre vie privee sur internet
Proteger votre vie privee sur internetProteger votre vie privee sur internet
Proteger votre vie privee sur internetneuros
 
Google, Facebook et votre vie privée
Google, Facebook et votre vie privéeGoogle, Facebook et votre vie privée
Google, Facebook et votre vie privéeIsabelle Motte
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur Internetneuros
 
Le service workers
Le service workersLe service workers
Le service workersneuros
 
La vie privée sur internet fini
La vie privée sur internet finiLa vie privée sur internet fini
La vie privée sur internet finiMartine Dubreucq
 
Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)neuros
 
Gérer son identité numérique et protéger sa vie privée
Gérer son identité numérique et protéger sa vie privéeGérer son identité numérique et protéger sa vie privée
Gérer son identité numérique et protéger sa vie privéeCoraia
 
Protéger sa vie privée sur le net
Protéger sa vie privée sur le netProtéger sa vie privée sur le net
Protéger sa vie privée sur le netGreg Siebrand
 

Andere mochten auch (8)

Proteger votre vie privee sur internet
Proteger votre vie privee sur internetProteger votre vie privee sur internet
Proteger votre vie privee sur internet
 
Google, Facebook et votre vie privée
Google, Facebook et votre vie privéeGoogle, Facebook et votre vie privée
Google, Facebook et votre vie privée
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur Internet
 
Le service workers
Le service workersLe service workers
Le service workers
 
La vie privée sur internet fini
La vie privée sur internet finiLa vie privée sur internet fini
La vie privée sur internet fini
 
Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)
 
Gérer son identité numérique et protéger sa vie privée
Gérer son identité numérique et protéger sa vie privéeGérer son identité numérique et protéger sa vie privée
Gérer son identité numérique et protéger sa vie privée
 
Protéger sa vie privée sur le net
Protéger sa vie privée sur le netProtéger sa vie privée sur le net
Protéger sa vie privée sur le net
 

Ähnlich wie Vos projets web sur les plateformes ouvertes

Livre Drupal avance, un CMS pour développeurs
Livre Drupal avance, un CMS pour développeursLivre Drupal avance, un CMS pour développeurs
Livre Drupal avance, un CMS pour développeursneuros
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkStéphanie Moallic
 
Sites web et ecommerce
Sites web et ecommerceSites web et ecommerce
Sites web et ecommerceCCI Aude
 
Drupal avancé, un CMS pour développeurs - drupalfr - Eyrolles
Drupal avancé, un CMS pour développeurs - drupalfr - EyrollesDrupal avancé, un CMS pour développeurs - drupalfr - Eyrolles
Drupal avancé, un CMS pour développeurs - drupalfr - EyrollesChristophe Villeneuve
 
App indexing at #SMXParis 2015
App indexing at #SMXParis 2015App indexing at #SMXParis 2015
App indexing at #SMXParis 2015Alexandre Jubien
 
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014"
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014" Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014"
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014" Guillaume CM IFOCOP
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur InternetChristophe Villeneuve
 
Angular 4 - pöurquoi --Français
Angular 4  - pöurquoi  --FrançaisAngular 4  - pöurquoi  --Français
Angular 4 - pöurquoi --FrançaisVERTIKA
 

Ähnlich wie Vos projets web sur les plateformes ouvertes (9)

Livre Drupal avance, un CMS pour développeurs
Livre Drupal avance, un CMS pour développeursLivre Drupal avance, un CMS pour développeurs
Livre Drupal avance, un CMS pour développeurs
 
Livre Drupal avance
Livre Drupal avanceLivre Drupal avance
Livre Drupal avance
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
 
Sites web et ecommerce
Sites web et ecommerceSites web et ecommerce
Sites web et ecommerce
 
Drupal avancé, un CMS pour développeurs - drupalfr - Eyrolles
Drupal avancé, un CMS pour développeurs - drupalfr - EyrollesDrupal avancé, un CMS pour développeurs - drupalfr - Eyrolles
Drupal avancé, un CMS pour développeurs - drupalfr - Eyrolles
 
App indexing at #SMXParis 2015
App indexing at #SMXParis 2015App indexing at #SMXParis 2015
App indexing at #SMXParis 2015
 
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014"
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014" Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014"
Atelier IFOCOP " Quels outils numériques pour les assistantes en 2014"
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur Internet
 
Angular 4 - pöurquoi --Français
Angular 4  - pöurquoi  --FrançaisAngular 4  - pöurquoi  --Français
Angular 4 - pöurquoi --Français
 

Mehr von neuros

Php 7 Think php7
Php 7 Think php7Php 7 Think php7
Php 7 Think php7neuros
 
RGAA 3 dans un Web Accessible
RGAA 3 dans un Web AccessibleRGAA 3 dans un Web Accessible
RGAA 3 dans un Web Accessibleneuros
 
Les effets de la loi Hamon
Les effets de la loi HamonLes effets de la loi Hamon
Les effets de la loi Hamonneuros
 
La sécurité et php
La sécurité et phpLa sécurité et php
La sécurité et phpneuros
 
Les protocoles temps réels
Les protocoles temps réelsLes protocoles temps réels
Les protocoles temps réelsneuros
 
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)neuros
 
Améliorer les performances SQL
Améliorer les performances SQLAméliorer les performances SQL
Améliorer les performances SQLneuros
 
Newschool partie1 methode HTML5
Newschool partie1 methode HTML5Newschool partie1 methode HTML5
Newschool partie1 methode HTML5neuros
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continuneuros
 
Effectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalEffectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalneuros
 
Integration Drupal systemes d'informations
Integration Drupal systemes d'informationsIntegration Drupal systemes d'informations
Integration Drupal systemes d'informationsneuros
 
La maitrise des contenus hors internet
La maitrise des contenus hors internetLa maitrise des contenus hors internet
La maitrise des contenus hors internetneuros
 
La mémoire et PHP
La mémoire et PHPLa mémoire et PHP
La mémoire et PHPneuros
 
Pourquoi Firefox OS
Pourquoi Firefox OSPourquoi Firefox OS
Pourquoi Firefox OSneuros
 
Un CRM...sugarCRM
Un CRM...sugarCRMUn CRM...sugarCRM
Un CRM...sugarCRMneuros
 
Neuros Digital
Neuros DigitalNeuros Digital
Neuros Digitalneuros
 
Le cloud ton univers impitoyable
Le cloud ton univers impitoyableLe cloud ton univers impitoyable
Le cloud ton univers impitoyableneuros
 
L Importance des forks de MySQL
L Importance des forks de MySQLL Importance des forks de MySQL
L Importance des forks de MySQLneuros
 
Anticiper les actions utilisateurs
Anticiper les actions utilisateursAnticiper les actions utilisateurs
Anticiper les actions utilisateursneuros
 
Sécuriser votre projet
Sécuriser votre projetSécuriser votre projet
Sécuriser votre projetneuros
 

Mehr von neuros (20)

Php 7 Think php7
Php 7 Think php7Php 7 Think php7
Php 7 Think php7
 
RGAA 3 dans un Web Accessible
RGAA 3 dans un Web AccessibleRGAA 3 dans un Web Accessible
RGAA 3 dans un Web Accessible
 
Les effets de la loi Hamon
Les effets de la loi HamonLes effets de la loi Hamon
Les effets de la loi Hamon
 
La sécurité et php
La sécurité et phpLa sécurité et php
La sécurité et php
 
Les protocoles temps réels
Les protocoles temps réelsLes protocoles temps réels
Les protocoles temps réels
 
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)
 
Améliorer les performances SQL
Améliorer les performances SQLAméliorer les performances SQL
Améliorer les performances SQL
 
Newschool partie1 methode HTML5
Newschool partie1 methode HTML5Newschool partie1 methode HTML5
Newschool partie1 methode HTML5
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continu
 
Effectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalEffectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupal
 
Integration Drupal systemes d'informations
Integration Drupal systemes d'informationsIntegration Drupal systemes d'informations
Integration Drupal systemes d'informations
 
La maitrise des contenus hors internet
La maitrise des contenus hors internetLa maitrise des contenus hors internet
La maitrise des contenus hors internet
 
La mémoire et PHP
La mémoire et PHPLa mémoire et PHP
La mémoire et PHP
 
Pourquoi Firefox OS
Pourquoi Firefox OSPourquoi Firefox OS
Pourquoi Firefox OS
 
Un CRM...sugarCRM
Un CRM...sugarCRMUn CRM...sugarCRM
Un CRM...sugarCRM
 
Neuros Digital
Neuros DigitalNeuros Digital
Neuros Digital
 
Le cloud ton univers impitoyable
Le cloud ton univers impitoyableLe cloud ton univers impitoyable
Le cloud ton univers impitoyable
 
L Importance des forks de MySQL
L Importance des forks de MySQLL Importance des forks de MySQL
L Importance des forks de MySQL
 
Anticiper les actions utilisateurs
Anticiper les actions utilisateursAnticiper les actions utilisateurs
Anticiper les actions utilisateurs
 
Sécuriser votre projet
Sécuriser votre projetSécuriser votre projet
Sécuriser votre projet
 

Vos projets web sur les plateformes ouvertes