Vídeo APIs Javascript de HTML5

  • Por
Qué son las API de HTML5, qué posibilidades nos ofrecen y un par de ejemplos sobre cómo se pueden invocar esas API Javascript para implementar funcionalidades de navegadores y sitios modernos.

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.

Autor

Reinaldo Aguilera

Apasionado del HTML5 y los estándares abiertos para la web, Javascript y PHP. Organizador de los Google Developer Group de Vigo, Betabeers Galicia y los #devIO de DesarrolloWeb.com.

Compartir

Comentarios

Mauro Ramon

22/4/2014
Gracias. Respecto a la clase 5...
... gracias por los videos, En el transcurso del video 5 (o cómo hacer que HTML5 corra en browsers viejos :), surgió en la charla la mención de reunir todos los programas, webs y recursos en un post para poder acceder a esas herramientas.
Desde ya agradecidos si se acuerdan de ello.
Los videos y los ponentes estuvieron muy a la altura, y de seguro el curso es más que recomendable
Muchas gracias por permitirnos a el resto a ver un resumen de todo.
Saludos desde Mendoza, Argentina.
Mauro Ramon.

Mauro Ramon

23/4/2014
(una espera)
Hola. Nada.. un reminder pues las APIs son realmente importantes y un lío. Pero útiles.
Para seguir mejor el video... estaría bueno contar con las diapos.
Eso nomás. Un abrazo y el curso, muy piola (muy bueno). Y con la profundidad como para dejarte interesado en mucho más. Bien!
Saludos de Mendoza.

Eduardo Federico

23/4/2014
Pedidos de Ejemplos - Clase 5
Muchísimas gracias por esta serie de videos sobre html5.
Puedo pedir que se publiquen los ejemplos de geolocalización. Me serian muy utiles

Jhonatan

24/4/2014
Felicitaciones
Realmente es un trabajo estupendo el que realizan, compartiendo todo ese conocimiento con nosotros de verdad muchas gracias desde colombia.

juan perez

29/4/2014
Clase 5
por favor coloquen la clase 5

AdnBC

06/5/2014
Petición del código de la clase
¿Podríais, por favor, colgar en esta página los archivos o el código usado en esta clase?

Agradezco enormemente el trabajo que estáis haciendo y publicando gratuitamente, ya que no me puedo permitir pagar los cursos de escuelaIT, aunque son precios asequibles y con buenos descuentos.

Gracias de antemano.
Un saludo.
Adrián: estudiante de "FPGS Desarrollo de aplicaciones multimedia".

MH

21/3/2016
Archivos de la sesión
Habría alguna posibilidad de que subieran los archivos relacionados con esta sesión del curso? Gracias.

Diego

18/6/2016
Los archivos del curso "tan prometidos" ....
"Estamos esperando los ejemplos y diapositivas usadas por Reinaldo, en cuanto las tengamos las publicaremos aquí mismo. "

En el video Nro 4 del curso varias veces se afirma que se entregaran los ejemplos y diapositivas.

Poco serio....