Customer Login

Lost password?

View your shopping cart

Blog

Créer un ebook enrichi : mode d’emploi

A travers l’exploration de l’une de nos démos, nous avons choisi de vous expliquer en détail le procédé de fabrication d’un de nos epubs enrichis.

Une place, une démo

La démo en question consiste en un guide à vocation touristique de la Place des Vosges. Lieu historique de Paris s’il en est, la Place des Vosges a la double particularité d’être à la fois très photogénique ET de se situer juste à côté de chez Walrus! Après avoir fait quelques recherches iconographiques et techniques, notamment auprès des éditeurs traditionnels de guides touristiques, nous avons décidé d’une mise en page classique, type livre papier.

Judge a book by its cover !

La couverture, c’est un peu l’argument massue pour la vente d’un livre. Pour bien connaître le monde de la librairie, on peut dire que la couverture joue un rôle important dans l’acte d’achat d’un livre, particulièrement dans le cas d’un achat d’impulsion. Certains libraires iront même jusqu’à dire qu’une bonne couverture a 50% de plus de chances de se vendre qu’une couverture hideuse. Jusque là, rien que de très normal. Pour la couverture (reprise à l’identique, mais en version icône, sur l’étagère de la bibliothèque iBooks), nous avons fait appel à notre photographe maison qui, en quelques instants, nous a concocté une jolie vue d’un bâtiment d’époque (il faut dire que nous étions au mois de septembre, et que le soleil brillait encore). Nous reviendrons aux photos plus tard.

Puis notre graphiste a inséré notre identité visuelle reconnaissable tout de suite (le W de Walrus) en haut à droite: un logo que vous retrouvez aussi sur l’icône bibliothèque. C’est un truc vraiment important en matière de visibilité, car l’icône du livre étant ce qu’elle est (très petite donc), il faut pouvoir la retrouver rapidement au milieu de l’étagère. En jouant le petit coin corné, on cerne tout de suite l’identité du livre: pas besoin de zoomer ou pire, de regarder les métadonnées. Nous réinjectons systématiquement la couverture, au format .jpg, sur la première page de l’epub, de manière à rappeler l’ergonomie du livre traditionnel. Question de fluidité et de lisibilité.

Walrus + ibooks + video = ♥

Sur la deuxième page, ci-dessus, nous avons tout de suite inséré une vidéo de présentation. Il s’agit de faire un tour de la Place en quelques secondes, de manière à spatialiser les lieux. Nous avons tourné cette vidéo à l’aide d’un Canon Eos 5D, doté de plusieurs optiques. Le reflex numérique est, en soi, un vrai confort pour le tournage.

Le choix de tourner nos vidéos avec un reflex numérique s’est fait très naturellement:  avec un tel matériel, on se déplace facilement et on n’est pas ennuyé par les éventuelles demande d’autorisations de tournage des gardiens de la paix. De plus, la possibilité d’interchanger les optiques procure une bien plus grande liberté que les optiques uniques des caméscopes numériques: meilleure ouverture, meilleure profondeur de champ, meilleure réactivité. On peut tourner en HD et profiter de la qualité d’une photo pro. Inconvénient: si on ne possède pas d’optiques stabilisées, ça tremble! A utiliser donc avec un pied. La vidéo a été tournée au format .mov, puis montée via Final Cut et exportée en H.264, format supporté par l’iPhone, l’iPad et l’iPod, avant d’être insérée au fichier epub.

Techniquement parlant, l’insertion de vidéo dans un epub se fait grâce à la prise en charge de la balise <video>, une nouvelle venue depuis le développement de la spécification html5 tant attendue.

Pour ceux qui ne pourraient pas télécharger la démo, voici la vidéo en question:

Du contenu exclusif

Sur la page suivante, on retrouve les prises de vue effectuées par notre photographe, histoire de ne pas se la jouer vilains en allant piquer des photos sur Google Images (vu trop de fois dans des epubs pas très scrupuleux: nous sommes notamment tombés sur un livre illustré dont les dessins étaient affichés avec différentes résolutions, si bien qu’on pouvait se retrouver avec une image ultra pixelisée sur l’écran du bel iPad, de quoi se brûler les yeux! Shame on you. ). D’une manière générale, et quand cela est possible, nous préférons envoyer un photographe afin d’augmenter notre propre banque d’images. Nous sommes rassurés, nos clients aussi, et la qualité est au rendez-vous.

