Google AJAX API Language e Prototype.js

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:

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':

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

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 vorrei 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().

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL