Archivi categoria: Web Programming & Html & Javascript

Esperimenti e tutorial per Html5 ,Javascript e librerie varie.

Ottenere le coordinate GPS dal browser con HTML5

Un modo semplice e veloce per ottenere le coordinate gps ,in una pagina html, mediante html5 .

La funziona javascript getCurrentPosition interroga ,se disponibile ,il nostro dispositivo gps (previa richiesta di autorizzazione)  . Se non riesce ad ottenerla da gps può comunque derivarla dall’indirizzo ip, ma il comportamento e le regole sono completamente a carico dell’implementazione del browser.

Questa è la funzione che va usata:

1
2
3
4
5
6
7
8
9
10
11
12
13
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(successCallback,

errorCallback,

{timeout:60000});

}else{

alert("Il browser non ha un dispositivo GPS");

}

Come vedete la funzione ha due callback, uno che viene invocato in caso di successo e l’altro di errore. Nei parametri e’ possibile impostare il timeout, cioè il tempo di attesa di synch con il gps prima di andare in errore di timeout. Da notare che questo tempo scatta da prima che appaia la popup di richiesta autorizzazione, quindi influisce molto nell’usabilità dell’interfaccia utente. 60 secondi in genere sono un valore sufficiente.

Ora descriviamo cosa deve fare la nostra pagina con i due callback:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//callback in caso di successo

function successCallback(position){

alert("Posizione:[lat="+position.coords.latitude+"][long="+position.coords.longitude+"]");

}

//callback in caso di errore

function errorCallback(error){

switch(error.code){

case error.PERMISSION_DENIED: alert('accesso negato');break;

case error.POSITION_UNAVAILABLE:alert('impossibile ottenere posizione');break;

case error.TIMEOUT:alert('timeout');break;

default: alert('errore generico');break;

}

}

Alcuni browser memorizzano l’autorizzazione con durata giornaliera, altri richiedono l’autorizzazione ogni volta.

Una cosa a cui prestare attenzione è il fatto che la funzione è asincrona, quindi difficile da gestire all’interno di un evento di button pressed o cose simili.

Consigli:

Meglio sfruttarlo nell’onload del document , magari facendo una pagina adHoc che aspetti il timeout della funzione mostrando l’icona di loadinprogress, in modo da far capire all’utente che la lettura dei dati dal gps è in corso.

Qui troverete una documentazione accurata, anche se solo in draft, ma vi consiglio di testare le vostre pagine con tutti i browser in quanto hanno comportamenti molto differenti.

http://dev.w3.org/geo/api/spec-source.html

 

Problemi di resize automatico di pagine html su cambio orientamento iPhone

Oramai con l’ausilio di html5, jquery, e tante altre librerie , le app ibride o direttamente html per i nostri dispositivi pda che siano iphone o android, iniziano ad aumentare.

Uno dei problemi piu frequenti che sto riscontrando in questo tipo di applicazioni è gestire le pagine, i layout , quando cambiamo orientamento al nostro dispositivo, passando da verticale a orizzontale e viceversa.

sui browser basati su webkit, e in particolare per iphone la risoluzione (salvo particolari problemi dati da costrizioni su css e markup html) è molto banale e incentrata su alcune direttive meta da aggiungere all’header delle nostre pagine..

dopo molte prove, la combinazione per ora che risolve la maggiorparte dei problemi , a mio avviso e’ questa:

 

1
2
3
<meta name = "viewport" content = "user-scalable=no,initial-scale=1.0, maximum-scale=1.0, width=device-width">

<meta name="apple-mobile-web-app-capable" content="yes"/>

Edit: con un maximum scale maggiore di 1.0 si hanno problemi quando si passa piu volte da orizzontale a verticale..