Hola amigos de ForosdelWeb,
Les vengo a compartir uno de nuestros últimos trabajos en HábitatWeb. Se trata de una una serie de audiocuentos HTML5 para iPad.
Un audiocuento consiste en lo siguiente: tiene un audio, texto, y las páginas van cambiando a medida que se va leyendo el texto.
Para esta primera entrega de 6 audiocuentos, el cliente nos proporcionó 6 audios MP3 en inglés y 6 PDFs con todo el diseño y textos de los cuentos.
Al principio de este trabajo @roccons me encargó hacer 2 pruebas:
- Hacer algo con el concepto de http://hobolobo.net/ con capas superpuestas y que estas se movieran con distintas velocidades al ir cambiando de página (esta prueba se la alcansé a mostrar a @cvander en Webprendedor Concepción, y le había fascinado).
- Hacer un pageflip, simulando que estás con un libro, en el que si haces swipe te cambie de página, obviamente con una animación de cambio de página.
A pesar de ambas pruebas se veían geniales, nos convenció la prueba 2, por ser mucho más intuitiva para los niños y porque el concepto de cambio de página se asemejaba más a lo que quiere el cliente, que es reemplazar los libros por iPads.
En la parte técnica, les cuento que las palabras que se van marcando tienen un tiempo definido en un XML, y se van mostrando según la posición actual del <audio>, la animación está hecha con CSS3 transform y por supuesto que JavaScript y también les cuento que el funcionamiento de swipe y tap para iPad lo hizo @dual3nigma (quedó excelente).
El audiocuento está hecho para iPad, pero también funciona en safari desktop (pc y mac).
Bueno, sin más que hablar les dejo el link hacia el demo que subimos en HTML5 Lounge:
http://html5lounge.com/audiocuentoipad/
En la próxima producción de audiocuentos queremos hacer funciones extras para los audiocuentos, ¿tienes alguna que sugerir?.
Bienvenidas sean todas sus opiniones y sugerencias, agradezco de antemano sus comentarios.
Saludos,
Diego.