Como funciona

A mecânica é simples: a função jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag <span>, que é quem realmente receberá o Fade. Tudo o que você precisa saber e fazer é colocar um pequeno trecho javascript na sua página, ajustar seu CSS e adicionar uma classe ao botão que receberá o efeito.

É exatamente o mesmo efeito que está aplicado aos botões de Download e Demo no início do post. Você também pode acessar a demonstração e baixar os arquivos para visualizar melhor o código.

O Javascript

O primeiro passo é importar o jQuery normalmente. Depois é só inserir a função abaixo. Perceba que logo no início do código, na segunda linha, você deve colocar a classe dos botões que receberão o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe serão animados.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.efeito_fade').append('').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(500, 1);
        }, function () {
            $span.stop().fadeTo(500, 0);
        });
    });
});
</script>

O CSS

No CSS, a primeira coisa a fazer é criar um botão comum, com a técnica clássica de image replacement para diferenciar o estado normal (“apagado”) do estado :hover (“aceso”). Ou seja, criar uma imagem que contenha os dois estados do botão e então estilizá-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usuário passa o mouse sobre ele.
A única diferença é que ao invés de estilizar o estado :hover em si, você irá estilizar a tag <span> que será criada dentro do botão como se fosse o :hover, com algumas pequenas mudanças:
A primeira é posicionar o botão relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda é posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do botão, ajustando apenas o background. Eu sei, parece complicado, mas veja como o código não tem nada demais:

/* botao 1 */
#seu_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/botao.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#seu_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/botao.png) no-repeat;
	background-position: bottom;
}

/* botao 2 */
#outro_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/outro.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#outro_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/outro.png) no-repeat;
	background-position: bottom;
}

O HTML

Como eu disse, a única coisa que você precisa fazer no seu HTML é atribuir a classe indicada na função javascript em todos os elementos que receberão o fade. Nesse caso a classe é a “efeito_fade”. Veja o código dos dois botões desse exemplo:

<a href="#" id="seu_botao" class="efeito_fade"></a>
<br />
<a href="#" id="outro_botao" class="efeito_fade"></a>

Veja abaixo como ficam os botões desse exemplo e perceba que, por ter um código HTML extremamente simples e deixar toda a mágica para o javascript e CSS, os botões podem ser facilmente aplicados a qualquer parte do seu site. Uma dica é experimentar usar essa técnica não apenas para botões, mas também para menus, imagens e outros elementos interativos, tomando sempre cuidado para não exagerar na dose.

Importando a API

A API de Idiomas oferecida pelo Google é muito fácil de usar e pode ser importada diretamente dos servidores da empresa, o que permite que você a utilize sem precisar copiar nenhum arquivo para o seu próprio servidor. Além disso, importar a API diretamente do Google garante que você estará sempre usando a sua versão mais atualizada. Para incluí-la na sua página basta incluir a chamada para o endereço de APIs do Google e então carregar a API de Idiomas:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

</script>

Criando a função

A função que criaremos para fazer a tradução utilizará duas das funções fornecidas pela API de Idiomas. A primeira, google.language.detect, detecta o idioma original de um bloco de texto e a segunda, google.language.translate, traduz um bloco de texto do seu idioma original para outro. Nossa função então tem 3 passos principais:

1 – Detecta o idioma do texto que queremos traduzir;
2 – Traduz o texto para o idioma que desejamos;
3 – Insere a tradução na página ou substitui o texto original;

O código completo da função:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function traduzir(original, traduzida, idioma) {

	var text = document.getElementById(original).innerHTML; //div com o texto original
	var translated = document.getElementById(traduzida); //div que receberá o texto traduzido

	google.language.detect(text, function(result) { //detecta o idioma do texto original
	if (!result.error && result.language) {
	google.language.translate(text, result.language, idioma, //traduz o texto
	function(result) {
	if (result.translation) {
	translated.innerHTML = result.translation; //insere o txt traduzido na div escolhida
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na tradução
	}
	});
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na detecção
	}
	});

}

