Depuis quelques semaines, nous cherchions une solution gratuite pour publier en ligne des Page Flip, c’est-à-dire des catalogues feuilletables et interactifs en ligne au format Flash, souvent au format au Pdf à l’origine. Nos catalogues devaient pouvoir s’intégrer à des sites Internet haut de gamme. Nous voulions trouver une solution esthétique (sans les vilaines reliures des doubles pages qui servent de cache-misère !) et stable, qui permettent notamment de zoomer sans perte de qualité textes et images : le choix était donc plus restreint. Après avoir testé plusieurs (dizaines de) solutions en ligne ou Open Source décevantes, nous avons finalement décidé de nous plonger dans Issuu. Cet outil est bluffant, comme nous allons le montrer. Simple à utiliser pour des publications basiques, ses fonctionnalités étendues et son Api riche le rend très performant et hautement personnalisable : ajout de son propre logo, publication exclusive du catalogue dans ses propres pages, zoome y compris en mode plein écran, création automatique de miniatures cliquables, conversion des liens hypertextes…

Ici, avant de poursuivre la lecture, le plus simple consiste à visiter Issuu et à feuilleter les catalogues en ligne, ou à découvrir notre premier catalogue de démonstration : il a été publié en quelques secondes en utilisant les options de base d’Issuu : Salons d’affaire.

D’abord, Issuu se décline sous deux versions, gratuite et payante sous la forme d’une redevance mensuelle de 20 dollars. La version gratuite, que nous allons présenter en détail, oblige à souffrir l’affichage du logotype d’Issuu, plutôt sobre, et de l’ajout d’une barre latérale aux catalogues présentant des publications sur le même sujet. De même, la version gratuite oblige à passer par Issuu pour convertir et publier les documents, mais le processus s’avère rapide, tandis qu’il est possible de rendre privé ses documents. Autrement dit, la version payante n’est pas justifiée, sauf à vouloir commercialiser soi-même les services d’Issuu.

Issuu possède cependant quelques inconvénients, que nous citerons d’emblée pour ne pas avoir à y revenir. Le support technique n’est disponible qu’en anglais et la documentation peut se révéler confuse et aride… d’où l’intérêt du présent article. Les rares textes présent dans les catalogues, notamment sur les icônes, sont écrits en anglais ou en espagnol. Le code à intégrer dans les pages n’est pas valide Xhtml Strict… même si nous avons trouvé le moyen d’y remédier en améliorant la syntaxe proposée. La mention d’Issuu est présente sur les catalogues. Enfin, les Page Flip restent hébergés sur le site d’Issuu, bien que le stockage soit transparent pour le visiteur.

Nous allons d’abord présenter l’insertion et la personnalisation d’un Page Flip, puis sa publication sur une page autonome, c’est-à-dire un site externe, indépendant d’Issuu.

Insertion d’un Page Flip

Avant de télécharger un document sur Issuu, nous vous conseillons de vous inscrire pour gérer vos publications : le questionnaire est rapide à compléter.

Issuu permet de télécharger en ligne les documents…

• Jusque 500 pages et 100 méga-octets.
• Aux formats Pdf (jusqu’à la version 1.5 – au-delà, le document est converti, et le résultat peut être aléatoire), Word (.doc), Powerpoint (.ppt), Open Office (.ods, .odp), WordPerfect (.wpd), Rich Text Format (.rtf), Star Office (.sxi, sxw).
• Avec des images d’une résolution de 150 Dpi maximum (les images d’une taille supérieure sont redimensionnées et les vecteurs simplifiés).
• Avec une mise en page simple (cependant, n’avons pas rencontré d’erreurs avec des documents sophistiqués).

Le guide de conversion des documents sur Issuu donne des renseignements exhaustifs sur ce thème.

Par ailleurs, un sujet sur l’exportation avec Adobe InDesign sur Issuu peut aussi donner des informations utiles.

On peut télécharger un document sur Issuu soit depuis son poste de travail, soit depuis une Url. L’onglet Upload a file permet de télécharger un seul document. L’onglet Upload many files, uniquement disponible pour les utilisateurs enregistrés, permet de télécharger trois documents à la fois en spécifiant leurs Url : cette option plus rapide ne permet donc pas de télécharger plusieurs documents simultanément depuis son ordinateur.

