La tecnología de desarrollo de mapas basada en HTML5 ha evolucionado hasta el punto de que las organizaciones se están aprovechando de HTML5 y la tecnología asociada para proporcionar acceso fácil a datos espaciales como nunca antes. Además de ofrecer un acceso público sencillo y fácil a los mapas a través de smartphones, tablets y navegadores de escritorio, las plataformas de desarrollo de mapas web permiten recopilar y editar datos en campo, incluso en entornos remotos y sin conexión.

html5

Fue en 2010 cuando Google, Microsoft y Apple comenzaron a introducir las características de HTML5 en las últimas versiones de sus navegadores, aunque el estándar no estaría completo hasta varios años después.

HTML5 se encontraba en constante evolución, y enfrentándose a fabricantes de navegadores que competían para adoptar sus características, dicha evolución no finalizaría hasta 2015.

Pero… ¿Qué es exactamente HTML5?

HTML5 no es exactamente un nuevo estándar, sólo una colección de las mejoras que se han hecho y harán a HTML 4.01. Todo lo que se codificó en HTML4 sigue funcionando sin modificaciones. Sin embargo, a medida que los navegadores continúan adoptando nuevas características ofrecidas por HTML5, los desarrolladores web están más decididos a usarlo para aprovecharse de las nuevas funcionalidades que no ofrece HTML4.

Algunas de las principales mejoras ofrecidas por HTML5 que los desarrolladores pueden utilizar en los navegadores compatibles son nuevas etiquetas para insertar audio y vídeo en una página web sin depender de complementos como Flash y Quicktime. Y se ha mejorado el soporte para formularios tales como autocompletar como los tipos de usuario y el enfoque automático en los campos para facilitar la entrada de datos.

html52

También existen nuevas API (Interfaces de Programación de Aplicaciones) que encapsulan nuevas funcionalidades como la API de Geolocalización que puede proporcionar la ubicación de un dispositivo conectado a través de su dirección IP, mediante triangulación con hotspots locales wi-fi o GPS.

HTML5 introduce nuevos elementos semánticos que transmiten el propósito del elemento a los desarrolladores y navegadores. Las nuevas etiquetas ayudan a proporcionar tanto estructura como significado a nuestras páginas web.

html5-01

Etiquetas <header> y <hgroup>

El elemento <header> (no debe confundirse con <head>) contiene el encabezado de la sección (un elemento h1-h6 o un elemento hgroup), pero también puede contener otra cosa, como una tabla de contenido, un formulario de búsqueda o cualquier logo relevante.

Un buen lugar para incluir un encabezado es al principio de su página, pero no se limita a un solo elemento de encabezado por página, puede utilizar varios encabezados, cada uno de los cuales se convertirá en <header> para una nueva sección del documento.

html5-02

<header>
<h1>Encabezado principal</h1>
<p>Información extra</p>
</header>

Si sólo tienes un título simple como encabezado (<h1> – <h6>), no necesitas un <hgroup>, pero si tienes un título con subtítulos o líneas de etiqueta (es decir, más de una <h1> – <h6> consecutiva), lo mejor será agrupar en un <hgroup>.

Etiqueta <footer>

La etiqueta de pie de página indica el final de la página o sección (en realidad, la etiqueta <footer> no tiene que estar al final de la página o sección, pero normalmente es donde se coloca). Se puede utilizar para dar información sobre el propietario de la web, información de copyright y enlaces a recursos relacionados.

html5-03

<footer>
<p>Autor</p>
<address>
Contacta con nosotros por <a href=”mailto: formacion@tycgis.com”>email</a>
</address>
</footer>

La etiqueta <nav>

La etiqueta <nav> se utiliza para definir el menú. Se trata del área de la web que contiene enlaces principales a otras áreas de la misma. Es la que define la navegación en la web.

html5-04

<nav>
<ul>
<li><a href=”/index.html”>Inicio</a></li>
<li><a href=”/about.html”>Quiénes somos</a></li>
<li><a href=”/blog.html”>Blog</a></li>
</ul>
</nav>

Etiqueta <section>

Una sección es una parte del contenido que se puede considerar individual. No todo el contenido se presta a ser una sección, así que en caso de duda se utiliza un <div>.

html5-05

<section>
<h1>Encabezado de la sección</h1>
Elementos que se incluyan dentro de la misma
</section>

Etiqueta <article>

La etiqueta <article> es una de las más fáciles de utilizar, tiene sentido y se puede utilizar individualmente fuera de la web (piensa en términos de noticias, blogs, etc).

html5-06

<article>
<h1>Desarrollo de aplicaciones de mapas GIS usando HTML5</h1>
<p>La tecnología de desarrollo de mapas basada en HTML5 ha evolucionado…</p>
</article>

Etiqueta <aside>

La etiqueta <aside> define el contenido relacionado con la web, pero no incluido en el contenido principal. Es lo que se conoce comunmente como barra lateral.

Cuando se utiliza dentro de un artículo, debe estar relacionada con el mismo, y cuando se utiliza fuera de un artículo se usa por que se relaciona con el sitio en su conjunto.

html5-07

<article>
<h1>Desarrollo de aplicaciones de mapas GIS usando HTML5</h1>
<p>La tecnología de desarrollo de mapas basada en HTML5 ha evolucionado…</p>
<aside>
<!– Contiene información adicional relacionada con el artículo–>
<h1>Enlaces de interés</h1>
<d1>
<dt>Enlace 1</dt>
<dd>Enlace 2</dd>
</d1>
</aside>
</article>

Formación de calidad impartida por profesionales

curso HTML5 online

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)

Cargando…

Fuentes:

[1] Developing Web and Mobile Mapping Applications for the ArcGIS Platform using HTML5

[2] Introduction to HTML5 for Web and Mobile GIS Developers

[3] Semantic Markup in HTML5