ECOSYSTEM1
Interação                             Nokia Developer            http://www.developer.nokia.com                   Twitter:...
Como montar uma Appem diversas resoluçõesde telaRaymundo JuniorDesenvolvedor – INdTEvangelista Nokia de Tecnologia3
Conteúdo• Resolução• Devices S40• Estrutura da App• Arquivos CSS• Trocando os Arquivos• Dicas4
Resolução    320x240   240x320   240x4005
Devices S40    C3-00   X3-02   ASHA 3116
Device S40Nokia Developer• http://www.developer.nokia.com/Devices/Device_sp  ecifications/?filter1=s407
Estrutura da App    Nessa estrutura temos as view dispostas uma ao lado da outra8
Estrutura da App    Área visível    no display                   Estado inicial da app9
Estrutura da App               Área visível               no display       Estado da app na segunda view10
Estrutura da App     DIV      TABLE           TD                 TD                   TD                Visualização da es...
Estrutura da App     DIV .container      TABLE .content           TD                   TD                   TD            ...
Estrutura da App<div id="container" class="container">      <table id="content" class="content" cellpadding="0"cellspacing...
Estrutura da App                      320x240            240x320           240x400     .container   width:320px;       wid...
Estrutura da App     DIV .container      TABLE .content           TD             TD             TD       TABLE .header   T...
Estrutura da App<div id="container" class="container">       <table id="content" class="content" cellpadding="0" cellspaci...
Estrutura da App                      320x240            240x320           240x400     .container   width:320px;       wid...
Estrutura da AppPropriedade CSS3 utilizada para animar a transição daview:-webkit-transition:margin-left 0.5s linear;LINK:...
Estrutura da App     TABLE .content   .view1 .view2 .view319
Estrutura da App             mwl.switchClass(#content,view*,view1);     TABLE .content .view120
Estrutura da App             mwl.switchClass(#content,view*,view2);     TABLE .content .view221
Estrutura da App                               mwl.switchClass(#content,view*,view3);            TABLE .content .view322  ...
Estrutura da App<div id="container" class="container">       <table id="content" class="content view1" cellpadding="0" cel...
Estrutura da App                      320x240              240x320              240x400     .container   -webkit-         ...
Estrutura da App                      320x240              240x320             240x400      View1     Margin-left:0px;    ...
Arquivos CSS     landscape.css      portrait.css        320x240      240x320 / 240x40026
Trocando os arquivos CSSif (screen.width > 240) {     document.write(<link rel="stylesheet"href="style/landscape.css“ type...
Dicas•    Criar Layout que necessite de poucos ajustes•    Usar poucas imagens na App•    Recortar imagem nas dimensões fi...
Obrigado!Raymundo JuniorDesenvolvedor – INdTEvangelista de TecnologiaE-mail: raymundo.ferreira-junior@indt.org.brTwitter: ...
Upcoming SlideShare
Loading in...5
×

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

993

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 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
993
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. ECOSYSTEM1
  2. 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. 3. Como montar uma Appem diversas resoluçõesde telaRaymundo JuniorDesenvolvedor – INdTEvangelista Nokia de Tecnologia3
  4. 4. Conteúdo• Resolução• Devices S40• Estrutura da App• Arquivos CSS• Trocando os Arquivos• Dicas4
  5. 5. Resolução 320x240 240x320 240x4005
  6. 6. Devices S40 C3-00 X3-02 ASHA 3116
  7. 7. Device S40Nokia Developer• http://www.developer.nokia.com/Devices/Device_sp ecifications/?filter1=s407
  8. 8. Estrutura da App Nessa estrutura temos as view dispostas uma ao lado da outra8
  9. 9. Estrutura da App Área visível no display Estado inicial da app9
  10. 10. Estrutura da App Área visível no display Estado da app na segunda view10
  11. 11. Estrutura da App DIV TABLE TD TD TD Visualização da estrutura HTML da página11
  12. 12. Estrutura da App DIV .container TABLE .content TD TD TD Visualização da estrutura HTML da página12
  13. 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. 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. 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. 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. 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. 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. 19. Estrutura da App TABLE .content .view1 .view2 .view319
  20. 20. Estrutura da App mwl.switchClass(#content,view*,view1); TABLE .content .view120
  21. 21. Estrutura da App mwl.switchClass(#content,view*,view2); TABLE .content .view221
  22. 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. 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. 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. 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. 26. Arquivos CSS landscape.css portrait.css 320x240 240x320 / 240x40026
  27. 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. 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. 29. Obrigado!Raymundo JuniorDesenvolvedor – INdTEvangelista de TecnologiaE-mail: raymundo.ferreira-junior@indt.org.brTwitter: twitter.com/justkawsSite: justkaws.comBlog: blog.justkaws.com29
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×