Les renseignements demandés dans la rubrique General Information avec les champs Title, Description… sont obligatoires, mais ne présentent un intérêt que pour permettre l’indexation du contenu dans Issuu et dans les moteurs de recherche. Dès lors, pour une publication autonome c’est-à-dire sur son propre site Internet, cette étape peut être négligée en se contentant des renseignements basiques, car ils sont obligatoires. (Les champs de texte doivent contenir des minuscules ou des chiffres et ne pas contenir d’espaces ou d’accents.) La précision sur le type de document (livre, catalogue, journal…) n’influe pas sur l’apparence du contenu. La rubrique Target your audience ne présente pas non plus d’intérêt. La rubrique Sound permet de préciser un accompagnement sonore (nous n’avons pas testé cette possibilité), qui pourra être reprécisée lors de la publication. En revanche, il faut porter son attention sur Publishing Options et choisir Private pour éviter l’indexation et l’affichage du document dans Issuu. Enfin, la section Sharing options permet d’autoriser les commentaires, les votes et les téléchargements quand les catalogues sont hébergés sur Issuu.

Après conversion, un index est automatiquement créé (les miniatures des pages s’affichent dans le catalogue, par défaut en bas) et, si le document Pdf original embarque des liens hypertextes, ils sont conservés et fonctionnels.

Une fois que le document est téléchargé et traité, nous pouvons travailler à son intégration dans une page Web.

Personnalisation du Page Flip

Issuu propose un outil fabuleux, qui permet de personnaliser à loisir l’interface. Sans entrer dans les détails de son Api, voici quelques renseignements utiles pour une publication.

Lorsque le document est disponible dans l’interface My Library, on peut publier le document. Il suffit de sélectionner le document puis de cliquer sur le bouton Embed, ou d’utiliser le clic droit de la souris sur le document.

La fenêtre modale qui s’ouvre affiche deux extraits de code :

1. le premier permet d’intégrer le catalogue à l’interface personnalisée dans une page externe (Embed code),
2. le second permet d’ajouter un lien vers le catalogue (Link to), qu’il soit hébergé sur Issuu ou sur un autre site (Standalone with Styling), en personnalisant son interface.

Avant de copier l’extrait, l’interface du catalogue doit être choisie :

• affichage ou non des boutons Page Flip (Misc)
• agencement des pages (double, simple, simple de haut en bas) (Layout),
• taille (si on indique une taille personnalisée, attention à respecter les proportions du document) (Size),
• couleur ou thème (Color or theme),
• lancement automatique du feuilletage (Auto Flip),
• page de démarrage du Page Flip (Starting page),
• son (Audio).

Les modifications sont immédiatement répercutées dans l’aperçu en bas de la fenêtre (Preview) et dans les extraits de codes à intégrer en haut de la fenêtre. Aucune procédure d’enregistrement n’est prévue, cet outil servant juste à générer le code nécessaire : ainsi, lorsqu’on a peaufiné la présentation d’un premier document, le même code peut être ré-exploité sans passer par ce formulaire.

Couleurs et thème

La méthode la plus simple consiste à choisir une couleur ou un thème par défaut dans l’interface. Dans cette hypothèse, il n’y aura que la page Html à transférer sur le site : un script présent dans le code appelera les éléments de mise en page depuis Issuu.

L’autre méthode est plus complexe, mais ouvre des perspectives intéressantes : elle consiste à utiliser l’option Custom theme URL. Dans ce cas, il faudra concevoir (ou copier) et transférer le thème sur le serveur : le code appelera ce répertoire pour assurer la mise en page, à l’instar d’une feuille de style externe dans une page Internet classique.

Des échantillons de thèmes pour Issuu peuvent être téléchargés.

Contenu d’un thème

Un thème pour Issuu présente l’arborescence suivante…

1. fichier crossdomain.xml,
2. répertoire issu
   1. sous-répertoire portant le nom du thème (ici, le nom n’a aucune importance, il n’apparaîtra pas)
      1. fichier crossdomain.xml,
      2. fichier layout.xml,
      3. fichier skins.fla ou skins.psd (ou les deux),
      4. fichier skins.swf ou skins.png (ou les deux).

Les fichiers .xml peuvent être manipulés avec n’importe quel éditeur de texte.

Le fichier skins.fla ou skins.psd n’aura évidemment pas besoin d’être transféré sur le site.

Le fichier crossdomain.xml

Les deux fichiers crossdomain.xml permettent d’autoriser son serveur à communiquer avec celui d’Issuu. Ils n’ont pas à être modifiés. Le premier doit être placé à la racine du site, tandis que le second doit être placé dans le sous-répertoire portant le nom du thème.

Le fichier layout.xml

Le fichier layout.xml permet de dessiner l’interface du catalogue.

D’abord, il est possible d’ajouter son propre logotype, comme l’explique l’article sur l’insertion de son propre logo, avec une syntaxe comme :

<object source="http://example.com/images/logo.png" />

Attention, pour les boutons, le fichier permet juste de les déclarer et de placer, non de personnaliser leur apparence (le fichier Flash ou Photoshop permettra de réaliser cette opération). En revanche, les boutons qui s’affichent en mode plein écran ne sont pas paramétrables, semble-t-il. Pour mémoire, les libellés des icônes sont en anglais par défaut, et ne peuvent pas (encore) être traduits.

Voici la liste des boutons et la syntaxe correspondante…

• Indexaction="index" upState="#IndexButton_up" overState="#IndexButton_over"...
• Fullscreenaction="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over"...
• Viewmodeaction="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over"...
• Previousaction="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over"...
• Printaction="print" upState="#PrintButton_up" overState="#PrintButton_over"...
• Nextaction="pageNext" upState="#NextButton_up" overState="#NextButton_over"...
• Shareaction="share" upState="#ShareButton_up" overState="#ShareButton_over"...

Les boutons diposent de quatre états :

1. upState, avec le suffixe _up,
2. overState, avec le suffixe _over,
3. downState, avec le suffixe _down,
4. disabledState, avec le suffixe _disabled.

Attention au bouton Share : si l’utilisateur y recourt, l’animation s’ouvre dans Issuu.

Le bouton Print n’apparaît que si le catalogue est affiché en mode Single page.

Les boutons peuvent être groupés sur une ligne unique, grâce au conteneur Box.

Le conteneur Canvas permet d’ajouter une image de fond.

Iml permet de mettre en page le catalogue dans layout.xml. Le manuel de référence Iml donne des renseignements exhaustifs.

Voici, à titre d’exemple, quelques éléments de mise en page…

• Positionnement

  <image source="#Logo" left="10" top="20"/>

• Taille

  <image source="#Logo" left="10" top="20" width="200" height="50"/>

• Empilement

  <image source="#Image1" left="10" top="20" depth="1"/>

• Arrière-plan

  <viewer xmlns="http://issuu.com/viewer/1.0" backgroundImage="#TwilightBackground" backgroundPosition="left,center" backgroundRepeat="repeat,noRepeat">

Comme souvent en pareil cas, il ne sert à rien de s’imposer une longue et abstraite lecture des instructions : il vaut mieux s’approprier un fichier d’exemple, et le modifier au fil de l’eau en se reportant au manuel en cas de nécessité.

Dock permet d’indiquer l’emplacement des miniatures, cliquables, du Page Flip.

Peut être également personnalisée l’aspect et l’emplacement de la numérotation des pages.

Enfin, layout.xml doit indiquer la source des boutons…

<!-- Indique qu'un fichier Flash sera utilisé -->
<skin source="skins.swf"/>
<!-- Indique qu'un fichier Bitmap sera utilisé -->
<skin source="skins.png"/>

Le fichier skins.fla

Le fichier skins.fla permet de préciser les couleurs de l’interface et d’autres éléments décoratifs.

Dans Adobe Flash Cs3 Professional, à l’ouverture du document, apparaîssent les boutons et la couleur de l’arrière-plan avec deux calques, Description et Objects. Dans la bibliothèque, ouvrir par exemple le Clip IndexButton_up contenu dans le répertoire IndexButton, qui comprend deux calques : shape et icon. Dans shape, cliquer deux fois sur la forme : la couleur d’arrière-plan s’ouvre et peut être modifiée. Choisissons la couleur #333333. Tous les arrières-plans des boutons avec le suffixe _up se sont mises à jour. Continuer avec les autres boutons, en personnalisant ou non les calques icon, et enfin avec l’arrière-plan du document. Enfin, exportons l’animation.

