Sapo Sessions - Web Mobile

787 visualizações

Publicada em

talk in sapo sessions

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
787
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • \n
  • \n
  • Perguntar a audiência se já foram ao m.sapo.pt\nQual a opinião ?\n
  • 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
  • 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
  • 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
  • alguns exemplos do nosso parque de browsers.\n
  • e como ainda não basta-se ...\n
  • Em resumo:\nnão existe forma de satisfazer todo o parque que existe ...\n
  • RIM não devolve resultado do document.body.offsetWidth\nfont-style: italic em alguns terminais mais antigos não interpretam este CSS\n
  • é o caos !!!!\n
  • 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
  • pointer: BlackBerry, Nokia, outros.\nno js touch: não disponível no m.sapo.pt mas irá 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
  • quem tem um bom telemovel quer uma experiência óptima, muitas vezes quer uma experiência próxima à de uma aplicação nativa\n
  • quem tem um telemovel de média gama, procura ter os conteúdos de forma rápida e simples\nÉ QUASE IMPOSSÍVEL TER 100% DE COMPATIBILIDADE EM TODOS OS TERMINAIS POR ISSO OPTEM PELO BEST EFFORT \n
  • \n
  • \n
  • São as recomendações normais para qualquer site WEB; mas no contexto mobile são mais prementes dado a conectividade por norma ser mais lenta e com maiores latências. \n
  • \n
  • O que é o LazyLoad?\n\n
  • 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ó é utilizada em modo desktop ou com terminais retina que estejam sobre wifi.\n
  • \n
  • O que é Hijax?\n\n
  • Howto ... como é simples interceptar todos os links!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • contextualizar\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • testar se o browser suporta video e que tipos de formatos.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Falar que inicialmente estávamos a usar o Zepto com alguns add-ons desenvolvidos por nós.\nCom a necessidade de suportar o Windows Phone 7.5 (Zepto incompatível porque usa o __proto), tivemos de migrar para o jQuery; no entanto está no roadmap criar a nossa core-framework\n
  • Falar da experiência do m.sapo.pt:\n - 3dias antes do lançamento em Androids de baixa gama tudo estava muito lento.\n - criou-se um fork da framework, que se chamou SAPO.Mobile.Light só com o essencial para a navegação; deixou-se cair o lazyload, autoload, hijax, history, fast click, etc\n - experiência de navegação Android != iOS\n
  • - o que ganho com o fast click?\n- o que é o ghost click?\n- como evitar?!\n
  • \n
  • \n
  • \n
  • Sapo Sessions - Web Mobile

    1. 1. Web Mobile @SAPO - Multiplataformas
    2. 2. • Bruno Carreira• SAPO Multiplataforma @ WEB Mobile• bruno.d.carreira@co.sapo.pt
    3. 3. m.sapo.pt
    4. 4. Vamos falar sobre• enquadramento de mobile WEB• boas práticas em mobile WEB• HTM5 (para mobile)• debugging• optimizações
    5. 5. Os problemas ...• browsers (terminais e versões)• conectividade (custos e limitações)• ambiente (ecrã e navegação)• poucos recursos (memória, cpu, etc)
    6. 6. Browsers• Safari iOS • Nokia • Palm Browser Blazer• Android Webkit • Opera • Iris Mobile• RIM • NetFront Blackberry • Opera Mini • etc.• S60 Webkit • IE
    7. 7. Browsers• ainda temos os tablets,• pseudo-browsers• e as diferentes versões de cada um
    8. 8. Browsers• são muitos• uns são limitados, outros inovadores• alguns sem nome (e sem documentação)• ferramentas de debug ? o que é isso ?
    9. 9. Browsers• cada browser tem os seus problemas com CSS e JS• coisas simples como: • font-style: italic • document.body.offsetWidth
    10. 10. Browsers• detectar o terminal server-side • Device Atlas • WURFL• melhor experiência para cada contexto• markup simples• CSS no topo, JS no fim
    11. 11. m.sapo.pt Ambientes / Experiências de utilizaçãoNo JavaScript JavaScript touch touch touchpointer Tablet CSS Light Full
    12. 12. Browsers• a melhor experiência.
    13. 13. Browsers• os mesmos conteúdos mas agora numa versão mais simplista.
    14. 14. Conectividade• diferentes tipos: • GPRS, 3G, 4G, WIFI• latência• custos• Browsers (parallel downloads)
    15. 15. E tudo fica mais lento ...
    16. 16. 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
    17. 17. LazyLoad• reduz drasticamente o tráfego• reduz o número de requests• imagens redimensionadas para o terminal
    18. 18. LazyLoad
    19. 19. Ajax/Hijax• redução de trafego drástica• minimizar alterações no DOM• menos consumo de processamento server-side
    20. 20. Ajax/Hijax
    21. 21. Ajax/Hijax - Exemplo Texto
    22. 22. Ajax/Hijax - Exemplo Texto
    23. 23. Ajax/Hijax• pedido completo: 3466 bytes• pedido parcial: 1264 bytes• menos: 2202 bytes• reduzimos 63% tráfego de markup
    24. 24. markupAjax Request Sim parcial Não markup completo
    25. 25. HTML5• geo location• history• video• storage (session & local)• orientation
    26. 26. Geo Location• suporte nos smartphones mais recentes• fácil de usar• permite contextualizar o utilizador rapidamente
    27. 27. geoLocationAjax request to server Lança evento para a framework JS
    28. 28. 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.
    29. 29. History• iOS e Android >= 2.2 suporta• Windows Phone 7.5 não suporta• workaround: • location.hash • onhashchange
    30. 30. 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
    31. 31. Video
    32. 32. Video
    33. 33. Storage (local e session)• para guardar dados do utilizador • favoritos • preferencias • etc• para guardar cache
    34. 34. Storage (local e session)
    35. 35. Storage (local e session)
    36. 36. 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
    37. 37. Debug• alert• console.log (Android e iOS)• document.write (Nokia, Windows Phone)• tcpdump
    38. 38. 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
    39. 39. Optimizações• Evitar redirects • se tiver de ser: “301 Moved Permanently”• Simplifica • semântica DOM • usa HTML5 tags• gzip, minify, etc, etc
    40. 40. 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.
    41. 41. Optimizações• criem as vossas mini-frameworks, ou usem algumas já feitas: • Zepto • XUI • micro.js• jQuery Mobile = jQuery + GUI Library
    42. 42. Optimizações• Achas que já está ok?• Volta a rever tudo e a testar ...
    43. 43. Touch vs Click• em terminais touch, click tem um delay de 300 a 500 ms• usem ontouchend• cuidado com o Ghost Click
    44. 44. 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/
    45. 45. Duvidas e questões

    ×