HTML5 Device Orientation API e WebSocket

26 luglio 2012

Come possono due tecnologie tanto diverse finire nello stesso articolo? Nelle prossime righe scopriremo alcuni spunti interessanti di cooperazione tra queste due a prima vista così distanti features introdotte dall’HTML5. Ma prima una veloce panoramica: stiamo ovviamente parlando di sviluppo orientato a device mobile, nella fattispecie le peculiarità delle API qui trattate rendono il tutto abbastanza sperimentale e, di conseguenza, ne limitano il supporto.

Stando al comodissimo caniuse i Device Orientation Event sono disponibili su iOs dalla versione 4.2 e su Android dalla 3.0, mentre i WebSocket sono ad oggi appannaggio solo del sistema operativo mobile di casa Apple. Se a questo aggiungiamo che durante questo articolo ci avvarremo anche dei CSS3D riduciamo ulteriormente il supporto ai soli device iOS.

Ovviamente la speranza è che in un prossimo futuro anche altri browser includano queste interessanti features, ma per il momento dobbiamo accontentarci del carattere limitato dell’iniziativa.

Cosa sono le Device Orientation API?

Fatte le dovute premesse cominciamo esplorando le Device Orientation API. Attraverso l’evento deviceorientation, possiamo accedere ad alcune informazioni legate alla posizione spaziale del nostro device, il tutto è contenuto in 3 variabili agganciate all’oggetto event passato al listener:

  • alpha: contiene informazioni sull’orientamento del device, è comparabile al valore di una bussola, espresso in gradi (0 – 360) con lo 0 al device che punta a sud;
  • beta: pubblica invece informazioni sull’inclinazione del device rispetto ad una posizione parallela al piano terrestre. Anche questo valore è espresso in gradi con 0 al device in piano e +/- 90 alle due verticalità;
  • gamma: esprime l’inclinazione del device rispetto all’asse che lo attraversa per il lato più lungo, anche qui lo 0 viene assegnato al device parallelo al piano terrestre e con il display verso l’alto mentre il valore varia da -180 a +180 gradi.

Il sistema di misurazione è simile a quello utilizzato per definire la posizione degli aerei, dove alpha corrisponde all’imbardata, beta al beccheggio e gamma al rollio. Ecco un semplicissimo esempio nell’uso di questa tecnologia, costruiamo una pagina web con il seguente codice sorgente:

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Level One</title>
<script>
window.addEventListener ("deviceorientation", traccia, false);
function traccia(evento){
  document.querySelector('div.alpha span').innerHTML =
    Math.round(evento.alpha);
  document.querySelector('div.beta span').innerHTML =
    Math.round(evento.beta);
  document.querySelector('div.gamma span').innerHTML =
    Math.round(evento.gamma);
}
</script>
<style>
html,body{ height: 100%; }
body{ 
  display: box;
  box-align: center;
  box-pack: center;
  font-size: 5em;
}
</style>
<!-- scaricalo da http://leaverou.github.com/prefixfree/ -->
<script src="../prefixfree.js"></script>
</head>
<body>
<div>
  <div class="alpha">Alpha<span></span></div>
  <div class="beta" >Beta<span></span></div>
  <div class="gamma">Gamma<span></span></div>
</div>
</body>
</html>

Provando il codice appena sviluppato in un browser mobile dotato di supporto alle Device Orientation API potremo osservare dal vivo il comportamento di questi tre valori.

Se vuoi aggiornamenti su HTML5 Device Orientation API e WebSocket inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su HTML5 Device Orientation API e WebSocket

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy