Nella realizzazione di layout basati su CSS la fase di test è fondamentale: tipicamente si tende a inserire nelle sezioni principali del testo di riempimento (filler text in inglese) per verificare la robustezza del layout al variare della lunghezza delle colonne.
Ritenendo questa operazione piuttosto noiosa, ho pensato di sviluppare un piccolo script che la può velocizzare molto: è infatti in grado di aggiungere dei link attraverso i quali potremo ottenere uno o più paragrafi di filler text, così da effettuare il testing del layout senza dover editare ogni volta il codice HTML.
Ho preparato una pagina di esempio che usa lo script.
Si tratta di un semplice layout a due colonne in cui vengono aggiunti, mediante lo script, i due link per il filler text sulla colonna centrale e quella di navigazione. Tutto questo grazie a poche semplici righe nella sezione head della pagina, che sono le seguenti:
<script type="text/javascript" src="filler.js"></script>
<script type="text/javascript">
window.onload=function(){
AddFillerLink("content","navigation");
}
</script>
Applicare lo script alle vostre pagine è molto semplice: vi basterà copiare il
file Javascript nella stessa cartella della vostra pagina HTML e inserire le righe sopra riportate nella sezione head.
La parte che dovrete modificare del codice visto sopra è quella indicata in grassetto: tra doppi apici e separati dalla virgola vi basterà indicare gli id degli elementi a cui vorrete aggiungere
il filler text su richiesta. E, terminata la fase di test del layout, vi basterà rimuovere dalla sezione head le righe per lo script e aggiungere i contenuti reali.
In conclusione due parole sull'implementazione dello script: è basato essenzialmente sul DOM ed è piuttosto semplice (meno di trenta righe) e ho fatto in modo che il suo uso non richieda la conoscenza di Javascript nè la sua modifica. A meno che non vogliate cambiare il mini-vocabolario usato per il testo di riempimento: in tal caso vi basterà intervenire sulla prima riga del file .js, inserendo le parole tra doppi apici e separate dalla virgola.