Aplicações web multiplataforma - único código, múltiplas experiência
-
Upload
alexandre-magno-teles-zimerer -
Category
Internet
-
view
215 -
download
1
Transcript of Aplicações web multiplataforma - único código, múltiplas experiência
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
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
/* 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%; }}
Modernizr.load({ test: Modernizr.geolocation, yep : 'geolocation.js', nope: 'find-by-ip.js'});
Testando geolocation
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();}
});
//variaveis@column-width: 60;@gutter-width: 20;@columns: 12;
header { .column(12); }article { .column(9); }aside { .column(3); }
SEMANTIC GRIDS
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net