Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML for the Mobile Web 
All Things Open 
Firefox OS 
2014-10-22 
Frédéric Harper 
Sr. Technical Evangelist @ Mozilla 
@fh...
Creative Commons: http://j.mp/1hCZYIe
Creative Commons: http://j.mp/1ljZuJC
38 billion devices 
connected in 2020 
ABI Research - 2013-05-09 - http://j.mp/38billion
Creative Commons: http://j.mp/1gP4X4K
What you deserve
Built with the Web 
Using HTML5, CSS3 and JavaScript 
with a number of APIs 
to build apps.
It’s open source
Some facts 
• Available in more than 24 countries 
• Primarly aimed at emerging & low 
end markets
Some of the devices
A Firefox OS app? 
§ Creating a hosted or packaged app 
§ Using 
§ Vanilla HTML5 
§ Librairies… 
§ Regular API 
§ Pr...
HTML5 + manifest (JSON) = Firefox OS app 
{ 
"version": “42", 
"name": ”My amazing app", 
"launch_path": "/index.html", 
"...
DEMO Firefox OS + App Manager 
+ Emberjs todomvc
Web APIs
Web APIs – Regular 
• Alarm API 
• Ambient light sensor 
• Archive API 
• Battery Status API 
• Geolocation API 
• Indexed...
Ambient Light Sensor
Ambient Light Sensor 
window.addEventListener("devicelight", function (event) { 
// The level of the ambient light in lux ...
DEMO Boilerplate – Ambient Light Sensor
Battery Status
Battery Status 
var battery = navigator.battery; 
if (battery) { 
var batteryLevel = Math.round(battery.level * 100) + "%"...
Web APIs – Privileged 
• Browser API 
• Contacts API 
• Device Storage API 
• systemXHR 
• TCP Socket API 
packaged
Browser
Browser 
<div> 
<span id='location-bar'></span> 
<button onclick='go_button_clicked()'>Go</button> 
</div> 
<div id='load-...
Browser 
addEventListener('mozbrowserloadstart', function(e) { 
//Do stuff 
}); 
/* 
Possible values: 
"mozbrowserloadstar...
Web APIs – Certified 
• Camera API 
• Idle API 
• Mobile Connection API 
• Network Stats API 
• Permissions API 
• Power M...
Web Activities
Web Activities 
• browse 
• configure 
• costcontrol 
• dial 
• Open 
• new 
• mail 
• websms/sms 
• webcontacts/contact 
...
Pick 
var activity = new MozActivity({ 
name: "pick", 
//Provide the data required 
//by the filter of the activity 
data:...
Pick 
activity.onsuccess = function () { 
var img = document.createElement("img"); 
if (this.result.blob.type.indexOf("ima...
Dial 
var call = new MozActivity({ 
name: "dial", 
data: { 
number: "+46777888999" 
} 
});
Web Activity Received Handler 
"activities": { 
"pick": { 
"filters": { 
"type": ["image/jpeg", "image/png"] 
}, 
"disposi...
Don’t forget to handle it! 
navigator.mozSetMessageHandler('activity', function(activityRequest) { 
var option = activityR...
Creative Commons: http://j.mp/1iZHGAW
Creative Commons: https://flic.kr/p/4mJnLg
How to start
Creative Commons: http://j.mp/1iquK8Q
Creative Commons: http://j.mp/Ilm7wx
Phonegap & Cordova 
& <3
Plugins 
implementation 
http://mozilla-cordova.github.io/
Simplicity…
Firefox Web Developer Tools
To infinity, and 
beyond… 
Creative Commons: http://j.mp/1gIdcPF
More Web APIs & features 
• Calendar API 
• FileHandle API Sync API 
• Keyboard/IME API WebRTC 
• HTTP-cache API 
• Peer t...
Next time you’ll build a mobile app 
Think about HTML5 & Firefox OS
Resources 
Firefox OS Simulator 
http://j.mp/fxosSimulator 
Firefox OS App Manager 
http://j.mp/fxosAppManager 
Mozilla De...
Frédéric Harper 
fharper@mozilla.com 
@fharper 
http://hacks.mozilla.org 
http://outofcomfortzone.net
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
Upcoming SlideShare
Loading in …5
×

HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22

1,297 views

Published on

Firefox OS is a new operating system for mobile phones to bring web connectivity to those who can not get top-of-the-line smartphones. By harvesting the principles of what made the web great and giving developers access to the hardware directly through web standards it will be the step we need to make a real open and affordable mobile web a reality. In this talk, Frédéric Harper from Mozilla will show how Firefox OS works, how to build apps for it and how end users will benefit from this open alternative to other platforms.

Published in: Technology
  • My personal experience with research paper writing services was highly positive. I sent a request to ⇒ www.HelpWriting.net ⇐ and found a writer within a few minutes. Because I had to move house and I literally didn’t have any time to sit on a computer for many hours every evening. Thankfully, the writer I chose followed my instructions to the letter. I know we can all write essays ourselves. For those in the same situation I was in, I recommend ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22

  1. 1. HTML for the Mobile Web All Things Open Firefox OS 2014-10-22 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net Creative Commons: https://flic.kr/p/5HzQsy
  2. 2. Creative Commons: http://j.mp/1hCZYIe
  3. 3. Creative Commons: http://j.mp/1ljZuJC
  4. 4. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  5. 5. Creative Commons: http://j.mp/1gP4X4K
  6. 6. What you deserve
  7. 7. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  8. 8. It’s open source
  9. 9. Some facts • Available in more than 24 countries • Primarly aimed at emerging & low end markets
  10. 10. Some of the devices
  11. 11. A Firefox OS app? § Creating a hosted or packaged app § Using § Vanilla HTML5 § Librairies… § Regular API § Privileged API § Certified API
  12. 12. HTML5 + manifest (JSON) = Firefox OS app { "version": “42", "name": ”My amazing app", "launch_path": "/index.html", "description": ”My super amazing app do super amazing things", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Get the long/lat of the user" } } }
  13. 13. DEMO Firefox OS + App Manager + Emberjs todomvc
  14. 14. Web APIs
  15. 15. 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
  16. 16. Ambient Light Sensor
  17. 17. Ambient Light Sensor window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });
  18. 18. DEMO Boilerplate – Ambient Light Sensor
  19. 19. Battery Status
  20. 20. 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); }
  21. 21. Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API packaged
  22. 22. Browser
  23. 23. 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=‘yoursite.com' id='browser'></iframe>
  24. 24. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  25. 25. 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
  26. 26. Web Activities
  27. 27. Web Activities • browse • configure • costcontrol • dial • Open • new • mail • websms/sms • webcontacts/contact • pick • record • save-bookmark • share • view • update packaged hosted
  28. 28. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  29. 29. 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 };
  30. 30. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  31. 31. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  32. 32. Don’t forget to handle it! 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("Unable to provide a picture"); } } });
  33. 33. Creative Commons: http://j.mp/1iZHGAW
  34. 34. Creative Commons: https://flic.kr/p/4mJnLg
  35. 35. How to start
  36. 36. Creative Commons: http://j.mp/1iquK8Q
  37. 37. Creative Commons: http://j.mp/Ilm7wx
  38. 38. Phonegap & Cordova & <3
  39. 39. Plugins implementation http://mozilla-cordova.github.io/
  40. 40. Simplicity…
  41. 41. Firefox Web Developer Tools
  42. 42. To infinity, and beyond… Creative Commons: http://j.mp/1gIdcPF
  43. 43. More Web APIs & features • 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
  44. 44. Next time you’ll build a mobile app Think about HTML5 & Firefox OS
  45. 45. Resources Firefox OS Simulator http://j.mp/fxosSimulator Firefox OS App Manager http://j.mp/fxosAppManager Mozilla Developer Network https://developer.mozilla.org StackOverflow forum http://j.mp/fxosStackOverflow Firefox OS Boilerplate http://j.mp/fxosBoilerplate
  46. 46. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.org http://outofcomfortzone.net

×