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, not just for desktops: Firefox OS - Congreso Universitario Móvil - 2014-09-04

1,115 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 HTML 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. In the end, HTML is not just for desktops..

Published in: Technology
  • Login to see the comments

  • Be the first to like this

HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 2014-09-04

  1. 1. HTML, not just for desktops Congreso Universitario Móvil Firefox OS 2014-09-04 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net Creative Commons: http://j.mp/1qM9oBJ
  2. 2. Lo sentimos, no hablo español Thanks Google translate…
  3. 3. Creative Commons: http://j.mp/1hCZYIe
  4. 4. Creative Commons: http://j.mp/1ljZuJC
  5. 5. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  6. 6. Creative Commons: http://j.mp/1gP4X4K
  7. 7. What you deserve
  8. 8. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  9. 9. It’s open source
  10. 10. Some facts • Available in 26 countries • Primarly aimed at emerging & low end markets • More countries soon
  11. 11. Some facts
  12. 12. A Firefox OS app? § Creating a hosted or packaged app § Using § Vanilla HTML5 § Librairies… § Regular API § Privileged API § Certified API
  13. 13. 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" } } }
  14. 14. DEMO App Manager + Emberjs todomvc
  15. 15. Web APIs
  16. 16. 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
  17. 17. Ambient Light Sensor
  18. 18. 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); });
  19. 19. DEMO Boilerplate – Ambient Light Sensor
  20. 20. Battery Status
  21. 21. 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); }
  22. 22. DEMO Boilerplate – Battery status
  23. 23. Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API packaged
  24. 24. Browser
  25. 25. 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>
  26. 26. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  27. 27. 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
  28. 28. Web Activities
  29. 29. Web Activities • browse • configure • costcontrol • dial • Open • new • mail • websms/sms • webcontacts/contact • pick • record • save-bookmark • share • view • update packaged hosted
  30. 30. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  31. 31. 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 };
  32. 32. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  33. 33. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  34. 34. 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"); } } });
  35. 35. Creative Commons: http://j.mp/1iZHGAW
  36. 36. How to start
  37. 37. Creative Commons: http://j.mp/1iquK8Q
  38. 38. Creative Commons: http://j.mp/Ilm7wx
  39. 39. Cordova & Phonegap
  40. 40. API implementations • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  41. 41. Free phone! http://j.mp/mozflame Creative Commons: https://flic.kr/p/epEL3n
  42. 42. Simplicity…
  43. 43. Firefox Web Developer Tools
  44. 44. To infinity, and beyond… Creative Commons: http://j.mp/1gIdcPF
  45. 45. 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
  46. 46. Next time you’ll build a mobile app Think about HTML5
  47. 47. 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
  48. 48. Planning to port or build a Firefox OS app? Please let me know!
  49. 49. Join us at 11:00 for a workshop
  50. 50. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.org http://outofcomfortzone.net

×