1. DESENVOLVIMENTO DE
APLICATIVOS S40 COM
WEB APPS

2. Por que Apps?
339 milhões de aparelhos vendidos em 2011
5 milhões de downloads por mês
500 mil compras de jogos por ano
LINK: http://www.developer.nokia.com/Distribute/Statistics.xhtml
2

3. Por que S40?
• Preço acessível;
• Processador 1.0 GHz;
• Camera 3.2 megapixels (2048x1536);
• Micro SD 32GB;
• Wireless 802.11b/g/n;
• Tela Capacitiva;
• 2 Chips.
3

4. Tipos de Devices
Non Touch Touch & Type Full Touch
4

5. Resolução dos Devices
Os devices S40 possuem três resoluções:
320x240 240x320 240x400
5

6. Lista Completa dos devices
LINK: http://www.developer.nokia.com/Devices/Device_specifications/?filter1=s40
6

7. Nokia Developer
LINK: http://www.developer.nokia.com/
7

8. Código Exemplo
LINK: http://www.developer.nokia.com/Develop/Web/Code_examples/
8

9. Apps INdT
Algumas Web Apps desenvolvidas pelo INdT para a Plataforma S40.
9

10. Web Apps
Tecnologias básicas de uma Web App:
• HTML
• CSS/CSS3
• JavaScript
• MWL
10

11. Nokia Browser S40
Esquema do Nokia Browser.
11

12. Web Tools
IDE para desenvolvimento Web Apps.
LINK: http://www.developer.nokia.com/Develop/Series_40/Series_40_web_apps/
12

13. Estrutura do Projeto
13

14. Estrutura das Views
Nessa estrutura temos as view dispostas uma ao lado da outra
14

15. Transição
Propriedade CSS3 utilizada para animar a transição da view:
-webkit-transition:margin-left 0.5s linear;
LINK:http://www.webkit.org/blog/138/css-animation/
Método mwl que efetua a troca das classes:
mwl.switchClass('#content','view*','view1');
LINK:http://www.developer.nokia.com/Resources/Library/Series_
40_web_apps_library/technical-library/descriptions-of-mwl-
methods/switchclass.html
15

16. Transição
320x240 240x320 240x400
View1 Margin-left:0px; Margin-left:0px; Margin-left:0px;
View2 Margin-left:-320px; Margin-left:-240px; Margin-left:-240px;
View3 Margin-left:-640px; Margin-left:-480px; Margin-left:-480px;
App no estado View1 App no estado View2 App no estado View3
16

17. Diversas Resoluções
landscape.css portrait.css
320x240 240x320 / 240x400
17

18. Diversas Resoluções
if (screen.width > 240) {
document.write('<link rel="stylesheet"
href="style/landscape.css“ type="text/css" />');
} else {
document.write('<link rel="stylesheet"
href="style/portrait.css" type="text/css" />');
}
18

19. Consumo de API
• Ajax
• JSON
• Service.js
19

20. JSON Viewer
Entrada dos dados JSON.
LINK: http://jsonviewer.stack.hu/
20

21. JSON Viewer
Visualização gráfica dos dados JSON.
LINK: http://jsonviewer.stack.hu/
21

22. Internacionalização
Internacionalização a partir dos locales do device.
22

23. Persistência
Guardar dados:
widget.preferences["key"] = "value";
Recuperar dados salvos:
var val = widget.preferences["key"];
23

24. Xpress Builder
LINK: http://xpresswebapps.nokia.com/
24

25. Xpress Builder
• Não é necessário instalar ferramenta;
• Toda a app é feita num web site;
• Integração com redes sociais;
• Integração com Wordpress, Tumblr, Flickr, Youtube, Picasa;
• Consumo de feeds;
• Fazer chamadas telefonicas, enviar SMS;
• Integração com Nokia Maps.
25

26. Obrigado!
Raymundo Junior
Desenvolvedor – INdT
Evangelista Nokia de Tecnologia
E-mail: ext-raymundo.junior@nokia.com
Twitter: twitter.com/justkaws
Site: justkaws.com
26