Engenharia Front-End      Diogo 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>                      <tabl...
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 otimiz...
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údo    HTML       + 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...
O que é preciso saber?
CSS takes a day to learnbut a lifetime to master
Tipografia                      BEM               Preprocessadores                   OOCSS                  Otimização de ...
"Browsers are the most hostilesoftware 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 browser      o que fazer
Nós somos ditadores   da qualidade
Nós somos defensores     do 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 nicolasga...
Livros- Maujor maujor.com- Smashing Magazine smashingmagazine.com
Estude  ProcureEnvolva-se
é isso aê!                   Perguntas?@diogocorrea - diogocorrea.com.br - diogodca@gmail.com
Obrigado
Engenharia Front-End
Engenharia Front-End
Engenharia Front-End
Engenharia Front-End
Upcoming SlideShare
Loading in...5
×

Engenharia Front-End

1,149

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,149
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Engenharia Front-End

  1. 1. Engenharia Front-End Diogo Corrêa
  2. 2. Quem? Eu?Front-End Senior@diogocorreadiogocorrea.com.br
  3. 3. Engenharia Front-End- Como surgiu- O que é preciso saber- Importância- Como se tornar
  4. 4. Request -> Aplicação -> BD + html = Página
  5. 5. A web há uns anos atrás
  6. 6. Yahoo em 1994
  7. 7. Google em 1998
  8. 8. Facebook em 2004
  9. 9. Twitter em 2006
  10. 10. A web há uns anos atrás- Interface estática
  11. 11. A web há uns anos atrás- Interface estática- Layout feito com tabelas
  12. 12. <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>
  13. 13. A web há uns anos atrás- Interface estática- Layout feito com tabelas- Conteúdo misturado com apresentação
  14. 14. <td> <font face="verdana" color="red" size="5"> <center> <a href="/">Site</a> </center> </font></td>
  15. 15. 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)
  16. 16. 1994 World Wide Web Consortium
  17. 17. W3C- Padrões / Webstandards
  18. 18. W3C- Padrões / Webstandards- Semântica
  19. 19. W3C- Padrões / Webstandards- Semântica- Acessibilidade
  20. 20. W3C- Padrões / Webstandards- Semântica- Acessibilidade- Desenvolvimento em camadas
  21. 21. Conteúdo HTML + Apresentação CSS +Comportamento Javascript
  22. 22. W3C- Padrões / Webstandards- Semântica- Acessibilidade- Desenvolvimento em camadas
  23. 23. Por que demorou tanto?
  24. 24. Designers + Código = Front-End =Desenvolvedores+ Estética
  25. 25. Front o que?- designer de interface- cortador de layout- codificador html / htmler- desenvolvedor front-end- engenheiro de front-end
  26. 26. O que é preciso saber?
  27. 27. CSS takes a day to learnbut a lifetime to master
  28. 28. Tipografia BEM Preprocessadores OOCSS Otimização de Performance Fw / Ps / Ai AJAX HTML SEO Design HTTP Javascript CSS Acessibilidade Usabilidade DOM Bibliotecas / FrameworksSistemas Operacionais Browsers Dispositivos móveis
  29. 29. "Browsers are the most hostilesoftware engineering environment possible" - Douglas Crockford
  30. 30. Nós escrevemos software em HTML, CSS e Javascript
  31. 31. Nós somos responsáveis pelo view source
  32. 32. Nós dizemos ao browser o que fazer
  33. 33. Nós somos ditadores da qualidade
  34. 34. Nós somos defensores do usuário
  35. 35. A web ainda está doente
  36. 36. Sites- Google.com- Maujor.com- Tableless.com.br- 24way.org- alistapart.com
  37. 37. Pessoas- Bernard De Luna- Zeno Rocha- Diego Eis- Maujor
  38. 38. Pessoas- Cris Coyer css-tricks.com- Nicole Sullivan stubbornela.com- Paul Irish paulirish.com- Nicolas Gallagher nicolasgallagher.com- Steve Souders stevesouders.com
  39. 39. Livros- Maujor maujor.com- Smashing Magazine smashingmagazine.com
  40. 40. Estude ProcureEnvolva-se
  41. 41. é isso aê! Perguntas?@diogocorrea - diogocorrea.com.br - diogodca@gmail.com
  42. 42. Obrigado
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×