Création d'une maquette
Une fois la technologie choisie, nous avons développé une maquette du site mobile contenant le manuel de vol afin de s'entendre sur l'interface et le contenu du site dont la création serait automatisée par les transformations Dita vers jQuery Mobile. Le but de la démarche était d'être certain de savoir dans quelle direction s'orienter lors du développement des transformations xslt, en sus d'avoir un contenu exemplaire pour la version mobile du site du manuel de vol.
Voici une description de la maquette que nous avons créée :
Le contenu du manuel est accessible via un sommaire dont chaque élément est une liste en accordéon.
Lorsqu'on touche une section, l'accordéon se déplie. On peut alors lire l'introduction de la section présentant son contenu ainsi que le reste de son sommaire dont chaque élément est un lien vers la sous-section correspondante.
Lorsqu'on accède à une sous-section, l'ensemble de son contenu est présenté dans la même page, on peut continuer à naviguer au sein de la section via les flèches de navigation situées dans le header ou revenir à la table des matières via le bouton retour situé dans le footer.
Si au sein d'une sous-section un élément de contenu d'une autre sous-section est cité, un lien vers cette dernière permet d'y accéder immédiatement.
Des raccourcis vers les éléments les plus consultés du manuel sont présents dans la page d'accueil du site.
La liste des concepts est disponible depuis la page d'accueil du site. Elle permet d'accéder à l'ensemble des constantes du manuel, triées par ordre alphabétique. La liste dispose d'un filtreur pour faciliter les recherches (sous la forme d'un champ de texte où l'on rentre des mots clés).
Enfin, une image map du tableau de bord a été créée. Elle permet d'accéder à un schéma interactif de ce dernier : touchez du doigt un de ses éléments et sa description apparaitra à l'écran. Cette fonction n'étant pas inhérente à la bibliothèque jQuery mobile, il nous a fallu développer une interface optimisée pour mobile en javascript.
Le principe est le suivant : On inscrit en dur dans le document html la description des différentes « notes » accessibles sur l'image. On donne toutes leurs caractéristiques (légende, position en pixel, forme). Au lancement de la page on récupère à l'aide de javascript les données ainsi accessibles et on crée les objets associés avant de charger l'image de fond de l'imagemap. Le tout est placé dans un canvas (HTML5) pour pouvoir y dessiner aisément des formes géométriques indiquant la limite des annotations.
