Web design: inserire immagini segnaposto nei layout di siti Internet

Quando si deve effettuare la presentazione del layout di un sito Internet, solitamente si creano una o più immagini segnaposto (o placeholder in inglese) da utilizzare all'interno del codice. In fase di realizzazione, poi, si andrà a sostituire l'immagine segnaposto con quella definitiva.

Ma per non utilizzare una semplice immagine gif della dimensione di 1x1 pixel - adattandola poi modificando larghezza e altezza nelle specifiche del tag Html - ho trovato un paio di applicazioni online che posso tornare molto utili.

Il funzionamento delle due applicazioni online, PlaceHold e DummyImage, è pressoché identico.

Entrambi i siti permettono di generare immagini online di qualsiasi dimensione e di qualsiasi colore esadecimale. DummyImage è un po' più intuitivo perché mette a disposizione un modulo da compilare per creare in automatico l'immagine, mentre con PlaceHold occorre lavorare direttamente sul codice Html.

L'Url così generata può essere incorporata direttamente nel codice Html, inserendola quindi automaticamente all'interno del layout.

Sia PlaceHold.it che DummyImage sono applicazioni gratuite che non richiedono alcun tipo di registrazione.

PlaceHold.it

Per generare l'immagine è sufficiente editare l'Url del sito, in modo da inserire la dimensione richiesta direttamente nell'indirizzo.
Per ottenere quindi un'immagine segnaposto di 620x200 pixel, ad esempio, sarà sufficiente inserire nell'Html la stringa http://www.placehold.it/620x200.

La prima cifra rappresenta la larghezza dell'immagine segnaposto generata, mentre la seconda indica l'altezza.
Le opzioni disponibili sul sito PlaceHold.it sono le seguenti:

• Formato: l'immagine generata può avere diversi formati grafici: gif (formato standard), lpeg, jpeg e png
• Testo: è possibile inserire del testo all'interno dell'immagine segnaposto, inserendo il codice &text= seguito dal testo. Ad esempio, se vogliamo stampare il nome del sito in un'immagine da 620x200 pixel, è sufficiente inserire http://placehold.it/620x200&text=q-design.it
• Colori: è possibile modificare i colori dell'immagine segnaposto generata utilizzando i codici esadecimali (dove #ffffff è bianco e #000000 è nero). I colori devono sempre seguire le dimensioni, altrimenti non verrà generata alcuna immagine. La prima cifra (senza l'indicatore #) rappresenta il colore di sfondo mentre la seconda (sempre senza #) corrisponde al colore del testo. Ad esempio http://placehold.it/620x200/990000/ffffff
• Dimensione: le dimensioni sono indicate come base x altezza. L'altezza è opzionale, pertanto se non viene indicata si otterrà un'immagine quadrata. La dimensione è sempre la prima opzione dopo l'Url

Quindi, combinando tutte le opzioni qui sopra, è possibile ottenere un'immagine segnaposto contenente un testo ad hoc e che si armonizzi con i colori scelti per il layout del sito Internet:
http://placehold.it/620x400/d8d8d8/990000&text=www.q-design.it

DummyImage

Come annotato in precedenza, DummyImage dispone di un modulo da compilare per ottenere più rapidamente le immagini segnaposto. E' sufficiente inserire la dimensione in pixel (base x altezza), il colore di sfondo e quello di primo piano, il formato dell'immagine (png, gif o jpeg) e l'eventuale testo da mostrare per ottenere l'indirizzo dell'immagine segnaposto.

Le opzioni sono le stesse di quelle presenti sul sito PlaceHold.it:

• Dimensione: le dimensioni sono indicate come base x altezza. L'altezza è opzionale, pertanto se non viene indicata si otterrà un'immagine quadrata. La dimensione è sempre la prima opzione dopo l'Url
• Colori: anche con questa applicazione è possibile modificare i colori dell'immagine segnaposto generata utilizzando i codici esadecimali (dove #ffffff è bianco e #000000 è nero). I colori devono sempre seguire le dimensioni, altrimenti non verrà generata alcuna immagine. La prima cifra (senza l'indicatore #) rappresenta il colore di sfondo mentre la seconda (sempre senza #) corrisponde al colore del testo. E' possibile utilizzare anche alcune scorciatoie per inserire i colori:
  • 3 caratteri diventeranno 6, 09f si trasformerà in 0099ff
  • 2 caratteri diventeranno 6, ef diventa efefef
  • 1 carattere verrà ripetuto 6 volte, c diventerà cccccc. Attenzione: un singolo 0 non funzionerà, occorre inserirne due 00

  Ad esempio http://dummyimage.com/620x200/990000/ffffff

• Formato: l'immagine generata può avere diversi formati grafici: gif (formato standard), jpeg e png.
  Il formato dell'immagine può essere aggiunto a qualsiasi opzione dell'Url, ad esempio:
  • http://dummyimage.com/300.png/09f/fff
  • http://dummyimage.com/300/09f.png/fff
  • http://dummyimage.com/300/09f/fff.png
• Testo: è possibile inserire del testo all'interno dell'immagine segnaposto, inserendo il codice &text= seguito dal testo. Ad esempio, se vogliamo stampare il nome del sito in un'immagine da 620x200 pixel, è sufficiente inserire http://placehold.it/620x200&text=q-design.it

In aggiunta a queste opzioni, DummyImage dispone di alcune dimensioni già predisposte, per simulare i più comuni banner pubblicitari e per le più comuni dimensioni dei monitor.

DummyImage funziona anche all'interno di applicazioni Flash, grazie all'utilizzo di un file Xml.

Scorrendo la pagina fino in fondo, è possibile vedere anche altre applicazioni realizzate utilizzando il codice di DummyImage.