Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 217

Visitas el mes pasado: 281

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




HTML 5 (VIII)

Geolocalización

imagen html5

Definición.

En HTML5 podemos obtener la posición geográfca del usuario. Sin embargo dado que ésto puede comprometer la privacidad del usuario, éste debe de dar siempre su permiso para poder obtenerla.

La mayoría de los navegadores modernos soportan la geolocalización, si bien es posible que pueda haber algún fallo de disponibilidad en encontrar el sistema de localización.

La geolocalización da una situación mucho más exacta si el usuario se conecta con algún dispositivo con GPS, el cual será usado por el navegador para la localización. Caso de no haber dispositivo GPS la localización viene dada por la red de telefonía o por la configuración del ordenador.


Obtener la geolocalización.

Para obtener la geolocalización, se crea un nuevo objeto javascript que depende del navegador, el objeto navigator.geolocation. Este objeto tiene a su vez una serie de métodos que nos permitirán manejar la localización.

Haremos aquí un ejemplo para ver como funciona la geolocalizacion. Lo primero que haremos será comprobar si el navegador soporta la geolocalización, para ello pondremos el siguiente script:

function geoloc() {
d=document.getElementById("demo");
if (navigator.geolocation){
   d.innerHTML="<p>Tu dispositivo soporta la geolocalización.</p>";
   }
else {
   d.innerHTML="<p>Lo sentimos, tu dispositivo no admite la geolocaización.</p>";
   }
}

Ahora para que esto funcione debemos poner el código en HTML que llame a la función y devuelva el resultado:

<div id="geo1">
  <button onclick="geoloc()">Ver geolocalización.</button><br/>
  <div id="demo"></div>
</div>


El resultado lo vemos aquí a la derecha.

De momento hemos comprobado que la geolocalización está disponible. ahora nos falta encontrar las coordenadas del usuario. Para ello se utiliza el método getCurrentPosition(showPosition), el cual lo aplicamos sobre el elemento geolocation.

Como argumento se le pasa una funcion showPosition que tenemos que crear después.

En esta función ponemos un argumento showPosition(position), que es con el que obtenemos las coordenadas mediante las propiedades: coords.latitude y coords.longitude.

Veamos todo esto ampliando el código anterior para obtener las coordenadas del usuario (en azul el código nuevo)

function geoloc() {
  d=document.getElementById("demo");
  if (navigator.geolocation){
    d.innerHTML="<p>Tu dispositivo soporta la geolocalización.</p>";
    navigator.geolocation.getCurrentPosition(showPosition);
  }
else {
    d.innerHTML="<p>Lo sentimos, tu dispositivo no admite la geolocaización.</p>";
  }
}
function showPosition(position){
  latitud=position.coords.latitude;
  longitud=position.coords.longitude;
  d.innerHTML+="<p>Latitud: "+latitud+"</p>";
  d.innerHTML+="<p>Longitud: "+longitud+"</p>";
}


Vemos el resutado aquí ala derecha. Ahora al pulsar sobre el botón, aparece un cuadro donde pregunta al usuario si quiere compartir su localización. En caso que responda afirmativo se nos muestra la longitud y latidud del lugar donde está el usuario.

Si el usuario nos da su autorización, y las coordenadas no se muestran es porque se ha producido algún tipo de error. Podemos indicar el error producido mediante el control de errores.


control de errores

Si por algún motivo no se pueden obtener las coordenadas, podemos indicar el motivo mediante un control de errores. Para ello en el método getCurrentPosition añadimos un segundo argumento:

navigator.geolocation.getCurrentPosition(showPosition,showError)

Con este segundo argumento crearemos una función showError(error). el argumento de esta función nos dirá cual es el error que se ha producido.

Ampliamos el código del ejemplo anterior para poder indicar los errores:

