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

1

ECOSYSTEM

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?groupid=114

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

3

Raymundo Junior Desenvolvedor – INdT

Evangelista Nokia de Tecnologia

4

• Resolução

• Devices S40

• Estrutura da App

• Arquivos CSS

• Trocando os Arquivos

• Dicas

Conteúdo

5

Resolução

320x240 240x320 240x400

Devices S40

6

C3-00 X3-02 ASHA 311

Device S40

7

Nokia Developer • http://www.developer.nokia.com/Devices/Device_sp

ecifications/?filter1=s40

8

Estrutura da App

Nessa estrutura temos as view dispostas uma ao lado da outra

9

Estrutura da App

Área visível no display

Estado inicial da app

10

Estrutura da App

Área visível no display

Estado da app na segunda view

11

Estrutura da App

TD TD TD

TABLE

DIV

Visualização da estrutura HTML da página

12

Estrutura da App

TD TD TD

TABLE .content

DIV .container

Visualização da estrutura HTML da página

13

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

Estrutura da App

14

320x240 240x320 240x400

.container width:320px; overflow:hidden;

width:240px; overflow:hidden;

width:240px; overflow:hidden;

.content width:960px; width:720px; width:720px;

Estrutura da App

15

Estrutura da App

TD TD TD

TABLE .content

DIV .container

TABLE .header TABLE .header TABLE .header

DIV .view-content

DIV .view-content

DIV .view-content

16

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

Estrutura da App

17

320x240 240x320 240x400

.container width:320px; overflow:hidden;

width:240px; overflow:hidden;

width:240px; overflow:hidden;

.content width:960px; width:720px; width:720px;

.header width:320px; height:40px;

width:240px; height:40px;

width:240px; height:40px;

.view-content

width:320px; width:320px; width:320px;

Estrutura da App

18

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.html

Estrutura da App

19

Estrutura da App

TABLE .content .view1 .view2 .view3

20

Estrutura da App

TABLE .content .view1

mwl.switchClass('#content','view*','view1');

21

Estrutura da App

TABLE .content .view2

mwl.switchClass('#content','view*','view2');

22 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

Estrutura da App

TABLE .content .view3

mwl.switchClass('#content','view*','view3');

23

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

Estrutura da App

24

320x240 240x320 240x400

.container -webkit-transition:margin-left 0.5s linear; overflow:hidden; width:320px;

-webkit-transition:margin-left 0.5s linear; overflow:hidden; width:240px;

-webkit-transition:margin-left 0.5s linear; overflow:hidden; width:240px;

.content width:960px; width:720px; width:720px;

.header width:320px; height:40px;

width:240px; height:40px;

width:240px; height:40px;

.view-content

width:320px; width:320px; width:320px;

Estrutura da App

25

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;

Estrutura da App

App no estado View1 App no estado View2 App no estado View3

26

Arquivos CSS

landscape.css 320x240

portrait.css 240x320 / 240x400

Trocando os arquivos CSS

27

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" />');

}

28

• 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

Dicas

29

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

Obrigado!