The making of an enhanced ePub file

By exploring one of our demos, we wanted to explain in detail the manufacturing process for one of our enhanced epubs.

A place, a demo
This demo is a guide about the Place des Vosges meant for tourists. Major historical spot in Paris, the Place des Vosges has two main qualities: it is very photogenic and is located right next to Walrus’ office! After doing some photographical and technical research, especially among traditional travel guide publishers, we opted for a classic layout, similar to that of a traditional paper book.

Judge a book by its cover!
The cover is certainly one of the main arguments convincing you to buy a book. Our broad experience in the bookstore business allows us to say that the cover plays a major part in the buying of a book, especially in the case of an impulsive purchase. Some booksellers will even go as far as stating the following: a book with a good cover will have 50% more chances to be sold than a book with an ugly cover. Not very surprising.

Our cover (which looks exactly the same as this on the iBooks bookshelf, except it is a thumbnail format), we received a picture of this building from our photographer. (It was September, the sun was still shining, good for us.). We will get back to the pictures later.

Then our designer included our visual identity, immediately recognizable by the W (standing for Walrus) in the upper right corner: a logo that you can also easily find in your virtual bookshelf. This is very important for a visibility matter: the book’s thumbnail being very small, you have to be able to quickly find it in the middle of the bookshelf. The little twisted corner allows the reader to immediately identify the book: no need to zoom in or, even worse, to go look at the metadata. We always duplicate the cover as a .jpg picture on the first page of the epub in order to remind a traditional book’s ergonomics. It helps for a smoother reading.

Walrus + ibooks + video =

On the second page, shown above, we directly inserted a video presentation. The idea was to film the square in order to visualize its geography within a few seconds. We used a Canon EOS 5D, and several different lenses. A digital SLR is great to shoot with.
We very naturally decided to shoot with a DSLR: it allows you to easily move around and the police won’t request to see your filming permit. Also, the possibility to swap lenses provides much greater freedom than single optic digital camcorders: better opening, better depth of field, better reactivity. You can shoot in HD and enjoy pro photo quality. Disadvantage: if you don’t have lens-based image stabilization, the image will shake! You therefore need to use a tripod. The video was shot using the .mov format, then edited in Final Cut and exported as H.264 (a format supported by the iPhone, the iPad, and the iPod), before we finally inserted it into the epub file.

Technically speaking, you need to use the <video> tag to insert a video file into an epub; it is a long awaited new feature of the html5 specification. For those who cannot download our demo, here’s the video we’re referring to:

Exclusive content
On the following page, you can see our photographer’s pictures. Come on, we’re not going to steal pictures on Google Images! (Something that has been done too often in non scrupulous epub files: we came across an illustrated book in which drawings were displayed in different resolutions. Some were so pixelated on the iPad that it almost burnt our eyes! Shame on you.). Usually, and whenever possible, we prefer to send a photographer on location in order to enhance our own image database. We’re reassured, so are our clients, and we know that we’ll get the quality they need.

From hyperlink to intralink
At the bottom of this previous page, there is the example of what we call an “intralink”: following the same principle as a web hyperlink, clicking a coloured word brings you to an explanatory note, here a biography of Henri IV. For the demo, we haven’t used original content for the additional note. However, we obviously create original content for all notes added to books used for commercial purposes, and write them specifically for the occasion.
Thanks to the anchor principle, well known to web programmers, you can get back to the page you were on prior to clicking the intralink.

When we created this demo version, a few months ago, we had to insert a link back to the previous page, a flaw that has since then been removed in the latest version of iBooks: the possibility to return to previous page has been added directly inside the application’s architecture. A great enhancement, so thank you guys.

The Magic “Slideshow”
We now get to the technically slightly more challenging part: we inserted a slideshow directly into the epub. Of course you cannot appreciate its fluidity on this picture. It is a module made by several photos of the Place des Vosges sequenced in a slideshow. The pictures slide from left to right at a regular pace before going back to the first image, and so on. This process doesn’t require a player (which means, no play button), so the animation starts as soon as you turn the page.

