Google AJAX API Language e Prototype.js

Martedì 13 Maggio, 2008

Dopo aver visto il funzionamento delle Google AJAX API mi è venuto in mente un modo alternativo per tradurre realtime le nostre pagine Web. Sfruttando prototype.js è possibile marcare i TAG HTML che desideriamo tradurre, invece di sottoporre l'intero documento alla traduzione. Per marcare i TAG HTML da tradurre ho usato l'attributo rel, impostandolo a translate:

PLAIN TEXT
HTML:
  1. <p rel="translate">Questo testo deve essere tradotto</p>

Con una semplice funzione, poi, possiamo sfruttare prototype.js per elaborare tutti i  TAG HTML con rel='translate':

PLAIN TEXT
JavaScript:
  1. /*
  2. ** @name         : translate()
  3. ** @description  : translate
  4. */
  5. function translate() {
  6.     $$('[rel="translate"]').each(
  7.         function(e) {
  8.             google.language.translate(e.innerHTML, 'it', 'en',
  9.                 function(result) {
  10.                     if (result.translation) {
  11.                         e.innerHTML = result.translation;
  12.                     } else {
  13.                         alert( 'Translate Error!\n\n' + result.error.message );
  14.                     }
  15.                 }
  16.             );                                         
  17.         }
  18.     );
  19. }

Potete vedere questa funzione in azione su e-lementi.com

Ovviamente lo script può (e/o deve) essere perfezionato a seconda dei casi. È interessante notare, tuttavia, che è possibile specializzarlo in modo tale da sostituire delle immagini (nel caso di bottoni in grafica che contengono testo) o fargli elaborare TAG particolari come INPUT o TEXTAREA.

Uno dei limiti che ho riscontrato, e che voorei approfondire, riguarda il numero di caratteri che possono essere tradotti. In caso di testi importanti, infatti, non è difficile ottenere un errore: che infatti ho gestito nello script con un alert().

Post correlati

Tags: , , , ,
Pubblicato in Internet, Javascript, Sviluppo, Tutorials | Nessun commento »