• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Como montar uma App em diversas resoluções de tela
 

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

on

  • 1,408 views

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

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.

Statistics

Views

Total Views
1,408
Views on SlideShare
1,408
Embed Views
0

Actions

Likes
1
Downloads
21
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Rever a gravação do Webinar Como montar uma App em diversas resoluções de tela: http://forumnokia.adobeconnect.com/p7fb3whi7t8/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • ECOSYSTEM1
    • 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
    • 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 estrutura HTML da página11
    • Estrutura da App DIV .container TABLE .content TD TD TD Visualização da estrutura HTML da página12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
    • 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
    • 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
    • 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
    • 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="text/css" />);} else { document.write(<link rel="stylesheet"href="style/portrait.css" type="text/css" />);}27
    • 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
    • Obrigado!Raymundo JuniorDesenvolvedor – INdTEvangelista de TecnologiaE-mail: raymundo.ferreira-junior@indt.org.brTwitter: twitter.com/justkawsSite: justkaws.comBlog: blog.justkaws.com29