In questo articolo applichiamo due principi cardine per lo sviluppo di moderne interfacce web nella creazione di una gallery di immagini:
si tratta del responsive design e del progressive enhancement. In parole povere, il layout della galleria, realizzato in maniera "fluida" con le dimensioni degli elementi espresse in misure percentuali, assicurerà una corretta visualizzazione della pagina su tutti i device (desktop, notebook, smarthone, tablet) adattandosi perfettamente a qualsiasi risoluzione dello schermo. Inoltre, l'impiego attento delle nuove tecnologie HTML5, CSS3 e Javascript consentirà di fornire con i browser più recenti l'esperienza di navigazione più piacevole e avanzata senza precludere la compatibilità e l'accessibilità su dispositivi e software meno aggiornati.
Dulcis in fundo, mettere in pratica tutto questo e lo sviluppo dell'esempio finale sono molto semplici. Cominciamo subito!
La struttura HTML e gli stili CSS
Il layout della galleria fotografica presenta una struttura decisamente minimale basata sui nuovi tag HTML5:
- un
<header>contente l'intestazione. - un
<footer>con le indicazioni di copyright. - un tag
<section>contenente le varie thumbs della gallery, racchiuse a loro volta ognuna in un tag
<figure>, semanticamente adatto per includere immagini o contenuti multimediali.
Naturalmente ogni thumbnail è anche associata all'immagine ingrandita.
<header>
<h1>Intestazione</h1>
</header>
<section id="gallery">
<figure>
<a href="images/big/1.jpg"><img src="images/thumbs/1.jpg" alt="didascalia"></a>
</figure>
<figure>
<a href="images/big/2.jpg"><img src="images/thumbs/2.jpg" alt="didascalia"></a>
</figure>
<figure>
<a href="images/big/3.jpg"><img src="images/thumbs/3.jpg" alt="didascalia"></a>
</figure>
<figure>
<a href="images/big/4.jpg"><img src="images/thumbs/4.jpg" alt="didascalia"></a>
</figure>
</section>
<footer>
<p>paragrafo</p>
</footer>Le immagini utilizzate sono archiviate in due sottodirectory separate: nel nostro esempio le miniature misurano 300x300 pixel. Anche gli
ingrandimenti, in rapporto, hanno dimensioni volutamente generose, in modo da assicurare una corretta qualità di visualizzazione anche
su schermi molto grandi. Questo perché anche le immagini del nostro layout saranno liquide, libere di ridimensionarsi e adattarsi alle
dimensioni del viewport del browser.
Facendo un passo indietro nel codice della pagina, è necessario fare attenzione al contenuto del tag head, dove sono inclusi
anche tutti i file esterni necessari, cioè gli script Javascript e i fogli di stile CSS. Per il momento è sufficiente fare attenzione
ad acune parti importanti:
- il meta tag viewport che consente di evitare lo scaling della pagina nei browser dei dispositivi mobile basati su iOS e Android.
- l'inclusione del foglio CSS di reset prelevato da HTML5 Doctor,
utile ad azzerare tutti i valori che i vari browser applicano di default alle proprietà dei vari tag. - l'inclusione, in un apposito commento condizionale riservato alle versioni di Internet Explorer inferiori alla 9, degli script
html5shiv e selectivizr,
necessari per poter utilizzare gli elementi di marcatura HTML5 e i comodi selettori CSS2 e CSS3 anche su questi browser.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link type="text/css" rel="stylesheet" href="css/html5reset-1.6.1.css">
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link type="text/css" rel="stylesheet" href="css/photoswipe.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="/js/selectivizr.js"></script>
<![endif]-->
<script type="text/javascript" src="js/scripts.js"></script>
</head>L'aspetto del nostro nostro documento di esempio è naturalmente affidato alle regole di formattazione contenute nei fogli di stile
CSS. Sottolineiamo come sia importante utilizzare misure in em o percentuale per i valori delle dimensioni dei vari elementi,
margini, padding, e font-size dei testi, allo scopo di ottenere appunto un layout fluido. I tre elementi principali del layout
(header, footer e section) presentano tutti una larghezza uguale a quella del viewport del browser
(width:100%).
I tag figure contenenti le anteprime delle fotografie sono gli unici elementi flottanti, con larghezza e margini calcolati
in modo da presentarli su righe in gruppi di quattro:
section#gallery figure {
float:left;
display:inline;
width:21%;
margin:2%; /*2% + 21% + 2% = 25% */
}Il collegamento alla foto ingrandita e la thumbnail devono essere dichiarati di blocco con una width impostata al 100%, per ottenere
così il "dimensionamento liquido".
section#gallery a {
display:block;
width:100%;
border:1px solid #000000;
background:#42403f;
opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */
filter: alpha(opacity = 60); /* IE 5-7 hack */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-box-shadow: 0 0 5px #42403f;
-moz-box-shadow: 0 0 5px #42403f;
box-shadow: 0 0 5px #42403f;
}
section#gallery a:hover {
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
filter: alpha(opacity = 100); /* IE 5-7 hack */
}
section#gallery img {
width:100%;
display:block;
border:none;
-ms-interpolation-mode:bicubic; /* IE 7+ hack */
}Ecco che incominciamo con prefissi proprietari e filtri vari, penserete, così antipatici, perché non inclusi nelle specifiche CSS
e quindi non validi, ma così utili, perché ci permettono di utilizzare insieme nuove e vecchie tecnologie e ottenere un più
ampio supporto cross-browser.
Importante: per i browser Internet Explorer 7 e 8, affinchè la qualità dell'immagine ridimensionata non risulti
degradata, è necessario applicare una regola con un filtro specifico di Microsoft (-ms-interpolation-mode:bicubic).
Usare con la proprietà opacity, è molto semplice ottenere un rollover accattivante sulle thumbs. Inutile dire che le
proprietà CSS3 transition e box-shadow, come anche la dichiarazione dei gradienti per il background, utilizzati in
alcune parti del codice, in virtù del progressive enhancement, sono delle "features aggiuntive" all'esperienza di navigazione
fruibili solo con i nuovi browser.
Non rimane che analizzare la parte "interattiva" dello sviluppo.
Il codice Javascript e il plugin di jQuery Photoswipe
Riguardando il codice precente contenuto nel tag
head, è possibile verificare l'inclusione nella pagina del framework
jQuery, dello script
simple-inheritance di John Resig, e del plugin
Photoswipe, oltre al foglio di stile ad esso associato.
Photoswipe è essenzialmente un lightbox ottimizzato per dispositivi mobile e touch; il funzionamento di base non differisce da quello
delle più comuni finestre modali con overlay. In realtà, il comportamento di Photoswipe è eccezionale anche sui normali
computer o notebook, con un accattivante effetto "fullscreen" che permette di godere al meglio della bellezza delle immagini. Oltre agli eventi
touch per gli smartphone, sono implementati anche il drag&drop per il mouse e la navigazione tramite tastiera, consentendo
una modalità di scorrimento delle foto alternativa alle freccette della toolbar; presenti anche il pulsante per la chiusura della galleria
e quello per la riproduzione automatica temporizzata in slideshow. L'inserimento di una didascalia facoltativa è supportato personalizzando
il contenuto dell'attributo alt di ogni immagine nel codice html.
Photoswipe è disponibile in due versioni: una, capace di operare anche in modalità standalone, particolarmente ottimizzata per
browser webkit di tipo mobile. L'altra, sacrificando le prestazioni alla compatibilità cross-browser, consente un miglior supporto su
ogni piattaforma con un utilizzo intenso dell'engine di jQuery. In entrambi i casi è prevista la possibilità di una perfetta integrazione con jQuery Mobile, senza dubbio uno dei framework
più completi per lo sviluppo web dedicato a smartphone e tablet.
Nel pacchetto di download, di Photoswipe, oltre al codice sorgente, sono inclusi numerosi esempi che mostrano le modalità di implementazione più comuni.
Per la nostra pagina dimostrativa, il codice Javascript necessario a inizializzare il plugin è stupidamente semplice e va richiamato come consueto all'interno della funzione $(document).ready():
$(document).ready(function(){
$("#gallery a").photoSwipe();
$('#launch-gallery').click(function() {
Code.PhotoSwipe.Current.show(0);
});
});Il metodo photoSwipe() accetta anche il passaggio di un hash per personalizzare i numerosissimi parametri di configurazione, che
per lo più riguardano la regolazione degli effetti, dello slideshow e la modalità di visualizzazione della toolbar.
Interessante la disponibilità di tre funzioni di callback utili a diversi scopi: getImageSource(),
getImageCaption() e getImageMetaData().
Comunque un elenco di tutte le opzioni configurabili è presente sia nel
sito ufficiale che su
GitHub.
Tramite un altro metodo pubblico del plugin, Code.PhotoSwipe.Current.show(n), è possibile avviare la gallery di Photoswipe in modo arbitrario e indipendente a partire dal numero dell'immagine specificato come argomento.
Considerazioni finali e download.
Il codice utilizzato nell'esempio rappresenta un buon compromesso tra semplicità,
funzionalità e velocità di implementazione. Tuttavia, numerosi sono gli interventi che ancora è possibile attuare,
per migliorare l'aspetto e la fruibilità dell'interfaccia.
Soprattutto in caso di layout grafici che richiedono una struttura più elaborata, può essere necessario predisporre dei template
specifici e ottimizzati per la risoluzione di un determinato device. Al dimensionamento fluido è allora il caso affiancare
l'utilizzo delle media queries CSS3,
che attraverso tecniche molto attuali aprono nuovi orizzonti ai webdesigner. In pratica grazie alle media queries è possibile
applicare delle regole in base a determinate condizioni del dispositivo, come risoluzione, larghezza o altezza del viewport, aspect-ratio,
orientation, ecc.. A tale scopo esistono degli interessanti framework CSS pronti per l'uso che costituiscono un'ottima base di partenza:
320 and up,
Less Framework 4,
1140 Grid e
Mobile Boilerplate.
Uno dei difetti dell'esempio è individuabile esaminando le immagini utilizzate, salvate in modo da avere una
buona resa anche su monitor di grandi dimensioni. In realtà, per il display di uno smartphone è invece inutile utilizzare
un'immagine così grande, nel caso di ingrandimento potrebbe bastarne una non più larga di 480 pixel.
Quindi è senz'altro un'ottima idea quella di servire imagini ottimizzate e ridimensionate già in origine a seconda della
risoluzione del dispositivo di navigazione. Le tecniche per tale scopo, pur con differenti approcci, vantaggi e difetti, non mancano:
- con Javascript, i cookie e un file .htaccess -
Responsive Design Images - sempre con i cookie ma con l'ausilio di un file PHP -
Responsive images using cookies - con i soli CSS, sfruttando le media queries e il contenuto generato -
Responsive images using CSS3 - oppure la soluzione più comoda e veloce da applicare, ma altrettanto efficace, sfruttando il servizio cloud
Sencha.io Src
Ulteriori letture di approfondimento su questi temi, principalmente, il fantastico libro di Ethan Marcotte,
Responsive Web Design.
