A ferramenta de idiomas do Google, acredito que todo mundo já conhece. Porém pouca gente sabe que o Google oferece uma API em ajax para tradução.

E pra facilitar ainda mais, existe também um plugin de jQuery chamado jquery-translate que interage com a API do google, aí fica bem simples:

Para traduzir um texto basta chamar o node do html pelo seletor do jQuery e chamar a função translate:

	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery-translate-1.3.9.min.js"></script>
	$(document).ready(function(){
		$('button#traduzir').click(function(){
			$('div#texto').translate('en')
		});
	});

No exemplo acima, quando clicarem no botão traduzir, irá traduzir todo o conteúdo da div id=”texto” para o inglês, a API do Google detecta automaticamente o idioma original.

Veja um demo abaixo que eu fiz:

Clique em uma das bandeiras abaixo do texto para traduzir para o idioma selecionado:

Quem quiser entender, deixei o exemplo disponível pra download.

Mas como quase tudo na vida, tem solução:

Solução número 1 – Pare de trabalhar com XML e comece a usar JSON.

Solução número 2 – Existe um parseXML que funciona pro IE. E alguém de muita boa vontade que se chama Jonathan Sharp fez disso um plugin que pra jQuery que se chama XMLDOM .

E como funciona?

assim:

Forma normal (que normalmente dá erro no IE)

$.ajax({
	url: 'xml/erros.xml,
	type: "GET",
	dataType: "xml",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

Com o plugin XMLDOM

$.ajax({
	url: 'xml/erros.xml,
	type: "GET",
	dataType: "html",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$.xmlDOM(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

E pra quem quiser evitar o trabalho, pode baixar o plugin direto aqui.

[]s

Com o jQuerify (que acabou de ser atualizado) é possível (com a ajuda do firebug pra Firefox, debug bar pra IE, etc…), executar comandos jQuery (como jQuery.ajax ou qualquer outro) mesmo se o site não tiver jQuery carregado.

Basta executar um script (que o chamamos de jQuerify) no seu depurador de javascript ( no firebug, clique em console, cole o script no box da direita e clique em “Executar” ) e pronto, o script invoca o invoca o jQuery. Depois, para testar, ao invés de usar $ use o jQuery nos seus seletores.

Segue script abaixo.

(function() {
var s=document.createElement('script'),
	el=document.createElement('div'),
	b=document.getElementsByTagName('body')[0];
var otherlib=false,
	startCounter=tryCounter=10,
	delay=250,
	msg='';
s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
el.style.position='fixed';
el.style.height='32px';
el.style.width='220px';
el.style.marginLeft='-110px';
el.style.top='0';
el.style.left='50%';
el.style.padding='5px 10px 5px 10px';
el.style.fontSize='12px';
el.style.color='#222';
el.style.backgroundColor='#f99';

if(typeof jQuery!='undefined') {
  msg='This page already using jQuery v'+jQuery.fn.jquery;
  return showMsg();
} else {
  if(typeof $=='function') {
	otherlib=true;
  }
  document.getElementsByTagName('head')[0].appendChild(s);
}

function showMsg() {
  el.innerHTML=msg;
  b.appendChild(el);
  window.setTimeout(function() {
	if (typeof jQuery=='undefined') {
	  b.removeChild(el);
	} else {
	  jQuery(el).fadeOut('slow',function() {
		jQuery(this).remove();
	  });
	  if (otherlib) {
		$jq=jQuery.noConflict();
	  }
	}
  } ,2500);
}

var tryjQuery=function() {
  setTimeout(function() {
	if (typeof jQuery=='undefined') {
	  if (tryCounter) {
		tryCounter--;
		tryjQuery();
	  } else {
		msg='Sorry, but after ' + startCounter + ' attempts, jQuery hasn\'t loaded';
		showMsg();
	  }
	} else {
	  msg='This page is now jQuerified with v' + jQuery.fn.jquery;
	  if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
	  showMsg();
	}
  }, delay);
};
tryjQuery();
})();

[]s

Para quem não sabe o que é o validate, recomendo saber do que se trata, você pode ganhar muito tempo no desenvolvimento utilizando o plugin, principalmente para desenvolver interface de back end, com diversas validações. Tem um post do Alexandre Magno antigo, porém muito bom, explicando o que é o plugin, o que faz, como utilizá-lo e um exemplo bem simples de um formulário validado pelo plugin.

Quando se faz o download do validate, ele vêm com uma coleção de médotos, mas alguns que nós precisamos, como verificação de data ( formato dd/mm/aaaa ) e verificação de cpf, não tem.

Alguns métodos que serão postados aqui não fui eu quem fez, queria dar os créditos a quem fez, porém não sei quem foi. Mas… vamos ao ponto, veja como é facil adicionar novos métodos.

Verificação de CPF

O código abaixo adiciona um Método que chamamos de “verificaCPF” :

jQuery.validator.addMethod("verificaCPF", function(value, element) {
	value = value.replace('.','');
	value = value.replace('.','');
	cpf = value.replace('-','');
	while(cpf.length < 11) cpf = "0"+ cpf;
	var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
	var a = [];
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a[i] = cpf.charAt(i);
		if (i < 9) b += (a[i] * --c);
	}
	if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a[y] * c--);
	if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
	if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão

E agora na hora de validar seu formulário, você já pode utilizar o método adicionado:

$("form#cadastro").validate({
	rules: {
		'CampoCPF': {
			required: true,
			verificaCPF: true
		}
	},
	messages: {
		CampoCPF: {
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}
	},
});

Verificação de Data (formato dd/mm/aaaa)

Agora o método se chama dateBR e a mensagem padrão (caso não seja colocada outra na hora de usar o validate, será “Informe uma data válida”.

jQuery.validator.addMethod("dateBR", function(value, element) {
	 //contando chars
	if(value.length!=10) return false;
	// verificando data
	var data 		= value;
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if((mes==4||mes==6||mes==9||mes==11)&&dia==31)return false;
	if(mes==2 && (dia>29||(dia==29&&ano%4!=0)))return false;
	if(ano < 1900)return false;
	return true;
}, "Informe uma data válida");  // Mensagem padrão

Verificação de Data e Hora (formato dd/mm/aaaa hh:mm)

jQuery.validator.addMethod("dateTimeBR", function(value, element) {
	 //contando chars
	if(value.length!=16) return false;
	 // dividindo data e hora
	if(value.substr(10,1)!=' ') return false; // verificando se há espaço
	var arrOpcoes = value.split(' ');
	if(arrOpcoes.length!=2) return false; // verificando a divisão de data e hora
	// verificando data
	var data 		= arrOpcoes[0];
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if ((mes==4||mes==6||mes==9||mes==11)&&dia==31)return false;
	if (mes==2 && (dia>29||(dia==29&&ano%4!=0)))return false;
	// verificando hora
	var horario 	= arrOpcoes[1];
	var	hora 		= horario.substr(0,2);
	var doispontos 	= horario.substr(2,1);
	var minuto 		= horario.substr(3,2);
	if(horario.length!=5||isNaN(hora)||isNaN(minuto)||hora>23||minuto>59||doispontos!=":")return false;
	return true;
}, "Informe uma data e uma hora válida");

Se alguém tiver (ou fizer) o método de CNPJ (ou algum outro legal que não tem aqui) me manda por e-mail ou posta aqui nos comentários.

[]s

Os seletores [@attribute]

A principal diferença, o que mais está dando problema de incompatibilidade nessa troca de versão é a sintaxe do selector [@attribute] que desde a versão 1.1.4 (agosto de 2007) entrou em desuso, mas até a 1.2.6 ele ainda funcionava, dessa vez tiraram fora mesmo, mas muitos sites e muito plugins ainda utilizavam os seletores assim. E pra alterar, corrigir o problema, é bem simples, basta remover o @

Exemplo:

jQuery anterior a 1.1.4

$('a[@rel="excluir"]
$('input[@name^="telefone"]

Versão atual do jQuery

$('a[rel="excluir"]
$('input[name^="telefone"]

:visible em visibility e display

Nessa nova versão :visible trabalha de acordo com a propriedade display do css e não mais com visibility

Exemplo 1:

Considere a div abaixo:

<div id="exemplo" style="display:none">
 Tidbits
</div>

Na Versão 1.2.6 obtemos true com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos false

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = true

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = false

Exemplo 2:

Considere a div abaixo:

<div id="exemplo2" style="visibility:hidden">
 Tidbits
</div>

Na Versão 1.2.6 obtemos false com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos true

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = false

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = true

A terceira mudança é na hora de escrever um seletor customizado, agora não é necessário retornar uma string, como era feito até então.

Quem quiser ler a matéria original, veja no Learning jQuery .

[]s

Clique aqui para ver o post com todas as opções do calendário, um pequeno tutorial de como utilizá-lo além de um zip disponível com todos os exemplos e scripts.

Bom, se você tem minha idade, talvez você nunca nem tenha ouvido falar em pong ou tele game, então veja a foto abaixo que talvez você reconheça, afinal já tem pong até pro iphone.

Baseado nisso, e tendo como inspiração a onda recente de jogos em javascript, decidi fazer desse, meu primeiro jogo em javascript, fiz do zero, e aqui vou mostrar passo a passo a evolução do script em 12 momentos.

Veja o resultado final:

Ainda deve ter bugs, mas a intenção é somente desenvolver um jogo simples e praticar lógica e conceitos em Javascript. Antes de começar a falar, devo dizer que quem quiser dar uma olhada em como foi feito, tem aqui todos os 12 passos para download.

Então vamos aos passos:

Passo 1 – Montando o HTML / CSS

No passo mais simples de todos, o html e css usado no jogo é montado:

Clique aqui para ver o passo 1.

Passo 2 – Movendo a bolinha

No passo dois é começo da movimentação do jogo, a bolinha começa a se movimentar pra uma direção, aleatóriamente e depois ela bate nas “paredes” e inverte sua direção.

Clique aqui para ver o passo 2.

Passo 3 – Calculando o ponto

Do passo 2 pro três, eu calculo na hora em que a parede passa pela posição da raquete, se ela “bate” na raquete, ou não, caso não bata, é marcado o ponto. (É necessário testar algumas vezes pra conseguir ver o efeito, já que a bolinha começa numa posição randômica).

Clique aqui para ver o passo 3.

Passo 4 – O placar

Agora, toda vez em que um ponto é marcado, o placar é atualizado.

Clique aqui para ver o passo 4.

Passo 5 – Reiniciando a partida

Após um ponto, não é mais necessário apertar F5 pra reiniciar a partida. Em 3 segundos a partida é reiniciada automaticamente. Agora o jogo não tem mais fim.

Clique aqui para ver o passo 5.

Passo 6 – Movendo as raquetes (2 players)

Nesse passo, é onde começa a mover a raquete, e este, é o único em que é possível mover as duas raquetes (o que parece legal, mas não é muito não, é impossível mover as duas raquetes ao mesmo tempo ).

Clique aqui para ver o passo 6.

Passo 7 – Jogando contra o computador

Aqui, a raquete da direita já está automática, qndo a raquete da esquerda rebate, é calculado a trajetória da raquete da direita, que se posiciona automaticamente.

Clique aqui para ver o passo 7.

Passo 8 – Aumentando a velocidade

Agora, a medida em que o jogo for rolando a velocidade da bola vai aumentando, até que o ponto seja efetuado. Depois quando o jogo é reiniciado, a velocidade é voltada ao normal.

Clique aqui para ver o passo 8.

Passo 9 – Batendo na ponta da raquete

Como a direção inicial da bolinha é sorteada, foi implementado o recurso de “bater na ponta da raquete”, que aumenta o angulo da rebatida da bola, e ajuda a enganar o adversário. Nesse passo, também foi implementado um recurso para as raquetes voltarem ao centro da mesa após um ponto for concluído.

Clique aqui para ver o passo 9 .

Passo 10 – Configurando a dificuldade

Pra não ficar muito banal, é possível definir a dificuldade do jogo, antes de começar a partida, a dificuldade interfere na velocidade inicial da bolinha e na velocidade da raquete adversária.

Clique aqui para ver o passo 10 .

Passo 11 – Game Over

Depois de tantos passos, finalmente o jogo tem um fim, vence que fizer 5 pontos primeiro. O jogo pode ser reiniciado depois e ter a dificuldade alterada.

Clique aqui para ver o passo 11 .

Passo 12 – Mouse Wheel

Para facilitar a movimentação da raquete, no passo 12, foi implementado o controle por mouse wheel, baseado naquela função de mouse wheel postada aqui a pouco tempo atrás.

Clique aqui para ver o passo 12 .

Depois do passo 12 alguns ajustes ainda foram (e talvez outros serão) feitos, como velocidade do jogo, e algumas melhorias de desempenho.

Exportando:

E se alguém quiser colocar o jogo em algum lugar, basta chamar o iframe com o código:

<iframe width="460" height="430" frameborder="0" scrolling="no" src="http://www.tidbits.com.br/download/pong/pong.html"></iframe>

Lembrando que deixei disponível todos os 12 passos para download.

E pra quem nunca ouviu falar de tele game, segue uma imagem do que foi um dos primeiros vídeogames:

Quando eu tiver tempo livre, vou fazer um jogo estilo arkanoid, com fases, records e tudo mais.

[]s

Passo 5 – botões para aumentar e diminuir Zoom

Passe o mouse sobre a imagem e clique em + e – para aumentar e diminuir o zoom.

A partir do passo 2, foram adicionados dois botões que aumentam ou diminuem 3% do tamanho da imagem e depois recalcula tudo para fazer o parallax, bem simples.

Passo 6 – MouseWheel

E pra finalizar, fiz um script (na verdade comecei ele, não cheguei a finalizá-lo) que usa o mouse wheel para controlar o zoom, se você não sabe trabalhar com isso, dê uma olhada num post antigo meu que mostrar como adicionar um evento ao mouse wheel . Esse script deixei num arquivo a parte (pq senão atrapalharia o scroll aqui), então veja o ImageZoom com mouse wheel aqui

O que eu disse que não terminei no script é que, quando o mouse está sobre a imagem e ao mesmo tempo roda o wheel, dá umas travadas bruscas que precisam ser suavizadas.

Devo lembrar que todos os passos, htmls e scripts estão disponíveis para download.

[]s

Todos os passos, htmls e scripts estão disponíveis para download.

Passo 1 – MyParallax

Passe o mouse sobre a imagem, que se deslocará horizontalmente:

O primeiro passo não vai ter nenhuma explicação pois ele já é um post antigo meu, explicando parallax e o evento mousemove>, o myParallax Parallax com javascript com jQuery. Quem não viu, veja pois é interessante, e quem já viu o post, reveja, pois vou utilizar esse script de base para o ImageZoom.

Lá no post eu explico linha por linha, o que o Javascript faz.

Passo 2 – Mouse Move Horizontal e Vertical

Passe o mouse sobre a imagem, que se deslocará horizontalmente e verticalmente:

E o que mudou do passo 1?

Agora o “parallax” é horizontal e vertical, quem abrir o código vai ver que basicamente só duplicamos o script do passo 1, alterando left por top, width por height, x por y.

Passo 3 – Mouse Move Horizontal e Vertical sobre outra imagem

Passe o mouse sobre o thumb:

O que mudou do passo 2?

Pouco, só que agora temos o thumb, e quando passamos o mouse em cima do thumb, obtenho uma porcentagem (por exemplo, se eu passar o mouse bem no meio do thumb seria 50% e 50%.

Depois é só posicionar a imagem dentro do container, com top e left.

E pra dar um efeito maior de zoom, coloquei a imagem da lupa como cursor.

Passo 4 – Caixa de luz

Passe o mouse sobre o thumb:

O que mudou do passo 3?

Esse teve a maior mudança, como funciona a caixa de luz?

São quatro quadrados com opacidade:

E quando movemos o mouse em cima do thumb os quadrados são redimensionados e reposicionados. E pra dar um efeito melhor, tirei o mouse no css com o cursor: none;

Lembrando que todos os exemplos, scripts e htmls estão disponíveis para download.

[]s

Antes de começar, devo dizer que algumas técnicas são radicais, e merecem ser analisadas se realmente necessitam disso, então se você considera que o desempenho da sua página está bom, e o código vai ficar desorganizado, não faça. Agora mais aos truques:

Carregue o jQuery pelo Google Code

Se você é como eu, você não deve gostar de fazer requisições externas no seu site, mas carregar o jQuery pelo Google Code pode trazer vantagens ao seu site:
- Se muitas pessoas fizerem isso, é provavel que ao entrar no seu site, o usuário não precise baixar o arquivo novamente pois já tem ele em cache, de outro site que também faz a requisição do jQuery pelo Google Code.
- Diminuição no tráfego da banda, o jQuery, muitas vezes representa de 10% a 30% do peso total de uma página, se carregado pelo google, pode diminuir o tráfego (se isso for um problema no seu servidor).

E para carregar pelo google code é fácil:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript"></script>

Junte seus scripts num arquivo

Nem sempre isso é possível, mas, se você tem um javascript pra lightbox, outro pra validação, outro pra sei lá o que, e eles sempre são carregados, vale a pena juntar todo o código num script só. A vantagem é que, ao invés do servidor fazer 5 requisições http, ele faz uma só, dando velocidade no loading da página na hora mais importante, quando a página fica em branco, fazendo download dos scripts e css do head. É lógico que fica mais difícil de trabalhar, menos organizado, por isso é bom fazer isso só depois do site estar pronto. Outra forma de melhorar, é que, em um só script, podemos fazer apenas um $(document).ready() , ao invés de ter várias funções espalhadas pelos scripts.

Minifique seus scripts

Outra medida para se fazer após o término da produção do site, é minimizar os scripts, basicamente minificar significa retirar todos os comentários, tabs, quebras de linha, e espaços desnecessários para execução do script, deixando todo o código em um linha só, esse processo diminui em média 30% do tamanho do arquivo javascript, deixando o load da página mais rápido. Para minificar seu script, existem diversos sites onde se cola o script original e eles minificam seu script pra você, no post original ele recomenda o Packer do Dean Edwards, mas também tem um o javascript compressor que também faz a mesma coisa, mas é mais fácil de decorar sua url.

Evite processamento desnecessário nos loop’s (como seletores)

Isso não vale só pra jQuery / javascript, vale pra qualquer linguagem de programação. Verifique se nenhum processamento dentro de um for é desnecessário. Ex.:

for (i = 0; i < 1000; i++) {
var container = $('#container ');
container.append('Este é o ítem: ' + i);
}

ou assim:

for (i = 0; i < 1000; i++) {
$('#container ').append('Este é o ítem: ' + i);
}

Os seletores são processos complexos que envolve diversas funções ( getElementById, getElementsByTagName, getElementsByClass entre outras ) além de diversos loops para obter somente os elementos desejados.

Então, o melhor jeito é assim assim:

var container = $('#container ');
for (i = 0; i < 1000; i++) {
container.append('Este é o ítem: ' + i);
}

Diminua suas manipulações em DOM

Contrariando o exemplo acima, tem um melhor jeito ainda de fazer o for.

var htm = '';
for (i = 0; i < 1000; i++) {
htm +='Este é o ítem: ' + i;
}
$('#container ').append(htm);

Ao invés de dar 1000 appends no seu elemento, você dá um só, e monta a lista numa variável javascript, tal processo é aproximadamente de 6 vezes.

Use ID’s ao invés de classes sempre que possível

Desde que não atrapalhe seu css, e que não se repita nenhum id no html, use id’s para posteriormente selecionar o objeto. O javascript trabalha mais rápido com ID (getElementbyId) do que com classes (getElementsByClass).

Veja o exemplo com class que no teste feito pelo autor, rodou em 5066 milisegundos (5 segundos):

var lista = '<ul>';
// Adicionando li's com class
for (i = 0; i < 1000; i++) {
lista += '<li class="item' + i + '">Este é o ítem '+i+'</li>';
}
lista += '</ul>';
$('body').append(lista);
// Selecionando elementos com class
for (i = 0; i < 1000; i++) {
var itemSelecionado = $('.item' + i);
}

Já no segundo exemplo, faremos a mesma coisa com id’s que no teste feito pelo autor, rodou em 61 milisegundos (83 vezes mais rápido):

var lista = '<ul>';
// Adicionando li's com id
for (i = 0; i < 1000; i++) {
lista += '<li id="item' + i + '">Este é o ítem '+i+'</li>';
}
lista += '</ul>';
$('body').append(lista);
// Selecionando elementos com id
for (i = 0; i < 1000; i++) {
var itemSelecionado = $('#item' + i);
}

Use diversas ações sobre um seletor (chaining)

Evite selecionar o mesmo elementos várias vezes, atribua todas as funções em um seletor só:

Ao invés de usar:

footer = $('#footer');
footer.find('a.reprovar_comentario');
footer.html('aprovar');
footer.attr('class','aprovar_comentario');
footer.attr('title','aprovar');
footer.unbind();
footer.click(aprovarComentario);

use somente uma seleção :

footer = $('#footer');
footer
	.find('a.reprovar_comentario')
	.html('aprovar')
	.attr('class','aprovar_comentario')
	.attr('title','aprovar')
	.unbind()
	.click(aprovarComentario);

Use sempre a última versão do jQuery

Normalmente novas versões de programas, sistemas operacionais, etc… são mais pesadas com um monte de funções que 99% dos usuários nunca vão usar, mas John Resig, criador do jQuery, continua trabalhando em cima disso, só pra melhorar e deixar o jQuery mais rápido, a atual versão, 1.3.1 ganhou muita velocidade em cima da 1.2.6, o que gerou algumas incompatibilidades, principalmente com plugins. Então, não precisa refazer (se não estiver mega lerdo) seus antigos sites, mas ao criar um novo, tente usar sempre a última versão do jQuery.

Se alguém ler isso e tiver mais alguma dica legal, diz aí.

[]s