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

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…

… y si permites que se utilice lograrás ver tus coordenadas…

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.