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.
Immagine di sfondo al 100% con CSS3 e con CSS2
Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:
1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.
Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.
Vediamo dunque come procedere:
CSS3
E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.
Il codice CSS sarà dunque:
body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.
Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.
CSS3, HTML5, Flash, jQuery … sarà rivoluzione?
La prossima introduzione a tutti gli effetti della nuova versione di HTML, cioè la 5, e dei Cascading Style Sheet, cioè la 3, lasciano presagire una sorta di rivoluzione nel campo dello sviluppo web per via dei nuovi strumenti che verranno messi a disposizione dei web designer.
Fin da oggi è possibile iniziare a sperimentare alcune delle nuove proprietà dei CSS3, poiché a) queste dovrebbero essere definite nella loro versione definitiva, b) i browser più intelligenti già le supportano, c) nel caso dei browser meno intelligenti (vale a dire IE, ma qualcuno ne dubitava?) la degradazione non comporta problemi di visualizzazione.
Ci siamo ad esempio occupati nel precedente articolo della proprietà fontface che consente di utilizzare font non standard nelle pagine web.
Questa è supportata persino da IE, addirittura nelle sue versioni più vecchie, quindi è utilizzabile da subito.
Un’altra proprietà interessante che andrà a risolvere un problema annoso – e diciamo con sincerità, noioso – è border-radius: questa permette di arrotondare gli angoli di un box in base ad un certo valore di raggio e può essere applicata a tutti gli angoli ovvero solo ad alcuni.
Vediamo un semplice esempio di un contenitore con tutti e quattro i bordi arrotondati:
#angoli-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
-moz-border-radius: 10px; /* per Firefox */
-webkit-border-radius: 10px; /* per Safari e Google Chrome */
border-radius: 10px; /* per IE9 */
}
ed un altro con i soli angoli inferiori arrotondati:
#angoli-inferiori-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
border: 1px solid #333333;
-moz-border-radius: 0 0 10px 10px; /* per Firefox */
-webkit-border-radius: 0 0 10px 10px; /* per Safari e Google Chrome */
border-radius: 0 0 10px 10px; /* per IE9 */
/*
Le ultime tre righe equivalgono a:
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
*/
}
In questa pagina sono presenti entrambi gli esempi: visualizzandola con Internet Explorer 8 e precedenti, gli angoli non risulteranno arrotondati mentre con tutti gli altri browser l’effetto funziona.
Un’altra questione che ha agitato le acque del web design è rappresentata dall’ostracismo attuato da Apple nei confronti di Flash, non supportato da iPhone né da iPad.
Qualcuno si è affrettato a dichiarare la morte di Flash, con comprensibile scarsa soddisfazione di Adobe; altri hanno affermato che la necessità di questo strumento verrà comunque meno per via delle opportunità offerte dai framework come jQuery e dallo stesso HTML5 che promette di gestire i file multimediali.
Chi scrive non è d’accordo su queste visioni estreme. Flash ha tuttora la sua utilità, a patto che non se ne abusi, soprattutto perché può compromettere la fruibilità di un sito (e la sua accessibilità).
jQuery è un framework duttile ed efficiente ma non sempre di facile utilizzo: i plugin richiedono numerosi test per accertarne la loro efficacia cross-browser e l’applicazione di più d’uno nella stessa pagina può generare incompatibilità.
L’ottica più corretta per uno sviluppatore web che deve garantire la massima fruibilità possibile per il proprio lavoro è ancora costituita dalla scelta dello strumento di volta in volta migliore per ottenere un certo risultato in termini di leggerezza della pagina, universalità tra i vari browser (o quantomeno degradazione accettabile), qualità del risultato ottenuto.
Tutti questi argomenti vengono trattati nell’ambito del nostro Corso Base di Web Design organizzato da INSTANT WEBSITES a Milano.
Il prossimo corso comincerà il 25 gennaio 2011.
Potete trovare i dettagli in queste pagine: http://www.instantwebsites.it/corsi.html e http://www.corsiwebdesign.it/corsobase.php