Your SlideShare is downloading. ×
Engenharia de front end de alta performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Engenharia de front end de alta performance

3,235
views

Published on

Slides da palestra "Engenharia de front end de alta performance" para o Front in Rio 2011, com comentários caso alguém tenha esquecido alguma coisa :)

Slides da palestra "Engenharia de front end de alta performance" para o Front in Rio 2011, com comentários caso alguém tenha esquecido alguma coisa :)

Published in: Technology

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

No Downloads
Views
Total Views
3,235
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Engenharia de frontend de alta performance Engenharia de frontend de alta performance@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 2. Engenharia de frontend de alta performance Mas porque engenharia? A engenharia é a ciência e a profissão de adquirir e aplicar os conhecimentos matemáticos, técnicos e científicos na criação, aperfeiçoamento e implementação de utilidades, tais como materiais, estruturas, máquinas, aparelhos, sistemas ou processos, que realizem uma determinada função ou objetivo. Fonte: http://pt.wikipedia.org/wiki/Engenharia@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 3. Engenharia de frontend de alta performance Tenha sempre em mente@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 4. Tenha sempre em mente Engenharia de frontend de alta performance@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 5. Tenha sempre em mente Engenharia de frontend de alta performance Keep It Simple, Stupid!@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 6. Tenha sempre em mente Engenharia de frontend de alta performance@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 7. Tenha sempre em mente Engenharia de frontend de alta performance Preguiça@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 8. Engenharia de frontend de alta performance Ferramentas@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 9. Ferramentas Engenharia de frontend de alta performance Editor de Firebug Yslow Pagespeed Webdeveloper código Firefox Colorzilla Measureit! Html validator Screen grab! collection Virtualbox / Editor de Css usage lynx VM Ware imagens@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 10. Engenharia de frontend de alta performance o que fazer para o site ficar mais rápido@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 11. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance sprites@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 12. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance O que é sprite? Em computação gráfica, um sprite é um objeto gráfico bi ou tridimensional que se move numa tela sem deixar traços de sua passagem (como se fosse um "espírito"). Os sprites foram inventados originalmente como um método rápido de animação de várias imagens agrupadas numa tela, em jogos de computador bidimensionais, usando hardware especial... Fonte: http://pt.wikipedia.org/wiki/Sprite_(gráfico)@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 13. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance Sprites Porque usar sprites? Dá para usar sprites para todas as imagens?@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 14. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance Exemplo de sprite Dimensões em pixel: 500 x 1200 Tamanho em kb: 450 Tempo de carregamento: 2.4s Agrupamento de 202 imagens Qual o tamanho em kb se não estivessem agrupadas? Maior controle das imagens utilizadas no site Menos imagens de layout para o site inteiro Agrupamento no css do uso das imagens Felicidade do designer por manter aquela sombrinha “essencial” E o melhor, poder de negociação para cortar aquela bossa chata de ser implementada@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 15. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance CSS@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 16. O que fazer para o site ficar mais rápido / CSS Engenharia de frontend de alta performance CSS CSS genérico ou “amarrado”? Quando o CSS genérico é bom? Quando o CSS amarrado é bom?@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 17. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance javascript@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 18. O que fazer para o site ficar mais rápido / javascript Engenharia de frontend de alta performance javascript JS puro ou framework?@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 19. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance HTML@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 20. O que fazer para o site ficar mais rápido / HTML Engenharia de frontend de alta performance HTML menor código possível ou código mais otimizado?@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 21. Engenharia de frontend de alta performance conhecimentos que fazem a diferença@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 22. Conhecimentos que fazem a diferença Engenharia de frontend de alta performance CDN DNS Montar o ambiente de Download de elementos da página desenvolvimento Interpretação dos seletores pelo Noções de SEO browser Estresse do browser com CSS e JS Microformats e schema.org Overlays e selects no IE6 Noções de programação backend@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 23. Engenharia de frontend de alta performance Simplificando as coisas@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 24. Simplificando as coisas Engenharia de frontend de alta performance Exemplo 01@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 25. Simplificando as coisas Engenharia de frontend de alta performance Exemplo 02@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 26. Simplificando as coisas Engenharia de frontend de alta performance Exemplo 03@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 27. Engenharia de frontend de alta performance@andersonSolano dúvidas? #FIR2011 naoesqueca.com
  • 28. Engenharia de frontend de alta performance@andersonSolano dúvidas? #FIR2011 naoesqueca.com