Uma página web com muitas imagens pode demorar muito tempo para carregar e gera várias solicitações de servidores.

Usando sprites irá reduzir o número de pedidos de servidor.

Em vez de usar três imagens separadas, nós usamos esta imagem única (“img_navsprites.gif”):

Com CSS, podemos mostrar apenas a parte da imagem que nós precisamos.

No exemplo a seguir a CSS especifica qual parte do “img_navsprites.gif” devemos demonstrar:

Exemplo CSS:

<style type="text/css">
    img.home{
      width:46px;
      height:44px;
      background:url(img_navsprites.gif) 0 0;
    }
</style>

HTML:

...
<img src="img_trans.gif" class="home" />
...

Explicação:

• <img class=”home” src=”img_trans.gif” /> – Nessa parte chamamos uma pequena imagem transparente, pois o atributo src não pode estar vazio.
• width: 46px; height: 44px; – Define a parte da imagem que queremos utilizar
• background: img_navsprites.gif (url) 0 0; – Define a posição da imagem (0px esquerda, 0px topo)

Esta é a maneira mais fácil de usar sprites, agora queremos expandi-lo por links usando e efeitos hover.

Como criar uma lista de navegação?

Queremos usar a imagem do sprite (“img_navsprites.gif”) para criar um sistema de navegação lista.

Nós vamos utilizar uma lista de HTML:

Exemplo CSS:

<style type="text/css">

	#navlist{
	position:relative;
	}

	#navlist li{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:0;
	height:44px;
	display:block;
	}

	#home{
	left:0px;
	width:46px;
	background:url('img_navsprites.gif') 0 0;
	}

	#prev{
	left:63px;
	width:43px;
	background:url('img_navsprites.gif') -47px 0;
	}

	#next{
	left:129px;
	width:43px;
	background:url('img_navsprites.gif') -91px 0;
	} 

</style>

Exemplo HTML:

...
<ul id="navlist">
	<li id="home"><img src="img_trans.gif" /></li>
	<li id="prev"><img src="img_trans.gif" /></li>
	<li id="next"><img src="img_trans.gif" /></li>
</ul>
...

Explicação:

• #navlist {position:relative;} – Posição é definida como relativo para permitir posicionamento absoluto dentro dele
• #navlist li {margin:0; padding:0; list-style:none; position:absolute; top:0;} – Margin e padding é definido como 0, o estilo de lista com aquelas bolinhas são removidas, e todos os itens da lista são posicionamento absoluto.
• #navlist li {height:44px; display:block;} – A altura de todos as imagens são 44px

Agora começa a posição e estilo de cada parte específica:

• #home {left:0px; width:46px;background:url(img_navsprites.gif) 0 0;} – Posicionado a primeira imagem com 0px de distância da base esquerda, a largura é 46px e define o fundo da imagem e sua posição (0px esquerda, 0px topo)

• #prev {left:63px; width:43px;background:url(img_navsprites.gif) -47px 0;} – Posicionado a segunda imagem com 63px de distância da base esquerda, a largura é de 43px e definimos o fundo -47px para pegar a próxima imagem da direita.

• #next{left:129px; width:43px;background:url(img_navsprites.gif) no-repeat -91px 0;} – Posicionado a terceira imagem com 129px de distância da base esquerda, a largura é 43px e definimos o fundo -91px para pegar a próxima imagem da direita.

Como usar Sprites – Efeito Hover

Agora queremos adicionar um efeito de hover em nossa lista de navegação.

Nossa nova imagem (“img_navsprites_hover.gif”) contém três imagens de navegação e três imagens a utilizar para efeitos: hover

Por esta ser uma única imagem, e não seis arquivos separados, não haverá atraso no carregamento quando um usuário parar o mouse sobre a imagem.

Vamos só adicionar o estilo abaixo no css anterior para adicionar o efeito :hover

...
	#home:hover{
	background: url('img_navsprites_hover.gif') 0 -45px;
	}

	#prev:hover{
	background: url('img_navsprites_hover.gif') -47px -45px;
	}

	#next:hover{
	background: url('img_navsprites_hover.gif') -91px -45px;
	}
...

Explicação:

• Podemos usar a pseudo-classe :hover.
• #home:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} – Para todas as três imagens que o usuário para com o mouse em cima especificaremos a posição de fundo e 45px apenas mais abaixo.

Quase tudo neste tutorial funciona em todos os browsers JavaScript habilitado. No entanto, existem algumas coisas que simplesmente não funcionam em determinados navegadores, especialmente em navegadores mais antigos.

Às vezes pode ser útil detectarmos o navegador do visitante e, em seguida servi-lo com uma informação adequada.

A melhor maneira de fazer isso é fazer com que sua página web seja inteligente o suficiente para detectar qual browser o usuário está usando, ou então, a outra maneira seria o usuário trocar de navegadores. rsrs!

