http://andafter.org/blogs/odesenvolvedor/publicacoes/switch-no-javascript.html

Já escrevi alguns posts sobre otimização de sites, usando CSS sprites ou diminuindo código, nesta toada apresento-lhes o image sprites.

O IMG sprite tem o mesmo funcionamento do CSS sprites, a diferença é que usado com a tag IMG a imagem é carregada no HTML e não no CSS, que para performance muda em… Nada ou muito pouco, no entanto, é bem interessante de ser usado. Comumente usamos (quem usa) os css sprites trocando um conteúdo por uma imagem isso não é uma pratica muito apreciada pelo Google, além disso, essas imagens não aparecem nas impressões dos usuários.

Vamos fazer uma lista de botões de redes sociais como vemos em toda a internet. Um ao lado do outro, sem nada de diferente.

Imagem

HTML

<ul class="compartilhamento">
	<li class="twitter">
		<a href="http://twitter.com/leandrogarcia">
			<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
		</a>
	</li>
	<li class="facebook">
		<a href="http://www.facebook.com/leandrooliveiragarcia">
			<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
		</a>
	</li>
	<li class="orkut">
		<a href="http://www.orkut.com.br/Main#Profile?uid=1629432921042186633">
			<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
		</a>
	</li>
	<li class="rss">
		<a href="http://www.leandrogarcia.com/feed/">
			<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
		</a>
	</li>
</ul>

CSS

.compartilhamento li{float:left;width:34px;height:34px;overflow:hidden}
.compartilhamento li.twitter img{margin: 0 0}
.compartilhamento li.facebook img{margin: -36px 0 0}
.compartilhamento li.orkut img{margin: -37px -37px 0}
.compartilhamento li.rss img{margin: 0 -37px 0}

Veja o exemplo

Trabalhar com o IMG sprite é tão simples quanto o CSS sprite.

Uma pratica interessante é mesclar os dois, ou seja, uma única imagem com as imagens de layout e aquela que tem papel efetivo na página, usando o css sprites para os elementos de layout e o img sprites para elementos com papel efetivo. Isto acarretará em duas requisições, mas a imagem já vai estar cacheada, de modo que para o usuário é como se fosse praticamente um único.

Uma prática interessante é otimizar as imagens que você usará no site, uma prática, é diminuir um pouco a qualidade da imagem no photoshop, diminuir cerca de 20% não costuma alterar a percepção do usuário em relação à imagem.

Recentemente fui apresentado ao Y! Smush.it, que é um serviço do Yahoo que comprime a imagem retirando bytes desnecessário sem alterar a qualidade da imagem, como ele você consegue economizar em média uns 4% do tamanho da imagem. Claro que quatro porcento é pouco, mas se somarmos a isso, várias imagens ao site e milhares de acessos ao mês, temos uma montante considerável de tráfego em banda.

O Uso é extremamente simples, sobe o arquivo a a URL, ele comprime e passa o link para o download da imagem otimizada… Muito bom, recomendo.

http://www.smushit.com/ysmush.it/

No TDD você primeiro escreve seu teste e depois o código, ou seja, você diz qual é o resultado esperado por determinada ação e programa em cima disso.

Qual a vantagem?

Uma vantagem interessante é que dessa forma você evita erros no código, logo perde-se menos tempo caçando os bugs, mas na minha opinião a principal vantagem é ter todos as casos de teste escritos de forma que se você ao criar uma outra interação que provoque um erro em alguma coisa que você tenha programado anteriormente, você saberá exatamente onde está o erro.

Não é simples começar a programar orientado à testes, pois são necessárias quebras de paradigmas, além, de ter a sensação de que da maneira tradicional é mais fácil. mas essa sensação é a mesma sempre que começamos a trabalhar de maniera diferente, seja passando a usar padrões de desenvolvimento (Design Patterns) como o MVC, iniciar com orientaçõa à objetos, usar um novo framework ou programar em uma nova linguagem. É sensação ocorre porque saimos da zona de conforto. Afinal, é muito mais fácil se aperfeiçoar no modelo que você segue do que seguir um outro caminho.

Existem formas de se programar orientado à testes, a mais comum e fácil, é usar um framework específico para isso, praticamente toda linguagem que trabalha com objetos tem um ou mais frameworks para efetuarem esse trabalho.

Em Javascript temos o JsUnit e o JsMock, entre outros. Ja em PHP tempos o SmipleTestPHP e o PHPUnit pra Java tem o jUnit entre tantas outras linguagens.

É bacana dar uma vasculhada na internet atrás de tutoriais a respeito de TDD pra linguagem que você prefere. Em breve devo postar algum sobre tdd em Javascript e PHP.

A poucos comentei aqui sobre a importancia do versionamento de código.  Mencionei na ocasião que iria explicar o funcionamento de uma opção.

Bom, recapitulando, existem diversas ferramentas para verionamento de código. Essa que vou mostrar é uma, que é free e eu achei muito boa.

Bom, a ferramenta é chamada bitbucket e usa a tecnologia mercurial para versionamento.  Existem algumas opções pagas e uma free para até 5 usuários. É com essa que vamos trabalhar.

