Category: iPad

Five steps to produce interactive epub books for children

The following basic steps can be useful if you want to produce epub books for children:
  1. Download Calibre application and convert your book from pdf to epub format. Do not expect a nice result after conversion. It will be just a starting point from which you have to work on
  2. Download Sigil and open your epub book to clean it up, add images, text, etc.
  3. Learn how to zip/unzip epub files, work with xhtml files inside an epub, and zip it again.
  4. Add interactivity using JavaScript. For instance, tapping on any word from the text, the associated image fades in as a popup, tapping on the image again to dismiss it. Same effect with audios and videos.
  5. Add other EPUB3 and HTML5 functionalities. For instance, objects moving around when you change your iPad orientation, etc.
Enjoy!

Appstore vs. iBookstore [EN]

I was recently asked if my interactive epub books were applications for the appstore or epub books for the iBookstore.

Books in the appstore are applications as sophisticated and spectacular as old CD-ROM Multimedia. However, both suffer from the same defect: they are games for iPad or PC, which main driver is not reading text but user interaction through multiple possibilities that are related to reading the book only marginally.
By contrast, epub books from iBookstore focus almost exclusively on text and give readers just a few options to improve the reading experience. By default, tapping on the iPad screen you can bookmark pages, search words in the book, dictionary lookup (currently only in English), external searches (which now make you quit reading the book if, for example, want to google), access external links… and little else.
Interactive epub books I’m working on (some examples shown in this blog), try to pick the best of both worlds. First, main driver is text, as seems logical for books. Second, these books adapt digital content to epub format, adding interactive features (video, audio, images popup, references popup, searching …) that enrich the reading experience.
In summary, interactive epub books address readers seeking to follow text as main driver, and willing to use technology to interact with books in a non-intrusive way. The aim is to enrich the reader’s experience adding interactive features to text, without disrupt or impede, even when the reader decides to seek for an explanation of a term, listen to audio, or watch a video included in the book.

Appstore vs. iBookstore

Recientemente me han preguntado si mis libros epub interactivos eran aplicaciones para la appstore o bien eran libros epub para la iBookstore.

Los libros de la appstore son aplicaciones informáticas tan espectaculares y sofisticadas como los antiguos CD-ROM Multimedia. Sin embargo, ambos adolecen del mismo defecto: son juegos para iPad o para PC cuyo hilo conductor no es el texto, sino la interacción con el usuario a través de múltiples acciones que sólo están relacionadas con la lectura del libro de forma marginal.

Por el contrario, los libros epub de la iBookstore se centran en el texto y apenas ofrecen al lector otras opciones que mejoren la experiencia de leer un libro. Por defecto, pulsando sobre la pantalla del iPad se pueden marcar páginas, buscar palabras en el libro, consultar el diccionario (por el momento sólo en inglés), búsquedas externas (que por ahora te hacen salir de la lectura del libro si, por ejemplo, quieres buscar en Google), accesos a enlaces… y poco más.
Los libros epub interactivos en los que estoy trabajando, algunos de cuyos ejemplos muestro en este blog, tratan de recoger lo mejor de ambos mundos. En primer lugar, el hilo conductor del libro es el texto, como parece lógico. En segundo lugar, el libro adapta contenidos digitales al formato epub incluyendo funciones interactivas (video, sonido, imágenes, referencias, búsquedas…) que enriquecen la experiencia del lector.



En resumen, los libros epub interactivos se dirigen a lectores que buscan seguir el texto como hilo conductor y que quieren utilizar las posibilidades que les ofrece la tecnología para interactuar con el libro de forma no intrusiva. El objetivo es enriquecer la experiencia del lector incorporando al texto funciones interactivas que complementen su lectura, sin interrumpirla ni obstaculizarla, incluso cuando el lector decide buscar la explicación detallada de un término, escuchar un sonido o contemplar un video incluido en el libro.

Interactive epub books for children… with video

The following images show how to implement interactivity on epub books. This example is illustrated with some pages from children’s classic picture book Where the Wild Things Are, by Maurice Sendak.

When the reader tap on any word from the text, the associated image of the page will fade in as a popup. Tap on the image again to dismiss it.


If instead of tapping on the image, you double-tap, the image is shown in full screen. With a new double-tap, it returns back to text.
And now, showtime…
I have added a very nice video of the book, found on Youtube, to the epub file. Video works on iBooks on iPad and the outcome is really, really cool.


Libros interactivos en el iPad para niños

Una nueva prueba de concepto: un libro epub para niños que incorpora funciones que permiten interactuar con el libro de una manera novedosa.
Las siguientes ilustraciones muestran cómo visualizar las imágenes del libro Where The Wild Things Are, de Maurice Sendak, a medida que el lector pulsa sobre el texto en su iPad. 

Pulsando en el texto de cada página, aparece una ventana con la imagen del libro relacionada. Pulsando de nuevo sobre la ventana, se cierra y se vuelve al texto original.


