Centro de Inovação – Telefônica Brasil20.05.2013Desenvolvendo para FXOSFirefox OS
ÍndiceIntrodução01020304O Início da internetWeb móvelOpen Web Devices05O Firefox OS06HTML507Open Web App0809Tipos de Aplic...
Introdução01
4Centro de InovaçãoTelefônica BrasilIntrodução01David Ruiz@wupsbrhttp://wupsbr.comdavid@telefonicabeta.comDesenvolvedor Ev...
O Início da internet02
6Centro de InovaçãoTelefônica BrasilO Início da internet02
Web móvel03
8Centro de InovaçãoTelefônica BrasilWeb móvelDesde então, a Web está migrando para a mobilidade.03Global mobile traffic as...
9Centro de InovaçãoTelefônica BrasilWeb móvelCom esta mudança de comportamento, novos sistemas operacionaisfechados surgir...
10Centro de InovaçãoTelefônica BrasilWeb móvelApenas duas plataformas dominam mais de 74% do mercado móvel ...03Source: Ga...
11Centro de InovaçãoTelefônica BrasilWeb móvel... passando a controlar ...03O HARDWAREOS BROWSERSOS SISTEMASOPERACIONAISE ...
12Centro de InovaçãoTelefônica BrasilWeb móvel... e impedindo a concorrência.03
13Centro de InovaçãoTelefônica BrasilWeb móvelPara a Web móvel ser realidade, uma série de pontos precisam sersolucionados...
14Centro de InovaçãoTelefônica BrasilWeb móvelCom o HTML5 temos um grande avanço na busca por um frameworkcomum para o des...
Open Web Devices04
16Centro de InovaçãoTelefônica BrasilOpen Web Devices04Para promover o avançado de um ecossistema móvel e aberto, aTelefôn...
17Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2012
18Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2013
19Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2013
O Firefox OS05
21Centro de InovaçãoTelefônica BrasilO Firefox OS@codepo8www.icant.co.uk05Por Christian HeilmannPrincipal technical evange...
22Centro de InovaçãoTelefônica BrasilO Firefox OS05O Fusca dos Smartphones!
23Centro de InovaçãoTelefônica BrasilO Firefox OS• Acessível para todos;05O Fusca dos Smartphones?• Muitas peças intercamb...
24Centro de InovaçãoTelefônica BrasilO Firefox OS05Substituir os Feature Phones!
25Centro de InovaçãoTelefônica BrasilO Firefox OS05
26Centro de InovaçãoTelefônica BrasilO Firefox OS• Sistema operacional de nível inferior, que consiste emum kernel Linux e...
27Centro de InovaçãoTelefônica BrasilO Firefox OS• O tempo de execução do aplicativo. O mecanismo derenderização no Firefo...
28Centro de InovaçãoTelefônica BrasilO Firefox OS• A interface de usuário, totalmente construída por APIsde HTML5 e Open W...
HTML506
30Centro de InovaçãoTelefônica BrasilHTML506
31Centro de InovaçãoTelefônica BrasilHTML506http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
32Centro de InovaçãoTelefônica BrasilHTML506
Open Web App07
34Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos1• Conhecimento em HTML5, CSS & JavaScript.Manifesto2• Defini...
35Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos• Aproveite o website/aplicativo existente ou desenvolva inte...
36Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos
37Centro de InovaçãoTelefônica BrasilOpen Web App07Manifesto• Crie um arquivo com extensão .webapp• Defina o MIME Type par...
38Centro de InovaçãoTelefônica BrasilOpen Web App07{"version": "1.0","name": "MozillaBall","description": "Exciting Open W...
39Centro de InovaçãoTelefônica BrasilOpen Web App07Publicaçãohttps://marketplace.firefox.com/developers/
40Centro de InovaçãoTelefônica BrasilOpen Web App07Publicaçãohttps://marketplace.firefox.com/developers/
41Centro de InovaçãoTelefônica BrasilOpen Web App07Publicação• Crie um arquivo com extensão .webapp• Defina o MIME Type pa...
Tipos deAplicativos08
43Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08Web Content1• Aplicativo web online.Installed Web App2• Aplicat...
44Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08"permissions": {"contacts": {"description": "Required for autoc...
45Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
ReferênciasImportantes09
47Centro de InovaçãoTelefônica BrasilDesenvolvendo para Firefox OSLinks importantes09NegociosDocumentaçãoeApresentações1 •...
48Centro de InovaçãoTelefônica BrasilDesenvolvendo para Firefox OSDEMONSTRAÇÃO!09
Contato10
50Centro de InovaçãoTelefônica BrasilContato10@wupsbrhttp://wupsbr.comdavid@telefonicabeta.comDavid RuizDesenvolvedor Evan...
51Centro de InovaçãoTelefônica Brasil
Próximos SlideShares
Carregando em…5
×

Desenvolvendo para Firefox OS

1.165 visualizações

Publicada em

O objetivo desta apresentação é de demonstrar toda a história, objetivo e ferramentas para começar o desenvolvimento de novos aplicativos para Firefox OS.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Desenvolvendo para Firefox OS

  1. 1. Centro de Inovação – Telefônica Brasil20.05.2013Desenvolvendo para FXOSFirefox OS
  2. 2. ÍndiceIntrodução01020304O Início da internetWeb móvelOpen Web Devices05O Firefox OS06HTML507Open Web App0809Tipos de AplicativosReferênciasImportantes10Contato
  3. 3. Introdução01
  4. 4. 4Centro de InovaçãoTelefônica BrasilIntrodução01David Ruiz@wupsbrhttp://wupsbr.comdavid@telefonicabeta.comDesenvolvedor Evangelista @ Telefônica Digital
  5. 5. O Início da internet02
  6. 6. 6Centro de InovaçãoTelefônica BrasilO Início da internet02
  7. 7. Web móvel03
  8. 8. 8Centro de InovaçãoTelefônica BrasilWeb móvelDesde então, a Web está migrando para a mobilidade.03Global mobile traffic as % of Total Internet Traffic, 12/08 – 5/12Sources: StatCounter Global StatsMary Meeker - KPBC1% in 12/094% in 12/1010% in 5/12
  9. 9. 9Centro de InovaçãoTelefônica BrasilWeb móvelCom esta mudança de comportamento, novos sistemas operacionaisfechados surgiram.03Internet
  10. 10. 10Centro de InovaçãoTelefônica BrasilWeb móvelApenas duas plataformas dominam mais de 74% do mercado móvel ...03Source: Gartner, Feb 2012Android + iOS74.7% of the smarpthone OS Market50,9%23,8% 11,7% 8,8% 4,8%AndroidiOS Symbian RIM Others
  11. 11. 11Centro de InovaçãoTelefônica BrasilWeb móvel... passando a controlar ...03O HARDWAREOS BROWSERSOS SISTEMASOPERACIONAISE OS ECOSSISTEMASDE APLICATIVOS
  12. 12. 12Centro de InovaçãoTelefônica BrasilWeb móvel... e impedindo a concorrência.03
  13. 13. 13Centro de InovaçãoTelefônica BrasilWeb móvelPara a Web móvel ser realidade, uma série de pontos precisam sersolucionados:03Mecanismos de Monetização para Web AppsMecanismos de Descoberta de Web AppsPadrões de Web MóvelSuporte a Múltiplas PlataformasPerformance nos Browsers Móveis
  14. 14. 14Centro de InovaçãoTelefônica BrasilWeb móvelCom o HTML5 temos um grande avanço na busca por um frameworkcomum para o desenvolvimento de páginas web universais entredesktop e mobile.03
  15. 15. Open Web Devices04
  16. 16. 16Centro de InovaçãoTelefônica BrasilOpen Web Devices04Para promover o avançado de um ecossistema móvel e aberto, aTelefônica inicia uma parceria com a Fundação Mozilla por possuir aexperiência necessária para transformar novamente a Web.Criando assim o que chamamos deOpen Web Devices baseados no Firefox OSEnable a mobile browser to access all devicescapabilities extending HTML5 standard to achieve thisImprove mobile Web performance via a lighter OS and fastbrowser to provide the best mobile Web apps experienceOffer Web app discoverability and monetization capabilitiesfor developers via operator billingCreate a reference implementation to drive advancemobile Web standards in other implementations
  17. 17. 17Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2012
  18. 18. 18Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2013
  19. 19. 19Centro de InovaçãoTelefônica BrasilOpen Web Devices04MOBILE WORLD CONGRESS 2013
  20. 20. O Firefox OS05
  21. 21. 21Centro de InovaçãoTelefônica BrasilO Firefox OS@codepo8www.icant.co.uk05Por Christian HeilmannPrincipal technical evangelist @ Mozilla
  22. 22. 22Centro de InovaçãoTelefônica BrasilO Firefox OS05O Fusca dos Smartphones!
  23. 23. 23Centro de InovaçãoTelefônica BrasilO Firefox OS• Acessível para todos;05O Fusca dos Smartphones?• Muitas peças intercambiáveis – Inclusão e atualização fácil;• Construído sobre um motor confiável que não transborda;• Transformando mobilidade e independência acessível.• Baseado em uma tecnologia resistente;
  24. 24. 24Centro de InovaçãoTelefônica BrasilO Firefox OS05Substituir os Feature Phones!
  25. 25. 25Centro de InovaçãoTelefônica BrasilO Firefox OS05
  26. 26. 26Centro de InovaçãoTelefônica BrasilO Firefox OS• Sistema operacional de nível inferior, que consiste emum kernel Linux e HAL (Hardware Abstraction Layer).• Possibilidade de expor alguma coisa do hardware para oGecko.05Gonk
  27. 27. 27Centro de InovaçãoTelefônica BrasilO Firefox OS• O tempo de execução do aplicativo. O mecanismo derenderização no Firefox para HTML5, CSS e JavaScript.Implementa uma série de APIs.05Gecko
  28. 28. 28Centro de InovaçãoTelefônica BrasilO Firefox OS• A interface de usuário, totalmente construída por APIsde HTML5 e Open Web.05Gaia
  29. 29. HTML506
  30. 30. 30Centro de InovaçãoTelefônica BrasilHTML506
  31. 31. 31Centro de InovaçãoTelefônica BrasilHTML506http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
  32. 32. 32Centro de InovaçãoTelefônica BrasilHTML506
  33. 33. Open Web App07
  34. 34. 34Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos1• Conhecimento em HTML5, CSS & JavaScript.Manifesto2• Definir o arquivo de configuração (manifesto) do aplicativo.Publicação3• Executa-lo no simulador ou gerar o pacote e enviar para o Marketplace.
  35. 35. 35Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos• Aproveite o website/aplicativo existente ou desenvolva inteiramentedo zero;• Utilize recursos do HTML5 como LocalStorage, ManifestoOffline, IndexDB e WebAPIs conforme a necessidade.• Utilize layout responsivo para adaptar-se para os vários tamanhos erotações de telas.
  36. 36. 36Centro de InovaçãoTelefônica BrasilOpen Web App07Requisitos
  37. 37. 37Centro de InovaçãoTelefônica BrasilOpen Web App07Manifesto• Crie um arquivo com extensão .webapp• Defina o MIME Type para: application/x-web-app-manifest+json• Evite dor de cabeça! Sempre ao modificar o arquivo verifique se omesmo está correto: http://appmanifest.org/
  38. 38. 38Centro de InovaçãoTelefônica BrasilOpen Web App07{"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/"}}},"default_locale": "en"}
  39. 39. 39Centro de InovaçãoTelefônica BrasilOpen Web App07Publicaçãohttps://marketplace.firefox.com/developers/
  40. 40. 40Centro de InovaçãoTelefônica BrasilOpen Web App07Publicaçãohttps://marketplace.firefox.com/developers/
  41. 41. 41Centro de InovaçãoTelefônica BrasilOpen Web App07Publicação• Crie um arquivo com extensão .webapp• Defina o MIME Type para: application/x-web-app-manifest+json• Evite dor de cabeça! Sempre ao modificar o arquivo verifique se omesmo está correto: http://appmanifest.org/
  42. 42. Tipos deAplicativos08
  43. 43. 43Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08Web Content1• Aplicativo web online.Installed Web App2• Aplicativo empacotado padrão.Privileged Web App3• Aplicativo empacotado com acesso privilegiado.Certified Web App4• Aplicativo crítico do aparelho.Aplicativos Hospedados vs Armazenados
  44. 44. 44Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08"permissions": {"contacts": {"description": "Required for autocomple in the sharescreen","access": "readcreate"},"alarms": {"description": "Required to schedule notifications"} }Solicitando permissões no manifesto
  45. 45. 45Centro de InovaçãoTelefônica BrasilTipos de Aplicativos08https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
  46. 46. ReferênciasImportantes09
  47. 47. 47Centro de InovaçãoTelefônica BrasilDesenvolvendo para Firefox OSLinks importantes09NegociosDocumentaçãoeApresentações1 • https://marketplace.firefox.com/developers/• https://developer.mozilla.org/pt-BR/docs/Mozilla/Firefox_OS• http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers• http://www.youtube.com/user/mozhacksFerramentaseGrupos2Repositórios3• https://hacks.mozilla.org/2013/03/firefox-os-simulator-previewing-version-3-0/• https://addons.mozilla.org/pt-BR/firefox/addon/firefox-os-simulator/• https://www.facebook.com/groups/ffosbr/• irc.mozilla.org / #b2g #gaia #introduction #developers• https://github.com/robnyman/Firefox-OS-Boilerplate-App• https://github.com/Jaxo/fxosstub• https://github.com/mozilla-b2g/B2G• https://github.com/mozilla-b2g/gaiaNegociosWebAPIs4• https://wiki.mozilla.org/WebAPI• https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status• http://www.slideshare.net/robnyman/web-apis-apps-mozilla
  48. 48. 48Centro de InovaçãoTelefônica BrasilDesenvolvendo para Firefox OSDEMONSTRAÇÃO!09
  49. 49. Contato10
  50. 50. 50Centro de InovaçãoTelefônica BrasilContato10@wupsbrhttp://wupsbr.comdavid@telefonicabeta.comDavid RuizDesenvolvedor Evangelista @ Telefônica Digital
  51. 51. 51Centro de InovaçãoTelefônica Brasil

×