O objeto navigator contém todas as informações sobre o navegador do visitante, nome, versão e muito mais.

No exemplo abaixo iremos detectar se o usuário está usando um browser antigo (ie6). Caso ele esteja usando iremos move-lo para outra página, ou podemos também envia-lo uma mensagem.

No exemplo abaixo iremos redireciona-lo para outra página.

<script type="text/javascript">

	var browser = navigator.appName;
	var ver = navigator.appVersion;
	var thestart = parseFloat(ver.indexOf("MSIE"))+1;
	var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7));

	if ((browser=="Microsoft Internet Explorer") && (brow_ver < 7)){
	  window.location="http://www.seusite.com.br/index_ie6.php";
	}              

</script>

Observamos que após pegar-mos o nome do navegador, tivemos que pegar também a versão.

var browser = navigator.appName;

var ver = navigator.appVersion;
var thestart = parseFloat(ver.indexOf("MSIE"))+1;
var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7));

emitimos então uma condição. Se o browser for Microsoft Internet Explorer e versão menor que 7, direcionaremos o usuário para outra página.

if ((browser=="Microsoft Internet Explorer") && (brow_ver < 7)){
     window.location="http://www.seusite.com.br/index_ie6.php";
}

Fiz uns testes, esse CSS funciona em todos os navegadores.

Veja um exemplo de como ficarão as imagens:

Imagem original:

Imagem com transparência:

Olhe como ficou o código fonte:

<img src="brasil.jpg" width="150" height="113" alt="brasil"
style="opacity:0.4;filter:alpha(opacity=40)" />

O Firefox usa a propriedade opacity:x de transparência, enquanto usa o IE filter:alpha(opacity=x).

No Firefox (opacity:x) x pode ser um valor 0.0 – 1.0. Um valor mais baixo faz com que o elemento fique mais transparente.

No IE (alpha(opacity=x)) x pode ser um valor de 0 – 100. Um valor mais baixo faz com que o elemento fique mais transparente.

Como colocar texto em uma caixa transparente com CSS

O código-fonte fica assim:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background: url (brasil.jpg) repeat;
  border: 2px preta sólida;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 50px 30px;
  background-color: # ffffff;
  border: 1px preto sólido;
  / * Para * IE /
  filter: alpha (opacity = 60);
  / * Padrão CSS3 /
  opacidade: 0,6;
  }
p div.transbox
  {
  margin: 40px 30px;
  font-weight: bold;
  color: # 000000;
  }
</style>
</head>

<body>

class="background"> <div
class="transbox"> <div
<p> Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
</p>
</div>
</div>

</body>
</html>

Primeiro, criamos um elemento div (class = “background”), com uma altura e largura fixa, uma imagem de fundo, e uma borda. Então vamos criar um pequeno div (class = Transbox “) dentro do elemento div primeiro. Isso também tem um div com largura fixa, um fundo imagem e uma borda.

Dentro da div transparente, adicionaremos algum texto dentro.

O modelo de caixa de CSS é essencialmente uma caixa que envolve elementos HTML, e é constituída por: margens, bordas, padding e conteúdo real.

O modelo de caixa nos permite colocar uma borda em torno de elementos e elementos do espaço em relação a outros elementos.

A imagem abaixo ilustra o modelo de caixa:

Explicação das diferentes partes:

• Margin – Limpa uma área em torno da fronteira. A margem não cor de fundo, e é completamente transparente
• Border – A fronteira que se situa em torno do preenchimento e conteúdo. O fronteira é afetado pela cor de fundo da caixa
• Padding – Limpa uma área em torno do conteúdo. O padding é afetado pela cor de fundo da caixa
• Content – O conteúdo da caixa, onde o texto e as imagens aparecem

A fim de definir a largura ea altura de um elemento corretamente em todos os browsers, você precisa saber como funciona o modelo de caixa.

Largura e altura de um elemento

Importante: Quando você especificar as propriedades width e altura de um elemento com CSS, você são apenas definir a largura e altura da área de conteúdo. Para saber o tamanho total do elemento, você também deve adicionar o padding, borda e margem.

A largura total do elemento no exemplo a seguir é 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Vamos fazer as contas:

250px (largura)
+ 20px (esquerda e direita padding)
+ 10px (esquerda e direita border)
+ 20px (margem esquerda e direita)
= 300px

Imagine que você só tinha 250px de espaço. Vamos fazer um elemento com um total largura de 250px:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

Problema de Compatibilidade de navegadores

Se você testou o exemplo anterior do Internet Explorer, você viu que a largura total não era exatamente 250px.

IE inclui padding e borda na largura, quando a propriedade largura é conjunto, a menos que um DOCTYPE é declarada.

