DESENVOLVIMENTO DEAPLICATIVOS S40 COMWEB APPS
Por que Apps?        339 milhões de aparelhos vendidos em 2011        5 milhões de downloads por mês        500 mil compra...
Por que S40?    •   Preço acessível;    •   Processador 1.0 GHz;    •   Camera 3.2 megapixels (2048x1536);    •   Micro SD...
Tipos de Devices    Non Touch   Touch & Type   Full Touch4
Resolução dos DevicesOs devices S40 possuem três resoluções:         320x240                   240x320   240x4005
Lista Completa dos devices    LINK: http://www.developer.nokia.com/Devices/Device_specifications/?filter1=s406
Nokia Developer       LINK: http://www.developer.nokia.com/7
Código Exemplo    LINK: http://www.developer.nokia.com/Develop/Web/Code_examples/8
Apps INdT    Algumas Web Apps desenvolvidas pelo INdT para a Plataforma S40.9
Web Apps     Tecnologias básicas de uma Web App:        • HTML        • CSS/CSS3        • JavaScript        • MWL10
Nokia Browser S40     Esquema do Nokia Browser.11
Web Tools IDE para desenvolvimento Web Apps.LINK: http://www.developer.nokia.com/Develop/Series_40/Series_40_web_apps/12
Estrutura do Projeto13
Estrutura das Views     Nessa estrutura temos as view dispostas uma ao lado da outra14
Transição     Propriedade CSS3 utilizada para animar a transição da view:     -webkit-transition:margin-left 0.5s linear; ...
Transição                      320x240              240x320             240x400      View1     Margin-left:0px;      Margi...
Diversas Resoluções     landscape.css      portrait.css        320x240      240x320 / 240x40017
Diversas Resoluções     if (screen.width > 240) {          document.write(<link rel="stylesheet"     href="style/landscape...
Consumo de API     • Ajax     • JSON     • Service.js19
JSON Viewer Entrada dos dados JSON.                      LINK: http://jsonviewer.stack.hu/20
JSON Viewer Visualização gráfica dos dados JSON.                     LINK: http://jsonviewer.stack.hu/21
InternacionalizaçãoInternacionalização a partir dos locales do device.22
Persistência     Guardar dados:     widget.preferences["key"] = "value";     Recuperar dados salvos:     var val = widget....
Xpress Builder       LINK: http://xpresswebapps.nokia.com/24
Xpress Builder     • Não é necessário instalar ferramenta;     • Toda a app é feita num web site;     • Integração com red...
Obrigado!     Raymundo Junior     Desenvolvedor – INdT     Evangelista Nokia de Tecnologia     E-mail: ext-raymundo.junior...
Upcoming SlideShare
Loading in …5
×

Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps

1,021 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,021
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps

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

×