na palestra de agora…
APLICAÇÕES WEB
MULTIPLATAFORMA
CÓDIGO ÚNICO, MÚLTIPLAS
EXPERIÊNCIAS
SOBRE MIM
Alexandre Magno - Desenvolvedor Web na globo.com
não é novidade que
via dispositivos móveisvem aumentando…
O ACESSO A WEB
de forma insana
Jan
Julho
Dezembro
0 25 50 75 100
CELULAR VS TABLET
2014
não é novidade que
nos celulares e tablets lidera em relação aos PCS e notebook
O ACESSO A WEB
1/3 de usuários de
internet

nos EUA usam o
celular como primeiro
dispositivo de acesso
a internet
mas, quando acessamos a internet via celular
estão prontos?
OS SITES NOS
DISPOSITIVOS
EM TODOS OS
DISPOSITIVOS?
Como unificar Todas estas tecnologias
O desafio é ainda maior
E ainda ter o melhor suporte possível?
COMO SER
MULTIPLATAFORMA
E EXPLORAR OS
MELHORES RECURSOS
DO...
Aplicação
sub Aplicação sub Aplicação sub Aplicação
Possível solução ao cenário atual
APPdevices browser desktop/tv
Aplicação
Aplicação
Aplicação
Como está acontecendo
APP
devices browser
desktop/tv
1
2
3
Aplicação
Aplicação
Aplicação
Solução intermediária
APP
devices browser
desktop/tv
Fonte única de dados para diferentes dispositivos
API
device API
DEVICE API
API’s HTML5 e Javascript que explora
as capacidades do aparelho
A questão é:
Para se construir uma solução
multiplataforma?
QUAL PLATAFORMA
DEVEMOS UTILIZAR?
TUDO DEPENDE DO CONTEXTO
tela grande, focado, confortável, digitação eficiente e parado!
as estratégias adotadas
para se chegar num modelo ideal, num determinado contexto, para termos menor esforço de
desenvolvi...
Design Responsivo RESS Mobile First
Ideal para projetos
legados
Conteúdo sob demanda
do servidor
Simplicidade
Perfomance r...
?
ARQUITETURA MULTIPLATAFORMA
x
WYSIWYG
CONTENT FIRST
antes:
depois:
Para quem gera conteúdo:
lhe convido a conhecer:
MOBILE FIRST
/* Desktop-first styles: Avoid */
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float:...
/* Mobile-first styles FTW */
@media all and (min-width: 50em)
{
.column {
float: left;
width: 50%;
}
}
JAVASCRIPT
NÃO OBSTRUTIVO
lhe convido a usar:
JAVASCRIPT SOB DEMANDA
lhe convido a usar:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geolocation.js',
nope: 'find-by-ip.js'
});
Testando geolocation
ninguém fica perdido no espaço
COMO TRATAR IMAGENS?
chegamos a um sério problema:
https://github.com/scottjehl/picturefill
Icon fonts
SCALABLE VECTOR GRAPHIC
RETINA READY
ESCALÁVEL
FRAMEWORKS
function giveTouch() {
$('#layers').on('swiperight', function(){
$(this).carousel('prev');
}).on('swipeleft', function(){
...
Temos um carrossel
multidevice
//variaveis
@column-width: 60;
@gutter-width: 20;
@columns: 12;
header { .column(12); }
article { .column(9); }
aside { .c...
MOBILE FIRST
MAGIC GRID
PARA O USUÁRIO
Se é uma APP, mobile site, ou o que for…
QUERO USAR
QUERO SURFAR
QUAL PLATAFORMA
DEVEMOS UTILIZAR?
A questão é:
Para se construir uma solução
multiplataforma?
alexanmtz@gmail.com
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
Próximos SlideShares
Carregando em…5
×

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

1.250 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.250
No SlideShare
0
A partir de incorporações
0
Número de incorporações
716
Ações
Compartilhamentos
0
Downloads
21
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

×