On peut ajouter d’autres éléments pour parfaire l’animation. Ainsi, le thème Crayon proposé par Issuu comprend, en plus du Clip Background, à la racine de la bibliothèque, les Clips…

• cloud1 (qui comporte quatre images-clés sur les Frames 1, 49, 50 et 98 avec deux interpolations de mouvement),
• cloud2 (qui comporte quatre images-clés sur les Frames 1, 40, 41 et 81 avec deux interpolations de mouvement),
• grass1 (qui comporte quatre images-clés sur les Frames 1, 72, 73 et 146 avec deux interpolations de mouvement),
• grass2 (qui comporte quatre images-clés sur les Frames 1, 80, 81 et 160 avec deux interpolations de mouvement),
• sun (qui comporte quatre images-clés sur les Frames 1, 40, 41 et 80 avec deux interpolations de mouvement.

L’article sur l’usage d’un fichier Flash sur Issuu donne des indications. Le guide de modification des images d’Issuu donne aussi des renseignements sur l’emploi d’un fichier .fla.

Le fichier skins.psd

À défaut d’utiliser Flash, on peut recourir à une image au format Png, gérée par exemple avec Photoshop. Dans ce cas, il suffit de colorier les boutons à sa guise, et d’indiquer les coordonnées des images dans le fichier layout.xml, avec une syntaxe comme :

<skin source="skins.png" type="image"/>
...
<button action="index" upState="#100,50,200,10" overState="#200,50,300,100" downState="#300,50,400,100" disabledState="#400,50,500,100"/>

On se reportera utilement à l’article sur l’usage d’un fichier Bitmap sur Issuu.

Publication du Page Flip

Enfin, il reste à publier notre Page Flip depuis la fenêtre modale.

Si l’on recourt aux couleurs ou thèmes par défaut, il suffit de copier l’extrait de code affiché dans Embed code et de l’insérer à la page Html de son choix. Si l’on utilise son propre thème, après l’avoir transféré sur son serveur dans le répertoire de son choix (qui n’a aucune importance), il convient d’indiquer l’emplacement du fichier layout.xml dans l’option Custom theme URL : l’extrait de code affiché dans Embed code se mettra automatiquement à jour avec les paramètres (la prévisualisation s’actualisera aussi instantanément), qu’il faudra copier dans la page Html de son choix.

Le code fourni par Issuu n’est pas valide au format Xhtml Strict.

Nous donnons le code pour remédier à cet inconvénient, mais cette pratique contrevient aux conditions d’utilisation d’Issuu. De plus, le code corrigé empêche la barre latérale, qui comprend des animations comparables pour promouvoir les services de l’éditeur, de s’afficher.

Code invalide fourni par Issuu…

<object style="width:600px;height:414px" ><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" /><param name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:600px;height:414px" flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" /></object>

Code valide équivalent (mais sans la barre latérale)…

<object type="application/x-shockwave-flash" width="600" height="414" data="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9">
<param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
</object>

Notre catalogue final se nomme Hôtel. Nous avons choisi délibérément une interface sobre. Comme nous ne disposions pas d’un logo, nous avons utilisé avec notre subtilité coutumière (!) le symbole @. Le Page Flip se révèle d’une étonnante stabilité. Pourtant, le document Pdf original pèse 2,3 méga-octets et compte 24 pages.

Issuu propose des statistiques détaillées sur la consultation de chaque Page Flip, accessible depuis My Library.

Ajoutons qu’Issuu propose de concevoir des catalogues visualisables sur téléphone mobile. Cette possibilité est, pour l’heure, limitée aux terminaux fonctionnant avec le système d’exploitation Android, mais devrait prochainement être étendue aux iPhone. Pour autant, cette solution impose aux lecteurs de télécharger une application spécifique.

Enfin, Issuu proposent des extensions ou des codes spécifiques pour les principaux Sgc et les sites les plus populaires.

Ces catalogues feuilletables, à l’utilité anecdotique à première vue, peuvent cependant trouver des usages inattendus : site Internet simplifié à l’extrême (pour les graphistes qui ne veulent pas se lancer dans l’apprentissage du multimedia et ne se soucient pas du référencement), curriculum vitæ (s’il compte plus d’une page !)… et, d’une façon générale, documents trop sophistiqués pour être décrits avec Xhtml.