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

8.
EM TODOS OS
DISPOSITIVOS?
Como unificar Todas estas tecnologias

9.
O desafio é ainda maior
E ainda ter o melhor suporte possível?
COMO SER
MULTIPLATAFORMA
E EXPLORAR OS
MELHORES RECURSOS
DOS DISPOSITIVOS?

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.
Aplicação
Aplicação
Aplicação
Como está acontecendo
APP
devices browser
desktop/tv
1
2
3

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

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

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

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

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

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.
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.
?
ARQUITETURA MULTIPLATAFORMA
x

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

21.
lhe convido a conhecer:
MOBILE FIRST

22.
/* Desktop-first styles: Avoid */
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}

23.
/* Mobile-first styles FTW */
@media all and (min-width: 50em)
{
.column {
float: left;
width: 50%;
}
}

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

25.
JAVASCRIPT SOB DEMANDA
lhe convido a usar:

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

27.
ninguém fica perdido no espaço

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

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

30.
Icon fonts

31.
SCALABLE VECTOR GRAPHIC

32.
RETINA READY
ESCALÁVEL

33.
FRAMEWORKS

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

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

37.
MOBILE FIRST
MAGIC GRID

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

39.
QUERO USAR

40.
QUERO SURFAR

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

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