firefox os 1.1 l'autre systeme pour smartphone
DESCRIPTION
Présentation à Alchimie X (novembre 2013) par Christophe Villeneuve (Hello / Sector One)TRANSCRIPT
16/11/13
1/34
Firefox OSL'autre système pour smartphone
1.1
ChristopheVilleneuve
QuiQui
✔ Le pourquoi
✔ Le comment
✔ Structure
✔ Démo
✔ Le +
SommaireSommaire
Apporter l'ouverture du web
pour les appareils mobiles (devices)
Le pourquoiLe pourquoi
AvantAvant
Apple Google Microsoft
De nos joursDe nos jours
En résumé de nos joursEn résumé de nos jours
Web mobileWeb mobile
✔ Navigation par onglets✔ Gestion mémoire✔ Créer vos applications
personnalisées et différencier UX
✔ Tout en application Web
DoncDonc
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
GONK✔ Couche basse✔ Kernel Linux + Hardware✔ Abstraction Layer (HAL)
ArchitectureArchitecture
➢GONK
➢GECKO
✔ Exécution des applications (runtime)
✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript
✔ Gestion des API
ArchitectureArchitecture
➢GONK
➢GECKO
➢GAIA
✔ Interface utilisateur✔ Construction API Full Web✔ HTML 5 + open Web
ArchitectureArchitecture
Application webApplication web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>ALCHIMIE sur Firefox OS</title>
<meta name="viewport" content="width=devicewidth">
<link rel="stylesheet" href="css/osdc.css">
</head>
<body>
<div id="container">
<p>ALCHIMIE</p>
X
</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 *.cssCréation API... ALCHIMIECréation API... ALCHIMIE
RésultatRésultat
{
"version": "1.0",
"name": "ALCHIMIE",
"description": "Alchimie",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/alchimie16.png",
"48": "/img/icons/alchimie48.png",
"128": "/img/icons/alchimie128.png"
},
"developer": {
"name": "Hello / Sector One",
"url": "http://www.hellodesign.fr"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"locales": {
"fr": {
"description": "Alchimie",
"developer": {
"url": "http://www.triplea.fr/alchimie"
}
}
},
"default_locale": "en"
}
Manifest.webappManifest.webapp
RésultatRésultat
https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
Demo... SimulatorDemo... Simulator
https://marketplace.firefox.com/developers/validator
ValidateurValidateur
✔ 100 % le contrôle✔ Pas d'intermédiaire✔ Chez vous✔ Déporté✔ Sur la market
MarketplaceMarketplace
https://marketplace.firefox.com/
MarketplaceMarketplace
+ Web APIs
Web applications : mode vibreurWeb applications : mode vibreur
// 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);
VibrationVibration
Composants → web applicationsComposants → web applications
1.1
Matériels et ...Matériels et ...
1.11.1● Android 4.0 +
● Basé sur Firefox 24
● Améliorations....
– CSS / HTML / JS
– DOM / mathML
● Des mobiles disponibles
ZTE Open
Alcatel One touch fire
Appareils mobilesAppareils mobiles
Ete 2013Ete 2013
ZTE Open Alcatel One touch fire LG D300 => 2014
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki.mozilla.org/Gaia/Hacking
https://developer.mozilla.org/enUS/docs/Mozilla/Firefox_OS
URL ?URL ?
Sources des slides :
Tristan NitotRobert Nyman
MerciMerci