Your SlideShare is downloading. ×
0
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Como montar uma App em diversas resoluções de tela
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Como montar uma App em diversas resoluções de tela

978

Published on

Web Apps é um modo fácil e rápido de se construir aplicações para Série 40, entretanto existe o desafio de fazer uma app suportar diversas resoluções de tela. Este webinar tem como objetivo mostrar …

Web Apps é um modo fácil e rápido de se construir aplicações para Série 40, entretanto existe o desafio de fazer uma app suportar diversas resoluções de tela. Este webinar tem como objetivo mostrar métodos e boas práticas de construção de Web Apps Série 40 com suporte para várias resoluções.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
978
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
1
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. ECOSYSTEM1
  • 2. Interação Nokia Developer http://www.developer.nokia.com Twitter: @nokiadev_brasil Grupo Devs S40 no Nokia Developer http://www.developer.nokia.com/Co mmunity/Discussion/group.php?grou pid=1142
  • 3. Como montar uma Appem diversas resoluçõesde telaRaymundo JuniorDesenvolvedor – INdTEvangelista Nokia de Tecnologia3
  • 4. Conteúdo• Resolução• Devices S40• Estrutura da App• Arquivos CSS• Trocando os Arquivos• Dicas4
  • 5. Resolução 320x240 240x320 240x4005
  • 6. Devices S40 C3-00 X3-02 ASHA 3116
  • 7. Device S40Nokia Developer• http://www.developer.nokia.com/Devices/Device_sp ecifications/?filter1=s407
  • 8. Estrutura da App Nessa estrutura temos as view dispostas uma ao lado da outra8
  • 9. Estrutura da App Área visível no display Estado inicial da app9
  • 10. Estrutura da App Área visível no display Estado da app na segunda view10
  • 11. Estrutura da App DIV TABLE TD TD TD Visualização da estrutura HTML da página11
  • 12. Estrutura da App DIV .container TABLE .content TD TD TD Visualização da estrutura HTML da página12
  • 13. Estrutura da App<div id="container" class="container"> <table id="content" class="content" cellpadding="0"cellspacing="0" border="0"> <tr> <td></td> <td></td> <td></td> </tr> </table></div>13
  • 14. Estrutura da App 320x240 240x320 240x400 .container width:320px; width:240px; width:240px; overflow:hidden; overflow:hidden; overflow:hidden; .content width:960px; width:720px; width:720px;14
  • 15. Estrutura da App DIV .container TABLE .content TD TD TD TABLE .header TABLE .header TABLE .header DIV .view- DIV .view- DIV .view- content content content15
  • 16. Estrutura da App<div id="container" class="container"> <table id="content" class="content" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> </tr> </table></div> 16
  • 17. Estrutura da App 320x240 240x320 240x400 .container width:320px; width:240px; width:240px; overflow:hidden; overflow:hidden; overflow:hidden; .content width:960px; width:720px; width:720px; .header width:320px; width:240px; width:240px; height:40px; height:40px; height:40px; .view- width:320px; width:320px; width:320px; content17
  • 18. Estrutura da AppPropriedade CSS3 utilizada para animar a transição daview:-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.html18
  • 19. Estrutura da App TABLE .content .view1 .view2 .view319
  • 20. Estrutura da App mwl.switchClass(#content,view*,view1); TABLE .content .view120
  • 21. Estrutura da App mwl.switchClass(#content,view*,view2); TABLE .content .view221
  • 22. Estrutura da App mwl.switchClass(#content,view*,view3); TABLE .content .view322 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
  • 23. Estrutura da App<div id="container" class="container"> <table id="content" class="content view1" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> <td> <table class=“header"></table> <div class=“view-content" ></div> </td> </tr> </table></div> 23
  • 24. Estrutura da App 320x240 240x320 240x400 .container -webkit- -webkit- -webkit- transition:margin- transition:margin- transition:margin left 0.5s linear; left 0.5s linear; -left 0.5s linear; overflow:hidden; overflow:hidden; overflow:hidden; width:320px; width:240px; width:240px; .content width:960px; width:720px; width:720px; .header width:320px; width:240px; width:240px; height:40px; height:40px; height:40px; .view- width:320px; width:320px; width:320px; content24
  • 25. Estrutura da App 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 View325
  • 26. Arquivos CSS landscape.css portrait.css 320x240 240x320 / 240x40026
  • 27. Trocando os arquivos CSSif (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" />);}27
  • 28. Dicas• Criar Layout que necessite de poucos ajustes• Usar poucas imagens na App• Recortar imagem nas dimensões finais• Redimensionar imagens proporcionalmente• Usar o método substr do javascript para encurtar textos28
  • 29. Obrigado!Raymundo JuniorDesenvolvedor – INdTEvangelista de TecnologiaE-mail: raymundo.ferreira-junior@indt.org.brTwitter: twitter.com/justkawsSite: justkaws.comBlog: blog.justkaws.com29

×