Faça seu cadastro. Logue.

Note que na direita da tela tem uma parte chamada repositories.

No meu caso, aparecem os que eu ja tenho, pra você que esta secadastrando agora  não deve aparecer nenum. Note o cadeado apos o coração e antes no nome, isso significa que você pode abruir seu código para o mundo ou não. No meu caso eu abri o app facebook futebol, que por um acaso ainda não tem quase nada e o Pakus framework que é um framework css que eu desenvolvi há algum tempo. Os demais estão fechados, pois não quero que ninguém tenha acesso.

Agora vamos criar um repositório.

Ao passar o mouse sobre o item de menu repositories, se abrirá um submenu e lá clique em create new repositorie.

Nessa tela você conta ao btbucket sobre o repositório que você quer criar. Nome, Descrição, website linguagem de programação, se é fechado para o mundo ou não, se deve monitorar cada postagem e se tem wiki.

Ao criar você tem uma tela com algumas informações e pronto. Agora temos que fazer as postagens ou commit.

Primeiro passo instaar um software para fazer isso. Indico o hgtortoise que o ser instalado no windows permite que você facilmente manipule seus repositórios.

Vá à sua pasta d desenvolvimentoclique com o botão direito do mouse, menu Tortoise HG e depois clone.

Insira o caminho de origem do repositório.

https://bitbucket.org/leandrogarcia/pakus-framework

Esse é o do framework

E o destino, ou seja a pasta que vai receber o reporitório.

Com isso você vai receber a última versão do código do repositório, no caso nada.

Agora crie seus código.

Para submeter o código, selecione o arquivo(s). Botão direito. TortoiseHg. AddFiles

Note que os arquivos que serão submetidos receberão um icone de mais

em seguida, botão direito, HG Commit

Escrea quais alterações você fez, sem o texto, nõa é possível efetuar o commit. Depois consolidar(commit) e pronto

Aproveitem

No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.

Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:

Diminua a quantidade de requisições http.

Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;

Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.

Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.

Se possível utilizar apenas um arquivo JS.

Cachear a página ou Header Expires

A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.

Compressão de componentes (Gzip Components)

Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.

Colocar as folhas de estilo no Header

Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header

Colocar os Scripts na parte inferior

O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.

Evite expressões em CSSs

Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.

ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Folhas de Estilo (CSS) e Scripts (JS) externo

Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.

Otimize seus CSSs e JSs.

Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.

Neste link, eu escrevi como se pode otimizar os códigos CSSs

Evite redirecionamentos

Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.

Remova scripts duplicados

Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.

Reduza o número de DOMs

Reduza ao máximo as “firulas” via DOM do seu código.

Iframes

Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.

Escolha <link> ao invés de @import

Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.

E tem várias outras maneiras.

O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.

Como verificar como está  o carregamento de meu site?

Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou)  (Porque está devagar).

O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.

No Próximo Post eu vou explicar como funciona o Yslow.

Dando sequência, vamos otimizar o JS.

…

Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.

Como?

Não Otimizado