De l’hyperlink à l’intralink

En bas de la page, on retrouve le principe de ce que nous appelons « l’intralink », à savoir que, sur le même principe que l’hyperlink web, un mot colorisé renvoie à une notice explicative: ici, une biographie d’Henri IV. Pour la démo, le contenu de la notice supplémentaire n’est pas un contenu original. Néanmoins, la totalité des notices de nos ouvrages à vocation commerciale bénéficie évidemment de contenus originaux et écrits spécialement pour l’occasion.

On peut revenir, grâce au principe d’ancrage bien connu des programmeurs web, à la page que l’on consultait alors. Lorsque cette démo a été réalisée, il y a quelques mois de cela, nous étions obligés d’insérer un lien de retour vers la page précédente, inconvénient que la dernière version d’iBooks a supprimé en ajoutant la possibilité de revenir à la page consultée précédemment directement dans l’architecture de l’application. Une belle avancée, donc, merci les gars.

Le « Magic Diaporama »

On arrive maintenant à la partie un peu plus ardue techniquement: nous avons inséré un diaporama directement dans le epub. Vous ne pouvez pas en apprécier la fluidité sur la photo, bien entendu, mais il s’agit d’un module avec sept ou huit photos de la place qui s’enchainent, défilant régulièrement de gauche à droite, avant de revenir en arrière jusqu’à la première image, et ainsi de suite. Ce procédé n’étant pas soumis à l’utilisation d’un player (pas de bouton Play donc),  l’animation se lance dès qu’on tourne la page.

Afin de vous en expliquer les subtilités, je vous laisse un instant en compagnie de Jérémie, notre directeur technique et artistique:

Jérémie: « Vu le nombre d’images à insérer au sein de ce projet, nous avons décidé d’expérimenter les récentes avancées du langage CSS pour créer un diaporama animé. La nouvelle norme CSS3 permet de créer des animations complexes (via la propriété « -webkit-transition ») et de s’affranchir de l’utilisation de Flash (ce dernier n’étant pas disponible sur les idevices d’Apple…). Le CSS3 étant encore en cours d’élaboration et pris en compte uniquement par certains navigateurs web, j’avoue que nous n’étions pas sûrs que notre code soit interprété correctement. Heureusement pour nous, le moteur de rendu graphique d’iBooks est le même que le navigateur Safari, présent sur les iPhones et iPads. Et ce dernier fait des merveilles avec le CSS3 ! Ce petit test nous ouvre un champ d’explorations et de possibilités inespéré: nous comptons bien pousser les expérimentations encore plus loin lors de nos prochains projets. « 

Merci, cher ami, de toutes ces précisions.

Online ou offline ? Les deux mon capitaine !

Juste un petit mot pour vous parler des liens externes. Le principe du livre enrichi étant, à notre sens, de pouvoir être consulté sans connexion au web (l’intérêt de lire un livre enrichi de vidéos dans un avion en plein vol, à 10.000 pieds du sol, est restreint s’il nécessite une connexion wifi, non? C’est même un peu l’arnaque!), nous choisissons en règle générale d’insérer tout notre contenu dans un seul et même epub, tout en offline donc, afin d’être consultable à tout moment. Les fichiers sont donc plus larges, normal, mais c’est au profit d’une meilleure expérience utilisateur. Néanmoins, il serait dommage de se priver des ressources externes, comme ici, du site internet d’un musée. L’application iBooks permet de quitter l’interface pour ouvrir un lien sous Safari (elle spécifie alors, au moment où vous cliquez sur le lien, qu’iBooks va quitter et que vous allez être reconduit sur Safari). Dans ce cas-là, nous avons accolé au lien une petite icône (une flèche qui sort d’un carré) pour spécifier que ce lien sort du livre, qu’il est en quelque sorte facultatif. Dans un roman, on peut être facilement rebuté par la futilité d’une telle sortie, le genre romanesque étant par essence une littérature immersive de laquelle il ne faut à aucun prix faire sortir le lecteur. Mais dans le cas d’un guide touristique, comme ici, le procédé paraît justifié.

