Miglioriamo i link con DOM e Javascript

Il DOM (Document Object Model) è, tra gli standard del W3C, uno dei meno esplorati, una sorta di oggetto misterioso di cui non sono ancora state sfruttate tutte le potenzialità. Il numero di risorse valide, articoli o siti ad esso dedicati, è di gran lunga inferiore rispetto a quello destinato ai CSS o alla famiglia XML, per citare solo due casi. Per chi volesse farsi un’idea più completa, il rimando è alle pagine del W3C o alla guida Dom di HTML.it. Qui ci limiteremo a ricordare che il DOM rappresenta un insieme di API (Application Programming Interfaces) che consentono la manipolazione degli elementi di un documento (X)HTML tramite i più svariati linguaggi di scripting e programmazione. Nelle parole del W3C, il DOM “consente a programmi e script di accedere e modificare dinamicamente il contenuto, la struttura e lo stile di un documento“.

In questo articolo mostreremo una semplice applicazione delle tecniche legate al DOM. L’obiettivo è verificare sul campo la sua capacità di modifica del documento. L’oggetto dell’esperimento saranno i link, di cui proveremo a migliorare alcuni aspetti relativi all’usabilità.

Quali? In un articolo apparso su Usabile.it, Maurizio Boscarol ha esposto una serie di linee guida per migliorare la qualità dei collegamenti ipertestuali. La frase che sintetizza il tutto è la seguente: “Riassumiamo brevemente i requisiti principali dei link: sono soprattutto legati alla loro riconoscibilità e alla loro capacità di far anticipare all’utente in maniera corretta dove porteranno“. Se il link si apre in una nuova finestra, se porta ad un sito in lingua inglese, se è esterno, se punta a documenti come archivi zippati o PDF, è il caso di segnalarlo al nostro visitatore.

Un metodo suggerito è quello di usare l’attributo title e sfruttarne la capacità di essere visualizzato in un tooltip al passaggio del mouse. Un altro sistema consiste nel fornire contesto al collegamento utilizzando testi o immagini che lo accompagnino. Purtroppo, abitudini inveterate o la semplice pigrizia sono ostacoli verso questa meta auspicabile. Negli esempi che vi presentiamo sfrutteremo DOM e Javascript per implementare questa soluzione (gli esempi sono puramente indicativi del metodo e non intendono fornire alcuna soluzione a complessi problemi di usabilità).

L’ispirazione per l’articolo e per lo script utilizzato viene da un esperimento attuato da Simon Willison per la gestione delle citazioni con l’elemento blockquote.

Esempio 1 – Link esterni e interni

Con il primo esperimento distinguiamo con un piccola icona i link interni e quelli esterni. In pratica: usiamo due immagini diverse a seconda che il collegamento porti ad una pagina del nostro sito o meno. Nel documento abbiamo impostato tre link: due a pagine di HTML.it e uno al W3C. Analizziamo i punti salienti dello script.

function modificaLink() {
var sito = /html.it/;

Definiamo innanzitutto la funzione modificaLink. Subito dopo utilizziamo una regular expression che ci servirà a verificare la presenza del dominio html.it all’interno dell’URL (se volete utilizzare lo script dovrete sostituire ad html.it il domino del vostro sito, senza www).

var links = document.getElementsByTagName(‘a’);
for (i = 0; i < links.length; i++) {
var link = links[i];

In questo blocco iniziamo a usare i metodi del DOM. Per prima cosa andiamo a rintracciare tutti i link (elemento a) presenti nella pagina grazie a document.getElementsByTagName. Eseguiamo quindi un loop su tali elementi e inizializziamo un array (link) contenente la collezione di tutti i collegamenti ipertestuali.

url = links[i].getAttribute(‘href’);
if (url.match(sito)) {

Per verificare se il link è esterno o interno dobbiamo confrontare l’URL presente nell’attributo href con la variabile definita nella regular expression. Prima (url = links[i].getAttribute(‘href’); ) andiamo a rintracciare i valori di tutti gli href, poi verifchiamo che nell’URL sia presente html.it.

icona = document.createElement(‘img’);
icona.setAttribute(‘src’, ‘interno.gif’);
icona.setAttribute(‘alt’, ‘Link interno’);
link.appendChild(icona);
}

Qui il DOM dà il suo meglio. Se nell’URL è presente html.it, creiamo prima un nuovo elemento img; impostiamo quindi gli attributi src e alt; infine, (con il metodo appendChild) inseriamo l’immagine ‘interno.gif‘ come elemento figlio di a.

Nella seconda parte dello script, ci limitiamo a impostare l’immagine per i siti esterni, ovvero quelli che non contengono html.it in href. I metodi usati sono identici, cambia solo l’immagine:

else {
icona = document.createElement(‘img’);
icona.setAttribute(‘src’, ‘esterno.gif’);
icona.setAttribute(‘alt’, ‘Link esterno’);
link.appendChild(icona);
}
}
}

