Desenvolvendo para Firefox OS

Centro de Inovação – Telefônica Brasil
20.05.2013
Desenvolvendo para FXOS
Firefox OS

Índice
Introdução
01
02
03
04
O Início da internet
Web móvel
Open Web Devices
05
O Firefox OS
06
HTML5
07
Open Web App
08
09
Tipos de Aplicativos
Referências
Importantes
10
Contato

4
Centro de Inovação
Telefônica Brasil
Introdução01
David Ruiz
@wupsbr
http://wupsbr.com
david@telefonicabeta.com
Desenvolvedor Evangelista @ Telefônica Digital

6
Telefônica Brasil
O Início da internet02

8
Telefônica Brasil
Web móvel
Desde então, a Web está migrando para a mobilidade.
03
Global mobile traffic as % of Total Internet Traffic, 12/08 – 5/12
Sources: StatCounter Global Stats
Mary Meeker - KPBC
1% in 12/09
4% in 12/10
10% in 5/12

9
Telefônica Brasil
Web móvel
Com esta mudança de comportamento, novos sistemas operacionais
fechados surgiram.
03
Internet

10
Telefônica Brasil
Web móvel
Apenas duas plataformas dominam mais de 74% do mercado móvel ...
03
Source: Gartner, Feb 2012
Android + iOS
74.7% of the smarpthone OS Market
50,9%
23,8% 11,7% 8,8% 4,8%Android
iOS Symbian RIM Others

11
Telefônica Brasil
Web móvel
... passando a controlar ...
03
O HARDWARE
OS BROWSERS
OS SISTEMAS
OPERACIONAIS
E OS ECOSSISTEMAS
DE APLICATIVOS

12
Telefônica Brasil
Web móvel
... e impedindo a concorrência.
03

13
Telefônica Brasil
Web móvel
Para a Web móvel ser realidade, uma série de pontos precisam ser
solucionados:
03
Mecanismos de Monetização para Web Apps
Mecanismos de Descoberta de Web Apps
Padrões de Web Móvel
Suporte a Múltiplas Plataformas
Performance nos Browsers Móveis

14
Telefônica Brasil
Web móvel
Com o HTML5 temos um grande avanço na busca por um framework
comum para o desenvolvimento de páginas web universais entre
desktop e mobile.
03

16
Telefônica Brasil
Open Web Devices04
Para promover o avançado de um ecossistema móvel e aberto, a
Telefônica inicia uma parceria com a Fundação Mozilla por possuir a
experiência necessária para transformar novamente a Web.
Criando assim o que chamamos de
Open Web Devices baseados no Firefox OS
Enable a mobile browser to access all devices
capabilities extending HTML5 standard to achieve this
Improve mobile Web performance via a lighter OS and fast
browser to provide the best mobile Web apps experience
Offer Web app discoverability and monetization capabilities
for developers via operator billing
Create a reference implementation to drive advance
mobile Web standards in other implementations

17
Telefônica Brasil
Open Web Devices04
MOBILE WORLD CONGRESS 2012

18
Telefônica Brasil
Open Web Devices04

19
Telefônica Brasil
Open Web Devices04

21
Telefônica Brasil
O Firefox OS
@codepo8
www.icant.co.uk
05
Por Christian Heilmann
Principal technical evangelist @ Mozilla

22
Telefônica Brasil
O Firefox OS05
O Fusca dos Smartphones!

23
Telefônica Brasil
O Firefox OS
• Acessível para todos;
05
O 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
Telefônica Brasil
O Firefox OS05
Substituir os Feature Phones!

25
Telefônica Brasil
O Firefox OS05

26
Telefônica Brasil
O Firefox OS
• Sistema operacional de nível inferior, que consiste em
um kernel Linux e HAL (Hardware Abstraction Layer).
• Possibilidade de expor alguma coisa do hardware para o
Gecko.
05
Gonk

27
Telefônica Brasil
O Firefox OS
• O tempo de execução do aplicativo. O mecanismo de
renderização no Firefox para HTML5, CSS e JavaScript.
Implementa uma série de APIs.
05
Gecko

28
Telefônica Brasil
O Firefox OS
• A interface de usuário, totalmente construída por APIs
de HTML5 e Open Web.
05
Gaia

30
Telefônica Brasil
HTML506

31
Telefônica Brasil
HTML506
http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/

32
Telefônica Brasil
HTML506

34
Telefônica Brasil
Open Web App07
Requisitos
1
• Conhecimento em HTML5, CSS & JavaScript.
Manifesto
2
• Definir o arquivo de configuração (manifesto) do aplicativo.
Publicação
3
• Executa-lo no simulador ou gerar o pacote e enviar para o Marketplace.

35
Telefônica Brasil
Open Web App07
Requisitos
• Aproveite o website/aplicativo existente ou desenvolva inteiramente
do zero;
• Utilize recursos do HTML5 como LocalStorage, Manifesto
Offline, IndexDB e WebAPIs conforme a necessidade.
• Utilize layout responsivo para adaptar-se para os vários tamanhos e
rotações de telas.

36
Telefônica Brasil
Open Web App07
Requisitos

37
Telefônica Brasil
Open Web App07
Manifesto
• 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 o
mesmo está correto: http://appmanifest.org/

38
Telefônica Brasil
Open 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
Telefônica Brasil
Open Web App07
Publicação
https://marketplace.firefox.com/developers/

40
Telefônica Brasil
Open Web App07
Publicação
https://marketplace.firefox.com/developers/

41
Telefônica Brasil
Open Web App07
Publicaçã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 o
mesmo está correto: http://appmanifest.org/

43
Telefônica Brasil
Tipos de Aplicativos08
Web Content
1
• Aplicativo web online.
Installed Web App
2
• Aplicativo empacotado padrão.
Privileged Web App
3
• Aplicativo empacotado com acesso privilegiado.
Certified Web App
4
• Aplicativo crítico do aparelho.
Aplicativos Hospedados vs Armazenados

44
Telefônica Brasil
"permissions": {
"contacts": {
"description": "Required for autocomple in the share
screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
} }
Solicitando permissões no manifesto

45
Telefônica Brasil
https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions

47
Telefônica Brasil
Desenvolvendo para Firefox OS
Links importantes
09
Negocios
Documentação
e
Apresentações
1 • 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/mozhacks
Ferramentas
e
Grupos
2
Repositórios
3
• 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/gaia
Negocios
WebAPIs
4
• 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
Telefônica Brasil
Desenvolvendo para Firefox OS
DEMONSTRAÇÃO!
09

50
Telefônica Brasil
Contato10
@wupsbr
http://wupsbr.com
david@telefonicabeta.com
David Ruiz
Desenvolvedor Evangelista @ Telefônica Digital

51
Telefônica Brasil

Desenvolvendo para Firefox OS

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Desenvolvendo para Firefox OS

Semelhante a Desenvolvendo para Firefox OS (20)

Mais de David Ruiz

Mais de David Ruiz (19)

Desenvolvendo para Firefox OS

Notas do Editor