Como montar uma App em diversas resoluções de tela
29
1 ECOSYSTEM
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
986 -
download
1
description
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.
Transcript of 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: [email protected]
Twitter: twitter.com/justkaws
Site: justkaws.com
Blog: blog.justkaws.com
Obrigado!
