pourquoi firefox os
DESCRIPTION
Présentation à la nAcademy (Septembre 2013) : Pourquoi Firefox OS ? par Christophe VilleneuveTRANSCRIPT
Pourquoi Firefox OS ?
Christophe Villeneuve
12 septembre 2013
nAcademy – 12 Septembre 2013
Sommaire
✔ Le pourquoi
✔ Le comment
✔ Structure
✔ Démo
✔ Le +
nAcademy – 12 Septembre 2013
Le pourquoi...
Apporter l'ouverture du web
pour les appareils mobiles (devices)
nAcademy – 12 Septembre 2013
Avant
nAcademy – 12 Septembre 2013
De nos jours
Apple Google Microsoft
nAcademy – 12 Septembre 2013
En résumé... Le futur
nAcademy – 12 Septembre 2013
Web Mobile
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
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
nAcademy – 12 Septembre 2013
Architecture
GONK✔ Couche basse
✔ Kernel Linux + Hardware
✔ Abstraction Layer (HAL)
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
nAcademy – 12 Septembre 2013
Architecture
➢GONK
➢GECKO➢GAIA
✔ Interface utilisateur
✔ Construction API Full Web
✔ HTML 5 + open Web
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
Application Web
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
nAcademy – 12 Septembre 2013
Résultat
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"
}
nAcademy – 12 Septembre 2013
Demo.... simulator
https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
Validateur
https://marketplace.firefox.com/developers/validator
nAcademy – 12 Septembre 2013
MarketPlace
✔ 100 % le contrôle
✔ Pas d'intermédiaire
✔ Chez vous
✔ Déporté
✔ Sur la market
nAcademy – 12 Septembre 2013
MarketPlace
https://marketplace.firefox.com/
nAcademy – 12 Septembre 2013
Web applications : mode vibreur
+ Web APIs
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);
nAcademy – 12 Septembre 2013
Composants → Web applications
nAcademy – 12 Septembre 2013
Appareils mobiles
ZTE Open
Alcatel One touch fire
nAcademy – 12 Septembre 2013
Ete 2013
nAcademy – 12 Septembre 2013
Questions ?
URL :
http://marketplace.mozilla.orghttp://www.mozilla.org/firefoxoshttp://wiki.mozilla.org/Gaia/Hacking
Slides originales :
Tristan NitotRobert Nyman