É 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:
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.
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
August 18th, 2009 at 6:56 pm
Opa! Muito interessante, como a maioria dos posts do blog! ;)
P.S: Como frequentador do blog, estava sentindo falta de novos posts ;)
August 19th, 2009 at 1:07 am
muito bom ! esse blog é meu dicionario de ideias!!
August 19th, 2009 at 2:22 am
boa Danilo, essa eu não tinha visto..
abraço
August 20th, 2009 at 2:06 pm
Clap, clap, clap!
Simples e fácil!
August 20th, 2009 at 2:15 pm
Interessante, certa vez usei a “API” do babylon pra traduzir neste meu site http://tradutor.alexsandro.com.br
August 25th, 2009 at 9:55 am
Eaê, Danilo!!
Um amigo me indicou seu blog, mais especificamente este post.
Gostei do conteúdo do blog, Parabéns!!!
Essa tradução é muito bacana e muito útil!!
Valew pela dica.
Abraço.
September 22nd, 2009 at 8:42 pm
Olá Danilo, ótimo o blog. Parabéns!
Com relação ao post:
Adicionei o script ao meu site, porem, não sei como fazer para manter o idioma selecionado como padrão para que quando a pessoa clicar em outro link ela possa continuar na mesma lingua!
Se puder me ajudar…
Fico no aguardo e um Grande abraço!
September 22nd, 2009 at 8:44 pm
Esqueci de mandar meu código:
$(document).ready(function(){
$(‘a#traduzir1′).click(function(){
$(‘div#site’).translate(‘pt’)
});
$(‘a#traduzir2′).click(function(){
$(‘div#site’).translate(‘en’)
});
$(‘a#traduzir3′).click(function(){
$(‘div#site’).translate(‘es’)
});
});
September 25th, 2009 at 11:11 am
Olá Danilo,
Deixei um comentário outro dia pedindo dicas de como aprimorar o script postado acima para as necessidades que eu tenho.
Ficaria grato se você pudesse me ajudar! Caso não possa por favor envie uma mensagem informando que não pode.
Pois estou na esperança de que você pode me ajudar a resolver o problema.
Obrigado desde já.
September 25th, 2009 at 10:38 pm
@Phelipp, grave um cookie, e sempre qndo rodar outra página, leia o cookie e se necessário traduza.
September 26th, 2009 at 10:57 pm
Danilo,
Obrigado pela dica deu tudo certo!
Aproveito para divulgar e indicar mais um plugin para jquery.
jQuery Cookie
http://plugins.jquery.com/project/Cookie
A minha pergunta me aproveitando só mais um pouco da sua boa vontade é:
Existe uma forma mais rápida de execução desse método de tradução?
Pois ela leva cerca de 5 a 10 segundos para traduzir todo o texto do site.
Obrigado pela força.
Grande abraço!
Att. Phelipp de Avila
October 1st, 2009 at 11:57 am
Meu caro é possível eu utilizar este script em uma página inteira?
October 19th, 2009 at 10:44 am
Muito obrigado pela ajuda danilo mas tenho uma pergunta e se você puder me responder muito obrigado.
Não tenho grandes conhecimentos neste tipo de programação, sendo assim já consegui instalar este tradutor mas não consegui posicionar as bandeiras no topo do site como faço isso?
November 18th, 2009 at 8:34 am
Ola,gostaria de fazer o seguinte …tipo assim antes de entrar na home page havera uma abertura onde tera as bandeiras dos paises gostari de saber como faço qu ao clikar na bandeira ele traduza o site por completo….
grato
November 30th, 2009 at 1:11 pm
Danilo,
muito bom cara! parabens!
foi muito facil, mesmo!
com relação ao erro na tradução em portugues deve-se trocar o pt por pt-PT em arrIdioma.push(new Array(‘pt-PT’,'Português’,'Traduzir para português’,'Traduzindo’,'Erro ao traduzir’));
e tbm em div.idiomas a.translate_pt-PT{ background: url(‘../img/idioma/pt.gif’) no-repeat; }
para carregar o CSS correto.
Outra coisa, quando vc esta com texto em portugues e clica novamente para traduzir em portugues esta dando um erro, vou da uma olhada melhor e qualquer coisa te dou um retorno, mais um vez muito obrigado cara.
Junior Oliveira
January 14th, 2010 at 4:13 pm
Olá gostaria de saber como posso fazer os icones das linguas ficar acima da div e nao abaixo dela
April 2nd, 2010 at 2:54 pm
Olá…
muito bom isso Danilo, parabéns aeeew =D
Estou precisando da mesma função que o Phelipp Avila pediu aí em cima, que é armazenar em cookie o idioma escolhido pelo visitante para que quando ele entrar no site novamente, esteja o mesmo idioma que ele havia escolhido.
O problema é que não tenho mínima idéia de como faz isso, já até dei uma pesquisada, mas não consigo fazer essa parada.
Preciso muito de ajuda!
April 23rd, 2010 at 3:44 pm
Olá. Procurei bastante por algo parecido e acho que vai ser útil, mas seria ainda melhor se houvesse forma de posicionar as bandeiras onde bem se quisesse, como no topo da página, ou em um menu. Há como modificar o script para mudar a localização das bandeiras? Obrigado e parabéns.
April 23rd, 2010 at 3:47 pm
Ou melhor ainda, se houvesse como reconhecer o idioma padrão do usuário ao carregar o script e então abrir a página já traduzida! Isso sim seria bom!
July 6th, 2010 at 5:19 pm
Parabéns e contribuo com uma dica:
Geralmente resolvo meus problemas com umas pitadas de php.
Crie coloque via GET cada abreviação e depois recupere com php –>
a href=’#.php?lingua=en’
depois crie uma variavel –>
$lingua = @$_GET['lingua'];
atribua no script da função –>
?php echo “$lingua”; ?
September 14th, 2010 at 5:16 pm
Ola,gostaria de fazer o seguinte …tipo assim antes de entrar na home page havera uma abertura onde tera as bandeiras dos paises gostari de saber como faço qu ao clikar na bandeira ele traduza o site por completo….
February 3rd, 2011 at 1:24 pm
nossa muito simples !
obrigada pela iniciativa !
de verdade!! o/
June 24th, 2011 at 2:53 am
Bom dia,
Como fazer para, as bandeiras ficarem acima do texto e nao abaixo ?
October 25th, 2011 at 5:09 pm
Para quem tiver com problema com esse script quando precisar carregar um arquivo externo na div translate acesse
http://www.codigosnaweb.com/forum/Tradutor-de-idiomas-jQuery-translate_3_6776.html