firefox os - l'autre système pour smartphone
DESCRIPTION
Présentation effectuée à l'OSDC & Open World Forum 2013 - Track Code par Christophe VilleneuveTRANSCRIPT
Firefox OSL'autre système pour smartphone
Christophe Villeneuve
@hellosct1
ChristopheVilleneuve
Qui ?
Le 5 octobre 2013
✔ Le pourquoi✔ Le comment✔ Structure✔ Démo✔ Le +
Sommaire
Le 5 octobre 2013
Apporter l'ouverture du web
pour les appareils mobiles (devices)
Le pourquoi
Le 5 octobre 2013
Avant
Le 5 octobre 2013
Apple Google Microsoft
De nos jours
Le 5 octobre 2013
En résumé de nos jours
Le 5 octobre 2013
Web mobile
Le 5 octobre 2013
✔ Navigation par onglets✔ Gestion mémoire✔ Créer vos applications
personnalisées et différencier UX
✔ Tout en application Web
Donc
Le 5 octobre 2013
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
Le 5 octobre 2013
GONK✔ Couche basse✔ Kernel Linux + Hardware✔ Abstraction Layer (HAL)
Architecture
Le 5 octobre 2013
➢GONK➢GECKO
✔ Exécution des applications (runtime)✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript✔ Gestion des API
Architecture
Le 5 octobre 2013
➢GONK➢GECKO➢GAIA
✔ Interface utilisateur✔ Construction API Full Web✔ HTML 5 + open Web
Architecture
Le 5 octobre 2013
Application web
Le 5 octobre 2013
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>OSDC sur Firefox OS</title>
<meta name="viewport" content="width=devicewidth">
<link rel="stylesheet" href="css/osdc.css">
</head>
<body>
<div id="container">
<p>OSDC</p>
Open World Forum 2013
</div>
</body>
</html>
p {
background: #dddddd;
fontweight:bold;
color:#FF0000;
height:200px;
lineheight:200px;
textalign:center;
}
#container{
position:absolute;
textalign:center;
lineheight: 200px;
position:relative;
border:2px solid #000000;
verticalalign:center;
}
Index.html *.css
Création API... OSDC
Le 5 octobre 2013
Résultat
Le 5 octobre 2013
{
"version": "1.0",
"name": "OSDC",
"description": "OSDC sur Firefox OS",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/osdc16.png",
"48": "/img/icons/osdc48.png",
"128": "/img/icons/osdc128.png"
},
"developer": {
"name": "Hello / Sector One",
"url": "http://www.hellodesign.fr"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"locales": {
"fr": {
"description": "OSDC",
"developer": {
"url": "http://www.osdc.fr"
}
}
},
"default_locale": "en"
}
Manifest.webapp
Le 5 octobre 2013
Résultat
Le 5 octobre 2013
https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
Demo... Simulator
Le 5 octobre 2013
https://marketplace.firefox.com/developers/validator
Validateur
Le 5 octobre 2013
✔ 100 % le contrôle✔ Pas d'intermédiaire✔ Chez vous✔ Déporté✔ Sur la market
Marketplace
Le 5 octobre 2013
https://marketplace.firefox.com/
Marketplace
Le 5 octobre 2013
+ Web APIs
Web applications : mode vibreur
Le 5 octobre 2013
// vibre 1 secondenavigator.vibrate(1000);
// effet viration (pattern[vibration, pause...]navigator.vibrate ([200,100,200,100]);
// vibre 5 secondesnavigator.vibrate (5000);
// Mode Off pour Vibrationnavigator.vibrate(0);
Vibration
Le 5 octobre 2013
Composants → web applications
Le 5 octobre 2013
ZTE Open
Alcatel One touch fire
Appareils mobiles
Le 5 octobre 2013
Ete 2013
Le 5 octobre 2013
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki.mozilla.org/Gaia/Hacking
URL ?
Le 5 octobre 2013
Sources des slides :
Tristan NitotRobert Nyman
Merci