Post on 07-Jul-2015
DESENVOLVIMENTO DE APLICATIVOS S40 COM WEB APPS
Por que Apps?
2
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
Por que S40?
3
• 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.
Tipos de Devices
4
Non Touch Touch & Type Full Touch
Resolução dos Devices
5
320x240 240x320 240x400
Os devices S40 possuem três resoluções:
Lista Completa dos devices
6
LINK: http://www.developer.nokia.com/Devices/Device_specifications/?filter1=s40
Código Exemplo
8
LINK: http://www.developer.nokia.com/Develop/Web/Code_examples/
Apps INdT
9
Algumas Web Apps desenvolvidas pelo INdT para a Plataforma S40.
Web Apps
10
Tecnologias básicas de uma Web App:
• HTML
• CSS/CSS3
• JavaScript
• MWL
Nokia Browser S40
11
Esquema do Nokia Browser.
Web Tools
12
LINK: http://www.developer.nokia.com/Develop/Series_40/Series_40_web_apps/
IDE para desenvolvimento Web Apps.
Estrutura do Projeto
13
Estrutura das Views
14
Nessa estrutura temos as view dispostas uma ao lado da outra
Transição
15
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
Transição
16
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
Diversas Resoluções
17
landscape.css 320x240
portrait.css 240x320 / 240x400
Diversas Resoluções
18
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" />');
}
Consumo de API
19
• Ajax
• JSON
• Service.js
JSON Viewer
20
LINK: http://jsonviewer.stack.hu/
Entrada dos dados JSON.
JSON Viewer
21
LINK: http://jsonviewer.stack.hu/
Visualização gráfica dos dados JSON.
Internacionalização
22
Internacionalização a partir dos locales do device.
Persistência
23
Guardar dados:
widget.preferences["key"] = "value";
Recuperar dados salvos:
var val = widget.preferences["key"];
Xpress Builder
24
LINK: http://xpresswebapps.nokia.com/
Xpress Builder
25
• 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.
Obrigado!
26
Raymundo Junior Desenvolvedor – INdT Evangelista Nokia de Tecnologia
E-mail: ext-raymundo.junior@nokia.com
Twitter: twitter.com/justkaws
Site: justkaws.com