Supporto ai dispositivi touchscreen in Internet Explorer 10

Una delle caratteristiche di cui tenere conto in ottica ottimizzazione dei siti web per l’integrazione tramite gesture è la mancanza di evento “hover” nei sistemi dotati di touchscreen.

Ricordiamo che l’evento hover si verifica quando il puntatore del mouse passa sopra un elemento della pagina e spesso viene usato per effetti estetici, ad esempio per cambiare il colore di un div, ma anche per innescare delle funzionalità complesse, come un menu di navigazione.

Usando un touchscreen, l’evento di hover non viene generato (non c’è nessun puntatore che si muove sullo schermo), ma l’utente innesca eventi “click” direttamente toccando gli elementi della pagina.

In queste condizioni è utile in primis ottimizzare la pagina e la navigazione per fare a meno dell’hover, ma questo non è sufficiente per offrire all’utente un’esperienza di navigazione ottimale.

L’utente si aspetta di poter effettuare le più comuni “gestures”, come il pinch to zoom o lo swipe, per controllare gli elementi della pagina, effettuare zoom, ecc...

Se stiamo sviluppando un sito ottimizzato per i touch screen, possiamo arricchire l’esperienza utente riconoscendo le gesture standard, come lo Swipe o il Pinch to zoom, e usandole per manipolare parti specifiche della pagina.

Supponiamo ad esempio di avere un elemento orizzontale che contiene un elenco molto lungo di immagini, una sorta di galleria fotografica:

L’utente che usa un tablet, ad esempio, troverà scomoda l’operazione di click e cercherà di ottenere lo stesso risultato usando la comoda swipe gesture. Nel nostro JavaScript possiamo controllare queste gesture, ma prima di farlo dobbiamo disattivare la gestione predefinita del browser. Se non lo facciamo, la gesture verrà rilevata e “consumata” da IE10, che effettuerà una operazione di scrolling dell’intera pagina.

Con questa regola, diciamo al browser di gestire solo la gesture dello zoom con doppio tocco. Le altre gesture (pinch e swipe) non vengono gestite e così l’evento raggiunge il JavaScript associato all’elemento #listafoto che può gestirlo in maniera opportuna tramite gli eventi MSGestureStart ( http://msdn.microsoft.com/en-us/library/ie/hh771898(v=vs.85).aspx ), MSGestureChange ( http://msdn.microsoft.com/en-us/library/ie/hh771887(v=vs.85).aspx ) e MSGestureEnd ( http://msdn.microsoft.com/en-us/library/ie/hh771892(v=vs.85).aspx ).

Un altro possibile uso di questa regola è quello di disattivare i controlli di zoom in una pagina HTML destinata ad essere integrata all’interno di una applicazione “mobile”:

In questo modo, infatti, si possono sviluppare sezioni (se non addirittura intere Apps) in HTML e JavaScript, ma garantendo una User Experience simile a quella delle applicazioni native.