Filler Text a richiesta
Martedì 8 Novembre 2005 - 13:50
di Alessandro Fulciniti
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.
Categoria: Scripting | Permalink
Commenti
1
una cosa che esula dal contesto, ma che non riesco a capire. Come mai la pagina di esempio da te linkata ha il div navigation con sfongo giallo, content con sfondo grigio più chiaro? In quanto non riesco a capire questa formattazione da cosa sia data.
Per quanto riguarda lo script, è interessante.# - postato da miki - 08 Novembre 2005 - 17:04
2
La formattazione è data dal css incorporato all’html della pagina. Se esamini il codice html all’interno del tag “style” puoi verificare che lo sfondo del div dei contenuti è dato da una immagine .png ripetuta per tutta l’area occupata.
# - postato da Simone - 08 Novembre 2005 - 17:15
3
Io direi che è davvero molto utile! Sicuramente utilizzerò il tuo codice per testare i layout nei miei progetti.
Effettivamente il fatto di dover tutte le volte andare a scrivere a mano qualcosa, è davvero fastidioso.
Un ottimo script! Grazie!
4
Scrivere a mano? Ma no, copia e incolla… qui c’è un bel generatore di “lorem ipsum”:
http://www.lipsum.com/# - postato da Pastoweb - 08 Novembre 2005 - 18:37
5
Direi lo script giusto al momento giusto.
Per comodità mia ho anche aggiunto la possibilità di rimuovere testo.# - postato da electric_g - 08 Novembre 2005 - 23:31
6
Per gli utenti Mac esiste lipServiceX che genera sia una frase che un paragrafo direttamente dal menu servizi da ogni applicazione.
Vitae consectem ercincil auguero pellentesque; prat eum feum litora adipsusting.