Web Design  »  Articoli  »  Web design 

In questo articolo vedremo come sia possibile ottenere attraverso HTML, CSS e Javascript una galleria di immagini con miniature e ingrandimento incorporate nella pagina. Vediamo subito l'esempio, che contiene 12 immagini digitali che ho realizzato negli ultimi tempi giocando un po' con Pixia. Prima di addentrarci nei dettagli, alcune premesse.

Miniature e ingrandimenti: possibili soluzioni, usabilità e accessibilità

Sono diverse le soluzioni per implementare una galleria di immagini in una pagina HTML:

1. Visualizzare l'immagine d'ingrandimento nella finestra corrente del browser attraverso un semplice link all'immagine stessa.
2. Visualizzare l'immagine d'ingrandimento nella finestra corrente del browser in una pagina dedicata.
3. Aprire una popup con l'ingrandimento.
4. Mostrare l'ingrandimento nella pagina stessa.

Valutiamole singolarmente dal punto di vista dell'usabilità e dell'accessibilità:

1. Nel primo caso l'utente si troverà in una pagina contenente solo l'immagine, e dovrà tornare alla pagina delle miniature attraverso il tasto Indietro del browser.
2. Nel secondo caso l'utente si troverà in una pagina che il più delle volte contiene immagine, titolo e descrizione. Qualche volta nella pagina stessa è previsto un link che consente di tornare alla galleria. L'usabilità è già migliore, ma sia in questo che nel primo caso si richiede comunque un tempo di interazione con l'utente decisamente superfluo. Inoltre, questa soluzione, a meno di utilizzare linguaggi lato server, ci costringe a realizzare una pagina HTML per ogni ingrandimento, un lavoro di editing non indifferente.
3. La soluzione con popup necessita di Javascript, ma bisogna considerare che l'utente può non avere Javascript abilitato. È per questo motivo che, utilizzando le popup, è indispensabile fornire link accessibili, di modo che sia possibile accedere comunque agli ingrandimenti. Rimando a due articoli in merito: Costruire pop-up accessibili e Galleria immagini con effetto rullino.
4. Anche la soluzione con ingrandimento nella pagina necessita di Javascript e link accessibili. È però senz'altro la migliore per l'ottimizzazione dei tempi di interazione da parte dell'utente, ed è di questo che ci occuperemo.

Altri articoli

Altre guide

Altre newsletter