Baixado 34 vezes
Carregado porAlexandre Magno Teles Zimerer
Aplicações web multiplataforma - único código, múltiplas experiência
A palestra discute como criar aplicações web multiplataforma com código único para múltiplas experiências nos dispositivos. O acesso à web vem aumentando por dispositivos móveis e 1/3 dos usuários de internet nos EUA usam o celular como primeiro dispositivo. Deve-se explorar as melhores práticas como Mobile First para desenvolver sites adaptáveis e com melhor desempenho em todos os dispositivos.
Mais conteúdo relacionado
Aplicações web multiplataforma - único código, múltiplas experiência
- 1. na palestra deagora… APLICAÇÕES WEB MULTIPLATAFORMA CÓDIGO ÚNICO, MÚLTIPLAS EXPERIÊNCIAS
- 2. SOBRE MIM Alexandre Magno- Desenvolvedor Web na globo.com
- 3. não é novidadeque via dispositivos móveisvem aumentando… O ACESSO A WEB de forma insana
- 4. Jan Julho Dezembro 0 25 5075 100 CELULAR VS TABLET 2014
- 5. não é novidadeque nos celulares e tablets lidera em relação aos PCS e notebook O ACESSO A WEB
- 6. 1/3 de usuáriosde internet nos EUA usam o celular como primeiro dispositivo de acesso a internet
- 7. mas, quando acessamosa internet via celular estão prontos? OS SITES NOS DISPOSITIVOS
- 10. EM TODOS OS DISPOSITIVOS? Comounificar Todas estas tecnologias
- 11. O desafio éainda maior E ainda ter o melhor suporte possível? COMO SER MULTIPLATAFORMA E EXPLORAR OS MELHORES RECURSOS DOS DISPOSITIVOS?
- 12. Aplicação sub Aplicação subAplicação sub Aplicação Possível solução ao cenário atual APPdevices browser desktop/tv
- 13. Aplicação Aplicação Aplicação Como está acontecendo APP devicesbrowser desktop/tv 1 2 3
- 14.
- 15. Fonte única dedados para diferentes dispositivos API device API
- 16. DEVICE API API’s HTML5e Javascript que explora as capacidades do aparelho
- 20. A questão é: Parase construir uma solução multiplataforma? QUAL PLATAFORMA DEVEMOS UTILIZAR?
- 22. TUDO DEPENDE DOCONTEXTO tela grande, focado, confortável, digitação eficiente e parado!
- 24. as estratégias adotadas parase 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
- 25. Design Responsivo RESSMobile 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
- 26.
- 27. WYSIWYG CONTENT FIRST antes: depois: Para quemgera conteúdo:
- 28. lhe convido aconhecer: MOBILE FIRST
- 31. /* Desktop-first styles:Avoid */ .column { float: left; width: 50%; } @media all and (max-width: 50em) { .column { float: none; width: auto; } }
- 33. /* Mobile-first stylesFTW */ @media all and (min-width: 50em) { .column { float: left; width: 50%; } }
- 34.
- 35. JAVASCRIPT SOB DEMANDA lheconvido a usar:
- 36. Modernizr.load({ test: Modernizr.geolocation, yep :'geolocation.js', nope: 'find-by-ip.js' }); Testando geolocation
- 37. ninguém fica perdidono espaço
- 38. COMO TRATAR IMAGENS? chegamosa um sério problema:
- 39.
- 41.
- 42.
- 43.
- 44.
- 45. 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(); } });
- 46.
- 48. //variaveis @column-width: 60; @gutter-width: 20; @columns:12; header { .column(12); } article { .column(9); } aside { .column(3); } SEMANTIC GRIDS
- 50.
- 51. PARA O USUÁRIO Seé uma APP, mobile site, ou o que for…
- 52.
- 53.
- 55. QUAL PLATAFORMA DEVEMOS UTILIZAR? Aquestão é: Para se construir uma solução multiplataforma?
- 57.