Ir al contenido principal

El API de Geolocalización de Javascript para HTML5 [Parte 1]

API de Geolocalizacion HTML5
Anteriormente hemos hablado de HTML5 a manera general, en este artículo ahondaremos un poco más en una de las tan mencionadas API's que vienen a reforzar este lenguaje: el API de Geolocalización, su uso, beneficios y el por es que se ha vuelto una de las favoritas de los programadores de aplicaciones para móviles.
Si has llegado a este artículo y aún no tienes una idea clara de lo que es HTML5 te recomiendo leer el artículo que escribí al respecto para posteriormente volver aquí...
El saber en dónde te encuentras (o donde se encuentra una persona que está utilizando una aplicación) en ocasiones hace una diferencia enorme (si no lo crees pregúntale a Google al respecto) y hasta ahora ha sido necesario utilizar servicios de terceros para poder obtener dicha información, sin embargo, con HTML5 este tipo de información estará disponible de forma nativa (o casi nativa) al utilizar las bondades del API de Geolocalización.
Al utilizar la geolocalización podrás sugerir a los usuarios un lugar interesante cerca de ellos, encontrar personas a su alrededor que tengan los mismos intereses, podrás averiguar el clima de dicha región y sugerir actividades relativas a él, en fin, la gama de posibilidades está limitada únicamente a nuestra imaginación.
:: ¿Dónde estoy?
Para conocer una ubicación en nuestro planeta necesitamos específicamente de 2 datos: La latitud y la longitud.
La latitud es una medida que especifica la ubicación de un punto de Norte a Sur y la longitud la ubicación Este a Oeste, en un plano cartesiano la latitud estaría en el eje de las Y's y la longitud en el de las X's.
Cuando hablamos de latitud y longitud usualmente podemos toparnos con 2 tipos de representaciones: valores decimales y grados (en ocasiones con minutos y segundos). Cabe mencionar que en dicha API únicamente estaremos utilizando la representación decimal.
:: ¿Cómo es que el navegador averigua mi ubicación?
Existen diversos métodos por los cuales un navegador puede averiguar tu ubicación:
    1. GPS: El sistema de posicionamiento global está soportado por muchos dispositivos móviles actuales y obtiene la ubicación física a partir de datos obtenidos de manera satelital. Así como la posición, por medio del GPS se puede obtener información relativa a la altitud y velocidad de desplazamiento. Una desventaja de este sistema es que sólo funciona al aire libre.
   
    2. Dirección IP: La ubicación basada en direcciones IP utiliza una base de datos externa que le permite ubicar físicamente un dispositivo. La ventaja que proporciona este método es que funciona en cualquier lugar, sin embargo, a menudo la ubicación que se obtendrá de este método es la de el ISP.
   
    3. Triangulación de antenas de red celular (móviles): Este método obtiene la ubicación física de un teléfono celular (usado comúnmente cuando se carece de tecnología GPS) basado en la distancia de alguna o algunas antenas de la red telefónica. Una ventaja que tiene es que funciona tanto en interiores como exteriores, sin embargo, depende de la cantidad de antenas en un radio de distancia corto para que su aproximación sea más exacta.
   
    4. WiFi: La ubicación por red inalámbrica utiliza uno o varios puntos de acceso para triangular la posición. Puede ser bastante exacto y rápido, además de que funciona tanto en interiores como en exteriores, sin embargo, requiere que no estés en movimiento o lo hagas dentro de un radio bastante corto.
   
Derivado de lo anterior puede surgirte una duda... ¿cómo saber qué método está utilizando mi navegador? No se sabe con exactitud. Si bien es cierto que cada navegador puede utilizar cualquiera de las anteriores, de igual manera cada uno utilizará a discreción la que mejor le parezca o priorizar un orden en el cual se tratará de obtener la ubicación.
:: ¿Cómo obtengo entonces la ubicación por medio del API de Geolocalizacion?
Ha llegado la parte bonita del artículo en la cual ahondaremos en el código que te permite saber la ubicación. Para ello, escribiremos un archivo el archivo geoLoc.html utilizando las convenciones para HTML5...
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>¿Donde estoy?</title>
            <script src='geoloc.js'></script>
        </head>
        <body>
            <div id='ubicacion'>
                Aqui estara tu ubicacion
            </div>
        </body>
    </html>

