Best pratices para desenvolvimento mobile
Upcoming SlideShare
Loading in...5
×
 

Best pratices para desenvolvimento mobile

on

  • 3,893 views

Diferenças entre web e mobile, coisas que funcionam num lado e se tornam um desastre no outro e cuidados especiais a ter quando se lida com dispositivos móveis e com ecrãs mais reduzidos.

Diferenças entre web e mobile, coisas que funcionam num lado e se tornam um desastre no outro e cuidados especiais a ter quando se lida com dispositivos móveis e com ecrãs mais reduzidos.

O panorama actual das implementações de motores de widget. As diferentes resoluções dos terminais, os vários motores de rendering e capacidade de acesso ao hardware para melhor integração com a plataforma. O que evitar a nível de Javascript, HTML e CSS.

Statistics

Views

Total Views
3,893
Views on SlideShare
2,412
Embed Views
1,481

Actions

Likes
5
Downloads
78
Comments
0

3 Embeds 1,481

http://developers.tmn.pt 1379
http://developerstmn.blogs.sapo.pt 61
http://www.slideshare.net 41

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Best pratices para desenvolvimento mobile Best pratices para desenvolvimento mobile Presentation Transcript

  • BEST PRACTICES PARA DESENVOLVIMENTO MOBILE Pedro Cardoso - mobile.sapo.pt 26 de Maio de 2010
  • • Introdução •O que são widgets • Os que se deve fazer
  • TIPOS DE APLICAÇÕES App nativa Widget Webapp
  • APLICAÇÕES MÓVEIS • Programas que correm no telefone • Adaptados a ecrans pequenos, interacção simplificada • Com acesso ao hardware (filesystem, som, 3d, bluetooth, wifi, câmara, acelerómetro, etc) • Integração complexa no dispositivo • Podem funcionar offline e/ou online • Desenvolvidas em linguagens de baixo nível (C, C++, Java, Objective C)
  • MOBILE WEB •A web normal em versão reduzida • Desenvolvimento fácil (HTML, JavaScript, CSS) • Limites no que pode aceder no dispositivo
  • MOBILE WEB - WEBAPPS
  • MOBILE WEB - WEBAPPS • Atalho web como aplicação
  • MOBILE WEB - WEBAPPS • Atalho web como aplicação • Suporte de APIs HTML5
  • MOBILE WEB - WEBAPPS • Atalho web como aplicação • Suporte de APIs HTML5 • Necessário um proxy se necessário aceder a fontes de dados foram do domínio onde app está alojada
  • WIDGETS
  • WIDGETS • Widget híbrido app/web
  • WIDGETS • Widget híbrido app/web • Aplicações construídas em tecnologias web (JavaScript, HTML, CSS)
  • WIDGETS • Widget híbrido app/web • Aplicações construídas em tecnologias web (JavaScript, HTML, CSS) • Corre localmente no dispositivo, mas podem funcionar online e/ou offline
  • WIDGETS • Widget híbrido app/web • Aplicações construídas em tecnologias web (JavaScript, HTML, CSS) • Corre localmente no dispositivo, mas podem funcionar online e/ou offline • Correm num browser especializado, no ecran completo, sem elementos de UI
  • WIDGETS • Widget híbrido app/web • Aplicações construídas em tecnologias web (JavaScript, HTML, CSS) • Corre localmente no dispositivo, mas podem funcionar online e/ou offline • Correm num browser especializado, no ecran completo, sem elementos de UI • Cross-platform
  • PLATAFORMAS • Nokia WRT • TVs • Windows Phone (WM 6.5) • Phonegap • Samsung • Nokia WRT • Opera Widget Manager + Browser • iPhone • Palm webOS (Pre/Pixi) • Android • Dashboard Mac / Windows Sidebar • Blackberry • LiMo • SonyEricsson WebSDK
  • MUNDIAL 2010
  • WIDGETS - VANTAGENS
  • WIDGETS - VANTAGENS • Portabilidade 
  • WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar
  • WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar • Possível aceder a algumas funcionalidades mais avançadas do hardware (GPS, acelerómetro, câmara)
  • WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar • Possível aceder a algumas funcionalidades mais avançadas do hardware (GPS, acelerómetro, câmara) • Menos limitações que web (XHR)
  • WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar • Possível aceder a algumas funcionalidades mais avançadas do hardware (GPS, acelerómetro, câmara) • Menos limitações que web (XHR) • Acesso a outras funcionalidades (softkeys)
  • WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar • Possível aceder a algumas funcionalidades mais avançadas do hardware (GPS, acelerómetro, câmara) • Menos limitações que web (XHR) • Acesso a outras funcionalidades (softkeys) • Resultados aceitáveis
  • WIDGETS - DESVANTAGENS
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas • Discrepâncias nas implementações
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas • Discrepâncias nas implementações • Performance
  • WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas • Discrepâncias nas implementações • Performance • Impossibilidade de alguns tipos de apps
  • ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES
  • ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum
  • ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum • Adaptação progressiva
  • ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum • Adaptação progressiva • Particularizar casos consoante plataforma
  • COMPILAÇÃO • Maioria dos casos, ZIP com o conteúdo e um ficheiro de configuração. • make, ant, shell scripts, batch files, etc • zip -r foo.wgt src/* • zip -r foo.wgz src/ • palm-package src • cp -R src dist/foo.wdgt • Código acessível: JavaScript Minifiers + obfuscators
  • DESAFIOS • Conectividade à internet • Memória • Persistência de dados • Capacidade de CPU • Tamanhos de ecran muito • Browsers limitados (IE, diferentes (pixels, DPIs) Netfront, Blackberry, Webkits) • Com/sem touch • Plataformas heterogéneas • Com/sem cursor
  • HTML5 • Nãosuportado na maioria dos casos ou apenas parcialmente suportado. • Storage • Geo-location
  • CSS3 • Media queries • Animações CSS • text-shadow • SVG/VML • border-image • background gradients • border-radius • <canvas>
  • O QUE FAZER?
  • RESUMIDAMENTE... • Hierarquia HTML o mais • Fazer o processamento pesado simples possível no servidor • Regras CSS simples • Feeds pequenos • JavaScript simples • Usar JSON • Evitar frameworks pesadas • Manter cache da informação • Evitar iframes • Persistência • Usar tabelas se fizer sentido
  • HTML SIMPLES • Estruturas complexas ou longas • Deep nesting • Reduzir o número de elementos • Reduzir profundidade do DOM • Não usar estruturas complexas para efeitos simples • Cantos redondos • <em> ou <span> em vez de <b><i>...</i><b>
  • CSS SIMPLES • Regras de CSS complexas ou • Simplificar CSS pouco eficientes • Usar <table> se necessário • Processamento direita para a esquerda • Regras direcionadas #menu .item a { ... } • #especifica div.menos-especifica ‣ Todos os <a> .ainda-menos .ainda-menos div ‣ Todos os <a> dentro de .item div ‣ Todos os .item dentro de #menu
  • JAVASCRIPT SIMPLES • Literais em vez de operador • Seleccionar elementos “new” (var arr = [], obj = {}) • Iterar sobre o DOM • Simplificar tratamento de • Estruturas de dados grandes eventos • Seleccionar elementos por • Evitar frameworks, ID ou tagName e guardar em implementar subconjunto de memória referência se funcionalidades necessárias necessário reutilizar • Juntar manipulações ao DOM • Evitar loops desnecessários • Pedidos AJAX pequenos
  • PERFORMANCE
  • PERFORMANCE • Fingir!
  • PERFORMANCE • Fingir! • Mudar estado de links activos
  • PERFORMANCE • Fingir! • Mudar estado de links activos • Indicador de acesso à rede/processamento
  • PERFORMANCE • Fingir! • Mudar estado de links activos • Indicador de acesso à rede/processamento • Especificar background/width/height nas imagens (placeholder)
  • CSS SPRITES • Depende...
  • OPTIMIZAÇÃO DE IMAGENS
  • OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel
  • OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB
  • OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB • Limpar PNGs: usar pngcrush
  • OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB • Limpar PNGs: usar pngcrush • Usar imagens com tamanho adequado
  • NOKIA WRT (S60 5TH) • Lento com muitos gráficos • Webkit antigo • Bugs, diferenças entre modelos • Updates apagam preferências da app • Sistema de storage simples, apenas para dados pequenos
  • WINDOWS PHONE • IE6 com suporte de PNG • Storage limitado • Sem posicionamento fixo • Lento
  • PALM PRE • Rápido • API muito rica • Webkit relativamente recente • Não são widgets, mas aplicam-se os mesmos conceitos
  • JAVASCRIPT LIBRARIES • LibSAPO.js • Emile.js http://softwarelivre.sapo.pt/ http://github.com/madrobby/emile libsapojs • baseJS • jQuery http://paularmstrongdesigns.com/ http://jquery.com/ projects/basejs/ • Prototype • iUI http://prototypejs.org/ http://code.google.com/p/iui/ • JQTouch • xui http://www.jqtouch.com/ http://xuijs.com/
  • OBRIGADO pedro.cardoso@co.sapo.pt @pcardoso