0
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 ...
MOBILE WEB


•A   web normal em versão reduzida

• Desenvolvimento    fácil (HTML, JavaScript, CSS)

• Limites   no que po...
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 neces...
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 loca...
WIDGETS

•   Widget híbrido app/web

•   Aplicações construídas em tecnologias web (JavaScript, HTML, CSS)

•   Corre loca...
WIDGETS

•   Widget híbrido app/web

•   Aplicações construídas em tecnologias web (JavaScript, HTML, CSS)

•   Corre loca...
PLATAFORMAS
•   Nokia WRT                         •   TVs

•   Windows Phone (WM 6.5)            •   Phonegap

•   Samsung...
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 ...
WIDGETS - VANTAGENS

•   Portabilidade 

•   Fácil de desenvolver e testar

•   Possível aceder a algumas funcionalidades ...
WIDGETS - VANTAGENS

•   Portabilidade 

•   Fácil de desenvolver e testar

•   Possível aceder a algumas funcionalidades ...
WIDGETS - VANTAGENS

•   Portabilidade 

•   Fácil de desenvolver e testar

•   Possível aceder a algumas funcionalidades ...
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     i...
WIDGETS - DESVANTAGENS

• Difícil   atingir look&feel de app nativa

• Integração     em menor escala

• Plataformas     i...
WIDGETS - DESVANTAGENS

• Difícil   atingir look&feel de app nativa

• Integração     em menor escala

• Plataformas     i...
WIDGETS - DESVANTAGENS

• Difícil   atingir look&feel de app nativa

• Integração     em menor escala

• Plataformas     i...
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  ...
COMPILAÇÃO

•   Maioria dos casos, ZIP com o conteúdo e um ficheiro de configuração.

    •   make, ant, shell scripts, batc...
DESAFIOS

•   Conectividade à internet    •   Memória

•   Persistência de dados       •   Capacidade de CPU

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

• backgrou...
O QUE FAZER?
RESUMIDAMENTE...

•   Hierarquia HTML o mais         •   Fazer o processamento pesado
    simples possível                ...
HTML SIMPLES

•   Estruturas complexas ou longas

•   Deep nesting

•   Reduzir o número de elementos

•   Reduzir profund...
CSS SIMPLES
•   Regras de CSS complexas ou           •   Simplificar CSS
    pouco eficientes
                              ...
JAVASCRIPT SIMPLES

                                  •   Literais em vez de operador
•   Seleccionar elementos
          ...
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   b...
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

• ...
NOKIA WRT
                       (S60 5TH)

• Lento   com muitos gráficos

• Webkit    antigo

• Bugs, diferenças   entre m...
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 c...
JAVASCRIPT LIBRARIES
•   LibSAPO.js                      •   Emile.js
    http://softwarelivre.sapo.pt/       http://githu...
OBRIGADO



pedro.cardoso@co.sapo.pt

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

Best pratices para desenvolvimento mobile

2,502

Published on

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,502
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
80
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide























































  • Transcript of "Best pratices para desenvolvimento mobile"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×