Titre courant : Maquettage des applications Web : du modle lapplication

Maquettage des applications Web : du modle lapplication Olivier Gerb - olivier.gerbe@hec.ca, Service de l'enseignement des technologies de l'information, HEC Montral; Thi-Lan-Anh Dinh - tlanh.dinh@gmail.com, MATI Montral Anh-Tuan Nguyen - anh-tuan.nguyen@polymtl.ca, MATI Montral Le 13 avril 2011

Rsum Raccourcir le cot et le temps de dveloppement des projets informatiques est devenu un objectif important. De nouvelles mthodes de dveloppement ont t conues, de nouvelles techniques sont apparues dont la construction de maquette, largement utilise depuis des dcennies dans dautres domaines. Le maquettage utilis comme outil de comprhension et de prvisualisation du produit informatique final est une approche trs puissante. Les maquettes ralises dans le domaine informatique peuvent tre fonctionnelles (elles dmontrent les fonctionnalits attendues de lapplication) ou graphiques (elles montrant alors les interfaces de lapplication). Loutil prsent ici marie les trois : le ct fonctionnel, le ct graphique et le ct modle smantique. Loutil permet lutilisateur dlaborer et de construire la maquette dune application, ensuite il gnre le modle sous-jacent. Simple et flexible, notre outil reste le plus gnrique possible et peut facilement tre spcialis ou adapt selon les cas d'utilisation pour faire des projets pilotes et/ou faire office de prototype ou mini-application. Mots-cls Maquettage, maquette, application Web, approche modle, structure darbre, modle, modlisation

Keywords Prototyping, mock- up, Web application, model approach, tree structure, model, modeling

