Vos Projets web sur les plateformes ouvertes

nAcademy Le 4 juin 2015 Neuros
Vos Projets Web
sur les plateformes ouvertes
Christophe Villeneuve

Qu'est ce une plateforme ouverte ?
● Un Web ouvert
● Une market
● Besoin de contrôler ses données / contenu

Avant

Les navigateurs Web
● Première génération
● 2ème génération

Les smartphones

Apple Google Microsoft

Le Futur
● Un web sur smartphone

Décomposition d'un smartphone
Applications
Système d'exploitation
Hardware / Device
Applications
Système d'exploitation
Hardware / Device
VS

GONK
GECKO
➢
GAIA

Contrôler vos offres / vos besoins

Matériels
● Samsung Nexus
– S / 4G
● Samsung Galaxy
– S II / Nexus
● Nexus 4
● Sony
● ...
● ZTE Open C
● Flame
● ZTE Open L
● LG Fx0
● ...
FirefoxOSAndroid

Choisir le moyen de consommer
Le market des
smartphones
Supermarché

Fabriquons et proposons
un produit (projet) Web

Icônes
Ex : Firefox OS 2.x Pour nous
● icone16.png
● icone32.png
● icone48.png
● icone64.png
● icone128.png
● icone512.png

{
  "version": "1.0",
  "name": "DrupalFR",
  "description": "Drupal France et Francophonie",
  "launch_path": "/index.html",
  "icons": {
    "48": "/img/icons/drupalfr48.png",
    "128": "/img/icons/drupalfr128.png",
    "512": "/img/icons/drupalfr512.png"
  },
  "developer": {
    "name": "Christophe Villeneuve",
    "url": "http://www.hellodesign.fr"
  },
    "installs_allowed_from": [
    "*"
  ],
  "appcache_path": "/cache.manifest",
  "locales": {
    "fr": {
      "description": "Drupal France et Francophonie",
      "developer": {
        "url": "http://www.hellodesign.fr"
      }
    }
  },
  "default_locale": "en"
}
Manifest.webapp
https://developer.mozilla.org/enUS/Apps/Build/Manifest
Options possibles :
Fullscreen
Permission
Orientation
Serveur
Etc.

CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
Manifest.appcache

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Drupal France et Francophonie</title>
<meta name="description" content="">
<meta name="viewport" content="width=devicewidth">
<meta httpequiv="refresh" content="5;url=http://www.drupalfr.org">
</head>
<body>
<p>Drupal France et Francophonie</p>
<p>Loading...</p>
</body>
</html>
Index.html

Structure (1/2)
Firefox OSWeb

Structure (2/2)
CMS Drupal
/! Apache

Simulateur
● Firefox OS simulator WEBIDE
https://developer.mozilla.org/fr/docs/Outils/WebIDE

Résultat Simulateur (WebIDE Firefox)

Débug

https://marketplace.firefox.com/developers/

✔
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

https://marketplace.firefox.com/developers/validator
Validateur

Déployer votre API
https://marketplace.firefox.com/developers/submit/

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

API Marketplace
API : http://firefoxmarketplaceapi.readthedocs.org/en/latest/index.html

Marketplace
https://marketplace.firefox.com

Votre projet disponible
sur les autres smartphones

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

Cordova par la pratique
● Installation Plugin (desktop)
sudo aptget install cordova
● Fichier : manifest.webapp
{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": { "128": "/img/icon128.png"  },
  "developer": {
    "name": "votre nom",
    "url": "http://votresite.com"
  },
  "default_locale": "en"
}
● Fichier index.html
<script type="text/javascript">
   app.initialize();
</script>

Et c'est tout
Pour Firefox OS

En résumé
● Contrôler et penser à...
– Vos données
– Vos produits
– Vos contenus
– ...

Merci
Questions
@hellosct1
@neuros_paris
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://firefoxos.mozfr.org

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (20)

Similaire à Vos Projets web sur les plateformes ouvertes

Similaire à Vos Projets web sur les plateformes ouvertes (10)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Vos Projets web sur les plateformes ouvertes