Your SlideShare is downloading. ×
  • Like
Best pratices para desenvolvimento mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Best pratices para desenvolvimento mobile

  • 2,441 views
Published

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,441
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
79
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide























































Transcript

  • 1. BEST PRACTICES PARA DESENVOLVIMENTO MOBILE Pedro Cardoso - mobile.sapo.pt 26 de Maio de 2010
  • 2. • Introdução •O que são widgets • Os que se deve fazer
  • 3. TIPOS DE APLICAÇÕES App nativa Widget Webapp
  • 4. 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)
  • 5. MOBILE WEB •A web normal em versão reduzida • Desenvolvimento fácil (HTML, JavaScript, CSS) • Limites no que pode aceder no dispositivo
  • 6. MOBILE WEB - WEBAPPS
  • 7. MOBILE WEB - WEBAPPS • Atalho web como aplicação
  • 8. MOBILE WEB - WEBAPPS • Atalho web como aplicação • Suporte de APIs HTML5
  • 9. 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
  • 10. WIDGETS
  • 11. WIDGETS • Widget híbrido app/web
  • 12. WIDGETS • Widget híbrido app/web • Aplicações construídas em tecnologias web (JavaScript, HTML, CSS)
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. MUNDIAL 2010
  • 18. WIDGETS - VANTAGENS
  • 19. WIDGETS - VANTAGENS • Portabilidade 
  • 20. WIDGETS - VANTAGENS • Portabilidade  • Fácil de desenvolver e testar
  • 21. 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)
  • 22. 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)
  • 23. 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)
  • 24. 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
  • 25. WIDGETS - DESVANTAGENS
  • 26. WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa
  • 27. WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala
  • 28. WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas
  • 29. WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas • Discrepâncias nas implementações
  • 30. WIDGETS - DESVANTAGENS • Difícil atingir look&feel de app nativa • Integração em menor escala • Plataformas imaturas • Discrepâncias nas implementações • Performance
  • 31. 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
  • 32. ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES
  • 33. ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum
  • 34. ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum • Adaptação progressiva
  • 35. ESTRATÉGIAS PARA LIDAR COM LIMITAÇÕES • Menor denominador comum • Adaptação progressiva • Particularizar casos consoante plataforma
  • 36. 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
  • 37. 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
  • 38. HTML5 • Nãosuportado na maioria dos casos ou apenas parcialmente suportado. • Storage • Geo-location
  • 39. CSS3 • Media queries • Animações CSS • text-shadow • SVG/VML • border-image • background gradients • border-radius • <canvas>
  • 40. O QUE FAZER?
  • 41. 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
  • 42. 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>
  • 43. 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
  • 44. 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
  • 45. PERFORMANCE
  • 46. PERFORMANCE • Fingir!
  • 47. PERFORMANCE • Fingir! • Mudar estado de links activos
  • 48. PERFORMANCE • Fingir! • Mudar estado de links activos • Indicador de acesso à rede/processamento
  • 49. PERFORMANCE • Fingir! • Mudar estado de links activos • Indicador de acesso à rede/processamento • Especificar background/width/height nas imagens (placeholder)
  • 50. CSS SPRITES • Depende...
  • 51. OPTIMIZAÇÃO DE IMAGENS
  • 52. OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel
  • 53. OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB
  • 54. OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB • Limpar PNGs: usar pngcrush
  • 55. OPTIMIZAÇÃO DE IMAGENS • Evitar alpha-channel • Usar PNGs com palette, não RGB • Limpar PNGs: usar pngcrush • Usar imagens com tamanho adequado
  • 56. 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
  • 57. WINDOWS PHONE • IE6 com suporte de PNG • Storage limitado • Sem posicionamento fixo • Lento
  • 58. PALM PRE • Rápido • API muito rica • Webkit relativamente recente • Não são widgets, mas aplicam-se os mesmos conceitos
  • 59. 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/
  • 60. OBRIGADO pedro.cardoso@co.sapo.pt @pcardoso