Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps

  • 747 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
747
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DESENVOLVIMENTO DEAPLICATIVOS S40 COMWEB 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.xhtml2
  • 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 Touch4
  • 5. Resolução dos DevicesOs devices S40 possuem três resoluções: 320x240 240x320 240x4005
  • 6. Lista Completa dos devices LINK: http://www.developer.nokia.com/Devices/Device_specifications/?filter1=s406
  • 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 • MWL10
  • 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 Projeto13
  • 14. Estrutura das Views Nessa estrutura temos as view dispostas uma ao lado da outra14
  • 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. 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. Diversas Resoluções landscape.css portrait.css 320x240 240x320 / 240x40017
  • 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.js19
  • 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çãoInternacionalizaçã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.com26