Sensibilizzare la posizione di siti Web con HTML5 Geolocation

() translation by (you can also view the original English article)

Presupposto può essere un affare rischioso nel mondo della UX, ma alcune ipotesi possono consentire di fornire un'esperienza utente più su misura per i tuoi visitatori. Stiamo andando a guardare a migliorare l'esperienza utente di sensibilizzare la vostra posizione di siti Web.

Esperienza utente ha scaturito in avanti in prima linea di web design in ultimi dieci anni o giù di lì. Come utenti ci stiamo costantemente essere chiesto di fornire informazioni aggiornate su noi stessi. Nulla da Twitter ci chiede "Che cosa sta succedendo?" su Facebook ci chiede cosa abbiamo 'piace'. Tutto ciò permette a queste aziende, tra le altre cose, per costruire un profilo piuttosto dettagliato e preciso di voi in modo che possono fornire un'esperienza utente più personale.

Intorno allo stesso tempo che HTM5 è stata annunciata, un'altra API è stato introdotto a noi da W3C. Sono abbastanza sicuro che si può avere sentito di esso; le API di geolocalizzazione. In questo modo il tuo sito per ricevere informazioni sul posizionamento geografici utilizzando JavaScript.

Come funziona la geolocalizzazione?

I dati di geolocalizzazione sono accessibili attraverso varie fonti diverse. Tradizionalmente su siti Web, sarebbe essere determinato tramite l'indirizzo IP del visitatore. Sarebbe poi agganciare a un servizio WHOIS e recuperare l'indirizzo fisico del visitatore da loro informazioni di whois. Recentemente però, un modo più popolare e preciso per accedere a queste informazioni è diventato comune; utilizzando un dispositivo costruito nel chip GPS. Questi si trovano in più smart phone e tablet e sono responsabili per l'aumento della popolarità di localizzazione consapevoli che potremmo utilizzare. Pensare di Foursquare o qualsiasi altra applicazione che si potrebbe 'verificare' a.

Privacy degli utenti

Nell'API specifica rilasciato dal W3C stati:

Gli agenti utente non devono inviare informazioni sulla posizione a siti Web senza l'espressa autorizzazione dell'utente.

Prima che un dispositivo o browser può accedere ai dati di geolocalizzazione di un visitatore, il visitatore innanzitutto necessario autorizzare. Questo è come appare in Google Chrome:

Ora più che mai, gli utenti stanno prendendo l'avviso su quello che i siti web informazioni memorizzare su di loro e gli utenti avranno bisogno di sentire fiducioso per quanto riguarda ciò che si utilizza i dati per. Li consiglio per quanto riguarda esattamente perche ' bisogno di queste informazioni e sottolineare come sarà utile a loro per creare una migliore esperienza online.

Quando si utilizza un sito Web di geolocalizzazione o app è buona norma controllare la quantità di informazioni che Condividi con altre persone. Posizione più condivisione di applicazioni e servizi offrono una sorta di controllo della privacy, quindi assicuratevi di utilizzare questo e non condividere mai il vostro indirizzo personale.

Usi per la geolocalizzazione

Una volta che avete una posizione consapevole sito o dell'applicazione, siete in grado di fornire contenuti più accurati e appropriati per i tuoi visitatori. Diamo un'occhiata a come geolocalizzazione può venire in pratico.

Geomarketing

Geomarketing è un termine relativamente nuovo e può essere descritto come:

L'integrazione di intelligenza geografica in vari aspetti del marketing, tra cui vendite e distribuzione.

Sebbene un nuovo termine, il principio stesso del geo marketing è stato intorno per un po'. Facebook sono stati che utilizzano questo approccio per qualche ora. Facebook sarebbe raccogliere dati basati sulla posizione (basati su indirizzi IP degli utenti) da questo, quindi Visualizza annunci appropriati per tale area geografica. Google e altri motori di ricerca hanno fatto uso di questa e includere i risultati di ricerca basati sulla localizzazione per i loro utenti.

Crowdsourcing

