11. Curso HTML5. Novedades. Geolocalización
- Vamos a finalizar con nuestro curso de html . Después de ver en la entrada anterior las etiquetas vídeo y canvas. En este capítulo cerraremos nuestro curso hablando sobre la geolocalización.
- Con esta nueva API podemos obtener la posición y los cambios producidos en tiempo real, de los visitantes de nuestra página. Sin embargo dado que ésto puede comprometer la privacidad del usuario, éste debe de dar siempre su permiso para poder obtenerla.
- A parte de los ejemplos que vamos a ver en nuestra entrada podéis practicar con los ejemplos de la página https://www.w3schools.com/html/html5_geolocation.asp .
- Aquí os dejo un vídeo con ejemplos de uso de esta API:
- Os dejo también el código html visto en el vídeo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pruebas</title>
<link href="StyleSheet1.css" rel="stylesheet" />
<script type="text/javascript">
function dibuja() {
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
/*cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.moveTo(10, 10);
cxt.lineTo(150, 150);
cxt.lineTo(10, 50);
cxt.stroke();*/
var grd = cxt.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0,'#FF0000');
grd.addColorStop(1,'#00FF00');
cxt.fillStyle = grd;
cxt.fillRect(0,0,175,50);
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
alert( "Latitud: " + position.coords.latitude +
" Longitud: " + position.coords.longitude);
}
</script>
</head>
<body>
<form >
<article>
<header>
<h1>Mi primera página html</h1>
</header>
</article>
<nav>
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</nav>
<article class="pagina">
<section class="contenedor">
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
<figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
</section>
<aside>
<input type="search" placeholder="Busqueda" />
<input type="email" placeholder="email" />
<input type="url" placeholder="url" />
<input type="tel" placeholder="telefono" /><br />
<input type="number" placeholder="numero" min="0" max="10" />
<input type="range" name="nunmero" id="numero" min="0" max="100" step="25" /> <br />
<input type="date" name="fecha" id="fecha" />
<input type="week" name="semana" id="semana" />
<input type="month" name="mes" id="mes" /> <br /><br />
<input type="time" name="hora" id="hora" checked />
<input type="datetime" name="fechahora" id="fechahora" />
<input type="color" name="micolor" id="micolor" /><br /><br />
<progress value="20" max="100" >60%</progress>
<meter min="0" max="100" value="75" ></meter>
<audio controls="controls" class="audio">
<source src="Rock_Intro_4.mp3" type="audiompeg" />
</audio><br /><br />
<video controls="controls" height="300" width="300" muted>
<source src="Suscribete.mp4" type="video/mp4" />
</video><br />
<canvas id="myCanvas" >
</canvas>
<input type="submit" value="Enviar" onclick="getLocation();" />
</aside>
</article>
<article class="pagina">
<section class="contenedor">
<br />
<mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
</section>
<aside>
<p>YYYYYYYYYYYYYYYy</p>
</aside>
</article>
<article>
<footer>
<ul>
<li><a href="#">Derechos de uso</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</footer>
</article>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario