Your SlideShare is downloading. ×
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28

590
views

Published on

The mobile web got a bad reputation. In reality, it's the platform to bet on if you care about reach, and sustainability of your product. In this talk, Frédéric Harper will show you how you can use …

The mobile web got a bad reputation. In reality, it's the platform to bet on if you care about reach, and sustainability of your product. In this talk, Frédéric Harper will show you how you can use HTML5, CSS3, and JavaScript to build amazing mobile applications as to brush up what you previously published. Learn about the open web technologies, including WebAPIs, and tools designed to get you started developing HTML apps for Firefox OS, and the web.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
590
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Firefox OS, fixing the mobile web Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net FITC Toronto Toronto, Canada 2014-04-28
  • 2. Creative Commons: http://j.mp/1hCZYIe
  • 3. Creative Commons: http://j.mp/1ljZuJC
  • 4. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  • 5. Creative Commons: http://j.mp/1gP4X4K
  • 6. What you deserve
  • 7. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  • 8. It’s open source
  • 9. Some facts §  7 mobile operator & 4 hardware partners §  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb… §  More to come: Huawei Y300, ZTE Open C, Alcatel One Touche Fire C & E & S… §  Aimed at emerging markets/low end market
  • 10. A Firefox OS app? §  Creating a hosted or packaged app §  Using §  Vanilla HTML5 §  Librairies… §  Regular API §  Privileged API §  Certified API
  • 11. 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" } } }
  • 12. DEMO App Manager + Emberjs todomvc
  • 13. Web APIs
  • 14. 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
  • 15. Ambient Light Sensor
  • 16. 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); });
  • 17. DEMO Boilerplate – Ambient Light Sensor
  • 18. Battery Status
  • 19. 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); }
  • 20. DEMO Boilerplate – Battery status
  • 21. Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  • 22. Browser
  • 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. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  • 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. Web Activities
  • 27. Web Activities •  browse •  configure •  costcontrol •  dial •  Open •  new •  mail •  websms/sms •  webcontacts/contact •  pick •  record •  save-bookmark •  share •  view •  update packaged hosted
  • 28. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  • 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. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  • 31. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  • 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. Creative Commons: http://j.mp/1iZHGAW
  • 34. How to start
  • 35. Creative Commons: http://j.mp/1iquK8Q
  • 36. Creative Commons: http://j.mp/Ilm7wx
  • 37. Cordova & Phonegap
  • 38. API implementations •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  • 39. Free phone! http://j.mp/mozPFA
  • 40. Simplicity…
  • 41. Firefox Web Developer Tools
  • 42. Creative Commons: http://j.mp/1gIdcPF To infinity, and beyond…
  • 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. When you’ll build your next app Why not think about the web first…
  • 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 Firefox OS UI Component http://buildingfirefoxos.com/ Mozilla Brick http://j.mp/mozBrick FireWatch https://github.com/digitarald/firewatch
  • 46. Planning to port or build a Firefox OS app? Please let me know!
  • 47. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net