¿Qué nos ofrece?
La nueva versión de html incluye interesantes novedades en forma de etiquetas, APIs y javascript. Algunas de las utilidades de esta quinta versión del lenguaje básico de la World Wide Web son las siguientes:
- Nueva etiqueta «canvas» para animación 2D y 3D. (Nosotros nos centraremos en esta parte).
- Nuevas etiquetas para insertar audio y video en nuestra web de forma más cómoda.
- Etiquetas que agilizan el uso de tablas dinámicas a través del manejo de estructuras de datos como Datagrid, Details, Menu y Command.
- Nuevos tipos de datos para los formularios y posibilidad de validar contenido sin javascript.
- Extiende la semántica de la web mediante nuevas etiquetas como header, footer, article, nav, time o link rel.
- API para hacer Drag & Drop.
- Permitirá la descarga de contenido para navegación offline.
- Geoposicionamiento.
- WebStorage para gestión de bases de datos.
- Comunicación bidireccional entre páginas mediante WebSockets.
- Posibilidad de crear hebras mediante WebWorkers.
El elemento canvas.
Principalmente nos interesaba el tema de la animación 2D, así que buscamos en internet referencias al elemento canvas de html5. Dado que html5 se encuentra en fase experimental, no hemos encontrado ningún tipo de manual definitivo, por lo que tendremos que ser nosotros quienes os dejemos por escrito la idea básica de su funcionamiento.
Canvas funciona mediante javascript. En nuestro proyecto, cada vista se compone, al menos, de una pagina escrita en html con un elemento canvas. En cada página incluimos los archivos .js que permitan darle «vida» a nuestro lienzo. Construiremos un ejemplo que simplifique las cosas para hacerlas entendibles.
Primer paso: lo dicho, nos creamos una página en html e insertamos un elemento canvas, cuyos parámetros serán la anchura (width), la altura (height) y un id que utilizaremos para identificarlo desde nuestro js.
<!DOCTYPE html> <html> <head> <title>Mi primer canvas</title> </head> <body> <canvas id="canvas" width="500" height="300"> <p>Su Navegador no soporta el elemento canvas de html5</p> <p>Use alguno de estos navegadores:<a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org">Konqueror</a>.</p> </canvas> </body> </html>
Observamos que hemos incluido una serie de enlaces que aparecerán sólo si nuestro navegador no soporta html5.
Paso 2: Incluimos la siguiente linea en la cabecera:
<script type="text/javascript" src="dibujar.js"></script>
Esto nos permitirá identificar el arhivo «dibujar.js», que deberá encontrarse en el mismo directorio.
Paso 3: Empezamos a editar «dibujar.js». Lo primero que deberemos hacer es asociar nuestro canvas a una variable:
window.onload = function() { canvas = document.getElementById("canvas"); }
Esta sentencia debemos introducirla en la función «onload» para asegurarnos de que la página se ha cargado por completo antes de buscar nuestro canvas.
Paso 4: Obtenemos un contexto del lienzo. Este puede ser 2D o 3D. Nosotros ni siquiera hemos intentado animar tridimensionalmente, por lo que seguiremos el ejemplo por el camino bidimensional:
window.onload = function() { canvas = document.getElementById("canvas"); contexto = canvas.getContext("2d"); }
Paso 5: Dibujamos una figura. Haremos algo sencillo: un rectángulo. Canvas incluye la típica función «drawRect», con la que animadores 2D en otros lenguajes estarán familiarizados. No obstante, lo haremos por el método rústico, a fin de entender como funciona el «libre trazo» en html5.
window.onload = function() { canvas = document.getElementById("canvas"); contexto = canvas.getContext("2d"); contexto.beginPath(); //Empezamos el dibujo contexto.moveTo(50,50); //Colocamos el lapiz en las coordenadas (50,50) del lienzo contexto.lineTo(100,50); //Trazamos una linea hasta las coordenadas (100,50) del lienzo contexto.lineTo(100,100); //Trazamos una linea más contexto.lineTo(50,100); //Trazamos otra linea contexto.lineTo(50,50); //Trazamos la linea que cierra nuestro rectángulo contexto.closePath(); //Finalizamos el dibujo contexto.stroke(); //Pintamos }
Leyendo los comentarios de cada instrucción podemos ver que la sintaxis para dibujar es bastante intuitiva.
Y hasta aquí este pequeño ejemplo. En Vands, la función de dibujo más utilizada es «drawImage», con la que podemos dibujar imágenes cargadas previamente en nuestro javascript. Existe la posibilidad de configurar parámetros como la transparencia (componente alpha), la anchura de linea o la fuente y tamaño del texto (también se incluyen métodos que dibujan texto). Aquí tenéis una lista completa de las funciones que canvas ofrece: http://www.w3schools.com/html5/html5_ref_canvas.asp .
Enlaces de muestra
A fin de motivar a la gente a que prueben a darle forma a sus ideas con html5, aquí os dejamos algunos enlaces que creemos reflejan las capacidades del lenguaje.
Algunos problemas
El mayor problema que nos encontramos al animar a través de html5, fue el de la tremenda ineficiencia que éste presenta. Acostumbrados a flash, a algunos les puede resultar molesto dibujar más de dos imágenes y que pete su explorador. En este sentido, html5 es bastante limitado. A día de hoy, no hemos encontrado una solución y muchos pcs no cargan la aplicación al ritmo que debieran. No obstante, se estuvo trabajando en una tipo de rejilla que alivia parte del problema. Hablaremos de cómo repintar sólo lo necesario cuando posteemos sobre la librería «vands_lib.js». Existen aplicaciones en internet (como las que hemos dejado más arriba) que, aparentemente, son bastante más complejas que Vands pero cuyo rendimiento funciona a la perfección, cosa que todavía estamos intentando explicarnos. Intuimos que html5 ofrece alguna manera de gestionar todo esto automáticamente pero, dada la insuficiencia de información en internet respecto al tema, aún estamos intentando averiguarla.
Esto nos lleva al siguiente inconveniente: toda la documentación que encontramos ha sido a través de experiencias personales como esta. Fue mucho más fácil obtener resultados de forma rápida con django a través de su libro. Aprender a construir en html5 a base de retazos que vas encontrando por ahí hace que el proceso sea más lento y que, a la hora de abordar una determinada tarea del proyecto, no siempre se empiece escogiendo la mejor alternativa.
Aúnque html5 todavía está muy lejos de desbancar a flash, animamos a los amantes de la animación 2D a probar sus posibilidades. Para finalizar, como supongo que querréis conocer los pros y los contras de estos dos lenguajes a la hora de desarrollar videojuegos, aquí os dejamos una comparativa bastante gráfica.
vandsproject 