Para corrigir esse problema, basta adicionar um DOCTYPE para o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

O código será composto por três funções:
- GerarCookie(strCookie, strValor, lngDias);
- LerCookie(strCookie);
- ExcluirCookie(strCookie);

Exemplo:

//Cria o cookie 'CookieTeste' com o valor 'HellowWorld!'
//que irá expirar quando o browser for fechado.

GerarCookie('CookieTeste', 'HellowWorld!', 0);

// Lê o conteúdo armazenado no cookie.

LerCookie('CookieTeste');

// Exclúi o cookie.

ExcluirCookie('CookieTeste');


//Função para criar o cookie.
//Para que o cookie seja destruído quando o brawser
//for fechado, basta passar 0 no parametro lngDias.


function GerarCookie(strCookie, strValor, lngDias)
{
var dtmData = new Date();
if(lngDias)
{
dtmData.setTime(dtmData.getTime() + (lngDias * 24 * 60 * 60 * 1000));
var strExpires = "; expires=" + dtmData.toGMTString();
}
else
{
var strExpires = "";
}
document.cookie = strCookie + "=" + strValor + strExpires + "; path=/";
}

// Função para ler o cookie.
function LerCookie(strCookie)
{
var strNomeIgual = strCookie + "=";
var arrCookies = document.cookie.split(';');
for(var i = 0; i < arrCookies.length; i++)
{
var strValorCookie = arrCookies[i];
while(strValorCookie.charAt(0) == ' ')
{
strValorCookie = strValorCookie.substring(1, strValorCookie.length);
}
if(strValorCookie.indexOf(strNomeIgual) == 0)
{
return strValorCookie.substring(strNomeIgual.length, strValorCookie.length);
}
}
return null;
}

// Função para excluir o cookie desejado.
function ExcluirCookie(strCookie)
{
GerarCookie(strCookie, '', -1);
}

Tive o cuidado em testar esse script seguindo os padrões da W3C para que não haja nenhum problema com tipos de navegadores. Bem, testei apenas no Firefox e no IE e funcionou.
Notem que nesse exemplo exite a tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Vamos ao que interessa.
Fiz um script bem simples para que tenham uma melhor compreenção.

Primeiro, criaremos a div com o id=container que se movimentará.
Para começar-mos notem que existem os styles left:0; e o position: relative;,
<div id=container style="left:0; position: relative;">
<img src="http://www.pietrogaiao.com.br/blog/exemplos/blog-pietro.gif">
</div>


Logo em seguida, criaremos os botões de voltar e avançar.
Os botões chamarão as funções tras() e frente().
<input onClick="tras();" type=button value=voltar>
<input onClick="frente();" type=button value=avançar>

Agora vamos ao mais importante da festa. Vamos criar as funções responsáveis pela movimentação do elemento.
Procurei nomear as variáveis da melhor forma possível, para que não fiquem com nenhuma dúvida.
function frente() {
var movimento = setTimeout("frente()")
var speed = 5
var divContainer = document.getElementById("container").style
avancaDIV = parseInt(divContainer.left)+speed+"px"
if(avancaDIV=="300px") {
clearTimeout(movimento)
return false;
}
divContainer.left = avancaDIV
}


Vamos ver se entenderam.
Primeiro: crio a variável responsável pela movimentação do elemento var movimento = setTimeout(“frente()”)
Segundo: passo a velocidade que o elemento percorrerá. var speed = 5
Terceiro: seto a o elemento que se movimentará indicando que será pelo style var divContainer = document.getElementById(“container”).style
Quarto: informo de quantos em quantos pixels o elemento se deslocara na horizontal. No nosso caso é de 5 em 5px, até chegar no 300px que então entrará no passo Quinto.
Quinto: crio uma condição dizendo que quando o elemento chegar no pixel 300px, deverá parar.

Agora, para voltar, é só fazer ao contrário, informando a posição inicial.

Veja abaixo o script completo e um link para testar nossa aplicação.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pietro Gaião - Tutorial</title>
<style type="text/css">
#container { width:220px; height:50px; border:1px solid;}
#divleft { width:15px; height:50px;}
#divright { width:15px; height:50px;}
</style>
<script language=JavaScript>
function frente() {
var movimento = setTimeout("frente()")
var speed = 5
var divContainer = document.getElementById("container").style
avancaDIV = parseInt(divContainer.left)+speed+"px"
if(avancaDIV=="300px") {
clearTimeout(movimento)
return false;
}
divContainer.left = avancaDIV
}
function tras() {
var movimento = setTimeout("tras()")
var speed = -5
var divContainer = document.getElementById("container").style
recuaDIV = parseInt(divContainer.left)+speed+"px"
if(recuaDIV=="-5px" ) {
clearTimeout(movimento)
return false;
}
divContainer.left = recuaDIV
}
</script>
</head>
<body>
<div id=container style="left:0; position: relative;">
<img src="http://www.pietrogaiao.com.br/blog/exemplos/blog-pietro.gif">
</div>
<br>
<br>
<input onClick="tras();" type=button value=voltar>
<input onClick="frente();" type=button value=avançar>
</body>
</html>


