Este documento discute como criar aplicativos para dispositivos móveis com diferentes resoluções de tela. Ele explica como estruturar a interface usando CSS para ajustar o layout e trocar arquivos de estilo dependendo da resolução. Além disso, fornece dicas para otimizar imagens e textos para diferentes tamanhos de tela.

1. ECOSYSTEM
1

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=114
2

3. Como montar uma App
em diversas resoluções
de tela
Raymundo Junior
Desenvolvedor – INdT
Evangelista Nokia de Tecnologia
3

4. Conteúdo
• Resolução
• Devices S40
• Estrutura da App
• Arquivos CSS
• Trocando os Arquivos
• Dicas
4

5. Resolução
320x240 240x320 240x400
5

6. Devices S40
C3-00 X3-02 ASHA 311
6

7. Device S40
Nokia Developer
• http://www.developer.nokia.com/Devices/Device_sp
ecifications/?filter1=s40
7

8. Estrutura da App
Nessa estrutura temos as view dispostas uma ao lado da outra
8

9. Estrutura da App
Área visível
no display
Estado inicial da app
9

10. Estrutura da App
Área visível
no display
Estado da app na segunda view
10

11. Estrutura da App
DIV
TABLE
TD TD TD
Visualização da estrutura HTML da página
11

12. Estrutura da App
DIV .container
TABLE .content
TD TD TD
Visualização da estrutura HTML da página
12

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 content
15

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;
content
17

18. Estrutura da App
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/Libra
ry/Series_40_web_apps_library/technical-
library/descriptions-of-mwl-methods/switchclass.html
18

19. Estrutura da App
TABLE .content .view1 .view2 .view3
19

20. Estrutura da App
mwl.switchClass('#content','view*','view1');
TABLE .content .view1
20

21. Estrutura da App
mwl.switchClass('#content','view*','view2');
TABLE .content .view2
21

22. Estrutura da App
mwl.switchClass('#content','view*','view3');
TABLE .content .view3
22 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;
content
24

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 View3
25

26. Arquivos CSS
landscape.css portrait.css
320x240 240x320 / 240x400
26

27. Trocando os arquivos CSS
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" />');
}
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 textos
28

29. Obrigado!
Raymundo Junior
Desenvolvedor – INdT
Evangelista de Tecnologia
E-mail: raymundo.ferreira-junior@indt.org.br
Twitter: twitter.com/justkaws
Site: justkaws.com
Blog: blog.justkaws.com
29