Una delle principali novità di Windows 8 è il supporto uniforme di piattaforme hardware diverse. Non più un sistema operativo solo per PC ma anche per dispositivi mobile, Microsoft Surface in prima fila. L'utente si trova quindi ad interagire con lo stesso ambiente su tipi di dispositivi diversi senza dover cambiare il proprio modo di operare.
A questa uniformità contribuisce anche Interne Explorer 10 che prevede un supporto ottimizzato per l'interazione touch ed arricchisce l'espererienza di navigazione dell'utente non solo su Windows 8 ma anche su Windows Phone 8.
IE10 e Windows Phone 8
Il supporto di IE10 su Windows Phone 8 consente agli utenti di questo sistema operativo non solo di usufruire di un modello di interazione touch avanzato per la navigazione sul Web, ma di poter eseguire applicazioni basate su HTML5 e JavaScript come avviene su Windows 8.
Insomma IE10 rappresenterebbe in qualche modo il componente che unifica l'esperienza utente e lo sviluppo di applicazioni tra le piattaforme mobile di Microsoft.
In realtà le cose non stanno esattamente così. Dal punto di vista dello sviluppo di applicazioni HTML5, infatti, gli approcci sulle due piattaforme sono leggermente diversi: su Windows 8 è possibile utilizzare direttamente HTML5 e JavaScript per realizzare applicazioni che sfruttano le potenzialità di IE10, mentre in Windows Phone 8 occorre passare da un'applicazione XAML che ospita un controllo WebBrowser su cui poter eseguire il codice HTML5 e JavaScript.
Per quanto riguarda il browser in sé, inoltre, la versione di IE10 per Windows Phone 8 presenta alcune differenze. Non supporta ad esempio i video inline né l'esecuzione contemporanea di più tracce audio HTML5, la gestione dello zoom sulle pagine ha alcune limitazioni, non sono supportate le API per il drag and drop né quelle per la manipolazione dei file e, naturalmente, non sono supportare le funzionalità di integrazione con Windows 8 che abbiamo visto nella scorsa puntata.
In altre parole, Windows Phone 8 è in grado di beneficiare delle innovazioni di IE10, ma il massimo dal browser può essere ottenuto solo su Windows 8.
Il modello di eventi touch
Abbiamo accennato all'avanzato supporto touch introdotto da IE10. Ma di cosa si tratta in concreto e come possiamo sfruttarlo come sviluppatori?
Partiamo dalla considerazione che al giorno d'oggi esistono diversi modi di interagire con una pagina Web: tramite il classico mouse, tramite una penna, tramite il tocco di un singolo dito o di più dita contemporaneamente. Ciascuno di questi meccanismi ha caratteristiche proprie, ma esistono delle funzionalità di base comuni. Invece di gestire singolarmente ciascun meccanismo di interazione, Microsoft ha pensato di unificare la gestione basandola su un modello astratto: MSPointers. Con questo approccio lo sviluppatore non ha bisogno di preoccuparsi del tipo di dispositivo utilizzato per l'interazione, ma dovrà semplicemente concentrarsi sui Pointer, cioè sui punti di contatto tra un qualsiasi dispositivo di interazione e lo schermo.
MSPointers definisce una serie di eventi associati ai Pointer:
| MSPointerDown | Si verifica al contatto sullo schermo in corrispondenza di un elemento HTML |
| MSPointerMove | Si verifica quando il contatto sullo schermo si sposta all'interno dell'area occupata da un elemento HTML |
| MSPointerUp | Si verifica quando il contatto sullo schermo viene meno |
| MSPointerOver | Si verifica quando un contatto in movimento entra all'interno dell'area occupata da un elemento HTML |
| MSPointerOut | Si verifica quando un contatto in movimento esce dall'area occupata da un elemento HTML |
| MSPointerHover | Si verifica quando un contatto passa sopra l'area occupata da un elemento HTML senza toccare la superficie. Può verificarsi ad esempio con il puntatore di un mouse o con una penna. |
| MSPointerCancel | Si verifica in corrispondenza di un annullamento da parte del sistema di un evento relativo ad un Pointer. |
Chi è abituato a gestire gli eventi di un mouse avrà riconosciuto una certa affinità con questi eventi. Ed in effetti IE10 considera i classici eventi del mouse, per esempio mousedown, mouseup e mousemove, come se fossero gli analoghi eventi MSPointer. Come effetto collaterale, quindi, otteniamo automaticamente il supporto touch per le nostra pagine Web senza dover modificare il nostro codice JavaScript.
Naturalmente però se vogliamo sfruttare al meglio le potenzialità del supporto touch occorre imparare ad utilizzare MSPointers.
Per avere un'idea di quello che è possibile fare utilizzando MSPointers consideriamo il seguente codice JavaScript:
var context;
window.onload = function() {
var canvas = document.getElementById("touchArea");
context = canvas.getContext("2d");
canvas.addEventListener("MSPointerMove", paint, false);
}
function paint(event) {
switch (event.pointerType) {
case event.MSPOINTER_TYPE_TOUCH:
event.target.style.backgroundColor = "blue";
break;
case event.MSPOINTER_TYPE_PEN:
event.target.style.backgroundColor = "green";
break;
case event.MSPOINTER_TYPE_MOUSE:
event.target.style.backgroundColor = "yellow";
break;
}
context.fillRect(event.offsetX, event.offsetY, 5, 5);
}Esso accede ad un elemento <canvas> presente sulla pagina HTML ed associa un gestore dell'evento MSPointerMove. Il gestore dell'evento imposta il colore di background del canvas in base al tipo di dispositivo di interazione ed abilita il disegno sulla relativa area.
Muovendosi sulla pagina con diverse modalità di interazione vedremo uno sfondo diverso ma avremo modo di sfruttare la stessa funzionalità.
Un'importante accortezza da adottare per evitare effetti indesiderati è la disabilitazione dei comportamenti di default legati allo zoom della pagina nell'interazione touch. Questo può essere fatto tramite la seguente regola CSS:
#touchArea { -ms-touch-action: none; }In questo modo eviteremo che il movimento delle dita sul canvas possa essere interpretato come uno zoom invece che come l'azione del disegno.
La tecnologia MSPointers è stata sottoposta al W3C per la standardizzazione e si trova attualmente in stato di Working Draft. In attesa che venga definitivamente accettata come standard di riferimento ed implementata su altri browser è possibile sfruttare questo modello con un approccio fallback per i browser diversi da IE10 utilizzando la libreria JavaScript Hand.js.
Gestione dell'interazione touch
Il modello di interazione touch è naturalmente più ricco della semplice intercettazione dei punti di contatto. Esso prevede un insieme di attività di interazione più complesse, note come gesture, che includono ad esempio lo zoom, la rotazione, lo scorrimento di un elemento. IE10 consente di gestire queste forme di interazione tramite l'oggetto MSGesture ed una serie di eventi:
| MSGestureStart | È il primo evento che si verifica al tocco sullo schermo del dispositivo su un elemento HTML |
| MSGestureChange | Si verifica quando varia la posizione di un tocco sullo schermo del dispositivo |
| MSGestureEnd | Si verifica al termine di un tocco sullo schermo |
| MSGestureTap | Si verifica al tocco sullo schermo del dispositivo e corrisponde al clic del mouse |
| MSGestureHold | Si verifica al tocco prolungato su un punto dello schermo |
| MSInertiaStart | Si verifica quando c'è sufficiente velocità in uno scorrimento per continuare autonomamente anche senza il tocco sullo schermo |
Gestendo opportunamente questi eventi possiamo realizzare effetti personalizzati sui vari elementi HTML che compongono la nostra pagina. Ad esempio, il seguente codice consente di scalare le dimensioni di un elemento HTML muovendo il dito o una penna:
window.onload = function() {
document.getElementById("touchArea").addEventListener("MSGestureChange", handleEvent, false);
}
function handleEvent(event) {
event.target.style.msTransform = "scale(" + event.scale + ")";
}La soluzione adottata prevede la gestione dell'evento MSGestureChange in corrispondenza del quale applichiamo una trasformazione CSS basata sull'entità dello spostamento del mezzo di interazione.
Test delle applicazioni per IE10 Mobile
Per effettuare i test delle applicazioni che sfruttano MSPointers e MSGesture dovremmo utilizzare IE10 su un dispositivo mobile. Tuttavia questo approccio non risulta del tutto comodo in fase di sviluppo. Oltre alla necessità di avere a disposizione un dispositivo, la gestione del test e soprattutto del debug può risultare abbastanza complessa proprio per la mancata integrazione dell'ambiente di test e dell'ambiente di sviluppo. Al posto di un dispositivo reale possiamo invece utilizzare Windows 8 Simulator, un tool incluso in Visual Studio 2012 Express per Windows 8 che emula un generico tablet con Windows 8 e IE10 installati.
Windows 8 Simulator consente di utilizzare IE10 navigando nel Web e simulando le interazioni touch tramite gli appositi pulsanti evidenziati nella seguente figura:
Inoltre il simulatore è richiamabile direttamente da Visual Studio 2012 per poter eseguire il debug delle applicazioni che sviluppiamo:
In questo modo abbiamo la possibilità di sviluppare applicazioni che sfruttano a pieno le potenzialità del supporto touch offerte da IE10 anche senza avere a disposizione un dispositivo mobile.
Conclusioni
Il supporto all'interazione touch prevista da IE10 consente allo sviluppatore di gestire nei minimi dettagli i movimenti dell'utente. Questo consente di offrire un'esperienza di navigazione personalizzata all'utente in base alle specifiche caratteristiche dell'applicazione e non necessariamente in base ai comportamenti predefiniti del dispositivo. Sta all'esperienza ed alla fantasia dello sviluppatore trovare l'interazione touch più intuitiva per eseguire determinate operazioni sulla propria applicazione.
Aspetto interessante introdotto da IE10 che ci auguriamo possa essere standardizzato ed esteso agli altri browser.