Hacer que los sitios web sean conscientes de la ubicación con la geolocalización HTML5

Spanish (Español) translation by Gregorio (you can also view the original English article)

Las suposiciones pueden ser un negocio arriesgado en el mundo de la experiencia de usuario, pero algunas de ellas pueden permitirte ofrecer una experiencia de usuario más personalizada a tus visitantes. Vamos a ver cómo mejorar la experiencia del usuario haciendo que tus sitios web sean conscientes de la ubicación.

La experiencia del usuario ha pasado a ocupar un primer plano en el diseño web durante los últimos diez años. Como usuarios, constantemente se nos pide que proporcionemos información actualizada sobre nosotros. Cualquier cosa, desde Twitter preguntándonos "¿Qué está pasando?" a Facebook preguntándonos qué nos 'gusta'. Todo esto le permite a estas empresas, entre otras cosas, construir un perfil bastante detallado y preciso de ti para poder proporcionarte una experiencia de usuario más personalizada.

Más o menos al mismo tiempo que se anunciaba HTML5, W3C nos presentó otra API. Estoy bastante seguro de que habrás oído hablar de ella; la API de geolocalización. Esto permite que tu sitio reciba información sobre posicionamiento geográfico mediante JavaScript.

¿Cómo funciona la geolocalización?

Se puede acceder a los datos de geolocalización a través de varias y distintas fuentes. Tradicionalmente en los sitios web, estaría determinado por la dirección IP del visitante. A continuación, se conectaría a un servicio WHOIS y recuperaría la dirección física del visitante a partir de su información 'whois'. Sin embargo, recientemente se ha vuelto habitual utilizar una forma más popular y precisa de acceder a esta información; usando un chip GPS incorporado en un dispositivo. Estos se encuentran en la mayoría de los teléfonos inteligentes y tabletas y son responsables del aumento de la popularidad de los servicios que reconocen la ubicación que podríamos utilizar. Piensa en Foursquare o en cualquier otra aplicación en la que puedas hacer un registro o 'check in'.

Privacidad del usuario

En la especificación de la API publicada por el W3C se indica:

Los agentes de usuario no deben enviar información sobre la ubicación a los sitios web sin el permiso expreso del usuario.

Antes de que un dispositivo o navegador pueda acceder a los datos de geolocalización de un visitante, el visitante debe conceder su autorización previa. Así es como aparece en Google Chrome:

Los usuarios son conscientes, ahora más que nunca, de qué información almacenan sobre ellos los sitios web, por tanto, tus usuarios tendrán que sentirse seguros en relación a lo que vayas a hacer con sus datos. Infórmales sobre por qué exactamente necesitas esta información e indica cómo les beneficiará al poder crear una mejor experiencia online.

Cuando se usa un sitio web o una aplicación con geolocalización, es recomendable controlar la cantidad de información que compartes con otras personas. La mayoría de las aplicaciones y servicios que comparten ubicaciones ofrecen algún tipo de control sobre la privacidad, así que asegúrate de utilizar esto y de no compartir nunca tu dirección personal.

Usos de la geolocalización

Una vez tengas un sitio o una aplicación que reconozca la ubicación, podrás proporcionar contenido más preciso y relevante para tus visitantes. Echemos un vistazo a cómo puede ser útil la geolocalización.

Geomarketing

El geomarketing es un término relativamente nuevo y se puede describir como:

La integración de la inteligencia geográfica en diversos aspectos del marketing, incluyendo ventas y distribución.

Aunque es un nuevo término, el principio real del geomarketing ya ha existido durante un tiempo. Facebook ha estado utilizando este enfoque desde hace ya algún tiempo. Facebook recopilaría datos basados en la ubicación (basados en las direcciones IP de los usuarios) a partir de esto y, a continuación, mostraría anuncios adecuados a esa región geográfica. Google y otros motores de búsqueda también han hecho uso de esto e incluyen resultados de búsqueda basados en la ubicación para sus usuarios.

Crowdsourcing

No son solo los profesionales del marketing los que pueden beneficiarse de servicios de geolocalización, los tipos creativos también se han beneficiado de ellos, probablemente sin darse cuenta. La gente la ha utilizado para acceder a un gran número de personas, todas las cuales están situadas en la misma zona y tienen un mismo objetivo, "hacer que algo suceda". Esto puede ir desde "flash mobs", a rutinas de baile a gran escala, a la creación de grupos comunitarios para personas que comparten intereses similares.

