Programmatore HTML5 | Programmatore PHP | Programmatore MySQL | Programmatore Wordpress | Consulente SEO | Consulente Web Marketing | Consulente WebMarketing | HTML5

Programmazione HTML5, un piccolo esempio sulla funzionalità di Geolocalizzazione



Dopo aver scritto in passato già articoli su alcune funzionalità di HTML5 e sui vantaggi del suo utilizzo, oggi illustrerò con un piccolo esempio la Geolocalizzazione, un’altra funzionalità (a mio avviso molto utile) di questo nuovo/futuro Standard per il web!

Quando parliamo di Geolocalizzazione, intendiamo la capacità di uno strumento (PC, Tablet, Telefono) di calcolare/restituire la latitudine e la longitudine sfruttando la capacità di ricavarlo dal proprio IP, Wi-Fi, Cella Telefonica o GPS Hardware che serviranno appunto a localizzarci geograficamente.

Da questa semplice definizione un Programmatore, può facilmente capire che non sempre i dati ricevuti corrispondono in maniera accurata all’indirizzo reale da dove si interroga l’applicazione, nel caso di dispositivi mobile, grazie al GPS Hardware tutto sarà molto accurato, mentre per connessioni Desktop o connessioni il cui riferimento è l’IP o il server/nodo telefonico la localizzazione potrebbe variare (anche di un bel pò) rispetto alla reale posizione.

La seconda è ovvia considerazione che faremo riguardo a questo tipo di funzionalità HTML5 è quella che facciamo sempre in questi casi, trattandosi di uno standard nuovo (e non ancora completamente definito), avremo un supporto non assicurato sui browser di vecchia generazione. Di seguito i Browser e le versioni che dichiarano di supportare questa funzionalità:

Desktop: IE 9.0+ FIREFOX 3.5+ SAFARI 5.0+ CHROME 5.0+ OPERA 10.6+ 

Mobile: IPHONE 3.0+ ANDROID 2.0+

(con + intendiamo  “la versione indicata o superiore”).

In fine ricordo che tutti i Browser (o WebApp) che vogliano utilizzare tale funzionalità avranno sempre bisogno del consenso dell’utilizzatore, che spesso avviene appunto tramite una domanda o una richiesta effettuata dallo stesso.

autolocal

La funzionalità (o meglio metodo) HTML5 che ci consentirà di ricevere la posizione è getCurrentPosition(), più specificatamente tale metodo dovrà avere una funzione di callback, che verrà richiamata quando i parametri di localizzazione vengano reperiti e una funzione che gestisce gli errori nel caso questi non vengano trovati, capiremo meglio con il seguente esempio di codice commentato:

var contenitore = document.getElementById("coordinate");

function trovaPosizione() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(mostraPosizione, mostraErrori);
    } else { 
        contenitore.innerHTML = "Il Browser non supporta la localizzazione";
    }
}

function mostraPosizione(position) {
    contenitore.innerHTML = "Latitudine: " + position.coords.latitude + 
    "<br>Longitudine: " + position.coords.longitude;
}

function mostraErrori(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            contenitore.innerHTML = "L'utente non ha autorizzato la localizzazione"
            break;
        case error.POSITION_UNAVAILABLE:
            contenitore.innerHTML = "Informazioni sulla localizzazione non disponibili"
            break;
        case error.TIMEOUT:
            contenitore.innerHTML = "La richiesta di localizzazione è scaduta"
            break;
        case error.UNKNOWN_ERROR:
            contenitore.innerHTML = "Errore sconosciuto"
            break;
    }
}
trovaPosizione();

E’ facile capire che un Programmatore HTML5 può sfruttare tale funzionalità in molteplici applicazioni web e idee, banalmente ad esempio è possibile posizionare un marker su una mappa Google, che magari tracci la distanza da alcuni punti di interesse vicini, o altri esempi/usi decisamente più elaborati.

Da un po’ Google ha limitato l’uso dell’API getCurrentPosition ai soli domini certificati (HTTPS).

Le applicazioni di questo esempio di script sono molteplici, infatti sarà possibile con HTML5 e Google Maps rende maggiormente affascinante la localizzazione della nostra posizione, posizionando un marker sulla posizione appena individuata (potete vedere un esempio qui)

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

captcha
Inserisci i caratteri che vedi nell'immagine

 


POTREBBE INTERESSARTI ANCHE:
Una semplice guida per la realizzazione di uno Script per Codice Captcha
Script realizzato con PHP per la lettura di un particolare elemento all'interno di un nodo XML
Core Plus è un CMS a Misura di utente, completamente integrabile ad ogni grafica, che consente lo Sviluppo di Siti Internet Dinamici frutto della mia esperienza di Programmatore PHP Freelance
Il codice Javascript che potete utilizzare per interrogare le API di Facebook e ottenere le reactions relative da trasmettere Live su Facebook
Grazie alle API di Weather Underground possiamo creare uno Script PHP facilmente personalizzabile da ogni Programmatore


buzzoole code
Leggi altro:
Un semplice esempio di AJAX

Come promesso in alcuni dei precedenti post, vi propongo un piccolo esempio per chi vuole iniziare a comprendere questi costrutti...

Chiudi