La carte embarquée

Enfin, nous avons inséré à la fin de l’ouvrage un récapitulatif sous la forme d’une carte générée sous Google Maps. Elle n’est pas interactive à proprement parler (les punaises de couleur servent à identifier les articles en rapport) mais si l’on clique dessus, elle ouvre Google Maps dans Safari: on sort donc du livre pour aller sur le web, mais pas sans filet de sûreté. Nous avons à cet effet réinjecté dans une map spéciale Walrus, enregistrée en tant que telle, les informations du livre. On peut donc profiter de la géolocalisation proposée par Google ET du livre Walrus. Quant on clique sur un lieu (une punaise), une petite bulle s’affiche, reprenant le texte du guide.

C’est ce que dans le vénérable monde de l’édition, on appelle le double effet Kiss Cool.

Et ensuite… ?

Nous travaillons actuellement sur l’insertion de module type Javascript dans les epubs, ce qui changera évidemment la donne question interactivité pour aller lorgner de près du côté des applications. Le support epub étant, pour l’instant, une véritable feuille blanche, nous sommes persuadés du potentiel énorme qu’il y a à travailler de ce côté-là, notamment grâce au HTML5 et au CSS3.

Nous travaillons actuellement avec la Mairie de Paris à élaborer des guides similaires autour du patrimoine parisien. Affaire à suivre, donc!

Téléchargement

Maintenant que vous avez eu l’explication, nous vous proposons de
télécharger la démo de notre guide.

Elle est au format epub sans DRM, vous pouvez donc l’installer sur l’appareil de votre choix et la décortiquer comme bon vous semblera. Evidemment, pour profiter de toutes les fonctionnalités de la démo, il vous faut posséder un appareil Apple, un iPad étant par définition le meilleur support pour en profiter pleinement. Après avoir téléchargé votre fichier epub, faites-le glisser sur la section « Livres » de votre bibliothèque iTunes, puis synchronisez votre appareil de lecture avec votre ordinateur. Le fichier doit alors apparaître dans votre bibliothèque iBooks.

Pourquoi ce choix de restreindre la disponibilité de nos ouvrages à un seul type de machine?

La réponse est simple: nous sommes bien évidemment pour le multi-support mais à l’heure actuelle, Apple est la seule marque à proposer des systèmes de lecture qui répondent à nos exigences en matière de fluidité, d’affichage audio/vidéo et d’insertion de multimédia. Et qui permettent donc de lire les livres dont nous rêvons !

Le jour où Samsung, Toshiba, Sony et consorts sortiront une tablette capable de lire ces livres, nous travaillerons évidemment à les rendre compatibles. D’ici là, il faudra emprunter l’iPhone ou l’iPad de votre grand-mère pour nous lire.

Nhésitez pas à nous transmettre vos impressions, vos questions, via les formulaires de contact ou la boîte de commentaires ci-dessous!

En espérant que ce post vous aura été, sinon utile, au moins divertissant. 🙂

Commentaires

comments

4 Responses

  1. Gilbert Bilodeau says:

    Un ami m’a informé de votre présentation d’un ebook enrichi. J’ai aussitôt mis sur iPad la démo de votre Guide de la Place des Vosges. Merci pour la description de chaque enrichissement, tout fonctionne comme décrit dans votre article. Mes fonctions de responsable du service informatique d’une librairie d’une part, mon intérêt pour les possibilités fantastiques offertes par la mutation des livres papier en ebook, d’autre part, me fascinent depuis bien avant l’apparition de l’iPad. Je ne puis que vous féliciter de contribuer à l’évolution du livre, laquelle va bien au-delà de la translittération d’un texte sur un écran. Bravo !

    Reply
  2. Emmanuel Gros says:

    Je déterre un post vieux d’un an mais quel(s) outil(s) utilisez vous pour la création d’eBook enrichi ? (si ça n’est pas un secret de fabrication bien entendu ^^)

    Reply
  3. Titoutergal says:

    Auriez-vous des conseils sur la meilleure manière de « construire » son ebook pour être potentiellement lu sur le maximum de tablettes?

    Merci d’avance

    Reply

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *