Tradução de textos utilizando a API do Google

Tags , , , , ,

Categorias: css, jquery, tutoriais

Neste artigo iremos ver como traduzir um determinado conteúdo que está em um idioma para outro utilizando a API do Google.

O exemplo utilizado aqui será bem simples, mas poderá passar a idéia do funcionamento da API, permitindo que você faça uso mais complexo desta abordagem.

Limitações deste artigo:

  1. A API de tradução do Google tem um limite de 500 palavras a serem traduzidas por requisição.
  2. Neste artigo será traduzido apenas o conteúdo de uma div.
  3. Como a tradução feita pela Google API é feita palavra a palavra, a tradução pode não ser fiel.

Então, mãos à obra.

Arquivo HTML

Crie um arquivo chamado index.html. Neste arquivo faça como a seguir: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tradução de textos com a API do Google</title>


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 // Inicializa a versão 1 da Google Ajax API
 google.load("language", "1");

 // Carrega o framework JQuery, tambem atraves da mesma API do google
 google.load("jquery", "1.3");

Neste trecho iniciamos a construção do cabeçalho da página e fizemos a chamada da API do Google. Nesta API já podemos fazer tanto a invocação da API de tradução 

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

quanto a chamada do framework JQuery 

google.load("jquery", "1.3");

. Mas qual o motivo pelo qual foi utilizado a API do google para chamar JQuery neste exemplo? A principal vantagem é a economia de banda e distribuição cd conteúdo (CDN), utilizando também menos requisições HTTP, mas isso é assunto para um próximo artigo. Vamos dar continuidade ao artigo.

Agora neste passo iremos criar as funções em JavaScript que serão responsáveis pela tradução do conteúdo.

  google.setOnLoadCallback(function() { // Ao carregar a API do google, faça:
    $(function(){ //Escuta o carregamento da página.
        $("#idioma").change(function(){ //Quando ouver mudança no campo "idioma" executara a função como segue...
            var idioma = $("#idioma").val(); //Pega o idioma selecionado no campo idioma

            var texto = $("#traduzir").html(); //Conteudo que será traduzido
            var len = content.length; //Tamanho do texto a ser traduzido
            var palavras = 500; // Como a Google API language aceita apenas 500 palavras por vez...
            var idiomaOrigem = "pt"; //Idioma de origem do texto a ser traduzido 

            //Limpa o conteudo da div com o resultado da tradução
            $("#traduzido").html("");

            for(i=0; i <= (len/palavras); i++) {
              google.language.translate (texto.substr(i*palavras, palavras), idiomaOrigem, idioma, function (resultado) {
                 if (!resultado.error) { //Caso não ocorram erros
                        $("#traduzido").html($("#traduzido").html()+resultado.translation); //Adiciona o resultado dentro da div traduzido (palavra a palavra)
                 }
               });
             }
        });
    });
});
</script>

Agora ainda no cabeçalho da página (a fim de exemplo apenas) adicionamos algum estilo CSS 

  
<style type="text/css">
.area{
    width: 42%;
    float:left;
    padding: 1%;
    border: 2px solid #ccc;
    color: #666;
    font: 1.2em "Trebuchet MS", Arial, Verdana, sans-serif;
    margin: 2%;
}

#idioma{
    font-size: 1.1em;
    color: #666;
}
</style>

</head>

E por fim, resta fazermos o conteúdo da página, como segue: 

   <body>

   <p><label for="idioma">Idioma: </label>
    <select name="idioma" id="idioma">
        <option value="en" selected="selected">english</option>
        <option value="de">deutsch</option>
        <option value="pt">português</option>
        <option value="fr">francais</option>
        <option value="it">italiano</option>
        <option value="es">espanol</option>
        <option value="nl">nederlands</option>
        <option value="ja">japanease</option>
    </select>
   </p>

    <div class="area" id="traduzir">
        <p>
            Este texto será traduzido para outro idioma. Ao selecionar o idioma desejado no campo &quot;Idioma&quot;, este texto será traduzido. <br />
            Porém vale lembrar que a API do Google tem um limite de ate 500 palavras por requisição.
        </p>
    </div>

    <div class="area" id="traduzido">
        
    </div>

</body>
</html>

Para visualizar o exemplo completo, acesse http://www.brunoew.com.br/translate.

Até o próximo artigo!

Google translate

nenhum comentário

Nenhum comentário.

RSS para os comentários nesta postagem. TrackBack URI

Deixe seu comentário