Pourquoi Firefox OS

29
Pourquoi Firefox OS ? Christophe Villeneuve 12 septembre 2013

description

Présentation à la nAcademy (Septembre 2013) : Pourquoi Firefox OS ? par Christophe Villeneuve

Transcript of Pourquoi Firefox OS

Page 1: Pourquoi Firefox OS

Pourquoi Firefox OS ?

Christophe Villeneuve

12 septembre 2013

Page 2: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Sommaire

✔ Le pourquoi

✔ Le comment

✔ Structure

✔ Démo

✔ Le +

Page 3: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Le pourquoi...

Apporter l'ouverture du web

pour les appareils mobiles (devices)

Page 4: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Avant

Page 5: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

De nos jours

Apple Google Microsoft

Page 6: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

En résumé... Le futur

Page 7: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Web Mobile

Page 8: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Donc...

✔ Navigation par onglets

✔ Gestion mémoire

✔ Créer vos applications personnalisées et différencier UX

✔ Tout en application Web

Page 9: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Page 10: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

https://mdn.mozillademos.org/files/4605/FirefoxOS.png

GONK

➢GECKO

➢GAIA

Page 11: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Architecture

GONK✔ Couche basse

✔ Kernel Linux + Hardware

✔ Abstraction Layer (HAL)

Page 12: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Architecture

➢GONK

➢GECKO

✔ Exécution des applications (runtime)

✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript

✔ Gestion des API

Page 13: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Architecture

➢GONK

➢GECKO➢GAIA

✔ Interface utilisateur

✔ Construction API Full Web

✔ HTML 5 + open Web

Page 14: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Page 15: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Application Web

Page 16: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Création API ….Neuros

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Neuros sur Firefox OS</title>

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/neuros.css">

</head>

<body>

<div id="container">

<p>N E U R O S</p>

présentation nAcademy

</div>

</body>

</html>

p {

background: #dddddd;

font-weight:bold;

color:#FF0000;

height:200px;

line-height:200px;

text-align:center;

}

#container{

position:absolute;

text-align:center;

line-height: 200px;

position:relative;

border:2px solid #000000;

vertical-align:center;

}

Index.html *.css

Page 17: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Résultat

Page 18: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Manifest.webapp

{

"version": "1.0",

"name": "Neuros",

"description": "Neuros sur mobile",

"launch_path": "/index.html",

"icons": {

"16": "/img/icons/neuros-16.png",

"48": "/img/icons/neuros-48.png",

"128": "/img/icons/neuros-128.png"

},

"developer": {

"name": "Christophe Villeneuve",

"url": "http://www.neuros.fr"

},

"installs_allowed_from": ["*"],

"appcache_path": "/cache.manifest",

"locales": {

"fr": {

"description": "Neuros sur Firefox OS",

"developer": {

"url": "http://www.neuros.fr"

}

}

},

"default_locale": "en"

}

Page 19: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Demo.... simulator

https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/

Page 20: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Page 21: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Validateur

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

Page 22: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

MarketPlace

✔ 100 % le contrôle

✔ Pas d'intermédiaire

✔ Chez vous

✔ Déporté

✔ Sur la market

Page 23: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

MarketPlace

https://marketplace.firefox.com/

Page 24: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Web applications : mode vibreur

+ Web APIs

Page 25: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Vibration

// vibre 1 seconde

navigator.vibrate(1000);

// effet viration (pattern[vibration, pause...]

navigator.vibrate ([200,100,200,100]);

// vibre 5 secondes

navigator.vibrate (5000);

// Mode Off pour Vibration

navigator.vibrate(0);

Page 26: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Composants → Web applications

Page 27: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Appareils mobiles

ZTE Open

Alcatel One touch fire

Page 28: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Ete 2013

Page 29: Pourquoi Firefox OS

nAcademy – 12 Septembre 2013

Questions ?

URL :

http://marketplace.mozilla.orghttp://www.mozilla.org/firefoxoshttp://wiki.mozilla.org/Gaia/Hacking

Slides originales :

Tristan NitotRobert Nyman