Evolución de HTML: HTML5

Bienvenidos una semana más al rootie que tenemos preparado para vosotros. Cuando Merkury nos introdujo al HTML, se habló todo el tiempo de un objetivo puramente de presentación de documentos estáticos, textos, imágenes, listas y poco más. En el contexto histórico, la versión 4 de HTML abarcó desde la década de los 90 hasta los 2000 largos, cuando apareció HTML5. Con HTML5, el estándar tiene unos objetivos más amplios cuando una página web se carga en nuestro navegador.

HTML5 establece una sintaxis única para interactuar con todos los elementos que se han cargado en la memoria del ordenador. Esta nueva versión no es reconocida en las versiones antiguas de los navegadores, por lo que recomendamos al usuario actualizarlos a la versión más actual para poder disfrutar de todo el potencial que nos brinda HTML5.

Ventajas que ofrece HTML5

  • Desarrollo y mantenimiento de un código más sencillo e intuitivo.
  • Código de fácil lectura e interpretación.
  • Las páginas pasan de ser documentos estáticos a aplicaciones interactivas.
  • Reconocer JavaScript como un componente dinámico central.
  • Reconocer otras tecnologías dinámicas, como PHP.
razones para desarrollar en html5
razones para desarrollar en html5

Estructura mejorada

En versiones anteriores de HTML era muy común hacer una estructura de páginas mediante tablas o frames. Si bien es bueno saberlo, no voy a entrar en detalle a comentar estos elementos. Las tablas pueden ser muy útiles a la hora de mostrar datos concretos (por ejemplo, un listado de alumnos de una clase), pero es una mala práctica a la hora de maquetar. Eso cambió y hasta hace poco lo común era maquetar una página con divs. Un div es un bloque, que mediante css podemos colocarlo donde queramos y lograr hacer estructuras complejas.

Sin embargo, se estaba abusando del uso de los div. HTML5 introduce una serie de elementos para establecer qué es cada sección de nuestra página, reemplazando en muchas ocasiones a los div para bloques importantes o claramente de un tipo. De esta forma logramos el objetivo antes mencionado: más fácil de leer, estructurar y entender. Además, también es mejor de cara al SEO (Search Engine Optimization) ya que los robots de indexación dan prioridad a zonas concretas de nuestra web. Estos nuevos elementos son:

  • section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
  • article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
  • aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
  • header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
  • nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.
  • footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
estructura html5 de una página
estructura html5 de una página

Nuevas APIs y JavaScript

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geolocalización para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
  • WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
  • WebWorkers. Hilos de ejecución en paralelo.
  • Estándar futuro. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, memoria, puertos USB, cámaras, micrófonos… Muy interesante, pero con numerosas salvedades de seguridad.

Extraído directamente de la wikipedia.

Mejores formularios y tipos de input

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

  • datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
  • number para que el usuario indique un número.
  • range para indicar un rango entre dos números.
  • email para indicar un correo electrónico.
  • url para indicar una dirección web.
  • search para indicar una búsqueda.
  • color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

Ejemplo de formulario:

1

Reproducción multimedia

HTML5 nos ofrece la posibilidad de reproducir un archivo de vídeo o audio sin necesidad de plugins externos, simplemente utilizando la etiqueta <audio>. Veamos un ejemplo de inserción directa de un mp3:

1

 

HTML5 es muy muy extenso y merecedor de bastantes rooties. ¡Aún queda mucho que aprender! Hasta la próxima ^^

One Comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *