Cookie

TheJoe.it Into the (open) source

29mar/114

GTranslate: un widget per la traduzione automatica

Attenzione!

Questo articolo è stato scritto nel 2011, potrebbero esserci stati sviluppi circa l'argomento trattato.
In caso di dubbi lasciate un commento in fondo all'articolo.
Grazie.

290711045_020a5e262a_m

Oggi vediamo da vicino uno degli automatismi che più mi hanno semplificato la vita sul web. Molti di noi conosceranno gli "Strumenti per le lingue" offerti da Google, ma non tutti sanno che è possibile integrare i bottoni "bandierina" all'interno del proprio sito per effettuare una traduzione automatica, istantanea di tutto il contenuto senza che cambi l'indirizzo nella barra dell'URL. Sto parlando di GTranslate, una libreria che si occupa appunto della traduzione istantanea di tutto il contenuto che trova in una pagina; e un esempio lo potete vedere cliccando sulle bandierine nella colonna di destra, in alto su questo sito. In questo caso la libreria è integrata in un plugin per WordPress (il motore che fa "girare" questo blog), ma è possibile utilizzarla con qualsiasi sito, anche con pagine HTML statiche.

Per prima cosa diamo un po' di credito all'autore: Edvard Ananyan. Per abilitare la traduzione automatica esiste un comodo wizard che ci guiderà nella scelta della lingua, nelle lingue da includere e nelle varie opzioni supplementari. Di seguito uno screenshot con le opzioni che raccomando.

Tutto dipende dal lavoro che stiamo facendo. Lo screenshot di cui sopra non ha bisogno di tante spiegazioni. Forse l'unico punto sul quale è necessario porre l'accento sta nel caricamento della libreria jQuery. Se utilizziamo già jQuery per il nostro sito (ad esempio per una gallery, o per qualche altro effetto) non è necessario mettere il flag e caricarla nuovamente, se invece non sappiamo neanche di cosa si tratti è meglio lasciare il flag. Di default poi viene visualizzata la tendina con la scelta della lingua; visivamente non è sempre accattivante (pur essendo molto utile dal punto di vista pratico). Come sempre tutto dipende dalle nostre esigenze, anzi dalle esigenze di chi guarderà il sito.

Non appena clicchiamo su un flag, la modifica viene riportata automaticamente all'interno del codice HTML che vedete a fondo pagina (nello screenshot), senza bisogno di confermare, ricaricare o altro. E' sufficiente incollare il codice nella pagina HTML sulla quale vogliamo integrare la traduzione (nel punto in cui la vogliamo integrare) e "come per magia" appariranno le bandierine.

Ovviamente il presente post non avrebbe senso di esistere senza un'adeguata customizzazione al risultato finale. Il codice generato in questo caso è il seguente:

<!-- GTranslate: http://edo.webmaster.am/gtranslate -->
<a href="javascript:doGTranslate('en|en')" title="English" class="gflag" style="background-position:-0px -0px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="English" /></a><a href="javascript:doGTranslate('en|fr')" title="French" class="gflag" style="background-position:-200px -100px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="French" /></a><a href="javascript:doGTranslate('en|de')" title="German" class="gflag" style="background-position:-300px -100px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="German" /></a><a href="javascript:doGTranslate('en|it')" title="Italian" class="gflag" style="background-position:-600px -100px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Italian" /></a><a href="javascript:doGTranslate('en|pt')" title="Portuguese" class="gflag" style="background-position:-300px -200px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Portuguese" /></a><a href="javascript:doGTranslate('en|es')" title="Spanish" class="gflag" style="background-position:-600px -200px;"><img src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Spanish" /></a>

<style type="text/css">
<!--
a.gflag {font-size:24px;padding:1px 0;background-repeat:no-repeat;background-image:url('http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24.png');}
a.gflag img {border:0;}
a.gflag:hover {background-image:url('http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24a.png');}
-->
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/jquery-translate.js"></script>
<script type="text/javascript">
//<![CDATA[
if(jQuery.cookie('glang') && jQuery.cookie('glang') != 'en') jQuery(function($){$('body').translate('en', $.cookie('glang'), {toggle:true, not:'.notranslate'});});
function doGTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;var lang=lang_pair.split('|')[1];_gaq.push(['_trackEvent', 'doGTranslate', lang, location.pathname+location.search]);jQuery.cookie('glang', lang);jQuery(function($){$('body').translate('en', lang, {toggle:true, not:'.notranslate'});});}
//]]>
</script>

Nessuno ci vieta di apportare modifiche al codice generato. In uno dei siti su cui ho lavorato, ho spostato il CSS in un foglio separato, aggiungendo il codice a quello già esistente, ho impostato le bandierine della dimensione necessaria, richiamando le immagini presenti già nel mio server, ho caricato i javascript sul mio server e li ho richiamati da li. Dai test che ho eseguito prima e dopo le modifiche si risparmia quasi un secondo sul load della pagina, un bel vantaggio calcolato che non è necessario tradurre nulla "a mano".

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (4) Trackback (0)
  1. Ovviamente con un plugin che traduce il contenuto di un testo in modo COMPLETAMENTE automatizzato non puoi avere la certezza che il testo rispetti in tutto e per tutto le regole semantiche della lingua in cui il testo viene tradotto.

    C’è da dire però, parlo della mia esperienza, che con un plugin del genere nonostante io non sappia il tedesco o lo spagnolo sono riuscito a farmi “capire” da tedeschi e spagnoli.

    E se proprio devo dire la verità sono anche abbastanza soddisfatto della traduzione dei miei articoli in inglese, è sufficientemente fedele al testo originale.

    WPML è un’altra cosa, lo installi e ti da l’opportunità di tradurre il tuo sito in altre lingue. Te lo devi tradurre tu però, e la lingua la devi conoscere. Carino e molto utile in ambiti aziendali internazionali, non certo adeguato all’utente medio.

    Tu usando GTranslate hai trovato difficoltà?

  2. Diciamo che va bene per chi non legge e non sa le lingue perchè la traduzione è veramente fatta male ovviamente usando google traduce le parole ma non il concetto delle frasi che per ogni lingua va localizzato! Molto meglio WPML ma ovviamente richiede la traduzione dei testi!
    Oltretutto la versione PRO di GTranslate costa ben 78$ il che mi sembra un bel furto visto cosa offre e che vale solo per singolo dominio!

  3. Ciao Claudia,
    ciò che chiedi è molto semplice, e in parte spiegato nell’articolo. Devi andare nel sito ufficiale “http://gtranslate.net/”, cliccare su “General HTML” e confermare. Nella pagina seguente clicchi sul pulsante “Download”, apparirà un pop-up con il quale puoi decidere le lingue, la dimensione delle bandiere e altro.

    In fondo al pop-up c’è un codice da copiare all’interno dell’HTML del tuo sito. Metti tutto online e hai finito.

    Se hai altri dubbi scrivi pure.

  4. Ciao!!
    sto cercando dei widget per tradurre il mio sito web ma non ho la piu pallida idea di come funzioni..mi potresti dare una mano per favore? grazie Claudia


Leave a comment

Ancora nessun trackback.