Internacionalizando um site de forma simples

A algum tempo que já estava afim de traduzir meu site para o Português, mas nunca tive tempo e nem muito empenho.
Ontem estava procurando uma forma simples de traduzir o site sem muito trabalho, mas não achei nada que me satisfez.

Dentre as formas de tradução encontrei:

  • Criar outra página, duplicando HTML, o que acho desnecessário.
  • Utilizar AngularJS + i18n/l10n, o que não vem ao caso, pois meu site possui apenas uma página.
  • Por fim, o l10n.js que também não veio ao caso pela documentação escassa e falta de exemplos palpáveis.

Sendo assim, criei uma forma tosca, mas simples de traduzir uma página pequena, sem muito trabalho. Na verdade essa ideia foi baseada no asknot que utiliza arquivos .ini como resource de tradução, junto com o l10n.js.

Para que este recurso avançado de tradução funcione você precisará do jQuery.

O recurso de tradução funciona de forma bem simples, adicionamos o atributo data-translation-id="chave" no elemento que desejamos traduzir e o arquivo locales.js faz o resto. Este arquivo é apenas um JavaScript com as mensagem de texto e um seletor jQuery para pegar os elementos com o atributo antes definido.

O código HTML ficará assim:

Já no JavaScript fazemos assim:

Você pode ver um código exemplo mais completo aqui ou acessar e ver a execução aqui.

Espero que vocês tenham gostado. Não deixem de assinar o nosso RSS.