Engenharia Front-End

Preview:

Citation preview

Engenharia Front-EndDiogo Corrêa

Quem? Eu?Front-End Senior@diogocorreadiogocorrea.com.br

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

é isso aê!Perguntas?

@diogocorrea - diogocorrea.com.br - diogodca@gmail.com

Obrigado