Publication web des concepts et des tâches
Mise en page générale
Les pages HTML présentant les concepts et les tasks se composent d'un menu et d'un corps, respectivement à gauche et au centre de la page. Le menu propose au lecteur de sélectionner la partie à afficher dans le corps à savoir (en fonction de l'obligation de présence ou non de l'élément en Dita, cf. diagramme UML) :
pour un concept, sa définition (tout ce qui est contenu dans la balise conbody de l'élément) ou les liens proposés (related-links),
pour une task, son pré-requis (prereq), son contexte (context), ses étapes numérotées (chaque step de premier niveau a une entrée dans le menu) , son résultat global (result) ou les liens.
Voici une capture d'écran illustrant cette mise en page pour une task :
Dynamisation de la page
L'affichage du contenu d'une partie dans le corps à partir de la sélection via le menu est effectué grâce à l'appel d'une fonction Javascript qui modifie les propriétés CSS (display: none; ou display: block; selon le cas) des éléments en se basant sur la mécanique d'IDs (générés en XSL lors de la transformation).
Présentation d'une étape
Un des points particuliers de cette publication est la présentation d'une étape au sein d'une task ; en effet cet élément peut être assez volumineux en contenu (notes, sous-étapes contenant parfois elles-mêmes des notes, etc.), cependant il parait essentiel que tout ce contenu puisse se lire « en une fois » dans le corps de la page.
titre de la tâche rappelé à chaque étape,
entête de l'étape : numéro et, si renseignée en Dita, importance (obligatoire ou optionnel),
intitulé de l'étape (balise cmd) suivi des informations associées (blocs correspondant à des notes en Dita),
liste des sous-étapes, chacun étant représentée par le contenu de sa balise cmd,
exemple de sous-étape déployée : les informations (notes) sont affichées en supplément,
exemple de sous-étape repliée : les informations ne sont pas affichées.
L'affichage des informations liées aux sous-étapes en mode "déployé" ou "replié" est possible grâce à la balise HTML5 details, dont le contenu est caché par défaut et n'est affiché que lorsque le lecteur clique sur la flèche (cf. capture d'écran). Le contenu "entête" de cette balise (à savoir, dans notre cas, l'intitulé de la sous-étape), est quant à lui inséré dans la balise summary, elle-même contenue dans la balise details ; celui-ci restera affiché quelque soit l'action du lecteur.
