#1 – La structure des pages
- Les pages d’un eBook sont des pages web rédigées en HTML.
Le HTML (Hypertext Markup Language ), est un language de balisage permettant d’écrire de l’hypertext ( texte structuré en noeuds liés par des hyperliens ) et d’être décoder et afficher dans un logiciel (navigateur). - Le fichier ePub fait ici office de navigateur autonome.
Chaque page est un nouveau fichier xhtml ( syntaxe html tiré du xml ); il est structuré en balises et comporte toujours 3 sections basiques:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titre de la page</title> </head> <body> <p>Texte de la page</p> </body> </html>
- Le language HTML permet une mis en forme simple du texte (Gras, Italic, Souligné, exposant) et des paragraphes (Centré, ferré à droite,…).
<p style="text-align: center;"><b>Texte en gras</b> <i>Texte en italique</i></p>
#2 – La feuille de style
- La mise en page et la mise en forme de texte avancée s’effectuent grâce à des feuilles de style rédigées en CSS ( Cascading Style Sheets ).
Les références et définition de ce langage libre et ouvert sont disponibles sur le web et notamment sur le site w3schools. - Les définition CSS peuvent être inclus dans une page HTML en insérant une balise dans l’entête de la page:
<head>
<title>Titre de la page</title>
<style type="text/css">
.texte1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:rgb(25, 25, 25);}
</style>
</head>
<body>
<p class="texte1">Texte mise en forme par css</p>
</body>
Il est néanmoins préférable de créer un fichier externe qui facilite les modifications globales de style. Ce fichier est lié à la page HTML en insérer dans l’entête une balise de source externe.
<head> <title>Titre de la Page</title> <link href="../Styles/main.css" rel="stylesheet" type="text/css" /> </head>
- Un fichier css se structure par nom de style et propriétés de mise en forme, selon deux types; Balises ou Classes.
Si notre page html se présente sous la forme:
<body> <h1>Titre 1 de texte</h1> <p class="texte1">Texte mise en forme par la classe CSS texte1</p> <a href="url de la page" target="_blank">Liens</a> </body>
Notre fichier CSS correspondant pourrait contenir les définitions suivantes:
@charset "utf-8";
@font-face {font-family: "Colourbars"; src: url('../Fonts/nomdufichier.otf'); font-weight: normal / bold; font-style: normal / italic;}
body{margin:10px; padding:10px;}
h1{font-family: "Arial", Courier, monospace; border-bottom: 3px solid black; padding-bottom:15px; font-weight:800; text-align:center; font-size:2.5em; margin-bottom:15px; margin-left:auto; margin-right:auto; width:60%;}
p{font-family: "Times New Roman", Times, serif; font-size:1.2em; text-indent:20px; padding:20px;}
a{font-family: "Arial", Times, serif; font-size:1.2em; padding:20px; color:rgb(15, 15, 200)}
a:hover{font-family: "Arial", Times, serif; font-size:1.4em; padding:20px; color:rgb(15, 15, 100)}
- Les couleurs sont renseignées soit au format HEX (ancienne spécification: #ffffff) soit par décimales des composantes rgb(255, 255, 255).
Vous pouvez retrouver les correspondances entre code et couleur dans les nuanciers des logiciels d’imagerie ou sur le web et notamment ici.
#3 – Les images
- Les images s’insère à l’aide la balises img qui peut également être mise en forme par CSS et le fichier de l’image est stocké dans le dossier Images.
<img alt="logo_sigil_epub-editor" src="../Images/logo_sigil_epub-editor.jpeg" />
#4 – Les typographies
- Les typos génériques tel que; Arial, Courier New, Times new roman, Lucida, Comic, Trebuchet, Tahomat, Georgia, Verdana, sont intégré de base à tous les systèmes et sont donc utilisables en natif sans manipulation particulière.
- Les typos spécifiques nécessitent elle d’être importées dans le fichier ePub et leur utilisation restera à la discrétion de l’utilisateur.
Une fois importé dans le dossier /Fonts, elles sont disponibles en les appelant par leur nom dans les propriètés CSS d’une classe.
#5 – Les blocs de texte
- L’eBook gère les trois blocs <p></p>, <span></span> et <div></div>. Ils seront utilisés suivants la mise en page nécessaire.
- La balise Paragraphe <p></p> est utilisé pour son aspect générique et sera laissée sans style pour respecter les choix de l’utilisateur. Cette balise intègre par exemple automatiquement un passage de ligne avant et après elle-même. > La balise Division <div></div> permet de créer des blocs autonomes dans une page. Ces divisions peuvent être positionnées et stylées comme bon nous semble. > La balise <span></span> sert à modifier le style d’une portion de texte à l’intérieur d’un bloc.
6 – Les IDs / sommaire
- Les IDs permettent de réaliser des liens vers des pages et des chapitres et de générer une table des matières et un sommaire.
#7 – L’audio
- Les eBook en version ePub3 accepte l’insertion de fichier audio au format .mp3 via la balise <audio></audio>.
<audio controls="controls" src="../Audio/nomdufichier.mp3">Nom du Fichier</audio>
- La lecture nécessite l’insertion d’un player, cette section sera prochainement développé…
#8 – La vidéo
- Les eBook en version ePub3 permettent d’afficher directement des vidéos au format .mp4 grâce à la balise <video></video>.
<video controls="controls" src="../Audio/nomdufichier.mp4">Nom du Fichier</video>
- La lecture nécessite l’insertion d’un player, cette section sera prochainement développé…
#9 – L’interaction
- Les eBook en version ePub3 accepte comme les navigateurs les fonctions écrites en javascript qui permet d’augmenter le livre de transition, de mouvement et d’interaction avec l’utilisateur.
- Les fichiers javascript .js sont stockés dans le dossier /Misc et sont liés aux pages de la même façon que les feuille de style.
<head> <title>Titre de la Page</title> <script src="../Misc/fct.js" type="text/javascript"></script> </head>
#10 – Les métadonnées
- Les métadonnées renseignent les données concernant l’édition (Titre de l’ouvrage, auteur, crédits,…). Elles sont accessibles via le menu « Outils ».
#11 – La couverture
- La couverture de l’eBook est une image ou une page qui peut-être ajouter via le menu « Outils ». Elle permettra la reconnaissance du livre dans une bibliothèque numérique et mettra en valeur l’ouvrage électronique.
[…] avec l'ensemble des terminaux. Il est préférable d'utiliser un logiciel dédié comme Sigil (Tuto / Ressources.) qui permettra de maîtriser parfaitement le fichier et d'utiliser toutes les […]