Creare un sito multilingua con JQuery

jQuery jQuery

Creare un sito multilingua con jQuery

28 giugno 2015 — by Giusy D'atria — 0

Realizzare un sito multilingua può essere un impegno gravoso, ma in alcuni casi risulta indispensabile per rendere fruibili i contenuti da tutti i tipi di visitatori.

Oggi vi voglio mostrare come, in pochi passi, sia possibile avere un sito convertito in oltre 30 lingue senza duplicare o riscrivere nemmeno un file HTML ( come si faceva nella “vecchia scuola”).

Esistono svariati tool online come babelfish, che permettono la conversione della pagina internet e ne restituiscono la versione localizzata nella lingua prescelta, la conversione però avviene dentro un iframe e risulta:

poco appetibile dai motori di ricerca
rende il sito brutto da vedere
la conversione e’ richiamabile dal sito usando un link che riporta al sito babelfish, cosa non molto professionale…

Esiste un’alternativa più professionale e bella da vedere? la risposta e’ si.

Grazie alle fantastiche librerie jQuery e alle API del traduttore Google Traslate e’ possibile. Il tool online GT Traslate e’ molto esplicativo e ci permette di scegliere quali lingue mostrare e quali no.

Come vedete e’ possibile scegliere anche di inserire un menu’ di selezione dropdown oltre alle classiche “bandierine”.

Una volta composto il nostro widget secondo le nostre esigenze copiamo e incolliamo il codice visualizzato all’interno del “body” della nostra pagina HTML. Solo una breve nota, se vogliamo che il nostro codice sia validato w3C tagliamo le due righe di codice :

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

<!--

a.gflag {font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url('http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/16.png');}

a.gflag img {border:0;}

a.gflag:hover {background-image:url('http://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/16a.png');}

-->

</style>

e incolliamole dentro il nostro foglio di stile o nell’head della pagina, questo perchè, secondo gli standard non e’ permesso avere codice di stile nel corpo del documento. Il metodo di translate “on Fly jQuery” e’ quello che vi consiglio dato che converte la pagina in modo diretto, rimanendo all’interno del dominio e senza modificare l’aspetto della pagina con redirect o codice “sporco”. Tuttavia e’ possibile scegliere anche il metodo di conversione “standard ” con redirect o link “sporcati”.

[Voti: 1 Media Voto: 5/5]