function geoloc() {
  d=document.getElementById("demo");
  if (navigator.geolocation){
    d.innerHTML="<p>Tu dispositivo soporta la geolocalización.</p>";
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
else {
   d.innerHTML="<p>Lo sentimos, tu dispositivo no admite la geolocaización.</p>";
   }
}
function showPosition(position){
  latitud=position.coords.latitude;
	longitud=position.coords.longitude;
	d.innerHTML+="<p>Latitud: "+latitud+"</p>";
	d.innerHTML+="<p>Longitud: "+longitud+"</p>";
}
function showError(error){
  switch(error.code) {
    case error.PERMISSION_DENIED:
      d.innerHTML+="<p>El usuario ha denegado el permiso a la localización.</p>"
      break;
    case error.POSITION_UNAVAILABLE:
      d.innerHTML+="<p>La información de la localización no está disponible.</p>"
      break;
    case error.TIMEOUT:
      d.innerHTML+="<p>El tiempo de espera para buscar la localización ha expirado.</p>"
      break;
    case error.UNKNOWN_ERROR:
      d.innerHTML+="<p>Ha ocurrido un error desconocido.</p>"
      break;
    }
  }


Las nuevas líneas de código las hemos destacado en color azul. Aquí a la derecha puedes ver el resultado.

En la función showError mediante el argumento error obtenemos el posible error que pueda producirse. Para localizarlo utilizamos una estructura switch en la que pasamos como variable error.code. los tipos de error que podemos obtener, y que indicamos como posibles opciones son:


Localización en un mapa

Para ver la localización en un mapa necesitamos tener acceso a un servicio de mapas que utilicen la latitud y la longitud. Lo más cómodo es utilizar el servicio de Google Maps, de acceso abierto y gratuito.

Para ello una vez que hemos obtenido la latitud y la longitud, accedemos al servicio de mapas. El código será como el siguiente:

function showPosition(position) {
   lat=position.coords.latitude; //obtenemos la latitud
   lon=position.coords.longitude; //obtenemos la longitud
   latlon=lat+","+lon;  //dato latitud,longitud para pasar a Google Maps.
   //acceso a la url del mapa de google maps:
   var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
      +latlon+"&zoom=14&size=400x300&sensor=false";
   //mostrar el mapa en un elemento:
   document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}


Una vez hallada la longitud y la latidud buscamos el mapa en Google Maps y lo ponemos en nuestra página.

El código que mandamos a Google Maps es siempre el mismo. En la variable latlon le mandamos la longitud y la latitud, separados por una coma. Sin embargo podemos variar algunos datos. Podemos ampliar o reducir el mapa mediante el dato &zoom, a mayor número el contenido del mapa se reduce. También podemos indicar el tamaño del mapa que queremos obtener (en pixeles) en el dato &size

En el ejemplo anterior hemos añadido también el mapa. Este quedará como el que ves aquí a la derecha (siempre que se tenga acceso a la geolocalización). para ello hemos añadido unas líneas de código en javascript para obtener el mapa. El código completo es el siguiente:

function geoloc4() {
  d=document.getElementById("demo");
  if (navigator.geolocation){
    d.innerHTML="<p>Tu dispositivo soporta la geolocalización.</p>";
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
else {
   d.innerHTML="<p>Lo sentimos, tu dispositivo no admite la geolocaización.</p>";
   }
}
function showPosition(position){
  latitud=position.coords.latitude;
  longitud=position.coords.longitude;
  d.innerHTML+="<p>Latitud: "+latitud+"</p>";
  d.innerHTML+="<p>Longitud: "+longitud+"</p>";
  latlon=latitud+","+longitud;
  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
     +latlon+"&zoom=14&size=350x250&sensor=false";
  d.innerHTML+="<img src='"+img_url+"'>";
  }
function showError(error){
  switch(error.code) {
    case error.PERMISSION_DENIED:
      d.innerHTML+="<p>El usuario ha denegado el permiso a la localización.</p>"
      break;
    case error.POSITION_UNAVAILABLE:
      d.innerHTML+="<p>La información de la localización no está disponible.</p>"
      break;
    case error.TIMEOUT:
      d.innerHTML+="<p>El tiempo de espera para buscar la localización ha expirado.</p>"
      break;
    case error.UNKNOWN_ERROR:
      d.innerHTML+="<p>Ha ocurrido un error desconocido.</p>"
      break;
    }
  }

En color azul están destacadas las líneas nuevas. En éstas mandamos la latitud y longitud a Google Maps para obtener el mapa y lo insertamos en la página.


Obtener más información.

Mediante el argumento position de la función showPosition hemos obtenido la latidud y la longitud. Sin embargo pueden obtenerse también otros datos, siempre que éstos estén disponibles.

En la función show position(position), podemos obtener también los siguientes datos:

Algunos de estos datos (como la dirección y la velocidad) sólo están disponibles en dispositivos con GPS.

Hemos hecho una página de prueba en la que podemos ver el resultado de estos datos. El código como en la anterior, pero ampliamos con estos datos y los sacamos en pantalla. Podemos verla aquí:

Geolocalización: datos






En la próxima página veremos una nueva aplicación de HTML que es el almacenamiento de datos.

Almacenamiento local



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com