Bandeau Haut

Comment réaliser un livre au format EPUB ?

Il s'agit ici, de réaliser un texte au format HTML5 et css3 en utilisant les principales balises de ce langage, puis de le transformer en livre électronique au format EPUB3 avec Calibre pour, enfin, le diffuser via une bibliothèque en ligne ou par téléchargement.
Le format HTML étant à la base du format EPUB, plus encore dans sa version 3, ce guide vise à maîtriser au mieux la mise en forme et pourra être réutilisé, par exemple avec un logiciel de traitement de texte.

Rappelons que l’EPUB est un format universel de publications numériques, basé sur les standards du Web (HTML/CSS) et que Calibre est un logiciel Open Source permettant de gérer votre collection d'e-books en toute simplicité. Grâce à celui-ci, vous pourrez, en effet, enregistrer vos E-books, les gérer, les lire et, surtout, les convertir en différents formats.
L'intérêt principal de cette méthode est la totale maîtrise de la chaîne de publication du livre avec des outils simples et libres.
Si le format EPUB a désormais atteint une maturité intéressante, sa réalisation demande toujours une rigueur absolue dans le code. La moindre erreur peut empêcher toute lecture.

Epub version 2 ou 3 ?
La majorité des livres et des systèmes de lecture sont en ce moment en version EPUB 2. Mais le EPUB3 est désormais très largement pris en charge et les grands constructeurs soutiennent le EPUB3. C'est pourquoi, l'on propose souvent des versions 3 rétro compatible version 2 sans forcément utiliser toutes les possibilités de la version 3 mais en s'assurant ainsi de la plus grande lisibilité possible.
C'est l'approche qui a été choisie ici. Retenir les caractéristiques intéressantes de la version 3 mais en conservant également celles qui pourraient l'être dans la version 2, notamment pour générer la table des matières.

Mais les différents logiciels de lecture interprètent différemment la page, voire pas du tout malgré la validation du XHTML par le W3C et du format EPUB par EpubCheck, et aucun ne rivalise réellement avec un navigateur Web dans la qualité de restitution. On est un peu comme au début du Web, lorsque chaque navigateur interprétait les balises à sa guise et en inventait d'autres, propriétaires, au grand désespoir des codeurs, tout comme des utilisateurs.
Le plus souvent, pour peu que votre livre ne soit pas du texte au kilomètre, cela signifie alors, soit produire un document largement compatible mais sans toutes les possibilités du HTML5/CSS3, soit être condamné à produire un epub par marque de lecteur.
A se demander si plutôt qu'une application et un ecosystème fermés, le navigateur Web n'a pas encore un grand avenir...

La version HTML de ce guide (celle-ci) est celle qui sera le plus souvent mise à jour (dernière en juin 2013).


Contact : http://www.tahitidocs.com/outils/mails/contact.php


1 La lecture numérique


A faire

Pour aller plus loin !

Cours de Hervé Le Crosnier

Les cours de Culture Numérique dispensés par Hervé Le Crosnier à l'Université de Caen.
Lien Sommaire des cours
Lien Le livre numérique

BnF : L'aventure du livre.

Des parcours pédagogiques pour les classes, des ressources, bibliogaphie, la typographie.
Lien Lien

Baromètre des usages du livre numérique.

Baromètre semestriel, réalisé pour les auteurs et éditeurs, associés au sein de la SOFIA, sur les évolutions des usages du livre numérique.
LienLien

Les acteurs de la chaîne du livre à l'ère du numérique.

Le Centre d'analyse stratégique en partenariat avec le Centre national du livre propose une série de 3 notes d'analyse accompagnées de propositions. 
Lien Lien

La lecture est avant tout une question de supports: matières et formes. Os, plastrons de tortue, fond de caverne, pierre, bois, tablette d'argile, or et divers métaux, soie, ivoire, marbre, papyrus... on ne compte plus le nombre de supports ayant été utilisés.

