AP NF29 A2011 - Rapport d'étude

Une fois la maquette validée par le chef de projet, le reste de l'équipe, et les porteurs, nous sommes passés à la transformation Dita vers jQuery Mobile. Plutôt que d'automatiser la création de l'ensemble de notre maquette, nous nous sommes concentrés (pendant les 3 semaines qu'il nous restait) sur ses éléments les plus importants et donc les plus attendus pour la preuve de concept, à savoir : l'image map du tableau de bord, les sections (contenant des procédures), et la liste des concepts. L'implémentation des transformations des éléments qui ont été laissés de côté (page d'accueil du site, sommaire du manuel de vol en listes en accordéon, raccourcis depuis la page d'accueil) n'étant pas très intéressante techniquement parlant, nous avons considéré que la maquette suffirait à les illustrer.

Les transformations des procédures pour plateforme mobile ont été réalisées à partir des fichiers d'extension .dita générées par les exports Scenari vers Dita. Nous avons tenté de suivre au maximum la maquette que nous avions produis précédemment. Le model était le suivant : Une page de menu permettant d'accéder à chacune des étapes de la procédure, puis une page par étape avec des boutons en haut de page permettant de passer d'une étape à l'autre.

Après avoir écrit un premier jet de transformation, nous nous sommes rendu compte que le résultat n'était pas particulièrement adapté à la visualisation sur plateformes mobiles à l'écran de petite taille. En effet, les étapes sont composées de nombreuses notes (Attention, Conseil, Détails) rallongeant la taille des pages. La solution que nous avons apportée à ce problème est l'utilisation de liste à accordéons. Le principe est simple : Une seule note par page peut être visualisée à la fois. Afficher une autre note fait disparaitre le contenu de la précédente limitant ainsi le manque de visibilité.

La transformation pour les imagemap a sans doute été la moins évidente. En effet il nous fallait commencer par trouver un moyen facile et complet de décrire ce concept puis développer une couche javascript permettant de gérer efficacement l'interaction entre l'utilisateur et l'image. En dernier lieu seulement venait la transformation xls qui n'était plus alors qu'une formalité.

Pour l'expression du concept, nous avons estimé avoir besoin des informations suivantes : L'image cible ainsi qu'une description de chacune des notes. Pour chaque note, nous avons besoin de connaitre la forme de la note (cercle ou rectangle), sa position en pixel sur l'image ainsi que la légende associée. A terme, certaines améliorations pourraient être apportées comme un choix plus grand de formes ou alors un plus grand nombre d'informations relatives à la note (ex : un lien url).

Nous avons placé ces informations au sein d'un fichier html et nous avons alors ajouté la surcouche javascript. A l'aide de jQuery, nous avons implémenté un système récupérant ces informations dans le .html avant de créer les objets « notes » correspondant et le canvas (HTML5) qui contiendra l'image finale. On associe aussi une fonction à l'évènement de clique sur le canvas, récupérant et affichant la note présente à la position de l'évènement.

La liste des concepts est faite à partir d'une « map » créée sur scenariChain par l'auteur du manuel de vol. Celui-ci spécifie lors de la rédaction de son manuel les items qu'il considère comme étant des concepts. Scenari créé alors un fichier .map énumérant l'ensemble des concepts sélectionnés par l'auteur ainsi que le fichier .concept correspondant. Une transformation XSLT permet de changer le fichier .map en un fichier .dita (équivalent exact mais rédigé en dita, langage que nous avons sélectionné pour notre projet) et les fichiers .concept en fichiers .dita (idem).

C'est à partir de cette map rédigée en dita que nous créons la page mobile reprenant la liste des concepts. Notre transformation XSLT créée tout d'abord une page html jquery mobile classique dans laquelle elle insère une liste vide (balise <ul>). Puis elle parcourt la map dita et pour chaque concept qu'elle y trouve (encapsulé dans une balise topicref), elle ajoute un item de liste (balise <li>) contenant le nom du concept ainsi qu'un lien vers une page présentant sa définition, sa valeur, et éventuellement des liens vers d'autres concepts complémentaires.

La liste créée est triée par ordre alphabétique grâce à la fonction xsl:sort et possède un « filtreur » (sous la forme d'un champ de texte) permettant de rentrer des mots clés afin de retrouver plus rapidement un concept (objet javascript pris en charge par jQuerry mobile).

Enfin un script est ajouté à la page html créée afin d'insérer un list-divider (séparateur de liste) entre chaque ensemble de concepts commençant par la même lettre.