JavaScript  »  Articoli  »  JQuery 

Nella scorsa uscita Sviluppare layout con le Media Queries abbiamo realizzato un layout, "one page site", con HTML5 e i CSS3 con un'interfaccia dinamica che si adatta al dispositivo di navigazione utilizzato, sia esso uno smartphone, un tablet o un normale computer. Nella seconda parte ora, applicheremo a questa struttura di base alcune tecniche per migliorarne la user experience, facendo ricorso a Javascript e al supporto del framework jQuery. Tutto il codice presentato va naturalmente richiamato all'interno del metodo $(document).ready, in modo da essere eseguito non appena è disponibile l'albero DOM del documento.

Navigazione a scorrimento

A prescindere dal device, la pagina di esempio presenta un andamento di navigazione verticale e può essere utile gestire, con uno script, lo scroll tra i link interni e le loro destinazioni, ottenendo un piacevole effetto. Grazie a CSS3 e al selector engine di jQuery vengono selezionati tutti i collegamenti ipertestuali che contengono un'ancora, nel nostro caso oltre alle voci del menu di navigazione anche i pulsanti "torna sù" presenti in ogni sezione di contenuti.

$('a[href^=#]:not([href=#])').click(function(event){
    $('html, body').animate({ 
        scrollTop: $($(this).attr("href")).offset().top 
    }, 1000);
    event.preventDefault();
});

Simulare la pseudoclasse :hover su dispositivi touch.

Nello sviluppo per dispositivi touch screen non sono disponibili alcuni dei tradizionali eventi del mouse, ad esempio non è possibile personalizzare gli stati di un link scatenati dal rollover dell'utente su di esso. Con qualche riga di codice Javascript si può simulare la pseudoclasse :hover, utilizzando una classe apposita nel foglio di stile CSS e gli eventi onTouchStart e onTouchEnd, rispettivamente molto simili ai corrrispondenti onMouseOver e onMouseOut delle interfacce tradizionali.

/* Javascript */
$('a').bind('touchstart', function(event){
	$(this).addClass('hover');
}).bind('touchend', function(event){
	$(this).removeClass('hover');
});

/* CSS */	
nav li a:hover, 
nav li a:focus,
nav li a:active,
nav li a.hover { 
/* stili personalizzati */	
}

Nascondere la barra del browser.

Su un piccolo schermo come quello di un iPhone, la barra degli indirizzi di Safari Mobile occupa un'altezza di circa 60px, uno spazio verticale recuperabile altrimenti sottratto ai contenuti. Quindi, applicando il seguente codice Javascript, quando un visitatore apre la pagina del sito è possibile nascondere la toolbar di default:

hideUrlBar = function () {
	!pageYOffset && !location.hash && setTimeout(function () {
    	window.scrollTo(0, 1);
    }, 1000);
};

$(document).ready(function() {
	var deviceAgent = navigator.userAgent.toLowerCase();
    var iOSdevice = deviceAgent.match(/(iphone|ipod)/);
    if (iOSdevice) {
    	hideUrlBar();
	}
});

Le immagini: slideshow e gallery.

Implementare uno slideshow di immagini in un layout dinamico come quello della nostra demo comporta che esso sia in grado di adattarsi all'ambiente in cui viene visualizzato e in cui deve interagire. Perfetto per questo è il plugin Flexslider, appositamente pensato per il responsive design. Le prerogative sono veramente interessanti:

• piena compatibilità cross-browser
• supporto per gli eventi touch e tastiera
• animazioni personalizzabili

inoltre numerosi pararametri di configurazione e metodi di callback che lo rendono particolarmente flessibile ad ogni utilizzo. Per integrare Flexslider nel nostro progetto basta includere nella head del documento il file Javascript (solo 7kb di peso in versione minimizzata!) e gli stili CSS necessari. Quindi è sufficiente richiamare lo script che si occupa di determinare automaticamente le dimensioni in larghezza e altezza dello slider.

$('.flexslider').flexslider({
    slideshow: true,  // autoplay
    animation: "slide", // a scelta slide - fade
    controlsContainer: '.flex-container', // wrapper opzionale 
    slideshowSpeed: 3000, 
    animationDuration: 1000, 
    controlNav: true, // controlli di navigazione tra le slide
    directionNav: false, // contolli next - prev
    touchSwipe: true, // abilita le mobile gestures
});

Il markup HTML utilizzato per costruire lo slider è molto semplice, è richiesto solamente un contenitore aggiuntivo per il corretto posizionamento dei controlli di navigazione inseriti dal plugin. Variando questa struttura è anche possibile inserire una didascalia opzionale su ogni slide.

<div class="flex-container">
	<div class="flexslider">
		<ul class="slides">
            <li><img src="images/technics.jpg"></li>
            <li><img src="images/city.jpg"></li>
            <li><img src="images/sports.jpg"></li>
            <li><img src="images/nature.jpg"></li>
		</ul>
	</div>
</div>

Per le immagini della sezione Portfolio nella demo del nostro porgetto il plugin jQuery Photoswipe si presta perfettamente all'integrazione di un lightbox di nuova concezione ottimizzato anche per i dispositivi mobili. Chi volesse approfondirne le modalità di utilizzo è consigliata la lettura di Responsive image gallery con HTML5, CSS3 e jQuery PhotoSwipe.

In questo caso non utilizzeremo però PhotoSwipe, ma proveremo una soluzione alternativa, in verità molto simile: si tratta di NETEYE Touch-Gallery che ha tra i suoi vantaggi il peso contenuto e una estrema facilità d'uso. L'installazione è velocissima, basta includere solo il plugin Javascript, non sono richiesti stili CSS aggiuntivi. Anche NETEYE Touch-Gallery è ottimizzato per avere la migliore resa su ogni dispositivo di navigazione, e in più è corredato di un helper che consente la creazione di simpatici activity indicators, molto utili per i loader e da esaminare per l'impiego anche in altri eventuali contesti. Tornando al nostro progetto, per innescare lo script sulla galleria delle immagini basta una riga di codice:

$('.gallery a').touchGallery();

Come abbiamo già visto nell'articolo sulle media queries, affinchè le thumbs si adattino automaticamente al piccolo schermo di uno smartphone e in generale al layout di visualizzazione, è necessario utilizzare questa regola CSS:

/*non max-width per assicurare il supporto delle vecchie versioni di Internet Explorer*/
img { width: 100%; }

Conclusioni

Il progetto funzionante e completo di tutti i file è disponibile per il download, un concentrato non esaustivo ma ampio di soluzioni pratiche per avvicinarsi al responsive web design.

Già importante per lo sviluppo web in generale, il tema delle performance lo è ancora di più nell'ambito mobile, sia riguardo all'efficienza e velocità degli script, sia riguardo la riduzione delle richieste HTTP e dei tempi di caricamento. Anche se sempre più potenti e tecnologicamente dotati, i nuovi device mobili devono fare sempre i conti con la velocità della rete di connessione, non sempre all'altezza. In merito a queste problematiche consigliamo la lettura della mini guida Ottimizzazione: Javascript e performance del sito.

Altri articoli

Altre guide

Altre newsletter