Si en lugar de pulsar en la ventana, se hace doble-click, aparece la imagen a pantalla completa. En el iPad esta imagen se puede ampliar a voluntad con el gesto de los dos dedos. Con un nuevo doble-click, se vuelve al texto.


Interactividad aplicada: manuscrito, primera edición y texto

Interactividad aplicada a la lectura de un libro digital significa, entre otras cosas, implantar funciones que permitan al lector, interactuar con el texto del libro pulsando sobre enlaces a imágenes, notas a pie de página, palabras poco conocidas, nombres de personas, personajes históricos, ciudades o cualquier otra palabra que tenga un enlace incorporado. 
De nuevo trabajando sobre el libro La Dama Boba, de Lope de Vega (ver entrada), presento a continuación una interesante aplicación de funciones interactivas mediante Javascript con eventos popup.
Las siguientes ilustraciones muestran cómo visualizar las imágenes del manuscrito de la obra o de la primera edición, cuando el lector pulsa sobre las opciones correspondientes, simbolizadas por cajas en la parte superior de la pantalla. 
Pulsando en la caja ‘Manuscrito’, aparece una ventana con la imagen de la página correspondiente en el manuscrito. Pulsando de nuevo sobre la ventana, se cierra y se vuelve al texto original.



Si en lugar de pulsar en la ventana, se hace doble-click, aparece la imagen a pantalla completa. En el iPad esta imagen se puede ampliar a voluntad con el gesto de los dos dedos. Con un nuevo doble-click, se vuelve al texto.



Del mismo modo, pulsando en la caja ‘Primera Edición’, aparece una ventana con la imagen de la página correspondiente a la edición de 1617, Doze Comedias de Lope de Vega sacadas de sus originales por él mismo – Novena Parte. Pulsando de nuevo sobre la ventana, se cierra y se vuelve al texto original.



Si se pulsa sobre cualquier otra palabra resaltada como enlace (hyperlink), aparece una ventana con la descripción de dicha palabra. Pulsando de nuevo sobre la ventana, se cierra y se vuelve al texto original.



Implementing interactivity in epub for iBooks (English version of ‘Interactivity, that is the question’)

Following an example on the blog of Liza Daly, JavaScript and interactivity in iBooks, I realized that iBooks supports JavaScript-based interactivity in epub content. Liza’s article refers also to Nicholas Gallaguer’s blog, and the article Pure CSS speech bubbles. 
I am implementing some interactive features to my books in epub format, which I find very interesting indeed. Here are some of them taking as an example some pages of the book La Dama Boba, by Lope de Vega (see post). In this example, I added some JavaScript-based event handlers.
First, I give priority to the digitized text, as one would expect. Now images of the manuscript only appear as a pop-up when you click on the ‘Manuscrito’ box located at the top of the screen.

If you tap on the hyperlinked word ‘Manuscrito’, an image of the page will fade in as a popup. Tap on the image again to dismiss it and return to the original text.

If instead of tapping on the image, you double-click, the image is shown in full screen. With a new double-click, it returns back to text. 

Second, in the same way as explained above, this system of pop-ups can incorporate references to footer, notes, definitions of uncommon words, references to places, references to historical people, and so on. If you tap on the hyperlinked words in the text, an annotation will fade in as a popup. Tap on the annotation again to dismiss it and return to the original text.

I think this example opens up a world of possibilities for implementing interactivity to enhanced ebooks.

Interactivity, that is the question

Siguiendo un ejemplo publicado en el blog de Liza Daly, JavaScript and interactivity in iBooks, estoy implantando algunas funciones interactivas a mis libros en formato epub, que realmente me parecen muy interesantes. A continuación presento algunas de ellas tomando como ejemplo una página del libro La Dama Boba, de Lope de Vega (ver entrada).
En primer lugar, el hilo conductor en la lectura del libro es el texto digitalizado, como no podía ser menos. Ahora las imágenes del manuscrito sólo aparecen como una ventana pop-up cuando, a medida que se va leyendo el texto, el lector pulsa la opción ‘Manuscrito’ que se encuentra en la parte superior de la pantalla.

Pulsando en la palabra ‘Manuscrito’, aparece una ventana con la imagen de esa página en el manuscrito. Pulsando de nuevo sobre la ventana, se cierra y vuelves al texto original.

Si en lugar de pulsar en la ventana, se hace doble-click, aparece la imagen a pantalla completa. Con un nuevo doble-click, se vuelve al texto.

En segundo lugar, de la misma manera a la explicada anteriormente, mediante este sistema de pop-ups se pueden incorporar referencias a ‘pies de página’, notas, definiciones de palabras poco frecuentes, referencias de lugares, referencias a personajes históricos, etc.


Creo que esta sencilla prueba nos abre un mundo de posibilidades a la interactividad
Seguiremos por este camino, siempre confiando en que algún improbable lector pueda aportar alguna sugerencia en cuanto a funciones interesantes a incorporar, ideas sobre mejoras en interactividad, etc.