Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Cap 1

    Cargado por

    Mario Boeta
    7 vistas15 páginas

    Título original

    cap1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    7 vistas15 páginas

    Cap 1

    Cargado por

    Mario Boeta

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 15

    DESARROLLO WEB CON HTML 5

    Francisco J. Arce Anguiano


    Capítulo 1
    API de Geolocalización
    1. API de Geolocalización
    Esta interfaz es una de las mejores, está instalada en los principales
    navegadores del Mercado:

    Esta herramienta depende mucho del navegador y del dispositivo en que se


    ejecute. Si cuenta con un GPS, como en el caso de los teléfonos inteligentes o
    la mayoría de las tabletas, su ubicación será más exacta. Si ejecuta su
    aplicación desde una computadora de escritorio, por lo general la ubicación
    es calculada entre varios nodos de la red, por lo que puede ser más inexacta.
    También se necesitará de un servicio de terceros, en este caso el Google
    Maps u otro similar.
    1.1 Validar si nuestro navegador tiene el API de
    Geolocalización
    La primera actividad que necesitamos realizar es validar que nuestro navegador
    cuente con ella. Incluso podemos utilizar herramientas como Modernizr.com, la cual
    nos indicará si tenemos la API o no. Abra una página en blanco con las etiquetas
    necesarias para HTML5, si su codificador no genera en forma automática estas
    etiquetas.
    Guarde su ejercicio como geolocalzacion01.html y cambie su título a “Geolocalización
    Coordenadas”. En el caso de esta API la validaremos con el objeto de JavaScript navigator. Abra
    sus etiquetas <script> para escribir el código JavaScript en la sección de <head>. Nuestra
    validación será muy sencilla, simplemente preguntaremos si el objeto contiene la instrucción
    “geolocation”. Si la respuesta es positiva, procedemos a preguntarle al usuario si acepta que
    obtengamos sus coordenadas, de lo contrario enviaremos un mensaje de que el navegador no
    soporta la API correspondiente, como se muestra en el siguiente listado:

    1 <!doctype html>
    2 <html>
    3 <head>
    4 <meta charset=”UTF-8”>
    5 <title>Geolocalización Coordenadas</title>
    6 <script>
    7 if(navigator.geolocation){
    8 alert(“Tu navegador si soporta la Geolocalización”);
    9 } else {
    10 alert(“Tu navegador NO soporta la Geolocalización”);
    11 }
    12 </script>
    13 </head>
    14 <body>
    15 </body>
    16 </html>
    Una vez que vea el resultado, modifique la línea 8 de su listado (el número de
    línea puede variar dependiendo de su editor) y escriba la instrucción
    getCurrentPosition() como se muestra en el siguiente listado:
     Es obligatorio llamar a este método desde los objetos
    navigator.geolocation. Como puede observar, dentro de los paréntesis
    tenemos una función de call-back. Este método lanza una ventana que
    solicita la autorización del usuario para darle la localización a nuestra
    aplicación.
     Antes de seguir desarrollando nuestra sencilla aplicación, vamos a agregar
    las etiquetas HTML con las cuales lanzaremos la solicitud de
    geolocalización a la computadora o dispositivo.
     Pruebe el archivo anterior en todos los navegadores que tenga instalados
    y verifique su funcionamiento. Una vez que tenemos el esquema básico de
    nuestra sencilla aplicación, procederemos a obtener las coordenadas y las
    vaciaremos en variables llamadas lt, de latitud, e ln de longitud. Ambas
    coordenadas se dan en referencia al meridiano de Greenwich.
     Después de recibir un parámetro llamado posicion dentro de la función
    muestraCoordenadas(). Estos parámetros (veremos otros más adelante) se
    llaman event objects y poseen información valiosa del evento, en este
    caso dentro del objeto se almacenan las coordenadas que el navegador
    calculó. Dentro de este objeto tendremos otro llamado coords, y dentro
    de éste, dos propiedades llamadas longitude y latitude.

     Aquí no tenemos la representación visual de las coordenadas, sólo dos


    números muy largos. Para obtener un mapa necesitamos llamar a una
    herramienta de terceros (HTML5 no la proporciona). La herramienta más
    utilizada son los mapas de Google, pero se pueden utilizar otras.
    1.2 Control de los errores en la API de geolocalización
    Una buena API siempre nos indicará cuando las cosas no hayan salido bien.
    Así que con la geolocalización podremos detectar los siguientes estados:
    Función call-back
    Función para manejar las excepciones de la Geolocalización
    1.3 Desplegar un mapa de Google
    con las coordenadas de HTML5

    Se había comentado que para desplegar un mapa necesitaremos el servicio


    de un tercero, el más utilizado es el de Google, pero hay varios más. Para este
    servicio debemos llamar:
    http://maps.googleapis.com/maps/api/staticmap
    Y tenemos que pasar los parámetros:
    center: con la longitud y la latitud.
    zoom: acercamiento del mapa
    size: tamaño del mapa en pixeles
    sensor: true, se utiliza el GSP, false, no lo utiliza. Este parámetro ya no es
    requerido.

     Así que se necesita añadir una división vacía que tenga como identificador
    mapa para vaciar ahí la imagen del mapa, y en la función
    muestraCoordenadas() escribir la línea que llama al mapa.

     Ejecute el <script> en todos los navegadores que tenga.

    También podría gustarte