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="https://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="https://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="https://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="https://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="https://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="https://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('https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24.png');}
a.gflag img {border:0;}
a.gflag:hover {background-image:url('https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24a.png');}
-->
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://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”.

Non ti basta?

8 plugin per WordPress di cui non potrai piu’ fare a meno Alcune estensioni per Firefox di cui non farai più a meno Aggiungere una didascalia a comparsa alle foto con i CSS3 Scaricare PSD rilasciati gratuitamente TCPDF: una libreria PHP per convertire pagine web in PDF