El libro digital de Tron Legacy

HTML 5 es la quinta revision de nuestro “querido” HTML, entre sus múltiples novedades destaca el incorporar etiquetas con códecs para mostrar contenidos multimedia (canvas).  Existen multitud de de websites experimentales con todo tipo de aplicaciones realizadas aprovechando las últimas técnicas existentes. En formato “comic” está por ejemplo el libro digital de Tron – El legado realizado en HTML5 y pensado para visualizarse en Internet Explorer 9, gracias entre otras cosas, a su aceleración por hardware.

Resulta muy interesante el artículo Behind the Scenes of Disney TRON: Legacy Digital Book Site en donde sus desarrolladores nos han contado el proceso de trasladar la idea original desde el papel a la web con algunos detalles técnicos jugosos.

Cuentan que la idea global del proyecto era aprovechar la (nueva) potencia de HTML5 sin perder esa magia de estar leyendo un cómic “clásico”. Para ello, recurrieron a un desarrollo lineal en el tiempo de la historia que permitiese leerse de izquierda a derecha como los cómics tradicionales, y, a la vez, evitando la interrupción provocada al pasar página.

El material original del que disponían eran archivos Photoshop de alta resolución organizados por páginas o capítulos. Les llevó alrededor de 5 días separar meticulosamente los personajes y elementos esenciales de cada uno de los paneles, se reconstruyeron los fondos para homogeneizar la apariencia y se reconstruyó cada viñeta en los estados necesarios para realizar las animaciones.

El equipo de programación tardó otros 5 cinco días en construir prototipos para decidir la tecnología “cross-browser” de base a utilizar: su aproximación inicial era usar CSS3 pero no consiguieron un rendimiento aceptable ni usando JavaScript puro, ni con animaciones jQuery, por lo que se decidieron finalmente por usar el elemento canvas de HTML5, que permite obtener multitud de objetos simultáneos en pantalla moviéndose de forma fluida sin necesidad de un equipo especialmente potente.

Otro gran desafío es el ancho de banda: “Queríamos imágenes HD: muchos píxeles y transparencias suaves”. Una de las técnicas a destacar es el uso de varias capas de PNG para componer las imágenes, básicamente una capa para la textura del objeto y otra capa para las texturas y luces. En los fondos donde no es necesaria transparencia se usan PNG de baja calidad y para los brillos y luces se usan PNG que disponen de canal alfa (transparencia). De este modo consiguieron gran calidad en el resultado final optimizando el tamaño de las imágenes.

En el mismo artículo los desarrolladores nos indican cómo utilizar las “Developer Tools” (de IE9 en su caso) para analizar el código JavaScript que maneja el website, cómo implementaron la precarga de imágenes o el uso de @font-face para mantener la tipografía original del comic y hasta explican la técnica utilizada para detectar navegadores no compatibles.

En total 1 mes de trabajo para obtener un resultado tan espectacular.

El cómic está AQUÍ :

Y los comentarios del equipo de desarrollo aquí. (para no perderse alguno de los comentarios WTF de los lectores del post!)

Articulo redactado por: @jgdoncel