Vos Projets web sur les plateformes ouvertes

Preview:

Citation preview

nAcademy  Le 4 juin 2015 Neuros ­ 

Vos Projets Websur 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

Recommended