Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Mobile Web Apps

Aplicaciones HTML5: Posicionamiento con geolocalización

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En el corazón de cada aplicación basada en ubicaciones se encuentran el posicionamiento y la geolocalización. ¡En este tutorial aprenderás sobre las capacidades de geolocalización de HTML5 y los principios básicos necesarios para aprovecharlas en tu siguiente aplicación HTML5!

Introducción

Hace tres años, el auge de los teléfonos inteligentes todavía era una posibilidad incierta. Hoy en día estamos rodeados por una sociedad de adictos a los teléfonos inteligentes que viven como si sus vidas no pudieran continuar sin tener acceso móvil instantáneo a la web, correo electrónico y aplicaciones para toda ocasión. Los dispositivos móviles han avanzado mucho en tan solo tres cortos años, y ahora permiten tener una amplia gama de útiles funciones que van más allá de poder hacer llamadas telefónicas. Para personas como yo que tienen problemas con las ubicaciones, la geolocalización es una de las adiciones más útiles. Muchos dispositivos iPhone y Android han sido equipados con hardware GPS que puede generar datos geográficos confiables, y en este artículo discutiremos las capacidades de geolocalización de HTML5. Mi objetivo es ayudarte a aprovechar la tecnología de geolocalización en tu siguiente proyecto guiándote a través de los siguientes temas:

  • La geolocalización en un navegador y cómo funciona
  • Cómo funcionan las llamadas asíncronas
  • Cómo usar la API getCurrentPosition
  • Que contienen los datos de geolocalización
  • Cómo recurrir a la geolocalización basada en direcciones IP cuando los navegadores no proporcionan soporte nativo
  • Cómo desplegar un mapa usando datos de geolocalización
  • Cómo usar las APIs watchPosition y clearWatch

La geolocalización en un navegador y cómo funciona

Para detectar la localización de un dispositivo cliente en el pasado, por lo general uno tenía que inspeccionar la dirección IP de dicho cliente y hacer una estimación razonable sobre el lugar en el que estaba ubicado el dispositivo. Sin embargo, como parte de los esfuerzos de HTML5, el W3C ha desarrollado un conjunto de APIs para permitir efectivamente que el dispositivo del lado del cliente (es decir, tu iPhone 3G+, teléfonos Android 2.0+ o incluso tus navegadores de escritorio convencionales) obtenga información de posicionamiento geográfico con JavaScript. Cuando observamos el panorama de los navegadores web, el soporte nativo para la geolocalización está comenzando a abrirse camino dentro de las aplicaciones de uso común a un ritmo lento y constante. Una aplicación importante que usa la geolocalización es Google Maps. Al escribir este artículo, el soporte para la geolocalización está totalmente disponible solamente en algunos cuantos navegadores (ver más abajo), pero parece que la mayoría de los navegadores modernos están adoptando esta útil funcionalidad:

  • Firefox 3.5+: Sí
  • Chrome 5 beta: Sí
  • Safari para iPhone: Sí
  • Opera 10.5 dev build: Sí
  • Safari: No
  • Internet Explorer: No

Para aquellos que estén interesados en leer las especificaciones sobre geolocalización del W3C este es el vínculo que deben seguir. Una sección que vale la pena mencionar aquí es la sección 6.2.8 titulada: "La API de geolocalización debe ser independiente de las fuentes de información subyacentes relacionadas con la ubicación". Ésta sugiere que la tecnología subyacente del dispositivo debe lograr la geolocalización ya sea a través de GPS, triangulación por torre celular o posiblemente otras técnicas. La API de geolocalización no identificará la manera en la que se determinó la información de la ubicación. El no saber cómo se logró la geolocalización usualmente no es un problema, pero quizá notes que la precisión de la información relativa a la ubicación puede variar mucho dependiendo de la técnica usada.

Funciones asíncronas

Una función asíncrona es aquella que se ejecuta fuera del flujo del programa principal. En el contexto de JavaScript, esto significa que nuestro código invocará a una función y luego continuará ejecutando instrucciones antes de que la función termine. Al seguir este modelo nuestro código deberá verse más o menos así:

Dado que la respuesta de la función do_something() se nos otorga de forma asíncrona, debemos nominar a una función que reciba una respuesta y la use. Por lo tanto debemos definir otra función, handle_response_to_do_something(), que muestra el resultado en un cuadro de diálogo.

Quizá ahora te preguntes ¿por qué necesitamos saber esto?. Bueno, es debido a que cuando nuestra aplicación intenta consultar su ubicación, el usuario del dispositivo debe aceptar compartir la información sobre su ubicación con nuestra aplicación. Si esta acción no fuera asíncrona todo el contenido del navegador se congelaría hasta que el usuario respondiera, y eso obviamente no es algo deseable.

html5 geolocation APIhtml5 geolocation APIhtml5 geolocation API

La API getCurrentPosition

Hablemos acerca de la API de geolocalización. La primera API con la que estamos interesados en trabajar es la API getCurrentPosition(). Al invocarla, inmediatamente debe regresar y luego adquirir de forma asíncrona un nuevo objeto Position. Si tiene éxito, este método debe invocar a su argumento successCallback asociado con un objeto Position como argumento. Si el intento falla y el método fue invocado con un argumento errorCallback no nulo, este método debe invocar a errorCallback con un objeto PositionError como argumento.

