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.

1. na palestra de agora…
APLICAÇÕES WEB
MULTIPLATAFORMA
CÓDIGO ÚNICO, MÚLTIPLAS
EXPERIÊNCIAS

2. SOBRE MIM
Alexandre Magno - Desenvolvedor Web na globo.com

3. não é novidade que
via dispositivos móveisvem aumentando…
O ACESSO A WEB
de forma insana

4. Jan
Julho
Dezembro
0 25 50 75 100
CELULAR VS TABLET
2014

5. não é novidade que
nos celulares e tablets lidera em relação aos PCS e notebook
O ACESSO A WEB

6. 1/3 de usuários de
internet
nos EUA usam o
celular como primeiro
dispositivo de acesso
a internet

7. mas, quando acessamos a internet via celular
estão prontos?
OS SITES NOS
DISPOSITIVOS

10. EM TODOS OS
DISPOSITIVOS?
Como unificar 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 sub Aplicaçã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
devices browser
desktop/tv
1
2
3

14. Aplicação
Aplicação
Aplicação
Solução intermediária
APP
devices browser
desktop/tv

15. Fonte única de dados para diferentes dispositivos
API
device API

16. DEVICE API
API’s HTML5 e Javascript que explora
as capacidades do aparelho

20. A questão é:
Para se construir uma solução
multiplataforma?
QUAL PLATAFORMA
DEVEMOS UTILIZAR?

22. TUDO DEPENDE DO CONTEXTO
tela grande, focado, confortável, digitação eficiente e parado!

24. 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

25. 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

26. ?
ARQUITETURA MULTIPLATAFORMA
x

27. WYSIWYG
CONTENT FIRST
antes:
depois:
Para quem gera conteúdo:

28. lhe convido a conhecer:
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 styles FTW */
@media all and (min-width: 50em)
{
.column {
float: left;
width: 50%;
}
}

34. JAVASCRIPT
NÃO OBSTRUTIVO
lhe convido a usar:

35. JAVASCRIPT SOB DEMANDA
lhe convido a usar:

36. Modernizr.load({
test: Modernizr.geolocation,
yep : 'geolocation.js',
nope: 'find-by-ip.js'
});
Testando geolocation

37. ninguém fica perdido no espaço

38. COMO TRATAR IMAGENS?
chegamos a um sério problema:

39. https://github.com/scottjehl/picturefill

41. Icon fonts

42. SCALABLE VECTOR GRAPHIC

43. RETINA READY
ESCALÁVEL

44. FRAMEWORKS

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. Temos um carrossel
multidevice

48. //variaveis
@column-width: 60;
@gutter-width: 20;
@columns: 12;
header { .column(12); }
article { .column(9); }
aside { .column(3); }
SEMANTIC GRIDS

50. MOBILE FIRST
MAGIC GRID

51. PARA O USUÁRIO
Se é uma APP, mobile site, ou o que for…

52. QUERO USAR

53. QUERO SURFAR

55. QUAL PLATAFORMA
DEVEMOS UTILIZAR?
A questão é:
Para se construir uma solução
multiplataforma?

57. alexanmtz@gmail.com
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net