Per finire, facciamo sì che la funzione venga eseguito al caricamento della pagina:

window.onload = modificaLink;

Dal momento che l’icona apparirà esattamente al fianco del link, siamo intervenuti con una piccola regola CSS per impostare un margine sinistro di 5px. Allo stesso tempo abbiamo eliminato il fastidioso bordo tipico delle immagini usate come link:

a img { margin-left: 5px; border: none;}

Riassumendo, abbiamo utilizzato nello script i seguenti metodi del DOM:

Metodo	Descrizione
getElementsByTagName(tag)	Rintraccia e restituisce elementi di un documento in base al tag.
getAttribute(nomeAttributo)	Rintraccia e restituisce il valore degli attributi di un elemento in base al nome dell’attributo.
createElement(nomeElemento)	Crea un nuovo elemento.
setAttribute(nomeAttributo, valore)	Inserisce un nuovo attributo per un dterminato elemento e ne imposta il valore
appendChild(nuovoNodoFiglio)	Inserisce un oggetto come figlio del nodo dichiarato nell’espressione.

Una volta chiarito il funzionamento dello script possiamo sbizzarrirci.

Esempio 2 – Usare una classe CSS per modificare i link

Nel secondo esempio abbiamo optato per una soluzione alternativa. Invece di inserire un’immagine come nuovo elemento nel corpo del documento, si può fare affidamento sui CSS per modificare l’aspetto dei link a seconda che siano esterni o interni.

Per prima cosa abbiamo impostato due classi da applicare ai collegamenti: in una l’immagine di sfondo è ‘interno.gif’, nell’altra ‘esterno.gif’. Lo script valuta la presenza di html.it nell’url e assegna di conseguenza ai link la classe .esterno o quella .interno. In questo caso si perdono le informazioni presenti in precedenza nell’attributo alt. Motivo in più per usare il title sul link.

Esempio 3 – Usare un testo informativo

L’esempio 3 è praticamente identico al primo, salvo il fatto che al posto di un’icona utilizziamo un semplice avviso testuale. Nello script va notato il metodo document.createTextNode, deputato per l’appunto alla creazione di nuovi nodi testuali all’interno del documento.

Esempio 4 – Un’icona per i tipi di file non html

Nel quarto esempio applichiamo lo script ad un’altra eventualità. Se il link punta ad un file non html è bene avvertire l’utente. Useremo quindi un’icona per segnalare il tipo di file che si sta per scaricare o visualizzare. L’impostazione dello script è pressocché identica alle precedenti. Ovviamente non abbiamo qui bisogno di regular expression. Con l’istruzione (url.substring(url.length-3, url.length)==’zip’) verifichiamo semplicemente se le ultime 3 lettere dell’URL corrispondano ad una determinata estensione di file e se ciò è vero visualizziamo l’immagine adatta. Lo script così concepito è applicabile, ovviamente, a URL regolari che terminino con l’estensione del file.

Esempio 5 – Applicare lo script solo ad alcuni link

In tutti gli esperimenti visti finora, lo script viene applicato a tutti i link presenti in una pagina. Ciò può essere talvolta non desiderato. Magari vogliamo che la funzionalità sia presente nella sezione principale ma non in un menu. La soluzione è a portata di mano. Nel quinto esempio abbiamo ripreso il primo, apportando una piccola modifica. Le liste di link sono due, la prima all’interno del div “menu”, la seconda all’interno del div “sezione”. Vogliamo applicare lo script solo a questi ultimi. Basterà filtrare all’origine l’applicazione dei metodi DOM:

var sezione = document.getElementById(‘sezione’);
var links = sezione.getElementsByTagName(‘a’);

Con la variabile sezione ci riferiamo al div che porta lo stesso nome. Esso viene definito con uno dei cardini della programmazone sul DOM, document.getElementById, metodo che consente di rintracciare e restituire un elemento in base al suo id. Subito dopo rintracciamo solo i link presenti al suo interno e non in tutto il documento, come si faceva prima con document.getElementsByTagName(‘a’).

Conclusioni

Come si può intuire da questi semplicissimi esperimenti, il DOM è uno strumento potente ed efficace. In quanto tale va usato con cautela, tenendo sempre conto di fattori come l’accessibilità. Inserire contenuto con uno script è per certi versi un azzardo. L’utente di browser alternativi o senza supporto di Javascript, non potrà fruirne. Nel nostro caso, però, l’uso delle icone o del testo accessorio è un plus che offriamo a chi ci visita con i browser tradizionali. L’uso eventuale di queste funzionalità non ci deve portare a fare a meno di utilità come l’attributo title. Anzi, usare quest’ultimo in maniera appropriata, può consentirci di operare meglio anche con lo script. Basterà accedere all’attributo e lavorare su di esso come si è fatto con href.