Y posteriormente escribiremos el archivo geoloc.js el cual realiza el trabajo pesado. Vamos a empezar agregando una función llamada 'obtenerUbicacion'...
    function obtenerUbicacion() {
        if (navigator.geolocation) { //1             navigator.geolocation.getCurrentPosition(mostrarUbicacion);//2
        } else {
            alert("Error! El navegador no soporta Geolocalizacion.");//3
        }
    }

        * Lo primero que realizamos es verificar si el navegador soporta el API de Geolocalización (1), en caso de ser afirmativo llamamos al método getCurrentPosition y pasamos mostrarUbicacion como manejador(2) (ahondaremos en esto un poco más adelante). En caso de que el navegador no soporte dicha API mostramos un mensaje indicándolo.
   
Ahora se define el manejador 'mostrarUbicacion'...
    function mostrarUbicacion(posicion){
        .
        .
        .
    }

    * mostrarUbicacion recibe como argumento un objeto con la posición obtenida por el API, mismo que le es enviado por getCurrentPosition. El objeto contiene la latitud, longitud y algunos otros datos relevantes.
   
Dentro de mostrarUbicacion obtenemos la longitud y latitud desde el objeto posicion...
        var latitud = posicion.coords.latitude;
    var longitud = posicion.coords.longitude;

   
Y mostramos dichos datos en el elemento div que definimos para ello...
    var div = document.getElementById("ubicacion");
  div.innerHTML = "Tu estas en: Latitud: " + latitud + ", Longitud: " + longitud;
   
Por último asignamos al evento onload la función obtenerUbicacion al inicio de nuestro archivo js para que la ubicación se muestre en pantalla desde el momento de cargar la página…
    window.onload = obtenerUbicacion;
Para probar su funcionalidad debes ubicar ambos archivos dentro de la carpeta web del servidor (no funciona al ejecutarse directamente con doble clic). En mi caso la ruta de acceso es http://localhost/Geoloc/Geoloc.html .
Al realizar lo anterior, notarás que el navegador te pide autorización para utilizar tu ubicación…
Ejemplo de API de Geolocalizacion HTML5
… y si permites que se utilice lograrás ver tus coordenadas…
Ejemplo de API de Geolocalizacion HTML5
Cabe mencionar que en ocasiones el API tarda algunos segundos en obtener la ubicación.
Hasta aquí llegaremos en esta primera parte. Como ya es costumbre, te dejo el link de descarga del ejemplo realizado en este artículo …
http://min.us/ldkb5o8AYLWwS
La contraseña para descomprimir el archivo es: http://monillo007.blogspot.com
Si el artículo te fue de utilidad puedes compartirlo por medio de Twitter, Facebook o Google+ (botones superiores e inferiores del post), lo cual te agradecería.
Si tienes alguna duda o algo que decir te invito a que dejes tu comentario. Saludox.

Comentarios

  1. Muy interesante el artículo, pero mi pregunta es:
    ¿En qué sistema de proyección están las coordenadas que devuelve el API de geolocalización?, porque supongo que las devuelve en una proyección o devuelve coordenadas geográficas en WGS84 que es lo que utilizan los GPS.
    Por lo demás muy chulo el blog y a ver si me das unos consejillos para mejorar el mio. Échale un vistazo es: www.neogeoweb.blogspot.com

    ResponderBorrar
  2. hola buenos días quisiera saber si puedo tramitar mi ayuda x desempleo tengo mes y medio sin encontrar trabajo

    ResponderBorrar
  3. Hola, gracias por el aporte, sabes tengo una duda referente a este tema. Me han pedido u proyecto para ubicar unos pequeños aparatos que contienen un chip de telefonía (GSM). Mi duda es si puedo rastrearlos creando una aplicación web en HTML5, ya que todos los artículos que he leído hablan de mostrar la ubicación del mismo dispositivo osea yo mismo consultar mi ubicación pero no ver la ubicación de otro dispositivo. De ante mano muchas gracias.

    ResponderBorrar