Non è solo marketing che possono beneficiare di servizi di geolocalizzazione, ma creativi hanno sfruttato anche (probabilmente senza neanche rendersene conto). Persone lo hanno utilizzato per ottenere l'accesso a un gran numero di persone, i quali sono situati nella stessa zona e hanno lo stesso obiettivo di "fare qualcosa accada". Questo può variare da flash mob, routine di danza su larga scala, alla creazione di gruppi di comunità per persone che condividono interessi simili.

È stato utilizzato anche in situazioni come il terremoto di Haiti nel 2010, quando grandi gruppi di persone comuni riuniti per raccogliere aiuti per tutta la potenza dei social network e geo localizzazione.

Offerte

Recentemente una grande quantità di "offerta siti" hanno iniziato a primavera in tutto il mondo. In particolare è Groupon che ha lanciato nel novembre 2008. Groupon offre servizi di affare-of-the-day ai propri utenti e ogni giorno il sito ha un importo predeterminato di offerte per ogni offerta. Ogni elemento deve interessare abbastanza utenti a firmare per quell'offerta; in questo modo lo ricevono, ma solo se viene raggiunto il numero di persone predeterminato.

Questo concetto riduce il rischio per i rivenditori e permette loro di vendere in massa, rendendo il concetto un vincitore tutto intorno. Il potere di Groupon è facilmente raggiungibile con la stretta integrazione che ha con la sua posizione di utenti. Per offrire ai propri utenti locali e le offerte che è diventato uno dei più popolari siti di coupon e ha avuto il suo formato replicata molte volte.

Esempi pratici

Ora si capisce un po' di più sulla geolocalizzazione, diamo un'occhiata ad alcuni esempi del mondo reale.

The Rocky Horror Show

Il sito Web di rocky horror consente di ottenere orari di programmazione per lo spettacolo in luoghi che sono vicini a voi. Basta andare sul sito e fare clic su "Trova la mia posizione".

Luoghi di Flickr

Utilizzando la stessa tecnologia, Flickr viene illustrato ciò che altri hanno caricato al sito vicino a dove ti trovi.

Mapumental

Mapumanetal è venuto intorno nel 2006 quando il dipartimento dei trasporti del Regno Unito ha contattato l'avvio al lavoro con le informazioni che hanno tenuto su dati di trasporto pubblico. Essi descrivono ciò che fanno a Mapumental come "Creiamo mappe che aiutano le persone a prendere decisioni migliori e più veloci." Esso offre una varietà di strumenti e servizi che offrono modi per visualizzare tempo reale dati di viaggio.

Implementazione di geolocalizzazione

Se si non è implementate in precedenza geolocalizzazione in siti Web o applicazioni quindi la buona notizia è, non potrebbe essere più semplice. In questo tutorial ho intenzione di mostrare come è possibile ottenere la posizione di un utente sul tuo sito Web o web app.

Il Markup HTML

Ho progettato questo modo che è possibile aggiungere sul tuo sito web abbastanza facilmente. L'obiettivo è per l'utente di premere un pulsante che otterrà quindi la loro posizione, visualizzarla sul sito con un piccolo aiuto da Google Maps API.

Iniziamo con un wrapper per centrare il disegno. Ho scelto di fare questo a 960px ampio ma si può optare per l'utilizzo di qualsiasi dimensione che si adatta il vostro disegno. All'interno di questo 'wrapper' ho creato un div che è dove si siederà la mappa una volta che è stato generato. Ho dato questo un ID di 'Mappa'.

All'interno del div 'Mappa' poi hanno una portata che ho dato una classe denominata 'helper'. Si tratta di una piccola guida di supporto che indicherà all'utente che cosa devono fare. Questo può sembrare un po' inutile, ma è sempre buona pratica per aiutare gli utenti quando possibile.

Abbiamo poi un preloader immagine che ti ho dato un ID di 'precaricatore'. Se stai cercando di trovare preloaders allora si può verificare preloaders.net.

Questo è ciò che si dovrebbe avere finora:


<div class="wrapper">

<div id="map">
  <span class="helper">Click the button below to show your location on the map</span>
	<img id="preloader" src="images/257.gif">
