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.

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>

41. O QUE FAZER?

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

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

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

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

48. PERFORMANCE

49. PERFORMANCE
• Fingir!

50. PERFORMANCE
• Fingir!
• Mudar estado de links activos

51. PERFORMANCE
• Fingir!
• Mudar estado de links activos
• Indicador de acesso à rede/processamento

52. PERFORMANCE
• Fingir!
• Mudar estado de links activos
• Indicador de acesso à rede/processamento
• Especificar background/width/height nas imagens (placeholder)

53. CSS SPRITES
• Depende...

54. OPTIMIZAÇÃO DE IMAGENS

55. OPTIMIZAÇÃO DE IMAGENS
• Evitar alpha-channel

56. OPTIMIZAÇÃO DE IMAGENS
• Evitar alpha-channel
• Usar PNGs com palette, não RGB

57. OPTIMIZAÇÃO DE IMAGENS
• Evitar alpha-channel
• Usar PNGs com palette, não RGB
• Limpar PNGs: usar pngcrush

58. OPTIMIZAÇÃO DE IMAGENS
• Evitar alpha-channel
• Usar PNGs com palette, não RGB
• Limpar PNGs: usar pngcrush
• Usar imagens com tamanho adequado

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

60. WINDOWS PHONE
• IE6 com suporte de PNG
• Storage limitado
• Sem posicionamento fixo
• Lento

61. PALM PRE
• Rápido
• API muito rica
• Webkit relativamente recente
• Não são widgets, mas aplicam-se os mesmos conceitos

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

63. OBRIGADO
pedro.cardoso@co.sapo.pt
@pcardoso