Google AJAX Language API: tutorial sul funzionamento

Rispondo, con questo post, alla richiesta di Andrea su come inserire il traduttore di Google nel proprio web. Esistono vari modi per usufruire dei servizi di traduzione automatica messi a disposizione da Google e non solo. Possiamo usare Plugin scritti da terzi, un semplice script Javascript preconfezionato da Google stessa o imparare ad usare le API, cioè una serie di funzioni richiamabili – come vedremo – in vari modi.

Plugin

Su questa soluzione non mi dilungo, in quanto credo non sia propriamente attinente alla richiesta di Andrea, se ho compreso bene. Inoltre è una soluzione sostanzialemente valida solo per i Blog e non per un uso personalizzato e generico. Posso solo segnalare, per gli utenti WordPress, Global Translator, forse il più semplice, funzionale e diffuso Plugin di questo tipo.

Script preconfezionato da Google

Il modo più semplice per tradurre il proprio sito web o il proprio Blog è quello di inserire un semplice script Javascript fornito da Google stessa. Basta andare sul sito translate.google.com e cliccare sulla scheda ‘Strumenti‘. Da questa pagina è possibile preimpostare le funzioni di traduzione o lasciare quelle di default. Lo script è molto semplice:

1	<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=it&w=160&h=60&title=&border=&output=js"></script>

e come risultato si ottiene:

Google Translate

Javascript AJAX API

Lo script preconfezionato lascia sicuramente poco spazio a personalizzazioni! Chi vuole quindi cimentarsi nell’uso di strumenti a basso livello, troverà utile sfruttare le API AJAX utilizzabili tramite Javascript. Le API Google in generale, come quelle utilizzate per creare motori di ricerca personalizzati, seguono un loro standard e risultano immediatamente facili da usare. Chi, infatti, ha già utilizzato altre API si troverà immediatamente a suo agio. La prima cosa da fare è includere le API con una semplice riga script da inserire nel corpo HEAD della nostra pagina HTML:

1	<script type="text/javascript" src="http://www.google.com/jsapi"></script>

A questo punto il sistema di traduzione è caricato (in parte) e non serve altro che utilizzarlo. Vediamo un semplice esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<html>
<head>
<title>Esempio di traduzione automatica</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
/*
** @name : simpleTranslation()
** @description : preleva il testo in 'inglese' dall'elemento HTML 'text'
** : e lo traduce tramite l'API (la funzione) google.language.translate()
*/
function simpleTranslation() {
var text = document.getElementById("text").innerHTML;
google.language.translate(text, 'en', 'it', insertHTML );
}

/*
** @name : insertHTML()
** @description : [event] - funzione di callback che viene chiamata al termite
** : della traduzione (sia se è andata a buon fine o meno). Ottenuto
** : il risultato, questo viene inserito nell'elemento HTML 'translation'
** @result : result contiene le infomazioni sul risultato
*/
function insertHTML( result ) {
if (result.translation) {
document.getElementById("translation").innerHTML = result.translation;
}
}
//
google.setOnLoadCallback( simpleTranslation );
</script>
</head>

<body>

<div id="text">Hello, World!</div>
<div id="translation"></div>

</body>
</html>

Questo esempio mostra come sia semplice tradurre una porzione di testo presente nella nostra pagina. Tutta la documentazione al riguardo è disponibile su Google AJAX Language API
, dove è possibile trovare ulteriori esempi e la documentazione dettagliata di tutte le classi.

Nell’esempio proposto viene tradotta una porzione di testo dall’inglese all’italiano. È anche possibile chiedere al sistema di determinare automaticamente la ‘lingua’ sorgente tramite l’uso della funzione google.language.detect():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
<head>
<title>Esempio di traduzione automatica con auto-detect</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function autoDetect() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text,
function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "it",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
}
);
}
}
);
}
//
google.setOnLoadCallback( autoDetect );
</script>
</head>

<body>
<div id="text">Hello, World!</div>
<div id="translation"></div>
</body>
</html>

Quest’altro esempio è identico al precedente, con la differenza che il testo presente nell’elemento ‘text’ viene automaticamente riconosciuto e tradotto in italiano! Provate ad inserire altre lingue.

Un esempio utile per verificare le traduzioni, con due area di testo così da inserire dinamicamente porzioni più corpose:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
<head>
<title>Esempio di traduzione automatica con auto-detect</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function en2it() {
var text = document.getElementById("english").value;
google.language.translate(text, 'en', 'it',
function( result ) {
if (result.translation) {
document.getElementById("italian").value = result.translation;
}
}
);
}
</script>
</head>

