34
Ing´ enieur En Sciences Informatiques Rapport de Stage de Fin d’ ´ Etudes 2009 Composition d’Interface Homme Machine pour la cr ´ eation d’un nouveau service : premi ` eres ´ etapes Stagiaire : Christian Brel – [email protected] (SI5 fili` ere IHM) Maˆ ıtre de stage : Audrey Occello – [email protected] (Maˆ ıtre de conf´ erence ` a Polytech’ Nice-Sophia) Laboratoire : I3S, CNRS (Sophia–Antipolis) 2 Mars 2009 – 30 Septembre 2009 esum´ e Les travaux dans le domaine du g´ enie logiciel tendent ` a offrir toujours plus de possibilit´ es en terme de r´ eutilisation. Les concepteurs de sites web sont confront´ es ` a cette probl´ ematique : construire et faire ´ evoluer les applications web en combinant des services provenant de sources diverses. L’op´ eration de composition des services implique de construire une nouvelle Interface Homme Machine (IHM), c’est-` a-dire de nouvelles pages web, afin de permettre l’acc` es et l’utilisation combin´ ee de ces services distants. Puisque le concepteur d’applications web n’a pas acc` es aux services eux mˆ emes mais seulement ` a leurs IHM, il est alors plus int´ eressant d’exploiter les principes de composition et de r´ eutilisation directement au niveau des IHM. Ceci est l’objet d’un sujet de th` ese dont le sujet est amorc´ e par ce stage.

Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Embed Size (px)

Citation preview

Page 1: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Ingenieur En Sciences InformatiquesRapport de Stage de Fin d’Etudes 2009

Composition d’Interface Homme Machine pour la creation d’unnouveau service : premieres etapes

Stagiaire :Christian Brel – [email protected](SI5 filiere IHM)

Maıtre de stage :

Audrey Occello – [email protected](Maıtre de conference a Polytech’ Nice-Sophia)

Laboratoire :I3S, CNRS (Sophia–Antipolis)

2 Mars 2009 – 30 Septembre 2009

Resume

Les travaux dans le domaine du genie logiciel tendent a offrir toujours plus de possibilites enterme de reutilisation. Les concepteurs de sites web sont confrontes a cette problematique :construire et faire evoluer les applications web en combinant des services provenant de sourcesdiverses. L’operation de composition des services implique de construire une nouvelle InterfaceHomme Machine (IHM), c’est-a-dire de nouvelles pages web, afin de permettre l’acces etl’utilisation combinee de ces services distants. Puisque le concepteur d’applications web n’apas acces aux services eux memes mais seulement a leurs IHM, il est alors plus interessantd’exploiter les principes de composition et de reutilisation directement au niveau des IHM.Ceci est l’objet d’un sujet de these dont le sujet est amorce par ce stage.

Page 2: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Remerciements

Je tiens tout d’abord a remercier mon encadrante Audrey OCCELLO pour avoir su me motiver,m’ecouter et surtout pour m’avoir fait confiance. Je tiens a remercier les deux personnes qui ont aussieffectuer mon encadrement durant ce stage, Anne-Marie PINNA-DERY que je remercie pour m’avoiraccueilli dans son bureau et Philippe RENEVIER-GONIN que je felicite pour son mariage.

Un grand merci a Michel RIVEILL qui m’a permis d’integrer l’equipe Rainbow pour ce stage et pouravoir accepte de me garder pour la these a venir.

Je remercie aussi Cedric JOFFROY pour les discussions et petits debats que nous avons pu avoirpendant ces 6 mois. Merci d’avoir su m’ecouter et me motiver quand il le fallait. Je n’oublie pas MichaelLAGUERRE pour sa bonne humeur, son enthousiasme et les bons souvenirs surtout lors des courtspartages de bureau. Merci a l’equipe Rainbow pour leur accueil convivial et leur aide durant ce stage.

Je tiens egalement a remercier l’equipe Edelweiss de l’INRIA et plus particulierement Alain GIBOIN,Olivier CORBY et Fabien GANDON pour leur soutien, leur aide et leur conseils avises sans lesquels jen’aurai pu avancer aussi bien.

Bien evidemment, je remercie mes amis et ma famille qui tout au long de ce stage mais aussi toutau long de mes etudes ont su me soutenir et m’accompagner dans tous ces moments de doute mais aussidans tous ces moments de joies. Merci a tous !

Page 3: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Sommaire

1 Introduction 3

2 Description des objectifs/des besoins et etat de l’art 4

3 Approche et mise en oeuvre 12

4 Conclusion 21

Bibliographie 23

A Sujet de stage en images 25

B DTD (Document Type Definition) decrivant la mise en page des elements d’IHM 28

Page 4: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 1

Introduction

La democratisation d’Internet et son adoption dans la majorite des foyers en fait un outil de commu-nication puissant. Par consequence, Internet est une excellente vitrine pour les entreprises et les marquesassociees. Ces dernieres proposent des sites Web de plus en plus evolues devenant de veritables applica-tions proposant de la valeur ajoutee (service de reservation ou d’achat en ligne, comparateurs de prix oude trajets, stockage virtuel de donnees, ...) pour l’utilisateur et plus seulement des pages d’informations.

Pour attirer les visiteurs, les applications web doivent evoluer en permanence, savoir se renouveler pourproposer toujours plus de valeur ajoutee. Le besoin de visibilite et de reactivite oblige les concepteursd’applications web a repenser la maniere de concevoir ces applications et en particulier leurs InterfacesHomme Machine (IHM). Les applications ne sont plus concues pour un usage predetermine, elles ne sontplus distribuees par un canal classique d’achat mais largement diffusees sur internet et enfin elles nesont plus limitees uniquement aux postes de bureau. En effet, les developpeurs mettent a disposition,sur des sites web, de plus en plus de services qui vont permettre a d’autres developpeurs de construiresur mesure d’autres services.

Le developpeur va construire son service par composition de services existants et va donc devoir construirede nouveau une IHM pour le nouveau service afin de permettre l’utilisation combinee des differents ser-vices composes. L’objectif du stage est de proposer un mecanisme de composition semi-automatique etde proposer une IHM pour guider cette composition.La suite de ce document est organisee comme suit. Dans le chapitre 2, je presente une description desbesoins et objectifs a travers une etude de cas et un etat de l’art sur lesquelles je m’appuie pour presenterle contexte du sujet. Puis dans le chapitre 3, je presente l’approche proposee pour resoudre le problemeleve par ce sujet et la description de la preuve de concept mise en place. Enfin, la chapitre 4 conclut cedocument et met en avant les perspectives des travaux commences pendant cette periode de stage.

Page 5: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2

Description des objectifs/des besoins et

etat de l’art

La large diffusion d’applications web permet a un concepteur d’application de pouvoir reutiliser desservices existants afin de construire ses propres services. Un service peut etre decrit comme l’ensembled’un noyau fonctionnel, qui decrit les fonctionnalites fournies par le service et une IHM qui va assu-rer l’interaction entre le service et l’utilisateur. Dans ces deux mondes qui sont le noyau fonctionnel etl’IHM, lorsqu’un changement est effectue, nous voulons qu’il y ait un impact d’un mon sur l’autre. Auniveau fonctionnel, beaucoup de travaux etudient la composition de service notamment avec les webservices (Newcomer 2002) et les orchestrations de web services (Peltz 2003). Cependant, lorsqu’une tellecomposition est effectuee, aucun impact n’est effectue sur l’IHM qui ne reflete alors pas toutes les possi-bilites en terme de fonctionnalites. Pour remedier a ce probleme des travaux sont en cours dans l’equipeRainbow (I3S) et mettent en place un ensemble de modeles regroupe sous la denomination ALIAS (Abs-tract Languages for User Interface Assembly) decrit dans Pinna-Dery et al. (2008) qui permet de decrireles IHM pour appliquer l’impact de la composition du noyau fonctionnel sur l’IHM. La composition desIHM a partir de la composition du noyau fonctionnel est alors possible et nous parlons de composition deservices dirigee par les informations donnees par la composition effectuee au niveau du noyau fonctionnel.

Le contexte global de ce stage s’insere dans la demarche inverse de celle decrite ci-dessus, c’est-a-dired’effectuer une composition de services dirigee par les informations donnees par la composition effectueeau niveau de l’IHM. L’avantage de cette approche reside dans le fait que la plupart du temps le concep-teur d’application web a beaucoup plus facilement acces a l’interface d’un service qu’il veut reutiliser,partie visible du service, qu’a sa description fonctionnelle.

Le but du stage est d’effectuer un travail en amont, les premieres etapes, c’est-a-dire de proposer unmecanisme de composition semi-automatique et de proposer une IHM qui permettrait de faciliter lacomposition des IHM des services. Pour cela, je me suis appuye sur les travaux existants lies a la com-position d’IHM dont je vais faire une description dans ce chapitre. Ces travaux ne sont pas seulement enrelation avec la composition mais aussi avec l’adaptation des IHM en fonction de leur contexte d’utilisa-tion. Je presente aussi dans ce chapitre des travaux lies aux placement des elements dans l’IHM, pointdelicat lors de la composition puisqu’il faut combiner plusieurs positionnements (issus des differentes IHM

Page 6: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 5

des services impliques dans la composition) avec des possibles conflits de placement a detecter. Enfin, jepresente d’autres travaux lies au sujet global de ce stage : les premier lies a la composition de servicesdirigee par la composition de leur noyau fonctionnel, me donnant des elements de base pour effectuerla modelisation de mon approche et les second sur les barrieres d’apprentissage que peut rencontrerl’utilisateur pour utiliser un logiciel afin de faciliter l’apprehension de l’IHM (guidant la composition).Afin d’expliquer clairement toutes les notions en rapport avec la composition et l’adaptation d’IHM etles travaux que j’ai realise durant ce stage, je vais tout d’abord commence ce chapitre par la presentationd’une etude de cas.

2.1 Etude de cas : recherche de recettes de cuisine et calcul du prix

de revient

Cette section decrit une etude de cas qui va nous permettre dans la suite du rapport d’expliquer lesdifferentes notions, principes abordes et problematiques. Cette etude de cas utilise des services simplifiesafin de faciliter la comprehension des enjeux. L’etude de cas met en eveil les talents culinaires de chacunpuisqu’il s’agit d’utiliser deux services qui vont nous permettre de confectionner de bons petits plats :

– le premier est un service de recherche de recettes, l’utilisateur renseigne le nom de la recetterecherchee et obtient au final la description de la recette avec notamment les ingredients a utiliser ;

– le second est un service d’achat d’articles consommables, pour lequel l’utilisateur devra remplir unpanier soit en selectionnant les articles un par un, soit en donnant directement une liste de courses,dans le but d’obtenir le prix total de son panier.

L’IHM associee au service de recherche d’une recette se decoupe en trois ecrans 1 comme decrit dans lafigure 2.1. Le premier permet a l’utilisateur de renseigner le nom de la recette et de lancer la recherche.Sur le second, l’utilisateur voit apparaitre une liste de noms de recettes avec une petite description rapide.Il peut alors cliquer sur le nom d’une recette et lancer la visualisation de celle-ci. Le dernier ecran estla visualisation de la recette en elle-meme avec son nom complet, le temps de preparation et de cuisson,les ingredients a utiliser et enfin les etapes a suivre pour reussir la recette.

OK

Trouver une recette

Tarte aux pommes

Liste des recettescorrespondants à la recherche

Tarte aux pommes et aux groseillesTarte aux pommes, raisins et cannelleTarte aux pommes et raisin blanc...

Tarte aux pommes, raisins et cannelle

Préparation : 30 minCuisson : 40 min

Ingrédients (pour 6 personnes) :--> Pâte brisée à la cannelle :- 200 g de farine- 100 g de beurre...--> Garniture :- 1 kg de pommes reinettes- 100 g de sucre...

Préparation :Mettez les raisins secs dans le rhum et laissez macérer au moins 30 min.

Préparez la pâte : tamisez la farine avec le sel et la cannelle,ajoutez le beurre en morceaux.Travaillez du bout des doigts et ajoutez l'eau enprétrissant rapidement. ...etc...

Fig. 2.1 – IHM du service de recherche d’une recette.

1. IHM simplifiee provenant du site http ://www.marmiton.org

Page 7: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 6

L’IHM associee au service d’achat d’articles consommables se decoupe en 4 ecrans 2 dont 3 decritsdans la figure 2.2. Correspondant au premier ecran, la premiere tache de l’utilisateur sera de remplirle panier. Pour ce service, l’utilisateur a deux possibilites pour effectuer cette action, soit il ajoute desingredients a son panier en les selectionnant dans des categories predeterminees, soit il renseigne une zonede texte qui decrit sa liste de courses avec un ingredient par ligne. Pour cette deuxieme possibilite, unefois sa liste de course validee, il va alors, dans un second ecran, pour chaque ingredient, choisir la quantitevoulue et ajouter l’ingredient au panier. L’utilisateur valide ensuite son panier et voit apparaıtre, sur letroisieme ecran, la facture. Il peut alors valider la facture et effectuer le paiement. Le quatrieme ecranpour le paiement n’est pas montre dans la figure 2.2 car il n’apporte rien dans le cadre de notre etude decas puisque nous voulons seulement obtenir, apres avoir effectuee la composition, le cout de la recette.

OK

Frais

Flash Liste

Surgelés Fruits & légumes ...Boissons

Paniersucrepommepoirefarine

Valider le panier

Flash Liste Panier

=>Sucre blanc poudre -- 1 -- 1,67€6 Pommes Golden Origine France 1 kg

2

6 Pommes Royal Gala Origine Nouvelle Zélande 1 kg1

6 Pommes Granny Smith Origine France 1,2 kgAjouter1

...1

PanierSucre blanc poudre -- 1 -- 1,67€

Valider la facture

6 pommes Golden -- 1 -- 2,49 €

Total facture: 4,16 €

Facture

sucrepommepoirefarine

Ajouter

Ajouter

Ajouter

Fig. 2.2 – IHM du service d’achat.

Le but est de composer ces deux services afin d’obtenir un service de recherche de recette qui nousdonne aussi le cout de revient de la recette. Effectivement, lorsque nous choisissons une recette, nous nesavons pas comment evaluer son cout de revient. Nous pouvons constater dans cette etude de cas queces deux services sont disponibles sur differents sites web. Par consequent, sans composition, l’utilisateurest oblige de faire la visite de plusieurs sites web pour realiser une activite donnee (ici, obtenir la recetteavec son prix de revient). Une solution serait de reconstruire une application qui nous permette de fairecela. Ce developpement peut etre fastidieux et tres couteux. De plus, dans un monde ou l’evolution desapplications doit etre dynamique et rapide, cette solution ne peut etre satisfaisante car le developpementcomplet d’une application ne permet pas d’etre assez reactif. Une alternative est de composer des servicesexistants et donc de composer les interfaces qui les accompagnent.

Avant de presenter le travail realise, je vais dans les prochaines sections presenter un etat de l’art surles travaux lies a la composition d’IHM, sur les travaux lies au placement des elements dans l’IHM etd’autres travaux lies au sujet presente dans ce rapport.

2. IHM simplifiee provenant du site http ://www.telemarket.fr

Page 8: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 7

2.2 Travaux existants lies a la composition d’IHM

La communaute IHM preconise de developper des interfaces a des niveaux multiple d’abstractionde maniere independante afin de produire des IHM de qualite et exploitables dans divers contextes(differents systemes d’exploitation, differents langages de programmation, differents supports tels queles Pcs, les PDAs ou encore les telephones, etc) comme decrit dans Calvary et al. (2003). A partir den’importe lequel de ces niveaux, le developpeur peut obtenir differentes variantes d’une meme IHM selonle contexte d’utilisation. Le passage d’un niveau au suivant se fait plus ou moins automatiquement.Quatre niveaux d’abstraction sont identifies :

– les taches utilisateur et concepts du domaine qui decrivent l’IHM selon une perspective domaine,sans prejuger, d’une quelconque representation. Les concepts du domaine (par exemple, les notionsde recette, d’ingredient, d’article, de prix) sont les entites manipulees par les taches (par exemple,la recherche de recettes, la validation du panier d’article, etc) ;

– l’interface abstraite qui structure l’IHM en espaces de dialogue (une page web par exemple) et fixela navigation entre ces espaces. A ce niveau, on reste independant de tout contexte d’utilisation ;

– l’interface concrete qui affine l’IHM en introduisant les choix d’interacteurs (boutons, menus, etc.)en fonction d’un contexte d’utilisation donne (l’action ”valider” peut etre associee a un clic sur unbouton dans une IHM pour un poste de travail ou a une commande vocale dans le cadre d’uneIHM sur telephone portable dans un contexte ”mains libres” par exemple) ;

– l’interface finale, qui correspond a implementer l’interface concrete dans un langage donne (JavaSWING, Adobe Flex, HTML, etc) et un systeme d’exploitation specifique. C’est a travers ce dernierniveau de description qu’intervient generalement l’utilisateur d’une application.

2.2.1 Composition de mashups au niveau de l’interface finale

Dans le domaine du Web, les travaux autour de la composition d’IHM se font directement au niveau”interface finale”. Les travaux les plus repandus concernent les mashups c’est-a-dire de ”petites” interfacesproposant un service particulier (la meteo, les news, pages jaunes, programmes tele, etc). Il existe deuxtypes de travaux qui se differencient par le fait d’utiliser ou non les flots de donnees au niveau de lacomposition et qui repondent en realite a deux besoins differents :

1. celui de partager des donnees et de faire differents traitements sur ces donnees,

2. celui d’avoir un acces rapide a differents services sur une seule page.

Acces rapide a differents services sur une seule page

Nous pouvons citer IGoogle [3 (2007)] ou Netvibes [4 (2007)] comme outils utilisants les mashupspour repondre au besoin d’acces rapide aux services. Pour ce type de mashups, la seule compositionpossible est en realite le regroupement de plusieurs mashups dans des categories definies par l’utilisateur.Ces portails Web ne permettent pas d’effectuer des echanges de donnees entre les differents mashups.Par exemple, pour notre cas d’etude, nous aurions un mashup pour la recherche de recettes et un autrepour l’achat d’articles consommables. Les deux pourraient alors etre mis cote a cote, ce qui representeune amelioration puisque les deux services sont alors accessibles tous deux sur une meme page web etnon plus sur deux sites web differentes.

Page 9: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 8

Partage et traitements des donnees issues des services

Popfly [1 (2008)] de Microsoft ou Yahoo Pipes [2 (2008)] utilisent les flots de donnees afin d’effec-tuer l’enchaınement entre plusieurs mashups. Ces outils repondent au besoin de partage de donnees.Graphiquement reliees au moyen de fleches, les sorties d’un ou de plusieurs mashups vont correspondreaux entrees du mashup suivant. L’interface du dernier mashup est reutilisee comme interface resultat dela composition. Chaque mashup effectue le traitement pour lequel il est concu et renvoie en sortie lesdonnees traitees. Ici, nos deux mashups de recherche de recettes et d’achat d’articles, seraient alors reliespar le flux de donnees correspondant a la liste des ingredients qui sont aussi des articles consommables.

La reutilisation d’IHM fait partie integrante de la composition des mashups de presentation meme sicelle-ci correspond simplement a une juxtaposition. Quant aux mashups avec flux de donnees, la com-position se fait directement au niveau des services sous-jacents et seule l’IHM des mashups se trouvanten bout de chaine sont reutilisees.

2.2.2 Composition en amont de l’interface finale

D’autres approches travaillent en amont de l’interface finale afin de definir la composition indepen-damment de toute contrainte liee au contexte ou de choix technique. Dans cette lignee, ComposiXML(Composition of Applications specified in UsiXML) (Lepreux et al. 2007) permet de realiser la fusion dedifferentes IHM en une seule grace a un certain nombre d’operateurs (union, intersection, etc) et a unlangage de description d’interfaces utilisateurs, USIXML (USer Interface eXtensible Markup Language)(Limbourg et al. 2004). Dans ce contexte, la reutilisation des IHM de depart peut se faire au niveau”interface concrete”. Cependant, la composition mise en place est basee sur la structure de l’IHM et neprend pas en compte les informations fonctionnelles liees au comportement du service, ce qui a pourconsequence une grande perte d’informations utiles pour la composition tel que les enchaınements entreles differentes fonctions.

2.2.3 Composition au niveau des arbres de taches et des concepts

D’autres travaux montent encore d’un niveau d’abstraction en realisant la composition a partir desdescriptions des taches utilisateur (Lewandowski et al. 2007). Ces travaux utilisent les arbres de tachespour decrire l’enchaınement des interactions entre l’utilisateur et l’application. Un arbre de taches va per-mettre de definir les taches que l’interface doit supporter afin que l’interface soit fonctionnelle. Une tachepeut etre un but ou une procedure, c’est-a-dire un ensemble de sous-taches liees. Ainsi, la compositiond’IHM consiste a composer les arbres de taches correspondant a chaque IHM de depart. La compositionde deux arbres resulte en la creation d’un nouvel arbre avec l’ajout d’une tache supplementaire regrou-pant les taches similaires dans les deux arbres de depart. Pour notre cas d’etude, nous pouvons retrouverdes taches similaires lors de l’affichage des informations sur la recette et l’affichage du prix total dupanier. Pour regrouper ces deux affichages lors de la composition, nous pouvons alors appliquer cettemethode et reunir ces deux taches d’affichage sous une tache commune ce qui aura pour consequencede regrouper ensemble les elements d’IHM correspondants par exemple la liste des ingredients et leur prix.

Ces derniers travaux sont interessants dans la mesure ou l’exploitation de l’arbre de taches permet

Page 10: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 9

de prendre en compte l’aspect fonctionnel au niveau de la composition. Par exemple, l’enchainementdes taches (voir figure 3.1) ”lancer la recherche” et ”selectionner la recette dans une liste de recettes”,pour le service de recherche de recettes, est une information precieuse indiquant le fait que la deuxiemetache ait besoin d’information provenant de la premiere pour bien se derouler. Nous pouvons remarquercependant que l’utilisation seule des arbres de taches ne suffit pas pour effectuer la composition puisquenous n’avons aucune information sur le decoupage et le placement des elements dans l’IHM.

2.2.4 Synthese

Jusqu’a present, les travaux autour de la composition d’IHM ne s’appuient que sur un seul niveaud’abstraction comme cela est resume sur la figure 2.3. Je propose au contraire de tirer parti des informa-tions relatives a differents niveaux afin de proposer des regles de composition plus completes : elementsfonctionnels du niveau ”taches”, elements de decoupage de l’IHM du niveau ”interface abstraite” et ele-ments de placements du niveau ”interface concrete”.

Fig. 2.3 – Resume de l’etude des travaux lies a composition d’IHM.

2.3 Travaux existants relatifs aux placements des elements dans l’IHM

L’organisation des IHM est un concept frequemment utilise. A travers mes experiences de program-mation, je retiens les proprietes suivantes :

– La notion de mise est page est generalement liee a la notion de contenant. D’une part les deuxnotions peuvent se confondre, comme par exemple dans les langages abstraits de description d’IHM.Il faut alors choisir le bon type de contenant en fonction de l’organisation de l’IHM souhaitee. Par

Page 11: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 10

exemple, pour une organisation horizontale, il faut utiliser une ”HBox” en MXML (FLEX Adobe2006) ou une ”flowBox” en UsiXML (Limbourg et al. 2004). Ceci a l’inconvenient d’avoir beaucoupd’impact sur les objets utilises pour la programmation de l’IHM en cas de modification de la mise enpage (il faut changer les objets utilises). D’autre part, les contenants peuvent utiliser des strategiesde mise en page, comme les ”layouts” de java. La souplesse induite par cette notion de strategiepermet de limiter les modifications de code en cas de changement de mise en page.

– Dans chaque langage, la notion de mise en page peut etre une notion de placement prefixe. Ceplacement est parfois exprime en coordonnees ”absolues” dans un repere lie a un contenant, avecgeneralement une origine en haut aa gauche du contenant avec un axe des ordonnees inverse(oriente vers le bas). Le placement peut egalement consister aa indiquer un placement dans unezone, comme la zone ”South” du ”BorderLayout” de java (Sun 2008). Simple d’utilisation, ils ontl’inconvenient d’etre trop precis (coordonnees) ou trop contraints (la taille des elements dependalors de la mise en page et il n’est pas toujours facile d’obtenir le resultat souhaite, si ce n’est enimbriquant des contenants avec des mises en pages differentes)

– Dans chaque langage, la notion de mise en page peut etre une notion de placement relatif aad’autres composants graphiques. Le ”BoxLayout” ou le ”GridBagLayout” de java permettent deplacer des elements graphiques les uns par rapport aux autres. Bien que permettant la realisationde mise en page evoluee, leur utilisation est compliquee.

De ce tour d’horizon des differentes organisations des IHM, j’en ai conclu qu’il me fallait dissocier lanotion de ”mise en page” de la notion de ”contenant”. De plus, pour effectuer une composition plus fine,il faut dissocier les IHM en elements d’IHM et afin de garder les elements d’un bout d’IHM ensemble, lanotion de ”contenant” va alors servir de lien de proximite entre les elements concernes. Et a des fins decompatibilite et d’equivalence avec les ”layouts” existants, je propose les deux types de ”mise en page” :les placements ”prefixes” et les placements ”relatifs”.

Afin de completer cet etat de l’art, je presente dans la section suivante d’autres travaux desquels jeme suis inspire pour ma proposition en terme de modelisation et de conception d’IHM.

2.4 Complement de l’etat de l’art pour la modelisation et pour la

conception de l’IHM

2.4.1 Impact de la composition du noyau fonctionnel sur l’IHM et modelisation

Le modele ALIAS (Pinna-Dery et al. 2008) est un modele mis en place par Cedric Joffroy qui ef-fectue actuellement une these dans l’equipe Rainbow. Ce modele permet de decrire une interface defacon abstraite et d’avoir le lien entre la partie logicielle (Noyau fonctionnel) de l’application et cetteinterface. Ainsi, lorsque deux ou plusieurs parties logicielles sont composees, une composition au niveaudes interfaces abstraites associees peut etre realisee automatiquement. Ce modele se decoupe en troismodeles : ALIAS-Behavior, coeur du modele ALIAS, qui decrit les entrees, les sorties et les actions del’IHM ; ALIAS-Structure qui va permettre de detailler les elements decrit dans le modele precedent en

Page 12: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 2. Description des objectifs/des besoins et etat de l’art 11

donnant du typage aux elements par exemple ; ALIAS-Layout qui va permettre de decrire le placementdes elements dans l’IHM. Ce decoupage est interessant puisqu’il permet de separer les differentes preoc-cupations que nous avons au niveau de l’IHM et fait intervenir differents niveaux de conception d’uneIHM (Calvary et al. 2003) que j’ai detaille dans les sections precedentes.

Tobias Nestler dans Nestler (2008) qui utilise les mashups pour construire des applications orientesSOA (Service-Oriented Architecture). Il travaille avec deux vues, c’est-a-dire qu’a la vue ”mashup”, ilrajoute la vue ”processus execute” en integrant une representation BPEL par exemple. Pour rendre acces-sible le processus a l’utilisateur, il utilise une representation simplifiee du processus. Pour cela, il decrittrois pistes : la premiere consiste a utiliser une metaphore des story-boards, la seconde consiste a mettreen place un langage de regles et la derniere consiste a utiliser un langage ayant le temps comme repere(a timeline language).

2.4.2 Barrieres d’apprentissage lies a l’apprentissage d’un outil de programmation

Dans le cadre d’applications Web, du au fait que l’utilisation d’internet se democratise de plus enplus et ce depuis plusieurs annees, du au fait qu’un certain nombre d’outils de haut niveau sont fournispour la creation d’applications Web (les editeurs de sites Web par exemple ou encore certains outils citesci-dessus comme IGoogle ou Netvibes), nous sommes forces de constater que les developpeurs d’appli-cations Web ne sont pas forcement des experts informaticiens. Meme si, a priori, le sujet du stage nementionne pas les utilisateurs non informaticiens, je peux cependant proposer des solutions au problemepose en gardant a l’esprit l’idee d’une adaptation possible aux personnes non informaticiennes, la com-position d’IHM se faisant elle-meme a porter d’une autre IHM.

Dans le cadre de la proposition d’une IHM pouvant guider les utilisateurs lors de la composition, lestravaux que j’ai etudies sont ceux de Ko et al. (2004) au sujet des barrieres lies a l’apprentissage d’unoutil de programmation par des ”non informaticiens”. L’evaluation s’est effectuee avec le langage Vi-sual Basic.NET avec une liste d’objectifs plus ou moins complexes a realiser par les utilisateurs. Cetteevaluation permet de sortir six barrieres d’apprentissage qui sont les suivantes :

– La barriere ”Design” : l’utilisateur ne sait pas comment realiser l’objectif,– La barriere ”Selection” : l’utilisateur sait comment realiser l’objectif mais ne sait pas quel element

choisir,– La barriere ”Use” : l’utilisateur sait quel element prendre mais il ne sait pas comment l’utiliser,– La barriere ”Coordination” : l’utilisateur ne sait pas quel element choisir ou comment utiliser un

element dans le cas d’objectifs complexes ou l’utilisateur a besoin de combiner plusieurs elementspour remplir l’objectif,

– La barriere ”Understanding” et la barriere ”Information” : l’utilisateur a des difficultes a analyserle resultat obtenu et pourquoi cela ne correspond pas a ce que il attend.

Page 13: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3

Approche et mise en oeuvre

L’enjeu de ce stage est de proposer une extension a la notion d’IHM afin de faciliter la compositionde services dans le but de creer une nouvelle application. Je pars de l’hypothese qu’il est plus facilede composer la partie visible des services, les IHM, plutot que les services eux memes pour lesquels ledeveloppeur n’a pas toujours acces a la description complete.

Je vais tout d’abord presente dans ce chapitre le modele mis en place permettant de decrire les IHM desservices de maniere a pouvoir effectuer leur composition plus facilement. Ce modele est constitue d’unepremiere partie qui permet de decrire les taches associees a l’IHM du service et d’une seconde partiequi permet de decrire le regroupement et le positionnement des elements dans l’IHM. Enfin, je presenteaussi dans ce chapitre la preuve de concept que j’ai mise en place durant ce stage.

3.1 Approche de composition des IHM

Je propose d’utiliser de facon combinee differentes formes de composition des IHM et donc de reuti-lisation de ces dernieres. Cette combinaison des approches permet d’aller vers une composition des IHMplus coherente car recoupant differentes informations provenant de differents niveaux de conception desIHM. Cette nouvelle approche de la composition dite ”multi-niveaux” s’appuie sur une facon de decrireles IHM bien particuliere.

Le point clef de l’approche est de mettre en relation les differents niveaux d’abstraction lies a la concep-tion d’une IHM (Calvary et al. 2003). Cette approche se decline en deux points : le premier est celui dela conception de l’IHM qui est la description des taches auxquelles l’interface doit repondre ; le secondest celui de la structure de l’interface avec le regroupement et le positionnement des elements d’IHM. Leprocessus de composition mis en place peut se decrire comme suit :

– selection par l’utilisateur des differents elements d’IHM qu’il veut composer,– extraction des differents elements d’IHM afin de recuperer tous les elements necessaires au bon

fonctionnement de l’element selectionne,– insertion des differents bouts d’IHM dans l’interface composee en tenant compte de leur placement

dans leur IHM de depart.

Page 14: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 13

3.1.1 Description des taches auquel l’interface doit repondre

Comme les travaux de Lewandowski et al. (2007), je pars du principe que la conception d’une IHMpasse par l’etablissement de l’arbre de taches correspondant (idee admise par la communaute IHM).Mais encore, je suppose que les services que j’utilise ont ete concus en suivant cette approche de mode-lisation qui passe par l’etablissement des arbres de taches. Comme souligne dans le chapitre precedent,une tache peut etre un but ou une procedure, c’est-a-dire un ensemble de sous-taches liees. Pour re-presenter un arbre de taches, differents modeles de taches sont disponibles. J’ai choisi de m’inspirer deCTT Mori et al. (2002), un modele riche permettant d’exploiter les informations sur l’enchaınementdes taches et leur place au sein de l’interface. J’ai extrait un sous-ensemble de CTT des elements ne-cessaires a la description que je voulais obtenir pour l’arbre de taches decrivant l’IHM et j’ai ajoute ace sous-ensemble un lien relationnel entre l’arbre de tache et l’arbre des regroupement d’elements d’IHM.

Le modele de taches contient une tache principale. Cette tache peut contenir des sous taches ou alors etreune tache elementaire. Pour chaque tache nous pouvons lui ajouter une description, les liens de ”parentes”qu’elle a avec les autres taches (la tache mere, les taches soeurs). Une tache peut etre optionnelle. Elleappartient a une categorie c’est-a-dire qu’une tache va etre abstraite (des sous-taches permettent de ladecrire), utilisateur (elle doit etre realisee par l’utilisateur), interactive (elle necessite une interaction dela part d’un utilisateur ou d’une autre tache) ou bien applicative (elle doit etre realisee automatiquementpar l’application elle-meme sans intervention de l’utilisateur).

Les taches sont reliees entre elles par des operateurs temporels. Par exemple, nous allons avoir destaches qui doivent se realiser l’une a la suite de l’autre, ou encore de maniere parallele ou independante,ou bien encore un choix peut s’effectuer entre la realisation de la premiere ou de la deuxieme tache, etc...

Si je reprends l’interface de recherche d’une recette, je peux decrire le modele de taches associe (voirfigure 3.1) comme l’enchaınement de trois taches principales : lancer la recherche (tache 1), selectionnerla recette dans une liste de recettes (tache 2) et enfin visualiser la recette (tache 3). Hormis les liensde parentes entre la tache mere ”Recherche d’une recette” et les taches principales ou entre les tachesprincipales elles-meme, nous avons trois categories de taches qui apparaissent : la tache mere est unetache abstraite, detaillee par ses trois taches filles dont les deux premieres sont interactives et la der-niere est applicative puisque ce n’est que de l’affichage d’informations. Les relations temporelles entreles taches filles sont simples, la ”tache 1” devra s’executer avant la ”tache 2” et lui transmettra des in-formations, et nous retrouvons la meme relation temporelle entre la ”tache 2” et la ”tache 3”. Un autreexemple de relation temporelle est present dans cet arbre de tache entre la tache ”AfficherNomRecette”et la tache ”AfficherTempsPreparationEtCuisson” ou les taches doivent s’executer obligatoirement (peuimporte l’ordre d’execution entre elles).Enfin, mon approche implique de mettre en relation l’arbre de taches avec les elements d’IHM puisque lestage a comme but de faire la composition d’IHM multi-niveaux. Ainsi, j’ai une propriete sur les tachesqui permet de relier une tache a n’importe quel element d’IHM ou regroupement d’elements d’IHM.

Pour l’etude de cas, la composition des arbres de taches serait d’ajouter, a l’arbre de tache de la fi-

Page 15: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 14

TrouverRecette

ChercherUneRecette

RenseignerNomRecette LancerLaRecherche CocherRecette ValiderLaVisualisation

SélectionnerRecette VisualiserRecette

AfficherNomRecette

AfficherTempsPreparationEtCuisson

AfficherIngredientsAfficherLesEtapes

>> >>

>> >>[ ][ ]

Fig. 3.1 – Arbre de taches du service de recherche d’une recette.

gure 3.1, a la tache ”VisualiserRecette” la sous-tache ”AfficherPrixFacture” issue de l’arbre de tache duservice d’achat (comme indique sur la figure 3.2). Pour cela, il faudra tenir compte des taches a remplirpour obtenir toutes les informations necessaires a la sous-tache ajoutee, les ajouter au premier arbre detache et choisir le ou les operateurs temporels a appliquer a la sous tache afin de garantir une coherenceau niveau de l’arbre de tache issu de la composition.

TrouverRecette

ChercherUneRecette

RenseignerNomRecette LancerLaRecherche CocherRecette ValiderLaVisualisation

SélectionnerRecette VisualiserRecette

AfficherNomRecette

AfficherTempsPreparationEtCuisson

AfficherIngredientsAfficherLesEtapes

>> >>

>> >>[ ][ ]

AfficherPrixFacture

Fig. 3.2 – Arbre de taches du service de recherche d’une recette apres composition.

3.1.2 Ontologie de placement des elements dans l’IHM

Pour exprimer la mise en page, j’ai opte pour l’utilisation d’une ontologie associee a une structurede regroupement des elements constituants l’IHM. Cette notion de regroupement est importante dans lecadre de mon objectif de recomposition d’IHM. Elle peut permettre de conserver des liens de proximiteentre les notions representees. Son exploitation lorsqu’on extrait une sous partie d’une IHM est faciliteepar la puissance d’expression des requetes manipulees par les moteurs semantiques. Je presente doncdans cette section la description de la structure de l’IHM et la description de la mise en page.

La structure d’arbre permettant naturellement d’exprimer des regroupements, l’ontologie que j’ai de-finie inclue cette structure d’arbre. Elle est composee d’entites (Entity) qui sont :

– soit des ensembles (Ensemble) pouvant correspondre a n’importe quel type de contenant,– soit des elements d’IHM (UIObject) pouvant correspondre a n’importe quel type d’interacteur.Un ensemble peut contenir d’autres ensembles ou des elements d’IHM (figure 3.3). Ce modele permet

de decrire l’interface en la decoupant en blocs et par consequent le fait de grouper des elements d’IHMva pouvoir etre interprete comme la volonte de rapprocher ces elements d’IHM de maniere semantique.

Page 16: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 15

Ensemble

Ensemble

UIObjectUIObject

Ensemble

Ensemble UIObject UIObject UIObjectUIObject

Fig. 3.3 – Arbre de regroupement des elements d’IHM.

Au niveau de l’etude de cas, nous pouvons voir dans la figure 3.4 que tous les elements d’IHM sontregroupes dans un ensemble ”InformationsRecette” qui exprime le fait que ces elements vont apporterdes details en ce qui concerne la recette visualisee, puis nous avons un sous-ensemble qui est intitule”Preparation” dans lequel nous allons trouver les informations necessaires a la preparation de la recetteafin d’etre pret a suivre les etapes de la recette.

Pour completer la description de l’interface, il est necessaire d’exprimer le placement des entites (En-tity) dans l’interface. L’application des conclusions du tour d’horizon exprime dans le chapitre precedentm’a conduit a abstraire les possibilites en terme de placement de la facon suivante :

– Deux placements ”prefixes”– Placement absolu dans le parent : chaque entite possede des coordonnees (exprimees en pixel ou

en pourcentage) par rapport au coin superieur gauche (axe ”inverse” des ordonnees) du parent.– Placement relatif au parent : les parents sont decoupes en une grille a neuf positions comme decrit

dans la figure 3.5. Ce placement d’une entite dans son parent ne se limite pas a l’expression d’uneposition, mais plusieurs positions peuvent etre utilisees.

– Deux placements ”relatifs”– Placement relatif aux autres entites : les entites sont positionnees entre elles par une combinaison

Page 17: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 16

Tarte aux pommes, raisins et cannelle

Préparation : 30 minCuisson : 40 min

Ingrédients (pour 6 personnes) :--> Pâte brisée à la cannelle :- 200 g de farine- 100 g de beurre...--> Garniture :- 1 kg de pommes reinettes- 100 g de sucre...

Préparation :Mettez les raisins secs dans le rhum etlaissez macérer au moins 30 min.Préparez la pâte : tamisez la farine avec le sel et la cannelle,ajoutez le beurre en morceaux.Travaillez du bout des doigts et ajoutez l'eau enprétrissant rapidement. ...etc...

NomRecette

InformationsRecette

EtapesDeLaRecette

PréparationNomRecette

InformationsRecette

EtapesDeLaRecettePréparation

PréparationCuisson Ingrédients

Fig. 3.4 – Ensembles des elements d’IHM pour la visualisation de la recette.

de ”a gauche de”/”a droite de” et ”au dessus de”/”au dessous de” et ”au centre de”. Ce placementd’une entite par rapport a un autre ne se limite pas a l’expression d’une position, mais plusieurspositions peuvent etre utilisees.

– Placement par ancrage a une autre entite : deux coordonnees sont utilisees, la premiere pourl’entite que l’on place, la seconde pour l’entite sur laquelle on attache la premiere.

Les placements relatifs ont l’avantage de pouvoir exprimer la proximite des concepts de facon ex-ploitable par un raisonnement de recomposition d’IHM. En effet cela permet de facilement retrouverles concepts proches ”geographiquement” dans une IHM et de conserver cette coherence de proximite etd’affichage lors de leur extraction. Ces aspects sont illustres dans la section suivante par la mise en placed’une IHM permettant de construction l’interface guidee par les notions de proximite sous entendu parla mise en page des IHM reutilisees.

Parent Entité

(en haut à gauche

dans)

Entité

(en haut dans)

Entité

(en haut à droite

dans)

Entité

(à gauche dans)

Entité

(centré dans)

Entité

(à droite dans)

Entité

(en bas à gauche

dans)

Entité

(en bas dans)

Entité

(en bas à droite

dans)

Fig. 3.5 – Grille de placement relatif au parent.

Page 18: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 17

Pour le cas d’etude, en appliquant un placement sur la grille, comme nous pouvons le voir sur lafigure 3.4, nous allons avoir l’ensemble ”Preparation” qui va se positionner a gauche dans l’ensemble pere”InformationsRecette”, puis l’element ”NomRecette” qui va se positionner en haut dans l’ensemble pereet enfin, l’element ”EtapesDeLaRecette” qui va se situer au centre de ce meme ensemble pere.

3.2 Preuve de concept

La preuve de concept que j’ai mis en place durant ce stage apparaıt en realite sous la forme de 2preuves de concept. La premiere consiste a montrer l’exploitation de l’ontologie de placement pour laselection des elements d’IHM a composer et la seconde consiste a montrer l’exploitation de l’ontologiede placement et de l’ontologie de taches lors de la composition de deux services.

3.2.1 Selection des elements d’IHM a composer

Afin de faciliter la reutilisation d’IHM guidee par le layout, j’ai developpe une IHM specifique (fi-gure 3.6). Il s’agit d’une extra-IHM selon la definition 1 de Sottet (2008). Cette IHM est constituee de3 parties : la partie qui permet de naviguer dans les elements d’interfaces et ensembles pour extraireles parties d’interfaces a recomposer, la partie qui permet de positionner les elements choisis dans unegrille respectant l’ontologie de placement precedemment decrite et une partie verification de coherenceen fonction des layouts des interfaces initiales.

La partie extraction se presente sous forme d’arborescence, l’extraction d’un element entraıne lesverifications suivantes :

1. Si l’element selectionne appartient a un ensemble, l’ensemble est designe au concepteur afin qu’ilverifie si les liens de proximite sous jacents doivent etre preserves et donc l’ensemble extrait danssa globalite.

2. Si le concepteur choisit l’ensemble, le positionnement interne a l’ensemble est conserve lors duplacement de l’ensemble dans la grille de placement centrale. Le concepteur peut explicitementchanger le placement initial s’il le souhaite.

3. Si le concepteur choisit l’element seul, le placement est libre. La partie placement est construite enfonction des placements definis dans l’approche.

Les regroupements et le placement des entites sont definis avec les trois langages de web semantiqueRDFS (Resource Description Framework Schema) [W3C Working Group 2004c], RDF (Resource Des-cription Framework) [W3C Working Group 2004b] et OWL (Web Ontology Language) [W3C WorkingGroup 2004a]. Ces langages me permettent d’exprimer la transitivite, la symetrie des proprietes. Ainsi,si je definis que la propriete ”a gauche de” est symetrique de la propriete ”a droite de” alors, si uneentite e1 est place a gauche d’une entite e2, de maniere automatique, e2 sera place a droite de e1. C’estgrace a ce genre de proprietes qu’il va etre possible d’effectuer l’extraction des differents elements d’IHM.

1. ”Une extra-IHM est une interface qui represente et donne le controle sur ou par l’intermediaire d’un modele a un

systeme concret (c’est-a-dire une IHM). C’est en quelque sorte l’interface de configuration d’une IHM.”

Page 19: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 18

Fig. 3.6 – Ecran de l’extra-IHM pour le placement des entites.

L’interpretation de ces proprietes est effectuee par un moteur semantique comme le moteur CORESE(Corby et al. 2004) developpe par l’equipe Edelweiss (INRIA) que j’utilise. Grace a ce moteur, je peuxeffectuer des requetes en SPARQL 2 (SPARQL Protocol and RDF Query Language) [W3C WorkingGroup 2008] permettant par exemple d’obtenir toutes les entites presentes a droite de tel autre entiteou encore toutes les entites situees a une position precise dans leur parent. Ce sont ces requetes qui vontpermettre d’assurer le lien de proximite entre les elements d’IHM lors de l’extraction de ceux-ci.

2. Langage qui permet l’expression de requetes sur une base de donnees de type RDF

Page 20: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 19

3.2.2 Une premiere composition d’IHM avec l’approche proposee

J’ai developpe en JAVA, une premiere composition d’IHM en appliquant l’approche proposee. Commeindique dans la section precedente, j’ai utilise le moteur CORESE (Corby et al. 2004) afin de pouvoireffectuer des requetes en SPARQL (W3C Working Group 2008) me permettant de recuperer les liensentre les taches que doit remplir l’IHM du service ainsi que les liens entre les differentes entites (Ensembleou UIObject) contenues dans l’IHM.

En entree de ce moteur de composition, nous avons les differents services impliques, un service etantdefini par la description de l’arbre de tache associee a l’interface ainsi que par la description des diffe-rents regroupements et positionnements des elements d’IHM. Le deuxieme argument de ce moteur decomposition est l’ensemble des paires de morceaux d’IHM que nous voulons voir fusionner/inserer lorsde la composition (le second element de la paire etant l’element a garder, le premier etant celui a fusion-ner/inserer).

Apres avoir copie les services concernes par la composition (afin d’eviter toute alteration de ceux-cilors du processus de composition), je traite les deux briques composant les services de maniere separeet ceci pour chaque paire de morceaux d’IHM a traiter. Dans un premier temps, j’effectue donc la com-position des arbres de taches des services. Comme indique dans la figure 3.7, cette composition peut sedecouper en 8 etapes definies comme suit :

1. a partir de chaque morceau d’IHM present dans la pair, nous recuperons les taches lies,

2. nous supprimons le lien entre la tache parente de la tache 1 et la tache 1,

3. nous ajoutons un lien de parente entre la tache parente a la tache 1 et la tache 2,

4. nous supprimons le lien eventuel entre la tache precedent la tache 1 et la tache 1,

5. nous lions avec ce lien la tache precedent la tache 1 et la tache 2,

6. nous supprimons le lien eventuel entre la tache suivant la tache 1 et la tache 1,

7. nous lions avec ce lien la tache suivant la tache 1 et la tache 2,

8. nous supprimons la tache 1.

Dans un second temps, j’effectue la composition des ”mises en page” des elements des IHM desservices. Cette composition est constituee de 2 etapes comme l’indique la figure 3.8 et qui sont definiescomme suit :

1. nous supprimons le lien entre l’entite parente au morceau d’IHM 1 et le morceau d’IHM 1,

2. nous supprimons le morceau d’IHM 1.

Ces 2 etapes sont suffisantes puisque le but est de conserver le deuxieme morceau d’IHM intact et desupprimer l’utilisation du premier morceau d’IHM de la pair.

Ce premier moteur ”naıf” permet de valider l’utilisation des langages presents dans le monde du websemantique malgre son manque de finesse en ce qui concerne la composition a proprement parler.

Page 21: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 3. Approche et mise en oeuvre 20

X

IhmPiece 1

Task 1

Task 1

parent

Task 1

Previous

Task 1

After

IhmPiece 2

Task 2

Task 2

parent

Task 2

Previous

Task 2

After

linkedTo linkedTo

8X4

X2

51

6

7

3

1

X

Fig. 3.7 – Les 8 etapes de la composition des arbres de taches des IHM lors du traitement d’une pair de morceaud’IHM.

IhmPiece 1

IhmPiece 1

parent

X2

X1

Fig. 3.8 – Les 2 etapes de la composition des regroupements d’elements d’IHM lors du traitement d’une pairede morceau d’IHM.

Page 22: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 4

Conclusion

Mes contributions au dmaine de la composition d’IHM durant ce stage sont l’approche multi-niveauxproposee mais aussi la definition d’une ontologie de placement des elements dans l’IHM.

4.1 Une approche multi-niveaux

Cette approche met en place l’utilisation d’arbre de taches permettant de decrire les buts dont l’IHMdoit tenir compte, buts lies a la description des elements d’IHM qui se fait au moyen d’une politiquede regroupements melant aussi l’utilisation d’un placement afin de decrire la position des elementsdans l’interface. En utilisant cette approche de description des IHM, ce stage a pour but de faciliterla composition des IHM. Pour cela, je me rapproche du monde des ontologies, afin de decrire les troispoints clefs de notre approche dans un langage qui va me permettre grace a un moteur semantique, depouvoir faire des manipulations des deux arbres (arbre de taches et arbre de regroupements decore parles proprietes de placement) plus fines qu’une manipulation des fichiers XML traditionnellement utilisespar les travaux de description d’IHM bases sur les langages a balises.

4.2 Expression de la proximite et du regroupement des elements a

travers une ontologie de placement

Notre abstraction de la mise en page verifie les proprietes identifiees par notre tour d’horizon del’expression traditionnelle des mises en page. Sauf exceptions que je n’ai pas encore identifiees, toutemise en page usuelle peut etre exprimee dans l’ontologie de placement. En cas d’imprecisions, il esttoujours possible d’exprimer tout ”layout” par des traductions en placements ”prefixes”. Cependant, lerecours a de tels placements est a eviter puisqu’ils inhibent l’interet de la demarche. En effet, les requetes(et donc les manipulations en vue de la recomposition) seraient alors inexploitables car sans liaison entreles elements graphiques. Par exemple pour une mise en page en ligne horizontale de 3 elements graphiquese1, e2 et e3 dans un contenant c1, il est possible de l’exprimer de differentes manieres :

– par des proprietes ”a gauche” : e1 est a gauche de e2, e2 est a gauche de e3 et e1 est en haut agauche de c1,

– par des placements ”absolus” : e1 est en (0,0) de c1 e2 est en (100 pixels, 0) de c1 et e3 est en (200pixels, 0) de c1,

Page 23: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre 4. Conclusion 22

– etc.Dans le premier cas, comme les elements e1, e2 et e3 sont relies, il est possible de les selectionner tousensemble. Dans le second cas, il n’est pas possible de faire de liaison entre e1, e2 et e3. Ainsi, selonl’objectif souhaite, la mise en page pourra s’exprimer differemment.

Mon approche laisse des imprecisions. J’ai fait ce choix afin de simplifier l’expression et l’utilisationde la mise en page. Ainsi, des notions comme le remplissage des espaces vides sont des elements ”am-bigus”. Par exemple, lorsqu’un element graphique e1 est a gauche d’un element graphique e2, commentdoit etre positionne e1 s’il est plus petit que e2 ? Doit-on aligner le haut de e1 avec celui de e2, leurscentres ? leurs bas ? etc. Cette decision, ainsi que la detection des incoherences dans l’expression de lamise en page, sont delegues au moteur de rendu. Notons toutefois que l’utilisation de l’extra-IHM levein fine les imprecisions grace a l’intervention de l’utilisateur face aux verifications effectuees.

4.3 Perspectives

Ce stage etant l’amorce a une these financee par une allocation MESR obtenue sur le concours deJuin 2009, les perspectives sont multiples.

L’approche presentee permet d’exprimer les liens de proximite et de regroupement des elements d’IHM.La solution proposee exploite les proprietes des ontologies pour permettre de raisonner par requetes ades fins d’extraction et de manipulation de parties d’IHM.

Les possibilites qui s’offrent sont prometteuses. En particulier, l’etape suivante est l’enrichissement del’association semantique ”Entity” - ”Placement” par l’ajout d’informations liees aux concepts du domainemanipules par l’utilisateur via les elements graphiques. Ainsi, je pourrai recomposer les IHM a partird’elements graphiques choisis par utilisateur, identifier les elements graphiques connexes (et le degrede liaison), conserver leur placements et probablement l’ergonomie initiale. Une etude doit aussi etreeffectuee sur les expressions de placements ”relatifs” et sur la traduction des layouts (codes en java ouMXML par exemple) avec de tels placements.

Dans un cadre plus general, des precisions devront etre apportees sur les differentes formes de com-positions possibles (fusion, flow, etc...) en ce qui concerne les arbres de taches associes a chaque IHMainsi que sur les differentes possibilites ou conflits lors de la composition des mises en page associees achaque IHM. Ces precisions concerneront les 3 points principaux que je peux faire ressortir du sujet plusglobal de la these qui sont :

– la definition d’un formalisme pour la selection des elements d’IHM a fusionner,– la definition des regles et des operateurs de composition,– l’identification des cas eventuels de conflit et les solutions eventuelles pour y remedier.

Pour terminer ce tour d’horizon des differentes perspectives, je peux signaler une extension possible aces travaux qui serait de travailler avec des ensembles de services non stables et toute la problematiquede la decouverte dynamique de services.

Page 24: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Bibliographie

1 2008 Popfly (Microsoft). http://www.popfly.com.

2 2008 Yahoo Pipes (Yahoo). http://pipes.yahoo.com/pipes.

3 2007 IGoogle. http://www.google.com/ig.

4 2007 Netvibes. http://www.netvibes.com.

Adobe 2006 Adobe Systems Inc. http://www.adobe.com/products/flex/.

Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouillon, L. & Vanderdonckt, J.

2003 A Unifying Reference Framework for Multi-Target User Interfaces. Interacting with Computers15 (3), 289–308.

Corby, O., Dieng-Kuntz, R. & Faron-Zucker, C. 2004 Querying the semantic web with theCORESE search engine. 16th European Conference on Artificial Intelligence (ECAIaAZ2004), IOSPress, Valencia, Spain.

Ko, A. J., Myers, B. A. & Aung, H. H. 2004 Six Learning Barriers in End-User ProgrammingSystems. Visual Languages and Human Centric Computing, 2004 IEEE Symposium on, pp. 199–206.

Lepreux, S., Hariri, A., Rouillard, J., Tabary, D., Tarby, J.-C. & Kolski, C. 2007 TowardsMultimodal User Interfaces Composition based on UsiXML and MBD principles. Lecture Notes inComputer Science 4552 (134), 134–143.

Lewandowski, A., Lepreux, S. & Bourguin, G. 2007 Tasks Models Merging for High-Level Com-ponent Composition. Human-Computer Interaction, Part I, HCII 2007, Lecture Notes in ComputerScience (LNCS) 4550, 1129–1138.

Limbourg, Q., Vanderdonckt, J., Michotte, B., Bouillon, L., Florins, M. & Trevisan, D.

2004 UsiXML : A User Interface Description Language for Context-Sensitive User Interfaces. AVI’2004Workshop ”Developing User Interfaces with XML : Advances on User Interface Description Languages”UIXML’04 pp. 55–62.

Mori, G., Paterno, F. & Santoro, C. 2002 CTTE : Support for Developing and Analyzing TaskModels for Interactive System Design. IEEE Transactions on Software Engineering pp. 797–813.

Page 25: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

BIBLIOGRAPHIE 24

Nestler, T. 2008 Towards a mashup-driven end-user programming of SOA-based applications. iiWAS’08 : Proceedings of the 10th International Conference on Information Integration and Web-basedApplications & Services, pp. 551–554. New York, NY, USA : ACM.

Newcomer, E. 2002 Understanding Web Services : XML, WSDL, SOAP, and UDDI. Addison-WesleyProfessional .

Peltz, C. 2003 Web services orchestration and choregraphy. Computer 36 (10), 46 – 52.

Pinna-Dery, A.-M., Joffroy, C., Renevier, P., Riveill, M. & Vergoni, C. 2008 ALIAS : A Setof Abstract Languages for User Interface Assembly. 9th IASTED International Conference SoftwareEngineering and Applications (SEA’08), pp. 77–82. IASTED, Orlando, Florida, USA : ACTA Press.

Sottet, J.-S. 2008 Mega-IHM : malleabilite des Interfaces Homme-Machine dirigees par les modeles.PhD thesis, Universite Joseph Fourier, these de doctorat Informatique preparee au Laboratoire d’In-formatique de Grenoble (LIG).

Sun 2008 Laying Out Components Within a Container. http://java.sun.com/docs/books/tutorial/uiswing/lay\discretionary-out/index.html.

W3C Working Group 2004a OWL Web Ontology Language Reference. http://www.w3.org/TR/

owl-ref/.

W3C Working Group 2004b Resource Description Framework (RDF). http://www.w3.org/RDF/.

W3C Working Group 2004c Resource Description Framework SCHEMA (RDFS). http://www.w3.org/TR/rdf-schema/.

W3C Working Group 2008 SPARQL Query Language for RDF. http://www.w3.org/TR/

rdf-sparql-query/.

Page 26: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Annexe A

Sujet de stage en images

A.1 Large diffusion d’applications web

Fig. A.1 – Large diffusion d’applications web.

Page 27: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre A. Sujet de stage en images 26

A.2 Construire une nouvelle application

Fig. A.2 – Construire une nouvelle application.

A.3 Association de 2 services

Fig. A.3 – Association de 2 services.

Page 28: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre A. Sujet de stage en images 27

A.4 Composition d’actions

Fig. A.4 – Composition d’actions.

A.5 Comment ?

Fig. A.5 – Comment ?

Page 29: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Annexe B

DTD (Document Type Definition)

decrivant la mise en page des elements

d’IHM

<!-- version monocible (une seul ecran) -->

<!DOCTYPE ALIAS-LAYOUT [

<!ELEMENT ALIAS-LAYOUT (TOP_CONTAINER,COMPONENT_PLACEMENT*,CONTAINER_GROUPEMENT*)>

<!ELEMENT COMPONENT_PLACEMENT (COMPONENT_ID, (PLACE_IN_CONTAINER | COORD_IN_CONTAINER | RELATIVE_TO_COMPONENT | ATTACH_TO_COMPONENT ))>

<!-- l’id d’un component que l’on veut positionner -->

<!ELEMENT COMPONENT_ID (#PCDATA)>

<!-- l’id du container dans lequel on veut positionner le component -->

<!ELEMENT CONTAINER_ID (#PCDATA)>

<!-- une entite pour un positionnement par localisation dans ou par rapport a -->

<!ENTITY % loc "(top|right|bottom|left|center|top-left|top-right|bottom-right|bottom-left)">

<!-- une entite pour dire quoi chevauche quoi -->

<!ENTITY % deep "(above|under)">

<!-- une entite pour definir les degrees de liberte, rotation et/ou translation -->

<!ENTITY % lib "(rotx|roty|rotz|transx|transy|transz)">

<!-- PLACE_IN_CONTAINER -->

<!-- definition des 9 positions dans la container parent-->

<!-- possibilite de multiplier par 3 avec audessus, endessous -->

<!ELEMENT PLACE_IN_CONTAINER (CONTAINER_ID, LOCALISATION*) >

<!ELEMENT LOCALISATION %loc;>

Page 30: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Chapitre B. DTD (Document Type Definition) decrivant la mise en page des elementsd’IHM 29

<!-- COORD_IN_CONTAINER -->

<!-- position absolue dans un container par rapport au coin superieur gauche, repere "inverse" -->

<!ELEMENT COORD_IN_CONTAINER (CONTAINER_ID, COORD, DIMENSION?) >

<!ELEMENT COORD (x, y, z) >

<!ELEMENT x (#PCDATA)> <!-- un nombre (pixel ? reel ? cm ? % ? etc.) -->

<!ELEMENT y (#PCDATA)> <!-- un nombre -->

<!ELEMENT z (#PCDATA)> <!-- un nombre -->

<!-- z = 0 : background , sinon z = 1 pour tout le monde -->

<!ELEMENT DIMENSION (width, height, depth?) >

<!ELEMENT width (#PCDATA)> <!-- un nombre -->

<!ELEMENT height (#PCDATA)> <!-- un nombre -->

<!ELEMENT depth (#PCDATA)> <!-- un nombre -->

<!-- RELATIVE_TO_COMPONENT -->

<!-- pour se positionner par rapport a un autre -->

<!ELEMENT RELATIVE_TO_COMPONENT (COMPONENT_ID, LOCALISATION*) >

<!-- ATTACH_TO_COMPONENT -->

<!ELEMENT ATTACH_TO_COMPONENT (COMPONENT_ID, POINTS, DEGREE*, DEPTH) >

<!ELEMENT POINTS (COORD, COORD)>

<!-- deux coordonnees, la premiere pour (et dans) le component qu’on place, la seconde pour (et dans) le component sur le quel on attache le premier -->

<!ELEMENT DEGREE %lib;>

<!ELEMENT DEPTH %deep;>

]>

Page 31: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Table des matieres

1 Introduction 3

2 Description des objectifs/des besoins et etat de l’art 42.1 Etude de cas : recherche de recettes de cuisine et calcul du prix de revient . . . . . . . . . 52.2 Travaux existants lies a la composition d’IHM . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.2.1 Composition de mashups au niveau de l’interface finale . . . . . . . . . . . . . . . 72.2.2 Composition en amont de l’interface finale . . . . . . . . . . . . . . . . . . . . . . . 82.2.3 Composition au niveau des arbres de taches et des concepts . . . . . . . . . . . . . 82.2.4 Synthese . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.3 Travaux existants relatifs aux placements des elements dans l’IHM . . . . . . . . . . . . . 92.4 Complement de l’etat de l’art pour la modelisation et pour la conception de l’IHM . . . . 10

2.4.1 Impact de la composition du noyau fonctionnel sur l’IHM et modelisation . . . . . 102.4.2 Barrieres d’apprentissage lies a l’apprentissage d’un outil de programmation . . . . 11

3 Approche et mise en oeuvre 123.1 Approche de composition des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.1.1 Description des taches auquel l’interface doit repondre . . . . . . . . . . . . . . . . 133.1.2 Ontologie de placement des elements dans l’IHM . . . . . . . . . . . . . . . . . . . 14

3.2 Preuve de concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.2.1 Selection des elements d’IHM a composer . . . . . . . . . . . . . . . . . . . . . . . 173.2.2 Une premiere composition d’IHM avec l’approche proposee . . . . . . . . . . . . . 19

4 Conclusion 214.1 Une approche multi-niveaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.2 Expression de la proximite et du regroupement des elements a travers une ontologie de

placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.3 Perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Bibliographie 23

A Sujet de stage en images 25A.1 Large diffusion d’applications web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25A.2 Construire une nouvelle application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Page 32: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

TABLE DES MATIERES 31

A.3 Association de 2 services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26A.4 Composition d’actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27A.5 Comment ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

B DTD (Document Type Definition) decrivant la mise en page des elements d’IHM 28

Page 33: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Table des figures

2.1 IHM du service de recherche d’une recette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 IHM du service d’achat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3 Resume de l’etude des travaux lies a composition d’IHM. . . . . . . . . . . . . . . . . . . . . . 9

3.1 Arbre de taches du service de recherche d’une recette. . . . . . . . . . . . . . . . . . . . . . . . 143.2 Arbre de taches du service de recherche d’une recette apres composition. . . . . . . . . . . . . . 143.3 Arbre de regroupement des elements d’IHM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.4 Ensembles des elements d’IHM pour la visualisation de la recette. . . . . . . . . . . . . . . . . . 163.5 Grille de placement relatif au parent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.6 Ecran de l’extra-IHM pour le placement des entites. . . . . . . . . . . . . . . . . . . . . . . . . 183.7 Les 8 etapes de la composition des arbres de taches des IHM lors du traitement d’une pair de

morceau d’IHM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.8 Les 2 etapes de la composition des regroupements d’elements d’IHM lors du traitement d’une paire

de morceau d’IHM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

A.1 Large diffusion d’applications web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25A.2 Construire une nouvelle application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26A.3 Association de 2 services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26A.4 Composition d’actions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27A.5 Comment ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Page 34: Ingénieur En Sciences Informatiques Rapport de Stage de Fin d

Abstract

Software Engineering composition principles allow for the construction of new applicationsby reusing other application building blocks. Following such principles, webmasters aggregateservices to create a website quickly. Composing services implies creating a new User Inter-face (UI) - in our case a new web page - to use them. Webmasters cannot access services’description directly but they can leverage information about services’ UI easily. Thus, it ismore interesting to reuse and compose UIs than the services themselves. This is basis of aphD Thesis whose subject is started by this internship.