In order to explain the details, I leave you with Jérémie, our technical and artistic director, for a little while:
Jérémie: “Considering the number of images to be inserted in this project, we decided to experiment with the latest advancements of CSS to create a slideshow. The new CSS3 standard allows us to create complex animations (using the “-webkit-transition” property) and avoid using Flash (since it is not available on Apple’s idevices). CSS3 still being under development and supported only by certain browsers, I have to admit that we were not sure our code would be interpreted properly. Fortunately iBooks’ graphics rendering engine is the same as the one on Safari for iPhone and iPad, so it worked wonderfully with CSS3! This little test opens up a great field of exploration and opportunities; we intend to push them further in our upcoming projects.”
Thank you, dear friend, for all these details.

Online or offline? Both, Sir!
Just a quick note to tell you about external links. The idea of an enhanced book being, in our opinion, to be able to read without an access to the internet (There is really no point in reading an ebook, which has been enhanced with videos, on a flying plane that is 10,000 feet above the ground if it requires a wifi connection, right? What a scam that would be!), we usually decide to insert all our content into a single epub, everything being offline, so that it can be used anytime. That means of course that the files are larger, but it is to the benefit of a better user experience. Nevertheless it would be a shame not to use external resources, like we did here with a museum’s website. The iBooks app allows you to leave the interface to open a link in Safari (it then indicates, when you click the link, that you are about to leave iBooks and will be redirected to Safari). In this case, we have attached a small icon to the link (an arrow coming out of a square) to show that the link will bring you outside of the book, and that it is somehow an option.

When reading a novel, you can easily be put off by the futility of such a feature. After all you don’t want to be distracted while reading a novel. But in the case of a travel guide, like here, it seems justified.

Embedded map
What we then decided to do was to include a map at the end of the book, created with Google Maps, which could be used like a summary.

It is not interactive per se (the colored pins are meant to identify articles from the book) but if you click one of them, it opens Google Maps in Safari: it means you are leaving the book for the internet. In order for the reader not to be “left alone” out there, we specifically created a Walrus map including the book’s information. It is therefore possible to enjoy simultaneously Google’s geolocation possibilities AND Walrus’ book. As you click one of the map’s pins, a bubble appears, showing our travel guide’s text.

And then…?
We are currently working on integrating Javascript type modules into epub files, which will of course increase interactivity possibilities and look at what’s being done in apps. Right now the epub format still is like a blank sheet: we believe working in that direction holds enormous potential, particularly through HTML5 and CSS3.
We are presently working with the City of Paris to develop similar guides about the city’s cultural heritage. To be followed!

Now that you’ve gotten the explanation, we suggest you download our travel guide’s demo.
It’s an epub format without DRM, so you can upload it any device and look at it inside out. Of course, in order to enjoy all of our demo’s features, you will need an Apple device, an iPad being the best option for optimal viewing. After downloading your epub file, drag it to the « Books » section in your iTunes library, and then sync your device with your computer. The file should then appear in your iBooks library.
Why restricting our titles’ availability to one kind of device only?
The answer is simple: we clearly are in favor of a people using varied devices, but right now Apple is the only brand offering a reading system that meets our requirements in terms of fluidity, audio/video display, and multimedia integration. That’s why it is the only reading system right now allowing us to create the books we are dreaming of reading!

The day when Samsung, Toshiba, Sony and the others will release tablets able to read these books, we will obviously work on making them compatible. Until then, you’ll have to borrow your grandma’s iPhone or iPad to read to us.
Feel free to send us your thoughts or questions via the contact form or the comment box below.
We hope this post was useful. Or at least entertaining. 🙂

Fondateur des éditions Walrus, éditeur quand il peut entre deux biberons. Dit parfois des bêtises, mais toujours pour la bonne cause. Amateur de littératures décalées et hors normes ; les sentiers battus n’existent que pour être évités.



4 commentaires

  1. Marcio Duarte sur 6 février 2011 à 13 h 47 min

    Great example, especially the webkit animation. Excelente use of CSS3 in the ePub context! Thanks for sharing.

  2. Bhuvana sur 12 avril 2011 à 12 h 14 min

    Really nice stuff!!! Thanks!!!

    Can we integrate social network links (like facebook, twitter) also in this epub?

    • Julien Simon sur 12 avril 2011 à 12 h 39 min

      Sure! 🙂

  3. Bharat Biswal sur 14 juillet 2011 à 4 h 55 min

    Hi Julien,
    Were you able to make Google Map load at runtime in ebook and also interactive pins ?
    We are working in similiar directions; the touch behaviour on epub readers like Stanza and iBooks are coming in the way.

Laissez un commentaire