Embed Size (px)
Citation preview
Engenharia Front-EndDiogo Corrêa
Quem? Eu?Front-End [email protected]
Engenharia Front-End - Como surgiu - O que é preciso saber - Importância - Como se tornar
Request -> Aplicação -> BD+
html=
Página
A web há uns anos atrás
Yahoo em 1994
Google em 1998
Facebook em 2004
Twitter em 2006
A web há uns anos atrás - Interface estática
A web há uns anos atrás - Interface estática - Layout feito com tabelas
<html> <body> <table width="400" align="center"> <tr> <td> <table> <tr> <td><a href="/">Site</a></td> <td><a href="/contato">Contato</a></td> </tr> </table> </td> </tr> <tr> <td> <table width="200" border="0"> <tr> <td> <h1>Site</h1> </td> </tr> <tr> <td> <p>Loren Ipsun</p> </td> </tr> </table> </td> </tr> </table> </body></html>
A web há uns anos atrás - Interface estática - Layout feito com tabelas - Conteúdo misturado com apresentação
<td> <font face="verdana" color="red" size="5">
<center> <a href="/">Site</a>
</center></font>
</td>
A web há uns anos atrás - Interface estática - Layout feito com tabelas - Conteúdo misturado com apresentação - Nenhuma otimização (SEO, performance)
1994 World Wide Web Consortium
W3C - Padrões / Webstandards
W3C - Padrões / Webstandards - Semântica
W3C - Padrões / Webstandards - Semântica - Acessibilidade
W3C - Padrões / Webstandards - Semântica - Acessibilidade - Desenvolvimento em camadas
ConteúdoHTML
+Apresentação
CSS
+Comportamento
Javascript
W3C - Padrões / Webstandards - Semântica - Acessibilidade - Desenvolvimento em camadas
Por que demorou tanto?
Designers + Código=
Front-End=
Desenvolvedores+ Estética
Front o que? - designer de interface - cortador de layout - codificador html / htmler - desenvolvedor front-end - engenheiro de front-end
O que é preciso saber?
CSS takes a day to learn but a lifetime to master
HTML
CSSJavascript
DOM Bibliotecas / Frameworks
AJAXAcessibilidade
Usabilidade
SEOHTTP
Otimização de Performance
Sistemas Operacionais Browsers Dispositivos móveis
Fw / Ps / AiDesign
Tipografia
OOCSSBEM Preprocessadores
"Browsers are the most hostile software engineering environment
possible" - Douglas Crockford
Nós escrevemos software em HTML, CSS e Javascript
Nós somos responsáveis pelo view source
Nós dizemos ao browsero que fazer
Nós somos ditadores da qualidade
Nós somos defensoresdo usuário
A web ainda está doente
Sites - Google.com - Maujor.com - Tableless.com.br - 24way.org - alistapart.com
Pessoas - Bernard De Luna - Zeno Rocha - Diego Eis - Maujor
Pessoas - Cris Coyer css-tricks.com
- Nicole Sullivan stubbornela.com
- Paul Irish paulirish.com
- Nicolas Gallagher nicolasgallagher.com
- Steve Souders stevesouders.com
Livros - Maujor maujor.com
- Smashing Magazine smashingmagazine.com
EstudeProcure
Envolva-se
Obrigado
