Esta es la 4ª clase del Curso Gratuito de HTML5 que estamos impartiendo en EscuelaIT, dedicada a las API de HTML5 y cómo Javascript nos puede ayudar facilitando la incorporación de funcionalidades avanzadas en un sitio web. Fue impartida por Reinaldo Aguilera @reialguilera.

A lo largo de las clases anteriores de este curso hemos podido conocer dos de los tres pilares fundamentales de HTML5, que es el propio lenguaje HTML y CSS. Pero no podemos hablar de HTML5 sin darle la importancia que se merece a Javascript, ya que este lenguaje se ha introducido de lleno en el "core" (núcleo) de los navegadores y hoy en día nos ofrece gracias a los motores Javascript rendimiento y posibilidades similares a los lenguajes de propósito general.

Javascript es la estrella de HTML5, ya que la mayoría de las novedades que han aparecido en esta nueva oleada de estándares abiertos está basada en Javascript y lo que se llaman las API de HTML5. En esta clase haremos un rápido recorrido a las distintas API disponibles, así como realizaremos un par de ejemplos prácticos, con el API de geolocalización y con el API de audio/vídeo.

Al final de este artículo podrás ver el vídeo de la clase impartida en directo por videoconferencia. Antes te ofrecemos un rápido resumen.

Lenguajes predeterminados en HTML5

Antes de comenzar a entrar de lleno en materia se explicaron a manera de repaso algunas de las características de HTML5, para hacer luego hincapié en los lenguajes predeterminados en esta versión del lenguaje.

Antes para incluir estilos CSS usábamos una etiqueta como esta:

<link type="text/css" rel="stylesheet" href="estilos.css">

Ahora ya se entiende que el lenguaje para aplicar estilos a la página va a ser siempre CSS, por lo que la nueva forma de la etiqueta sería esta:

<link rel="stylesheet" href="estilos.css">

Javascript como lenguaje de scripting ha tenido un similar tratamiento. Antes en HTML4 especificábamos el lenguaje que se iba a usar.

<script type="text/javascript" src="mi_javascript.js"></script>

Pero ahora con HTML5 se define de manera predeterminada Javascript como el lenguaje para usar en el scripting de una página web, por lo que no necesitamos especificarlo y nos quedaría la etiqueta de esta manera:

<script src="mi_javascript.js"></script>

Aclaramos que ningún navegador te va a mostrar un error si indicas los lenguajes predeterminados, simplemente te los puedes ahorrar. Quizás sea una diferencia sutil a la que no se le deba dar más importancia, pero es interesante para entender cómo estos lenguajes forman parte íntima del HTML5.

APIs HTML5 en Javascript

Luego Reinaldo realiza un rápido pero interesante recorrido a las tecnologías HTML5 y donde vemos que la mayoría de ellas son nuevas características en las que necesitamos Javascript como lenguaje de programación.

Más del 70% de las nuevas características de HTML5 son lo que llamamos las API. En plan general, para que nos entendamos, un API es un conjunto de funciones ya listas que nos ofrece un sistema. Es algo relacionado con cualquier lenguaje de programación, no solo con HTML5 y Javascript. Esas funciones nos sirven para operar con diversos procesos útiles que vamos a necesitar para interactuar con cualquier tipo de sistema.

En el contexto de un navegador existen muchas utilidades, las cuales que podemos invocar por medio de APIs HTML5, no solo para acceder a los elementos de una página, sino también a sus periféricos. Para todo ello se han desarrollado APIs en Javascript que nos permiten acceder a sistemas de almacenamiento, geolocalización, comunicación con servicios web, perifeféricos como la cámara, elementos multimedia y un largo etc.

Ejemplos de desarrollo de APIs HTML5

En la segunda mitad de la clase Reinaldo nos ofreció unos cuantos ejemplos sobre trabajo con Javascript aprovechando las características de HTML5, centradas en las API de Geolocalización y Multimedia (Audio/Vídeo).

En geolocalización vimos cómo podemos preguntar al navegador la posición geográfica donde se encuentra el usuario. Nos ofrece una lista de datos, como latitud, longitud y altitud, que luego podemos usar para cualquier cosa, como ofrecerle servicios cercanos a donde se encuentra ese usuario. En el ejemplo que se mostró en la clase vimos cómo esa información puede ayudarnos a mostrar un mapa de Google Maps donde podamos localizar al usuario.

Luego se vio un ejemplo sobre cómo se insertan elementos de audio y vídeo en una web con HTML5 y luego cómo podemos controlar la reproducción de los mismos por medio de controles personalizados, a los que aplicamos funcionalidad usando el API de HTML5 para multimedia. Así podemos colocar cualquier botón (o enlace) creado por nosotros y que nos sirva, por ejemplo, para reproducir o pausar un audio. O cómo podemos extraer información adicional de un vídeo para mostrar asuntos diversos, como el segundo en el que estamos reproduciendo en cada instante.

Ejemplos realizados diapositivas y vídeo de la clase

Estamos esperando los ejemplos y diapositivas usadas por Reinaldo, en cuanto las tengamos las publicaremos aquí mismo.

El vídeo de la clase lo puedes ver ya mismo en Youtube, a continuación.