En un post
anterior había escrito sobre
HTML5, la estructura básica de un documento y algunas características. Además de algunos sitios de interés.
Este lenguaje de hipertexto (en su quinta versión) nos permite incluir etiquetas para incrustar imágenes "dinámicas", manipulación de audio y vídeo, entre otras cosas más. Se considera el asesino de Flash (Adobe Flash), pues pretende que el desarrollador abandone esa tecnología.
Antes del auge de las apps, tablets, iphone, android, etc. Los programadores y diseñadores nos emocionaba(o aterraba) aprender a crear animaciones usando Flash (en ese entonces propiedad de Macromedia), el manejo de líneas de tiempo, fotogramas, efectos, etc. La llegada de
HTML5 prácticamente acabo con la necesidad de usar esta tecnología. Depender de la instalación de plugins para reproducir archivos .swf era bastante tedioso para los usuarios (además de que algunos sitios se volvían muy "pesados" en cargar).
¿Qué encontraremos en HTML5?
La capacidad de crear y manipular gráficos, mejor manejo a formularios, mejorar el intercambio de información entre aplicaciones web (ej. metadatos), y conocer la ubicación del usuario. Entre otras cosas más.
1. En este ejemplo haremos uso de la API de Geolocalización.
Creamos un archivo js llamado
geolocalizar.js, escribimos:
/*las opciones*/
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
/*método para mostrar errores*/
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
/*método que define la latitud y longitud del origen*/
function origen(position){
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
}
/*método para activar la golocalización
recibe parámetros de opción,error y la posición del origen
*/
function activa_origen(){
navigator.geolocation.getCurrentPosition(origen,error,options);
}
Tenemos ahora una página con formato HTML5 , la llamaremos
localiza.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primer página HTML5</title>
<script src="geolocalizar.js"></script>
</head>
<body>
<header><h1>Geolocalización</h1></header>
<section id="contenedor">
<article>
CodemonkeyJunior
</article>
<aside>
<!-- Aqui esta el botón que ejecuta el script -->
<button onclick="javascript:activa_origen();">Mostrar Posición</button>
</aside>
<article></article>
</section>
<footer>@codemonkeyjunior</footer>
</body>
</hml>
Links
https://whatwg.org/
http://www.w3schools.com/
https://es.wikipedia.org/wiki/HTML5
