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.
Nuova procedura di verifica dati Registrante
Tutti coloro i quali sono intestatari di domini con estensione diversa da .it sono invitati a prestare la massima attenzione a quanto riportato nella comunicazione sottoriportata (inviata da Aruba ma applicabile anche ad altri maintainer).
In caso di mancata esecuzione della procedura, infatti, il dominio viene sospeso ed il sito cessa ovviamente di essere visibile.
E’ di basilare importanza che la casella e-mail di appoggio fornita in fase di registrazione del dominio sia operativa e regolarmente controllata, viceversa il messaggio a cui riferimento la comunicazione non verrebbe ricevuto o visualizzato e la procedura non andrebbe a buon fine.
A partire dal 1 Gennaio 2014 è entrata in vigore la nuova procedura di ICANN (Authority competente) per la verifica dei dati del Registrante (intestatario del dominio), che riguarda le nuove registrazioni, i trasferimenti e le modifiche dei dati di contatto del Registrante, di tutti i domini con estensione .com, .org, .net, .info, .biz, .name e tutti i nuovi gTLD (.gallery, .photo, .wiki, ecc…).
La procedura di verifica dei dati è semplice e veloce e prevede:
- La ricezione di un’email all’indirizzo di riferimento che il titolare ha indicato in fase di registrazione del dominio, contenente un link specifico ad una pagina di riepilogo;
- Il controllo e l’eventuale conferma di nome, cognome ed indirizzo e-mail utilizzati per la registrazione del dominio visualizzati sulla pagina di riepilogo.
Dopo l’invio dell’email, ci sono 15 giorni di tempo per poter confermare i propri dati, prima che il dominio ed i servizi associati vengano sospesi.
AGGIORNAMENTO 04/07/14: La mail di richiesta di conferma dei dati viene inviata da Aruba immediatamento dopo che sono stati modificati i dati dell’intestatario del dominio, ad esempio l’indirizzo e-mail di riferimento.
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.