The document discusses HTML for mobile web development using Firefox OS. It provides an overview of Firefox OS including that it is built with HTML5, CSS3 and JavaScript and is open source. It then discusses various web APIs available for Firefox OS applications including regular, privileged and certified APIs. It demonstrates examples of ambient light sensor, battery status and browser APIs. Finally, it encourages developing applications for Firefox OS using HTML5.

1. HTML pour le web mobile
DevFest Nantes
Firefox OS
2014-11-07
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Creative Commons: https://flic.kr/p/iJCHKt

2. Fred, mais quelle
langue parles-tu?

3. Vidéo: www.koreus.com/jeu/
batman-france-quebec.html

4. Creative Commons: http://j.mp/1hCZYIe

5. Creative Commons: http://j.mp/1ljZuJC

8. 38 milliards d’appareils
connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

9. Creative Commons: http://j.mp/1gP4X4K

11. Firefox OS

13. Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.

14. C’est open source

15. Quelques faits
• Disponible dans plus de 24 pays
• Visant principalement les marchés
émergents

16. Quelques appareils

22. Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant
§ Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI

23. HTML5 + manifest = une app Firefox OS
{
"version": “42",
"name": ”Mon application",
"launch_path": "/index.html",
"description": ”Ma super application qui fait des choses fantastiques",
"icons": {
"16": "/images/logo16.png”,},
"developer": {
"name": ”Frédéric Harper",
"url": "http://outofcomfortzone.net",
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": ”Obtenir le long/lat de l’utilisateur"
}
}
}

24. DÉMO Firefox OS + App Manager
+ Emberjs todomvc

25. Web APIs

26. Web APIs – Regular
• Alarm API
• Ambient light sensor
• Archive API
• Battery Status API
• Geolocation API
• IndexedDB
• Network Information API
• Notifications API
• Open WebApps
• Proximity sensor
• Push API
• Screen Orientation
• Vibration API
• Web Activities
• WebFM API
• WebPayment
packaged
hosted

27. Ambient Light Sensor

28. Ambient Light Sensor
window.addEventListener("devicelight", function (event) {
// Le niveau de la lumière ambiante en lux
// Une lumière ambiante peu lumineuse est habituellement de 50 et moins,
// et la valeur pour très lumineux commence aux alentours de 10000
console.log(event.value);
});

29. DÉMO Boilerplate – Ambient Light Sensor

30. Battery Status

31. Battery Status
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? “yes" : "no",
chargingTime = parseInt(battery.chargingTime / 60, 10,
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
}

32. DÉMO Boilerplate – Battery status

33. Web APIs – Privileged
• Browser API
• Contacts API
• Device Storage API
• systemXHR
• TCP Socket API
packaged

34. Browser

35. Browser
<div>
<span id='location-bar'></span>
<button onclick='go_button_clicked()'>Go</button>
</div>
<div id='load-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘votresite.com' id='browser'></iframe>

36. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici
});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

37. Web APIs – Certified
• Camera API
• Idle API
• Mobile Connection API
• Network Stats API
• Permissions API
• Power Management API
• Settings API
• Time/Clock API
• Voicemail
• WebBluetooth
• WebSMS
• WebTelephony
• WiFi Information API
OS/OEM

38. Web Activities

39. Web Activities
• browse
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update
• new
• mail
• websms/sms
• webcontacts/contact

40. Pick
var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});

41. Pick
activity.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
}
};
activity.onerror = function () {
//error
};

42. Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

43. Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

44. N’oubliez pas de le gérer!
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var option = activityRequest.source;
if (activityRequest.source.name === "pick") {
// Do something to handle the activity
if (picture) {
activityRequest.postResult(picture);
}
else {
activityRequest.postError(”Impossible de fournir une image");
}
}
});

45. Creative Commons: http://j.mp/1iZHGAW

46. Creative Commons: https://flic.kr/p/4mJnLg

47. Comment débuter

48. Creative Commons: http://j.mp/1iquK8Q

49. Creative Commons: http://j.mp/Ilm7wx

50. Firefox OS love

51. Implémentations
des extensions
http://mozilla-cordova.github.io/

52. Simple

53. Firefox Web Developer Tools

56. Vers l'infini et plus
loin encore…
Creative Commons: http://j.mp/1gIdcPF

57. Plus d’API Web & fonctionnalités
• Calendar API
• FileHandle API Sync API
• Keyboard/IME API WebRTC
• HTTP-cache API
• Peer to Peer API
• Spellcheck API LogAPI
• Resource lock API
• UDP Datagram Socket API
• WebNFC
• WebUSB

58. Prochaine fois que vous
développerez une application…
Pensez à HTML5 & Firefox OS…

59. Resources
Firefox OS App Manager
http://j.mp/fxosAppManager
Firefox OS Simulators
http://j.mp/FxOSSimulators
Firefox OS with Cordova/
PhoneGap
https://mozilla-cordova.
github.io/
Mozilla Developer Network
https://developer.mozilla.org
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate

60. Firefox OS France
http://j.mp/fxOSFrance

61. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.org
http://outofcomfortzone.net