Un po' di tempo fa sono comparse due tecniche sull'Image Replacement con Javascript. La prima è la tecnica presentata su Alistapart realizzata da Chris Heillman. Alla sua pubblicazione è seguita una critica molto aspra di Peter-Paul Koch, che reclamava la paternità dell'idea e commentava pesantemente l'implementazione. La seconda è ovviamente la tecnica di Peter-Paul Koch.
Su entrambe personalmente ho delle riserve. La tecnica di Heillman infatti è piuttosto lenta e non verifica il supporto delle immagini prima di effettuare il replacement. Condivido in buona parte i punti mossi nella critica di Koch, anche se non ne condivido la forma. La tecnica di PPK è leggera, ma ha uno svantaggio significativo: l'uso di un attributo personalizzato per effettuare il replacement. Questo non consentirà di produrre pagine (x)HTML valide. È possibile estendere tag e attributi e produrre codice valido attraverso le Custom DTD, ma a parer mio il gioco non vale la candela.
Personalmente ritengo che le tecniche di sostituzione del testo con le immagini via Javascript siano state sottovalutate. Consentono infatti di mantenere codice HTML e CSS minimale, sono di facile applicazione e hanno un indubbio vantaggio sulle
tecniche di image replacement con i CSS (cfr. Articolo: «Le tecniche di Image Replacement»), ovvero il fatto di mantenere le immagini anche in fase di stampa. Ma entrambe le tecniche esistenti soffrono a parer mio di qualche difetto, così ho sviluppato una mia versione. Vediamola.
Image Replacement con Javascript (IRJ)
Arriviamo così alla parte centrale dell'articolo. Rivediamo l'esempio che ho preparato. Se osservate il codice, nell'HTML non ci sono tag img e nel CSS incorporato non viene usata nessuna tecnica di image replacement. Eppure nella pagina risultano delle immagini: lo potrete notare anche solo facendo un'anteprima di stampa. Le immagini come img, a differenza di quelle di background, vengono infatti stampate di default.
Prima di procedere con il file Javascript, vediamo i requisiti nell'HTML. Gli elementi da sostituire dovranno avere un id, e non dovranno contenere tag al loro interno. Questi sono gli unici due requisiti essenziali affinchè sia possibile applicare la tecnica.
Nell'esempio, ho attribuito un id a ciascuno dei titoli della pagina:
<h1 id="menu">Il nostro menù</h1>
<h2 id="primi">I nostri primi</h2>
<h2 id="secondi">Secondi e contorni</h2>
<h2 id="dolci">Dolci al carrello</h2>
La sostituzione del testo con le immagini è possibile grazie a un singolo file Javascript incorporato nella sezione head della pagina in questo modo:
<script type="text/Javascript" src="irj.js"></script>
Vediamo ora il codice del file irj.js. Chi non è pratico di Javascript non ha da preoccuparsi: ho fatto in modo che l'applicazione della tecnica sia il più semplice possibile. La parte essenziale è costituita dalle prime righe, ovvero le seguenti:
if(document.getElementById && document.createElement){
/*qui tutte le istruzioni per il replacement*/
ImgReplace("menu","titolomenu.jpg");
ImgReplace("primi","primipiatti.jpg");
ImgReplace("secondi","secondicontorni.jpg");
ImgReplace("dolci","dolci.jpg");
}
L'unica parte che dovrete modificare dello script è la parte in grassetto. Ad ogni riga corrisponde una chiamata per la sostituzione delle immagini, e ad ogni istruzione vengono passati due parametri tra le virgolette. Il primo è l'id dell'elemento da sostituire, mentre il secondo è il nome del file (con eventuale percorso se necessario) dell'immagine che verrà usata per il replacement.
Tutto qui: lo script si occuperà quindi di tutto il resto. Da notare che se l'utente dovesse avere le immagini e/o Javascript disabilitati, vedrà semplicemente il testo normale, eventualmente presentato con i CSS. Ecco come si presenterebbe il nostro esempio in tal caso. Nel caso in cui invece lo script può procedere, per ogni elemento sostituirà il testo con l'immagine relativa.
Da notare che nell'esempio i titoli con le immagini risultano centrati grazie al CSS, e in particolare alla dichiarazione text-align:center sul body. Ho preparato anche un secondo esempio in cui sia il testo che i titoli sono allineati a sinistra. Rispetto al primo esempio è cambiato in effetti solo il CSS, e il file Javascript è lo stesso.
Anche se lo script è molto breve ci sono alcune cose importanti nell'implementazione che chi è un po' pratico potrà trovare interessanti.
Alcuni dettagli sullo script
Vedremo ora alcuni dettagli implementativi dello script. Dopo aver verificato il supporto del DOM vengono invocate le chiamate alla funzione ImgReplace per effettuare il replacement. Questa avvia il preload dell'immagine e chiama la funzione centrale dello script, ovvero FastReplace. Quest'ultima, oltre ai due parametri che sono l'id dell'elemento su cui realizzare il replacement e l immagine da usare, riceve un terzo parametro: ovvero un numero che indica il numero di prove rimanenti per operare la sostituzione, inizialmente impostato a 100. La funzione è piuttosto breve, ma è concettualmente densa. Volendo descriverla con pseudo-codice naturale:
se il numero di prove rimanenti è minore o uguale a zero
ritorna
se l'elemento individuato dall'id è disponibile nel dom e l'immagine è stata caricata
effettua la sostituzione
altrimenti
ritorna, ma richiamati tra 150 millisecondi diminuendo di
uno il numero di prove
Il vantaggio fondamentale dello script è che la sostituzione di un elemento avviene quando questo è appena disponibile nel DOM, senza dover aspettare l'intero caricamento della pagina come si fa tradizionalmente con window.onload. Ovviamente il replacement non potrà mai essere istantaneo, ma la transizione è senza dubbio più veloce. In sostanza, le varie sostituzioni avvengono in una sorta di esecuzione parallela mentre la pagina viene caricata.
Altra condizione è che ciascuna sostituzione avviene quando l'immagine è stata caricata, cosa che ci garantisce l'accessibilità della tecnica. Questa condizione non rallenta l'esecuzione dopo una visita successiva alla prima, dato che le immagini finiscono nella cache del browser e sono immediatamente disponibili.
Infine, se passano 100 intervalli di 150 millisecondi ciascuno (ovvero quindici secondi in totale) e non è stato effettuato il replacement, questo può significare che la pagina non contiene l'elemento con un dato id, o che probabilmente l'utente ha le immagini disabilitate. In tal caso lo script quindi smetterà di cercare di fare la sostituzione.
Questo è a grandi linee il principio di funzionamento dello script, che pur essendo molto conciso potrebbe risultare di difficile comprensione per la sua implementazione non prettamente sequenziale. È per questo che ho cercato di focalizzare il lettore sul suo meccanismo più che sulle istruzioni. Ora è tempo di lasciare il codice e passare alle considerazioni finali.
Conclusioni
Arriviamo quindi alle conclusioni. Ci sono essenzialmente tre modi per sostituire titoli e sezioni di pagina con grafica o font personalizzati. Il primo modo è usare una tecnica di image replacement (cfr. Articolo:«Le tecniche di Image Replacement»). Questa è senza dubbio la via più usata attualmente: robusta e relativamente semplice. A distanza di più di un anno dalla pubblicazione dell'articolo, tra le tante tecniche presentate ritengo che la cover-up span sia ancora tuttora la migliore tra le tecniche presentate. Sebbene richiede l'uso di uno span aggiuntivo, è l'unica che non usa hack e non sacrifica il testo a immagini disabilitate.
Il secondo metodo è incorporare i nostri font personalizzati grazie a Flash e Javascript (cfr. Articoli:«sIFR: la nuova tipografia per il web», «STR: l'alternativa con Swish alla sIFR» e «STR: SwishMAX Text Replacement»). Questo approccio sebbene richieda che l'utente abbia Javascript e Flash disponibile, si presenta leggero, versatile e accessibile. Infatti con un singolo filmato possiamo rimpiazzare tutti i titoli che vorremo: in termini di peso è quindi preferibile. Inoltre non sacrifica l'accessibilità se una delle due componenti o entrambe dovessero mancare.
Senza dubbio la grafica ci dà maggiori possibilità, quali aggiungere ombreggiature o contorni o sfondi ai nostri titoli. La IRJ si colloca esattamente a metà tra le tecniche di image replacement basate sui CSS e quelle basate su Flash. Offre le potenzialità grafiche delle prime e la semplicità e la praticità delle seconde. Inoltre, su entrambe ha il vantaggio di presentarsi identica anche in fase di stampa.
Da oggi forse, disponiamo di un metodo in più per abbellire le nostre pagine web mantenendo HTML e CSS leggeri e minimali. Codice ed esempi sono disponibili per il download. Alla prossima.
