Tutoriel : modifier le comportement du DITA OT

Permet de comprendre comment modifier simplement certains comportements du DITA OT, en ne jouant que sur les paramètres d'appel de celui-ci.

Durée : 60 minutes

Les tutoriels du premier module ont déjà permis de modifier des arguments de transformation. Voir, par exemple, Tutoriel : DITA et l'inter-échange dans lequel on expliquait comment conserver les fichiers temporaires.

Il faut ici agir sur les arguments permettant de régler la CSS.

Modifier la présentation de la CSS HTML

L'objectif est de pouvoir mettre les <shortdesc> des recettes en "darkgreen" et en italiques. Pour ce faire, on va modifier les arguments d'une transformation DITA-OT.

Procédure :

Lancez la transformation HTML de la map livreCuisine.ditamap.
Le répertoire de sortie out est créé, au même niveau que le fichier de la map. Dans celui-ci, un sous répertoire xhtml contient tous les résultats de la transformation.
Ouvrez dans Oxygen, le fichier couscousvert.html disponible dans le répertoire de sortie out/xhtml
Oxygen va permettre de visualiser le code HTML du fichier et donc de comprendre quelles sont les sélecteurs de classe CSS ajoutés par la transformation du DITA-OT.
Trouvez l'endroit où apparait le contenu de la <shortdesc> et notez le style du paragraphe généré en standard par le DITA-OT (<p class="shortdesc">).
A partir d'Oxygen, créez un fichier de type CSS et enregistrez le sous le nom monvert.css, dans le répertoire d'exercices.
A l'intérieur, il faut déclarer un style pour le paragraphe :
1. déclarez le style : p.shortdesc
  de fait, .shortdesc est suffisant car il y a peu de chance qu'il y ait d'autres éléments HTML qui portent la classe shortdesc.
2. ouvrez une accolade : {
3. définissez la couleur des caractères : color: darkgreen;
4. fermez l'accolade : }
Dans Oxygen, créez un nouveau scénario de transformation XHTML et réglez les paramètres CSS de celui-ci
1. args.css : donne le chemin absolu permettant d'accéder à monvert.css sur votre ordinateur.
2. arg.copycss : permet de demander à l'OT de réaliser une copie de montvert.css dans le répertoire de sortie
3. arg.csspath : définit où copier la CSS dans le répertoire de sortie. Ici, on indique la racine du répertoire.
Fermez la fenêtre de paramètres et lancez la transformation.

Résultat :

L'ensemble de la description rapide est maintenant en vert. On verra plus tard comment packager tout cela dans un plugin.