Capitulo 4 Javascript – 3

Si cuenta con alguna experiencia anterior en programación, o simplemente siguió este capítulo desde el comienzo, le resultará fácil reconocer la cantidad de código necesario para realizar tareas sencillas. Ahora imagine todo el trabajo que debería hacer para construir un sistema de bases de datos desde cero, o generar gráficos complejos en la pantalla, o crear una aplicación para manipulación de imágenes, por nombrar unos pocos.

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento. Y por la misma razón que lenguajes de programación profesionales poseen librerías para crear elementos gráficos, motores 3D para video juegos o interfaces para acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a lidiar con actividades complejas.

HTML5 introduce varias APIs (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerías desde simple código Javascript. El potencial de estas incorporaciones es tan importante que pronto se convertirán en nuestro objeto de estudio. Veamos rápidamente sus características para obtener una perspectiva de lo que nos encontraremos en el resto del libro.

La siguiente es solo una introducción, más adelante estudiaremos cada una de estas tecnologías con mayor profundidad.

Canvas es una API gráfica que provee una básica pero poderosa superficie de dibujo. Esta es la más maravillosa y prometedora API de todas. La posibilidad de generar e imprimir gráficos en pantalla, crear animaciones o manipular imágenes y videos (combinado con la funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar.

Canvas genera una imagen con pixeles que son creados y manipulados por funciones y métodos provistos específicamente para este propósito.

Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ahora, con unas pocas líneas de código, podemos hacer que un elemento esté disponible para ser arrastrado y soltado dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo gráficos sino además textos, enlaces, archivos o datos en general.

Geolocation es utilizada para establecer la ubicación física del dispositivo usado para acceder a la aplicación. Existen varios métodos para acceder a esta información, desde señales de red hasta el Sistema de Posicionamiento Global (GPS). Los valores retornados incluyen latitud y longitud, posibilitando la integración de esta API con otras como Google Maps, por ejemplo, o acceder a información de localización específica para la construcción de aplicaciones prácticas que trabajen en tiempo real.

Dos APIs fueron creadas con propósitos de almacenamiento de datos: Web Storage e Indexed Database. Básicamente, estas APIs transfieren la responsabilidad por el almacenamiento de datos del servidor al ordenador del usuario, pero en el caso de Web Storage y su atributo sessionStorage, esta incorporación también incrementa el nivel de control y la eficiencia de las aplicaciones web.

Web Storage contiene dos importantes atributos que son a veces considerados APIs por sí mismos: sessionStorage y localStorage.

El atributo sessionStorage es responsable por mantener consistencia sobre la duración de la sesión de una página web y preservar información temporal como el contenido de un carro de compras, asegurando los datos en caso de accidente o mal uso (cuando la aplicación es abierta en una segunda ventana, por ejemplo).

Por el otro lado, el atributo localStorage nos permite grabar contenidos extensos de información en el ordenador del usuario. La información almacenada es persistente y no expira, excepto por razones de seguridad.

Ambos atributos, sessionStorage y localStorage reemplazan la anterior función del sistema de cookies y fueron creados para superar sus limitaciones.

La segunda API, agrupada dentro de las APIs de almacenamiento pero independiente del resto, es Indexed Database. La función elemental de un sistema de base de datos es la de almacenar información indexada. Web Storage API trabaja sobre el almacenamiento de grandes o pequeñas cantidades de información, datos temporales o permanentes, pero no datos estructurados. Esta es una posibilidad solo disponible para sistemas de base de datos y la razón de la existencia de esta API.

Indexed Database es una sustitución de la API Web SQL Database. Debido a desacuerdos acerca del estándar apropiado a utilizar, ninguna de estas dos APIs ha sido completamente adoptada. De hecho, en este mismo momento, el desarrollo de Web SQL Database API (la cual había sido recibida con brazos abiertos al comienzo), ha sido cancelado.

Debido a que la API Indexed Database, también conocida como IndexedDB, luce más prometedora y tiene el apoyo de Microsoft, los desarrolladores de Firefox y Google, será nuestra opción para este libro. Sin embargo, tenga siempre presente que en este momento nuevas implementaciones de SQL están siendo consideradas y la situación podría cambiar en el futuro cercano.

Bajo el título de File, HTML5 ofrece varias APIs destinadas a operar con archivos. En este momento existen tres disponibles: File, File: Directories & System, y File: Writer.

Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el ordenador del usuario.

Algunas API tienen un denominador común que nos permite agruparlas juntas. Este es el caso para XMLHttpRequest Level 2, Cross Document Messaging, y Web Sockets.

Internet ha estado siempre relacionado con comunicaciones, por supuesto, pero algunos asuntos no resueltos hacían el proceso complicado y en ocasiones imposible. Tres problemas específicos fueron abordados en HTML5: la API utilizada para la creación de aplicaciones Ajax no estaba completa y era complicada de implementar a través de distintos navegadores, la comunicación entre aplicaciones no relacionadas era no existía, y no había forma de establecer una comunicación bidireccional efectiva para acceder a información en el servidor en tiempo real.

El primer problema fue resuelto con el desarrollo de XMLHttpRequest Level 2. XMLHttpRequest fue la API usada por mucho tiempo para crear aplicaciones Ajax, códigos que acceden al servidor sin recargar la página web. El nivel 2 de esta API incorpora nuevos eventos, provee más funcionalidad (con eventos que permiten hacer un seguimiento del proceso), portabilidad (la API es ahora estándar), y accesibilidad (usando solicitudes cruzadas, desde un dominio a otro).

La solución para el segundo problema fue la creación de Cross Document Messaging. Esta API ayuda a los desarrolladores a superar las limitaciones existentes para comunicar diferentes cuadros y ventanas entre sí. Ahora una comunicación segura a través de diferentes aplicaciones es ofrecida por esta API utilizando mensajes.

La solución para el último de los problemas listados anteriormente es Web Sockets. Su propósito es proveer las herramientas necesarias para la creación de aplicaciones de red que trabajan en tiempo real (por ejemplo, salas de chat). La API les permite a las aplicaciones obtener y enviar información al servidor en períodos cortos de tiempo, volviendo posible las aplicaciones en tiempo real para la web.

Esta es una API única que expande Javascript a un nuevo nivel. Este lenguaje no es un lenguaje multitarea, lo que significa que solo puede hacerse cargo de una sola tarea a la vez. Web Workers provee la posibilidad de procesar código detrás de escena (ejecutado aparte del resto), sin interferir con la actividad en la página web y del código principal. Gracias a esta API Javascript ahora puede ejecutar múltiples tareas al mismo tiempo.

Ajax cambió la forma en la que los usuarios interactúan con sitios y aplicaciones web. Y los navegadores no estaban preparados para esta situación. History fue implementada para adaptar las aplicaciones modernas a la forma en que los navegadores hacen seguimiento de la actividad del usuario. Esta API incorpora técnicas para generar artificialmente URLs por cada paso en el proceso, ofreciendo la posibilidad de retorna a estados previos de la aplicación utilizando procedimientos estándar de navegación.

Incluso hoy día, con acceso a Internet en cada lugar que vamos, quedar desconectado es aún posible. Dispositivos portátiles se encuentran en todas partes, pero no la señal para establecer comunicación. Y los ordenadores de escritorio también pueden dejarnos desconectados en los momentos más críticos. Con la combinación de atributos HTML, eventos controlados por Javascript y archivos de texto, Offline permitirá a las aplicaciones trabajar en línea o desconectados, de acuerdo a la situación del usuario.

HTML5 fue desarrollado para expandir la web utilizando un set de tecnologías estándar que todo navegador pueda entender y procesar. Y fue creado para proveer todas las herramientas que un desarrollador necesita. De hecho, HTML5 fue conceptualizado para no depender de tecnologías de terceras partes. Pero por una razón u otra siempre necesitaremos contar con ayuda extra.

Antes de la aparición de HTML5, varias librerías Javascript fueron desarrolladas para superar las limitaciones de las tecnologías disponibles al momento. Algunas de estas librerías tenían propósitos específicos (desde procesamiento y validación de formularios hasta generación y manipulación de gráficos). Algunas se volvieron extremadamente populares y otras son casi imposibles de imitar por desarrolladores independientes (como es el caso de Google Maps).

Incluso cuando futuras implementaciones provean mejores métodos o funciones, los programadores siempre encontrarán una manera más fácil de lidiar con un asunto determinado. Librerías desarrolladas por terceros que facilitan tareas complicadas siempre estarán vivas y creciendo en número.

Estas librerías no son parte de HTML5 pero son una parte importante de la web y algunas de ellas son actualmente usadas en sitios web y aplicaciones exitosas. Junto con el resto de las funciones incorporadas por esta especificación, mejoran Javascript y acercan las tecnologías de última generación al público en general.

Esta es la librería web más popular disponible en estos días. La librería jQuery es gratuita y fue diseñada para simplificar la creación de sitios web modernos. Facilita la selección de elementos HTML, la creación de animaciones y efectos, y también controla eventos y ayuda a implementar Ajax en nuestras aplicaciones.

La librería jQuery se encuentra en un archivo pequeño que se puede descargar desde www.jquery.com y luego incluir en nuestros documentos usando la etiqueta <script>. Provee una API sencilla que cualquiera puede aprender y rápidamente aplicar a sus proyectos.

Una vez que el archivo provisto por jQuery es incluido en nuestro documento, ya estamos listos para aprovechar los métodos simples incorporados por la librería y convertir nuestra web estática en una moderna y práctica aplicación.

jQuery tiene la ventaja de proveer soporte para viejos navegadores y vuelve simple tareas cotidianas. Puede ser utilizado junto con HTML5 o como una forma simple de reemplazar funciones de HTML5 en navegadores que no están preparados para esta tecnología.

Accesible por medio de Javascript (y otras tecnologías), Google Maps es un complejo y único set de herramientas que nos permite desarrollar cualquier servicio de mapeado para

la web que podamos imaginar. Google se ha vuelto el líder en esta clase de servicios y a través de la tecnología Google Maps provee acceso a un extremadamente preciso y detallado mapa del mundo. Utilizando esta API podemos encontrar lugares específicos, calcular distancias, hallar sitios populares o incluso obtener una vista del lugar seleccionado como si estuviéramos presentes.

Google Maps es gratuita y disponible para todo desarrollador. Diferentes versiones de la API se pueden encontrar en: code.google.com/apis/maps/.

En HTML5, Javascript fue mejorado por medio de la adición de nuevas funciones y la incorporación de métodos nativos.

Elementos

<script> Este elemento ahora tiene a Javascript como el lenguaje por defecto. El atributo type ya no es necesario.

Selectores

La posibilidad de seleccionar un elemento del documento dinámicamente desde código Javascript se ha vuelto esencial para cualquier aplicación web. Nuevos métodos han sido incorporados con este propósito.

getElementsByClassName Este selector nos permite encontrar elementos en el documento por medio del valor de su atributo class. Es una adición a los ya conocidos getElementsByTagName y getElementById. querySelector(selectores) Este método usa selectores CSS para referenciar elementos en el documento. Los selectores son declarados entre paréntesis. Este método puede ser combinado con otros para construir referencias más específicas. Retorna solo el primer elemento encontrado.

querySelectorAll(selectores) Este método es similar a querySelector() pero retorna todos los elementos que concuerdan con los selectores especificados.

La relevancia de los eventos en las aplicaciones web motivó la estandarización de métodos ya disponibles en navegadores líderes.

addEventListener(evento, manejador, captura) Este método es usado para agregar una escucha para un evento. El método recibe tres valores: el nombre del evento, la función

que responderá al evento, y un valor booleano (verdadero o falso) que indica el orden de ejecución de varios eventos disparados al mismo tiempo. Normalmente el tercer atributo es configurado como false.

removeEventListener(evento, manejador, captura) Este método es usado para remover una escucha para un evento, desactivando el manejador. Los valores necesarios son los mismos que los usados para addEventListener ().

APIs

El alcance de Javascript ha sido expandido con un grupo de poderosas librerías accesibles

a través de interfaces llamadas APIs.

Canvas Esta API es una API de dibujo, específica para la creación y manipulación de gráficos. Utiliza métodos Javascript predefinidos para operar.

Drag and Drop Esta API hace que arrastrar y soltar elementos con el ratón en la pantalla sea posible también en la web.

Geolocation Esta API tiene la intención de proveer acceso a información correspondiente con la ubicación física del dispositivo que está accediendo a la aplicación. Puede retornar datos como la latitud y longitud utilizando diferentes mecanismos (como información de la red o GPS).

Web Storage Esta API introduce dos atributos para almacenar datos en el ordenador del usuario: sessionStorage y localStorage. El atributo sessionStorage permite a los desarrolladores hacer un seguimiento de la actividad de los usuarios almacenando información que estará disponible en cada instancia de la aplicación durante la duración de la sesión. El atributo localStorage, por otro lado, ofrece a los desarrolladores un área de almacenamiento, creada para cada aplicación, que puede conservar varios megabytes de información, preservando de este modo información y datos en el ordenador del usuario de forma persistente.

Indexed Database Esta API agrega la capacidad de trabajar con bases de datos del lado del usuario. El sistema fue desarrollado independientemente de previas tecnologías y provee una base de datos destinada a aplicaciones web. La base de datos es almacenada en el ordenador del usuario, los datos son persistentes y, por supuesto, son exclusivos de la aplicación que los creó.

File Este es un grupo de APIs desarrollada para proveer la capacidad de leer, escribir y procesar archivos de usuario.

XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a la construcción de aplicaciones Ajax. Incluye nuevos métodos para controlar el progreso de la operación y realizar solicitudes cruzadas (desde diferentes orígenes).

Cross Document Messaging Esta API introduce una nueva tecnología de comunicación que permite a aplicaciones comunicarse entre sí a través de diferentes cuadros o ventanas.

WebSockets Esta API provee un mecanismo de comunicación de dos vías entre clientes y servidores para generar aplicaciones en tiempo real como salas de chat o juegos en línea.

Web Workers Esta API potencia Javascript permitiendo el procesamiento de código detrás de escena, de forma separada del código principal, sin interrumpir la actividad normal de la página web, incorporando la capacidad de multitarea a este lenguaje.

History Esta API provee la alternativa de incorporar cada paso en el proceso de una aplicación dentro del historial de navegación del navegador.

Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el dispositivo es desconectado de la red.