engenharia de front end de alta performance

naoesqueca.comdúvidas? #FIR2011

Engenharia de frontend de alta performance

@andersonSolano




@andersonSolano

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

Tenha sempre em mente



@andersonSolano

Keep It Simple, Stupid!


Admin

Note

http://pt.wikipedia.org/wiki/Keep_It_Simple



@andersonSolano




@andersonSolano

Preguiça


Admin

Note

Não no setido literal, mas no sentido de reuso de código, pq fazer o mesmo código mais de uma vez?



@andersonSolano

Ferramentas



@andersonSolano

Ferramentas

Editor de código Firebug Yslow Pagespeed Webdeveloper

Colorzilla Measureit! Firefox collection Html validator Screen grab!

Css usage Virtualbox / VM Ware lynx Editor de

imagens

Admin

Note

- Editor de código da sua preferencia, pode ser Dreamweaver, desde que nao no modo visual, mas tome cuidado com autocomplete de código, um vc pode não ter e não saber escrever seu código. - Firebug é um plugin para firefox com diversas utilidades, as maiores são facilidade para debugar javascript e identificar quais regras de CSS estão sendo utilizadas por elemento na página. - Yslow é outro plugin para firefox que mede o desempenho da página, ele informa o que está ruim e como melhorar, se imagens precisarem ser otimizadas ele da algumas dicas. - Pagespeed, faz basicamente a mesma coisa que o Yslow, só que lhe dá as imagens já otimizadas, também é plugin para firefox. - Webdeveloper, plugin para firefox muito util para exibir todos os JS e CSS da página, entre muitas outras coisas. - Colorzilla é outro plugin para firefox que te dá um colorpicker. - MeasureIt é uma régua, no webdeveloper tbm tem uma, mas essa é mais intuitiva. - Firefox Collection instala todas as versões de firefox. - HTML validator, para quem tem problemas com validação de código, esse plugin do firefox ja exibe junto do código fonte se está com o código válido ou nao, caso nao esteja ja aponta o erro e a solução. - Screengrab!, plugin para firefox que tira um print da pagina inteira, vc não precisa tirar varios prints e montar no photoshop. - CSS Usage, plugin para firefox que mostra quais regras do css estão ou não sendo usadas e tem a opção de exportar o css só com as regras utilizadas. - Virtualbox / VMWare maquina virtual de sistema operacional, muito bom para testes em browsers antigos que não podem ser instalados juntos com os novos ou outros sistemas como linux e Mac OS. - Lynx, browser modo texto, bom para testar acessibilidade e entender mais ou menos como os buscadores, Google por exemplo, lê seu site. - Editor de imagens de sua preferência, Photoshop, Gimp são algumas opções, Fireworks, na minha opinião, não é! :)



@andersonSolano

o que fazer para o site ficar mais rápido



@andersonSolano

O que fazer para o site ficar mais rápido

sprites



@andersonSolano

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)

O que fazer para o site ficar mais rápido / sprites



@andersonSolano

Sprites

Porque usar sprites?

Dá para usar sprites para todas as imagens?

O que fazer para o site ficar mais rápido / sprites

Admin

Note

Exceto imagens de conteúdo, por exemplo fotos de produto, usuários, etc.



@andersonSolano

Exemplo de spriteO que fazer para o site ficar mais rápido / sprites

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

CSS




@andersonSolano

CSS

CSS genérico ou “amarrado”?

Quando o CSS genérico é bom?

Quando o CSS amarrado é bom?

O que fazer para o site ficar mais rápido / CSS

Admin

Note

Depende da sua situação, o ideal é um meio termo.

Admin

Note

Em geral, só na área de publicação de conteúdo, que é administrado por um CMS, tipo conteúdo de um post no wordpress.

Admin

Note

100% amarrado, nunca, pq dizer que um elemento do site, por exemplo uma lista de links, é sempre da coluna da esquerda, na hora que seu cliente quiser trocar, e é bem provável que ele queira, vc terá que mover o html e mecher no css.



@andersonSolano

javascript




@andersonSolano

javascript

JS puro ou framework?

O que fazer para o site ficar mais rápido / javascript

Admin

Note

depende de quanto do framework será utilizado, se for só para fazer um menu dropdown, javascript puro é melhor, por ser menor, quanto menos coisas para fazer download na página mais rápido seu site ficará.



@andersonSolano

HTML




@andersonSolano

HTML

menor código possível ou código mais otimizado?

O que fazer para o site ficar mais rápido / HTML

Admin

Note

Sempre, código mais otimizado, faça sempre o melhor código possivel, fazendo o menor código possivel inconsientemente vc estará deixando seu css amarrado.



@andersonSolano

conhecimentos que fazem a diferença



@andersonSolano

CDN

Download de elementos da página

Interpretação dos seletores pelo browser

Estresse do browser com CSS e JS

Overlays e selects no IE6

Conhecimentos que fazem a diferença

DNS

Montar o ambiente de desenvolvimento

Noções de SEO

Microformats e schema.org

Noções de programação backend

Admin

Note

- DNS http://pt.wikipedia.org/wiki/Domain_Name_System - Montar o ambiente de desenvolvimento sabendo isso vc prestará mais atenção em algumas coisas que só se descobre quando se sabe configurar um servidor. - Noções de SEO, além de conhecimento vc não terá o responsável de SEO da sua empresa no seu ouvido o tempo todo. - Microformats e schema.org, meta informação através do html. - Noções de programação backend muitos programadores, infelizmente, não sabem html, se vc souber o suficiente para fazer a integração lhe poupará tempo e retrabalho.

Admin

Note

- CDN http://pt.wikipedia.org/wiki/Content_Delivery_Network - download de elementos da página o browser carrega o html, de 2 a 4 imagens por vez, javascript para o carregamento de qualquer outra coisa na página. - Interpretação dos seletores pelo browser https://developer.mozilla.org/en/Writing_Efficient_CSS (em ingles, essas regras valem para qualquer browser) - Estresse do browser com CSS e JS basicamente o estresse por CSS é evitado fazendo seletores eficientes, por JS é modificando propriedades o minimo possivel, o que puder ser feito só adicionando uma classe e css melhor que colocando toda a delcaração pelo JS. - Overlays e selects no IE6 apesar de estar sendo abandonado, ainda tem quem sofra com isso, basta ao colocar um lightbox, escoder todos os selects com vibility hidden, ou por baixo do lightbox, ter um iframe "invisivel".



@andersonSolano

Simplificando as coisas



@andersonSolano

Exemplo 01Simplificando as coisas



@andersonSolano


engenharia de front end de alta performance

Technology

coisas engenharia

alta performanceexemplo

alta performance sprites

alta performance css

diferena engenharia

alta performance tenha

ferramentas engenharia

em mente engenharia