[Javascript] Come controllare l’Intensità Sismica sui dispositivi iOS

Il sismografo è lo strumento che viene utilizzato per registrare i fenomeni sismici. E’ costituito da una serie di elementi che consentono la rappresentazione grafica dell’andamento del segnale sismometrico nel tempo sotto forma di un sismogramma. Analizzando il sismogramma si può conoscere l’entità, la natura (con una singola stazione solo in modo parziale), e la distanza del sisma dal punto dove è avvenuta la registrazione del sismogramma stesso. Il sismografo deve dunque rappresentare fedelmente il movimento del suolo oppure le grandezze (accelerazione o velocità) con le quali si può in seguito estrapolare il movimento assoluto del suolo.

Sapevate che è possibile trasformare il vostro iPhone, iPad o Macbook in un semplice sismografo? Come?

Avviate il browser Safari sul vostro dispositivo IOS, o Google Chrome, se si utilizza un Macbook, e quindi aprite la pagina isthisanearthquake.com. Successivamente scuotete il telefono / computer, il sito web sarà in grado di catturare questi movimenti in tempo reale, in modo molto simile a un sismografo.

I Computer portatili e i dispositivi mobili Apple hanno un accelerometro integrato. Quando l’hardware viene mosso, ogni minimo cambiamento nell’orientamento del dispositivo viene  individuato e segnalato al browser che poi mappa questi nuovi dati nel sismografo.

L’intensità sismica può variare a seconda della forza con cui si sta agitando il telefono cellulare e cambierà anche in base all’orientamento del dispositivo. Vi assicuro che rimarrete sorpresi nell’ apprendere che questo sismografo di base è scritto usando poche righe di JavaScript.

Il codice JavaScript, che produce il sismografo, funziona solo con Chrome e Safari Mobile per il semplice motivo che si basa su due eventi - DeviceOrientation e DeviceMotion per rilevare il movimento i quali sono supportati solo dai due browser citati in precedenza.

Per aggiungere il sismografo in una pagina web, la procedura è semplicissima. Posizionate il seguente <div> all’interno della pagina dove desiderate visualizzarlo e regolate le css a vostro piacimento:

<div style=”height: 4em; color: #0f0; background: #000;”>

Sorry, but your device/browser doesn’t support this.

<script src=”http://isthisanearthquake.com/seismograph.js“></script>

</div>

Ho provato questo codice su iPad 2 e su iPhone con Safari Mobile e ha funzionato in modo egregio.

Trovate il mio esempio a questo indirizzo (ricordo che al momento funziona solo su dispositivi iOS).

Forse potrebbero interessarti anche questi articoli:

1. Tutte le novità di iOS 5 in un video
2. [jQuery plugin] Tooltipsy: Aggiungere facilmente Tooltip animati
3. [JavaScript ] Live.js: auto-refresh delle pagine ogni volta che vengono aggiornate
4. [jQuery] Formly: Plugin per aggiungere facilmente Stile e Validazione ai tuoi Form
5. Apple – Ecco come iBooks 1.2.1 blocca gli ebook sui dispositivi Jailbroken