HTML5 & CSS3

En estos momentos en los que los fabricantes de navegadores compiten para ver cuál es el más «moderno» y que cada vez parece que tenemos más cerca la publicación del nuevo estándar de html los desarrolladores web debemos ponernos al día y comenzar a implementar los nuevos estándares en nuestras webs. Para ello es importante tener a mano algunas buenas guías, presentaciones y algún libro que nos ayuden a mejorar nuestras webs mientras siguen funcionando en los navegadores más antiguos (lease IE6).

HTML5 and CSS3 de Brian P. Hogan hace un recorrido por el nuevo estándar dando para cada caso ejemplos de uso y soluciones alternativas (normalmente basadas en jQuery) que nos permitan usarlas en navegadores que actualmente no tienen suporte para ellas.

Haciendo un repaso rápido de los temas que se tocan en el libro y que forman parte de HTML5:

Nuevos elementos estructurales: Para hacer nuestros documentos más semánticos se han incorporado muchas etiquetas nuevas y se han eliminado muchas otras que aún seguían haciendo referencia a presentación. Algunas de estas nuevas etiquetas son header, footer, nav, section, article.

Web forms: Una de mis partes preferidas son los nuevos campos para formularios que nos van a ahorrar gran cantidad de javascript y nos va a permitir crear formularios muy complejos de una manera muy sencilla. Algunos de los nuevos elementos son: email, search, slider(type=range), date, color, number. Además se han añadido attributos muy interesantes como placeholder, autofocus y contenteditable.

CSS3: Para permitirnos mejorar visualmente nuestras webs sin necesidad de añadir clases o ids a cada elemento se han añadido montones de selectores y pseudo-selectores, entre ellos destacaría :nth-child(n) que nos permite crear tablas cebreadas sin necesidad de añadir las típicas clases odd y even.

Canvas: Nos permite crear imágenes complejas o gráficos programaticamente con javascript y sin necesidad de liberías externas como Flash.

Audio y video: Una de las características más conocidas es la inclusión de las etiquetas para audio y video que nos darán soporte nativo en el navegador, después, por supuesto, de que se resuelva la batalla sobre formatos que hay abierta entre los distintos navegadores.

Eye Candy (border-radius, shadows, gradients y transformations): Por supuesto, también se hablan de las nuevas propiedades de CSS que nos va a permitir crear bordes redondeados, sombras, gradientes y mucho más sin necesidad de añadir imágenes como fondos.

Por otro lado, se encuentran algunas API’s javascript que aunque no pertenecen directamente al estándar, está asociadas al él y que habrá que tener en cuenta en el futuro. Las más destacadas son:

Local Storage: Que nos permite guardar cosas como la configuración de la aplicación sin necesidad de usar para ello cookies.

Session Storage: Que permite guardar datos en el navegador que se borran automáticamente al cerrar la sesión.

Web SQL databases: Bases de datos relacionales asociadas a un dominio y persistente entre sesiones.

Offline applications: Permite definir archivos que deben ser cacheados para que la aplicación pueda ejecutarse sin necesidad de conexión a internet.

History: Permite manejar el historial del navegador.

Cross-documents messages: Nos da la posibilidad de enviar mensajes entre ventanas con contenido cargado desde diferentes dominios.

Websockets: Crean una conexión con estado entre un navegador y un servidor.

Geolocation: Permite obtener la latitud y la longitud de un navegador web.

Por otro lado, existen otro montón de tecnologías que aún no se encuentran suficientemente maduras para usar en ningún navegador y por las cuales todavía tendremos que esperar un tiempo. Entre ellas se encuentran las siguientes:

CSS3 Transitions: Animaciones sobre interacciones directamente en CSS.

WebWorkers: Ejecución de javascript en segundo plano.

3D canvas con WebGL: Creación de imágenes 3D sobre el objeto canvas.

IndexedDB: Bases de datos de tipo clave/valor en el navegador similares a las NoSQL.

Drag & Drop: Api para arrastrar y soltar elementos entre el sistema operativo y el navegador.

Client-side form validations: Validaciones de formularios en el navegador sin usar javascript.

En resumen, nos esperan unos años muy prometedores en lo que ha desarrollo web se refiere con montones de tecnologías nuevas que vienen a facilitarnos el trabajo y a abrirnos un montón de posibilidades nuevas. Creo que es importante que comencemos a usar esas tecnologías desde ya para que los usuarios más avanzados puedan comenzar a beneficiarse de ellas, sin dejar de lado a los usuarios de navegadores sin soporte, y para que cuando llegue el resto de usuarios todas esas tecnologías se encuentren maduras y todos podamos disfrutar de una web mejor.

Web Workers

Una de las características de HTML 5 introducidas en el reciente Firefox 3.5 y que también se encuentra disponible en Safari 4 y Chrome 2 son los web workers.

Los workers proveen un mecanismo para poder ejecutar tareas que requieran mucho tiempo de ejecución en hilos directamente en el sistema operativo sin que bloqueen la interfaz del usuario. Una de sus utilidades principales es la de ejecutar tareas de entrada/salida de datos a través del objeto XMLHttpRequest.

Los web workers se comunican con el proceso principal a través del envío de mensajes a un manejador de eventos especificado por el desarrollador. Estos mensajes pueden contener desde una cadena de caracteres a un objeto complejo. Una característica importante es que no pueden manipular el DOM por lo que si se desea mostrar los datos resultantes de su ejecución es necesarios que estos sean pasados al manejador a través del paso de mensajes.

Para crear un worker lo único que es necesario es llamar al contructor pasándole como único argumento la URI del script que deberá ejecutar, y definir el manejador del evento onmessage que será el encargado de escribir el resultado en la página.

var worker = new Worker('worker.js');  
worker.onmessage = function(event) {  
     print("¡llamada ejecutada al finalizar el worker!\n");
}

y para detener su ejecución:

worker.terminate();

Posteriormente deberemos implementar lo que hará el worker durante su ejecución en el archivo worker.js de la siguiente manera:

onmessage = function(event) {
     var n = calcular();
     postMessage(n);
}

Al finalizar la ejecución del método calcular el worker enviará un mensaje con el resultado que será recogido por el manejador del evento onmessage definido anteriormente.

El método calcular podría estar definido en otro archivo e importando mediante la función global importScripts(‘calcular.js’) la cuál descagará y traerá dicha función al ámbito del worker.

Además cada worker puede lanzar tantos otros workers como se desee, lo único a tener en cuenta es que la ruta a el fichero que se le pasa en el constructor se calcula dinámicamente dependiendo de la localización del padre. Esto es muy aconsejable sobre todo en el caso de que el usuario posea un microprocesador con más de un núcleo, ya que el sistema operativo podría repartir los hilos entre estos.

Referencias

• Web Workers
• Mozilla Developer Center: Using web workers
• Using Web Workers