Dando continuidad a la información mostrada en la entrada que la semana pasada aparecía en Windows Técnico respecto de los ganadores del concurso Dev Unplugged y las aplicaciones web que habían realizado para dicho concurso, subimos hoy el presente artículo. En las mencionadas aplicaciones se podía ver todo el potencial de Internet Explorer 9 a la hora de utilizar tecnología HTML5, incluyendo diversos efectos sonoros y gráficos, que ofrecían una mejor experiencia y usabilidad por parte del usuario.
En esta ocasión os traemos el enlace al impresionante libro digital de Tron – El legado realizado en HTML5 y pensado para visualizarse, y disfrutarse en Internet Explorer 9, gracias entre otras cosas, a su aceleración por hardware, tema también tratado en entradas anteriores.
Tal y como cuentan sus desarrolladores, la idea original que hay detrás de semejante belleza es transmitir la sensación de que estamos ante un comic realizado con las más modernas tecnologías web pero sin perder esa magia de estar leyendo un cómic “de los clásicos”. Para ello, recurrieron a un desarrollo lineal en el tiempo de la historia que permitiese leerse de izquierda a derecha sin ningún problema, como los cómics tradicionales, y, a la vez, evitar la interrupción provocada al pasar página.
Ejemplo de historia lineal
Para realizar los dibujos recurrieron al programa de dibujo Photoshop con la intención de realizar las animaciones y las interactuaciones posteriormente con CSS3. Según cuenta Alex, jefe de desarrollo, realizaron multitud de pruebas con diversas tecnologías como JavaScript, jQuery, optimizaciones mediante CSS, etcétera, sin conseguir una fluidez de movimiento aceptable. Finalmente, recurrieron al 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 y que en Internet Explorer 9 brinda un rendimiento excepcional.
Además, recurrieron a otras técnicas para conseguir un mejor rendimiento y una menor carga en los navegadores y de ancho de banda. Entre ellas, se encuentra el uso de dos capas por imagen, una para la textura en sí y otra para los brillos y luces, obteniendo así imágenes PNG de calidad sin ocupar demasiado espacio.
Técnica de la “doble capa”
Si estáis interesados en el artículo original, donde podéis encontrar más técnicas utilizadas para conseguir semejante resultado, podéis acudir a “Behind the Scenes of Disney TRON: Legacy Digital Book Site” y leer el artículo completo.
Para aquellos que hayáis llegado hasta aquí sin haber visitado aún la web del libro digital de Tron – El legado, os animamos a que lo hagáis (podéis desplazaros tanto con el ratón como con las flechas de dirección), seguro que a más de uno le vienen a la mente bonitos recuerdos del clásico film “TRON”.
Por último, y antes de despedirnos, queremos recordaros que podéis suscribiros a nuestro RSS y seguir, entre otros temas, las novedades de Internet Explorer 9.
Enviado
jun 21 2011, 06:25
por
anolla