</div>

</div><!--End Wrapper-->

Dopo il div 'mappa' utilizzare un tag di ancoraggio semplice che agirà come il pulsante per l'utente a cliccare. Questo ha una classe di (yup avete indovinato) 'button'.

Una volta che l'utente ha cliccato sul pulsante, non solo vogliamo visualizzare la mappa, ma anche potrebbe tornare utile visualizzare la posizione dell'utente, la longitudine e la latitudine. Per questo che ho creato un div con ID 'risultati' che quindi contiene tre campate ciascuno con una classe pertinente. Per il markup che è esso. Questo è ciò che dovrebbe come il markup intero:


<div class="wrapper">

	<div id="map">
		<span class="helper">Click the button below to show your location on the map</span>
		<img id="preloader" src="images/257.gif">
	</div>

	<a class="button" href="" title="">Find My Location</a>

	<div id="results">
		<span class="longitude"></span><br>
		<span class="lattitude"></span><br>
		<span class="location"></span>
	</div>
	
</div><!--End Wrapper-->

Il CSS

Il CSS è piuttosto semplice. Qui è in pieno:

@charset "utf-8";
html{
	background:#222222;
	font-family:helvetica, arial, sans-serif;
}
.wrapper{
	width:960px;
	margin: 0 auto;
	position:relative;
}
#map{
	position:relative;
	text-align: center;
	color: #363535;
	text-transform: uppercase;
	width: 425px;
	height: 350px;
	margin:0 auto;
	margin-top:20px;
	padding: 5px;
	border: 1px solid black;
	background: #474747;
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .3);
}
#map .helper{
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: rgb(54, 54, 54);
	width: 180px;
	line-height: 135%;
	margin: 0 auto;
	margin-top: 140px;
}
#map #preloader{
	position: absolute;
	top: 141px;
	left: 190px;
	display:none;
}
#map iframe{
	border:1px solid black;
}
.button{
	padding:13px 40px;
	background-color:#00caa7;
	color:#00caa7;
	border-radius:3px;
	color:white;
	display:block;
	text-decoration:none;
	box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
	width:122px;
	margin:0 auto;
	margin-top:20px;
}
.button:hover{
	background-color:#00b495
}
#results{
	color: rgb(0, 180, 149);
	position: absolute;
	margin-top: 20px;
	text-align: center;
	line-height: 23px;
	width: 100%;
}

Una cosa da notare è che il preloader è l'unico elemento div che è assolutamente posizionato. Questo è assolutamente posizionato in relazione la 'mappa' div. Per ottenere questo basta fare in modo che il div 'mappa' ha la sua posizione insieme al relativo. Ciò consentirà il preloader essere posizionato a suo padre in contrapposizione l'intero documento.

jQuery

Google offre una gamma di API per i suoi servizi di mappa che sono gratuiti fino a determinati limiti di utilizzo. Dopo di che, verrà addebitato il costo.

Per fortuna, entrambi i servizi che stiamo andando a utilizzare sono completamente gratuiti; infatti una delle tecniche non utilizza l'API affatto, invece utilizzando la mappa standard incorpora iframe in cui cambieremo alcuni dei valori che otteniamo dal browser dell'utente.

In primo luogo, all'interno di alcuni<script></script>

var button = jQuery('.button');
var preloader = jQuery('#preloader');
var longitudediv = jQuery('.longitude');
var lattitudediv = jQuery('.lattitude');
var locationdiv = jQuery('.location');

Una volta che abbiamo fatto che dobbiamo verificare che il browser supporta le API di geolocalizzazione. Possiamo testare questo con la seguente dichiarazione di 'se'.

if (navigator.geolocation) {  	
	// Browser supports it, we're good to go!	  
	} else {  	
	alert('Sorry your browser doesn\'t support the Geolocation API');	 
	}

Una volta che abbiamo stabilito supporto browser, abbiamo poi rilevare clic del pulsante all'interno della parte dove è commentato 'Browser lo supporta, siamo bene posto'.

Evento click del pulsante dovrebbe assomigliare a questo:

