Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

HTML for the Mobile Web, Firefox OS

679 visualizaciones

Publicado el

All Things Open 2014 - Day 1
Wednesday, October 22nd, 2014

Frédéric Harper
Senior Technical Evangelist for Mozilla
Mobile
HTML for the Mobile Web, Firefox OS

Find more by Frédéric here: http://www.slideshare.net/fredericharper

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

HTML for the Mobile Web, Firefox OS

  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 CreativeCommons: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. Creative Commons: http://j.mp/1gIdcPF To infinity, and beyond…
  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

×