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
Upcoming SlideShare
Loading in …5
×

Desenvolvendo para Firefox OS

1,025 views
963 views

Published on

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.

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

No Downloads
Views
Total views
1,025
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Bem no início da web tínhamos uma grande variedade de ecossistemas abertos e fechados em torno do PC.Por quase 10 anos o Internet Explorer dominou o mercado.Em 2004, o Firefox, da Fundação Mozilla, apareceu e transformou o panorama da Web.Com a constante inovação promovida pela Fundação Mozilla, novos navegadores surgem mudando completamente o cenário.Graças a esta mudança, a Web transformou-se em um ecossistema aberto e promissor.
  • 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

    ×