function mudacor(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorTexto(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorspan(id){

document.getElementById(id).style.color = '#990000';

}

Otimizado

function $(id){ return document.getElementById(id); }

function mudacor(id){

$(id).style.color = '#990000';

}

function mudacorTexto(id){

$(id).style.color = '#990000';

}

function mudacorspan(id){

$(id).style.color = '#990000';

}

Explicando

No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.

Clique aqui e veja

Download

O doctype é a maneira de você dizer para qualquer navegador como ele deve agir ao ler seu código HTML.

Uma estórinha…

Certa vez Joãozinho, programador web experiente e usuário de firefox, programou seu site vendo-o apenas no firefox. Ele já esperava que quando fosse abrir pelo Internet Explorer fosse acontecer alguns problemas de layout, normal, porém o que ele viu deixou-o perplexo… Seu site, todo seu trabalho de dias e horas estava totalmente quebrado. Xingou a Microsoft por seu software. Resolveu abrir no Opera, no Safari, no Google Chrome, e… Tudo estranho. Joãozinho ficou desesperado, arrancando seus cabelos, mas como programador experiente que é, parou. Saiu, se acalmou e foi avaliar seu código. Seu primeiro passo foi validar seu código via W3C e para sua surpresa, o erro era simples, faltava o DOCTYPE.

Moral da estória… preste atenção no que você faz!

Por que a falta do DOCTYPE no site do João zinho causou tantos problemas?

Porque cada browser tem um padrão próprio de renderizar o HTML sem DOCTYPE.

Bela estória Garcia. Mas me diga uma coisa, Que tipos de DOCTYPES existem e onde colocá-los em meu código?

Até onde sei são quatro tipos para cada compilação HTML (HTML 4.0, HTML 4,1, XHTML, etc).

Os DOCTYPES devem ser a primeira coisa que um browser lê em seu código HTMl, ou seja, na primeira linha.

Quais são eles?

Strict, Transitional e Frameset.

XHTML STRICT

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

O Strict é o “melhor” uma vez que ao dizer para um browser renderizar com ele, você está dizendo que seguirá rigorozamente os padrões.

XHTML Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Com este você diz ao Browser que seu código está em transição, não necessáriamente seguirá rigorozamente os padrões, mas não fará um “ninho de  ratos”

XHTML FRAMESET

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Já o Frameser, ser para renderizar os enfadonhos e arcáicos Frames.

Mas o que diabos é isso? É um novo refrigerante?

Não, não é refrigenrante é a arte de fazer uma unica requisição de imagem via CSS para diversos itens.

Como assim?

Vamos começar do básico.

Segundo o Wikipedia

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.

Em português

Sprites foram originalmente inventadas como um método de composição rápida de algumas imagens juntas em jogos de video game em 2d usando hardwares especiais. Como forma de otimizar o careggamento dos softwares….

Creio que Já é o sificiente!

Vamos ao que interessa. Os Sprites em CSS

A técnica é simples e você pode utilizar para quase todas as imagens do seu layout, desde que essas imagens não se repitam dentro de um mesmo elemento ou não tenham tamanho definido. Exemplo: em um background de página você não deverá utilizar o Sprites, pois não há um delimitador de altura e largura para a exibição desta imagem.

Vamos a um exemplo prático:

Façamos um menu.

Briefing: Quatro links, cada um com a cor de fundo diferente, cada um deve ter um degradê.

1º Passo: A IMAGEM

2º Passo: O HTML

<ul class=”sprites”>
<li class=”um”><a href=”#”>1</a></li>
<li class=”dois”><a href=”#”>2</a></li>
<li class=”tres”><a href=”#”>3</a></li>
<li class=”quatro”><a href=”#”>4</a></li>
</ul>

3º Passo: O CSS

*{list-style:none}
.sprites li{float:left; text-align:center; width:50px; height:30px; background:url(http://tutoriais.leandrogarcia.com/sprites/images/sprites.jpg) repeat-x}

.sprites li.um{background-position: 0 0}

.sprites li.dois{background-position: -30px 0x}

.sprites li.tres{background-position: 0 -60px}

.sprites li.quatro{background-position: 0 -90px}

.sprites li a{color:#000;font-weight:bold}

Resultado

• 1
• 2
• 3
• 4

Assim Conseguimos um layout, onde cada um dos itens do menu tem uma imagem de fundo, mas não precisamos requisitar quatro imagens, apenas uma.

Vantagens?

Entre as vantagens, posso citar:

a facilidade de manutenção, uma vez que haverá menos imagens a alterar;

o menor número de requisições HTTP;

maior velocidade de carregamento, uma vez que haverá menos itens a requisitar.

Pra finalizar

Ao utilizar o sprites, nós possíbilitamos ao usuário uma maior velocidade no carregamento. Uma página carregada mais rápido, deixa o usuário mais feliz, um usuário mais feliz, tende a voltar mais vezes, desde que o conteúdo seja relevante

Veja em funcionamento: link

Download: Sprites

Boa parte de quem desenvolve interface HTML e se preocupa com a validação do código já se deparou com um problema grave: Minha página precisa conter um arquivo em flash, um vídeo do You Tube, porém isso deixa o código impossível de ser validado. Não mais… Eu lhes trago a solução pra isso.

Há duas maneiras de se fazer isso, um por Javascript, onde você inclue o código na página através de um innerHTML, ou através de um código mais suscinto. Abaixo mostro as três maneiras de se por o código.

A gerada pelo flash e o Youtube, porém errada.

<object>
<param name="movie" value="http://www.youtube.com/v/izSOrOmxRgE"></param>
<param name="wmode" value="transparent"> </param>
<embed src="http://www.youtube.com/v/izSOrOmxRgE" type="application/x-shockwave-flash" wmode="transparent" width="390" height="321"> </embed>
</object>

A Gerada por innerHTML

function iniciaFlash(){
var flash = “<object id=’imgflash’ width=’514′ height=’250′ align=’middle’ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>”+
“        <param value=’sameDomain’ name=’allowScriptAccess’/>”+
“        <param value=’images/imgflash.swf’ name=’movie’/>”+
“        <param value=’high’ name=’quality’/>”+
“        <param value=’#324b2e’ name=’bgcolor’/>”+
“        <param value=’transparent’ name=’wmode’/>”+
“        <embed width=’514′ height=’250′ align=’middle’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ allowscriptaccess=’sameDomain’ name=’imgflash’ bgcolor=’#324b2e’ quality=’high’ src=’images/imgflash.swf’/>”+
“</object>”
document.getElementById(”imagensflash”).innerHTML = flash;
}

Dentro da função iniciaFlash, crio uma variável com os dados do flash e incluo dentro da div que tem o id “imagensflash”.

Após isso inicio a função dentro do onload do body.

<body onLoad=”iniciaFlash()”>

E a mais simples e talvez a melhor.

<object type=”application/x-shockwave-flash” data=”arquivo.swf” width=”390” height=”321“>
<param name=”movie” value=”arquivo.swf” />
</object>

Agora você pode escolher a que melhor se encaixar no seu projeto.

Abraços e até o próximo Post.