Maquettage des applications Web : du modle lapplication Contexte, problmatique et objectifs Dans la conduite de projets informatiques ou dun projet web en particulier, avant de dmarrer le dveloppement de lapplication finale (signifiant un ensemble de programmes informatiques qui servent aider un utilisateur faire un certain travail (http://www.granddictionnaire.com/)), on parle souvent de maquettes (fonctionnelles ou graphiques) et de maquettage. Une maquette fonctionnelle cherche illustrer le plus fidlement possible un enchanement logique d'crans qui montre la navigation travers l'application ainsi que son utilisation (ex. : Kohler, C., 2002; Fagot, D., 2010). Si une maquette fonctionnelle met laccent sur le fond (comme les fonctionnalits de lapplication, les interactions entre lutilisateur et lapplication, les contenus prsenter, saisir ou stocker), une maquette graphique met laccent sur la forme (comme les couleurs, les polices, les tailles des polices, la position des lments dans les pages). Les outils de maquettage permettent de crer rapidement de telles maquettes. Les avantages dutiliser des maquettes et des outils de maquettage sont multiples. Nous pouvons en citer ici quelques uns communment admis (Kohler, C., 2002; Fagot, D., 2010; Collet, M., 2009; Gargarismes ergonomiques, 2010): offrir l'ensemble de l'quipe projet une pr- visualisation, claire et raliste, du produit final avant mme son dveloppement; permettre de se concentrer sur le fond (fonctionnalits, interactions, contenus), sans se laisser distraire par la forme (prsentation graphique); permettre de communiquer sur le produit et de tester les fonctionnalits avec les utilisateurs, bien avant le dveloppement du produit; faciliter lvolution de linterface et des fonctionnalits proposes au dpart afin quelles correspondent le mieux possible aux attentes et besoins des utilisateurs; permettre, si ncessaire, de corriger ou valider des choix (techniques ou fonctionnels) avant de commencer le dveloppement du produit final; Dans le contexte de cration doutils Web de visualisation et d'dition, l'approche de MATI Montral repose sur l'utilisation de modles smantiques (MATI Montral, 2010). Un bon exemple est loutil gnrique MATI_Editor, issu du noyau d'OpenSyllabus qui se base sur un modle et les technologies Web 2.0 du Google Web Toolkit (GWT) pour dployer un diteur Web interactif denvironnements pdagogiques varis. Cet outil reste le plus gnral possible et peut tre spcialis/adapt selon les cas d'utilisation (portfolios, programmes, rfrentiel, plans de cours, etc.). noter que dans chaque cas d' utilisation, il s'agit tout simplement d'adapter MATI-Editor avec un peu de programmation pour tenir compte de fonctionnalits non disponibles. Ceci apporte une relle conomie en temps de dveloppement. Nos efforts sinscrivent dans la mme direction. Nous avons dvelopp un outil pour maquetter rapidement des applications Web pour lesquelles loutil MATI_Editor sera utilis. Les modles de donnes et contenus des maquettes crs seront exports vers l'outil gnrique MATI_Editor. De nombreux outils de maquettage sont disponibles pour les applications Web (Bouillot, T., 2010; Fagot, D., 2010; DI POL, E., 2008) mais aucun ne permet de crer des maquettes prenant en compte les modles sous-jacents et la smantique de lapplication. Ces outils ngligent la modlisation des donnes et cette absence de modlisation peut s'avrer problmatique pour des sites ou applications Web complexes. Nous prsentons dans les prochaines sections notre outil et ses applications.

Proposition Avant de prsenter notre proposition, afin de rduire tout malentendu et ambigut, ct des notions de base comme application, maquette, maquettage, etc., prsentes dans la section prcdente, nous prcisons d'abord deux autres notions utilises dans cet article, il sagit de modle et instance d'un modle. Un modle, qui est un codage dune reprsentation de quelques aspects de lunivers du discours, contient un ensemble dlments et de relations entre ces lments (Dinh, T.-L.-A, Gerb, O., Houari, S., 2005). Une instance dun modle est un modle rsultant du modle initial dont un ou plusieurs lments types sont instancis (Dinh, T.-L.-A, 2007). Notre outil de maquettage (MATI_Maketor) est construit sur un modle gnrique abstrait (Figure 1) qui permet de reprsenter et de structurer sous forme darbre les contenus visualiser et diter dans une application Web. Ce modle gnrique abstrait est celui d'OpenSyllabus prsent par Gerb et Raynauld (2009). Le nud AMSRoot est la racine de larbre et reprsente le modle de lapplication. Un nud AMSStructure est un lment structurel permettant organiser des units (AMSUnit) ou dautres structures (AMSStructure). Un nud AMSUnit est une unit smantique de la structure et par convention, chaque AMSUnit correspond une page. Un nud AMSUnitStructure sert organiser le contenu dune unit. Un nud AMSUnitContent a pour but de regrouper des lments possdant des traits smantiques communs. Un nud AMSContext reprsente le contexte dutilisation dune ressource dans une unit. Un nud AMSResource est une feuille dans larbre et reprsente une ressource comme un document, un URL, une description, un lment (ex. : un champ texte remplir, groupe de botes cocher, groupe de boutons radio choisir, etc.) d'un formulaire, etc. Les lecteurs intresss sont invits consulter Gerb et Raynauld (2009) pour une description plus dtaille du modle.
ASMRoot ASMStructure 0..1 * * ASMUnit * ASMUnitStructure 1..1 ASMUnitContent * ASMContext 0..* references 1..1 ASMResource

0..*

Figure 1 : Modle gnrique abstrait Noyau de MATI_Maketor

Afin de reprsenter les maquettes et les modles des applications Web, nous avons ajout aux lments nuds de larbre des mtadonnes pour rendre compte du comportement de lapplication. Ces mtadonnes permettent de spcifier des informations comme : Quel type dutilisateur a le droit dditer ou de supprimer un lment? Quel utilisateur peut voir le menu associ? etc. Ces mtadonnes permettent galement de reprsenter les flux de travail avec les acteurs. titre dillustration, la Figure 2 prsente un exemple dune page construite par un concepteur en utilisant notre outil et la Figure 3 montre la description en XML du modle correspondant. Dans la page Profil affiche, les informations personnelles sur prnom, nom, code postal, pays, etc. sont ditables par un utilisateur possdant le rle tudiant .

Figure 2 : MATI_Maketor Exemp le dune maquette Interface concepteur

Figure 3 : MATI_Maketor Exemp le dun modle dcrit en XM L

Limplmentation de MATI_Maketor est assez simple et flexible. Loutil a t dvelopp en JavaScript et JSP, excut par un navigateur Web, et interfac avec une base de donnes relationnelle MySQL. Cet outil permet au concepteur de construire en mme temps la maquette (via les interfaces ddition) et le modle (gnr par loutil) de son application, tel quillustr par la Figure 4. Ce modle gnr peut donc tre considr comme une instance de notre modle gnrique abstrait.

Application Application (JavaScript) Application (JavaScript) (JavaScript) Gnrateur (XML) Modle (XML) Reverseur (XML) diteur (HTML)

Figure 4: MATI_Maketor Transformation entre le modle et la maquette

Les interfaces simples et faciles utiliser (cf. Figure 2) permettent au concepteur de se concentrer entirement sur ce qui est le fond de son application Web, comme par exemple, lorganisation smantique des contenus, la spcification des valeurs des mtadonnes des nuds (types, tags smantiques, droits d'accs, etc.), la planification des interactions pour les utilisateurs selon leurs rles, pour enfin construire le modle de lapplication. noter que ce modle peut tre export loutil MATI_Editor laide du fichier XML produit par MAT_Maketor. De plus, loutil permet aux utilisateurs de simuler et tester rapidement et de faon raliste l'environnement planifi, puis si ncessaire faire rapidement et facilement des ajustements. titre dillustration, les Figure 5 et Figure 6 prsentent deux vues de la page Profil de la maquette illsutre la Figure 2, respectivement pour un utilisateur de rle tudiant (qui peut diter les informations sur prnom, nom, code postal, pays, etc.) et pour un a utre utilisateur de rle tuteur (qui ne peut pas diter les informations prsentes dans la page mais peut laisser des commentaires).

Figure 5 : MATI_Maketor Exemp le dune maquette Interfaces utilisateur de rle tudiant

Figure 6 : MATI_Maketor Exemp le dune maquette Interfaces utilisateur de rle tuteur

Notre outil de maquettage favorise le travail collaboratif et le partage. Un utilisateur peut partager un modle (ou une maquette) dont il est propritaire avec dautres utilisateurs pour travailler ensemble et/ou obtenir des commentaires. Il peut aussi diffuser ce modle (i) en crant des copies pour des usagers de son choix (chaque usager choisi a alors une copie du modle et devient propritaire de cette copie) et (ii) en partageant ces copies avec des usagers de son choix. Loutil supporte dautres fonctionnalits pertinentes comme par exemple limportation/lexportation en format XML, la cration de versions PDF, la cration des copies ou la suppression dun modle donn, la gnration de formulaire au standard XFORM ou encore la gnration du workflow associ au modle au standard XPDL. La prochaine section prsente diffrentes applications de loutil MATI_Maketor. Applications valuations Loutil MATI_Maketor a dj servi pour crer plusieurs maquettes dapplications Web dans le cadre des diffrents projets en cours de MATI Montral. Pour tmoigner de l'efficacit de l'outil ainsi que des modles crs, nous prsentons dans cette section les cas dutilisation dvelopps dans le cadre des deux projets importants la MATI Montral : ePorfolio et CDIO. ePorfolio a pour objectif dexprimenter un modle de portfolio partir des changes de connaissances entre chercheurs (producteurs de savoirs scientifiques) et des dveloppeurs (dtenteurs de savoirs technologiques) dans le but de dvelopper un ou des modles gnriques de portfolio (en enseignement suprieur) interoprable et transfrable qui peuvent rpondre aux besoins des utilisateurs du campus (MATI Montral, 2010). L'outil MATI_Maketor a permis de maquetter plusieurs portfolios dont les plus reprsentatifs sont les suivants : portfolio de communication orale et crite (cole Polytechnique de Montral); StudioBook - Portfolio dapprentissage et environnement de travail interactif (Facult de lamnagement, Universit de Montral); MPASS - Matrise en pdagogie applique aux sciences de la sant (Facult de mdecine, Universit de Montral); Portfolio de prsentation (HEC Montral). Faire les maquettes de diffrents types de portfolios avec l'outil MATI_Maketor a aid bien identifier et clarifier les besoins et les attentes des utilisateurs, et de crer des modles de portfolios adapts leurs besoins. Chaque exprience de maquettage renforce notre approche modle qui peut offrir une solution diffrents diffrencis. Une autre valeur ajoute de la solution propose par la MATI Montral est le pouvoir de soutenir la mise en uvre des approches comptences, plus particulirement dans des environnements de portfolios lectroniques. En effet, notre modle gnral permet de

reprsenter/btir un rfrentiel de comptences (pour fin de communication, partage et appropriation du personnel pdagogique et administratif) et ce rfrentiel peut tre intgr au sein des modles de portfolios. Ces comportements sont illustrs par des maquettes cres en utilisant notre outil de maquettage (cf. Figure 7; Gerb, O., Raynauld, J., Teta Nokam, N., 2011). Ce genre de comportement sera intgr dans un outil de portfolio lectronique en cours de dveloppement la MATI Montral (Raynauld, J., 2011). Ceci permet de faciliter grandement le suivi, lvaluation et la certification des comptences acquises, et aussi de soutenir les processus dagrment des programmes.

Figure 7 : MATI_Maketor Structure labore partir du Rfrentiel de co mptences du programme de baccalaurat en sciences infirmires, Facu lt des sciences infirmires, Un iversit de Montral (2010)

Si le projet ePortfolio permet de tmoigner de l'efficacit ainsi que des avantages de l'outil MATI_Maketor et de notre modle gnrique abstrait dans la phase de maquettage, le projet OSYL/CDIO (http://www.matimtl.ca/projet.jsp?id=19&type=encours) montre une adaptation de loutil MATI_Maketor qui peut devenir un prototype fonctionnel (ou une miniapplication) et ainsi permettre de crer et de grer de vrais plans (et/ou analyses) de cours. Dans ce prototype, les plans de cours dun tablissement denseignement (il sagit dans ce cas de lcole Polytechnique de Montral) sont reprsents par un modle instanci de notre modle gnrique et nous avons adapt la prsentation graphique ainsi que lorganisation des fentres ddition aux besoins de ltablissement, tel quillustr par la Figure 8.

Figure 8 : Outil de crat ion et de gestion des plans (et/ou analyses) de cours

Nous avons galement dvelopp pour ce prototype des fonctionnalits non disponibles dans loutil MATI_Maketor comme les fonctionnalits de gestion des soumissions / retours / validations. Ceci permet un utilisateur deffectuer les tches suivantes : (i) soumettre un plan de cours (version avec ou sans commentaires) ses suprieurs pour des commentaires (crer des copies figes, mode commentaires); (ii) retourner un plan de cours la personne qui lui l'ai soumis (crer des copies figes, mode commentaires); (iii) valider un plan de cours si cet utilisateur a ce droit (crer des copies figes, mode consultation); (iv) rendre publique/prive un plan de cours d'un groupe si cet utilisateur est responsable de ce groupe; etc. Le prototype dvelopp permet de simplifier et de rendre plus transparent toute la chane de cration et dapprobation dun plan de cours; lenvironnement propos sintgre facilement tous les systmes administratifs des universits et tous les gabarits de plans de cours utiliss (Blog de MATI Montral, 2011). Conclusion Actuellement, les dlais des projets informatiques tant de plus en plus rduits, le maquettage comme outil de comprhension et de pr-visualisation est devenu incontournable en tant que solution rapide, peu coteuse et efficace pour s'assurer que le produit final corresponde vraiment aux besoins des clients et leurs mthodes de travail (Kohler, C., 2002). MATI_Maketor, notre outil pour maquetter les applications Web, se distingue des autres outils de maquettage disponibles par lutilisation dun modle smantique (i) pour reprsenter/structurer les donnes / contenus visualiser / diter dans une application Web et aussi (ii) pour spcifier / coder des interactions possibles entre les utilisateurs et lapplication. Notre outil MATI_Maketor permet ainsi lutilisateur dlaborer et construire la maquette de son application puis de gnrer le modle correspondant. Limplmentation de loutil MATI_Maketor est simple et flexible. Loutil reste le plus gnral possible et peut tre spcialis / adapt facilement selon les cas d'utilisation pour faire des projets pilotes et/ou devenir des prototypes ou mini-applications.

Rfrences Gerb, O., Raynauld, J., Teta Nokam, N. (2011). Les comptences - approche, rfrentiel et valuation : Du concept l'oprationnalisation. http://www.matimtl.ca/evenement.jsp?id=82 Blog de MATI Montral (2011). Des outils pour amliorer la gestion des processus pdagogiques. http://matimtl.wordpress.com/2011/03/23/des-outils-pour-ameliorer- lagestion-des-processus-pedagogiques/ Raynauld, J. (2011). ePortfolio en enseignement suprieur - Dmonstration d'une solution axe sur l'apprentissage et l'valuation des comptences. HEC Montral, MATI Montral. http://www.matimtl.ca/evenement.jsp?id=83 Bouillot, T. (2010). Outils de prototypage dinterface. http://www.ergonomieinterface.com/conception- maquettage/outils-de-prototypage-dinterface-2/ Facult des sciences infirmires (2010). Rfrentiel de comptences du programme de baccalaurat en sciences infirmires. Universit de Montral Fagot, D. (2010). Zoning, wireframe, maquettage, prototype ... : les meilleures pratiques. http://www.clever-age.com/veille/blog/maquettage-et-prototypage- le-tour-des-notions-etdes-outils.html Gargarismes ergonomiques (2010). Phase de ergonomiques.com/post/conception-ergonomie MATI Collet, conception. http://www.gargarismesPortfolio dun MATI. projet.

Montral (2010). Plan daction du Projet http://nuagemati.dyndns.org/mediawiki/index.php/Accueil

M. (2009). Le maquettage rapide en phase dinitialisation http://www.sqliagency.com/blogs/ergonomicgarden/?p=139

Gerb, O. et Raynauld, J. (2009). An Open Syllabus Model. ED-MEDIA 2009--World Conference on Educational Multimedia, Hypermedia & Telecommunications, Honolulu, USA, 22-26 juin 2009. http://www.aace.org/conf/edmedia/. DI POL, E. (2008). Les outils online de conception de wireframes : introduction. http://www.superfiction.net/blog/index.php?2008/09/01/297- les-outils-online-deconception-de-wireframes- introduction Dinh T.-L.-A. (2007). Modlisation pour la gestion de modles. Thse de doctorat, Universit de Montral. Dinh, T.-L.-A, Gerb, O., Houari, S. (2005). Gestion de modles: dfinitions, besoins et revue de littrature. In S. Girard, J-M Favre, P-A Muller, X. blanc, editors, Actes des premires journes sur l'Ingnierie Dirige par les Modles (IDM05), pages 1--15, Paris, France, Juin-Juillet 2005. ISBN 2-7261-1284-6. Kohler, C. (2002). http://lgl.isnetne.ch/isnet43/phaseA/theoriemaquettage/Maquettage.htm Maquettage.