tutorial javascript

Qualche giorno fa il team della W3C ha tweettato un post del proprio blog, facente riferimento alla Vibration API, sono andato a dare un’occhiata ed ecco quello che ho scoperto…

Il DAP (Device APIs Working Group), già noto agli sviluppatori di applicazioni web per le comodissime API client-side atte ad interagire con il dispositivo in utilizzo, tra le API più interessanti possiamo trovare infatti quelle relative agli eventi di prossimità, luce ambientale, status della batteria.

Torniamo alle API relative alla vibrazione, sono state approvate ma non ancora del tutto complete, quindi stiamo parlando ancora di un work in progress quasi definitivo.

A cosa serve la vibration API?

La prima cosa che mi è saltata in mente, quando ho letto la specifica delle API è stata la possibilità di poter migliorare i form di login delle web app o del proprio sito personale in maniera semplice ed intuativa, solitamente questo genere di user experience è destinata principalmente alle app installate sullo smartphone o tablet, dato che è più semplice tramite le API delle SDK interagire con i componenti del dispositivo.

Dopo aver letto la specifica e rimanendo semplicemente affascinato da quanto il web si stia evolvendo in questo ultimo periodo, ho subito realizzato un piccolo esempio di come integrare efficacemente la vibration api nel form di login di un qualsiasi sito web, per cui cominciamo.

Guarda il risultato del tutorial

1° step: realizzare il form

Il primo passo da effettuare è quello di realizzare un semplice form, nel mio caso ho realizzato un form per effettuare un login.

Il codice per il form è molto semplice, mi raccomando di inserire la libreria jquery, dato che dopo dovrai aggiungere un piccolo script in jquery per animare il nostro form.

Step 2: diamo un po’ di stile

Step 3: funzioni e animazioni

Finalmente è arrivato il momento di scrivere un po’ di javascript e dare un pizzico di pepe in più alla faccenda.

La funzione validazione() è essenziale affinché il nostro form funzioni correttamente nel caso in cui l’utente inserisca i propri dati in modo errato, in questo esempio ho fatto un controllo semplicissimo sui valori degli input del form, se risultato vuoti allora bisogna attivare le dovute misure. Nel mio caso possiamo vedere la funziona shake() la quale osserveremo più avanti, richiamo la vibration API inserendo un’intervallo di 50ms tra una vibrazione e l’altra per un numero totale di vibrazioni.

Adesso che il grosso è stato fatto, diamo un’occhiata alla funzione shake() che non è altro che una semplicissima funzione jquery che anima il form affinché si “shakeri” in caso di inserimento errato dei dati.

Questa funzione è un surplus che a mio avviso arricchisce lo script sotto un punto visivo e non solo tattile.

Guarda il risultato del tutorial

Conclusioni

Come puoi vedere la vibration API sono davvero semplici da implementare, ti consiglio di vedere le specifiche per ulteriori dettagli a riguardo e se hai qualche dubbio commenta il post e non dimenticare di condividere.