Tradução de idiomas usando a API Ajax de idioma do Google

É um serviço relativamente novo, pouco usado, mas muito interessante.

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:

copy of tidbitsPara 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.

O Bug do parse XML no IE com o ajax do jQuery

Post mais técnico seria impossível né? Enfim, se você leu o título e está lendo até agora é porque sabe do problema que estou falando: o ajax do jQuery tem um problema quando se trabalha com XML, o problema só acontece adivinha onde? No nosso querido browser Internet Explorer.

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

jQuerify – Adicionando jQuery para testar em páginas online

Nada mais fácil do que trabalhar com jQuery, e nada melhor pra aprender do que entender sites alheios.

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

Coleção de métodos para o plugin validate do jQuery.

Na verdade não é bem uma coleção com dezenas de métodos, a intenção do post é simplesmente mostrar que é possível e fácil criar métodos para o plugin.

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 = &#91;&#93;;
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a&#91;i&#93; = cpf.charAt(i);
		if (i < 9) b += (a&#91;i&#93; * --c);
	}
	if ((x = b % 11) < 2) { a&#91;9&#93; = 0 } else { a&#91;9&#93; = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a&#91;y&#93; * c--);
	if ((x = b % 11) < 2) { a&#91;10&#93; = 0; } else { a&#91;10&#93; = 11-x; }
	if ((cpf.charAt(9) != a&#91;9&#93;) || (cpf.charAt(10) != a&#91;10&#93;) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão 
&#91;/sourcecode&#93;

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

&#91;sourcecode language="javascript"&#93;
$("form#cadastro").validate({
	rules: {
		'CampoCPF': { 
			required: true,
			verificaCPF: true 
		}				
	},
	messages: {
		CampoCPF: { 
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}				
	},
});	
&#91;/sourcecode&#93;

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

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)&amp;&amp;dia==31)return false;
	if(mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;ano%4!=0)))return false;
	if(ano < 1900)return false;
	return true;		
}, "Informe uma data válida");  // Mensagem padrão 
&#91;/sourcecode&#93;

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


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)&amp;&amp;dia==31)return false;
	if (mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;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