Astuces

Remarque importante

En 2022 en France, 70 % du trafic Web provient d’appareils mobiles (dont une grande partie sur smartphones), c'est à dire sur des écrans de petite taille.
Il est donc important de ne pas créer, dans un livre Book Creator, des pages contenant trop d'informations. Cela obligerait le lecteur – sur smartphone en particulier – à constamment zoomer/dézoomer et rendrait donc la lecture peu fluide.
Il faut donc privilégier deux (ou plusieurs) pages aérées avec une police de caractères pas trop petite et des images de taille moyenne à grande plutôt qu'une seule page trop dense.

Numéroter les pages

L'appli ne propose pas de numérotation automatique des pages.
Le numéro des pages apparaît en mode édition, pas en mode lecture.

Si on souhaite numéroter les pages, il est nécessaire de le faire manuellement.
Insérer, sur la page 2, une zone de texte contenant le nombre 2.
Adapter l'alignement du texte en fonction de sa position dans la page.

Copier cette zone de texte puis la coller sur les pages suivantes du livre.
Sa position dans la page est conservée.

Modifier ensuite le n° de chaque page.

Bouton Retour à l'accueil

Si on crée un sommaire interactif, il est conseillé de placer sur chaque page une icône permettant de revenir à la page qui contient ce sommaire. Une telle icône est téléchargeable ci-dessous.

La version SVG (modifiable) est téléchargeable ci-dessous.

Exemple

Lire sur le site de Book Creator : Les jardins du château de Versailles.

Aide : tutos Numook.

On peut remplacer l'icône Retour à l'accueil par une icône Sommaire.
Une telle icône est téléchargeable ci-dessous.

La version SVG (modifiable) est téléchargeable ci-dessous.

Insérer un fichier PDF

Plutôt que d'insérer un texte trop long, on peut choisir d'insérer un document PDF présent sur le PC.
Pour cela, il suffit de cliquer sur +, sur PLUS puis sur MÉDIA et de choisir le document dans l'Explorateur de fichiers du PC.
Choisir l'option Intégrer un PDF en tant que lien puis cliquer sur Confirmer.

Un bouton cliquable est alors inséré dans la page.

En mode lecture, le fichier PDF s'ouvrira dans une fenêtre qui se superposera au livre quand on cliquera sur le bouton. Il sera alors possible au lecteur de télécharger ou d'imprimer le document.
En cliquant sur i , on peut modifier le titre du fichier ainsi que sa police de caractère et sa couleur ou bien encore masquer ce titre.
Exemple avec le titre masqué :