Publicar un comentario

Este es un espacio abierto, puedes escribir lo que gustes respetando los siguientes puntos:

1.- Lo que escribas esté relacionado con el post, si gustas contactarme puedes hacerlo aqui.

2.- Todo es cuestionable, aunque ten en cuenta que existen formas de hacerlo, evita las agresiones y revisa tu lenguaje antes de publicar un comentario.

3.- Siempre hay tres verdades: tu verdad, mi verdad y la verdad, por lo que opiniones diferentes no necesariamente son equivocadas.

4.- Los comentarios son una forma de discusión abierta, por lo que al publicar uno, implícitamente entras a una discusión, con todo lo que esto representa.

5. Me reservo el derecho de eliminar comentarios que no respeten las condiciones mencionadas anteriormente.

Toma en cuenta que puedes utilizar emoticones en tu comentario, para ver una lista de los disponibles da clic en este enlace.

Entradas más populares de este blog

3 sencillos pasos para tramitar la ayuda por desempleo de la AFORE

¿Tienes dinero ahorrado en tu AFORE y en este momento no estás trabajando o estás trabajando pero no tienes seguro social? Si respondiste sí a la pregunta anterior entonces hay una buena noticia para ti: puedes retirar una parte del dinero que tienes ahorrado. Y lo mejor, es muy sencillo. En este artículo te diré paso a paso qué hacer para obtener ese dinero, sin tecnicismos legales ni nada por el estilo, simple y sencillamente lo que necesitas saber. Paso Número 1: Obtener los últimos 2 estados de cuenta de tu Afore Esto en la mayoría de los casos es sumamente sencillo ya que dichos estados de cuenta llegan directamente al domicilio del ahorrador, si este es tu caso puedes saltar lo restante en este punto y continuar con el paso número 2, en caso contrario sigue leyendo… Si no tienes tus estados de cuenta debes ponerte en contacto con la empresa encargada de administrar tu ahorro para que te los proporcione, normalmente te van a pedir una identificación oficial, comprobante de

Conectar una base de datos en MySQL con NetBeans

NetBeans es una plataforma para el desarrollo de aplicaciones de escritorio usando Java y a un Entorno integrado de desarrollo (IDE) desarrollado usando la Plataforma NetBeans. Si eres un programador y desarrollas tus aplicaciones en Java seguramente necesitarás conectar una base de datos tipo MySQL a este entorno algún día, bueno, si lo necesitas ahora, he aquí una explicación paso a paso de cómo conectar ambas herramientas.

4 extraordinarias aplicaciones espía para Android

Le andas haciendo al James Bond y necesitas grabar video, voz o tomar fotos desde tu dispositivo Android sin ser notado? Aquí 4 excelentes aplicaciones que facilitarán tus hazañas de 007 en menos de lo que canta un gallo.

c606 c6nf5g4r6 e3 tec3ad6 [Como configurar el teclado]

¿Problemas al escribir con el teclado? ¿Tratas de escribir la letra ‘o’ y sale el número ‘6’ o algo por el estilo? La solución puede ser más simple de lo que parece. La solución a tu problema tras el salto...

Conexión, consulta y ejecución de sentencias en MySQL con Java

Anteriormente escribí este mismo artículo pero para bases de datos en Oracle . En este artículo prácticamente me copio y pego para explicar paso a paso cómo realizar la conexión a MySQL en Java, así como la forma de realizar consultas a los registros existentes y ejecutar sentencias de inserción, borrado y actualización de datos. Al final del artículo tendremos una clase que encapsulará todos los procedimientos necesarios para trabajar con la base de datos.