También se ha utilizado en situaciones como el terremoto de Haití de 2010, cuando grandes grupos de personas normales y corrientes se reunieron para impulsar la ayuda a través del poder de las redes sociales y la geolocalización.

Ofertas

Recientemente han comenzado a surgir una gran cantidad de "sitios de ofertas" por todas partes. En especial Groupon, que fue lanzado en noviembre de 2008. Groupon ofrece servicios que presentan ofertas del día a sus usuarios y el sitio tiene cada día una cantidad limitada de descuentos para cada oferta. Cada artículo debe interesar a los usuarios lo suficiente como para que se inscriban a esa oferta; al hacerlo lo recibirán, pero sólo si se alcanza el número mínimo de personas establecido para ella.

Este concepto reduce el riesgo para los minoristas y les permite vender a granel, haciendo que el concepto sea un ganador durante todo el año. El poder de Groupon reside en su sólida integración con la ubicación de sus usuarios. Al ofrecer a sus usuarios ofertas y descuentos locales se ha convertido en uno de los sitios de cupones más populares y su formato ha sido ampliamente replicado.

Ejemplos prácticos

Ahora que entiendes un poco más sobre la geolocalización, echemos un vistazo a algunos ejemplos del mundo real.

The Rocky Horror Show

El sitio web de rocky horror te permite obtener los distintos horarios del representación del espectáculo en lugares cercanos a ti. Dirígete simplemente al sitio y haz clic en "Find my location" ("Buscar mi ubicación" en español).

Lugares de Flickr

Usando la misma tecnología, Flickr muestra lo que otros han estado subiendo al sitio web desde ubicaciones cercanas a aquella en la que tú te encuentras.

Mapumental

Mapumanetal fue lanzado en 2006 cuando el Departamento de Transporte del Reino Unido se comunicó con la startup para trabajar con la información que tenían sobre los datos de transporte público. En Mapumental describen lo que hacen de la siguiente manera, "Creamos mapas que ayudan a las personas a tomar mejores decisiones, más rápido". Ofrece una variedad de herramientas y servicios que ofrecen formas de visualización de datos sobre viajes en tiempo real.

Implementación de la geolocalización

Si no has implementado con anterioridad la geolocalización en sitios web o aplicaciones, la buena noticia es que no podría ser más sencillo. En este tutorial voy a mostrar cómo se puede obtener la ubicación de un usuario en tu sitio o aplicación web.

El código HTML

He diseñado esto de manera que puedas añadirlo a tu propio sitio web con bastante facilidad. El objetivo es que el usuario presione un botón que después obtendrá su ubicación, mostrándola en el sitio con un poco de ayuda de la API de Google Maps.

Comenzamos con un elemento contenedor que centre el diseño. He decidido que tenga una anchura de 960px, pero puedes usar cualquier tamaño que se adapte a tu diseño. Dentro de este 'envoltorio' he creado un div en donde se asentará el mapa una vez se haya generado. Le he asignado el ID 'Mapa'.

Dentro del div 'Mapa' tengo un span al que le he asignado una clase denominada 'helper'. Esto será una pequeña guía auxiliar que le indicará al usuario lo que debe hacer. Esto podría parecer algo un poco innecesario, pero siempre es una buena práctica ayudar a los usuarios siempre que sea posible.

Después tenemos una imagen de precarga a la que le he asignado el ID 'preloader'. Si estás buscando precargadores, echa un vistazo a preloaders.net.

Esto es lo que deberías tener hasta ahora:



<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-->

Después del div 'mapa' utilizo una simple etiqueta de ancla que actuará a modo de botón para que el usuario haga clic. Esto tiene una clase denominada (¡oh! lo adivinaste) 'button'.

Una vez que el usuario haga clic en el botón, no sólo queremos mostrar el mapa, sino que también nos podría ser útil para mostrar la ubicación, la longitud y la latitud del usuario. Para ello he creado un div con el ID de 'results' que a su vez contiene tres spans, cada uno de ellos con la clase relevante. Esto es todo sobre el código de la estructura. Así debería verse el código al completo:



<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-->

El CSS

El CSS es bastante sencillo. Aquí lo tienes en su totalidad:


@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 a tener en cuenta es que el precargador es el único elemento div que está posicionado de forma absoluta. Esto está posicionado de forma absoluta en relación con el div 'mapa'. Para lograrlo, simplemente asegúrate de que el div 'mapa' tenga su posición establecida en relative. Esto permitirá que el precargador se sitúe en su elemento padre en lugar de ocupar todo el documento.

jQuery

Google ofrece una variedad de API's para sus servicios MAP que son gratuitas hasta que se alcanzan ciertos límites de uso. Después de esto, se aplicarán cargos.

Por suerte, los dos servicios que vamos a utilizar son totalmente gratuitos; de hecho, una de las técnicas no utiliza en absoluto la API, en su lugar, utilizaremos el iframe incrustado de mapa estándar en el que vamos a cambiar algunos de sus valores usando los que obtenemos del navegador del usuario.

En primer lugar, dentro de algunas etiquetas <script>, o en un archivo JavaScript independiente, definimos algunas variables para los elementos HTML que usaremos como destino mediante jQuery., o en un archivo JavaScript independiente, definiremos algunas variables para los elementos HTML a los que


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

Una vez hecho esto, debemos comprobar que el navegador es compatible con la API de geolocalización. Podemos probar esto con la siguiente instrucción 'if'.


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

Una vez que hayamos establecido el soporte del navegador, detectaremos el clic del botón dentro de la parte en la que se comenta 'El navegador lo soporta, estamos listos para ir'.

El evento de clic de botón debería tener este aspecto:


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

Una vez que se haya hecho clic en el botón se mostrará el precargador. La parte importante que debes observar aquí es lo que va desde la 2ª a la última línea que contiene 'navigator'. Lo que esto está indicando es efectivamente: "obtén la ubicación de los usuarios y si esto sucede con éxito, envía la posición de la ubicación a la función 'exportPosition', de lo contrario envía un error a la función errorPosition".

Así que vamos a pasar a la creación de estas funciones. La función de error es bastante sencilla:


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

En la función anterior se puede ver que esta alertará e indicará el error, y a continuación mostrará de nuevo el precargador.

En la siguiente función de éxito, denominada 'exportPosition' obtenemos la latitud y la longitud proporcionada por la API de geolocalización y las establecemos como variables con el mismo nombre.

Una vez que las tengamos, podemos usarlas dentro del código de inserción del iframe de Google Maps. También podemos usarlas dentro de los spans que muestran la longitud y la latitud al usuario. Así es como se ve:


	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 es la URL del iframe. Dentro de la url inserto las variables '+latitud+' y '+longitud+'. De cerca esto tiene el siguiente aspecto:

<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>

Esto insertará el MAPA dentro del div '#map' y también revelará la longitud y la latitud al usuario. También hay una cosa más que nos gustaría saber; este es el nombre de la ubicación del usuario. Para ello necesitamos hacer una llamada a la API de Google Maps a través de AJAX. Agregamos esta función AJAX dentro de la función 'exportPosition'. Esto tiene el siguiente aspecto:


//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();
	  }
	});

En la respuesta de éxito tomamos el nombre de la ubicación recibida de la llamada AJAX y la agregamos al span '.location'. Si, por cualquier motivo, hay un error en esa llamada, se ejecutará la función 'errorPosition' que alertará al usuario de que no se pudo determinar su ubicación.

La API de geolocalización funciona en todos los navegadores modernos. Sin embargo, algunas versiones de Safari utilizan CoreLocation para obtener datos de geolocalización, lo que significa que debes estar conectado a Internet mediante WIFI. Si está conectado a través de Ethernet o similar, es posible que tenga problemas para recopilar los datos de ubicación.

También vale la pena señalar que estos archivos de tutorial necesitan ser cargados en un servidor web en vivo para trabajar y no funcionarán en localhost.

Conclusión

Espero que ahora tengas una mayor comprensión de la API de geolocalización, sobre su funcionamiento y sobre cómo puedes implementarla con muy poco esfuerzo. Mediante el uso de la geolocalización de formas creativas y eficaces, ahora debería poder proporcionar una mejor experiencia de usuario para los usuarios.

¿Has implementado la API de geolocalización en algún sitio en el que hayas estado trabajando para fomentar una mejor experiencia de usuario? ¿Has visto algún uso original y creativo de la misma? Cuéntanoslo en la sección de comentarios que viene a continuación.