En réglant la transparence au maximum, on peut associer le bouton cliquable à une image (une capture d'écran de la première page du PDF par exemple ; voir page 4 dans le livre ci-dessous).

Exemple
Si le navigateur bloque l'ouverture des fenêtres, lire le livre sur le site de Book Creator ⁽*⁾.

⁽*⁾ Lire sur le site de Book Creator : Insérer un fichier PDF.

L'intégration iframe

Lorsqu'on édite un lien hypertexte sur du texte ou une image, ce lien conduira vers une page web qui s'ouvrira dans un nouvel onglet du navigateur. On peut à la place effectuer une intégration iframe de la page web cible.
Pour cela, il suffit de cliquer sur +, sur MÉDIA, puis sur Intégré et de coller l'URL de la page web et enfin de Confirmer le lien. Dans la fenêtre qui s'ouvre, modifier éventuellement le titre puis cliquer sur Ajouter au livre.
En mode lecture, lorsqu'on cliquera sur le bouton créé, la page web s'ouvrira dans une fenêtre qui se superposera au livre (un lien située sous cette fenêtre permet d'ouvrir la page dans un nouvel onglet du navigateur).
En cliquant sur i , on peut masquer l'image miniature, modifier le titre du lien ainsi que sa police de caractère et sa couleur ou bien encore masquer ce titre. Si image miniature et titre sont masqués, on peut placer le bouton à côté d'une image.
L'intégration iframe est particulièrement adaptée aux vidéos situées sur un site de partage (PeerTube, YouTube...) et aux activités et jeux en ligne (La Quizinière, LearningApps, Scratch, H5P...).
Dans certains cas, il faudra coller le code iframe HTML (fourni par certains sites) plutôt que l'URL de la page web.
Cette méthode ne fonctionne pas avec toutes les pages web : dans ce cas, la page s'ouvrira dans un nouvel onglet du navigateur.

Aide pour récupérer le code iframe d'une vidéo hébergée sur PeerTube ou YouTube : tuto.

Exemple
Si le navigateur bloque l'ouverture des fenêtres, lire le livre sur le site de Book Creator ⁽*⁾.

⁽*⁾ Lire sur le site de Book Creator : L'intégration iframe.

Aide : tutos Numook.

Bouton Lecture audio

Associer un son à une image
Lorsqu'on clique sur une image, un son est joué.

1. Positionner le bouton Lecture du fichier son (au premier plan) sur une image.
2. Cliquer sur i puis activer la propriété Invisible lors de la lecture.

3. Redimensionner à l'aide des poignées d'étirement.

Lorsqu'on insère un fichier audio, le bouton de lecture est par défaut de forme carrée (1) et ce format de 1:1 n'est pas modifiable.
Si on applique la propriété Invisible lors de la lecture, quatre nouvelles poignées d'étirement apparaissent (2).
On peut alors déformer le carré afin d'obtenir une forme rectangulaire (3).

Pour les perfectionnistes
Le bouton audio cliquable est de forme rectangulaire.
Si la zone associée est de forme plus complexe, certains endroits de la page seront cliquables alors qu'ils ne devraient pas l'être.
Exemple avec une harpe :

Il est possible de rendre certaines zones non cliquables.
Recouvrir, à l'aide de rectangles, les parties du bouton que l'on souhaite rendre non cliquables (redimensionner et faire pivoter ces rectangles pour plus de précision).

Choisir, pour ces rectangles, la couleur AUCUN (menu i ).

On peut, à la place, choisir d'appliquer un effet de transparence maximal à ces rectangles.
Et voilà ! Seule la harpe – ou à peu près – est maintenant cliquable.

Signaler un son associé à une image
Lorsqu'on place un fichier audio sur une image et qu'on applique la propriété Invisible lors de la lecture, le lecteur ne s'apercevra pas forcément que l'image est cliquable, en particulier s'il visionne l'ebook sur une tablette ou un smartphone.
On peut signaler une telle image à l’aide d’un texte ou utiliser une des méthodes suivantes.

• Bouton Lecture audio avec un effet de transparence :
Positionner le bouton Lecture du fichier son (au premier plan) sur une image puis cliquer sur i .
Déplacer le curseur Transparence vers la droite jusqu'à obtenir le niveau de transparence souhaité.
Modifier éventuellement la couleur et l'arrière-plan.

Résultat :

• Bouton Lecture audio avec un fond transparent :
Positionner le bouton Lecture du fichier son (au premier plan) sur une image puis cliquer sur i .
Choisir AUCUN comme arrière-plan.
Modifier éventuellement la couleur.

Résultat :

Remarque
Il est possible de combiner effet de transparence et fond transparent.

Exemple
• page 2, cliquer sur les instruments de musique (boutons invisibles)
• page 3, cliquer sur les boutons de lecture (boutons visibles)

Lire sur le site de Book Creator : Instruments de musique.

Tutos pour jouer avec l'opacité d'une image.

Image interactive

Pour rendre une image interactive, c'est-à-dire pour rendre certaines parties d'une image cliquables (lien vers un page du livre ou lien vers une page web), il suffit de placer des images transparentes sur cette image puis d'associer des liens à ces images transparentes. Une image transparente s'obtient en mettant sa transparence au maximum depuis l'inspecteur i .
On peut utiliser par exemple l'image ci-dessous.

Exemple (page 2, cliquer sur la France et sur l'Italie)

Lire sur le site de Book Creator : L'Europe.

Aide : tutos Numook.

Signaler une image cliquable

Lorsqu'on a inséré un lien sur une image, il n'est pas toujours évident pour le lecteur d'identifier que cette image est cliquable.
Sur un PC, le pointeur de la souris se transforme en lorsqu'on survole l'image.
Cela n'est pas toujours facile à repérer et ça l'est encore moins sur un périphérique mobile de type tablette ou smartphone où le pointeur est absent.
On peut signaler à l'aide d'un texte que certaines images sont cliquables ou insérer l'icône pour signaler au lecteur que ces images sont cliquables.

Exemple

Une telle icône est téléchargeable ci-dessous.

Agrandir une image

Book Creator ne permet pas d'afficher une image en grand format lorsqu'on clique dessus en mode lecture.
On peut toutefois créer un lien sur une image de petite taille qui conduira à une page du livre qui contient l'image en grand format. On n'oubliera pas d'ajouter dans cette dernière page une icône Fermer sur laquelle on créera un lien qui permettra de revenir à la page qui contient l'image de petite taille.
Cette technique est particulièrement intéressante lorsqu'on souhaite placer un certain nombre d'images dans une même page.

Exemple

Lire sur le site de Book Creator : Agrandir une image.

Une icône Fermer est téléchargeable ci-dessous.