Si le support papier s'est imposé depuis 6 siècles grâce à l'imprimerie, il n'en a pas moins évolué pour autant. On peut même dire que le papier d'aujourd'hui n'a plus grand chose à voir avec celui d'hier.
« Ceux qui disent tant aimer « l'odeur du papier » n'ont pas connaissance des 4 ou 6 % de chaux vive en couche fine sur la page qu'ils respirent, pour la rendre hydrofuge et économiser sur les micro-gouttelettes du jet d'encre. Ni d'ailleurs que cette odeur est plutôt celle de la colle et de l'encre que celle du papier (résidus de tri sélectif blanchis à l'acide puis aggloméré en mélasse colorée pour casser le blanc et ne pas se déchirer dans le nouveau roulage), et surtout éviter en ce cas de les informer des différents composants chimiques inhalés dans cette odeur d'encre[1] ».
Et les similitudes entre livre papier et livre électronique sont nombreuses.

L'altération tout d'abord. Dès 1750, l'on trouve un rapport soulignant la faible qualité du papier et les problèmes de conservation. Jusqu’au moyen âge, la conservation ne constituait pas un problème majeur : bonne qualité des matériaux utilisés pour la création des archives et nombre limité de documents l'explique aisément. Le problème de la conservation des archives est devenu préoccupant avec l’invention de l’imprimerie... et la mauvaise qualité du papier.
Ce problème de conservation est reproché également au support électronique. Notons d'ailleurs que les problèmes de conservation des documents électroniques relèvent plus souvent de problèmes de lecteur et de format, que de conservation brute[2].

Le deuxième aspect est la notion de page que l'on a le plus souvent voulu rendre fluctuante. Or, si elle se recompose à la demande, elle reste ensuite la même tout au long de la lecture. La notion d'unité d'information se retrouve aussi dans le livre numérique. En tout cas bien plus que dans la page Web dont le livre numérique est finalement issu.

Même l'idée de lecture séquentielle peut être questionnée. La lecture numérique, comme la lecture papier est souvent bien moins linéaire que ne l'affirment les auteurs, à leur grand regret, sans doute. Mais aussi plus séquentielle...

Au total, ce qui différencie fondamentalement le livre numérique, c'est bien la place du lecteur, qui devient co-auteur, copieur, colleur, informateur, en interaction permanente avec d'autres lecteurs. Et si le livre, qu'il soit papier ou numérique est souvent fini, du moins du point de vue de l'auteur, côté lecteur il ne fait que commencer sa vie. Le partage de notes, de commentaires, d'enrichissements divers voire de livres entiers est de plus en plus courant.

La lecture numérique est donc d'abord une lecture sur un support numérique, un écran, mais aussi un logiciel, des formats, une connexion et une interaction...

Et ce qui différencie fortement le livre papier du livre numérique, c'est que l'un est fini quand l'autre est en perpétuelle évolution.


 

[1] François Bon. Je n’ai jamais dormi avec un chalutier. https://tierslivre.net/spip/spip.php?article2342

[2] La vidéo originale des premiers pas sur la lune n'est plus accessible. Ce que l'on voit, c'est une télévision filmée. Le format original, le Slow Scan TV (SSTV) n'est lisible que par un seul appareil, qui se trouve au Goddart Space Flight Center.


1.1 Des écrans et des hommes

La lecture numérique c'est d'abord de la lecture sur écran. Ces écrans sont de types différents.

A faire

Pour aller plus loin !

Incruster des sous-titres

Pour incruster des sous titres sur une vidéo avec VLC, il suffit de créer un fichier texte dans lequel vous placez des lignes au format suivant avec l'extension srt :

1
00:00:22,00 --> 00:00:35,00
On m'a vu dans le Vercors
Sauter à l'élastique
Voleur d'amphores
Au fond des criques

2
00:00:37,00 --> 00:00:42,00
J'ai fait la cour à des murènes
J'ai fait l'amour
J'ai fait le mort

3
00:00:44,00 --> 00:00:48,00
T'étais pas née

TV Née en 1884, quand l'inventeur allemand Paul Nipkow fait breveter un dispositif d'analyse d'images par lignes, le téléviseur est un terminal qui permet également de lire des textes. L'on pense évidemment aux sous titres, mais il faut également se souvenir que les premiers ordinateurs personnels, de type Thomson de la série TO dès 1982 ou ATARI à partir de 1985 pouvaient être reliés à la télévision.
« Tableur/grapheur, traitement de texte, carnet d'adresses, traducteur anglais - allemand - français - italien - espagnol - portugais, éditeur de texte, répondeur téléphonique, gestion fontes Calamus, impression d'enveloppe, reconnaissance de caractères, PAO... »
Non ce n'est pas la dernière version de LibreOffice ou de Google docs, mais bel et bien les caractéristiques du traitement de texte   « Le Rédacteur 3 », sur Atari, à sa sortie le... 1er juin 1990...


TV numérique Une télévision connectée ou « Smart TV » est une télévision raccordée, directement ou indirectement, à Internet afin de fournir un ensemble de services aux téléspectateurs. La télévision, depuis son invention, n'a toujours été, jusqu'à ce jour, qu'un terminal de réception.
Techniquement, c'est la combinaison d'un écran (en général HD), d'un système logiciel (OS, navigateur, etc.) et la possibilité d'accéder à des contenus à la demande. Les Smart TV peuvent être plus ou moins mises à jour à distance grâce à la connexion et au téléchargement mais l'évolutivité des téléviseurs connectés est limitée.
Connecté, le téléviseur devient également émetteur. La connexion se fait généralement via une prise réseau, le fameux connecteur « RJ45 », ou une interface Wi-Fi, permettant de la connecter à un réseau internet domestique.
Lien Les nouveaux usages de la télévision connectée


smartphone Un smartphone est un téléphone mobile disposant aussi des fonctions d'un assistant numérique personnel. La saisie des données se fait par le biais d'un écran tactile ou d'un clavier.
Il fournit des fonctionnalités basiques comme : l'agenda, le calendrier, la navigation sur le web, la consultation de courrier électronique.
En 2012, 722,4 millions de smartphones ont été vendus dans le monde, soit 46% de plus qu'en 2011. Côté système d'exploitation, Androïd et iOS sont toujours au coude à coude avec Windows Phone comme arbitre.
Les résolutions courantes sont désormais de 800 X 480 pixels, pour les plus faibles, et 1080 X 1920 pour les plus poussées, à ce jour.
Rappelons-nous que 800 X 600 pixels, c'était la résolution maximale d'un écran, pas encore plat, d'il y a 15 ans à peine...
41 % des Français possèdent déjà un Smartphone et 15 % une tablette numérique en 2012. Connecté à internet, il sert en premier lieu à gérer ses mails (pour 75 % des sondés), à mener des recherches sur internet (60 %), à échanger sur les réseaux sociaux (57 %) et à gérer son compte bancaire (44 %).


Tablette Les tablettes à écran LCD, ou liseuses, à encre électronique. Les tablettes sont plus polyvalentes, les liseuses plus adaptées à la lecture numérique de textes longs et moins rémanentes.
Mais le marché des liseuses semble s'écrouler : 300 000 liseuses ont été vendues en 2012 contre 3,4 millions de tablettes. A tel point que certains, peut-être un peu vite, prédisent la fin des liseuses. Les appareils à usage unique ont toujours eu du mal à rivaliser avec les machines plus polyvalentes. Le multitâche des tablettes a gagné face à l'unitâche des liseuses.
Poids, autonomie, qualité de lecture restent du côté des liseuses qui sont désormais rétroéclairées et (légèrement) en couleur. Polyvalence (musique, jeux, vidéo, lecture...), qualité de couleurs des écrans, côté "frime" (essayez de le faire avec une liseuse, surtout un élève, la première réaction c'est toujours du genre : "ah ! C'est ça ? ") font que les tablettes semble l'emporter largement. Les liseuses n'auront été qu'un dispositif de transition.
Après une première génération marquée par la domination des écrans de 9,7 pouces (25 cm de diagonale environ), les miniformats (entre 7 et 8 pouces) s'imposent désormais entre les mains des consommateurs.
Cette catégorie de tablettes plus petites a commencé à émerger en 2012 et connaît un succès fulgurant. Elles devraient même représenter les deux tiers des ventes de tablettes dans le monde cette année, selon le cabinet Display Search.


Papier électronique Le papier électronique, ou e-paper, se compose de deux feuilles de plastique entre lesquelles se trouvent des milliers de micro-capsules qui renferment des pigments électro-sensibles noirs et blancs comparables aux pigments d'encre du papier imprimé. On n'en est pas encore au papier journal plié en quatre, mais on s'en rapproche de plus en plus, lentement certes...
La liseuse de Wexler par exemple, a une résolution de 1024 par 768 pixels, 15,1 cm de haut, 13,4 de large pour une épaisseur de 4 millimètres.
Sous le nom de Digital Paper, Sony lancera en mars 2014 un terminal de lecture tactile et flexible doté d'un affichage de 13,3 pouces avec lequel il cible les salles de cours des universités. Cet équipement de 358 grammes ne dépassera pas les 7 mm d'épaisseur. Il mesure 233 x 310 mm, dispose d'une connexion Wi-Fi, d'une mémoire interne de 4 Go et d'un port pour une carte mémoire microSD. A suivre !
Lien www.ecranflexible.com/


Sur la différence entre lecture à l'écran et lecture papier, voir le dossier qui y est consacré sur Eduscol.
Lien eduscol.education.fr/numerique/dossier/lectures/lecture-sur-ecran


1.2 Formats

Un livre numérique c'est un fichier, qui peut en contenir beaucoup d'autres, par exemple dans le cas du fichier epub qui est en fait un mini-site Web avec ses fichiers (x)html, sons, vidéos, tout simplement compressé.
Qui dit fichiers dit formats.

Nous n'aborderons ici que les formats ouverts, interopérables, autrement dit sans aucune entrave légale à leur libre utilisation. Un document enregistré dans un format ouvert sera indépendant du logiciel utilisé pour le créer, le modifier, le lire et l'imprimer. L'interopérabilité laisse également le choix du logiciel pour la lecture.
Pouvoir lire au moins un format ouvert, permettre l'exportation des données personnelles, voilà deux critères pour ne pas dire exigences minimales pour tout outil de production de données.

Deux formats principaux :

- Le format PDF

« Le Portable Document Format, communément abrégé en PDF, est un langage de description de pages créé par la société Adobe Systems et dont la spécificité est de préserver la mise en forme d'un fichier – polices d'écritures, images, objets graphiques, etc. – telle qu'elle a été définie par son auteur, et cela quels que soient le logiciel, le système d'exploitation et l'ordinateur utilisés pour l'imprimer ou le visualiser. »
Lien http://fr.wikipedia.org/wiki/Portable_Document_Format

La première version date de 1993. Pour garantir la portabilité, Il faut utiliser et intégrer dans le PDF l'une des polices redistribuables (quatorze polices sont fournies en standard). Le lecteur  « Adobe Reader », est diffusé gratuitement par Adobe. Le « rédacteur » est payant.
De nombreux autres lecteurs, dont certains sous forme de logiciels libres sont également proposés. PDF possède un système de gestion numérique des droits (DRM), qui permet de limiter la lecture ou la modification du document. L'intégration de vidéo ou de fenêtres 3D est possible.

Il existe de nombreux outils pour générer du PDF. Libre office ou OpenOffice permettent une exportation directe, de même que les dernières versions de Word. Citons également PDFcreator, qui s'installe comme une imprimante et qu'il suffit de sélectionner comme telle pour générer un fichier PDF.
Cependant, pour une gestion optimisée des PDF, par exemple des formulaires éditables et enregistrables, le logiciel original, autrement dit Acrobat d'Adobe reste incontournable.
Lien http://www.adobe.com/fr/products/acrobat.edu.html

- Le format epub3

 « .EPUB » est l'extension de fichier d'un  format XML pour le reformatage des livres numériques et des publications. La version 3, basée sur les normes HTML5 et CSS3, met l'accent sur l'interactivité, permet l'insertion de fichiers audio ou vidéo et la prise en charge de l'affichage de toutes les langues. Javascript pour l'interactivité, SVG pour les images (vectorielles, exemple), text-to-speech (TTS) pour la synthèse vocale, prise en compte des métadonnées.
Ce format atteint désormais une maturité suffisante. Les textes européens seront d'ailleurs tous accessibles dans ce format numérique et dans 23 langues.

Lien http://idpf.org/epub/30


1.3 Les Reader ou logiciels de lecture

Le principal format ouvert, de plus retenu par l'Europe étant le Epub, en fait un fichier HTML (en version 5 et css version 3 dans la version EPUB3), il est possible de lire ce type de fichiers directement dans le navigateur pour peu que l'on y ajoute des plugins, pour l'instant.

Les plugins

Les logiciels

Les applications

Une application est un programme autonome et généralement très fermée, qui s'installe sur une tablette ou un téléphone. Elle simplifie un usage, mais le rend également plus fermé et trop lié à un écosystème dont le but est le plus souvent mercantile...

Les extensions pour traitements de texte

Les extensions Writer2Pub et Writer2Latex pour les suites bureautiques Open Office ou Libre office permettent de générer un fichier EPUV à partir d'un document texte.

Les logiciels

Mais pour créer un fichier au format EPUB, le plus simple est de faire un fichier au format HTML conforme au format xHTML5, et de le mettre en forme via une feuille de style au format CSS3, ce qui le rend lisible dans tout navigateur moderne, et permet de le convertir ensuite en EPUB avec Calibreou de faire entièrement son EPUB manuellement. .

Les sites d'édition en ligne

Ces sites permettent l'édition en ligne à partir de format textes standards. Ce sont des sites très pratiques avec une mise en ligne simplifiée. Il suffit de créer un compte, de se connecter, d’uploader son fichier et de choisir la forme de publication.
Les premières publications sont en général gratuites, une version payant permet d’avoir plus d’espace et de fonctionnalités. Les formats sont propriétaires mais la disponibilité en ligne et la facilité d'utilisation en font des outils très pratiques, sauf pour se faire payer des droits.


calameo Calameo, est une application pour créer des publications interactives instantanément sur Internet. A partir d'un fichier PDF, texte, (principaux formats tous supportés) mais pas html vous créez magazines, brochures, catalogues de vente, rapports annuels, plaquettes de présentation


Lien Exemple


Isuuu ISUU, est le pendant de Calameo en anglais en version plus graphique avec un lecteur est en flash

Lien Exemple




Scribd Scribd, propose des diaporamas, pages à faire défiler, du scroll en HTML 5, licence de publication en CC. Les mises en pages sont moins élaborées qu'avec Calameo, par exemple, les fichiers PDF sont simplement repris ce qui représente un intérêt sommes toutes limité.

Lien Exemple


slideshare Slideshare est une plateforme d'hébergement en ligne de présentations et diaporamas (principalement des fichiers aux formats PPT, ODP et PDF), rachetée en 2012 par LinkedIn. Slideshare est un outil de diffusion de documents à vocation pédagogique/didactique ou commerciale, qui privilégie les présentations visuelles (photos métaphoriques, icônes, flèches explicatives, tableaux, etc.) comprenant des liens et une progression logiques

Lien Exemple

A signaler également, Google docs permet également l’édition et la modification en ligne.


1.4 La chaîne du livre

Avec le livre numérique, la chaîne du livre est profondément modifiée. Editeur, diffuseur et distributeur ne font plus qu'un et le modèle économique est profondément remanié.

Chaine du livre

Une étude[1] datant de 2003 montre que les droits moyens pour un auteur en littérature générale étaient de 9,56 % du prix de vente HT et de 6,57 % pour un livre de poche.

Que ce soit pour les versions papier ou numérique, celui qui se sucre c'est d'abord l'éditeur...
Si vous touchez bien 70 % du prix du livre chez Amazon, c'est à condition de faire votre livre vous-même, sinon c'est l'éditeur qui prend 55 % du prix et vous laisse 15 %. Les syndicats des éditeurs sont puissants, ceux des auteurs ne le sont pas, ceci expliquant cela.

Pour lutter contre cette évolution inéluctable, la réponse française fut inique.
Promulguée le 29 mai 2011, la loi sur le prix unique du livre numérique est entrée en application. Unique au monde, et l'on devine pourquoi, la loi sur le prix unique du livre numérique oblige tous les éditeurs de livres situés en France à fixer le « prix de vente au public » des versions numériques des livres qu'ils éditent, et oblige tous les marchands à s'y conformer dès lors qu'ils vendent des livres à des acheteurs situés en France.

Cette loi a surtout pour effet de s'exonérer d'une réflexion quelque peu sérieuse sur les modèles économiques et faire plaisir à quelques lobbys. Quand on rémunère un auteur entre 6 et 10 % du prix de vente, contre 70 % en autoédition, il est urgent de réfléchir et de proposer de nouveaux services, ou prendre le risque de suivre la pente de la pente abyssale de Kodak.

Droit de prêt

La directive 2006/115/CE, transposée, reconnaît à l'auteur en ses articles premier et 3.1 le droit exclusif d'autoriser ou d'interdire la location et le prêt de l'original et des copies de son œuvre. L'article 6.1 de la même directive précise toutefois que les États membres peuvent déroger à ce droit exclusif à condition que les auteurs (et leurs ayants droit) obtiennent une rémunération au titre de ce prêt.
En France, en vertu de l'article L.133-1 du Code de la propriété intellectuelle et de l'article 6.1 de la directive, l'auteur, qui ne peut s'opposer au prêt, perçoit une rémunération. La Société française des intérêts des auteurs de l'écrit (la SOFIA) est gérée à parité par les auteurs et les éditeurs et agréée par le ministère de la Culture et redistribue les revenus au titre du droit de prêt. Le financement est assuré pour partie par les libraires qui reversent à la SOFIA 6 % du prix public HT des livres achetés par les bibliothèques de prêt et pour partie par l'État qui verse 1,50 € par inscrit en bibliothèque publique et 1 € par inscrit en bibliothèque universitaire.


 

[1] Le Börsenverein a commandé une étude sur les rémunérations réelles des auteurs et les possibles conséquences d’une augmentation des droits d’auteur sur l’économie des maisons d’édition.


1.5 L'autopublication

L'autopublication est le « processus de mise en forme d'un contenu sélectionné, collecté, agrégé, synthétisé, en vue de sa diffusion sans intermédiaire ».
Autrement dit, il s'agit de se passer de libraire et d'éditeur mais pas forcément de diffuseur, les plus souvent via des plateformes d'édition en ligne.

L'autopublication permet à l'auteur d'un livre de bénéficier d'une rémunération maximale. Même vendu à 3 euros, la rémunération nette est équivalente à celle d'un livre papier vendu à 20 euros...
Evidemment, du coup, l'auteur ne bénéficie ni du réseau des libraires, ni de la promotion faite par les éditeurs. C'est également à lui de faire ou faire faire son livre électronique. Et de nombreuses sociétés s'engouffrent sur le marché, profitant de la difficulté qu'il y a toujours à faire facilement un livre au format EPUB, alors que cela devrait être aussi simple, rien techniquement ne l'empêche, qu'un " enregistrer sous " avec un traitement de texte.
De là à dire que cela arrange certains...
Aux Etats-Unis, 250 000 livres numériques ont été auto-édité en 2011.

Cependant, en suivant les conseils de ce guide, vous aurez tous les éléments pour réaliser et publier votre livre.
La première question à se poser, c'est d'ailleurs : « Est-ce que je souhaite être lu  ? ».
Cette question est à distinguer de celle-ci : « Est-ce que je souhaite être publié ? ».


Quelques règles pour être lu.

De nouveaux modes de rémunération commencent à voir le jour :

Voir rubrique « vers de nouveaux modèles économiques ? ».


1.6 Bibliothèques numériques

A faire

Info Plus !


Ngram Viewer
est une application linguistique qui repose sur la base de données textuelle de Google Livres et permet d'afficher le nombre d'occurence d'un mot dans les livres sur un graphique.


Amazon

AmazonDepuis l'année 2000 pour la France, Amazon propose des livres, disques, à la vente. En 2011, c'est le lancement de Kindle, Kindle store.
Le service Kindle Direct Publication permet de publier Directement un livre. La redevance sera de 70 % si son prix est compris entre 2.60 € et 9.70 €. Amazon propose aussi aux particuliers de vendre leurs propres objets.

Lien http://www.amazon.fr/


Gallica

GallicaLa BnF permet de consulter la reproduction de plus d'un million huit cent mille documents sous format texte, image ou sonore. Ses collections s'élèvent à un nombre total de 14 millions de livres et d'imprimés avec un accroissement d'environ 150 000 volumes par an par le dépôt légal et par acquisition.
Gallica  est la bibliothèque numérique de la Bibliothèque nationale de France. Si les premières numérisations datent de 1992, et le projet Gallica de 1997, ce n'est qu'en 2005 la « numérisation de masse » est commencée.
Gallica intra muros donne accès aux documents sous droits d'auteur, uniquement depuis la bibliothèque de recherche.
Le 15 janvier 2013, signature de deux accords de numérisation et de diffusion pour les livres anciens et les fonds musicaux de la BnF. L'accord de numérisation porte sur des œuvres du domaine public uniquement, et prévoient une exclusivité de commercialisation des œuvres pour les entreprises partenaires.
Ce qui n'est pas aux goûts de tous et permet de s'interroger sur les modèles économiques...

Lien http://www.actualitte.com/reportages/bnf-sacrifier-le-domaine-public-pour-numeriser-les-indisponibles-1928.htm
Lien http://gallica.bnf.fr/

Google books

Google bookGoogle books est né en 2004 et a pour ambition de numériser tous les livres. La bibliothèque mondiale numérique est désormais un horizon possible.
Mais pas sans poser quelques problèmes...
Tout le processus de numérisation est secret. Seules 6 secondes d'images existent sur le sujet. Et Google ne demande pas toujours l'autorisation avant de numériser...
Google est-il une librairie ou une bibliothèque ?
Des millions de livres, un projet, souvent contesté de bibliothèque mondiale, un modèle économique remis en cause notamment par 6 CNIL européennes qui demandent une plus grande transparence, ainsi qu'un contrôle de l'utilisateur sur le croisement des données des différents services, l'esprit Google fascine et irrite en même temps.

Lien http://books.google.com/

Izneo

Izneo Les principaux éditeurs de bandes dessinées se sont associés pour lancer Izneo, une offre de lecture de BD numérique. Possibilité de location, d'achat ou d'abonnement mensuel. Une offre bibliothèque, malheureusement à un prix inaccessible pour un centre de documentation d'établissement scolaire.



Lien http://www.izneo.com/

Le Livre scolaire

livre scolaire Un manuel papier. Un manuel numérique personnalisable et vidéoprojetable, l'intégralité du contenu des livres librement accessible. Des outils interactifs pour évaluer ses élèves et travailler par compétence. Des exercices. Essentiellement pour le premier degré à ce jour.



Lien http://lelivrescolaire.fr/


Livres pour tous

Livre pour tousPlus de 5000 livres gratuits en français, classés par rubriques. Recherche par mots clés ou par catégories, Egalement un classement top 50 livres, des biographies, un annuaire littéraire. Livres en français et sans DRM. Nouveautés sous forme de flux RSS.



Lien http://www.livrespourtous.com/

Numelyo

Numyleo La bibliothèque municipale de Lyon, deuxième bibliothèque de France par ses collections, a mis en ligne un accès numérique, grâce à un partenariat très contesté avec Google[1]. Les internautes pourront découvrir 55 manuscrits mérovingiens et carolingiens de la bibliothèque municipale ainsi que la presse lyonnaise de 1790 à 1944, plus de 8000 estampes, 22000 photos, 500 affiches ou encore 400 livres anciens.
Guichet du savoir (Vous avez une question ? Nous avons une réponse !).
Lien http://numelyo.bm-lyon.fr/

Numilog

Numilog Catalogue de livres numériques en français. Rubrique de livres gratuits mais également des livres en prêts « autodestructibles ». Format PDF ou EPUB, rubrique livres sans DRM. Applications pour IOS IOS, WIN8 Windows 8 et androïd Androïd.




Lien http://www.numilog.com

Scribd

ScribdScribd est un site de partage de documents en ligne depuis mars 2007. Annoncée comme étant la plus grande bibliothèque en ligne du Monde ! Le téléchargement des ouvrages reste réservé aux utilisateurs inscrits. La publication se fait par simple téléchargement et conversion, le cas échéant, en HTML5.




Lien http://fr.scribd.com/

Selinum

SelinumSelinum signifie SErveur de LIvres NUMériques. C'est un serveur qui vise à indexer tous les ouvrages libres de droits c'est-à-dire dont les auteurs sont morts il y a plus de 70 ans en règle générale, pour des auteurs français ou des traductions d'auteurs étrangers qui correspondent aux programmes d'enseignement du second degré (de la 6e à la Terminale).
Recherche par niveaux, type, genre, public visé, affichage par discipline...

Lien http://disciplines.ac-bordeaux.fr/selinum/

Sésamath

sesamathL'association Sésamath a pour devise : « Les mathématiques pour tous ». Elle favorise les échanges entre les professionnels de l'enseignement, public auquel elle s'adresse initialement. Des ressources gratuites, sans publicité, de qualité et pour tout, mais malheureusement un projet trop peu soutenu par le ministère de l'Education Nationale même si les Rectorats prennent les coûts en charge (en partie)...
Et pourtant un modèle à suivre !

Lien http://www.sesamath.net/

Wikisource

Wikisources124 659 textes, passés dans le domaine public ou publiés sous licence libre. Wikisource est un projet de la fondation Wikimedia élaboré par des contributeurs bénévoles. Textes par langue, période, au hasard, par catégories ou moteur de recherche. Guides, tutoriels, scriptorium...




Lien http://fr.wikisource.org/wiki/Accueil


Une sélection plus complète de sites : http://lisletdelisle.fr/textes/ebooks.php


Plus d'infos ?

Lien http://eduscol.education.fr/numerique/dossier/lectures/livrelec
Lien http://eduscol.education.fr/numerique/dossier/lectures/manuel

 

[1] NumeLyo, la bibliothèque numérique de Lyon, et l'ombre portée du contrat de Google
http://scinfolex.wordpress.com/2012/12/15/numelyo-la-bibliotheque-numerique-de-lyon-exister-a-lombre-de-google/


1.7 Lecture/écriture numérique

« La forme dominante du livre imprimé est linéaire. L'écrivain écrit 384 pages et le lecteur lit 384 pages, l'une après l'autre. En termes formels, j'imagine cela comme une ligne droite, une courbe peut-être si vous voulez mettre en avant l'arc narratif (l'introduction, l'exposition, les conflits, la résolution, le dénouement). Le chemin est fixé par l'auteur qui lui-même travaille dans les limites imposées par la pagination et le livre relié. » Peter Meyers

C'est cette forme linéaire, qui, de fait a toujours été beaucoup plus sinueuse que les auteurs l'imaginent, qui va être brisée.
Quand le lecteur devient roi...

Il faut distinguer la lecture :

« On n'est pas lecteur papier ou lecteur numérique mais avant tout lecteur. »

Source : http://www.lemotif.fr/fr/actualites/bdd/article/2084

« En moyenne, les filles sont plus performantes que les garçons en compréhension de l'écrit électronique ; toutefois, l'écart entre les sexes est moindre qu'en compréhension de l'écrit sur papier. »


« Parmi les garçons et les filles dont le niveau de performance en compréhension de l'écrit sur papier est similaire, les garçons ont, en général, de meilleures compétences en navigation sur support électronique et obtiennent donc de meilleurs résultats en compréhension de l'écrit électronique. »


Source : Pisa à la loupe. Garçon et fille sont-ils prêts à affronter l'ère numérique ?


« Dans les pays de l'OCDE, environ deux-tiers des élèves déclarent lire par plaisir de façon quotidienne. »


Source : Pisa à la loupe. Les élèves d'aujourd'hui lisent-ils par plaisir ?


1.8 Les DRM

Le format EPUB prend en charge la gestion des droits numériques (Digital Rights Management). Les DRM ont pour objectif de contrôler l'utilisation qui est faite des œuvres numériques grâce à un système d'accès conditionnel.

Ces dispositifs techniques ou logiciels peuvent viser à :

 

Source : http://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques


Mais la bonne position du curseur entre titulaires des droits exclusifs et utilisateurs légitimes reste à trouver. De fait, actuellement, avec les DRM, vous ne possédez qu'un droit d'accès à un service, qui peut être remis en cause à tout moment. Vous ne pouvez pas revendre ou prêter vos livres électroniques. Un ouvrage acheté au travers de l'application Ibooks d'Apple ne pourra être lu sur le Reader de Sony.
Bref, on est loin d'être « comme maîtres et possesseurs » du livre.

De plus, les DRM sont facilement contournable quand l'accumulation des extraits ne permet tout simplement pas de reconstituer le livre entier. Leur utilisation est donc fortement déconseillée.

Vers de nouveaux modèles économiques

De nouvelles modalités de ventes sont désormais proposées par certains sites.

Abonnements


Publicité


Droits libérés par financement communautaire


Note ! Ce mode de financement a été proposé sous une autre forme pour les manuels scolaires. Pourquoi pas une licence globale pour les manuels scolaires ? se demandent Gilles Dowek et Jean-Pierre Archambault, deux des co-auteurs du manuel Informatique et Sciences du numérique. Ils avaient proposés d'être rémunérés une fois pour toutes pour leurs manuels et ensuite le mettre librement à disposition.
Lien http://www.epi.asso.fr/revue/articles/a1301c.htm


Bibliothèques de prêts de tablettes ou de liseuses
Plus de 200 bibliothèques en France prêtent des liseuses et tablettes numériques.
Lien http://www.netpublic.fr/2013/02/pret-liseuses-tablettes-bibliotheques/


1.9 Dénouement. La fin du papier ?

D'abord soulignons que ceux qui affirment que le papier n'est pas mort, le fond surtout sur Internet et souvent pour faire du buzz. Il n'y a que très peu d'ouvrages papier sur la question...
Lien http://www.google.com/trends/

Inversement les technologies ne disparaissent pas forcément, rapidement, et de façon inéluctable.
Il n'en reste pas moins vrai que les argumentations ont souvent un angle assez réactionnaire, binaire, assez peu en empathie avec les pratiques et souvent motivé par des intérêts personnels ou habitudes enkystée bien plus qu'une pratique réelle. La gérontocratie numérique est alors un peu à l'image de l'académie française : doucettement ringarde...
L'un n'est pas l'autre, mais l'un ET l'autre se marient bien...

S'il est difficile de faire des anticipations ou de dupliquer des modèles, l'on peut cependant constater que, pour tout produit industriel, et depuis Marlon Brando[1] nous savons qu'à l'instar du cinéma, la culture est aussi une industrie.

La première phase est alors généralement celle du doute et de la critique : ça ne marche pas bien, ça ne sert à rien...
 « Que ce soit bien clair : le livre imprimé n'est pas prêt de disparaître, et heureusement. » Tomsguide.fr/, 2009

Puis vient une phase d'installation de la technologie, de développement du marché, de progrès rapides... jusqu'au point où les courbes se coupent...
Puis... ?

A titre d'exemple, voici la courbe de vente d'appareil photos numériques de 1998 à 2006. L'on estime généralement qu'il a fallu attendre 2003 et des capteurs de 6Mpx pour que la qualité des appareils numériques soit équivalente à celle de l'argentique.

Graphique

Le 13 juillet 2010 Kodak a fabriqué la dernière pellicule de Kodachrome...

Evidemment d'autres scenarii sont possibles. Moins rapides, plus composites. Un rapport au Sénat sur La politique du livre face au défi du numérique envisage la possibilité non pas d'une substitution mais d'une addition au moins temporaire des ventes de livres papier et numériques.

Lien http://www.senat.fr/rap/r09-338/r09-3386.html

A suivre !

 

[1] "Hollywood est un cimetière culturel : le cinéma est une industrie, pas un art."


2 Structurer


2.1 Pourquoi structurer ?

Au tout début du Web, les documents au format HTML étaient assez peu structurés. L'on pratiquait surtout un balisage procédural du texte, souvent directement en ligne.
Par exemple, pour définir police et style l'on procédait de la manière suivante :

Exemple de style en ligne

  1. <FONT COLOR="black" FACE="Times" SIZE="12pt" ALIGN="left">La taille et le type de la police sont directement renseignés dans le texte.</FONT>

Avec le HTML5, de nouveaux éléments sémantiques apparaissent. Prenons cette carte de visite

Exemple de hcard

  1. <section itemtype="http://microformats.org/profile/hcard" itemscope>
  2. <h1 itemprop="fn">Weiss Denis</h1>
  3. <div itemprop="adr" itemscope>
  4. <p itemprop="street-adress">CDI des lycées Lislet Geoffroy et Leconte de Lisle</p>
  5. <p itemprop="locality">Saint-Denis de la Réunion</p>
  6. <p itemprop="postal-code">97400</p>
  7. </div>
  8. <a href="http://www.tahitidocs.com"itemprop="url">Site Web</a>
  9. </section>

Ici le marquage est descriptif. Les balises décrivent le rôle de chaque élément du texte. Les caractéristiques typographiques du document sont stockées séparément sous la forme d'une feuille de style associant une mise en forme à chaque nature d'élément.
Les documents ainsi mis en forme sont totalement indépendants du support de consultation.

Avec un document structuré, on peut :


2.2 Comment structurer un document ?

Le texte va être produit au format (x)HTML5 à l'aide d'un simple éditeur de texte, ou avec NotePad++ si vous souhaitez disposer d'un éditeur gratuit plus performant.
Le style va être réglé via une feuille de style en css3, que l'on pourra simplement recopier ou modifier :


L'avantage de cette technique réside dans le fait de disposer à la fois d'un document lisible via un navigateur et de proposer un format EPUB, affichable par les applications installées sur les tablettes.

La structure de base du document est la suivante

Exercice 1

Pour apprendre vraiment le HTML, le site du zéro par exemple sera très utile. Précisons qu'il ne s'agit pas, ici, de rentrer dans toutes les subtilités de ce langage, mais de connaître les seules balises nécessaires à la production d'un livre électronique.
Tel que, ce fichier est déjà lisible dans un navigateur.

Attention ! Votre document est produit au format HTML5, mais il faudra cependant veiller à ce qu'il soit conforme aux normes XHTML5, notamment :

Il sera également enregistré avec l'extension .xhtml et non html.
Lien www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml

2.3 Les métadonnées

entêteLes métadonnées, ou données de données, prises en compte pour l'EPUB sont celles au format Dublin Core. Elles sont contenues dans un fichier à part dans l'EPUB, content.opf et en entête de page HTML (voir illustration).

Bien qu'il ne soit pas strictement nécessaire pour la réalisation d'un epub, l'ajout des métadonnées type Web pourra être utile pour une éventuelle conversion via un logiciel tiers (type Calibre) qui les transformera en métadonnées de type Dublin Core. Elles pourront également être enrichies ou corrigées ensuite.

Le Dublin Core est un schéma de métadonnées générique qui permet de décrire des ressources numériques ou physiques. Pour plus d'informations consulter le guide la BnF ou le dossier d'Eduscol.
Mais, bien qu'existant depuis près d'une vingtaine d'années et recommandé par les organisations internationales, il faut bien dire que le Dublin Core n'est guère utilisé, par pris en compte par les moteurs de recherche et source de nombreux problèmes notamment pour la validation du document.

Même si les moteurs n'en tiennent généralement plus compte, les métadonnées HTML garantissent encore et toujours l'interopérabilité du document.
Quel que soit leur format, Dublin Core ou HTML, elles pourront toujours être reconnues et réutilisées. Il est donc fortement recommandé de les renseigner le plus précisément possible.

L'entête

Dès l'origine, un document en HTML était structuré en deux parties, l'entête (tout ce qui est entre les balises <head> et </head> et le corps du document, entre <body> et </body>.
Hormis la balise titre, affichée dans le bandeau supérieur du navigateur, tous les autres éléments de l'entête ne sont pas directement visibles. On peut y placer des informations à destination des moteurs de recherche, des liens vers des langages de programmation, toutes sortes d'éléments qui vont enrichir la page.

Les données généralement renseignées sont les suivantes :


Pour un document EPUB créé manuellement, les métadonnées seront précisées au format Dublin Core et insérées directement dans le fichier content.opf (voir chapitre 9.3).

Exemple - Chapitre-01.xhtml

  1. <head>
  2. <title>Comment réaliser un livre au format EPUB ?</title>
  3. <link href="scripts/stylemini.css" rel="stylesheet" type="text/css"/>
  4. </head>

Les balises spécifiques à l'HTML5

Structure html5

Notons qu'avec le HTML5, de nouveaux éléments apparaissent qui sont autant d'informations de nature sémantique.

Par exemple :

- <section> regroupe un même sujet, une même fonctionnalité, de préférence avec un en-tête.
- <article>, une section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
- <aside est une section dont le contenu est un complément par rapport à ce qui l'entoure.
- <header> introduction d'un article, d'une autre section ou du document entier (en-tête de page).
- <time> : pour préciser les dates et heures
- <mark> : pour marquer au marqueur une partie de texte
- <nav> : L'élément nav représente une section d'une page reliant des pages ou des parties d'une page : c'est une section servant à la navigation et qui va pouvoir servir à produire le sommaire de la page.

D'autres nouveautés existent, notamment en matière de microdatas et de microformats. Ils ne seront pas abordés ici pour la réalisation de livre numérique.

Ces nouvelles balises sont reconnues par la norme EPUB3. Par exemple la balise <nav> ca servir à la construction de la table de navigation, <aside> va permettre d'organiser les notes.


Notons que la prise en charge de MathML va également permettre d'insérer des formules mathématiques. EPUB3 va l'interpréter comme du contenu natif.
Mais la prise en charge, à l'instar de celle des navigateurs, ne semble pas encore parfaite.

Exemple - Code Mathml

  1. <math xmlns="http://www.w3.org/1998/Math/MathML">
  2. <semantics>
  3. <mrow> <msup>
  4. <mi> a</mi>
  5. <mn>2</mn></msup>
  6. <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo>
  7. <msup><mi>c</mi><mn>2</mn></msup>
  8. </mrow>
  9. </semantics>
  10. </math>

ce qui donne : a 2 + b2 = c2

Autre exemple : (a + b) (c + d) a b c d


Pour aller plus loin !

Lien www.html5-css3.fr/html5/microformats-microdata-html5
Lien www.w3.org/TR/html5/
Lien www.w3.org/TR/html5/embedded-content-0.html#mathml


2.4 L'accessibilité du Web

Il s’agit de permettre l’accès à votre document, quels que soient le matériel et le réseau utilisés, les aptitudes physiques et mentales, la langue maternelle, l’âge, ou la localisation géographique. La proportion du public concerné directement par l’accessibilité atteint 15 à 20 % en Europe.
Concrètement, une personne non voyante pourra utiliser une synthèse vocale qui lui lira successivement les éléments figurant sur une page web, si le site est bien conçu et ne comporte pas d’erreurs de conception empêchant le logiciel de synthèse de pouvoir comprendre son contenu texte. Une personne handicapée motrice pourra utiliser un périphérique de pointage différent d’une souris, avec un clavier visuel à l’écran et un petit joystick. Il existe des outils de commandes fonctionnant avec les doigts, les paupières, la langue, et même le souffle !

Quelques recommandations :

Une check list de l'accessibilité :

lien http://www.pompage.net/traduction/checklistaccessibilite

Démonstration en ligne :

lien http://www.w3.org/WAI/demos/bad/


3 Le texte


3.1 Les caractères spéciaux

Différents codages

Combien y a-t-il de lettres dans l'alphabet ?
Pour le savoir saisissons ce texte et faisons le compte :
 « Dès Noël où un zéphyr haï me vêt de glaçons würmiens, je dîne d'exquis rôtis de bœuf au kir à l'aÿ d'âge mûr & cætera ».

Alors ?
Il y a bien 42 lettres !
En informatique toutes les lettres sont d'abord des chiffres.

L'ASCII
Pour des raisons historiques (les grandes sociétés associées pour mettre au point l'ASCII étaient américaines) et techniques, ce codage ne prenait en compte que 128 caractères.
Le code ASCII ne contient ni caractères accentués, ni caractères spécifiques à une langue soient 26 lettres.
lien www.table-ascii.com/

L'ISO/CEI 8859-1
Il définit 191 caractères de l'alphabet latin, avec les caractères accentués utiles aux langues originaires d'Europe.
Mais le symbole de l'euro € ou certaines lettres (comme les lettres  « œ »,  « Œ » et  « Ÿ », ne sont pas reconnues. ISO 8859-15 ajoute entre autres le caractère de l'euro () et les caractères Œ, œ et Ÿ qui manquaient pour l'écriture du français, les caractères Š et š pour le du finnois.
lien Le E dans l'O

Unicode
est géré par une organisation à but non lucratif (le Consortium Unicode) ayant pour but d'attribuer un numéro à tout caractère utilisé dans une langue humaine.
lien Lien

UTF-8
L'Unicode Transformation Format est un encodage d'Unicode. Les premiers caractères d'UTF-8 sont communs à l'ASCII.
Les différents caractères spéciaux :
lien www.web1.pro/unicode.htm

Au tout début de l'informatique, pour des raisons de place mémoire, le codage des textes, en ASCII, ne prenait en compte que 128 caractères. Mais le code ASCII (voir encadré) ne contient ni caractères accentués, ni caractères spécifiques à une langue, soient 26 lettres.

Plus tard, la norme ISO/CEI 8859-1 retenue en Europe permettra de passer à 191 caractères mais sans les lettres Æ ni œ, pour d'obscures raisons pas très glorieuses…
En effet, le délégué français qui aurait dû indiquer son emploi courant dans la langue française était absent le jour du débat.

Comment saisir les caractères spéciaux ?

Dans un traitement de texte, appuyer sur la touche Alt du clavier et saisir le code Unicode de la lettre souhaitée puis touche entrée.

Attention ! La valeur 0169, © est différente de 169 ®
En html, le code est constitué de lettres et encadré de l'esperluette "&" et du point virgule ";"

Quelques caractères spéciaux

Lettres HTML Code Num.
Copyright : © &copy; Alt+169
Euro &euro; Alt+
Cent ¢ &cent; Alt+0162
Dollard $ $ Alt+36
Livre £ &pound' Alt+0163
E dans l'a æ Æ &aelig; Aelig; Alt+0230 Alt+0198
E dans l'o œ, Œ &oelig; Oelig; Alt+339 Alt+338
É É &Eacute; Alt+0201
Guillemet ouvr.  «  &laquo; Alt+0171
Guillemet ferm. » &raquo; Alt+0187
Triple point &hellip; Alt+8230
Section § &sect; Alt+0167
Plus ou moins ± &plusmn' Alt+0177
Point médian &bull' Alt+7
Somme &sum; Alt+8721
Racine &radic; Alt+8730
Infini &infin' Alt+8734
Micro µ &micro; Alt+0181
Degré ° &deg; Alt+0176
Phi φ &phi; Alt+966
Psi ψ &psi; Alt+968
Oméga Ω &Omega; Alt+937
Epsilon ε &epsilon' Alt+949
Un quart ¼ &frac14; Alt+172
Un demi ½ &frac12; Alt+0189
Trois quarts ¾ &frac13; Alt+0190
Tiret &ndash; Alt+150
Trait d'union - &#45; Alt+045
Barre verticale | &#124; Alt+0124
Ensemble vide ø &Oslash; Alt+0248
Paragraphe &para; Alt+0182
Signe non ¬ &not; Alt+0172
Fonction ƒ &fnof; Alt+402

lien http://www.toutimages.com/codes_caracteres.htm



3.2 Titraille

Les titres et sous-titres sont des éléments particulièrement importants. Ils vont, par exemple, permettre de générer automatiquement une table des matières. Ils seront également reconnus par les moteurs de recherche.
Les balises h1 à h6 sont considérées, par les moteurs de recherche comme étant un critère important pour le référencement d'une page web et d'un site.
Bref, soigner et préciser les titres et leur hiérarchie est très important.
L'on retrouve d'ailleurs cette hiérarchie de titres dans tous les traitements de textes, tout comme les notions de paragraphes, sauts de ligne, tabulations etc.

Les titres se placent entre les balises <h1> à <h6>.

<h1> Niveau de texte h1 </h1>
<h2> Niveau de texte h2 </h2>
<h3> Niveau de texte h3 </h3>
<h4> Niveau de texte h4 </h4>
<h5> Niveau de texte h5 </h5>
<h6> Niveau de texte h6 </h6>

Exemple - Exemple de document structuré

  1. <h1>Titre principal</h1>
  2. <h2>Titre 1</h2>
  3. <h3>1.1 Sous titre 1.1</h3>
  4. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris <em>eget magna eu risus</em> fermentum sodales eu eget leo.<br />
  5. <h3>1.2 Sous titre 1.2</h3>
  6. <p>Suspendisse accumsan convallis iaculis. <strong>Mauris</strong> vel metus vitae.</p>
  7. <h2>Titre 2</h2>
  8. <h3>2.1 Sous titre 2.1</h3>
  9. <p>...</p>
  10. <h3>2.2 Sous titre 2.2</h3>
  11. <p>Sed sollicitudin metus eget lorem tincidunt consequat aliquam diam porta XIXe seculum :
    <blockquote>C'est noukilafait !</blockquote>.</p>
  12. <p>Et c'est de <abbr> l'Hypertext Markup Language HTML</abbr> </p>

Hiérarchie type

L'on peut choisir, comme ici, de ne mettre qu'un seul niveau de titre 1 (entre <h1> et </h1>), dans la mesure où le HTML5 introduit la notion d'article. Chaque article pourra ainsi posséder sa propre hiérarchie de titre de <h1> à <h6>.
Il est très rare d'arriver jusqu'au niveau h6.
En général, 3 ou 4 niveaux de titres suffisent largement.


3.3 Les paragraphes

<p>Ceci est un paragraphe.</p>
Il faut distinguer fin de paragraphe </p> et retour à la ligne <br />.
Lorsque vous appliquez un style, c'est généralement à l'ensemble d'un paragraphe. Que ce soit avec un traitement de texte (Maj + Entrée) ou en html, il est donc important d'utiliser le retour à la ligne aussi souvent que nécessaire.
A l'intérieur des paragraphes, l'on pourra insérer des sauts de ligne avec la balise <br />. La balise <br> n'a pas de balise de fermeture et peut s'écrire <br> en html pur. Mais pour respecter la norme XHTML on ajoute un élément de fermeture / ce qui donne <br />.

Mise en forme sémantique des paragraphes :


Différents degrés d'importance du texte
em

L'élément <em>indique le texte doit être souligné vocalement, en emphase. Il s'agit d'un procédé linguistique qui donne de l'importance ou une affectation pompeuse au discours. Il ne doit pas être confondu avec <i>, même si son apparence par défaut est un style de texte

strong

L'élément <strong> confère au texte une forte importance, comme lors de déclarations impératives ou en utilisant des mots de signal comme «avertissement» et «d'alerte».
Visuellement, il est représenté par un corps de police plus gras, mais contrairement à <b>, il possède une réelle valeur sémantique. Du contenu placé entre balises <strong> doubles aura deux fois plus d'importance.

i

L'élément <i> est utilisé lorsque l'utilisation de l'italique indique un changement de ton ou de la voix. Un exemple fourni dans la spécification HTML5 est une séquence de rêve prolongé, mais pourrait être n'importe quelle divergence similaire du récit principal dans la pensée ou le souvenir. L'élément <i> est également utilisé chaque fois qu'il y a une signification sémantique derrière l'accent (par exemple, les mots en italique indiquent un terme technique, les mots étrangers, etc.)

b

L'élément <b> est utilisé chaque fois que la mise en gras est porteuse de sens sémantique, et cela similaire à l'utilisation d' <i> pour le marquage sémantique (par exemple, mots-clés).

font-style:italic
font-weight:bold

Les propriétés CSS pour la mise en gras et en italique doivent être utilisés chaque fois que l'utilisation de caractères gras et en italique est de présentation (par exemple, sur titres et de plomb dans les mots). Mise en forme CSS porte pas de sémantique, de sorte que l'accent ne sera pas noté par les technologies d'assistance.


3.4 Les espaces

Votre texte pourra être redimensionné à loisir. Il est donc très important de mettre les espaces insécables aux bons endroits. Précisons tout d'abord que l'espace (masculin) entre les mots est composé d'espaces (féminin) de taille variable. On distingue donc :


Espace avant Ponctuation Espace après
Aucune Point point  Espace justifiante
Aucune Virgule virgule Espace justifiante
Espace insécable Deux-points deux-points Espace justifiante
Espace fine insécable Point-virgule Point-virgule Espace justifiante
Espace fine insécable Point d'exclamation Point d’exclamation Espace justifiante
Espace fine insécable Point d'interrogation Point d’interrogation Espace justifiante
Espace justifiante Guillemet ouvrant Guillemet ouvrant Espace insécable
Espace insécable Guillemet fermant Guillemet fermant Espace justifiante
Espace justifiante Parenthèse ouvrante Parenthèse ouvrante Aucune
Aucune Parenthèse fermante Parenthèse fermante Espace justifiante
Espace justifiante Crochet ouvrant Crochet ouvrant Aucune
Aucune Crochet fermant Crochet fermant Espace justifiante
Aucune Trait d'union Trait d’union Aucune

 

[1] S'il y a bien une espace difficile à reproduire sur Internet, c'est l'espace fine insécable. Celle-ci n'est tout simplement pas définie dans la norme Unicode.

Source : http://typographisme.net/post/Les-espaces-typographiques-et-le-web


3.5 Les listes

Pour insérer une liste énumérative, l'on indique dans un premier temps le type de liste souhaitée :
liste numérotée (ordonnée), balise <ol>
ou liste non ordonnée, balise <ul>.
Ensuite, chaque élément de liste est entouré par les deux balises <li> </li>

Liste de type ordonnée (alphabétiquement <ol type="A">, <ol type="a"> ou en chiffres romains <ol type="i">).
L'on pourra également forcer la numérotation au énième élément grâce à l'attribut START <ol start="5">

listes OL

et non ordonnée (liste à puces)

liste UL


Ne pas insérer une liste dans un élément <p></p>.


3.6 Les notes et annotations

Les notes et annotations se composent toujours de deux éléments :

Placé dans le corps du texte papier, il s’agit d’un ou plusieurs caractères, généralement une numérotation, le plus souvent mise en exposant. Cet appel de note renvoie au corps de la note. L’appel de note peut aussi être inséré sous forme de lettres ou de chiffres romains.
En html, l'on se sert généralement des possibilités hypertexte. L'appel de note en indice[1] avec un renvoi vers le corps de la note.


 

[1] Les notes peuvent être placées à la fin du paragraphe. Un clic sur le chiffre permet de revenir au texte. Pour des raisons d'accessibilité, il est cependant recommandé de recourir le moins possible aux notes en bas de page en hypertexte.


3.7 Les tableaux

Pour créer un tableau, la balise est <table><<table>. A l'intérieur de ces balises, l'on ajoute une ou plusieurs lignes avec les balises <tr></tr> et des colonnes avec <td></td>

Tableaux

Ce qui donne :

Ligne 1, colonne 1 Ligne 1, colonne 2 Ligne 1, colonne 3
Ligne 2, colonne 1 Ligne 2, colonne 2 Ligne 2, colonne 2

Ce genre de tableau pourra, lui aussi, être mis en forme via les feuilles de styles

Navigateur Environnements Moteur Description
Internet Explorer Windows Trident Développé par Microsoft (1995), il est installé d’office avec le système d’exploitation Windows
Opera Linux, Mac OS X, Windows, BSD, Solaris, Nintendo Wii et DS, Symbian, iOS, Android Presto Développé par l’éditeur de logiciel norvégien Opera Software (1995) et est très populaire pour sa version mobile
Firefox Windows, Mac OS X et GNU/Linux Gecko Navigateur Open Source, développé et distribué par la Mozilla Foundation (2002)
Safari Mac OS X, iOS et Windows HTML WebKit Installé par défaut pour Mac OS X (Apple) depuis qu’Internet Explorer n’est plus développé par Microsoft sur Mac (2003)
Chrome Windows, Mac OS X et GNU/Linux HTML WebKit Produit par Google, Chrome est le dernier navigateur né (septembre 2008)

3.8 Les liens

Un lien est défini par une source (un texte éventuellement affiché) est une cible, la page vers laquelle renvois la source.

Lien hypertexte

Dans ce lien


Différents type de liens


4 Les images, la vidéo, l'audio


Toutes les nouvelles balises HTML5 ne sont pas supportées par toutes les liseuses.

HTML5 <canvas> ::geoloc:: <audio> <vidéo> MathML
IBooks oui oui oui oui oui
Safari Books oui oui oui oui oui
Kindle Apps non non oui oui non
Kindle Fire non non non non non

4.1 Les images

Les formats les plus couramment répandus sur le Web sont le jpeg et le PNG. Le format Jpeg est conçu pour réduire le poids des photos (c'est-à-dire la taille du fichier associé), et dégrade assez peu l'original lors de la compression. Le format PNG, plus récent, est adapté à la plupart des graphiques et est destiné à remplacer le format GIF.
L'EPUB prend en compte les images au format svg. Il s'agit d'un format vectoriel, qui évite donc aux images de se déformer, de pixelliser, lors de leur redimensionnement, ce qui est important notamment pour la page de couverture.
De fait l'on se souciera simplement ici de n'utiliser que des images au format jpeg (pour les photos) et png (pour les graphiques), en prenant soin de les réduire à la bonne taille. Attention aux png qui peuvent prendre des tailles bien différentes selon leur encodage.

fleur lotusLa balise <img> est de type orpheline. Comme la balise retour de ligne elle n'est pas fermée. On n'omettra cependant pas de l'indiquer par le caractère />.

On lui adjoint deux attributs :

Images

Pour intégrer une image, le code est très simple :

Exemple - Insérer une image

  1. <img src="images/monimage.png" alt="mon image" />

Les images de fond type "background-image: url('img/monsuperfond.jpg')" sont très peu supportées et donc pas recommandées.

Les images peuvent être reliées à un fichier de description au format XML

Exemple -

  1. <img id="watercycle" src="images/watergraphic.jpg" alt="The hydrologic cycle" epub:describedat="desc/watercycle.xml"/>

lien www.idpf.org/accessibility/guidelines/content/xhtml/epub-describedat.php


4.2 L'audio

Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats :

Aucun navigateur ne gère tous ces formats à la fois.
On a peut être enterré un peu vite Flash d'Adobe, qui avait au moins le mérite de prendre en charge les fichiers audios et vidéos. On ne retiendra ici que la compatibilité OGG et, surtout, celle-ci étant prise en charge par EPUB, à savoir le MP3.


Navigateur MP3 OGG AAC Wav AIIF AU
Internet Exlorer oui non non non non non
Opera non oui non oui non non
Firefox non oui non non non non
Safari oui non oui oui oui oui
Chrome oui oui oui oui non non

Internet explorer : support du MP3 à partir de la version 9.

Cela oblige à implémenter au moins deux formats de fichiers.
Idéalement, il faudrait même proposer un troisième, en version Flash.

Format MP3

Format OGG

Exemple - Insérer un fichier audio

  1. <audio src="audioVideo/son.mp3" controls >Format audio MP3 non supporté !</audio>

Lorsque vous intégrez des fichiers audio et vidéo à un livre électronique, créez un répertoire « audiovideo » pour stocker ces fichiers. Lorsque vous faites référence au fichier audio ou vidéo, incorporez le nom du répertoire dans le code HTML (Exemple : « audiovideo/nom_de_fichier ».)

Différentes barres de contrôle 

Chrome

Barre Chrome

Firefox

barre Firefox

Safari

Barre Safari


4.3 La vidéo


notes La raison réelle qui amène la plupart des entreprises à proposer des applications est le plus souvent mercantile. Il s'agit de créer un éco système captif.
Et bien souvent, les applications ne font guère mieux que leur équivalent en version navigateur...
Il est particulièrement regrettable que tous les navigateurs et toutes les applications ne lisent pas aussi, et avant tout, un format audio ou vidéo non propriétaire.
De la même manière, tous devraient respecter des critères d'interopérabilité, au moins des données de l'utilisateur et tous devraient proposer par défaut le silence des puces, autrement dit aucun envoi de données sans autorisation préalable.

Comme pour l'audio, aucun format vidéo n'est pris en charge par tous les navigateurs. Nous n'en retiendrons donc que deux :

MP4 ou WebM sont reconnus et recommandés pour EPUB.

Pour les besoins de publication électronique, téléchargez la vidéo dans un répertoire et ajoutez-là avec le code suivant :

Exemple - Insérer un fichier vidéo

  1. <video src="images/video.mp4"
  2. controls
  3. poster="images/video.png"
  1. title="Vidéo au sujet de...">
  2. Format vidéo non pris en charge !
  3. </video>

À cet emplacement s'affiche normalement un contenu vidéo qui n'est pas actuellement pris en charge par votre appareil. La légende de ce contenu est affichée ci-dessous.</video>

Lorsque vous intégrez des fichiers audio et vidéo à un livre électronique, créez un répertoire « audiovideo» pour stocker ces fichiers.
Lorsque vous faites référence au fichier audio ou vidéo, incorporez le nom du répertoire dans le code HTML (Exemple :  « audiovideo/nom_de_fichier »).


Pour un fichier HTML, l'on proposera deux formats pour être certain d'être lu par la (quasi) totalité des navigateurs.

Exemple - Insérer une vidéo

  1. <video controls='controls'>
  2. <source src="audioVideo/video.webm" type="video/webm" title="Vidéo au sujet de..."
  3. poster="images/video.png" />
  4. <source src="audioVideo/video.mp4" type="video/mp4" title="Vidéo au sujet de ..."
  5. poster="images/video.png" />
  6. Format vidéo non pris en charge !
  7. </video>

5 Le style


5.1 Le css3

Css Le CSS (Cascading Style Sheets), c'est cet autre langage, né en 1996, qui vient compléter le HTML pour gérer la mise en forme d'un site Web.
Une feuille de style va donc permettre de mettre en forme tous les éléments de votre document. Les titres (h1, h2, h3), les paragraphes, les citations, les marges, les images, tout cela va être traité via cette page. Malheureusement, tous les navigateurs ne prennent pas encore en compte actuellement (avril 2013) le CSS3, la toute dernière version des feuilles de style.
Cette page
, va vous permettre des connaître la compatibilité de votre navigateur. Toute la question est alors de savoir jusqu'à quelle version de rétrocompatibilité l'on assure le service.
De façon générale, il est toujours recommandé de mettre à jour son navigateur, ne serait-ce que pour des questions de sécurité.


5.2 Le "reset" CSS

resetTous les navigateurs ont un rendu de style par défaut... mais pas le même. Pour connaître ce rendu il suffit d'afficher cette page. Les différences sont certes minimes, mais pour uniformiser le rendu, les feuilles de styles remettent généralement toutes les valeurs à zéro.
Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains voire tous les éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs. A titre d'exemple, vous pouvez voir ce texte sans style, et avec tous les styles mis à zéro.
Il existe des modèles de feuilles de style par défaut de remise à zéro, par exemple ici : http://www.cssreset.com/
Vous pouvez également insérer tout simplement la ligne suivante dans votre feuille de style :

Exemple - Importer le reset CSS

  1. @import url(http://reset5.googlecode.com/hg/reset.min.css);

5.3 La feuille de style minimale

Exemple de feuille de style.

Pour commencer faisons un "reset" assez simple de la page. Ce reset est facultatif pour un EPUB mais reste utile, ne serait-ce que lors du test du style avec un navigateur.

Exemple - Un reset HTML

  1. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
  2. html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, em, img, small, strong, sub, sup, b, u, i, center, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; text-align: left; }
  3. /* HTML5 display-role reset for older browsers */
  4. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
  5. body {line-height: 1;}
  6. ol, ul {list-style: none;}
  7. blockquote, q { quotes: none;}
  8. blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
  9. table {border-collapse: collapse;border-spacing: 0;}

Pour se faire une idée de l'affichage avec ou sans reset CSS, voir :

Ensuite, nous allons indiquer la police utilisée.
Par exemple, pour les paragraphes, on peut régler la taille et le style de police :

Exemple - Polices

  1. {
  2. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  3. font-size:16px;
  4. }

L'on va aussi donner un style aux différents éléments de la page : liens (a), titres (h1, h2, h3...), etc.

Exemple - Les titres

  1. h1,h2,h3,h4,h5,h6 { color:#333; font-weight: bold'}
  2. h1 {font-size:1.5em; margin: .67em 0 .67em 0;}
  3. h2 {font-size:1.25em; margin: .8em font-weight: bold' color: #336699;
    font-style: italic;}
  4. h3{font-size:1.125em; margin-left:1em; margin-bottom:.2em}

Pour appliquer la feuille de style à un document au format HTML, l'on fera appel à elle tout simplement par à la ligne suivante :

Exemple - L'appel de style

  1. <link rel="stylesheet" href="styles.css">

Vous pouvez également réutiliser la feuille de style appliquée à ce texte, tous simplement en l'appelant via le code suivant :

Exemple - L'appel de style distant

  1. <link rel="stylesheet" media="screen" href="http://www.tahitidocs.com/cours/epub/css/styleEpub.css" type="text/css">

où styleEpub.css est le nom de la feuille de style.

A noter ! Nous pourrions parfaitement réaliser plusieurs feuilles de styles et afficher le document différemment, par exemple :

Exemple - "Media Queries"

  1. /*pour un écran dont la largeur d'affichage est inférieure à 640 px : */
  2. <style media="screen and (max-width:640px)"> /* … instructions CSS … */
  3. </style>
  4. /*Pour l'impression <style media="print"> /* … instructions CSS … */
  5. </style>

Mais il ne s'agit pas, ici de faire un cours complet sur le CSS, loin de là. Pour plus d'information je vous renvoie donc ici.

Liste des balises supportées en fonction des versions de styles :

lien www.idpf.org/accessibility/guidelines/content/style/reference.php

5.4 Responsive Web

Le Responsive Web Design (RWD) est un ensemble de principes de conception et de technologies qui permettent à un site de s'adapter aux différentes tailles d'écran et aux différents terminaux (ordinateur, tablette, mini-tablette, Smartphone…). Cette technique à largement été popularisée notamment par le Time Magazine.

La structure HTML5 est en général commune à toutes les versions et différentes feuilles de styles CSS sont utilisées en fonction des tailles d'écran.

Prenons l'exemple ci-dessous (www.tahitidocs.com/RSS/rss.php). La page est composée d'un entête, un ours qui contient une vidéo et du texte.

Le corps de la page est constitué de 3 colonnes de texte.

Responsive Web 1


Le redimensionnement va redistribuer les éléments et les différences d'affichage selon la taille d'écran. L'image du bandeau haut est réduite, le texte passe en 2 colonnes, la vidéo garde sa taille.

Responsive Web exemple 2

Si l'on réduit encore la taille d'écran, l'on passe en simple colonne, l'ours est scindé, le texte passe sous la vidéo.

Responsive Web exemple 3


Le Responsive Web Design est un assez bon compromis pour toucher un maximum de lecteurs, y compris sur terminaux mobiles, mais pas pour autant une solution universelle. Impossible de zoomer sur une photo ou un texte (en version navigateur), les images sont lourdes (elles sont chargées en grande taille puis redimensionnées)...

Les bandes passantes en 3G  ne sont pas les mêmes que celles en ADSL, et de loin, il est donc difficile de ne prévoir qu'un seul site, affiché différemment selon les terminaux.
Les grands acteurs du Web ne se limitent d'ailleurs pas à un site en RWD, mais en développent plusieurs en fonction des affichages et navigateurs ou applications.

6 La validation du document


6.1 En ligne

Le World Wide Web Consortium (W3C) a en charge la normalisation des échanges via le réseau Internet, notamment la publication des spécifications des langages HTML, XHTML, XML, du DOM (document object model), des feuilles de styles, etc.

Les navigateurs ne sont en fait que des logiciels qui mettent en forme des pages HTML, en s'appuyant sur des moteurs de rendu.
Les principaux sont les suivants :


Une application peut également utiliser l'un de ces moteurs de rendu.
Les rendus à l'écran ne sont pas toujours les mêmes, mais aucune technique, sauf à réaliser des feuilles de styles différentes pour chaque type et version de navigateur, ne permet de contrôler entièrement le résultat à l'écran.

La première chose à faire est donc de vérifier le rendu en affichant la page dans différents navigateur : Chrome, Firefox, Opéra, Safari, et Internet explorer, qui brille surtout par son absence de respect des normes HTML, bien qu'il y ait quelques progrès ces derniers temps.
Malgré cela, les dernières versions de navigateur permettent des mises en page très correctes. N'oublions pas que tout le texte pourra être redimensionné ensuite selon le terminal d'affichage et que l'essentiel est de conserver des proportions harmonieuses.

Le W3C propose une suite d’outils destinés à vérifier la conformité des pages Web.

La conformité aux normes W3C fera que le contenu de votre site sera :

La suite W3C Validator s'appuie sur ces cinq critères clés pour la plate-forme Web ouverte :

6.2 Avec HTML validator

Validator Le W3C propose sur son site web un outil appelé le « Validateur » (« Validator » en anglais).
Le validateur est une sorte de programme qui va analyser votre code source et vous dire s'il est correctement écrit ou s'il comporte des erreurs que vous devez corriger. La validation est donc en quelque sorte une certification de l'absence de faute grammaticale dans le HTML.


Vous pouvez valider votre page web de trois façons différentes, via trois onglets :

lien http://validator.w3.org

Il faut veiller à cocher la case xhtml lors de la validation. Si votre document est valide (plus de message d'erreur, les avertissements ne sont pas un gros problème) il est prêt pour la conversion. Dans le cas contraire il faudra corriger les erreurs signalées.

L'indication des lignes où se trouvent les erreurs permettent de les retrouver facilement (en tout cas avec un éditeur affichant les numéros de lignes).

A noter ! Une page peut comporter beaucoup d'erreurs et s'afficher correctement... dans un navigateur, mais pas une tablette. Il faut donc impérativement corriger le code pour espérer avoir un document lisible par (presque) tous les logiciels.

6.3 Avec CSS validator

A l'instar de la validation HTML, la validation du fichier css est possible en ligne.
L'interface est la même que pour le HTML et permet de choisir de valider via l'URL, par téléchargement de fichier ou saisie directe.

validation css

lien http://jigsaw.w3.org/css-validator/


7 La conversion avec Calibre


7.1 Télécharger, installer, utiliser

Calibre de Convertor And LIBRary for Ebooks est un logiciel Open Source permettant de gérer votre collection d'e-books en toute simplicité. Grâce à celui-ci, vous pourrez, en effet, enregistrer vos E-books, les convertir, les gérer. Le site permet de télécharger Calibre et de consulter l'aide (en anglais) ou la FAQ.
L'installation est on ne peut plus simple. L'objet de ce tutoriel n'est pas l'utilisation de Calibre mais simplement la fonction convertir. Pour plus d'information un tutoriel plus général est proposé en divers formats, PDF, EPUB ou CALAMEO.

Tutoriel Calibre en version Pdf Tutoriel Calibre en version epub Tutoriel Calibre en version Calameo

7.2 Importer un fichier

Ajouter livre

La première étape consiste à ajouter un livre à la Bibliothèque. Pour cela, lancez Calibre puis cliquez sur l'icône et sélectionnez le fichier que vous avez créé au format HTML (par exemple). Vous pouvez importer un ou plusieurs livres à la fois.
Ce fichier est alors ajouté à la bibliothèque, au format ZIP. Vous pouvez l'afficher pour le lire.

Vous pouvez également importer les métadonnées d'un livre à partir de son ISBN.

Calibre ajouter ISBN

Il suffit ensuite d'ajouter un ou plusieurs ISBN.

Calibre ajouter ISBN 2

Les métadonnées sont alors récupérées, quelquefois même la couverture.

Calibre ajouter ISBN 3


7.3 Formats de conversion

Conversion calibre

Le fichier est d'abord transformé en XHTML ce qui est facilité par la réalisation d'un fichier HTML conforme et validé via le site en ligne du W3C (voir 6.2 validation en ligne).
Ensuite, ce fichier est transformé dans un autre format, en l'occurrence EPUB.

Les formats les plus facilement transformés sont, dans l'ordre : LIT, MOBI, AZW, EPUB, AZW3, FB2, HTML, PRC, RTF, PDB, TXT, PDF.
Convertir à partir d'un PDF reste compliqué. Les fichiers HTML doivent de préférence être encodés en UTF-8.

Calibre traite en entrée ou en sortie un nombre impressionnant de formats :
- Input Formats : CBZ, CBR, CBC, CHM, DJVU, EPUB, FB2, HTML, HTMLZ, LIT, LRF, MOBI, ODT, PDF, PRC, PDB, PML, RB, RTF, SNB, TCR, TXT, TXTZ
- Output Formats : AZW3, EPUB, FB2, OEB, LIT, LRF, MOBI, HTMLZ, PDB, PML, RB, PDF, RTF, SNB, TCR, TXT, TXTZ




 

source : http://manual.calibre-ebook.com/conversion.html


7.4 Conversion

Lancement

Cliquez sur le document à convertir puis sur le bouton FAIRE BOUTON.
Point 1Le format d'entrée, ZIP, a été reconnu, celui de sortie est par défaut EPUB. Différents écrans vont vous permettre de mieux mettre en forme vote fichier original. Notons que de nombreux champs sont préremplis puisqu'ils ont été reconnus par Calibre.


bouton debogueLe bouton Déboguer, tous en bas de la colonne de gauche, permet de générer un fichier temporaire qui à chaque étape du processus de création. Pour cela, vous devez préciser le répertoire dans lequel ce fichier va être créé. Vous pouvez ainsi tester vos modifications avant de créer le fichier définitif.

Répertoire déboguer

Métadonnées

Boutons métadonnées

Point 2 Les principaux champs, auteur, titre ont été récupéré. Pour faciliter le classement des ouvrages, vous pouvez éventuellement ajouter des étiquettes (clés de rangement) par exemple ici "Tutoriel". Un résumé pourra également être proposé.


Point 3 Le champ modifier l'image de couverture va permettre de choisir une image de fond pour la première de couverture. Si vous ne le renseignez pas, une image générique va être produite. Vous pouvez également changer la couverture ultérieurement. La taille de l'image retenue ici est de 300 X 400 pixels environ.


conversion métas


Présentation

presentationNormalement, les éléments de type famille de police et taille ont été reconnus, notamment via la feuille de style. Mais vous pouvez ici les modifier, voire importer vos propres polices. La taille de base de la police va générer les autres tailles pour conserver l'harmonie de la présentation.
Vous pouvez également modifier ici l'espacement des paragraphes, l'interlignage etc.


heuristiqueMais tout l'intérêt de la production d'un fichier HTML conforme au départ est justement de minimiser tous ces réglages. Vous pouvez donc parfaitement laisser ces champs, tout comme l'écran suivant, à leur valeur par défaut.


conversion


Mise en page

Mise en page La rubrique Mise en page permet essentiellement de sélectionner le type de sortie parmi un choix assez conséquent. Par défaut c'est le mode Tablet qui est sélectionné. Mais vous pouvez également publier pour d'autres types de tablette (Kindle, Ipad, Kobo, Sony etc.). Le champ description permet de se faire une idée plus précise des différents types de sortie demandés.


Détection de la structure

structure Même remarques concernant la détection de la structure que pour le reste des réglages. Votre document étant correctement structuré à la base, les niveaux de titres (h1, h2 etc.) sont reconnus. Vous pouvez éventuellement cocher la case "Insérer les métadonnées comme page au début du livre" si cela vous semble pertinent.


Table des matières

table des matières Si vous avez une table des matières en métadonnée, celle-ci pourra être utilisée. Dans ce cas, vous pouvez cocher la case "Forcer l'utilisation d'une Table des Matières auto-générée.
Vous pouvez également choisir de "Ne pas ajouter les chapitres détectés à la table des matières" en cochant la case appropriée.
Par défaut Calibre va tout simplement tenter de reconnaître la structure de votre document et générer des liens hypertextes vers les titres (h1) et sous-titres (h2).

détection


Rechercher & remplacer

Rechercher & remplacer Comme son nom l'indique Rechercher et remplacer permet de chercher une occurrence et la remplacer par une autre.

Sortie Epub

Sortie Epub Le dernier bouton permet de préciser les réglages du fichier EPUB : taille maximale, présence ou non d'image de couverture. Si vous n'avez pas utilisé d'image au format SVG pour la couverture, il est recommandé de cocher "conserver les proportions de la couverture" pour éviter sa déformation.


Le bouton OK va lancer la conversion, une icône vous indique son état d'avancement.travaux


Modifications métas

Si le résultat ne vous convient pas, vous pouvez modifier directement les métadonnées, soit en cliquant sur l'icône prévue à cet effet, soit par un clic droit sur le fichier.



7.5 Enregistrer le fichier

conversion finie

Pour enregistrer le fichier sur votre disque dur, il suffit de faire un clic avec le bouton droit sur le fichier EPUB. Une fenêtre vous propose ensuite de choisir l'endroit où vous souhaitez l'enregistrer.
Vous pouvez ainsi diffuser votre livre par exemple en l'envoyant en pièce jointe, en le proposant en téléchargement sur un site, ou en via des bibliothèques numériques, ce qui l'objet du chapitre suivant...


7.6 Modifier, corriger le fichier EPUB

Pour extraire le contenu d'un fichier ePub, il suffit de le décompresser, par exemple avec 7-Zip. Tous les fichiers apparaissent alors en clair et vous pouvez les éditer avec un éditeur de texte.

Les fichiers les plus importants :


Pour reconstruire votre EPUB, il suffit de faire la démarche inverse. Sélectionner tous les fichiers, les ajouter à l'archive au format ZIP. Renommer enfin avec l'extension EPUB et votre fichier, corrigé ou enrichi est prêt pour la lecture.

Pour plus d'informations, voir chapitre 9

7.7 SIGIL

Sigil est un logiciel Libre qui permet d'éditer les fichiers aux formats EPUB, HTML et TXT. La structure d'un fichier EPUB, la table des matières peuvent être modifiés ou créés. Malheureusement le format EPUB3 n'est pas (encore) supporté actuellement à ce jour (juin 2013).

http://code.google.com/p/sigil/downloads/list

Sigil

Lorsque vous ouvrez un fichier au format Epub ou si vous enregistrez un fichier au format epub, la structure de base est créée, le fichier est compressé et enregistré avec l'extension .epub.

A l'ouverture d'un fichier Epub, celui-ci est analysé et éventuellement corrigé puis sa structure est affichée (fichiers, table de matières). Vous pouvez retravailler votre livre électronique, le modifier, changer la table, ajouter des fichiers etc.

Attention ! Lorsque vous enregistrez un fichier EPUB avec Sigil c'est l'arborescence du logiciel qui est retenue. SIGIL n'est donc pas très adapté pour corriger un EPUB créé avec un autre logiciel, sauf à accepter le changement d'organisation de vos fichiers.
De plus, SIGIL ne sait produire, à ce jour, que des fichiers compatible EPUB version 2 ou en version 3 rétro compatible version 2 sans utiliser toutes les possibilités de la version 3.


8 Lire, publier le livre


Le format EPUB est pris en charge par l'ensemble des liseuses, sauf la Kindle (qui propose cependant un outil de conversion).


8.1 Avec la visionneuse de Calibre

ajouterCliquer sur la bouton "Ajouter un livre". Les livres protégés par DRM ne peuvent pas être lus avec la visionneuse de Calibre. Pour le reste, l'essentiel des fonctions s'y trouvent : Navigation avec un effet paramétrable, table des matières, signets, information sur le style, thèmes...

lien Aide


Visualisation calibre


8.2 Avec Adobe Digital Editions

Adobe Digital Editions est un lecteur gratuit d'eBooks et de publications numériques qui permet d'acheter, de télécharger et de lire des livres numériques au format PDF et EPUB. On retrouve les principales fonctionnalités minimales de ce type de lecteur : gestion des signets, taille du texte, recherche, table des matières, mode bibliothèque et mode lecture.
En mode Bibliothèque, vous pouvez ajouter des éléments dans votre bibliothèque. Vous pouvez procéder de différentes manières :


lien Télécharger le logiciel

lien Aide

Visualisation Adobe

8.3 Publier et lire avec Kindle

Kindle est à une liseuse vendue par Amazon. L'application de lecture est gratuite et peut s'installer sur différents terminaux : ordinateurs, liseuses, tablettes, téléphones...
De nombreuses fonctions sont proposées : Synchronisation automatique de vos ebooks sur tous vos appareils compatibles Kindle, dictionnaire intégré, recherche, thèmes, notes...
Ici encore vous êtes dans un écosystème fermé, tout se passe en ligne après avoir créé un compte chez Amazon.

Kindle

Pour publier un livre, rendez-vous sur le site : https://kdp.amazon.com/self-publishing/signin et suivez la procédure d'ajout de votre livre.

Vous pouvez également installer Kindle Previewer, un outil qui émule l'affichage des livres sur les appareils et applications Kindle.
La documentation pour Kindle Previewer est disponible en téléchargement aux formats Kindle et PDF

Une fois le previewer installé, cliquez sur le lien "ajouter un livre pour un aperçu. Les formats reconnus sont les suivants : MOBI, EPUB, HTML, OPF. Pour faciliter la procédure, faites une conversion au format MOBI avec Calibre, exportez-le puis ouvrez-le avec le previewer.
Vous pouvez, dès lors, visionner le résultat sur les différents modèles de Kindle.

viewer kindle


Quelques recommandations :


A ce stade, vous pouvez également visionner directement le résultat dans le logiciel Kindle pour PC.

Kindle


Un guide très complet pour peaufiner vos documents :

lien http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines_FR.pdf


8.4 Avec Ibooks

Comme toujours chez Apple, l'application Ibooks est totalement fermée. Soit vous disposez d'une tablette, soit il vous est quasi impossible d'installer l'application, même sur un ordinateur de la marque.
Ajoutons que le développement d'applications nécessite le paiement d'un code développeur, 100 dollars par an, et vous êtes dans l'ecosystème assurément le plus fermé du Monde, celui d'Apple : carte bleue obligatoire !

Bonne nouvelle, depuis peu, et sans en faire grande publicité, Ibooks reconnait le format EPUB3. Et il le reconnaît finalement pas si mal.

Sauf que…

Le navigateur Apple, Safari, et iBooks, fonctionnent avec le même moteur de rendu, Webkit, plus ou moins dégradé selon les applications (exemple la lecture du format flash est possible en version ordinateur et impossible en version application). Webkit dispose de multiples fonctionnalités, dont l'une s'intitule local storage, qui permet de stocker des informations sur sa machine.
Cette fonction (native en HTML5) permettait donc de stocker des informations du livre en local et semble avoir été supprimée depuis.

Fichier propriétaires, applications fermées, obsolescence programmée, modifications régulières, toutes sortes de pratiques que ne sauraient cautionner l'auteur de cette page. Pour ajouter un livre, ouvrir Itunes, cliquez sur Fichier / Ajouter le fichier à la bibliothèque ou cliquez sur un fichier Epub via le navigateur. Le livre est ensuite synchronisé avec votre application.

8.5 Publier sur Google books

Pour publier des livres sur Google books, connectez-vous avec votre compte, puis suivez la procédure.

Pour importer un fichier à l'aide de l'outil Google Uploader, procédez comme suit :

  1. Connectez-vous à votre compte Google Livres
  2. Cliquez sur le lien Ajouter/Mettre à jour des livres
  3. Cliquez sur le lien Transférer/Expédier les livres
  4. Cliquez sur le bouton Lancer Google Uploader
  5. Ajoutez vos fichiers en les faisant glisser dans la fenêtre de Google Uploader ou en les recherchant à l'aide du bouton Ajouter des livres
  6. Ajoutez vos informations bibliographiques, y compris l'ISBN, le titre et les autres paramètres d'aperçu
  7. Cliquez sur le bouton Transférer des fichiers pour démarrer l'importation
  8. Attendez la fin de l'opération

lien http://support.google.com/books/partner/bin/answer.py?hl=fr&answer=40288


9Réaliser un EPUB manuellement. Un exemple commenté


Pour télécharger l'exemple proposé, en l'occurence ce guide lui-même, cliquez ici (format epub), puis, comme pour tout fichier EPUB que vous souhaitez ouvrir, modifiez l'extension en la remplaçant par.zip et décompressez l'archive.
Les modifications peuvent ensuite se faire avec n'importe quel éditeur de texte (par exemple le bloc-notes, ou de préférence avec un éditeur plus complet type notepad++).
D'autres exemples pourront être téléchargés à cette adresse.


9.1 La structure du dossier

Structure EPUBSi l'arborescence minimale d'un EPUB peut se limiter à 4 fichiers, celle proposée ici est articulé autour de deux répertoires principaux, OEBPS et META-INF.

Le fichier mimetype, sans aucune extension, se trouve directement à la racine. Il ne contient quasi aucune donnée (voir plus loin), mais n'en constitue pas moins l'un des plus problématiques.
En effet, pour reconstruire un EPUB, il faut toujours commencer par compresser d'abord ce fichier et ensuite ajouter les autres dans l'archive, avant de modifier l'extension zip par epub.

Le répertoire META-INF ne contiendra également qu'un seul fichier, container.xml, qui ne sera pas modifié.
Les noms du fichier mimetype et du répertoire META-INF sont les seuls à être imposés par l'IDPF (International Digital Publishing Forum).

De fait, ces deux fichiers sont créés une fois et restent en général les mêmes pour tous les projets. La création d'une structure de base contenant cette arborescence pourra ainsi se révéler très utile.
A noter ! Le simple enregistrement d'un fichier avec le logiciel SIGIL (voir chapitre 7.7 ) va créer ce type de structure, propre à SIGIL. Mais le réenregistrement avec SIGIL d'un EPUP va également modifier son arborescence. Ce n'est donc pas un logiciel recommandé pour modifier un document, sauf à accepter de chambouler complètement votre organisation.

La quasi-totalité des fichiers " utiles " se trouve dans le répertoire OEBPS. Celui-ci a été scindé en sous répertoires (images, vidéo, audio...).

Pour faire manuellement un EPUB, il s'agit donc en quelque sorte de créer un mini site Web compressé.


En résumé, la structure de base comporteArborescence


Côté (x)HTML


Création du fichier mimetype

Le contenu de ce fichier se limite à une, et une seule ligne. Ce contenu est toujours le même, quelque soit votre projet de fichier EPUB. Ce fichier ne possède pas d'extension. Il sert simplement à indiquer aux ordinateurs le type de fichier, en l'occurrence .epub (application/epub+zip). Inutile de le créer, il vaut mieux le recopier et, surtout, ne pas y toucher.

application/epub+zip

Création du fichier container.xml

Le fichier container.xml se trouve dans META-INF. Il sert principalement à indiquer où et dans quel répertoire se trouve le fichier content.opf de l'ebook. Là encore, il est fortement recommandé de ne rien changer ni au nom du répertoire, ni à celui du fichier. En effet, sauf modification du nom ou de l'emplacement du fichier content.opf, le contenu de ce fichier ne changera pas.

Exemple - Le fichier container.xml

  1. <?xml version="1.0"?>
  2. <container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  3. <rootfiles>
  4. <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml" />
  5. </rootfiles>
  6. </container>

On pourra ajouter un fichier (option) com.apple.ibooks.display-options.xml qui permet de régler certains rendus pour le logiciel de lecture d'Apple, iBooks.

La structure de base de votre document est prête. Tous les autres fichiers sont placés dans le répertoire OEPBS.
lien www.idpf.org/epub/30/spec/epub30-publications.html

9.2 Les fichiers xhtml

Les noms de fichier doivent utiliser l'extension de fichier .xhtml. La structure des fichiers xhtml a déjà été évoquée, elle reste très classique. Si le fichier est correctement formé, il peut être affiché dans le navigateur. Dans le cas contraire, un message d'erreur est affiché.

Tous les fichiers xhtml doivent être valides, pour cela vérifiez votre code sur http://validator.w3.org

Exemple - Fichier HTML de base

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang = "fr" xml:lang="fr">
  4. <head>
  5. <title>Comment réaliser un livre au format EPUB ?</title>
  6. <link rel="stylesheet" href="scripts/styles.css" type="text/css" />
  7. </head>
  8. <body>
  9. ...
  10. </body>
  11. </html>

Ligne 1 : "encoding="UTF-8".
La première partie est le type MIME du fichier (ici xml). Cela permet au navigateur de savoir de quel type de média il s'agit.

La deuxième partie de l'en-tête HTTP (dans l'exemple : UTF-8) est le jeu de caractères. Auparavant, l'on utilisait surtout les jeux de caractères basés sur le Latin, en l'occurrence l'« ISO-8859-1 » pour la plupart des langues occidentales. Désormais, l’Internet Engineering Task Force (IETF) et le W3C approuvent le choix de l’UTF-8 et prescrivent son usage pour tout protocole échangeant du texte sur Internet, dont évidemment HTML, HTTP et XML.


Ligne 2 : <!DOCTYPE html>

La Déclaration de Type de Document (DTD), également nommée "doctype" sert à indiquer à quelles règles d'écriture obéit le code d'une page Web. Cette information est essentielle pour toute page conforme aux normes. Les navigateurs actuels passent également en mode de rendu standard, avec ce doctype.
Ici, le doctypte est bien entendu HTML5, ce qui est précisé par le simple mot html. Le premier terme !DOCTYPE, est en majuscules pour respecter la syntaxe XML.


Ligne 3 : <html xmlns="http://www.w3.org/1999/xhtml">

Le document est traité en tant que document application/xhtml+xml. L'espace de noms est généralement déclaré une fois sur la racine html.
Vient ensuite la langue du document qui est précisée sous deux formes : lang = "fr" xml:lang="fr".
Le paramètre langue est très important, quel que soit le document. L'on pourra même donner une indication sémantique à l'intérieur du code, par exemple pour une expression : Comment ça va ? <i xml:lang="it" lang = "it">Tutto bene</i>.
L'attribut langue pourra être attaché à n'importe quel élément du document et sera interprété par les fonctions de synthèse vocale Text-To-Speech (TTS).

lien http://fr.wikibooks.org/wiki/Le_langage_HTML/Internationalisation

lien http://www.iana.org/assignments/language-subtag-registry


Ligne 4 à 7 : <head>

Dans l'entête (<head>), il ne reste plus que le titre (<title>) et le lien vers la feuille de style. Les informations contenues dans l'entête, excepté le titre ne sont pas visibles dans une page Web. Le titre apparaît dans la barre de titre de votre navigateur et, surtout, est pris en compte par les moteurs de recherche ou de rendu.

Le chapitre 9 contient des JavaScripts, ils seront appelés comme toujours en partie dans l'entête.


Exemple - Fichier HTML de base avec appel de JavaScripts

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang = "fr" xml:lang="fr">
  4. <head>
  5. <title>Comment réaliser un livre au format EPUB ?</title>
  6. <link rel="stylesheet" href="scripts/styles.css" type="text/css" />
  7. <script type="text/javascript" src="scripts/jQuery.js"></script>
  8. </head>

Quelques particularités (pour plus de détail revoir le chapitre 3)


Eléments sémantiques propre à EPUB

Sections

Une section pourra être utilisée, par exemple pour définir un chapitre. Cette division en section, typique de l'HTML5, sera utile lorsque le Epub3 sera parfaitement reconnu par tous les lecteurs, ce qui, à l'instar des navigateurs, n'est pas encore le cas.

Exemple - Sections

  1. <section epub:type="chapter" id="c01">
  2. <h1 id="titre-1">Chapitre 1. Ressources</h1>
  3. <p>De nombreuses ressources…</p>
  4. </section>

D'autres types de sections sont disponibles.

Citons par exemple : bibliography , conclusion, contributors, copyright-page, dedication, epigraph, epilogue, errata, glossary, index, introduction, preface, prologue...

lien www.idpf.org/accessibility/guidelines/content/xhtml/sections.php


Notes et annotations

Pour le format epub, la note pourra être introduite par la balise HTML5 <aside> et la précisions epub:type="footnote"

Exemple - Dans le corps du texte

  1. <p>
  2. La sensibilité aux mauvaises odeurs s'est accentuée faisant de nous des êtres intolérants à tout ce qui vient rompre le silence olfactif de notre environnement. Notre refus des odeurs ne résulte pas du seul progrès des techniques (vaporisateur, déodorant corporel) mais traduit l'aboutissement de la modification de notre perception des odeurs.<a href="#ft2f" epub:type="noteref">1</a>
  3. </p>
  4. <aside id="ft2f" epub:type="footnote">
  5. <p>
  6. 1. Le miasme et la jonquille. <em>CORBIN Alain</em>, Aubier, Montaigne, 1982
  7. </p>
  8. </aside>
  9. <p>
  10. </p>

D'autres formes sont possibles, notamment celle utilisée dans ce guide et décrite dans le chapitre 3.6.

Exemple - Note de bas de page

  1. <p> L'appel de note en indice<sup>
  2. [<a href="#note-2-5" id="ret-2-5" epub:type="rearnote">1</a>]</sup>
  3. avec un renvoi vers le corps de la note.
  4. </p>

Exemple - Note de bas de page

  1. <p>
  2. Pour le corps de la note, le chemin est inversé.
  3. L'identifiant est l'ancre du lien de l'appel <p id="note-1">,
  4. suivi du lien hypertexte retour vers l'identifiant de l'appel de note
  5. [<a href="#ret-1"> et un rappel du numéro de la note, 1</a>]
  6. </p>

Exemple - La feuille de style CSS

  1. @namespace epub "http://www.idpf.org/2007/ops"
  2. a[epub|type~='noteref']{
  3. vertical-align: super;
  4. line-height: normal;
  5. font-size: smaller;
  6. }

lien www.idpf.org/accessibility/guidelines/content/xhtml/notes.php


Pour les annotations, la forme est très ressemblante à celle de la note.

Exemple - Annotations

  1. <p>
  2. <a href="#anno01" epub:type="annoref">From the beginning</a>,
  3. I've noted that the … </p>
  4. <aside id="ft2f" epub:type="annotation">
  5. <p> "From the beginning" here can only be taken to mean from the time the author became interested in the subject, since … </p>
  6. </aside>

lien www.idpf.org/accessibility/guidelines/content/xhtml/annotations.php


Bibliographies

Exemple - Bibliographie

  1. <li>
  2. Viking Lander Imaging Team. <cite>The Martian Landscape.</cite> Washington, DC: NASA SP-425, 1978.
  3. <span epub:type="annotation">An outstanding scientific study of the results of the Viking project to Mars in the mid-1970s.</span>
  4. </li>

lien www.idpf.org/accessibility/guidelines/content/xhtml/biblio.php


Index

Exemple - Container.xml

  1. <section epub:type="index">
  2. <h1>Index</h1>
  3. <section epub:type="part">
  4. <h2>A</h2>
  5. <ul>
  6. <li> Apples, <a href="#page01">1</a>, <a href="#page27">27</a> </li>
  7. </ul>
  8. </section> …
  9. <section epub:type="part">
  10. <h2>O</h2>
  11. <ul>
  12. <li>Oranges <ul> <li> Florida, <a href="#page03">3</a>–<a href="#page05">5</a> </li> … </ul>
  13. </li> …
  14. </ul>
  15. </section> …</section>

lien www.idpf.org/accessibility/guidelines/content/xhtml/indexes.php


Tous les fichiers doivent se conformer à toutes les contraintes de conformité de contenu pour XHTML.
Pas de caractères spéciaux, ni accentués, pas d’espaces dans les noms de fichiers.

9.3 Les images, le son, la vidéo

Précisons tout d'abord que tous ces fichiers seront intégrés dans votre EPUB et pourront donc singulièrement l'alourdir (et ça va très vite avec les vidéos).
Ajoutons que lire une vidéo demande des puissances de calculs qui peuvent vider plus rapidement les batteries...

Images

plan

Elles sont toutes au format png pour cet exemple mais les formats GIF, JPEG, PNG, SVG pourraient également être utilisés.
Toutes les images sont enregistrées dans le répertoire images, il suffit alors d'ajouter leur nom. Tous les chemins sont relatifs. Tous les noms de fichier en lettres minuscules, y compris pour les extensions, pas d'espaces dans les noms.

Pas d'image avec un lien du type http://monsupersitedimage.com/images/monimage.png.
Attention ! La balise image <img> n'ayant pas de balise de fermeture, il faut impérativement veiller à bien la refermer en ajout un slash />.

Divers attibuts peuvent être ajouté à la balise image :

role="presentation" 

Le format SVG est désormais pris en charge...

Deux méthodes d'implémentation, directement dans le texte...

Exemple - Insérer un image SVG

  1. <body>
  2. <svg xmlns="http://www.w3.org/2000/svg" xml:lang="fr">
  3. </svg>
  4. </body>

... ou en créant un objet

Exemple - Insérer un image SVG

  1. <object class="logo" data="logo.svg" width="186" height="235" type="image/svg+xml">
  2. <img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" />
  3. </object>

La seconde méthode est recommandée, surtout parce qu'elle propose une solution de repli pour les Readers ou navigateurs qui ne reconnaissent pas le format svg. Ne pas oublier d'ajouter l'attribut properties="svg" dans le manifest.

Exemple de svg, un logo cliquable sur Alsacréations
lien http://www.alsacreations.com/xmedia/tuto/exemples/svg/


L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.

lien http://www.idpf.org/accessibility/guidelines/content/script/canvas.php


Son

Même principe que pour les images, les sons sont d'abord enregistrés dans le répertoire audioVidéo. Format recommandé : MP3.

Exemple - Insérer un fichier audio

  1. <audio id="audio1" src="audio/son.mp3" controls='controls' />
  2. <p>Désolé, votre système ne prend pas ce format en charge </p>
  3. </audio>

Le fichier est ensuite tout simplement appelé par son nom, un message d'erreur est affiché en cas de problème.

lien www.idpf.org/accessibility/guidelines/content/xhtml/audio.php

Vidéo

Même principe que pour les images ou le son. Format recommandé : MP4. Trois formats de vidéos peuvent être proposés en cas d'd'incompatibilité (vous avez dit progrès !!!).

Exemple - Insérer un fichier video

  1. <video id="video3" controls="controls">
  2. <source src="audioVideo/video.mp4" type="video/mp4"/>
  3. <source src="audioVideo/video.webm" type="video/webm"/>
  4. <source src="audioVideo/video.ogv" type="video/ogg"/> </video>

lien www.idpf.org/accessibility/guidelines/content/xhtml/video.php

Exemple - Vidéo avec boutons de contrôle

  1. <video id="video1" autoplay="" role="button" aria-controls="video1" controls="">
  2. <source src="#audioVideo/video.mp4" type="video/mp4"></source>
  3. <source src="#audioVideo/video.webm" type="video/webm"></source>
  4. <track src="#/captions/cc-en.vtt" srclang="fr" kind="subtitles" label="Français"></track>
  5. <track src="#/captions/cc-fr.vtt" srclang="fr" kind="subtitles" label="Français"></track>
  6. </video>

lien Les différents formats acceptés : idpf.org/epub/30/spec/epub30-publications.html#sec-publication-resources


Lecture vocalisée

La synthèse vocale, Text-To-Speech est reconnue.

Pour cet exemple nous allons tester l'API proposée par Vocalware (https://www.vocalware.com/) et qui permet de synthétiser tout texte à la demande en 20 langues et 100 voix.
Une démonstration plus complète peut se consulter à cette page

lien https://www.vocalware.com/index/demo

L'API est multi-plateformes ( JS / HTML5, ActionScript, HTTP-REST ) mais ici, c'est la version HTML5 / JavaScript qui est testée.
Pour la mettre en œuvre, il suffit de demander une clé d’activation (gratuite pour les 1000 premiers tests => si ça ne marche plus c’est que cette page aura eu trop de succès :-) ) et de préciser le domaine sur lequel les requêtes peuvent s’effectuer.



9.4 JavaScript

JavaScript

La prise en charge de JavaScript, annoncée, reste difficile à implémenter correctement. Certes, cela fonctionne, mais on est encore loin de la simple reprise du code.

Exemple, le code ci-dessous, opérationnel en version navigateur. Qu'en est-il des liseuses ?


Exemple - JavaScript affichant le type et la version de lecteur

  1. <script type="text/javascript">
  2. <!--Javascript non pris en charge ! -->
  3. // <![CDATA[
  4. alert("Nom: " + navigator.epubReadingSystem.name +
    " / version: " + navigator.epubReadingSystem.version +
    " / layoutStyle " + navigator.epubReadingSystem.layoutStyle);
  5. //]]>
  6. </script>

9.5 Feuilles de styles

Pour cet exemple, la feuille de style est type css3. Tous les styles ne sont pas reconnus par tous les lecteurs. Idéalement, il faudrait produire une feuille de style par marque voire type de lecteur. Pour plus d'informations, voire le chapitre 3.


Exemples

Définir l'élément aside pour faire flotter un encadré à la droite du texte

Exemple flottement - dans le code HTML

  1. <aside epub:type="sidebar">
  2. <h4>Titre de l'encadré</h4>
  3. <ol>
  4. <li>Liste 1</li>
  5. <li>Liste 2</li>…
  6. </ol>
  7. </aside>

Exemple flottement - dans la feuille de style

  1. @namespace epub "http://www.idpf.org/2007/ops";
  2. aside[epub|type~='sidebar']
  3. {
  4. padding: 0.5em;
  5. margin-left: 2em;
  6. margin-right: 1em;
  7. margin-right: 1em;
  8. width: 25%;
  9. max-width: 15em;
  10. background-color: rgb(240,240,240);
  11. border: solid 1px;
  12. rgb(0,0,0);
  13. float: right;
  14. }

ce qui donne

Epub flottant

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne eiusmod tempor incididunt ut labore et dolore magna Aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute Irure dolor dans reprehenderit dans voluptate Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt dans culpa Qui office deserunt mollit anim id est Laborum.


Ajout d'une bordure rouge à un avertissement

Au lieu d'utiliser le style seul pour créer une boîte d'alerte, le style sémantique pourrait être réalisé en utilisant epub:type attribut "warning"

Exemple - dans le code HTML

  1. <aside epub:type="warning">
  2. <h5>Alerte</h5>
  3. <p>L'ajout d'acides et de bases peut provoquer des réactions violentes ! </p>
  4. </aside>

Exemple - dans la feuille de style

  1. aside[epub|type~='warning']
  2. {
  3. border: solid 2px rgb(200,0,0);
  4. }
  5. aside[epub|type~='warning']
  6. {
  7. h4
  8. text-indent: 0.5em;
  9. width: 4em; margin: -1.25em 0em 0em 1em;
  10. background-color: rgb(255,255,200);
  11. border: solid 1px rgb(0,0,0);
  12. }

ce qui donne

Epub cadre

9.6 Le fichier toc.ncx

Le fichier NCX (fichier de Navigation Control pour XML), traditionnellement nommé toc.ncx, contient la hiérarchie table des matières pour le fichier EPUB.

Les appareils de lecture utilisent le fichier toc.ncx ou toc.xhtml (toc pour table of contents) pour construire la table des matières de l'ouvrage. La structure de la table des matières et l'ordre des pages sont définis dans ce fichier.
Ce fichier n'est plus nécessaire en EPUB version 3 mais pour des raisons de rétrocompatibilité, notamment avec l'EPUB version 2, il est recommandé de le conserver.

Le fichier toc.ncx est un fichier au format XML qui commence par les lignes suivantes :

Exemple - Le fichier toc.ncx

  1. <?xml version='1.0' encoding='utf-8'?>
  2. <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="fra">

Il s'agit bien d'un fichier xhtml, déclaré comme tel.

Puis vient l'entête du document, qui contient quatre éléments

Exemple - Le fichier toc.ncx suite...

  1. <head>
  2. <meta name="dtb:uid" content="30e08b74-a19e-44d4-87d5-c1dc5e7c51fa"/>
  3. <meta name="dtb:depth" content="2"/>
  4. <meta name="dtb:totalPageCount" content="0"/>
  5. <meta name="dtb:maxPageNumber" content="0"/>
  6. </head>
  7. <docTitle><text>Comment réaliser un livre au format EPUB ?</text></docTitle>

Vient ensuite l'élément title, qui, comme son nom l'indique, contient le titre du document.


Les éléments docTitle, docAuthor, et meta name="dtb:uid" doivent correspondre strictement à leurs analogues dans le fichier OPF.

L'élément nav contient la table des matières telle qu'elle sera affichée par la tablette.


Exemple - Container.xml

  1. <navMap>
  2. <navPoint id="navpoint001" playOrder="1">
  3. <navLabel><text>Couverture</text></navLabel>
  4. <content src="couverture.html"/>
  5. </navPoint>
  6. <navPoint id="navpoint002" playOrder="2">
  7. <navLabel><text>Présentation</text></navLabel>
  8. <content src="abstract.html"/>
  9. </navPoint>
  10. <navPoint id="navpoint003" playOrder="3">
  11. <navLabel><text>Table des matières</text></navLabel>
  12. <content src="table.html"/>
  13. </navPoint>

Chaque entrée de la table est définie par un élément navPoint qui possède deux attributs :

A l'intérieur de chaque élément navPoint, l'on place un élément navLabel qui indique le nom de l'entrée dans un élément text, par exemple la couverture.
Vient enfin la cible du lien : <content src="couverture.html"/>


lien www.idpf.org/accessibility/guidelines/content/nav/toc.php


9.7 Le fichier content.opf

L'ensemble des ressources, c'est-à-dire l'ensemble des fichiers comportant le contenu du document (texte, images), est référencé dans le fichier content.opf. C'est le fichier "root" du package.
Le fichier content.opf (opf, pour Open Publication Format) est le fichier le plus important. Un seul fichier peut comporter l'extension .opf.

Quatre fonctions essentielles :


Exemple - Le fichier content.opf

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="uuid_id">
  3. <metadata>...</metadata>
  4. <manifest>...</manifest>
  5. <spine>...</spine>
  6. </package>

La mention de la version 3.0 (version="3.0") indique que nous sommes en présence d'un EPUB3.
On ouvre ensuite la package qui contient :


Les métadonnées

Exemple - Le fichier content.opf suite...

  1. <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
  2. <dc:identifier id="uuid_id">urn:uuid:1d0866a0-d49d-11e2-8b8b-0800200c9a66</dc:identifier>
  3. <dc:title>Comment réaliser un livre au format EPUB ?</dc:title>
  4. <dc:creator id="creator">Denis Weiss</dc:creator>
  5. <dc:language>fr</dc:language>
  6. <dc:description>Tutoriel sur la réalisation d'un livre électronique au format EPUB3 à partir d'un document réalisé en HTML5 et css3. Conversion avec Calibre. Mise en ligne.</dc:description>
  7. <dc:subject>e-book, ePub, pdf, HTML5, css3, livre électronique, tutoriel</dc:subject>
  8. <meta name="cover" content="cover"/>
  9. </metadata>


La partie Dublin Core

Le préfixe dc: en début de balise indique que la grammaire (le schéma en langage XML) suivie pour la rédaction des métadonnées est le Dublin Core. Les métadonnées minimales requises sont title, identifier et language.

lien http://dublincore.org/documents/usageguide/

lien http://fr.wikipedia.org/wiki/Dublin_Core

La partie métadonnées se termine par le lien vers l'image de couverture : "images/couverture.png"


Le Manifest

L'élément manifest contient la liste des fichiers constituant la publication électronique.  C'est le deuxième "enfant" de package , à la suite metadata.

Exemple - Le fichier content.opf suite...

  1. <manifest>
  2. <item href="nav.xhtml" properties="nav" id="nav" media-type="application/xhtml+xml"/>
  3. <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
  4. <item href="chap001.xhtml" id="html001" media-type="application/xhtml+xml"/>
  5. <item href="scripts/styles.css" id="stylesheet" media-type="text/css"/>
  6. <item href="audioVideo/son.mp3" id="son01" media-type="audio/mpeg"/>
  7. <item href="audioVideo/video.mp3" id="video01" media-type="video/mpeg"/>
  8. ...
  9. </manifest>

Le manifest liste toutes les ressources présentes dans la publication électronique : les pages web, les feuilles de style, les polices incorporées, les images, la table des matières .ncx, les éléments audios et vidéos, etc.

Tout ce qui doit être présent dans votre EPUB doit être listé, sans quoi le fichier epub ne sera pas valide. L'ordre des entrées n'a pas d'importance. Mais il vaut mieux l'organiser en regroupant les ressources. Les fichiers peuvent être distants mais dans ce cas une solution de repli (locale) doit être proposée.

Trois éléments constitutifs

Un attribut properties pourra également être ajouté pour préciser encore le type de contenu : cover-image, mathml, scripted, svg, remote-resources et switch.

lien www.idpf.org/accessibility/guidelines/content/nav/lot.php

Spine

L'élément spine permet d'indiquer l'ordre d'affichage des fichiers. C'est le troisième "enfant" de package, à la suite manifest. C'est un sous-ensemble ordonné des ressources énumérées dans le manifest.
Il possède évenun attribut toc="ncx" qui indique qu'il faut se servir du fichier .ncx (tel que défini dans OPF 2.0.1) à des fins de compatibilité pour construire la table des matières, ou non.
Si l'attribut est vide, c'est le fichier qui a la properties="nav" dans le manifest qui est utilisé.

Exemple - Le fichier content.opf suite...

  1. <spine toc="ncx">
  2. <itemref idref="couverture"/>
  3. <itemref idref="abstract"/>
  4. <itemref idref="table"/>
  5. <itemref idref="html001"/>
  6. <itemref idref="html002"/>
  7. <itemref idref="annexe-01"/>
  8. <itemref idref="sitographie"/>
  9. </spine>

Guide

Déclaré obsolète par la spécification 3 de l'EPUB, cet élément permettait de décrire plus précisément certaines parties du fichier epub (couverture, préface, index, etc.)

lien http://www.w3schools.com/xml/xml_validator.asp

lien http://fr.slideshare.net/cwehrung/epub-3-html-5-css-3-fixedlayout

lien http://www.numericus-glutinator.org/fabrication-livre-numerique/epub-content-opf/311


9.8 EPUB crash test

A l'instar des navigateurs, tous les lecteurs d'Epub ne rendent pas les fichiers EPUB de la même manière à l'écran. Loin de là. Il faudra donc soit réaliser une version dégradée qui s'affiche relativement correctement quel que soit le lecteur, soit réaliser des versions adaptées.

Quelques limites notées :

Poids des fichiers selon les formats

Logo HTML

Logo EPUB

Lgo PDF

Lgo mobi

Logo texte

5.5 Mo

5,3 Mo

5.1 Mo

7,3 Mo

4,5 Mo



Les compressions sont sommes toutes très limitées et la différence entre fichiers HTML et EPUB est toute relative. Le fichier texte est moins lourd parce qu'il n'intègre par le son et la vidéo.


Test de quelques fonctions HTML5-CSS3

Le multicolonnage

Les éléments break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style,column-rule-width, column-span, column-width, columns, sont pris en compte.

lien http://www.idpf.org/accessibility/guidelines/content/style/reference.php#css025-css3text

Le passage de Lorem Ipsum standard, utilisé depuis 1500

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"De Finibus Bonorum et Malorum" de Ciceron (45 av. J.-C.)

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?".


Plus d'infos sur le multicolonnage

lien www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html


Les formulaires

Test formulaire


lien http://www.pompage.net/traduction/formulaires-html5


Drag and drop

Contenteditable

Modifiez-moi !

balise bdo

ltr : de gauche à droite (left to right) : Tu l’as trop écrasé, César, ce Port-Salut !
rtl : de droite à gauche (right to left) : Tu l’as trop écrasé, César, ce Port-Salut !


9.9 Les rendus des readers

Les rendus à l'écran diffèrent singulièrement suivant les lecteurs, que ce soit pour la prise en compte de la feuille de style ou même tout simplement de la table des matières.

Les tests ont été effectués sur les Readers suivants (toutes les versions mise à jour en juin 2013)


Table des matières

La table des matères est décrite dans le fichier content.opf de deux manières différentes pour assurer la rétrocompatibilité version 2. C'est le fichier nav.xhtml qui est utilisé en version 3 et toc.ncx en version 2


Exemple - Le fichier content.opf

  1. <!--Navigation EPUB3-->
  2. <item href="nav.xhtml" properties="nav" id="nav" media-type="application/xhtml+xml"/>
  3. <!--Rétrocompatibilité EPUB2-->
  4. <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>

tables des matières

Dans le détail, voici les fichiers pris en compte pour la table des matières

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
TOC TOC NAV NAV NAV TOC

 

Images

Prise en compte de l'attribut max-with

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
non oui oui oui non oui

 

Tableaux

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
oui oui oui oui non oui
-- ++ ++   -- --

 

Audio

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
non non oui non oui++ non

 

 

Video

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
non non oui non oui non

 

 

Interactivité

Il s'agit de la prise en charge des formulaires, du multicolonnage, et du drag and drop entres autres

Adobe Digital Edition Calibre Ibooks Kindle* Readium Moon+
non oui

non

+ multi

non oui non

Problèmes communs
Les formulaires et tableaux sont souvent coupés même s'ils tiennent sur une page et il faut les retravailler pour une bonne adaptation.

lien http://www.idpf.org/accessibility/guidelines/content/script/forms.php

*Kindle* ne lit pas le EPUB3, ce qui en soit est déjà un immense défaut, pour ne pas dire inadmissible, mais qu'un format propriétaire. Le fichier est donc transformé en version MOBI pour les besoins du test. Il faut noter que ce format n'apporte rien de plus, surtout par rapport à ce qu'il fait en moins.

Globalement le plugin Readium pour Chrome et Ibooks s'en sortent le mieux. Mais nettement moins bien qu'un navigateur à jour, même dans une version application. L'on aura donc toujours intérêts, pour le respect des normes à utiliser un navigateur. Restent les éléments propres aux Readers, la gestion des pages, des annotations, le dictionnaire...

Mais ici encore, le bloubiboulga de normes propriétaires et de données difficiles à exploiter plaide en faveurs des navigateurs avec, n'en doutons pas des nouveautés à venir.

Lire, télécharger ce document


Ce document est consultable ou téléchargeable en divers formats. Conformément à la charte Creative commons, vous êtes libres de le partager, le reproduire, distribuer et communiquer :

Le format html, en ligne est celui le plus souvent mis à jour.

Contact : http://www.tahitidocs.com/outils/mails/contact.php

Pdf epub calameo Html mobi

Sitographie restreinte

Jacques André. Petites leçons de typographie. http://jacques-andre.fr/faqtypo/lessons.pdf
Elizabeth Castro. Créez des documents ePub. Pearson. ISBN : 978-2744024672
Accessibilité. 30 jours pour rendre son site plus accessible. http://www.la-grange.net/accessibilite/table_of_contents.html
Créer un EPUB. Flossmanual. Un manuel de créaton d'EPUB en version epub et pdf. http://fr.flossmanuals.net/_booki/creer-un-epub/creer-un-epub.epub
Epub.
Site officiel de l'International Digital Publishing Foruù (idpg). http://idpf.org/
EpubCheck.
Validation en ligne d'un fichier EPUB : http://validator.idpf.org/
HTML5test.
Pour tester la compatibilité html5 de son navigateur. http://html5test.com/
Le site du zéro. Excellent site de ressources pour les débutants. http://www.siteduzero.com/
Note Pad++. Un éditeur de texte. http://notepad-plus-plus.org/
OpenWeb. Une référence historique francophone sur les standards du Web. http://openweb.eu.org/
Pompage. Articles sur la conception web. http://www.pompage.net/
Walrus. Studio de création spécialisé dans la fabrication de livres numériques (ebooks) au format EPUB. http://walrus-books.com/