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

 


POTREBBE INTERESSARTI ANCHE:
La Creazione di un Progetto Web, può passare da 2 figure professionali distinte Sviluppatori Web e Creatori di Siti Internet, ma attenzione alle insidie.
Breve guida al Backup di un Database MySQL utilizzando PHP, utile ad ogni Programmatore PHP che voglia utilizzare questo Script PHP per utilizzarlo con Crontab o con pulsanti per Backup temporizzati
Realizzare una rotazione di Banner utilizzando JQuery, con possibilità per un Programmatore PHP di ampliare l'esempio rendendo dinamico la selezione dei Banner direttamente da database MySQL
Le possibilità di creazione e personalizzazione di una pagina Facebook possono essere molte fino a renderlo un Minisito vero e proprio, in questo articolo un Programmatore PHP Consulente Web Marketing vi da qualche suggerimento per una pagina di successo
HTML5 contiene una serie di funzionalità minori che consentono nuove possibilità per un Programmatore PHP, come ad esempio la possibilità di upload di file multipli con un solo campo input HTML


buzzoole code
Leggi altro:
Rotazione Banner con JQuery

In questo breve Articolo vi illustrerò come realizzare una Rotazione Banner con JQuery, questo esempio vi consentirà di realizzarlo con...

Chiudi