<body>
<textarea cols="30" rows="10" id="english"></textarea>
<a href="javascript:en2it()">Traduci</a>
<textarea cols="30" rows="10" id="italian"></textarea>
</body>
</html>

RESTful Interface: Flash, PHP e JAVA

Divago, forse, dalla richiesta iniziale, tuttavia ritengo interessante e doveroso completare l’argomento, visto che ci siamo. Tramite l’uso del protocollo REST (RESTful interface) è possibile utilizzare le API Google tramite metodi GET sull’url di base fornito:

1	http://ajax.googleapis.com/ajax/services/search/web

Questa tecnica permette di utilizzare le funzioni di traduzione anche in altri ambienti e altri linguaggi, come ad esempio Flash (Actionscript 3.0), PHP o Java.
Nel caso di Flash, ad esempio, abbiamo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var service:HTTPService = new HTTPService();
service.url = 'http://ajax.googleapis.com/ajax/services/search/web';
service.request.v = '1.0';
service.request.q = 'Paris Hilton';
service.resultFormat = 'text';
service.addEventListener(ResultEvent.RESULT, onServerResponse);
service.send();

private function onServerResponse(event:ResultEvent):void {
try {
var json:Object = JSON.decode(event.result as String);
// now have some fun with the results...
} catch(ignored:Error) {
}
}

La funzione JSON.docode() è disponibile nella libreria AS3corelib, da me segnalata in un precedente post.

Sul Code Snippets di Google potrete trovare ulteriore documentazione.

Commenti recenti

7 Come applicare la tecnica del Chroma Key in Adobe Flash
- Giovambattista Fazioli: @ale: Come indicato @Kevin vedi sul repo di GitHub: https://github.com/gfazioli/Ch roma-Key
- Giovambattista Fazioli: @Kevin: See https://github.com/gfazioli/Ch roma-Key
- Kevin: Very nice example – would like to see the .fla too!
59 Wordpress 2.9+: la nuova funzione post thumbnails
- Ludovica: Ciao! Ti spiego il mio dubbio. Quando scrivo un post non inserisco immagini nell’articolo (se così...
- Marco: ciao @Giovambattista Fazioli, grazie per tutte le delucidazioni di questa ottima guida. Avrei un quesito da...

2 commenti a: “ ”

26 feb, 2010 Andrea:

Ciao… complimenti per l’ampia soluzione che hai postato…
se mi permetti di farti una domanda, sperando di avere risposte quanto prima…
io sto utilizzando le Api con questa funzioncina:

google.load("language", "1");
function initialize(TrasLang) {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(type, result.language, TrasLang.value,
function(result) {
var translated = document.getElementById("text");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}

che mi va a sostituire il testo nel div con nome text e dove gli passo la lingua in cui tradurre con una Select.
Vabbè… il tutto funziona benissimo per blocchetti di codice, ma qualora all’interno del testo da tradurre c’è del codice HTML mi da errore…

Stavo provando a vedere se c’era il modo di far ignorare i tag html ma non sono riuscito a trovare nulla, finchè non mi sono imbattuto nel tuo bell’articolo!
La finalità è quella di far tradurre tutto il testo che non si trova all’interno di un TAG così da poter tradurre un intero sito… puoi aiutarmi? grazie

Rispondi Quota

26 feb, 2010 Giovambattista Fazioli:
@Andrea: la soluzione potrebbe essere alquanto complicata. A quanto mi risulta, guardando le attuali API messe a disposizione da Google, i tag html non vengono presi in considerazione. Questo è ovviamente un problema notevole su un testo molto formattato, che contiene bold, italic o span con classi o altri tag tipo small etc…
Purtroppo il problema è duplice: una prima soluzione potrebbe essere quelle di “strippare”, cioè eliminare, qualsiasi tag html prlevato con innerHTML, e fino qui si potrebbe utilizzare un regexp sulla stringa letta.
La difficoltà sta dopo. Cioè una volta tradotta la stringa come riposiziono i tag di formazione come strong, em, span, etc… ?
Probabilmente per realizzare quello che serve a te questa tecnologia non è l’ideale. Le API via javascript servono per piccole porzioni di testo, dovresti provare ad usare le funzioni server, manipolibili ad esempio da PHP.
Che sappia io, questa tecnica ha anche un limite di traduzione, oltre che di formattazione. Questo vuol dire che “grandi” quantità di testo non vengono comunque tradotte, a prescindere se contengono HTML oppure no.

Rispondi Quota

Lascia un commento

Nome

Sito web

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

Undolog.com