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 s...
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
App...
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
●...
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
● ico...
nAcademy  Le 4 juin 2015 Neuros ­ 
{
  "version": "1.0",
  "name": "DrupalFR",
  "description": "Drupal France et Francoph...
nAcademy  Le 4 juin 2015 Neuros ­ 
CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
...
nAcademy  Le 4 juin 2015 Neuros ­ 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf­8">
<title>Drupal France et Francophon...
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/W...
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'imp...
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 techniqu...
nAcademy  Le 4 juin 2015 Neuros ­ 
API Marketplace
API : http://firefox­marketplace­api.readthedocs.org/en/latest/index.ht...
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/...
nAcademy  Le 4 juin 2015 Neuros ­ 
Cordova par la pratique
● Installation Plugin (desktop)
sudo apt­get install cordova
● ...
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.mozi...
nAcademy  Le 4 juin 2015 Neuros ­ 
Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demo...
Prochain SlideShare
Chargement dans…5
×

Vos Projets web sur les plateformes ouvertes

408 vues

Publié le

Présentation à la nAcademy (Juin 2015) de Neuros : Vos Projets web sur une plateforme ouverte Firefox OS par Christophe Villeneuve

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
408
Sur SlideShare
0
Issues des intégrations
0
Intégrations
27
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Vos Projets web sur les plateformes ouvertes

  1. 1. nAcademy  Le 4 juin 2015 Neuros ­  Vos Projets Web sur les plateformes ouvertes Christophe Villeneuve
  2. 2. 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
  3. 3. nAcademy  Le 4 juin 2015 Neuros ­  Avant  
  4. 4. nAcademy  Le 4 juin 2015 Neuros ­  Les navigateurs Web ● Première génération ● 2ème génération
  5. 5. nAcademy  Le 4 juin 2015 Neuros ­  Les smartphones   Apple Google Microsoft
  6. 6. nAcademy  Le 4 juin 2015 Neuros ­  Le Futur ● Un web sur smartphone
  7. 7. 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
  8. 8. nAcademy  Le 4 juin 2015 Neuros ­  GONK GECKO ➢ GAIA
  9. 9. nAcademy  Le 4 juin 2015 Neuros ­  Contrôler vos offres / vos besoins
  10. 10. 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
  11. 11. nAcademy  Le 4 juin 2015 Neuros ­  Choisir le moyen de consommer Le market des  smartphones Supermarché
  12. 12. nAcademy  Le 4 juin 2015 Neuros ­  Fabriquons et proposons  un produit (projet) Web
  13. 13. 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
  14. 14. 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.
  15. 15. 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
  16. 16. 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
  17. 17. nAcademy  Le 4 juin 2015 Neuros ­  Structure (1/2) Firefox OSWeb
  18. 18. nAcademy  Le 4 juin 2015 Neuros ­  Structure (2/2) CMS Drupal /! Apache
  19. 19. nAcademy  Le 4 juin 2015 Neuros ­  Simulateur ● Firefox OS simulator WEBIDE https://developer.mozilla.org/fr/docs/Outils/WebIDE
  20. 20. nAcademy  Le 4 juin 2015 Neuros ­  Résultat Simulateur (WebIDE Firefox)
  21. 21. nAcademy  Le 4 juin 2015 Neuros ­  Débug
  22. 22. nAcademy  Le 4 juin 2015 Neuros ­  https://marketplace.firefox.com/developers/
  23. 23. 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
  24. 24. nAcademy  Le 4 juin 2015 Neuros ­  https://marketplace.firefox.com/developers/validator Validateur
  25. 25. nAcademy  Le 4 juin 2015 Neuros ­  Déployer votre API https://marketplace.firefox.com/developers/submit/
  26. 26. 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
  27. 27. nAcademy  Le 4 juin 2015 Neuros ­  API Marketplace API : http://firefox­marketplace­api.readthedocs.org/en/latest/index.html
  28. 28. nAcademy  Le 4 juin 2015 Neuros ­  Marketplace https://marketplace.firefox.com
  29. 29. nAcademy  Le 4 juin 2015 Neuros ­  Votre projet disponible  sur les autres smartphones
  30. 30. 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
  31. 31. 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>
  32. 32. nAcademy  Le 4 juin 2015 Neuros ­  Et c'est tout Pour Firefox OS
  33. 33. nAcademy  Le 4 juin 2015 Neuros ­  En résumé ● Contrôler et penser à...  – Vos données – Vos produits – Vos contenus – ...
  34. 34. nAcademy  Le 4 juin 2015 Neuros ­  Merci Questions @hellosct1 @neuros_paris http://marketplace.mozilla.org http://www.mozilla.org/firefoxos http://firefoxos.mozfr.org
  35. 35. 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

×