Audiocuentos HTML5 para iPad

[Null_]

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:

1. 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).
2. 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.

[dleal100]

genial, y porque no es compatible con los demas navegadores? si se supone que ya todos soportan HTML5?

[Rafael]

Hola. Un proyecto muy interesante.

[NJS]

Un proyecto muy interesante, pero porque no funcciona en los demas navegadores ??

[Null_]

Hola, buenos días :)

No funciona en todos los navegadores debido a que no todos soportan las características que estamos utilizando en los audiocuentos. El diseño es progresivo, y a cada navegador a medida que vaya soportando nuevas características (principalmente de CSS3) le iremos habilitando el audiocuento.
Además, ahora los audiocuentos están siendo descargados por una aplicación de la App Store, por lo tanto el público que ahora está utilizando los audiocuentos es exclusivo de iPad.

Gracias por sus comentarios!
Saludos.

[imendoza]

Comienzo felicitándolos, muy buen trabajo. Esta a la altura de los audiolibros de Nook Color (formato propietario) pero desde web que sin duda esto es un graaan paso al público al que pueden llegar.

Pregunto: ¿Qué tan complejo es desarrollar un audiolibro de está forma? Dejando a un lado las pruebas ¿es un proceso que se pueda considerar para producción masiva como la de una editorial por ejemplo, o es tan complejo y costoso (tiempo/dinero/etc) que es mejor trabajarlo solo en proyectos especiales?

Con la nueva especificación de EPUB (3), o incluso EPUB 2 en iBooks, ya se integran funcionalidades multimedia, como vídeos, audio y JS. Es decir que se podría crear un audiolibro en base a un vídeo, que es un recurso ya probado (menos costos), con más oferta (mucha gente ya sabe hacer vídeos) y compatibilidad (más fácil de portar), etc. Hago la pregunta pensando en que la solución "ganadorá" será la que sea más fácil de implementar o que pueda llegar a un mercado más grande. Actualmente es el problema que las revistas digitales no pueden solucionar, y se cerraron a la solución más fácil: desarrollar para un único dispositivo (iPad). Así que si soluciones como la tuya, basadas en web, se pudieran llevar a otras plataformas a un costo aceptable entonces se tendría un producto ganador.

Aclaro, que no se tome esto como un "pero" o queja, me fascina lo que han hecho, y me han dejado tarea para comenzar experimentos al respecto :D

—

Solo como aviso, probé la web desde un iPod Touch (iOS 5.0.1) y cerro el navegador las tres veces que intente ingresar. Supongo que es un error de Safari pero de cualquier forma les aviso por si hay planes de llevarlo a iPhone.

[Null_]

Hola imendoza, muchísimas gracias!!.

Desarrollar cuentos de menos de 600 palabras como el que he subido a html5lounge es fácil (tardé un día), pero con un texto más complejo de más de 2000 palabras me he tardado más o menos 3 días. Esto se debe a que hay que ir poniendo el segundo en que se destaca cada palabra (ve el xml) y eso es lo que más toma tiempo en la producción (el css es la parte más sencilla y el core obviamente no se modifica), por lo que ahora solo estamos considerándolo para cuentos que son mucho más cortos que libros extensos. De todas formas esto no es taaaaaan complejo, solo requiere paciencia porque el proceso es repetitivo, sutil y muy cuidadoso.

Ahora, sin esta característica de que se va marcando la palabra que se va escuchando o se cambie por otra más sencilla (por ejemplo que se vaya marcando el párrafo que contiene la palabra que se va escuchando), el tiempo de la producción se dispararía y sería extremadamente sencillo crear un libro o cuento (lo tendrías en un par de horas!), por lo que en un caso así sí se puede considerar una producción supermasiva.

Y es claro que hay un montón de ventajas de que esto se desarrolle para web, de hecho, ahora mismo podríamos incluirle un video o animaciones css3 dentro de cualquier página si el cliente quiere, porque es HTML5! :D.
Volviendo al tema de navegadores, de a poco se puede ir mejorando. Ahora en firefox e ie9 no se ven animaciones, y en chrome se ve algo mal. Menciono esto porque de a poco se puede mejorar y no requiere una reprogramación desde cero, pues no es una app para iPad y no tenemos el problema que comentabas de las revisas digitales, de que se cerraban y desarrollaban para un único dispositivo. En nuestro caso, es el clásico tema de compatibilidad entre navegadores.

De nuevo, muchas gracias por tu comentario! esperamos seguir discutiendo sobre el tema, se puso interesante :D
Saludos!

PD: gracias por el dato del ipod.

[andres_aquino]

Hola @Null_, es super interesante el proyecto que has llevado adelante! Me interesa bastante como a vos y los demás que comentaron acerca del proyecto. Me leo este post algo tarde, pero no lo dejaré de comentar.

Hace unos meses atrás había estado pensando en hacer pequeñas pruebas para poder hacer algo parecido a lo tuyo pero mostrando nada más textos e imágenes, que resulta al final más sencillo que lo que vos hiciste. Vi todo el audiocuento y te puedo decir que me dejó fascinado el acabado perfecto que lograste con esto, teniendo en cuenta que no usas otras tecnologías (lease flash) y ha quedado muy bueno con las animaciones.

Lástima que solo en Safari pueda fucionar al 100% con todas las animaciones hechas en CSS3, pero no será cuestión de mucho tiempo (esperemos que) los demás navegadores vayan aceptando poco a poco las animaciones y características básicas de tu audio libro.

Sinceramente, muy buen proyecto! Enhorabuena! Es genial que tomen este tipo de actividades que lo "retan a uno" (emulando a @cvander ) para así ir ganando más práctica con todo el poder que trae consigo HTML5, CSS3 y JS.

Así que me despido, fuerza con el proyecto.

Saludos!