Aplicações web multiplataforma - único código, múltiplas experiência

1.193 visualizações

Publicada em

Os acesso a aplicações web vindo de dispositivos móveis tem aumentado exponencialmente, e um dos grandes desafios hoje para o desenvolvedor é criar aplicações que ofereçam o melhor dos recursos de cada dispositivo – mas sem replicar código específico a cada plataforma.

Nessa palestra serão compartilhadas experiências vividas e estratégias adotadas na Globo.com, na migração de portais web para aplicações web multiplataforma. É mostrado como recursos de linguagens conhecidas como HTML5, JavaScript e CSS3 têm nos auxiliado na construção de um único código acessado em qualquer dispositivo – explorando o que de melhor cada plataforma oferece. Veremos também como temos utilizado Responsive Design, RESS (Responsive design with server side components) e Mobile First como apoio nessa caminhada.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Aplicações web multiplataforma - único código, múltiplas experiência

  1. 1. na palestra de agora… APLICAÇÕES WEB MULTIPLATAFORMA CÓDIGO ÚNICO, MÚLTIPLAS EXPERIÊNCIAS
  2. 2. SOBRE MIM Alexandre Magno - Desenvolvedor Web na globo.com
  3. 3. não é novidade que via dispositivos móveisvem aumentando… O ACESSO A WEB de forma insana
  4. 4. Jan Julho Dezembro 0 25 50 75 100 CELULAR VS TABLET 2014
  5. 5. não é novidade que nos celulares e tablets lidera em relação aos PCS e notebook O ACESSO A WEB
  6. 6. 1/3 de usuários de internet nos EUA usam o celular como primeiro dispositivo de acesso a internet
  7. 7. mas, quando acessamos a internet via celular estão prontos? OS SITES NOS DISPOSITIVOS
  8. 8. EM TODOS OS DISPOSITIVOS? Como unificar Todas estas tecnologias
  9. 9. O desafio é ainda maior E ainda ter o melhor suporte possível? COMO SER MULTIPLATAFORMA E EXPLORAR OS MELHORES RECURSOS DOS DISPOSITIVOS?
  10. 10. Aplicação sub Aplicação sub Aplicação sub Aplicação Possível solução ao cenário atual APPdevices browser desktop/tv
  11. 11. Aplicação Aplicação Aplicação Como está acontecendo APP devices browser desktop/tv 1 2 3
  12. 12. Aplicação Aplicação Aplicação Solução intermediária APP devices browser desktop/tv
  13. 13. Fonte única de dados para diferentes dispositivos API device API
  14. 14. DEVICE API API’s HTML5 e Javascript que explora as capacidades do aparelho
  15. 15. A questão é: Para se construir uma solução multiplataforma? QUAL PLATAFORMA DEVEMOS UTILIZAR?
  16. 16. TUDO DEPENDE DO CONTEXTO tela grande, focado, confortável, digitação eficiente e parado!
  17. 17. as estratégias adotadas para se chegar num modelo ideal, num determinado contexto, para termos menor esforço de desenvolvimento para uma maior entregade forma escalável FORAM DIVERSAS •Sites .m •Design responsivo •RESS •Mobile First 1 2 3 4
  18. 18. Design Responsivo RESS Mobile First Ideal para projetos legados Conteúdo sob demanda do servidor Simplicidade Perfomance ruim em dispositivos móveis Melhor perfomance Foco no conteúdo Adaptações inviáveis Detectar dispositivo Oferece suporte gradativamente O que é carregado no desktop vai para todos outros Conteúdo por dispositivo específico Todo conteúdo é carregado
  19. 19. ? ARQUITETURA MULTIPLATAFORMA x
  20. 20. WYSIWYG CONTENT FIRST antes: depois: Para quem gera conteúdo:
  21. 21. lhe convido a conhecer: MOBILE FIRST
  22. 22. /* Desktop-first styles: Avoid */ .column { float: left; width: 50%; } @media all and (max-width: 50em) { .column { float: none; width: auto; } }
  23. 23. /* Mobile-first styles FTW */ @media all and (min-width: 50em) { .column { float: left; width: 50%; } }
  24. 24. JAVASCRIPT NÃO OBSTRUTIVO lhe convido a usar:
  25. 25. JAVASCRIPT SOB DEMANDA lhe convido a usar:
  26. 26. Modernizr.load({ test: Modernizr.geolocation, yep : 'geolocation.js', nope: 'find-by-ip.js' }); Testando geolocation
  27. 27. ninguém fica perdido no espaço
  28. 28. COMO TRATAR IMAGENS? chegamos a um sério problema:
  29. 29. https://github.com/scottjehl/picturefill
  30. 30. Icon fonts
  31. 31. SCALABLE VECTOR GRAPHIC
  32. 32. RETINA READY ESCALÁVEL
  33. 33. FRAMEWORKS
  34. 34. function giveTouch() { $('#layers').on('swiperight', function(){ $(this).carousel('prev'); }).on('swipeleft', function(){ $(this).carousel('next'); }); } $(document).ready(function(){ if(window.DocumentTouch && document instanceof DocumentTouch) { giveTouch(); } });
  35. 35. Temos um carrossel multidevice
  36. 36. //variaveis @column-width: 60; @gutter-width: 20; @columns: 12; header { .column(12); } article { .column(9); } aside { .column(3); } SEMANTIC GRIDS
  37. 37. MOBILE FIRST MAGIC GRID
  38. 38. PARA O USUÁRIO Se é uma APP, mobile site, ou o que for…
  39. 39. QUERO USAR
  40. 40. QUERO SURFAR
  41. 41. QUAL PLATAFORMA DEVEMOS UTILIZAR? A questão é: Para se construir uma solução multiplataforma?
  42. 42. alexanmtz@gmail.com twitter.com/alexanmtz github.com/alexanmtz alexandremagno.net

×