Aujourd’hui, les magazines ou les brochures que l’on peut feuilleter en ligne sont de plus en plus présents sur la toile, en effet, cela constitue une solution avantageuse pour diffuser vos documents, PDF et autres e-books. Les flipbooks sont des players permettant de lire ces documents à la manière d’un magazine posé sur une table, avec le fameux effet de «page flip» animant les pages lorsque l’on souhaite les tourner. Ils se démarquent ainsi des autres lecteurs de document tel que Google Reader.
Il existe une variété de solutions permettant de créer ces «flipbooks» sur WordPress. Alors qu’il y a quelques années, la conversion au format flash était une étape indispensable pour la création de flipbooks, aujourd’hui, la tendance est à l’utilisation des technologies HTML5 et Javascript, permettant ainsi la lecture sur des supports tels que les smartphones ou les tablettes tactiles ne supportant pas le Flash.
Nous allons ici étudier les différentes solutions qui s’offrent à nous pour créer des flipbooks sur WordPress.
Les services en ligne
Ces services proposent des solutions simples d’accès : il suffit d’uploader vos PDF sur le site du prestataire, celui-ci se charge alors de les convertir en flipbooks et de les héberger. A la manière de Youtube pour les vidéos, il est alors possible d’envoyer des liens pour partager ses flipbooks ou alors de directement intégrer un player sur ses propre pages internet. Des versions gratuites sont proposées et les coûts des versions premium restent assez faibles.
Issuu
Le site nous accueille avec une interface fraîche et épurée, on peut s’inscrire et uploader son premier PDF ou autre document en moins d’une minute. Une fois prêt, il est possible d’éditer son document, notamment en rajoutant des liens sur les textes ou en appliquant des actions, pour par exemple créer une table des matières cliquable.
Pour intégrer le player de votre document dans vos pages, il suffit de cliquer sur le bouton share de votre document et de choisir Embed, des options de tailles et des couleurs vous sont proposées. N’oubliez pas de cocher le bouton «Use on Tumblr, WordPress…» avant de copier le code correspondant. Un plugin existe aussi pour simplifier l’intégration du player (http://wordpress.org/plugins/wp-issuu/) L’interface du lecteur exportable est très sobre, avec un logo ISSUU relativement discret. D’un double clic on passe en mode plein écran, proposant un meilleur confort de lecture. Ce mode dispose néanmoins de publicités sur le côté droit.
Notez que nous vous parlions d’Issuu dans notre article consacré à la mise en place de WordPress eCommerce, car un flipbook, c’est aussi un excellent moyen de mettre en avant vos catalogues produits, sans le coût du papier.
Quel prix ?
Une offre payante est disponible à partir de 19$ par mois, pour ce prix là, vous pourrez masquer les suggestions sur le côté. Pour 10$ de plus par mois, vous pourrez disposer d’un lecteur exportable pour les smartphones et tablettes tactiles, et enfin pour encore 10$ de plus, des options de personnalisation plus approfondies vous seront accessibles. Il sera notamment possible de masquer le logo ISSUU ou de customiser les couleurs du player.
Avantages :
La simplicité du service et de l’interface, la fluidité du player, les personnalisations des PDF (lien cliquables, actions), les fonctions de zoom, la possibilité (moyennant coûts) de personnaliser le player et d’effacer la marque, une variété de format acceptés, compatibilité smartphone/tablette.
Inconvénients :
L’interface uniquement en anglais, plus pauvres en fonctionnalité que son concurrent Calaméo.
Calaméo
Lancé en 2008, Calaméo est le concurrent français de Issuu. Son fonctionnement est plus ou moins similaire, on s’inscrit et on peut importer un document sous différents formats (.pdf, .doc, .ppt, .rtf… etc) et celui-ci le convertit en flipbook. Ici aussi, on peut éditer ses documents en rajoutant des liens, il est également possible de superposer des images cliquables, de rajouter des vidéos (directement depuis Youtube ou Vimeo) ou encore des sons.
Ici aussi, rendez vous dans les options de partages pour copier le code correspondant au player à intégrer dans vos pages. Seulement ici, il existe aussi un plugin WordPress (http://wordpress.org/plugins/wp-calameo/) spécialement conçu pour simplifier le code à copier. Après l’avoir installé, cochez WordPress dans le code d’insertion pour obtenir un code marchant avec le plugin. Des options de dimensions et de vues sont aussi disponibles.
Les fonctions de personnalisation du player sont aussi mieux fournies, divers skins nous sont proposés, on peut importer une image de fond et même un son d’ambiance. Si le son de changement de page de base ne vous satisfait pas, il est aussi possible de le modifier.
Concernant le player en lui même, il intègre un effet de page tel qu’on peut en trouver avec le plugin «turn.js», à l’aide de la souris on clique sur un côté de la page pour la tourner. Une option de table des matières est également disponible en haut du player, permettant une navigation plus rapide dans le document. Pour l’offre gratuite, des publicités sont affichées sur le player, mais elles sont masquables.
Quel prix ?
La version gratuite permet de créer un nombre illimité de flipbooks. Cependant pour supprimer les publicités et rajouter des fonctionnalités il faut opter pour un compte premium ou platinum.
Les abonnements premium sont proposés à 12€ par mois, en plus de masquer les publicités, ils offrent plus de possibilité de customisation.?Les abonnements platinum, quant à deux, sont disponibles à 49€ par mois, offrant la possibilité de masquer la marque, de proposer des téléchargements directs des PDF et une impression de qualité. Il faut souscrire à ces abonnements si vous voulez insérer du contenu Youtube, Vimeo ou Souncloud.
Avantages :
Service multilingue (10 langues disponibles), player de qualité, table des matières permettant une navigation rapide, possibilité d’ajouter des liens, des images cliquables, du contenu vidéo ou audio, des options de customisations plus avancées, compatibilité smartphone, possibilité de masquer la marque.
Inconvénients :
Player moins esthétique que celui de son concurrent, abonnements platinum plus cher pour bénéficier de toutes les fonctionnalités.
Et les autres ?
Il existe d’autres services en ligne proposant de créer des flipbooks, à l’instar de Webalbums.fr, service destiné avant tout aux professionnels, ayant des outils avancés pour les webmasters tel qu’une option d’indexation des publications sur les moteurs de recherches, des versions off-line ou encore des mesures d’audiences. Mais ce service n’est proposé qu’à partir de 249€.?C’est pourquoi Issuu et Calaméo restent les solutions à privilégier en terme de service web.
Les plugins jQuery / WordPress Flipbook
Vous préférez héberger vos flipbooks sur vos propres serveurs et les intégrer à votre guise ? Alors la solution des plugins WordPress ou des plugins jQuery est plus adaptée. Il existe différents types de plugins WordPress, des payants dit plugins premium WordPress, des gratuits, ceux directement destinés à WordPress et les plugins jQuery, demandant d’avantage de réflexion sur l’intégration. Voici un petit tour d’horizons de quelques-uns des plugins existants.
Responsive Flip Book, plugin WordPress
Responsive Flip Book est un plugin disponible à la fois pour WordPress et en plugin jQuery brut. Comme son nom l’indique, il a la particularité d’être responsive, ce qui le rend agréable à utiliser sur des terminaux de petite taille. Le contenu de ses pages est lui aussi en HTML/CSS, il est donc là aussi possible d’intégrer de nombreux éléments dans son flipbook. Responsive Flip Book dispose d’un zoom haute résolution, d’une table des matières, d’une interface d’administration simple d’utilisation pour la version WordPress, et de fonction de customisations. Des thèmes sont inclus avec le plugin pour vous permettre de réaliser le flipbook que vous souhaiter.
Quel prix ?
Disponible sur Codecanyon 30$ la version WordPress.
Avantages :
Flipbook responsive, adapté pour tout type de terminaux, contenu des pages en HTML/CSS, différents thèmes inclus, facile à customiser, interface d’administration simple pour la version WordPress.
Inconvénients :
Là aussi, pas de conversion de PDF et autres types de documents, pas de mode plein écran. Pas de possibilité de jouer un son lors du changement de page.
http://codecanyon.net/item/responsive-flip-book-wordpress-plugin/2372863 (et oui, ceci est un lien d’affiliation)
Responsive FlipBook v5
Responsive FlipBook v5 est disponible en version responsive jQuery, une version Flash existe aussi pour WordPress. La version jQuery est basée sur la librairie turn.js (nécessitant une licence externe), lui permettant de réaliser l’effet de «flipping» des pages. Lui aussi utilise des pages générées en HTML et en CSS, mais dispose de moins de fonctions que les plugins que nous avons vu au dessus. Notons quand même la présence d’un bouton «download» permettant de télécharger directement le document.
Quel prix ?
18$ pour la version WordPress, 12$ pour la version jQuery (nécessite une licence turn.js).
Avantages :
Pages générées en HTML/CSS, flipbook adaptable à l’écran de l’utilisateur, possibilité de télécharger le document.
Inconvénient :
Pas de support de documents PDF, .doc et autres, pas de mode plein écran, moins de fonctionnalités, pas de version jQuery pour WordPress.
http://codecanyon.net/item/responsive-flipbook-v5-jquery/3146425
FlippingBook
Et enfin voici FlippingBook, un petit plugin WordPress ayant comme avantage de proposer une version gratuite, ce qui peut dépanner pour de petits projets.
FlippingBook est un plugin Flash, ce qui ne permet pas de rendre le texte sélectionnable, il faut importer une par une les pages au format image. De nombreuses options de configurations sont proposées dans l’interface d’administration comme la possibilité d’uploader ses images d’arrière plan, de modifier le niveau de zoom ou encore de sélectionner le son au changement de page. Un éditeur de page en flash est présent dans le back-office, permettant de repositionner les pages. Le player, quant à lui, propose une fonction de plein écran non négligeable et une fonction d’impression. La version gratuite possède un copyright.
Quel prix ?
Une version gratuite est disponible, une licence coûte à partir de 40€
Avantages :
Version gratuite, fonction de plein écran, player customisable.
Inconvénient :
Fonctionne en flash, n’importe que des images aplaties, texte non sélectionnable, zoom très sommaire, beaucoup moins de fonctions que les autres plugins sur le flipbook en lui même (vidéo, lien, sons…etc).
Pour les experts
Ces plugins jQuery ne sont pas disponible en version WordPress, ils demandent donc quelques connaissances pour les intégrer dans vos pages WordPress.
WowBook
WowBook est un plugin javascript compatible avec un large panel de navigateurs. Il permet de réaliser des flipbooks dont les pages sont du contenu HTML/CSS, ce qui a comme avantages de rendre le texte sélectionnable et de permettre l’intégration de tout type de contenu, tel que des vidéos, des animations CSS ou du contenu flash.
Le plugin dispose de 2 animations différentes pour «flipper» les pages, d’un système de thumbnails entièrement configurable, ce qui permet de mieux s’y retrouver dans le document, et d’autres fonctions traditionnelles telles que le zoom, l’autoplay, le support des raccourcis claviers et la navigations à la molette de la souris.
Quel prix ?
WowBook est disponible sur Codecanyon pour 16$.
Avantages :
N’a pas besoin de Flash pour fonctionner, les pages sont en HTML/CSS, texte sélectionnable.
Inconvénients :
Pas de conversion depuis un PDF, .doc et autres, il doit être convertit en HTML au préalable, pas vraiment optimisé pour tablettes tactiles et smartphones, mode plein écran absent.
http://codecanyon.net/item/wowbook-create-ebooks-with-page-flip/1791563
Turn.js
Turn.js est une API qui permet de réaliser des flipbook en HTML5. Compatible avec la plupart des navigateurs et avec iOS et Android, cette bibliothèque Javascript demande néanmoins un matériel correct pour être utilisée. Turn.js permet d’utiliser 2 types de transitions (pour les couvertures et pour les pages), d’intégrer un Zoom (dans la 4eme release seulement) et propose une interface épurée. Le fait que les pages soient en HTML5 permet d’intégrer tout type de contenu dans le flipbook, il est aussi possible de créer une table des matières cliquable.
Quel prix ?
Pour la 4eme release, 99$ pour 5 domaines. Rappelons tout de fois que la licence GPL sera là pour vous permettre de réutiliser autant de fois que vous le souhaitez ce plugin. Reste à ce que les concepteurs n’aient pas introduit un système de blocage, que vous êtes libre de contourner.
Avantages :
Contenu des pages en HTML/CSS, Zoom, interface épurée, peut charger des pages dynamiquement en Ajax, multi-support.
Inconvénients :
Le prix, plutôt réservé aux développeurs, pas de convertisseur de documents PDF, .doc… etc, pas de mode plein écran.
Conclusion
A l’heure actuelle, on constate que les services web proposent des fonctionnalités bien plus intéressantes en terme de flipbooks, que les plugins directement intégrés à votre site WordPress.
Les plugins de flipbooks doivent encore évoluer afin de permettre une meilleur confort à la fois pour le visiteur et pour le webmaster. Il parait évident que les plugins WordPress gagneraient en efficacité si ceux-ci proposaient une conversion en HTML ou Flash depuis les principaux formats de documents, comme le propose Calaméo : PDF, Word, Powerpoint, Excel, OpenOffice, texte ou encore .rtf. De plus, une fonction de téléchargement de masse («bulk upload») serait aussi la bienvenue, tout comme un mode plein écran intégré aux lecteurs, qu’ils soient en Flash ou en jQuery afin d’offrir un meilleur confort de lecture.
Merci, après avoir testé ISSUU et Calaméo, je choisi ISSUU.
Merci pour ce récapitulatif très intéressant !
Des superbes flipbooks, je garde cet article sous la main au cas où 😉
merci pour ces éclaircissements et Bravo.
j’aime bien ton article merci a toi
Merci pour ces revues. Très pratique. Je me souviens d’avoir utilisé un flip book auprès d’une université et c’était relativement lent et surtout pas pratique du tout pour faire des recherches par exemple. Pour moi, il semble que d’essayer d’imiter un livre sur un écran pose des contraintes qui sont plus ennuyeuse par rapport aux avantages.
Merci pour ce récapitulatif très clair et argumenté. Cela permet de se faire un avis !
Bon article, mais je rajouterai tout de même ce plugin: http://wordpress.org/plugins/flip-pong-v/
qui à l’avantage d’être gratuit et sans flash…
Bonjour,
Il m’arrive personnellement d’utiliser Calaméo, mais uniquement dans la version intégration de code, car j’estime ne pas en avoir une utilisation suffisante pour alourdir mes sites avec un plugin.
Par contre, je l’ai paramétré sur le site d’un client qui édite un nouveau catalogue PDF toutes les 6 à 8 semaines et il me fait régulièrement des éloges sur cette solution qui permet d’afficher les document des différentes manières, à la guise du lecteur.
Cordialement,
Bruno
Très bon billet récapitulatif à mettre de côté. Pour avoir eu plusieurs cas pro où il fallait envisager ce type de solution “Flipbook”, j’en suis tombé à peu près aux mêmes conclusions en fait… les plugins peuvent faire mieux. 🙂