</script>

Perceba que a função tem três argumentos:
1° – original – Id da <div> que contémo texto a ser traduzido;
2° – traduzida – Id da <div> que receberá a tradução;
3° – idioma – Código do idioma para qual o texto será traduzido. Veja a lista aqui.

O HTML

Tudo o que você precisa no seu código HTML é que o texto esteja dentro de uma <div> com um id específico e um botão que execute a função de tradução. Ou seja, se o seu HTML já está pronto, basta colocar uma <div> envolvendo o texto que vai ser traduzido e atribuir um id a ela. Veja abaixo o código para este exemplo:

<div id="texto_original">
<h3>Design</h3>
<p>JavaScript é uma linguagem de programação criada pela Netscape em 1995, que em princípio se chamava LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da Sun, após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes "JavaScript".</p>
<p>Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe.</p>
<p>Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript  C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.</p>
</div>
<p><a onClick="traduzir('texto_original','texto_original','en');" href="#" id="botao_traduzir">Traduzir o texto</a></p>

Considerações finais

Pronto, como você vê é muito simples e fácil de usar. Dê uma olhada na demonstração e baixe os arquivos desse exemplo para estudar e testar as suas próprias alterações. No exemplo você encontrará também algumas linhas CSS que usei para estilizar este exemplo mas que não são necessárias para o funcionamento da API, então se quiser pode retirá-las sem nenhum problema.

É importante saber que esta API ainda está em desenvolvimento, então muitas coisas novas ainda devem aparecer, assim como um pouco de instabilidade. Também é bom ter em mente que existe um limite da quantidade de texto que pode ser traduzida de cada vez. O Google promete aumentar este limite constantemente, hoje ele é de 5000 caracteres. No entanto, nos meus testes o máximo que consegui foram 1200 caracteres.

É claro que se você tem um site que fornece informações que dependem de traduções precisas, como documentos oficias ou jurídicos, onde uma simples palavra pode fazer toda a diferença, o ideal é fazer a tradução manualmente e criar uma versão separada do texto. Mas se tudo o que você precisa é fornecer uma versão minimamente inteligível do seu texto esta é uma ótima solução.

Sem necessidade de PHP. Tudo o que você precisa fazer é copiar o arquivo JS para o seu servidor e inserir algumas linhas de código na sua página.

Com o My Latest Tweets você pode:
• Exibir tweets de um determinado usuário;
• Exibir tweets com uma determinada #hashtag;
• Exibir tweets com uma determinada palavra-chave ou frase;
• Configurar o o número de mensagens que será exibida;
• Configurar a língua das mensagens que você deseja exibir;
• Estilizar o box facilmente via CSS.

Veja a demo.
Faça o download!

Lá encontrei trabalhos inusitados como: utilizar duas janelas diferentes do browser e fazer com que elas compartilhem o mesmo conteúdo, criar um caleidoscópio mexendo apenas o mouse, montar um quebra cabeça com vídeo e com várias janelas do browser ao mesmo tempo, criar uma música com duas janelas ao mesmo tempo.

Tem de tudo, coisas realmente para se inspirar.

Se você tiver algo que valha a pena, envie já!

Você ainda pode ter o seu nome e blog publicados em destaque ;-)

Acesse: Google Experiments

Um exemplo:
Given a String name, e.g. “Bob”, return a greeting of the form “Hello Bob!”.
[Dada uma string contendo um nome [por exemplo "Bob"], retorne um cumprimento na forma de “Hello Bob!”.
E a resposta:
public String helloName(String name) {
return("Hello " + name + "!");
}

Claro que esse era dos mais fáceis. Quero ver você resolver esse.

Agora tente selecionar um trecho de texto e editá-lo.
Sensacional não? Pra que serve eu não sei, mas gostei.

Você pode até adicionar o link aos favoritos e usar sempre que precisar [IE e Firefox]: