front-end engineer
Post on 29-Jun-2015
354 Views
Preview:
DESCRIPTION
TRANSCRIPT
<FRONT-END />ENGINEER
<ivanbanov />
APLICAÇÃO WEB
Yahoo!
Yahoo!
Nike
Nike
Apple
Apple
E onde entra o tal Front-End?
Layout(designer)
Layout(designer)
java, python, ruby, C# ...
(back-end)
Layout(designer)
html / css/ js(front-end)
java, python, ruby, C# ...(back-end)
Ahhh, é o cara querecorta layout...
ENGENHARIAFRONT-END
<html>- marcação semântica- arquitetura e corpo da aplicação
<html>- marcação semântica- arquitetura e corpo da aplicação
{css}- estilização- classes modulares
<html>- marcação semântica- arquitetura e corpo da aplicação
{css}- estilização- classes modulares
- comportamento- eventos, metodos e firulas
js()
Performance
"80-90% of the end-user response
time is spent on the frontend."
- Steve Souder
E...
- Usabilidade (humano ~ computador)
- Acessibilidade
- Webstandards (w3c)
- Cross-browser
- Modularização de arquivos
- Escalabilidade
- HTTP
SEOBonus Track
<div class="titulo"> Harlem Shake </div><div class="subtitulo"> crazy dance </div>
<div class="conteudo">Con los terroristas(ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)And do the Harlem ShakeShake, Ey (shake)
</div>
<h1> Harlem Shake </h1><h2> crazy dance </h2>
<article>Con los terroristas(ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)And do the Harlem ShakeShake, Ey (shake)
</article>
E mais para os robôs...
- meta tags - tiltes - alternative texts para imagens - url amigavel - sitemap.xml - flash #fail
E mais para os robôs...
Ajuda?
maujor.comtableless.com.brcss-trick.comfrontendbrasil.com.brlea.verou.meimasters.com.br/front-endgoogle.com :)
@maujor@diegoeis@chriscoyier@zenorocha@leaverou
Obrigado!
top related