Réaliser un document multimédia

Qu'est-ce qu'un document numérique ? Quelles sont ses différentes formes ? Rappels sur la notion de fichier, répertoires, formats. Les images, le son, la vidéo. Comment réaliser un document numérique ? Comment convertir un document multimédia d'un format à autre ? Comment le lire ?

Préambule : économie du document numérique

chaine du livre

Début 2014, KPMG, une société anonyme d’expertise comptable et de commissariat aux comptes mis en ligne le premier baromètre de l’offre de livres numériques en France. Sur la base d’un panel de 56 répondants classés notamment par niveau de chiffre d'affaires et secteur éditorial, ce baromètre met en lumière les profils des éditeurs disposant ou non d’une offre de livres numériques, leurs difficultés, leurs réticences et aussi leurs facteurs de succès.

Quelques éléments clés :

  • Toutes les grandes maisons d’édition ont une offre de livres numériques
  • Tous les secteurs éditoriaux sont représentés, avec en tête la littérature, la jeunesse et le scolaire
  • Le réel décollage de l’offre numérique à au lieu après 2009
  • Toutes les possibilités techniques ne sont pas mise en œuvre (livres enrichis : liens, vidéo, audio, animation)
  • Le prix de vente du livre numérique subit une décote par rapport au prix du livre papier
  • Les formats les plus utilisés sont l’EPUB puis le PDF
  • Les métadonnées sont des éléments incontournables pour développer la visibilité des livres numériques
  • Pour près de 97 % des éditeurs, les ventes de livres numériques constituent une source de CA supplémentaire
  • Les droits d’auteurs numériques sont négociés majoritairement en % et en même temps que les droits papier
  • Pour près de la moitié des renégociations les droits d'auteurs sont supérieurs en version numérique
  • Une "clause de rendez-vous" est généralement prévue
  • Une part de marché de plus de 15% est prévue à l'horizon 2020

1. Qu'est-ce qu'un document numérique ?

1.1 Le document numérique : un document électrique

Un document numérique est une forme de représentation de l'information consultable sur un écran

Le document numérique est  :

  • ouvert dans le sens qu'il n'est pas achevé, fixé dans sa forme ou son contenu mais il peut être modifié, enrichi...
  • plastique, c'est avant tout un fichier, qui a été produit dans un certain état, à partir d’outils déterminés (traitement de texte, tableurs, application...)
  • appareillé au sens où sa lecture ne se fait plus avec la même autonomie que le document classique, mais doit passer par le truchement d’un dispositif technique
  • automatisable, sa production, sa forme son contenu peuvent être générés à la volée à partir d'un langage de programmation. Exemple type, un itinéraire sur openstreetmap
  • auto-décrit, le document numérique intègre dans sa structure même des éléments de description sémantique (métadonnées, balises dites sémantiques qui indiquent la nature du contenu bien qu'elles n’apportent aucune information sur le sens de ce contenu... qui lui est l'objet du Web sémantique, toujours annoncé et encore à réaliser...)
  • pas pérenne. Sur le plan conceptuel, cela revient à se demander ce qu’il faut conserver : quelle version, autrement dit quel « état » du document ?
  • infiniment reproductible, à coût marginal quasiment nul. Mais au-delà même de la question des droits d’auteur et de la propriété intellectuelle, la question de « l’autorité » se pose. Auctor , auctoritas, les mots auteur et autorité ont la même racine

 

source : Information et document numérique : Entre métaphore et matérialité. Revue Sciences de la société Article paru dans le n° 68 de mai 2006 Dossier : Pratiques sociales du document Coordonné par Caroline Courbières et Gérard Régimbeau

 

1.2 Les fichiers

On l'a vu, un document numérique est d'abord constitué d'un ou plusieurs fichiers.

Qu'est-ce qu'un fichier ?

Un fichier est un ensemble de données informatiques stockées sur un support de stockage pérenne (disque dur, CD, DVD, clef USB…) possédant un nom, un chemin d'accès et généralement implicitement associé à un format (format image, format de documents, formats de base de données…).

Le nom des fichiers

La manière de nommer les fichiers dépend fortement du système d'exploitation. Longtemps la longueur et la forme des fichiers était très limitée, par exemple avec le système DOS et le fameux 8.3 : 1 à 8 caractères pour le nom, un point puis 0 à 3 caractères pour l'extension, sans distinction de la casse, ni espace, virgule etc.

page.odt
 
image.png
 
document.pdf

 

Quelques recommandations pour les noms de fichiers

Noms corrects

Noms incorrects

Erreur commise

monfichier.doc

mon fichier.doc

espace dans le nom

mon_image.png

mon_image

pas d'extension

ukulele.mp3

ukulélé.mp3

caractère accentué

film003.mov

film:003.mov

: dans le nom de fichier

exemple-test.rtf

exemple&test.rtf

caractère spécial

Puis petit à petit la taille des noms de fichier a passé à 255 caractères Unicode.

Le chemin d'accès

Le chemin d'accès d'un fichier définit sa localisation sur un périphérique donné. C'est une chaîne de caractères qui définit la suite des répertoires à parcourir pour atteindre le fichier depuis la racine du périphérique.

X:\Répertoire\Répertoire\..
D:\lisletdelisle\Site\moocs\mediateks

Chemin relatif ou chemin absolu ?

Le chemin absolu fait toujours référence à la racine du disque (unité logique) sur lequel est située l’arborescence des dossiers avec lesquels on travaille.

On le reconnait :

  • soit par le / qui signifie que l'on est à la racine du site,
    /dossier/page.html
     
  • soit par son adresse complète
    D:\lisletdelisle\Site\moocs\mediateks\dossier\page.html

 

Mais si le chemin change (par exemple le fichier page.html n'est plus dans dossier mediateks), impossible de le retrouver. C'est ce qui explique souvent les images absentes dans une page.

Le chemin relatif fait référence à la cible à partir de la page actuelle.

arborescenceSupposons que nous souhaitons afficher l'image nommée image.png qui se trouve dans le dossier images alors que nous affichons actuellement le fichier index.html.

 

Pour accéder à cette image, le chemin relatif est le suivant

images/image.png

Si nous nous trouvions à l'intérieur du dossier prod et que nous souhaitions afficher la même image, nous devrions monter d'un niveau dans l'arborescence (autrement dit le répertoire parent) ce qui se fait de la manière suivante

../images/image.png

Résumons :

  • pas de slash signifie que le fichier ou le répertoire est cherché à partir du répertoire courant
  • ../ permet de remonter d'un niveau, ../../ de deux niveaux etc.
  • ../dossier/ permet de remonter d'un niveau et d'ouvrir le répertoire dossier

 

Les extensions de fichier

En informatique, une extension de nom de fichier (ou simplement extension de fichier, voire extension) est un suffixe ajouté au nom d'un fichier pour identifier son format.
Ainsi, on dira qu'un fichier nommé fichier.txt a l'extension "txt" ou ".txt".

Elle permet de déterminer rapidement à quel logiciel est rattaché un fichier, par exemple : un fichier .doc est rattaché au traitement de texte word, un fichier .jpg est un fichier image...

Liste des principales extensions de fichiers.

Lien http://fr.wikipedia.org/wiki/Liste_d%27extensions_de_fichiers

Lire un fichier

Fichiers et répertoires disposent de différentes permissions qui spécifient qui peut y accéder ainsi que le type d'accès auquel un utilisateur a droit :

  • Lire ou Read - Autorise la lecture du fichier
  • Ecrire ou Write - Autorise l'écriture et la modification du fichier
  • Exécuter eXecute - Autorise l'exécution d'un fichier ou l'accès à un répertoire

Ainsi un fichier qui aurait des droits du type RW pour autorise la lecture et la modification, mais pas son exécution (par exemple pour un programme).

1.3 Les répertoires

dossierUn répertoire (appelé également dossier ou folder en anglais) est un objet informatique pouvant contenir des fichiers.

Imaginez une grande commode qui contient des tiroirs dans lesquels pourraient se trouver des fichiers ainsi que d'autres tiroirs. Un répertoire peut en effet contenir :

  • des fichiers
  • d'autres répertoires

arborescence

2. Les formats

2.1 Qu'est-ce qu'un format ?

Le format d'un fichier est un ensemble de conventions définissant la représentation des données qu'il contient : la localisation et le codage des différents types d'informations contenues dans le fichier.

La méthode de base pour déterminer le type d'un fichier est de regarder son extension.

Lien http://www.europschool.net/static/formation/pdf/formats.pdf

2.2 Interopérabilité

Qui n'a jamais rencontré ce type de message...

interopérabilité

En l'occurrence ce fichier, au format .doc, réalisé dans une version béta de Word, ne peut plus être ouvert et affiché, même avec une version actuelle de Word.

Jusqu'à récemment lire un fichier réalisé avec un traitement avec un autre relevait de l'exploit et ce n'est que depuis peu, que l'on peut lire un fichier avec un autre logiciel que celui qui a servi à le créer.

Un format est dit interopérable si les documents, feuilles de calcul, présentations et formulaires peuvent être enregistrés dans un format accessible à tous et utilisable et licenciable par tous, sans droits d'auteur.

Le format est également dit ouvert s'il peut être lu sans restriction et par différents logiciels, par opposition aux formats fermés qui ne peuvent être lus que par des logiciels propriétaires.

Si vous ne possédez pas, ou plus le logiciel nécessaire à la lecture du fichier, ou tout simplement pas la bonne version, le document sera définitivement perdu.

Fuir définitivement les formats fermés !

Lien http://fr.wikipedia.org/wiki/Format_ouvert

Nous n'aborderons ici, de préférence, 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.

OpenDocument Text, Hypertext Markup Language (.htm ou .html), XHTML (.xhtml), Feuilles de style en cascade (.css) Tableur : OpenDocument Spreadsheet (.ods) Enregistrements biomédicaux : European Data Format (.edf) Document imprimable : Document PDF (.pdf) Livre numérique : EPUB (.epub)

2.3 Les formats texte

- Le format Texte brut : ASCII (.txt)

Le texte brut ou plain text représente le contenu brut et interopérable du texte. Ce type de fichier ne contient que les caractères, sans leur apparence. Le plain text peut être affiché de diverses façons et nécessite un processus de rendu pour le rendre visible. Le plus souvent, l'extension d'un texte brut est .txt

Voici, à titre d'exemple, les 95 caractères et signes du codage ASCII.

! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ [ \ ] ^ _ ` { | } ~
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Une variante du format texte brut est le format rtf, pour Rich Text Format, initialement créé par la société Microsoft, non compressé et reconnu par la plupart des logiciels de traitement de texte. Il est à noter que les nouveautés introduites par Word 10 ne sont plus traduites en RTF, ce qui confirme le remplacement par Microsoft du format RTF par Open XML.

- Le format OpenDocument (.odt)

asciiOpenDocument est un format ouvert de données pour les applications bureautiques : traitements de texte, tableurs, présentations, diagrammes, dessins et base de données bureautique. La spécification OpenDocument s'est très largement inspirée du format créé pour les premières versions de la suite bureautique libre OpenOffice.org.

C'est le format par excellence des textes.

Depuis, de nombreux traitements de textes ont adoptés ce format ouvert.

Open office et Libre office

OpenOffice.org est un projet né le 13 octobre 2000 à l'initiative de Sun Microsystems en vue de produire un intégré bureautique libre fondé sur StarOffice. Dans le cadre de sa politique de transparence, le format de stockage utilisé par OOo sera dès la version 2.0 conforme au format ouvert OpenDocument, adopté par l’ISO, comme format bureautique de référence. OOo permet également l'export au format PDF.

open et libre office

Lien http://www.openoffice.org/fr/

 

libre-office

Lancé en 2012 LibreOffice découle du projet OpenOffice initialement mis en place par Sun puis racheté par Oracle en 2010. LibreOffice est une suite bureautique libre et gratuite qui offre des modules de traitement de textes, tableur, présentation, dessin vectoriel, base de données, et édition de formules mathématiques.

Lien http://fr.libreoffice.org/

Lien http://fr.wikipedia.org/wiki/OpenDocument

- 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.

PDFIl 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 « .EPUB » vient d'Electronic PUBlication. C'est le format ouvert et standardisé proposé par l'International Digital Publishing Forum (IDPF). 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.

Les ouvrages au format EPUB sont en gros des sites web assez basiques, auxquels l'on a adjoint une table des matières et des liens entre les pages.

En cela, il n'est guère différent d'un PDF, sauf qu'il s'adapte à la taille de l'écran et propose donc un meilleur confort de lecture.


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

2.4 Les formats image

Les formats les plus couramment répandus sur le Web sont le JPEG et le PNG. Le format SVG commence lui aussi petit à petit à apparaître. L'un des plus anciens, le gif, revient à nouveau grâce à sa version animée.

jpegLe format jpeg (Joint Photographic Expert Group) 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. La compression peut varier de quelques à 16 millions de couleurs différentes. L'extension est ".jpg" ou ".jpeg".
Particulièrement adapté aux photos.

 

 

pngLe format PNG (Portable Network Graphics), plus récent, est adapté à la plupart des graphiques et est destiné à remplacer le format GIF. Il gère la couleur transparente, et existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :
- PNG 8 bits : 256 couleurs
- PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG)


svgL'EPUB prend également 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.

 

globe

Le gif (Graphics Interchange Format) est un format qui date de 1987 et permet d'enregistrer 256 couleurs différentes.
Cette limitation à 256 couleurs n'est pas gênante pour les logos, les graphiques et la plupart des images synthétiques. En revanche une photographie couleur de qualité nécessite plus de nuances. Une couleur peut ête transparente.
Ce format est utilisé sur le Web depuis 1993 et est revenu à la mode avec sa version animée. Plusieurs images se succédant sont compilées en un seul fichier, ce qui permet de créer facilement des animations.


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), gif éventuellement animé, en prenant soin de les réduire à la bonne taille.
Attention aux png qui peuvent prendre des tailles bien différentes selon leur encodage. Le format svg reste encore assez rare bien qu'en développement.

2.5 Les formats audio

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

  • MP3  : C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui
  • AAC  : utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème, les autres...
  • OGG  : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre
  • WAV (format non compressé : fichier est très volumineux, à éviter

 

Navigateur Formats audio
  Ogg Vorbis MP3 WAV
Internet Explorer non check check
Mozilla Firefox check non check
Google Chrome check check check
Safari non check check
Opera check non check

Moralité ! Pour être sûr d'être "entendu", il faudra encoder le fichier au moins en mp3 et en ogg.

2.6 Les formats vidéo

Comme souvent, aucun navigateur à ce jour ne prend en charge la totalité des formats et il faut toujours en proposer au moins 2 pour être certain de pouvoir être vu (sauf à proposer le lecteur type flash avec le fichier) :

  • OGG (type mime video/ogg, extension .ogv) est un format ouvert*
  • H.264 ou MPEG-4 (type mime video/mp4, extension .mp4)*
  • WebM , (type mime video/webm, extension .webm) format ouvert*

Note : Le type mime est un identifiant de format de données sur internet en deux parties.

 

Navigateur Formats vidéo
  Ogg Theora H.264 WebM
Internet Explorer Installation manuelle 9.0 Installation manuelle
Mozilla Firefox 3.5 Non 4.0
Google Chrome 3.0 Non 6.0
Safari Installation manuelle 3 Installation manuelle
Opera 10.50 Non 10.60

3. La page

3.1 Anatomie d'une page papier

Même lorsqu'elle est numérique, la page est longtemps restée liée à l'une de ses formes de rendu priviligiée, le papier.

Certains formats font l’objet d'une normalisation internationale (ISO) ou nationale (DIN, AFNOR, ANSI, etc.).

Il en existe trois principaux : A, B et C.

Les plus connus ce sont les formats A, basés sur le format A0, dont la surface est, par définition, de 1 mètre carré. Ses dimensions, arrondies au millimètre près, sont 841 mm × 1 189 mm. Les formats les plus couramment utilisés sont le format A4, 210 mm × 297 mm, et son double, le format A3, 297 mm × 420 mm

page format A

Série A (mm × mm)
A0 841 × 1189
A1 594 × 841
A2 420 × 594
A3 297 × 420
A4 210 × 297
A5 148 × 210
A6 105 × 148
A7 74 × 105
A8 52 × 74
A9 37 × 52
A10 26 × 37

 

Les formats B sont basés sur le format B0, dont la largeur est, par définition, de 1 mètre

Format B

Les formats C sont principalement utilisés pour les enveloppes. La surface d’un format C0 est, par définition, la moyenne géométrique de la surface A0 et de la surface B0

format C

3.2 La page Web

structure

La page Web a ceci de particulier qu'elle est quasi infinie. Elle n'est réellement ni limitée en largeur ni en longueur, et la notion de page disparaît le plus souvent.

Le point de référence des éléments se situant sur l'écran est le bord haut, gauche de la fenêtre.
Sa taille est tributaire de la résolution de l'écran.

Attention ! Ne pas confondre la taille de l'écran, le plus souvent exprimé en pouces (et pour connaître la taille d'un pouce en centimètres et que vous avez bien lu ce cour, vous savez qu'il suffit de taper 19 pouces en cm dans Google) et la résolution, exprimée en pixels.

Un écran de 19 pouces peur afficher une résolution de 600*800 pixels ou 1024*768 pixels la taille moyenne actuelle selon sa qualité.

resolutions

C’est la quantité de pixels affichée sur l’écran, exprimé de la manière suivante : pixels verticaux X horizontaux. Par exemple : 1280 x 720, ce qui correspond au 720p ou 1920 x 1080 pour 1080p. On parle d’ailleurs de Full HD dans ce dernier cas.

Lien http://carrefour-numerique.cite-sciences.fr/ressources/flash/anims/cyberbase02/resolution_home.swf

Plus la résolution est grande, plus la qualité de l'image augmente moins elle est pixellisée et ce d'autant plus que l'écran est petit.

La résolution

WVGA (800 x 480) : entrée de gamme
720p (1280 x 720) : milieu de gamme
1080p (1920 x 1080) : haut de gamme

Apple n’offre qu’une seule taille d’écran sur ses iPhone 5 (5c et 5 s) : 4 pouces, tandis que la définition y est elle aussi identique. Elle n’est pas « HD », avec 1136 x 640 pixels.

Le nombre d'or : 960 pixels ?

Comme il n'y a pas réellement de notion de page sur un écran, l'on utilise souvent des grilles, la largeur de 960px étant le plus souvent utilisée pour s’adapter aux petites résolutions.

grille

 

L'utilisation de ce type explique d'ailleurs pourquoi certaines pages n'occupent pas la totalité de l'écran puisqu'elles sont limitées à 960 pixels de largeur.

Lien http://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html

3.3 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 a largement été popularisée notamment par le Time Magazine.

Prenons l'exemple ci-dessous (www.tahitidocs.com/RSS/rss.php).

La page est composée d'un entête, d'un chapô qui contient une vidéo et du texte.
Le corps de la page est constitué de 3 colonnes de texte.

responsive 1

Le redimensionnement va redistribuer les éléments 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-2

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

responsive-3

 

3.4 Les pages infinies

Avec l’arrivée de designs et d’ergonomies nouvelles, la notion de contenu prend de plus en plus d'importance.
Une première logique s’affirme, celle des articles les plus «dénudés» possibles, c’est à dire sans les colonnes de droite ou de gauche.
Ensuite, deuxième tendance claire, la logique de la page infinie.
Cette navigation permet au lecteur de lire tout le site sans jamais devoir cliquer, les pages s'enchainant en un scroll infini.

De nombreux sites ont mis en place l’Infinite Scroll à la place des paginations à l’ancienne (bouton suivant et précédent). Par exemple, Tumblr utilise ce procédé pour les archives de ses blogs : ).

Techniquement, une fois arrivé en bas de page, la nouvelle est chargée automatiquement, ce qui est plutôt pratique puisque cela permet aux utilisateurs d’éviter un certain nombre de clics sur les liens d’une pagination standard.

On améliore ainsi l’expérience utilisateur. Cette technique peut augmenter le temps de visite moyen en réduisant les actions à effectuer des visiteurs pour consulter un contenu.

Nouvelle mode ou nouvelle façon de lire ?

Quelques exemples

Lien http://qz.com/
Lien http://ampp3d.mirror.co.uk/

3.5 Les métadonnées

Dès l'origine, un document en HTML était structuré en deux parties principales, l'entête et le corps du texte.

Exemple d'entête

<title>Comment réaliser un document multimédia</title>
<meta name="description" content="Bref résumé de la page" />
<meta name="author" content="Denis Weiss" />
<meta name="keywords" content="HTML5, css3, livre électronique, tutoriel, EPUB" />

Voir l'importance des metadonnees

La notation des métadonnées des documents de type ePUB est légèrement différente est fait appel à Dublin Core. Le Dublin Core est un standart (et non une norme) né en 1995 dans la ville de Dublin.

Toutes ces métadonnées peuvent être renseignées via un logiciel adapté, mais l'on pourra également les intégrer directement dans la page Web.

Métadonnées obligatoires :

  • Un identifiant unique <dc:identifier id="PRODOC_unique-identifier">urn:1214xw472cx650</dc:identifier>
  • Le titre de l’ouvrage : <dc:title>Comment réaliser un document multimédia</dc:title>
  • L’auteur : <dc:creator opf:role="aut">Denis Weiss</dc:creator>
  • La langue du livre : <dc:language>fr</dc:language>
  • L’éditeur : <dc:publisher>Autopublication</dc:publisher>

Métadonnées recommandées

  • La classification du livre : <dc:subject>Tutoriel</dc:subject>
  • Un résumé type 4ème de couverture :<dc:description>Bref résumé de la page</dc:description>
  • Le numéro ISBN, la cas échéant <dc:identifier opf:scheme="ISBN"></dc:identifier>
  • La date de publication&nbsp;:<dc:date opf:event="publication">2012-XX-XX</dc:date>

 

L'on pourra ajouter

  • Le traducteur  : <dc:contributor opf:role="trl">test</dc:contributor>
  • Le créateur de la couverture :dc:contributor opf:role="cov">Sandrine Granon</dc:contributor>
  • Le créateur de l’eBook  : <dc:contributor opf:role="bkp">LEC Digital Books</dc:contributor>

Lien https://n.survol.fr/n/de-limportance-des-metadonnees
Lien http://www.cercledelalibrairie.org/Document/show.aspx?id=4
Lien http://www.culture.gouv.fr/

Limite des métadonnées

En 2001, Cory Doctorow a fait une liste des sept obstacles prétendument insurmontables pour obtenir des métadonnées fiables pour faire fonctionner un possible Web sémantique.

Selon lui :

  • Les gens mentent
  • Les gens sont paresseux
  • Les gens sont stupides
  • Il est difficile de se décrire soi-même
  • Les classifications ne sont pas neutres
  • L'unité de mesure retenue influence les résultats
  • Il y a plusieurs façons de décrire une même chose

Il inclut également d'autres raisons qui peuvent rendre les métadonnées obsolètes :

  • Les données peuvent devenir fausses au fil du temps
  • Les données ne peuvent pas intégrer de nouvelles idées

 

Près de 15 ans après, l'auteur de cette page n'est pas loin de considérer que rien n'a changé...

4. Réalisation : un document multimédia

 

4.1 Tout commence par une page web !

Pour cette réalisation, nous commençons par une page Web codée, avec un simple éditeur de texte (ou mieux, un éditeur un peu amélioré du type notepad++).

Pourquoi une page Web ?

D'abord parce que le html est un standard qui peut être ensuite décliné en de nombreux autres formats. C'est d'ailleurs l'objet de cet exercice, transformer cette page en un document en divers formats : texte, PDF, epub.

Ensuite le format EPUB, celui principalement utilisé par les tablettes et liseuses est en fait du xHTML. Un epub, c'est un site WEB qui a été compressé en un seul fichier.

Pourquoi un simple éditeur de texte et non un logiciel adapté ?

Parce que c'est le meilleur moyen de comprendre l'architecture d'une page donc de produire ensuite tout type de document. De plus, il n'y a pas, à ce jour (début 2014) de logiciel réellement recommandable pour tous les types de document et tous les lecteurs.

Mais ne s'agit pas ici, pour autant, de rentrer dans le détail du langage HTML. La structure de base est simplement recopiée, les éléments l'on retrouve dans tout document multimédia vont y être ajouté.

Quel est ce modèle ?

Le 20 décembre 1990, la première page à la norme HTML est mise en ligne sur un ordinateur du CERN, machine qui devient le premier serveur web de l'histoire.

Elle se trouve à l'adresse suivante : http://info.cern.ch/

première page web

Le code source est très simple, la structure de la page est toujours d'actualité.

première page web source

4.2 Structure de base

Il ne s'agit pas ici de faire un cours de HTML, de nombreuses ressources existent pour cela, mais simplement de partir d'une structure de base fournie, qu'il suffira de copier-coller et de la modifier dans un éditeur de texte.

La structure type peut être téléchargée à cette adresse, il suffit ensuite de la décompresser.

Elle comprend :

  • différents répertoires (images, audio, vidéo)
  • un texte de base au format html

La seule chose à savoir, c'est qu'il existe deux types de balises :

  • les balises ouvrantes (<html>)
  • et les balises fermantes (</html>)

La seule différence entre les deux est la barre oblique « / ».

Par exemple <h1>Voici un titre</h1>. <p>Voici un paragraphe</p>.

Attention deux balises utilisées ici ne possèdent pas de balises fermantes. Il s'agit de de <br> et de <img>.
L'on prendra donc soin, surtout dans la perspective du format EPUB qui sera créé, de les refermer via un /. Cela donne <br /> et <img />

Avec une vingtaine de balises, très faciles à mémoriser il est possible de produire la quasi-totalité des documents multimédia.
Comptez vous-même !

  • Structure de page  :  
    <html>
     
    <head>
     
    <body>

  • Metadonnées :
     
    <head>
     
    <title>
     
    <meta name>

  • Page :
     
    <body>
     
    <p>
     
    <br />
     
    <strong>
     
    <em>
     
    <h1> à <h6>
     
    <blockquote>


     
    <a href>
     
    <ol>
     
    <ul>
     
    <li>
     
    <img>
     
    <audio>
     
    <video>

Avec ces quelques balises vous pouvez réaliser l'immense majorité des pages WEB et un EPUB tout à fait correct. C'est ce que nous allons montrer dans la partie suivante.

Copiez-collez la structure de page html de base ci-dessous dans un éditeur de texte de type bloc-notes et enregistrez-la avec le nom "index.html" ou, après décompression, ouvrez la page index.html qui se trouve dans la structure de base.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"> <title>Comment réaliser un document multimédia ?</title> <meta name="description" content="Bref résumé de la page" /> <meta name="author" content="Denis Weiss" /> <meta name="keywords" content="HTML, epub, livre électronique, tutoriel" /> </head>
<body>
<p>Votre page se trouvera ici...</p>
</body>
</html>

A noter ! Cette structure est composée de deux parties

L'entête entre les balises <head> et </head>

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 :

  • La langue du document, <html lang="fr">, deux petites lettres normalisées qui n'ont l'air de rien, "fr" et qui pourtant sont une indication essentielle
  • L'encodage de la page <meta charset="utf-8">
  • Le titre : <title> Comment réaliser un document multimédia ? </title>
  • Nom de la personne, de l'organisation ou du service à l'origine de la rédaction du document : <meta name="author" content="Denis Weiss" />
  • Résumé : <meta name="description" content="Tutoriel sur la réalisation d'un document multimédia" />
  • Mots clés : <meta name="keywords" content="HTML5, css3, livre électronique, tutoriel" />

Le corps du texte entre <body> et </body>

C'est tout ce qui se trouve à l'intérieur de la balise <body> </body> autrement dit votre page proprement dite.
C'est ici que vous allez ajouter textes, images, sons et autres éléments multimédias.

4.3 Ajouter du texte

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.

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

<h1>
 Niveau de texte h1
</h1>

<h2>
 Niveau de texte h2
</h2>

...

Hiérarchie type

H1 Titre principal
	H2 partie 1  
	H2 partie 2 
		H3 sous partie 2.1 
			paragraphe 
		H3 sous partie 2.2 
			paragraphe
	H2 partie 3 
		paragraphe 
	H2 partie 4 
		paragraphe
		H3 sous partie 4.1 
			paragraphe 
			H4 sous partie 4.1.1
				paragraphe
		H3 sous partie 4.2 
			paragraphe 
		H3 sous partie 4.3 
			paragraphe 

Les paragraphes

Les paragraphes sont entourés des balises <p> et </p>

<p>
Ceci est un paragraphe.
</p>

Le langage HTML considère les paragraphes comme des blocs de texte.
Pour ajouter du texte, vous pouvez le saisir directement ou même copier-coller des bouts de textes que vous pouvez aérer en créant divers paragraphes.

Pour cet exercice, pour le texte nous allons nous contenter d'ajouter du faux texte en le copiant-collant à partir d'un site dédié : http://fr.lipsum.com/

Il faut distinguer fin de paragraphe

</p>

et retour à la ligne

<br />
.

Avec un traitement de texte la fin de praragraphe se fait par l'apui de la touche entrée et le retour de chariot par l'appui simultané de la touche Maj et entrée.

paragraphe

La graisse

En typographie, la graisse est l’épaisseur d’un trait ou d’un caractère. En augmentant la graisse d’un caractère maigre, on obtient un caractère demi-gras, puis gras, et ainsi de suite.

En HTML pour augmenter la graisse d’un caractère, l'on utilise la balise

<strong>
 gras 
</strong>
.

Italique

La mise en italique

<em>
 italique
</em>

se fait avec la balise <em>, pour emphase, et sert à spécifier clairement que le mot ou la portion de texte qu'elle encadre doit être mis en évidence. Cette balise remplace <i> qui est dépréciée.

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>
  • liste non ordonnée, balise
    <ul>

Ensuite, chaque élément de liste est entouré par les deux balises

<li>
   
</li>

Ordonnée

liste

et non ordonnée (liste à puces)

liste

Les blocs de citation

<blockquote>
 C'est noukilafait ! 
</blockquote>

4.4 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

  • la balise < a href="http://lisletdelisle.fr/moocs/mediateks/"> permet de déterminer la cible.
  • Mooc b2i est le texte du lien affiché, généralement souligné, mais le graphisme des liens peut être entièrement déterminé via la feuille de style.

4.5 Les images

La balise image est de type orpheline.

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

On lui adjoint deux attributs :

  • src= qui indique l'adresse de l'image soit sous forme de chemin absolu (exemple : http://www.site.com/fleur.png), soit de chemin relatif (exemple : images/fleur.png)
  • alt= cela signifie  « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée, ou dans les navigateurs de personnes handicapées (non-voyants).
    <img src=ylang.jpg alt="Mon arbre préféré, le Ylang Ylang">Image d'Ylang Ylang />

    Il est possible d’associer une légende optionnelle <figcaption> à du contenu regroupé en un bloc, qui peut être indépendant du contenu principal du document. Le rôle de <figcaption> est de conférer une légende à l’élément <figure>.
    <figure>
    <img src="goyave.jpg">
    <figcaption>Photo de goyave</figcaption>
    </figure>

 

<img src="http://lorempixum.com/400/200/sports/" width="554" height="291" />

4.6 Le son

La balise

<audio>

Aucun navigateur ne gère tous les formats de son à 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.

Insérer un fichier audio

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

  • balise src : obligatoire) identifie le fichier audio intégré, qui doit être au format MP3
  • balise title : (facultative) identifie la description de l'audio
  • balise controls : (obligatoire, sauf si vous souhaitez fournir votre propre image pour le démarrage de la lecture vidéo) indique à l'application Kindle qu'il faut afficher les contrôles pour écouter le clip audio intégré
  • texte : (obligatoire) Les appareils qui ne prennent pas en charge de contenu audio affichent le texte inscrit entre les balises <audio></audio>.Si les utilisateurs visualisent ce livre électronique sur un appareil qui ne prend pas en charge l'audio, ils peuvent lire ce texte à la place
  • balise id : (facultative) doit être réservé à ce document si l’on en utilise un

4.7 La vidéo

La balise

<video>

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

  • WebM (.webm) : WebM est un format multimédia ouvert qui remplace peu à peu le premier format ouvert proposé, Theora.
  • H.264 (.mp4) : H.264 est un format fermé, proposé par le Moving Picture Experts Group. C’est un format non libre (soumis à brevets) et non gratuit sauf exception (la diffusion gratuite de vidéos par des sites web, par exemple).

MP4 ou WebM sont reconnus et recommandés pour EPUB. Pour convertir un fichier d'un format à un autre, l'on pourra recourrir à un convertisseur en ligne du type : http://video.online-convert.com/fr/

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

 

<video src="video/video.mp4" controls />

Voilà pour la théorie, en pratique il vaut mieux proposer deux formats de fichiers et un petit message d'erreur au cas où le format ne serait pas reconnu...

 

<video controls='controls'>
<source src = "video/video.mp4" type = "video/mp4" title = "Vidéo au sujet de ..." />
<source src = "video/video.webM" type = "video/webm" title = "Vidéo au sujet de ..." />
</video>

4.8 Le style

Le style des pages HTML est le plus généralement déterminé par une feuille de style qui va déterminer l'apparence générale de la page. Des éléments les plus simples (titres, paragraphes...), aux plus complexes (web responsive, marges...) le fonds et la forme sont clairement séparés.

Le CSS (Cascading Style Sheets), c'est donc cet autre langage, né en 1996, qui vient compléter le HTML pour gérer la mise en forme d'un site Web.
Compatibilité css3 des navigateurs


La maîtrise des règles des styles n'étant pas l'objet de cette partie, nous vous renvoyons vers différentes pages

Lien http://www.idpf.org/accessibility/guidelines/content/style/reference.php

Lien http://www.tahitidocs.com/cours/epub/faireEpub.html#titre-5-1

Pour notre page, nous nous contenterons d'un style minimal, que nous appliquerons tout simplement par l'ajout de ce code dans l'entête du document.

 

<link rel="stylesheet" href="css/Epub-mini.css">

4.9 Validation du code

validation Pour éviter tous soucis ultérieurs, il est très important de valider son code pour repérer les éventuelles erreurs. Un code HTML passera à peut près toujours sur un navigateur.
Ceux-ci sont en effet conçus pour tenter d'afficher quelque chose, même si le code est truffé d'erreurs.
Cette tolérance naturelle a également permis à des générations entières d'apprendre le code par petits bouts et autant de copiés-collés.

Mais ce qui est vrai avec les navigateurs, ne l'est plus du tout avec les logiciels de lecture des liseuses. Ceux-ci sont particulièrement peu souples (sans doute trop et pour des raisons qui nous échappent et tiennent plus de la volonté de conserver un monopole que d'une réelle utilité technique).

Un service du w3 consortium permet de vérifier et valider un document "HTML". La procédure est très simple et se fait par chargement ou copié-collé du texte.
Votre pages sera ou non validée, et accompagnée le cas échéant de "warnings" qui sont de simples messages d'avertissement d'un éventuel problème.

Lien http://validator.w3.org/check

validation

5. Exportation / conversion format textes

Notre document source est désormais réalisé. Nous pouvons visionner un exemple ici.
Il s'agit désormais de le transformer en différents formats...

5.1 Un document de type Open Document Texte

Il pourra être intéressant de transformer cette page, au format HTML natif, dans un format courant du type odt (Open Document Texte) pour mieux gérer l'impression par exemple.

Pour cela, ouvrons tout simplement, par exemple, le traitement de texte "Libre office" et copions-collons le texte directement dans une page vide.

libre office

 

L'on constate que la forme du texte est globalement conservée. Mieux il est même possible d'insérer automatiquement une table des matières.

Cliquez sur Insertion > Index et table.

table des matières

 

Nous avons ici un document modifiable, assez correctement structuré, dans un format ouvert et interopérable (.odt).

Evidemment, tout le monde l'aura remarqué, le son et la vidéo ne sont intégrés ni au support papier, ni à la version numérique...

5.2 Un document PDF

Le format texte nécessite l'utilisation d'un traitement de texte adapté ce qui n'est pas toujours le cas. Pour faciliter la lecture, un document au format PDF pourra être utile. Ce format est particulièrement adapté pour l'impression.

Avec Libre Office ou Open Office

Rien de plus simple, il suffit d'utiliser la commande Fichier > Exporter au format PDF

export PDF

Avec Chrome

Ici encore, rien de bien compliqué, il suffit d'imprimer le document en PDF

export chrome pdf

Avec Pdf creator

PDFCreator est un logiciel qui s'installe comme une imprimante, et permet la création de fichiers aux formats les plus courants, dont le format PDF. Il fonctionne avec n'importe quelle application Windows permettant l'impression. PDFCreator permet de signer numériquement vos PDF afin de prouver que vous en êtes l'auteur et de vous assurer que le document n'a pas été modifié. Enfin, il est possible de crypter les fichiers afin d'empêcher leur consultation ou leur impression.

Lien http://sourceforge.net/projects/pdfcreator/

Acrobat

pdfLe logiciel original, Acrobat permet de créer, modifier ou signer des documents PDF, possède des outils de commentaire améliorés.

Attention ! Ne pas confondre un reader, qui permet de lire un pdf, avec un writer, qui permet, outre la lecture, l'écriture et la modification.

Le writer d'Adobe est très complet et permet de réaliser des pdf bien plus élaborés que ses clones (modification du texte et image, signature électronique... 96 € env. prix éducation).

http://www.adobe.com/fr/products/acrobatstandard.html

6. Lire et convertir un EPUB

6.1 Site en ligne, plugin

Il existe un certain nombre de sites en ligne ou de plugin pour navigateurs permettant de transformer un document à partir de différents formats (HTML, PDF...) en EPUB.

Aucun n'est réellement convainquant et n'a, notamment, récupéré tous les éléments multimédias de notre document source.

Citons cependant 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

  • Writer2ePub est une extension pour Libre office ou Openoffice qui permet de créer des fichiers EPUB. Il existe également une extension pour Word ou des convertisseurs en ligne.
  • Adobe Indesign, un logiciel de PAO (Publication Assistée par Ordinateur).

 

Pour plus d'informations

Lien http://www.tahitidocs.com/cours/epub/faireEpub.html#titre-1-3

6.2 Avec 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).

Lien http://sigil.sourceforge.net/

Son développement semble malheureusement quelque peu abandonné ces derniers temps.

Toutefois, notre fichier test est ouvert tout à fait correctement. Son arborescence est reprise et nous pourrions faire les menus corrections nécessaires sans aucune difficulté.

sigil

Par exemple générer la table des matières : Outils > Table des matières > Générer la table des matières

sigil table matières

Les titres peuvent être inclus ou exclus en cochant les cases prévues.

Voir également

Outils > ajouter une couverture

Outils > éditeur d'index > ajouter un index

Outils > Métadonnées

métadonnées Sigil

 

Pour aller plus loin

Lien http://fr.flossmanuals.net/creer-un-epub/ch005_sigil

6.3 Avec Calibre

Calibre existe en version installée ou en version portable, qui vous permet d'emporter tous vos livres avec vous...

Lien http://calibre-ebook.com/

Transformer le fichier HTML en epub :

  1. Importer le HTML dans Calibre : > Bouton ajouter des livres (Calibre va le transformer en zip…)
  2. Cliquer sur convertir, par défaut le livre est sélectionné au format zip et le format de sortie est EPUB. A ce stade, vous pouvez modifier la couverture (maximum 550 px de largeur et 800 px de hauteur)
  3. Modifier / compléter les données métadonnées
  4. Créer la table des matières (pour la table des matières SIGIL reste plus simple d'utilisation

La procédure détaillée est expliquée ici :

Lien http://www.tahitidocs.com/cours/epub/faireEpub.html#titre-7-4

6.5 Lire les Epubs

Avec la visionneuse de Calibre

L'essentiel des fonctions s'y trouvent : Navigation avec un effet paramétrable, table des matières, signets, information sur le style, thèmes...

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 :

  • À l'aide de la commande de menu Ajouter l'élément à la bibliothèque (ou du raccourci clavier correspondant)
  • Par glisser-déposer des fichiers depuis le Bureau ou l'Explorateur de fichiers

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...

Les plugins

  • Chrome : Raedium est un très bon plugin qui permet de lire les fichiers au format EPUB. Readium.org a été créée en février 2013 en tant qu'organisation à but non lucratif. C’est un projet qui vise la conformité aux dernières spécifications EPUB.
  • EPUBReader, permet de lire des livres au format Epub simplement dans Firefox. Le projet semble quelque-peu abandonné actuellement, la version 1.4 date d’avril 2012.

Quelques applications

Pour aller plus loin !

Les possibilités du HML5 qui ne sont pas encore correctement ou partout implémentées.

Le multicolonnage

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. 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. 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?"

Drag and drop

  • A
  • B
  • C
  • D

 

Les formulaires

Test formulaire

Mais ce ne sont ici que quelques exemples en attendant, pourquoi pas, la gestion des odeurs...