Los navegadores modernos, junto al modelo de objetos del documento DOM, están implementando en mayor o menor medida un conjunto de interfaces de programación, las nuevas API de HTML5, con el fin de enriquecer las aplicaciones web programadas con JavaScript. Este lenguaje de scripting ha sido el origen de ECMAScript, un estándar de programación creado especialmente para el entorno del cliente, es decir, interpretado y ejecutado en el navegador del usuario.

JavaScript y las aplicaciones web interactivas

JavaScript se presentó a finales de los años 90, cuando la velocidad de conexión a internet rondaba los 28,8 Kbps. Por aquel entonces, si un usuario rellenaba y enviaba un formulario tenía que esperar mucho tiempo mientras el servidor comprobaba los datos y hasta que respondía indicándole, por ejemplo, que faltaba un campo por cubrir. Había que crear un lenguaje capaz de realizar tareas de esta índole en el propio navegador, agilizando su funcionamiento. En 1995 Brendan Eich encontró la solución, incluyendo con Netscape Navigator 2.0 un lenguaje que originalmente denominó LiveScript.

Netscape Communications Corporation lanzó al mercado su producto rebautizándolo con el nombre de JavaScript, aprovechando el tirón publicitario del término “Java”. Mientras tanto, Microsoft presentaba con Internet Explorer 3 un soporte para JScript, su propia versión de esta tecnología.

A partir de JavaScript, la European Computer Manufacturers Association (ECMA), definió su primer estándar en 1997, ECMA-262. Desde la versión 5.1 de ECMAScript, se alineó totalmente con el estándar ISO 16262 de la ISO (Organización Internacional para la Estandarización). En definitiva, hoy podemos hablar de JavaScript o de ECMAScript indistintamente.

Aplicaciones web interactivas

En las aplicaciones web interactivas el contenido visualizado se obtiene como resultado de la interacción del cliente con una aplicación gestionada por el servidor. La gestión de dicho diálogo cliente/servidor puede tener su inicio en cualquiera de los dos entornos o en ambos.

En la actualidad la mayoría de las aplicaciones web utilizan AJAX (Asynchronous JavaScript And XML),  basado en un objeto JavaScript (XMLHttpRequest), para solicitar y enviar datos al servidor sin tener que recargar la página, ya sean mensajes de correo electrónico, o actualizaciones de estado en redes sociales.

La aparición de las páginas web interactivas participa en el nacimiento de la Web 2.0 o la web social. Desde el lado del cliente, JavaScript y AJAX, junto a lenguajes para el desarrollo del lado del servidor, como PHP o ASP, han hecho posible los CMS (Content Management Systems) como Joomla o WordPress,  permitiéndonos a todos publicar y compartir contenidos en la web, crear comunidades y generar conversaciones utilizando aplicaciones como Twitter y Facebook.

 Interfaces de programación de aplicaciones

Todos los navegadores modernos incluyen, junto a un motor capaz de interpretar JavaScript (ECMAScript engine), un conjunto de interfaces de programación de aplicaciones como el DOM (Document Object Model), y otras API propias de HTML5 que veremos a continuación.

Una interfaz de programación de aplicaciones o API (Application Programming Interface) es un conjunto de funciones y procedimientos que definen cómo invocar desde un programa un servicio que éstos prestan. En otras palabras, una API representa un interfaz de comunicación entre componentes de software.

Como ya sabrás, HTML5 es la última versión de HTML, lenguaje de marcas creado hace 25 años por Tim Berners-Lee como una ampliación de SGML (Standard Generalized Markup Language), en el que está también basado XML, que a su vez ha servido de base para  XHTML.

El World Wide Web Consortium (W3C), junto a la Web Hypertext Application Technology Working Group (WHATWG) son los organismos responsables del desarrollo de HTML5 y sus API . Cuando consultes alguna especificación del W3C observarás unas bandas de colores en el lado superior izquierdo de la página, indicando el estado de desarrollo en que se encuentra cada una.

 Por ejemplo, W3C Editor’sDraft es la fase más temprana de la especificación.

El estado W3C Recomendation es la fase final. Después de muchas revisiones, una especificación alcanza dicho nivel cuando ha recibido el reconocimiento de todos los miembros del W3C, incluido su director.

Las nuevas API de HTML5

Seguro que ya conoces las nuevas etiquetas de HTML5, que aportan mayor significado a algunos elementos del documento (header, footer, section, article,…), y los nuevos tipos de input (email, color, date, range, etc). Sin embargo, esta nueva revisión del lenguaje también incorpora un conjunto de tecnologías adicionales en forma de interfaces de programación para JavaScript, que enriquecen enormemente el desarrollo de aplicaciones web en el entorno del cliente.

Estas son algunas de las API Javascript de HTML5 que podríamos destacar:

•  Interfaces de almacenamiento: permiten almacenar datos en el lado cliente, como Web Storage, IndexedDatabase, Web SQL Database (el equipo de trabajo de esta última ha suspendido su desarrollo en el momento de escribir este artículo).

•  Interfaz para el trabajo con aplicaciones en caché: La interfaz Application Cache permite guardar información en el cliente para acceder a la aplicación sin estar online. 

•  Interfaces multimedia: como MediaStream, cuyo método getUserMedia recoge y crea en el navegador web transmisiones de audio y vídeo desde los periféricos de un ordenador (cámara, micrófono).

 Web Audio es una interfaz que permite reproducir y sintetizar sonidos en aplicaciones web.  Otra API de sonido es Web MIDI. (Además, gracias a los elementos <audio> y <video>, HTML5 introduce soporte integrado para el contenido multimedia).

•  API de Geolocalización: provee de métodos para el posicionamiento geográfico de los dispositivos. 

• Web notifications: esta interfaz permite generar avisos al usuario fuera del contexto de una página web en cuanto se produzca cualquier evento, por ejemplo, la entrada de un nuevo correo electrónico.

•  Los Web Sockets mejoran el HTTP para crear  conexiones bi-direccionales que pueden mantener los datos fluyendo entre el cliente y el servidor.

•  File API: gestiona sistemas de archivos en la Web.

•  Canvas (lienzo en inglés): es un elemento HTML incorporado en HTML5 que permite generar dinámicamente gráficos 2D, juegos, animaciones y composición de imágenes.

•  WebGL: una API para mostrar dibujos 3D en el navegador Web sin necesidad de plugins. En la actualidad es soportado principalmente en Internet Explorer (versión 11), Google Chrome y Mozilla Firefox.

Tal y como estamos viendo existe una larga lista de interfaces en distintos grados de desarrollo, algunas sólo soportadas por determinados navegadores.

Veamos un ejemplo de implementación de la interfaz de geolocalización. por medio del método navigator.geolocation.getCurrentPosition(), el siguiente código obtiene las coordenadas, latitud y longitud del navegador del usuario:

En conclusión, HTML5 añade nuevas posibilidades a la programación del lado del cliente, pues aporta un gran número de métodos para el almacenamiento, la gestión de archivos, la reproducción de audio y vídeo, la geolocalización o la generación dinámica de imágenes y animaciones entre otras.

Debemos tener en cuenta que estas nuevas tecnologías no están siendo soportadas de igual modo por los distintos navegadores, y su especificación oficial se encuentra en diferentes fases de madurez.

Si tienes alguna pregunta o sugerencia deja una respuesta, muchas gracias por compartir y hasta la próxima.