Your SlideShare is downloading. ×
0
Firefox OS & the Open Web
09:30 Welcome09:40 Introductions09:50 Firefox OS overview10:20 Pushing apps10:30 Start hacking12:00 Lunch13:00 Hacking17:0...
Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
Open Web Apps
Develop Web App usingHTML5, CSS, & Javascript1.Create an app manifest file2.Publish/install the app3.
{"version": "1.0","name": "MozillaBall","description": "Exciting Open Web development action!","icons": {"16": "/img/icon-...
MANIFEST CHECKERhttp://appmanifest.org/
Serve with Content-type/MIME type:application/x-web-app-manifest+json
https://marketplace.firefox.com/
https://marketplace.firefox.com/developers/
Packaged vs. Hosted Apps
WebAPIs
https://wiki.mozilla.org/WebAPI
Security Levels
Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified...
https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
"permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"ala...
PERMISSIONS
Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery S...
BATTERY STATUSAPI
var battery = navigator.battery;if (battery) {var batteryLevel = Math.round(battery.level * 100) + "%",charging = (battery...
NOTIFICATION
var notification = navigator.mozNotification;notification.createNotification("See this","This is a notification",iconURL);
SCREENORIENTATION API
// Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscap...
VIBRATION API
// Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100,...
NETWORKINFORMATION API
var connection = window.navigator.mozConnection,online = connection.bandwidth > 0,metered = connection.metered;
DEVICEPROXIMITY
window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event....
AMBIENT LIGHTEVENTS
window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);...
window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the v...
Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
DEVICE STORAGEAPI
var deviceStorage = navigator.getDeviceStorage("videos");
// "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.ad...
var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error...
CONTACTS API
var contact = new mozContact();contact.init({name: "Tom"});var request = navigator.mozContacts.save(contact);request.onsuc...
WEB ACTIVITIES
var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {consol...
{"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});reg...
navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postR...
Future APIs
Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard...
Web Apps from Mozilla
DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst R...
Get started
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
Getting help
https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
Trying things out
Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Firefox OS workshop, Colombia
Upcoming SlideShare
Loading in...5
×

Firefox OS workshop, Colombia

932

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
932
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox OS workshop, Colombia"

  1. 1. Firefox OS & the Open Web
  2. 2. 09:30 Welcome09:40 Introductions09:50 Firefox OS overview10:20 Pushing apps10:30 Start hacking12:00 Lunch13:00 Hacking17:00 Demos18:00 Mingle20:00 DinnerAgenda
  3. 3. Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
  4. 4. Open Web Apps
  5. 5. Develop Web App usingHTML5, CSS, & Javascript1.Create an app manifest file2.Publish/install the app3.
  6. 6. {"version": "1.0","name": "MozillaBall","description": "Exciting Open Web development action!","icons": {"16": "/img/icon-16.png","48": "/img/icon-48.png","128": "/img/icon-128.png"},"developer": {"name": "Mozilla Labs","url": "http://mozillalabs.com"},"installs_allowed_from": ["*"],"appcache_path": "/cache.manifest","locales": {"es": {"description": "¡Acción abierta emocionante del desarrollo del Web!","developer": {"url": "http://es.mozillalabs.com/"}},"it": {"description": "Azione aperta emozionante di sviluppo difotoricettore!","developer": {"url": "http://it.mozillalabs.com/"}}},"default_locale": "en"}
  7. 7. MANIFEST CHECKERhttp://appmanifest.org/
  8. 8. Serve with Content-type/MIME type:application/x-web-app-manifest+json
  9. 9. https://marketplace.firefox.com/
  10. 10. https://marketplace.firefox.com/developers/
  11. 11. Packaged vs. Hosted Apps
  12. 12. WebAPIs
  13. 13. https://wiki.mozilla.org/WebAPI
  14. 14. Security Levels
  15. 15. Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified Web AppDevice-critical applications
  16. 16. https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
  17. 17. "permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"alarms": {"description": "Required to schedule notifications"}}
  18. 18. PERMISSIONS
  19. 19. Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery Status API (W3C)Alarm APIWeb ActivitiesPush Notifications APIWebFM APIWebPaymentIndexedDB (W3C)Ambient light sensorProximity sensorNotificationREGULAR APIS
  20. 20. BATTERY STATUSAPI
  21. 21. var battery = navigator.battery;if (battery) {var batteryLevel = Math.round(battery.level * 100) + "%",charging = (battery.charging)? "" : "not ",chargingTime = parseInt(battery.chargingTime / 60, 10,dischargingTime = parseInt(battery.dischargingTime / 60, 10);// Set eventsbattery.addEventListener("levelchange", setStatus, false);battery.addEventListener("chargingchange", setStatus, false);battery.addEventListener("chargingtimechange", setStatus, false);battery.addEventListener("dischargingtimechange", setStatus, false);}
  22. 22. NOTIFICATION
  23. 23. var notification = navigator.mozNotification;notification.createNotification("See this","This is a notification",iconURL);
  24. 24. SCREENORIENTATION API
  25. 25. // Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscape-secondary""portrait-primary""portrait-secondary"*/
  26. 26. VIBRATION API
  27. 27. // Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100, 200, 100]);// Vibrate for 5 secondsnavigator.vibrate(5000);// Turn off vibrationnavigator.vibrate(0);
  28. 28. NETWORKINFORMATION API
  29. 29. var connection = window.navigator.mozConnection,online = connection.bandwidth > 0,metered = connection.metered;
  30. 30. DEVICEPROXIMITY
  31. 31. window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event.value);// The maximum sensing distance the sensor is// able to report, in centimetersconsole.log(event.max);// The minimum sensing distance the sensor is// able to report, in centimetersconsole.log(event.min);});
  32. 32. AMBIENT LIGHTEVENTS
  33. 33. window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);});
  34. 34. window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the values for "bright" begin above 10000console.log(event.value);});
  35. 35. Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
  36. 36. DEVICE STORAGEAPI
  37. 37. var deviceStorage = navigator.getDeviceStorage("videos");
  38. 38. // "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.add(blob);// Same as .add, with provided namedeviceStorage.addNamed(blob, name);// Returns DOMRequest/non-editable File objectdeviceStorage.get(name);// Returns editable FileHandle objectdeviceStorage.getEditable(name);// Returns DOMRequest with success or failuredeviceStorage.delete(name);// Enumerates filesdeviceStorage.enumerate([directory]);// Enumerates files as FileHandlesdeviceStorage.enumerateEditable([directory]);
  39. 39. var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error("Error in DeviceStorage.enumerate()", cursor.error.name);};cursor.onsuccess = function() {if (!cursor.result)return;var file = cursor.result;// If this isnt a video, skip itif (file.type.substring(0, 6) !== "video/") {cursor.continue();return;}// If it isnt playable, skip itvar testplayer = document.createElement("video");if (!testplayer.canPlayType(file.type)) {cursor.continue();return;}};
  40. 40. CONTACTS API
  41. 41. var contact = new mozContact();contact.init({name: "Tom"});var request = navigator.mozContacts.save(contact);request.onsuccess = function() {console.log("Success");};request.onerror = function() {console.log("Error")};
  42. 42. WEB ACTIVITIES
  43. 43. var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {console.log("Showing the image!");};activity.onerror = function () {console.log("Cant view the image!");};
  44. 44. {"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
  45. 45. var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});register.onerror = function () {console.log("Failed to register activity");}
  46. 46. navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postResult() or a.postError() if// the activity should return a value});
  47. 47. Future APIs
  48. 48. Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME APIWebRTCFileHandle APISync API
  49. 49. Web Apps from Mozilla
  50. 50. DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst Run ExperienceNotificationsHome ScreenMozilla MarketplaceSystem UpdaterLocalization Support
  51. 51. Get started
  52. 52. https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  53. 53. FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
  54. 54. Getting help
  55. 55. https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
  56. 56. Trying things out
  57. 57. Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×