Cell. +39 3479684755
Il Blog di Instant Websites
Immagine adattiva con punti attivi
Supponiamo di dovere inserire un’immagine con punti attivi in una pagina di un sito adattivo, o reattivo (“responsive“), che – cioè – si ridimensioni (e quando necessario, ridisponga i suoi elementi) in base alla risoluzione dello schermo del dispositivo su cui il sito viene visualizzato.
Il problema è costituito dal fatto che la mappa comprende delle coordinate di punti che cessano di avere valore nel momento in cui l’immagine subisce il ridimensionamento; se quest’ultimo è elevato, quindi, le aree attive si spostano non corrispondendo più con le zone dell’immagine da cliccare.
Queste immagini si utilizzano, per esempio, al fine di realizzare delle pagine introduttive, talvolta chiamate splash pages, in cui a diverse zone dell’immagine stessa corrispondono dei link alle differenti pagine, o parti, del sito.
E’ possibile risolvere il problema appena esposto tramite l’uso dei CSS3 e di un plugin per jQuery chiamato wdImageMaps jQuery (crediti e link per il download in fondo a questo articolo).
Vediamo dunque come procedere.
Le trasformazioni CSS3
I CSS3 (Cascading Style Sheets versione 3) hanno introdotto la proprietà transform e, come relativo valore, alcune funzioni che consentono la trasformazione degli elementi a cui vengono applicate, ottenendo così degli effetti visivi che fino ad oggi avrebbero richiesto l’utilizzo di Flash o di Javascript.
Questa funzioni sono quattro: scale(), rotate(), skew() e translate().
I relativi esempi applicati ad un’immagine si trovano in questa pagina.
A ciascuna immagine, identificata tramite id, è stato applicato un collegamento ipertestuale (con href=”#” per attivare l’hyperlink senza dovere specificare una destinazione), dopo di che è stata applicata la proprietà transform alla pseudoclasse dinamica :hover (vedi più sotto per esaminare il codice).
Si osservi che l’effetto ottenuto con la trasformazione non influenza in alcun modo gli altri elementi della pagina, il cui posizionamento resta invariato.
scale()
La funzione scale() permette di ridimensionare l’elemento a cui è applicata la proprietà transform sulla base di un fattore di scala numerico: 1 equivale al 100% della dimensione originale, quindi un numero >1 determina un ingrandimento e un numero <1 determina un rimpicciolimento: ad es., 1.2 indica un aumento delle dimensioni del 20%.
Se viene specificato un solo fattore, questo viene applicato sia orizzontalmente sia verticalmente; ne possono essere indicati due diversi, in tal caso il primo sarà il fattore di scala orizzontale ed il secondo quello verticale.
Nell’esempio pubblicato, il codice CSS è il seguente:
a:hover img#foto1 {
transform: scale(1.1);
}
che comporta un ingradimento del 10% su entrambi gli assi, come è logico che sia per evitare una distorsione dell’immagine.
Introduzione al design reattivo
Il World Wide Web è un mondo in continua e rapida evoluzione tecnologica e, in tale contesto, l’innovazione che ha portato con sé le conseguenze più rilevanti per i designer e gli sviluppatori è stata la diffusione dei dispositivi portatili quali smartphone e tablet.
Le previsioni dicono che in tempi brevi gli accessi ai siti Internet tramite i suddetti dispositivi supereranno quelli effettuati sui PC da tavolo e notebook; al di là della precisione di tali previsioni, si impone dunque di considerare le circostanze nel progettare e sviluppare i siti.
La soluzione tecnica adottata per adattare in qualche modo la pagina del sito alla risoluzione dello schermo, fino all’introduzione di HTML5/CSS3, era quella di ricorrere ad un layout liquido in cui, cioè, le dimensioni degli elementi contenitori della pagina fossero espresse non in termini “fissi” (px) bensì in termini relativi: % o ems, dunque.
Questa soluzione comportava però delle difficoltà e degli svantaggi, riassumibili per brevità come segue:
1) un eccessivo allargamento (o restringimento) della risoluzione disponibile a video – anche solo a seguito del ridimensionamento della finestra del browser – determinava una ridisposizione dei contenuti sgradevole e poco compatibile con la fruibilità degli stessi.
Era possibile applicare delle dichiarazioni che limitassero il ridimensionamento, innanzitutto, del contenitore principale del layout tramite le proprietà max-width e/o min-width ma il mancato supporto da parte di IE7 e versioni precedenti – in anni in cui questo era il browser largamente dominante! – rendevano la soluzione poco efficace.
2) in generale, uno scarso controllo sulla disposizione degli elementi all’interno della pagina soprattutto in presenza di contenuti non particolarmente abbondanti.
Con l’introduzione di HTML5/CSS3 è stato reso disponibile uno strumento mirato alla costruzione di siti “reattivi” costituito dalle media query, che istruiscono il browser a leggere la risoluzione dello schermo disposibile sul dispositivo e disporre gli elementi della pagina ed i contenuti di conseguenza.
Un sito reattivo (responsive), anche detto adattivo, è dunque un sito che cambia il suo aspetto a seconda che sia visualizzato su uno schermo di grandi dimensioni o su un telefonino/tablet, per dirla in breve.
Posta questa premessa, e prima di vedere un esempio concreto (sia pure semplificato), occorre chiarire se e quando sia indispensabile applicare questa tecnologia di sviluppo.