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.
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
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
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
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
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
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
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
43.
44.
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
52. PERFORMANCE
• Fingir!
• Mudar estado de links activos
• Indicador de acesso à rede/processamento
• Especificar background/width/height nas imagens (placeholder)
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