Teste nossa aplicação. Como Mover div na horizontal pelo eixo X

É isso aí.
Fiquem a vontade para enviar comentários e para que possam aprimorar mais ainda os conhecimentos.

Até a próxima.

Podemos usar essa técnica para criptografar os scripts

Observe que no texto abaixo, há palavras que se repetem com bastante freqüência. Nós iremos pegar palavras ou seqüências de caracteres e substituiremos por símbolos.
a, laranjas

Peter Piper picked a peck of pickled peppers
A peck of pickled peppers Peter Piper picked
If Peter Piper picked a peck of pickled peppers
Where’s the peck of pickled peppers Peter Piper picked ?

Este é um modo como normalmente seria escrito em javascript.

<script language="Javascript">
var sourcestring="Peter Piper picked a peck of pickled peppers<BR>A peck of pickled peppers Peter Piper picked<BR>If Peter Piper picked a peck of pickled peppers<BR>Where's the peck of pickled peppers Peter Piper picked ?"
document.write(sourcestring);
</script>

Aqui vamos fazer a substituição por símbolos.

<script language="Javascript">
replacestring = new Array("1| Peter Piper ","2| picked ","3| pickled peppers ","4| peck ");
var sourcestring="12a4of3<br>A4of312<br>If 12a4of3<br>Where's the4of312?";
for (i=0;i<replacestring.length;i++){
var tempstring = replacestring[i].split("|");
var sourcestring = sourcestring.split(tempstring[0]).join(tempstring[1]);
}
document.write(sourcestring);
</script>

O texto acima foi comprimido de 207 caracteres para 59 caracteres para sourcestring mais 62 caracteres para o novo replacestring.

Quanto mais o texto é adicionado, maior é a taxa de compressão.
Novas palavras podem ser facilmente adicionados e substituídas utilizando símbolos e pontuação com combinações de caracteres (ex.:! 1,! 2,! 3) para substituir frases recorrentes no novo texto que é adicionado.
Como um benefício, pode ser uma maneira útil de fazer scripts difíceis de compreender, ficando de forma criptografada.

Exemplo:
Se você estivesse escrevendo um jogo de aventura, poderia ser suficiente para impedir que as alguém trabalhe o código e descubra onde o tesouro esta enterrado.

Achei super interessante. E vocês?
Até a próxima

Exemplo:
<script language="Javascript">
var frase="Dicas de Javascript com Pietro Gaião.";
var palavras= frase.split(" ");
for (i=0; i< palavras.length; i++)
{
document.write( i+": "+ palavras [i] +"<br>");
}
document.write("<br><br>Passando a posição do array:<br>");
document.write("<b>"+ palavras [0] + " - " + palavras[4] + "</b>");
</script>


Resultado:

0: Dicas
1: de
2: Javascript
3: com
4: Pietro
5: Gaião.

Nesse exemplo, usamos palavras separadas por um espaço (split(” “);), mas podemos usar qualquer outro caractere para servir de separação.

Podemos pegar o resultado separadamente, passando apenas a posição no array.
Exemplo:
document.write( palavras [0] + ” – ” + palavras[4] );

Resultado:
Dicas – Pietro

Combinar o conteúdo de um array e criar uma string, usando a função join().

Agora vamos fazer o inverso, vamos combinar o conteúdo de um array e criar uma string, usando o separador que foi especificado na separação do array.
Usaremos a função join().

Exemplo:
<script language="Javascript">
frutas = new Array ( "maçãs", "pêra", "banana", "laranjas");
var fruitlist = frutas.join(", ");
document.write ( "Gosto de " + fruitlist);
</script>

Resultado:
Gosto de maçãs, pêra, banana, laranjas

Replace com as funções split() e join()

Observe que com a função split(), usamos como separador a palavra “substituir”.
O separador é removido automaticamente com a fução split() que será substituída pela palavra “TROCAR” com a função join().

<script language="Javascript">
var oldstring="Função para substituir uma string ";
newstring=oldstring.split("substituir").join("TROCAR");
document.write(newstring);
</script>

Resultado:
Função para TROCAR uma string

Muito bem, espero que tenham tido uma boa compreenção.

Lendo um artigo sobre compressão de texto usando javascript, vi uma forma de substituir palavras por símbolos, que na minha opinião achei muito interessante.
leia: Compressão de texto com Javascript. Técnica com replace.

]]>