Carregado porBruno Carreira
Sapo Sessions - Web Mobile
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.
- 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 temosos 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 browsertem os seus problemas com CSS e JS • coisas simples como: • font-style: italic • document.body.offsetWidth
- 12. Browsers • detectar oterminal 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 melhorexperiência.
- 15. Browsers • os mesmosconteú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 ficamais lento ...
- 18. Conectividade • reduzir onumero 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 drasticamenteo tráfego • reduz o número de requests • imagens redimensionadas para o terminal
- 20.
- 21. Ajax/Hijax • redução detrafego drástica • minimizar alterações no DOM • menos consumo de processamento server-side
- 22.
- 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 • suportenos 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 manipularo 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 eAndroid >= 2.2 suporta • Windows Phone 7.5 não suporta • workaround: • location.hash • onhashchange
- 33. Video • só oiOS 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.
- 35.
- 36. Storage (local esession) • para guardar dados do utilizador • favoritos • preferencias • etc • para guardar cache
- 37. Storage (local esession)
- 38. Storage (local esession)
- 39. Debug • poucas ferramentasdisponí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 usemframeworks; 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 asvossas mini-frameworks, ou usem algumas já feitas: • Zepto • XUI • micro.js • jQuery Mobile = jQuery + GUI Library
- 45. Optimizações • Achas quejá 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.
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