button.click(function(e) {
	e.preventDefault();
	preloader.show();
	navigator.geolocation.getCurrentPosition(exportPosition, errorPosition);
});

Una volta che è stato il pulsante mostrerà il preloader. La parte importante da guardare è il 2 ° all'ultima riga contenente 'navigator'. Che cosa questo efficacemente sta dicendo è: "avere gli utenti posizione e se successo Invia la posizione posizione alla funzione 'exportPosition', altrimenti invia un errore per la funzione di errorPosition".

Quindi cerchiamo di saltare dentro e creare queste funzioni. La funzione di errore è abbastanza dritto in avanti:

1	function errorPosition() {
2	alert('Sorry couldn\'t find your location');
3	pretext.show();
4	}

Nella funzione che si può vedere che la funzione avvertirà ed errore sopra, poi di mostrare nuovamente il preloader.

Il successo funzione sotto la quale è chiamato 'exportPosition' otteniamo la latitudine e la longitudine fornite da geolocation API e impostarle come variabili con lo stesso nome.

Una volta che abbiamo questi che possiamo quindi utilizzare all'interno di iframe incorporare codice da Google Maps. Possiamo usarli anche all'interno le campate che visualizzare la longitudine e la latitudine per l'utente. Ecco come appare:

	function exportPosition(position) {

		// Get the geolocation properties and set them as variables
		latitude = position.coords.latitude;
		longitude  = position.coords.longitude;

		// Insert the google maps iframe and change the location using the variables returned from the API
		jQuery('#map').html('<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll='+latitude+','+longitude+'&amp;spn=0.332359,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe>');
		longitudediv.html('Longitude: '+longitude);
		lattitudediv.html('Latitude: '+latitude);
		
	}

La parte importante è l'url iframe. All'interno dell'url è possibile inserire la latitudine' variabili' e '' di longitudine. Da vicino questo aspetto:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll='+latitude+','+longitude+'&amp;spn=0.332359,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe>

Consente di inserire la mappa all'interno del div '#map' e rivelano anche la longitudine e la latitudine per l'utente. C'è anche un'altra cosa che vorremmo sapere; Questo è il nome della posizione dell'utente. Per fare questo che abbiamo bisogno di effettuare una chiamata per l'API di Google Maps tramite AJAX. Aggiungiamo questa funzione AJAX all'interno della funzione di 'exportPosition'. Questo appare come:

//Make a call to the Google maps api to get the name of the location
	jQuery.ajax({
	  url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true',
	  type: 'POST',
	  dataType: 'json',
	  success: function(data) {
	  	//If Successful add the data to the 'location' div
	 locationdiv.html('Location: '+data.results[0].address_components[2].long_name);
	  },
	  error: function(xhr, textStatus, errorThrown) {
	  		 errorPosition();
	  }
	});

Nella risposta successo prendiamo il nome della località ricevuto indietro dalla chiamata AJAX e aggiungerlo all'intervallo di 'location'. Se, per qualsiasi motivo, c'è un errore nella chiamata, quindi verrà eseguito la funzione di 'errorPosition' e avvisano l'utente che poteva trovare la loro posizione.

L'API di geolocalizzazione funziona in tutti i browser moderni. Tuttavia alcune versioni di Safari utilizzano CoreLocation per ottenere i dati di geolocalizzazione, che significa che è necessario essere connessi a internet tramite WIFI. Se si è connessi tramite ethernet o simili, allora si può avere problemi raccogliendo i dati di posizione.

Vale anche la pena di sottolineare che questi tutorial file devono essere caricati su un server web dal vivo per lavorare e non funzionano su localhost.

Conclusione

Spero che ora hai una maggiore comprensione della geolocalizzazione API, come funziona e come è possibile implementare con poco sforzo. Utilizzando geolocalizzazione in modo creativo ed efficace che dovrebbe essere in grado di fornire un migliore utente esperienza per gli utenti.

Avete implementato il geolocation API in tutti i siti che stai lavorando per incoraggiare una migliore esperienza utente? Avete visto usato in un modo divertente e creativo? Fateci sapere nei commenti qui sotto.