Embed Size (px)
Citation preview
na palestra de agora…
APLICAÇÕES WEB MULTIPLATAFORMA
CÓDIGO ÚNICO, MÚLTIPLAS EXPERIÊNCIAS
não é novidade que
via dispositivos móveis vem aumentando…
O ACESSO A WEB
de forma insana
Jan
Julho
Dezembro
0 25 50 75 100
CELULAR VS TABLET2014
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 internetnos 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
DOS DISPOSITIVOS?
Aplicação
sub Aplicação sub Aplicação sub Aplicação
Possível solução ao cenário atual
APPdevices browser desktop/tv
AplicaçãoAplicação
Aplicação
Como está acontecendo
APPdevices browser
desktop/tv
1
2
3
Aplicação
Aplicação
Aplicação
Solução intermediária
APPdevices browserdesktop/tv
Fonte única de dados para diferentes dispositivos
API
device API
DEVICE APIAPI’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
desenvolvimento para uma maior entrega de forma escalável
FORAM DIVERSAS
•Sites .m
•Design responsivo
•RESS
•Mobile First
1
2
3
4
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 dispositivoOferece suporte gradativamente
O que é carregado no desktop vai para todos outros
Conteúdo por dispositivo específico Todo conteúdo é carregado
?
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: none; width: auto; }}
/* 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:
Icon fonts
SCALABLE VECTOR GRAPHIC
RETINA READYESCALÁVEL
FRAMEWORKS
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();}
});
Temos um carrossel
multidevice
//variaveis@column-width: 60;@gutter-width: 20;@columns: 12;
header { .column(12); }article { .column(9); }aside { .column(3); }
SEMANTIC GRIDS
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?
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net
