Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps

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

Nokia Developer

7

LINK: http://www.developer.nokia.com/

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: [email protected]

Twitter: twitter.com/justkaws

Site: justkaws.com