Sapo Sessions - Web Mobile
1 gostou535 visualizações
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.
Sapo Sessions - Web Mobile
- 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/
Notas do Editor
- #2: \n
- #3: \n
- #4: Perguntar a audiência se já foram ao m.sapo.pt\nQual a opinião ?\n
- #5: O m.sapo.pt na sua versão tablet e mobile touch.\ndizer que esta apresentação resulta do conhecimento adquirido na realização do mobile\n
- #6: muito se fala de mobile; que o mobile é o futuro; que temos de ter todos os conteúdos em mobile.\nO porque de ainda não termos todos os conteúdos em mobile e em sites responsive.\n\n
- #7: perguntar à audiência quais são os terminais que têm\nBrowsers: -> se em desktop é complicado em mobile é 4x pior\nFalar dos diferentes tipos de terminal : touch vs pointer, pointer vs lowend, etc\n
- #8: alguns exemplos do nosso parque de browsers.\n
- #9: e como ainda não basta-se ...\n
- #10: Em resumo:\nnão existe forma de satisfazer todo o parque que existe ...\n
- #11: RIM não devolve resultado do document.body.offsetWidth\nfont-style: italic em alguns terminais mais antigos não interpretam este CSS\n
- #12: é o caos !!!!\n
- #13: falar que estamos a realizar um catalogo de devices no sapo\ndar como exemplo a versão pointer vs touch do m.sapo.pt em que a segmentação é realizada server-side, assim como a versão light e full do touch\n
- #14: pointer: BlackBerry, Nokia, outros.\nno js touch: n&#xE3;o dispon&#xED;vel no m.sapo.pt mas ir&#xE1; ser utilizada nos internacionais (client-side load)\njs touch light: utilizada nos terminais Android < 3.0 e Windows Phone 7.5\njs touch full: utilizada nos terminais iOS > 4.2.1 e Android 4.0\njs touch tablet: utilizada em tablets: device-width > 640px\n
- #15: quem tem um bom telemovel quer uma experi&#xEA;ncia &#xF3;ptima, muitas vezes quer uma experi&#xEA;ncia pr&#xF3;xima &#xE0; de uma aplica&#xE7;&#xE3;o nativa\n
- #16: quem tem um telemovel de m&#xE9;dia gama, procura ter os conte&#xFA;dos de forma r&#xE1;pida e simples\n&#xC9; QUASE IMPOSS&#xCD;VEL TER 100% DE COMPATIBILIDADE EM TODOS OS TERMINAIS POR ISSO OPTEM PELO BEST EFFORT \n
- #17: \n
- #18: \n
- #19: S&#xE3;o as recomenda&#xE7;&#xF5;es normais para qualquer site WEB; mas no contexto mobile s&#xE3;o mais prementes dado a conectividade por norma ser mais lenta e com maiores lat&#xEA;ncias. \n
- #20: \n
- #21: O que &#xE9; o LazyLoad?\n\n
- #22: no mobile utilizamos o lazyload nas imagens, simplemente trocando a src mas podemos fazer um carregamento progressivo da imagem, se o site for responsive com desktop\npor exemplo o src ser a imagem mobile de baixa qualidade e o data-src ser a imagem HD e s&#xF3; &#xE9; utilizada em modo desktop ou com terminais retina que estejam sobre wifi.\n
- #23: \n
- #24: O que &#xE9; Hijax?\n\n
- #25: Howto ... como &#xE9; simples interceptar todos os links!\n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: contextualizar\n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: testar se o browser suporta video e que tipos de formatos.\n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: Falar que inicialmente est&#xE1;vamos a usar o Zepto com alguns add-ons desenvolvidos por n&#xF3;s.\nCom a necessidade de suportar o Windows Phone 7.5 (Zepto incompat&#xED;vel porque usa o __proto), tivemos de migrar para o jQuery; no entanto est&#xE1; no roadmap criar a nossa core-framework\n
- #48: Falar da experi&#xEA;ncia do m.sapo.pt:\n - 3dias antes do lan&#xE7;amento em Androids de baixa gama tudo estava muito lento.\n - criou-se um fork da framework, que se chamou SAPO.Mobile.Light s&#xF3; com o essencial para a navega&#xE7;&#xE3;o; deixou-se cair o lazyload, autoload, hijax, history, fast click, etc\n - experi&#xEA;ncia de navega&#xE7;&#xE3;o Android != iOS\n
- #49: - o que ganho com o fast click?\n- o que &#xE9; o ghost click?\n- como evitar?!\n
- #50: \n
- #51: \n
- #52: \n