O documento discute boas práticas para desenvolvimento mobile web, incluindo lidar com diferentes navegadores, conectividade limitada e recursos escassos. Ele cobre como detectar dispositivos no servidor, usar marcação simples e lazy load para imagens, reduzir tráfego com Ajax/Hijax, e otimizar com gzip e minificação. Ferramentas de debug limitadas são também discutidas.

1. Web Mobile
@SAPO - Multiplataformas

2. • Bruno Carreira
• SAPO Multiplataforma @ WEB Mobile
• bruno.d.carreira@co.sapo.pt

3. m.sapo.pt

5. Vamos falar sobre
• enquadramento de mobile WEB
• boas práticas em mobile WEB
• HTM5 (para mobile)
• debugging
• optimizações

6. Os problemas ...
• browsers (terminais e versões)
• conectividade (custos e limitações)
• ambiente (ecrã e navegação)
• poucos recursos (memória, cpu, etc)

7. Browsers
• Safari iOS • Nokia • Palm
Browser Blazer
• Android
Webkit • Opera • Iris
Mobile
• RIM • NetFront
Blackberry • Opera Mini • etc.
• S60 Webkit • IE

8. Browsers
• ainda temos os tablets,
• pseudo-browsers
• e as diferentes versões de cada um

9. Browsers
• são muitos
• uns são limitados, outros inovadores
• alguns sem nome (e sem
documentação)
• ferramentas de debug ? o que é isso ?

10. Browsers
• cada browser tem os seus problemas
com CSS e JS
• coisas simples como:
• font-style: italic
• document.body.offsetWidth

12. Browsers
• detectar o terminal server-side
• Device Atlas
• WURFL
• melhor experiência para cada contexto
• markup simples
• CSS no topo, JS no fim

13. m.sapo.pt
Ambientes / Experiências de utilização
No JavaScript JavaScript
touch touch touch
pointer Tablet
CSS Light Full

14. Browsers
• a melhor experiência.

15. Browsers
• os mesmos conteúdos
mas agora numa versão
mais simplista.

16. Conectividade
• diferentes tipos:
• GPRS, 3G, 4G, WIFI
• latência
• custos
• Browsers (parallel downloads)

17. E tudo fica mais lento ...

18. Conectividade
• reduzir o numero de requests
• reduzir o overhead dos requests
• usar cache e evitar redirects
• JS e CSS minificado e compactado
• usar hostnames diferentes para conteúdo estático
• usar imagens redimensionadas para o terminal

19. LazyLoad
• reduz drasticamente o tráfego
• reduz o número de requests
• imagens redimensionadas para o
terminal

20. LazyLoad

21. Ajax/Hijax
• redução de trafego drástica
• minimizar alterações no DOM
• menos consumo de processamento
server-side

22. Ajax/Hijax

23. Ajax/Hijax - Exemplo
Texto

24. Ajax/Hijax - Exemplo
Texto

25. Ajax/Hijax
• pedido completo: 3466 bytes
• pedido parcial: 1264 bytes
• menos: 2202 bytes
• reduzimos 63% tráfego de markup

26. markup
Ajax Request Sim
parcial
Não
markup
completo

27. HTML5
• geo location
• history
• video
• storage (session & local)
• orientation

28. Geo Location
• suporte nos smartphones mais recentes
• fácil de usar
• permite contextualizar o utilizador
rapidamente

30. geoLocation
Ajax request to
server
Lança evento
para a
framework JS

31. History
• permite manipular o histórico de sessão
do browser (útil para quando usamos
Hijax)
• podemos alterar a entrada actual do
histórico, como podemos adicionar
nova entrada.

32. History
• iOS e Android >= 2.2 suporta
• Windows Phone 7.5 não suporta
• workaround:
• location.hash
• onhashchange

33. Video
• só o iOS suporta a 100% esta
funcionalidade.
• permite ver um video directamente na
página WEB sem recorrer a plugins.
• podemos especificar diferentes tipos de
source por codec
• podemos também utilizar media queries

34. Video

35. Video

36. Storage (local e session)
• para guardar dados do utilizador
• favoritos
• preferencias
• etc
• para guardar cache

37. Storage (local e session)

38. Storage (local e session)

39. Debug
• poucas ferramentas disponíveis
• terminais mais antigos não têm
ferramentas de debug remoto
• não existe emuladores para terminais
mais antigos, e nem sempre são 100%
compativeis

40. Debug
• alert
• console.log (Android e iOS)
• document.write (Nokia, Windows
Phone)
• tcpdump

41. Remote debugging
• iWebInspector ( )iOS
• Safari Web Inspector ( ) iOS 6
• DragonFly ( )
Opera Mobile
• Logcat ( )
Android
• Chrome remote debug ( )
Android >= 4.0
• http://www.mobilexweb.com/emulators

42. Optimizações
• Evitar redirects
• se tiver de ser: “301 Moved Permanently”
• Simplifica
• semântica DOM
• usa HTML5 tags
• gzip, minify, etc, etc

43. Optimizações
• não usem frameworks; ok existe
excepções
• não usem jQuery só por causa $(“”) , o
HTML5 tem querySelector
• jQuery demora 8 segundos a fazer
parse em alguns terminais.

44. Optimizações
• criem as vossas mini-frameworks, ou
usem algumas já feitas:
• Zepto
• XUI
• micro.js
• jQuery Mobile = jQuery + GUI Library

45. Optimizações
• Achas que já está ok?
• Volta a rever tudo e a testar ...

46. Touch vs Click
• em terminais touch, click tem um delay
de 300 a 500 ms
• usem ontouchend
• cuidado com o Ghost Click

48. Referencias
• http://www.w3.org/TR/mobile-bp
• http://www.html5rocks.com/pt/tutorials/
• http://www.slideshare.net/pp.koch/google-presentation-the-open-web-goes-mobile
• http://www.slideshare.net/firt/mobile-web-html5-performance-optimization
• https://developers.google.com/speed/docs/best-practices/rules_intro
• http://www.slideshare.net/firt/mobile-web-html5-performance-optimization
• http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

49. Duvidas e questões