Vamos a comenzar creando nuestra página HTML5 que es agradable y más fácil de hacer que configurar una página XHTML 1.0. Todo lo que necesitamos para comenzar es esto:

En la línea 1 vamos a usar la nueva DTD <!DOCTYPE html> para definir está página como de tipo HTML5. A continuación colocaremos un botón en nuestra página para que los usuarios inicien el proceso de detectar sus ubicaciones.

Ahora conectaremos el botón con JavaScript para iniciar el proceso de consulta de la ubicación actual. Observa que las etiquetas script no requieren el atributo type gracias a las nuevas ventajas de HTML5.

En el código anterior debemos tomar en cuenta el uso del framework jQuery de JavaScript que nos ayuda a comenzar rápidamente, de lo contrario tendríamos que escribir código adicional para detectar si la página está disponible, algo que no tiene nada que ver con la geolocalización. Con la primera etiqueta script cargamos el framework jQuery y luego lo usamos inmediatamente al inicio de la segunda etiqueta script para asignar un evento clic al botón que definimos anteriormente. También escribimos la función initiate_geolocation() para ejecutarla cuando el botón sea presionado y la función handle_geolocation_query(position) para obtener los datos de geolocalización de manera asíncrona a través del argumento position.

En este punto, si ejecutas el código anterior en un navegador compatible con geolocalización (es decir, Firefox 3.5+ y iPhone Safari) deberás poder ver tus coordenadas de latitud y longitud. Esto funciona si el usuario permite compartir la información sobre su ubicación con el sitio o aplicación web, pero ¿qué pasa si no quiere compartir esa información? ¿o qué ocurre si hay un problema para obtener dicha información?.

Sería bueno recibir una notificación sobre ese tipo de problemas. Afortunadamente nuestro código puede detectar estos problemas si definimos otra función que se ejecute solamente cuando haya un error al recuperar datos de geolocalización. Entonces veamos la forma en la que nuestro código deberá cambiar para detectar problemas:

En el código anterior hemos introducido una nueva función, handle_errors, que recibe un argumento error. Al inspeccionar el argumento error podemos revisar el tipo de problema que ha ocurrido. Normalmente el navegador identificará uno de estos tres errores como la causa:

  • El usuario eligió no compartir los datos de localización
  • El dispositivo no pudo obtener los datos de la posición
  • Se agotó el tiempo de espera del dispositivo al intentar recuperar los datos de la posición

Los datos de geolocalización

Si inspeccionamos lo que recibimos de la API de geolocalización, podremos ver los campos coords (coordenadas) y timestamp (marca de tiempo). El campo timestamp simplemente indica la hora a la que se creó la instancia de los datos de geolocalización. El atributo coords contiene un conjunto de coordenadas geográficas junto con la precisión asociada a ellas (accuracy), además de un conjunto de otros atributos opcionales como altitude (altitud) y speed (velocidad). A continuación se muestran sus descripciones de acuerdo a las especificaciones del W3C:

  • Los atributos latitude y longitude (latitud y longitud) son coordenadas geográficas especificadas en grados decimales.
  • El atributo accuracy (precisión) indica el nivel de precisión correspondiente a las coordenadas latitude y longitude. Está especificado en metros y debe ser compatible con todas las especificaciones.
  • El atributo altitude (altitud) indica la altura de la posición, especificada en metros por encima del elipsoide WGS84. Si la implementación no puede proporcionar información sobre la altitud, el valor de este atributo debe ser null (nulo).
  • El atributo altitudeAccuracy (precisión de la altitud) está especificado en metros. Si la implementación no puede proporcionar información sobre la altitud, el valor de este atributo debe ser null (nulo).
  • El atributo heading (rumbo) indica la dirección a la que viaja el dispositivo huésped y está especificado en grados contando en el sentido de las agujas del reloj con respecto al norte verdadero. Si la implementación no puede proporcionar datos sobre la dirección, el valor de este atributo debe ser null (nulo).
  • El atributo speed (velocidad) indica la velocidad en tierra actual del dispositivo huésped y está especificada en metros por segundo. Si la implementación no puede proporcionar información sobre la velocidad, el valor de este atributo debe ser null (nulo).

Solamente puedes acceder a algunos de estos campos si el dispositivo destino es compatible con ellos de acuerdo a la descripción anterior, pero aún es importante saber que existen. El atributo accuracy en particular puede ser útil en tu aplicación para detectar la confiabilidad.

Geolocalización basada en direcciones IP

Ahora la pregunta evidente es ¿qué ocurre con aquellos navegadores que no son compatibles con la geolocalización en absoluto?. La respuesta es que debemos usar un servicio de geolocalización externo. Estos servicios hacen todo lo posible por asignar la dirección IP de un dispositivo a ubicaciones geográficas usando grandes bases de datos de geolocalización. Por lo general hacen un buen trabajo, pero en ocasiones pueden tener los siguientes problemas:

  • Es posible que las direcciones IP estén asociadas a la ubicación equivocada (por ejemplo, el código postal, ciudad o colonia incorrectos dentro de un área metropolitana).
  • Las direcciones pueden estar asociadas solamente con un área geográfica muy amplia (por ejemplo una gran ciudad o un estado). Muchas direcciones están asociadas solamente con una ciudad, no con una calle o ubicación de latitud/longitud.
  • Algunas direcciones no aparecerán en la base de datos y, por lo tanto, no pueden ser asignadas (esto ocurre a menudo con los números IP que no se usan comúnmente en Internet).

Lo importante es recordar que, cuando se usa un servicio de geolocalización externo, la precisión no es tan buena como la de la geolocalización nativa del dispositivo, y en algunos casos puede estar completamente equivocada. Además, esos servicios no proporcionan ninguna información con respecto a la altitud, velocidad o rumbo del dispositivo. En cualquier caso, cuando el GPS o la triangulación no están disponibles, estos servicios son una buena alternativa.

YQL Geo Library es una biblioteca dedicada y ligera que te permite llevar a cabo la geolocalización usando los servicios del buen Yahoo. Esta biblioteca puede hacer otras cosas que dejaré que descubras por tu cuenta, pero por ahora veamos cómo debemos modificar nuestro código para detectar la ubicación exitosamente tanto en los navegadores compatibles como en los que no lo son:

¿Qué hay de nuevo en el código anterior? tres cosas:

  1. Estamos importando la biblioteca YQL Geolocation en la página
  2. Dentro de la función initiate_geolocation(), el código hace una verificación para asegurarse de que la geolocalización sea soportada de forma nativa. Si no es así, entonces hace uso de la biblioteca YQL Geolocation.
  3. Finalmente hemos definido la función normalize_yql_response(response) para convertir el resultado de la biblioteca YQL Geolocation a un formato de salida similar al de las especificaciones del W3C para la API de geolocalización.

Desplegando un mapa usando la geolocalización

Hasta ahora hemos podido obtener las coordenadas de latitud y longitud del dispositivo, pero cuando uno se pierde en medio de una gran ciudad, las coordenadas de latitud y longitud por sí solas no van a ser de gran ayuda. Debemos convertir estas coordenadas a algún formato que los usuarios puedan relacionar de forma más natural, como un mapa. Mostremos un mapa de la ubicación actual usando la API Static Map de Google, como se muestra en la siguiente sección de código:

Con la ayuda de jQuery modificamos la función handle_geolocation_query(position) para crear un elemento image (imagen) y añadirlo a la página. El atributo src del elemento image tiene el valor de un URI construido que la API Static Map de Google inspeccionará y con el que generará la imagen de un mapa.

HTML5 Geolocation Maps APIHTML5 Geolocation Maps APIHTML5 Geolocation Maps API

Las APIs watchPosition y clearWatch

Ahora que sabemos cómo funciona la API getCurrentPosition revisemos rápidamente la API watchPosition. Al invocarla, ésta inmediatamente debe retornar y luego iniciar asíncronamente un proceso watch (vigía) definido por el siguiente conjunto de pasos:

  1. Adquirir un nuevo objeto Position. Si tiene éxito, invocar a la función successCallback asociada con un objeto Position como argumento. Si el intento falla y el método fue invocado con un argumento errorCallback no nulo, este método debe invocar a errorCallback con un objeto PositionError como argumento.
  2. Invocar al método callback (retrollamada) apropiado con un nuevo objeto Position cada vez que la implementación determine que la posición del dispositivo huésped haya cambiado.

Este método devuelve un valor entero que define al proceso watch de forma única. Al invocar a la función clearWatch() con este identificador, el proceso watch debe dejar de adquirir cualquier correción de posición y debe cesar de invocar retrollamadas.

En otras palabras, esta API permite que nuestro código reciba información sobre ubicaciones reiteradamente a medida que la posición del dispositivo cambie. Echemos un vistazo a la estructura de la página con la que necesitamos iniciar:

Como puedes ver el código es prácticamente el mismo que usamos en la sección "La API getCurrentPostion" anteriormente. Sin embargo hay un par de adiciones.

  1. Primero hemos añadido un nuevo botón que nos permite detener el proceso watch con la función stop_watchlocation() para manejar su evento clic.
  2. Tenemos una variable watchProcess para llevar a cabo el seguimiento del proceso watch.

Para iniciar el proceso necesitamos añadir el código que invoca a la API watchPosition(), como se muestra a continuación:

Para detener el proceso necesitamos agregar el código que invoca a la API clearWatch() como se ve a continuación:

Finalmente nos encargamos de mostrar el mapa y los datos adicionales (la posición y la precisión, por ejemplo) de la siguiente manera:

HTML5 Geolocation no dataHTML5 Geolocation no dataHTML5 Geolocation no data

Conclusión

Espero que este tutorial te haya proporcionado una ventaja en el mundo de las APIs de geolocalización. ¡Buena suerte e intenta que tu siguiente proyecto aproveche los beneficios de la geolocalización!.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.