Uma introdução a Ferramenta Web da Nokia para o desenvolvimento de Web Apps na plataforma Série 40. Apresentação do ambiente de desenvolvimento para edição, empacotamento e deploy de Web Apps. Além disso, uma demonstração de como usar o Web App Simulator para simplificar testes como simular sua localização.

1. Desenvolvimento de
Web Apps
Desenvolvimento, empacotamento e
deploy de Web Apps
Javier Ferreira - INdT
Series 40 Nokia Developer Evangelist
@jzferreira
1

2. Conteúdo
• Plataforma Série 40
• Web Apps
• Nokia Browser
• Mobile Web Library (MWL)
• Nokia Web Tools
• Demo
2

3. O INdT é um Instituto de Pesquisa e
Desenvolvimento independente e sem fins
lucrativos, fundado pela Nokia e focado na
geração de novos conceitos, produtos e
soluções para as áreas relacionadas com
tecnologias móveis e Internet.
É o primeiro content provider do Brasil e da
América do Sul a superar a marca de 2 milhões
de aplicativos baixados na Nokia Store. Nossos
aplicativos foram utilizados por usuários de
celulares Nokia espalhados em +200 países ao
redor do mundo.
http://www.indt.org

4. A Loja Nokia
• Nokia Store é a
loja de aplicativos
da Nokia. A loja
pode ser
acessada tanto
nos celulares
Série 40 quanto
em
computadores
http://store.nokia.com
4

5. 5 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

6. Plataforma Série 40
6

7. Plataforma Série 40 (2)
•1.5 bilhões vendidos
•Plataforma mais usada no mundo
•Estima-se que 675 milhões desses telefones são
usados todos os dias
•A plataforma é uma porta de entrada para usuários
que procuram utilizar o aparelho com Internet e outros
recursos de alta performance com um preço acessível.
7

8. Plataforma Série 40 (3)
• Que tecnologia usar para
desenvolver uma App para o Série 40?
• J2ME
•Web Apps: HTML + CSS + JavaScript
Nokia Asha 303
8

9. Web Apps
• Aplicações Web com
aparência e
comportamento de
aplicações nativas. Uso de
padrões Web e tecnologias
como HTML, CSS e
JavaScript;
Exemplo de Web Apps
HTML
9

10. Web Apps – Mobile Phones
• Tradicionalmente
navegadores Web em
aparelhos convencionais
usam um proxy apenas para
renderizar o conteúdo da
página
• Limita a experiência do
usuário
Exemplo de funcionamento nos
browsers convencionais
10

11. Nokia Browser Série 40
• Duas partes: app client e proxy server
• Proxy server: faz todo o processamento e envia os
dados otimizados ao cliente
• App client: biblioteca MWL (Mobile Web Library)
• Suporte para códigos de interação
11

12. Nokia Briwser Série 40
(2) Tarefas executadas automaticamente pelo Nokia Browser
• Compressão de imagens, otimização do HTML e
executa mudanças na página quando há atualizações
na página Web;
• Comunicação entre cliente e servidor proxy incluem
sessões e persistência;
• Redução de cores para gráficos com um grande
número de 256 cores (8 bits)
• Mais informações:
http://www.developer.nokia.com/Resources/Library/W
eb/#!web-apps/series-40-web-apps/overview.html
12

13. Nokia Browser Série 40
(3) • Padrões suportados:
• HTML 4.01 http://www.w3.org/TR/1999/REC-html401-19991224/
• JavaScript 1.6 https://developer.mozilla.org/en/JavaScript/Reference
e https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6
• CSS Mobile Profile 2 http://www.w3.org/TR/2008/CR-css-mobile-
20081210/
• W3C widget packaging http://www.w3.org/TR/2010/WD-widgets-
20101005/
• SMS URI scheme http://tools.ietf.org/html/rfc5724 (suportado na
versão 1.5 e acima)
• Um subconjunto do CSS3 para transições animadas
http://www.w3.org/TR/2009/WD-css3-animations-20090320/
13

14. Nokia Browser Série 40
(4) http://www.developer.nokia.com/Devices/Device_specifi
cations/?filter1=serieSérie 40webapps
14

15. Mobile Web Library (MWL)
• A biblioteca JavaScript MWL (Mobile Web Library) é
responsável em adicionar interatividade no cliente:
• Modificação de propriedades CSS: adicionar, remover,
trocar classes nos elementos e criar novas classes
• Uso de operações temporizadas
• O processemanto das operações do MWL devem ser
as únicas de JavaScript no cliente;
• Os demais processamentos de código JavaScript são
feitas no proxy de forma otimizada e que gere o
menor tráfico de rede uma vez que o proxy retorna os
dados ao cliente.
15

16. MWL (2)
• Métodos da biblioteca MWL
http://www.developer.nokia.com/Resources/Library/Series_40_web_apps_library/#!technical-library/descriptions-of-mwl-methods.html
16

17. Nokia Web Tools 1.5
• Baseia-se na Plataforma Eclipse;
• Ambiente de desenvolvimento Web;
• Permite: criar, editar, debugar, empacotar e deploy nos
aparelhos da Série 40;
• Suporte a última API MWL;
• Simulador de aparelho com suporte para teste de
Geolocalização.
17

18. Apresentação Nokia Web Tools 1.5
18

19. Deploy no Aparelho
• Bluetooh Launcher v1.5
Bluetooth Launcher v1.5
• Pode ser instalado ao acessar:
http://nokia.ly/btlauncher
Menu telefone Execute Conectado
19

20. Nokia Web Tools 2.0
• Onde fazer o download da versão 1.5?
• Não está mais disponível essa versão
• Dia 25 de junho de 2012 foi disponibilizada versão 2.0
http://www.developer.nokia.com/Develop/Series_40/Series_40_
web_apps/Tools/
• Há grande diferença quanto ao desenvolvimento de Web
Apps?
• Adicionado 3 grandes novidades: upload e download de
arquivo, gerenciador de password e gerenciador de download.
• As mudanças são novos templates e exemplos de código,
validação CSS e HTML, melhora na acuracia para testar sua
app no computador, mais informações:
• http://www.developer.nokia.com/Resources/Library/Series_4
0_web_apps_library/#!index.html;#toc_Whatsnewinthislibrary
20

21. Como instalar Nokia Browser?
• O processo é transparente tanto para o usuário quanto
para o desenvolvedor;
• Três possibilidades:
1. Por meio de download da Loja Nokia
2. Atualização
3. Caso faça o download de uma Web App da loja e o
usuário não tem o Nokia Browser, então
automaticamente é feito o download do Nokia
Browser e em seguida da app.
21

22. Interação
Nokia Developer
http://www.developer.nokia.com
Twitter: @nokiadev_brasil
Grupo Devs Série 40 no Nokia Developer
http://www.developer.nokia.com/Co
mmunity/Discussion/group.php?grou
pid=114
22

23. Obrigado!
Javier Ferreira
javier.ferreira@indt.org.br
@jzferreira
23 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]