Cambiare la lingua di una pagina
Introduzione
Molte volte si sente dire "la
lingua ufficiale di internet è l’inglese", ed in effetti è
così. Ogni qual volta si effettui una ricerca sul web, questa si
rivela più efficace se i temini sono inglesi. Ovviamente i risultati
saranno inglesi e ciascun utente dovrà leggerli in tale lingua.
Molte volte si cercano cose in italiano ma con risultati sicuramente
non competitivi poichè le pagine disponibili e i contenuti in
italiano sono molti di meno. Quando effettuo una ricerca la effettuo
in inglese sicuro di trovare ciò che cerco, qualche volta però,
soprattuto molto di recente cercare qualcosa in italiano è molto più
semplice di quello che era molti anni fa, poichè molti, oramai,
scrivono pagine in italiano. Poi ci sono altri che il proprio sito lo
mantengono in più lingue. Ogni qual volta si capita su uno di questi
siti multilingua e ci si trova nella volontà di cambiare lingua
succede che il link riporti alla home della nuova lingua e ci
costringe a navigare nuovamente nel sito per rintracciare la pagina
che stavamo consultanto. Ci vorrebbe un link che riconoscesse la
nostra posizione e ricercasse l’equivalente della nostra pagina
nell’altra lingua selezionata. Insomma qualcosa di più intelligente
del semplice link statico.
Il Javascript
La soluzione più semplice prevede l’uso
del Javascript che implementi un link intelligente. Il Javascript è
un linguaggio di programmazione spesso impiegato nelle pagine web per
sopperire a mancanze che i linguaggi come xhtml (html) posseggono.
Molte volte siamo capitati su pagine web che ospitano oggetti
dinamici come orologi, immagini che cambiano o semplicemente form di
inserimento dati che magicamente ci forniscono il nostro codice
fiscale o verificano se una certa informazione è valida. In questi
casi possiamo trovarci di fronte a pagine arricchite con codice
Javascript. Il Javascript fondamentalmente è un linguaggio di alto
livello che utilizza un paradigma di programmazione ad oggetti. Ogni
singolo elemento di una pagina web è rappresentato in Javascript per
mezzo un oggetto più o meno complesso. Ogni oggetto può essere
semplicemente letto o addirittura manipolato. Dalla semplice pagina
fino al più articolato degli elementi di una pagina fa capo ad un
oggetto organizzato nella struttura dell’intera pagina web secondo
una gerarchia, la stessa che possiede la pagina web. Quindi una
immagine presente nella pagina apparterrà alla pagina e per
accedervi bisognerà passare prima dalla pagina. E’ come se fossimo
di fronte ad una bambola matriosca, per accedere a quella più
interna prima dobbiamo aprire quella più esterna. Per accedere ad
una certa proprietà dell’immagine considerata bisogna prima
conoscere a chi appartiene l’immagine e poi utilizzarla. Ci sono
procedure in Javascript che permettono di modificare al runtime
qualsiasi proprietà nella pagina web. Ci sono procedure che
addirittura permettono di accedere ad informazioni del browser.
Implementazione
Molti
sapranno che cosè la barra degli indirizzi in un browser, per coloro
che non la conoscono sotto questo nome, è la barra su cui viene
scritto dall’utente l’indirizzo internet (URL) a cui si vuole
accedere e che cambia durante la navigazione. Molte volte tale
scritta può diventare incomprensibile e molto lunga, per esempio
quando si accedono ai risultati dei motori di ricerca, altre volte
nonostante si stia attraversando decine di pagine resta sempre
uguale; in quest’ultimo caso siamo di fronte quasi certamente alla
navigazione attraverso i frame: l’indirizzo che cambia è quello di
un determinato frame mentre quello principale non viene mai
modificato. Il contenuto della barra degli indirizza può essere
letto e manipolato in Javascript e lo si farà per risolvere il
nostro problema. All’indirizzo
http://www.sicilypictures.altervista.org/en/ è riportato un esempio
di ciò che proveremo a descrivere. Il sito dovrà inizialmente
essere diviso in cartelle una per ogni lingua usata. Se il sito avrà
due lingue, nella cartella radice (root) ci saranno due cartelle:
"en" e "it". I nomi scelti sono solo simbolici,
si può scegliere qualsiasi nome per le cartelle, ciò che è
importante è che un nome non sia contenuto nell’altro. Nomi del
tipo "iten" e "en" non possono andare bene perchè
nella prima parole è contenuta la seconda. Nelle varie cartelle ci
saranno le pagine per ciascun linguaggio. Pagine equivalenti dovranno
avere lo stesso nome, quindi avremo una pagina "index.html"
nella cartella "en", una in "it" ed eventualmente
in "fr" e così via. Ci potrebbe essere una pagina
"introduction.html", sempre con lo stesso nome, nelle
diverse cartelle, l’unica cosa a cambiare sarà il contenuto: in
italian nella cartella "it" e in inglese nella cartella
"en". Una volta definita la struttura del sito sarà più
semplice capire ciò che effettivamente dovrà fare il nostro codice
Javascript. Consideriamo l’indirizzo web "http://www.sicilypictures.altervista.org/en/index.html"
che contiene la pagina in inglese, il codice Javascript dovrà
ricercare la stringa "en" all’interno di tale indirizzo e
sostituirlo con il nome della nuova cartella, per esempio "it"
se si vuole passare alla versione italiana della pagina. Dopo
l’elaborazione da parte del codice Javascript il link diventerà
"http://www.sicilypictures.altervista.org/it/index.html"
Una volta modificato l’indirizzo si può fornirlo al browser per la
navigazione.
Codice
Di seguito riporto il frammento di
codice Javascript da inserire in ciascuna pagina web:
function lang(source,drain)
{
var oldlink=parent.location.href;
var newlink="";
var pos;
pos=oldlink.indexOf(source);
newlink = oldlink.substring(0,pos);
newlink += drain;
newlink +=
oldlink.substring(pos+3,oldlink.length);
parent.location.href=newlink;
}
Il codice può essere inserito
direttamente nella pagine web o richiamato da un file esterno
attraverso il tag <script>. Nel primo caso il codice verrà
incollato nel corpo della pagine subito dopo il tag <body>:
<body>
<script
type="text/javascript">
function lang(source,drain)
{
…
}
</script>
…
</body>
Nel secondo caso il codice verrà posto
in un file esterno con estensione .js e richiamato attraverso il tag
<script> subito dopo il tag <head>:
<head>
<script
type="text/javascript" src="lang.js"></script>
…
</head>
Il file "lang.js" è un
normale file di testo e contiene il frammento di codice riportato
sopra.
La funzione può essere richiamata in
molti modi diversi, da qualunque oggetto della pagina. Uno dei modi
più semplice richiama il codice quando si utilizza un link ad una
pagina esterna. Supponiamo di aver inserito il codice in una pagina
scritta in inglese e si vuole permettere all’utente di cambiare
lingua semplicemente cliccando su un link. Nel codice html dovremo
inserire un frammento di codice html del tipo:
<a target="_top" href="javascript:lang(‘/en’,’/it’)">Italiano</a>
Si noti in particolare la chiamata alla funzione Javascript "lang", che sostituisce la stringa ‘/en’ con ‘/it’ nel link corrente e ottenendo l’equivalente della pagina in italiano.