Your SlideShare is downloading. ×
0
Front In! RECIFE	

#FirefoxOS
!
Fábio
Magnoni
@FabioMagnoni
#FirefoxOS
http://www.unrealengine.com/html5/
GONK

GECKO

GAIA
GONK
Infrastructure Layer (Gonk)
Open Source Libraries
RILd


GPS

Input /
Touch


Audio
/
Video
Open
GLES


Accel


Power
Mgt
...
GECKO
Open Web Platform Interface
Web APIs
Contacts


Security

Camera
Media
Storage
WebRTC


Settings

WebTelephony
WebSMS/MMS
...
GAIA
Application Layer HTML5 / JS / CSS
Gaia
JS Libraries

For Developers

Core Certified
Apps


Hosted Apps

System
App


Utili...
Construindo Apps
Apps Web Aberta
A Web é a Plataforma
Mobile Internet Users

Desktop
Plataformas
!
A Web está ganhando!!!
{

"version": "1.0",

"name": “Mozilla	
",

"description": "Exciting Open Web development action!",

"icons": {

"16": "/i...
Verificador de Manifesto
http://appmanifest.org/
Empacotadas vs. Hospedadas
Segurança
Apps
Conteúdo Web

Web Apps Privilegiadas

Conteúdos Web Padrão

Mais acesso, mais
responsabilidade

Web Apps Instaladas

...
Permissões

https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
"permissions": {

"contacts": {

"description": "Required for autocompletion in the share screen",

"access": "readcreate"...
WEB APIs
WEB APIS (PRA GALERA)
Vibration API (W3C)

Web Activities

Screen Orientation

Push Notifications API

Geolocation API

Web...
API STATUS DA
BATERIA
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + "%",

charging = (b...
NOTIFICAÇÃO
var notification = navigator.mozNotification;

notification.createNotification(

"See this", 

"This is a notification", 
...
API ORIENTAÇÃO
DE TELA
// Portrait mode:

screen.mozLockOrientation("portrait");



/* 

Possible values:

"landscape" 

"portrait"

"landscape-p...
API VIRAÇÃO
// Vibrate for one second

navigator.vibrate(1000);



// Vibration pattern [vibrationTime, pause,…]

navigator.vibrate([2...
API INFO DE REDE
var connection = window.navigator.mozConnection,

online = connection.bandwidth > 0,

metered = connection.metered;

PROXIMIDADE
window.addEventListener("deviceproximity", function (event) {

// Current device proximity, in centimeters

console.log(ev...
API EVENTOS
ILUMINAÇÃO
window.addEventListener("devicelight", function (event) {

// The level of the ambient light in lux

console.log(event.val...
window.addEventListener("devicelight", function (event) {

// The lux values for "dim" typically begin below 50,

// and t...
WEB APIS (PRIVILEGIADAS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
DEVICE STORAGE
var deviceStorage = navigator.getDeviceStorage("videos");
// "external", "shared", or "default".

deviceStorage.type;



// Add a file - returns DOMRequest with file name

deviceSt...
var storage = navigator.getDeviceStorage("videos"),

cursor = storage.enumerate();



cursor.onerror = function() {

conso...
API DE CONTATO
var addContact = document.querySelector("#add-contact");

if (addContact) { 

addContact.onclick = function () {

var newC...
Apps Certificadas = Apps SO
Dialer
!
Contacts
!
Settings
!
SMS
!
Web browser
!
Gallery
!
Video Player
!
Music Player
!
E-mail (POP, IMAP)
!
Calendar

...
WEB ACTIVITIES
var activity = new MozActivity({

name: "view", 

data: {

type: "image/png", 

url: ... 

}

});

activity.onsuccess = fu...
{

"activities": {

"share": {

"filters": {

"type": ["image/png", "image/gif"]

}

"href": "sharing.html",

"disposition...
var register = navigator.mozRegisterActivityHandler({

name: "view", 

disposition: "inline", 

filters: {

type: "image/p...
navigator.mozSetMessageHandler("activity", function (a) {

var img = getImageObject();

img.src = a.source.url;

// Call a...
Como instalar App da Web

var install app = navigator.mozApps.install(manifestURL);

installapp.onsucess = function(data) ...
APIs Futuras
Resource lock API

Spellcheck API

UDP Datagram Socket API

LogAPI

Peer to Peer API

Keyboard/IME API

WebNFC

WebRTC

We...
https://marketplace.firefox.com/
o/ Documentos e Ferramentas o/
FIREFOX OS
BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App
https://addons.mozilla.org/firefox/addon/firefox-ossimulator/
http://buildingfirefoxos.com/
https://developer.mozilla.org/en-US/docs/WebAPI
https://marketplace.firefox.com/developers/
Mozilla Developer Blog

https://hacks.mozilla.org/category/firefox-os/
http://mozilla.github.io/brick/docs.html
Componentes
Appbar
!
Calendar
!
Deck
!
Flipbox
!
Layout
!
Slideshow
!
Slider
!
Tabbar
!
Toggle
!
Tooltip
App Maker

https://appmaker.mozillalabs.com/
Pedindo Ajuda
https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/
#openwebapps
Fábio Magnoni

fabio@mozilla.com

@FabioMagnoni
@mozhacks
Front in recife
Front in recife
Front in recife
Front in recife
Front in recife
Front in recife
Front in recife
Front in recife
Front in recife
Upcoming SlideShare
Loading in...5
×

Front in recife

888

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

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

No notes for slide

Transcript of "Front in recife"

  1. 1. Front In! RECIFE #FirefoxOS !
  2. 2. Fábio Magnoni @FabioMagnoni #FirefoxOS
  3. 3. http://www.unrealengine.com/html5/
  4. 4. GONK GECKO GAIA
  5. 5. GONK
  6. 6. Infrastructure Layer (Gonk) Open Source Libraries RILd
 GPS Input / Touch
 Audio / Video Open GLES
 Accel
 Power Mgt
 Bluetooth
 LEDs HW Buttons
 Vibrator
 USB
 Camera
 Device’s Operationg System Linux Kernel OEM Drivers OEM Modem Firmware OEM Libs
  7. 7. GECKO
  8. 8. Open Web Platform Interface Web APIs Contacts
 Security Camera Media Storage WebRTC
 Settings WebTelephony WebSMS/MMS
 Sensors GeoLocation Battery Vibration
 Open Web
 Apps APIs
 NFC Bluetooth
 Network
 Connections / UICC
 Gecko Engine System XHR
 mozPay /
 Trusted
 UI
 Alarms System Messages
 Web
 Activities
 HTML5 APIs
  9. 9. GAIA
  10. 10. Application Layer HTML5 / JS / CSS Gaia JS Libraries
 For Developers Core Certified Apps
 Hosted Apps
 System App
 Utility Libraries Building Blocks
 Trusted Packed Apps

  11. 11. Construindo Apps
  12. 12. Apps Web Aberta
  13. 13. A Web é a Plataforma
  14. 14. Mobile Internet Users Desktop
  15. 15. Plataformas !
  16. 16. A Web está ganhando!!!
  17. 17. {
 "version": "1.0",
 "name": “Mozilla ",
 "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/"
 }
 },
 "pt-BR": {
 "description": "Descrição da sua aplicação!",
 "developer": {
 "url": "http://pt-BR.mozillalabs.com/"
 }
 }
 },
 "default_locale": "en"
 }

  18. 18. Verificador de Manifesto http://appmanifest.org/
  19. 19. Empacotadas vs. Hospedadas
  20. 20. Segurança
  21. 21. Apps Conteúdo Web Web Apps Privilegiadas Conteúdos Web Padrão Mais acesso, mais responsabilidade Web Apps Instaladas Web App Certificada Web App Normal Apps Críticas ao dispositivo
  22. 22. Permissões https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
  23. 23. "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  24. 24. WEB APIs
  25. 25. WEB APIS (PRA GALERA) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM API Mouse Lock API (W3C) WebPayment Open WebApps IndexedDB (W3C) Network Information API (W3C) Ambient light sensor Battery Status API (W3C) Proximity sensor Alarm API Notification
  26. 26. API STATUS DA BATERIA
  27. 27. 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 events
 battery.addEventListener("levelchange", setStatus, false);
 battery.addEventListener("chargingchange", setStatus, false);
 battery.addEventListener("chargingtimechange", setStatus, false);
 battery.addEventListener("dischargingtimechange", setStatus, false); }
  28. 28. NOTIFICAÇÃO
  29. 29. var notification = navigator.mozNotification;
 notification.createNotification(
 "See this", 
 "This is a notification", 
 iconURL
 );
  30. 30. API ORIENTAÇÃO DE TELA
  31. 31. // Portrait mode:
 screen.mozLockOrientation("portrait");
 
 /* 
 Possible values:
 "landscape" 
 "portrait"
 "landscape-primary"
 "landscape-secondary"
 "portrait-primary"
 "portrait-secondary"
 */
  32. 32. API VIRAÇÃO
  33. 33. // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 navigator.vibrate([200, 100, 200, 100]);
 
 // Vibrate for 5 seconds
 navigator.vibrate(5000);
 
 // Turn off vibration
 navigator.vibrate(0);
  34. 34. API INFO DE REDE
  35. 35. var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  36. 36. PROXIMIDADE
  37. 37. window.addEventListener("deviceproximity", function (event) {
 // Current device proximity, in centimeters
 console.log(event.value);
 
 // The maximum sensing distance the sensor is 
 // able to report, in centimeters
 console.log(event.max);
 
 // The minimum sensing distance the sensor is 
 // able to report, in centimeters
 console.log(event.min);
 });
  38. 38. API EVENTOS ILUMINAÇÃO
  39. 39. window.addEventListener("devicelight", function (event) {
 // The level of the ambient light in lux
 console.log(event.value);
 });
  40. 40. window.addEventListener("devicelight", function (event) {
 // The lux values for "dim" typically begin below 50,
 // and the values for "bright" begin above 10000
 console.log(event.value);
 });
  41. 41. WEB APIS (PRIVILEGIADAS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  42. 42. DEVICE STORAGE
  43. 43. var deviceStorage = navigator.getDeviceStorage("videos");
  44. 44. // "external", "shared", or "default".
 deviceStorage.type;
 
 // Add a file - returns DOMRequest with file name
 deviceStorage.add(blob);
 
 // Same as .add, with provided name
 deviceStorage.addNamed(blob, name);
 
 // Returns DOMRequest/non-editable File object
 deviceStorage.get(name);
 
 // Returns editable FileHandle object
 deviceStorage.getEditable(name);
 
 // Returns DOMRequest with success or failure
 deviceStorage.delete(name);
 
 // Enumerates files
 deviceStorage.enumerate([directory]);
 
 // Enumerates files as FileHandles
 deviceStorage.enumerateEditable([directory]);
  45. 45. 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 isn't a video, skip it
 if (file.type.substring(0, 6) !== "video/") {
 cursor.continue();
 return;
 }
 
 // If it isn't playable, skip it
 var testplayer = document.createElement("video");
 if (!testplayer.canPlayType(file.type)) {
 cursor.continue();
 return;
 }
 };
  46. 46. API DE CONTATO
  47. 47. var addContact = document.querySelector("#add-contact");
 if (addContact) { 
 addContact.onclick = function () {
 var newContact = new MozActivity({
 name: "new", // Possibly add-contact in future versions
 data: {
 type: "webcontacts/contact",
 params: { // Will possibly move to be direct properties under "data"
 giveName: "Fabio",
 familyName: "Magnoni",
 tel: "+5519988013586",
 email: "fabio@mozilla.com",
 address: "Campinas",
 note: “Se tiver cerveja envolvida, pode entrar em contato :)”,
 company: "Mozilla"
 }
 }
 });
 }
 }
  48. 48. Apps Certificadas = Apps SO
  49. 49. Dialer ! Contacts ! Settings ! SMS ! Web browser ! Gallery ! Video Player ! Music Player ! E-mail (POP, IMAP) ! Calendar Alarm Clock ! Camera ! Notes ! First Run Experience ! Notifications ! Home Screen ! Mozilla Marketplace ! System Updater ! Localization Support
  50. 50. WEB ACTIVITIES
  51. 51. var activity = new MozActivity({
 name: "view", 
 data: {
 type: "image/png", 
 url: ... 
 }
 });
 activity.onsuccess = function () {
 console.log("Showing the image!");
 }; 
 activity.onerror = function () {
 console.log("Can't view the image!");
 };
  52. 52. {
 "activities": {
 "share": {
 "filters": {
 "type": ["image/png", "image/gif"]
 }
 "href": "sharing.html",
 "disposition": "window"
 }
 }
 }
  53. 53. var register = navigator.mozRegisterActivityHandler({
 name: "view", 
 disposition: "inline", 
 filters: {
 type: "image/png"
 }
 });
 
 register.onerror = function () {
 console.log("Failed to register activity");
 }
  54. 54. 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
 });
  55. 55. Como instalar App da Web var install app = navigator.mozApps.install(manifestURL);
 installapp.onsucess = function(data) { //App is installed
 }; 
 installapp.onerror = function() { //App wasn’t installed, info is in // installapp.error.name };
  56. 56. APIs Futuras
  57. 57. Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
  58. 58. https://marketplace.firefox.com/
  59. 59. o/ Documentos e Ferramentas o/
  60. 60. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  61. 61. https://addons.mozilla.org/firefox/addon/firefox-ossimulator/
  62. 62. http://buildingfirefoxos.com/
  63. 63. https://developer.mozilla.org/en-US/docs/WebAPI
  64. 64. https://marketplace.firefox.com/developers/
  65. 65. Mozilla Developer Blog https://hacks.mozilla.org/category/firefox-os/
  66. 66. http://mozilla.github.io/brick/docs.html
  67. 67. Componentes Appbar ! Calendar ! Deck ! Flipbox ! Layout ! Slideshow ! Slider ! Tabbar ! Toggle ! Tooltip
  68. 68. App Maker https://appmaker.mozillalabs.com/
  69. 69. Pedindo Ajuda
  70. 70. https://lists.mozilla.org/listinfo/dev-webapps irc://irc.mozilla.org/ #openwebapps
  71. 71. Fábio Magnoni fabio@mozilla.com @FabioMagnoni @mozhacks
  1. A particular slide catching your eye?

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

×