do front end legado a web mobile

Do front-end legado
à web mobile
Pequenos passos para uma
transição sem traumas

domingo, 20 de outubro de 13

Desenvolvedor e instrutor na Caelum.
Também graduado em psicologia. Hoje
com grande foco em front-end.

Instrutor e desenvolvedor na Caelum.
Atualmente trabalha com desenvolvimento
front-end, com foco em web mobile.


Sem traumas
???


Legado
Aquilo que alguém TRANSMITE a
outrem, que uma GERAÇÃO,
escola literária, etc., transmite à
POSTERIDADE, etc.
- Dicionário Aurélio


Front-end legado?
Não esqueça que
a WEB É ÚNICA!


Front-end
Legado
Conjunto anacrônico herdado de
práticas e tecnologias front-end
que não leva em conta a web
única. Geralmente com foco em
Desktop.

Possíveis Soluções
Começar do ZERO?
Apenas em NOVOS projetos?
Não fazer NADA?


Foque PRIMEIRO em tudo
aquilo que FRUSTRA seus
USUÁRIOS ...

e que já possa ser
implementado
RAPIDAMENTE.

PARTE I
Fazendo MÁGICA
com POUCO


ENTRADA DE DADOS


NOVOS ELEMENTOS
DO HTML 5


<input type="date">
<input type="email">
Não esqueça!

<input type="number">

<!DOCTYPE html>

<input type="tel">
<input type="range">

GEOLOCALIZAÇÃO


GOOGLE MAPS
<script src="http://maps.google.com/
maps/api/js?sensor=true"></script>
window.navigator.geolocation
.getCurrentPosition(function(posicao) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(......);
});

OPEN STREET MAPS
http://nominatim.openstreetmap.org/reverse?
format=json&json_callback=
preencherDados&lat=-23.5880894&lon=-46.6321
951
preencherDados({"place_id":"19543416","licence":"Data u00a9
OpenStreetMap contributors, ODbL 1.0. http://
www.openstreetmap.org/
copyright","osm_type":"node","osm_id":"1791819411","lat":"-23.588
3154","lon":"-46.6324003","display_name":"Santander, Rua
Vergueiro, Chu00e1cara Klabin, Vila Mariana, Su00e3o Paulo,
RMSP, Su00e3o Paulo, Regiu00e3o Sudeste, 04110-040,
Brasil","address":{"bank":"Santander","road":"Rua Vergueiro".....


DRAG N’ DROP


JQUERY UI

DRAG N’DROP NÃO ROLA


TOUCH PUNCH
http://touchpunch.furf.com
<script src="jquery.ui.touch-punch.min.js">


JQUERY MOBILE
http://jquerymobile.com/
$(‘.adiciona’).on(‘swipeleft’, funcao);

HAMMERJS
http://eightmedia.github.io/hammer.js/
Hammer(‘.adiciona’).on(‘swipeleft’, funcao);


PARTE 2
UM POUCO MAIS DE
TRABALHO


Velocidade


MINIFICAÇÃO
CONCATENAÇÃO

BANDA
LATÊNCIA

Há BOAS PRÁTICAS
ainda IGNORADAS


CONSIDERE usar GRUNT em seu
WORKFLOW

http://gruntjs.com

CONSIDERE...

“BUILDAR” seu JQUERY

grunt custom: -effects
Sorry, no CDN


CONSIDERE...
migrar para JQUERY
usar

ZEPTO

2.0

Sorry, no IE!

usar AMBOS, MAS...


Apenas IE 9+

IE 10
NO MORE

CONDITIONAL
COMMENTS

IE 10
NO MORE


CONDITIONAL
COMMENTS

IE 10
NO MORE

CONDITIONAL
COMMENTS

<script>
document.write('<script src='
+('__proto__' in {} ? 'zepto' : 'jquery') +'.js>
</script>');
</script>


PARTE 3
MAIS TRABALHO
AINDA


DESKTOP

MOBILE

QUEBROU!
QUEBROU!


QUEBROU?
QUEBRAR = BREAK


QUEBROU?
MEDIA QUERIES
QUEBRAR = BREAK

BREAKPOINT

.menu-navegacao {

float: left;
}
.artigo {

float: left;
}
.painel-novidades {

float: left;
}


.menu-navegacao {

float: left;
}
.artigo {

float: left;
}
.painel-novidades {

float: left;
}

}


.menu-navegacao {

float: none;

display: inline;
}


.menu-navegacao {

width: 100%;

display: block;

}
}



.painel-novidades {

position: ﬁxed;

top: 0;

left: 70%;

width: 30%;

}
}

Hammer(menu).on("tap", function(ev) {
if(width <= 547) {
}
});


Hammer(menu).on("tap", function(ev) {
if(width <= 547) {
}
});


.lista-novidades {

display: none;

}
}

E AS TABELAS?



table, thead, tbody, th, td, tr {

display: block;

}

}

thead tr {

position: absolute;

left: -9999px;
}


td {

text-align: right;

}
}



td:nth-of-type(1):before {

content: "Nome";

}


content: "Sobrenome";

}


content: "Idade";

}

}


td:before {

font-weight: bold;
}


td {

position: relative;

}

}


td:before {

position: absolute;

left: 6px;

top: 6px;
}

BACKGROUND-IMAGE
NO TITULO


header h1 {
display: block;
width: 660px;
height: 170px;
text-indent: -9999px;
background-image: url(img/logo.png);
}


header h1 {

display: block;
width: auto;

height: 6em;



}

header h1 {

display: block;
width: auto;

height: 6em;



background-position: center;

background-repeat: no-repeat;

background-size: contain;
}

OBRIGADO!
@flaviohalmeida
flavio.almeida@caelum.com.br
vitor.mattos@caelum.com.br


do front end legado a web mobile

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a do front end legado a web mobile

Semelhante a do front end legado a web mobile (18)

do front end legado a web mobile