Introduction : plasticité des IHMs – Page 1 Bref historique concernant les acteurs.
-
Upload
garland-denis -
Category
Documents
-
view
110 -
download
2
Transcript of Introduction : plasticité des IHMs – Page 1 Bref historique concernant les acteurs.
Introduction : plasticité des IHMs – Page 1
Bref historiqueconcernant les acteurs
Introduction : plasticité des IHMs – Page 2
Quand les organismes de normalisations’y mettent …
OASIS et W3C
Introduction : plasticité des IHMs – Page 3
UIMLhttp://www.uiml.org/
dérivé d'XML permettant de décrire des interfaces graphiques. Il y a des outils (renderers) qui convertissent une représentation d'UIML en représentation pour divers GUI (par exemple Java awt).un langage commun de description d'interface utilisateur, ouvert et libre d'utilisation qui soit indépendants des plateformes, qu'il s'agisse des plateformes actuelles ou futures.définir un métalangage canonique qui peut décrire n'importe quelle interface utilisateur, sans être tributaire du type d'unité ou d'interface graphique utilisée. UIML peut décrire les interfaces utilisateur - interface de bureau, interface web, interface mobile, système embarqué, ou encore applications « voix ».
UIML 1.0: Décembre 1997
UIML 3.1: Mars 2004
http://www.oasis-open.org UIML 4
Introduction : plasticité des IHMs – Page 4
UIML
–« User Interface Markup Language »
–Langage multi-interface (graphique, voix, ...)
–Une norme : UIML (uiml.org)–Des implémentations ou «
renderers »• Harmonia : Awt/Swing,
HTML, WML, VXML, ...• Rubico : Visual Basic, GUI
builder• TV Server, AG : C++ for
embedded systems
Les 4 parties d'un document UIML:<Head> : metadata (author, date, version, ...)<Template> : réutilisation de fragments<Interface> : interface proprement dite
<Structure> : arbre des « widgets »<Style> : styles (propriétés) des widgets<Content> : contenu (texte, image, son)<Behavior> : objet / événement / action
<Peers> : mappings et liens vers l'extérieur
Introduction : plasticité des IHMs – Page 5
Traducteurs
XML
XSLHTML
VoiceML
WML
XML et XSL pour la présentation, UIML, SUNML, Xforms ….
Introduction : plasticité des IHMs – Page 6
User Interfaces langagesXML dans tout ses états
Introduction : plasticité des IHMs – Page 7
Recommandations W3C (World Wide Web Consortium)
http://www.w3.org/2001/di/Activity
CONSTAT : multiplication des terminaux, la distribution des contenus devient plus que jamais problématique. les données doivent être filtrées et leur format modifié.
Transformation ?la reconnaissance des caractéristiques de l'équipement client par le
serveur. Une solution :Le projet CC/PP (pour Composite Capability/Preference Profiles) 1999. Basé sur le format de meta-données RDF (Resource Description Framework), Application de XML pour décrire : les caractéristisques logicielles et matérielles d'un terminal (Web ou WAP, capacité machine, etc.) + les informations relatives au profil de son utilisateur.
Introduction : plasticité des IHMs – Page 8
CC/PP (dont font parti Ericsson, IBM, Nokia, SAP et Sun),
Un panel d'appareils assez large (téléphone portable, PC, assistant personnel,...), Avantage de CC/PP : proposer une méthode de description des configurations- réduire la quantité d'informations échangées entre client et serveur(protocoles de transmission sans fil restent limités en bande passante).- les variables d'un profil CC/PP (capacités du terminal, préférences utilisateur, etc.) peuvent être appliquées au sein d'une feuille de style XSLT afin de créerou d'adapter un document.
Recommandations W3C
Introduction : plasticité des IHMs – Page 9
XFormshttp://www.w3.org/2002/Forms/Activity.html
XForms un langage à balises pour les formulaires électroniques « modernes »
Basés sur XML et renvoie les valeurs saisies dans le formulaire sous forme de document XML
Il prend en compte l’authentification, l’utilisabilité et l’accessibilité, le device independence, l’internationalisation, et l’intégration pour plusieurs langages cibles tout en réduisant la mise en œuvre de traducteurs.
Introduction : plasticité des IHMs – Page 10
Mobile Web Initiativehttp://www.w3.org/2005/MWI/Activity.html
W3C MWI travaille actuellement à la mise en place des meilleures pratiques pour les sites web et les applications sur mobile
Il propose également des tests sur l’interoperabilité entre logiciels webs et l’usage du mobile au niveau social.
Ils accueillent des groupes de travail sur la thématique générale de l’utilisation des mobiles
1ere consigne : Design for one web (cf http://www.w3.org/Mobile)
Introduction : plasticité des IHMs – Page 11
WAIhttp://www.w3.org/WAI/
Le Web est partout : les services publics sont en ligne (impots, sncf, enseignement, etc…)
Il doit donc être accessible à TOUS Comment traiter le handicap : visuel, auditif, physique,
cognitif, neurologique, etc. De plus les solutions ne doivent pas handicapées les
personnes non handicapées Web Content Accessibility Initiative (WAI) représente
des industriels, des chercheurs et des personnes connaissant bien les handicap
Donner des consignes et développer des solutions
Introduction : plasticité des IHMs – Page 12
WAIhttp://www.w3.org/WAI/
Principaux résultats
–Outils automatiques de validation de pages webs(les sites publics ont longtemps été non conformes aux tests)
–Consignes pour évaluer si une page est accessible(exemple la faire lire par une synthèse vocale)
–Consignes pour concevoir des pages accessibles (exemple classique du tag image à renseigner correctement)
Introduction : plasticité des IHMs – Page 13
http://www.w3.org/2005/Incubator/model-based-ui/charter/
Model-based User Interfaces Incubator Group Charter
Model-based User Interfaces Incubator Group, a pour mission d’évaluer les travaux en recherche
autour des modèles pour la conception des IHMs pour essayer de sortir des standard
Par exemple : les concepteurs d’UsiXML font partie de ce groupe de réflexion
Introduction : plasticité des IHMs – Page 14
Quand les RIA sont inspirés
Introduction : plasticité des IHMs – Page 15
Passage d’une page Web à une IHM ...
Introduction : plasticité des IHMs – Page 16
RIA = le meilleur du web et du "desktop"
RIA & conception des interfaces Séparer présentation - logique – données Briques d'IHM réutilisables
Nécessité d'installer un plugin dans le navigateur et forte concurrence sur les technologies Multiplication des technologies sur le poste de travail !
...
RIAs
Introduction : plasticité des IHMs – Page 17
AJAX : un ensemble de techno open source éprouvées Asynchronous Javascript And XML
Utilisation combinée nouvelle
Autres offres Adobe Flex (2004) :
http://www.adobe.com/support/documentation/en/flex/
Microsoft Silverlight (2006) : http://www.silverlight.net
Sun JavaFX (2008) :
http://www.javafx.com/
Mozilla XUL (XML User Interface Language)
http://www.mozilla.org/projects/xul/
...
Solutions RIAs disponibles
Source : Google Insights
Introduction : plasticité des IHMs – Page 18
Exigence des supports mobiles
Illustration des besoins en entreprise–Pour la téléphonie
Exemple d’Open Plug
Introduction : plasticité des IHMs – Page 19
Elips
Open-Plug – Créateur d’ELIPS – Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est
membre de la Fondation LiMo (Linux Mobile Foundation). – Fruit de 5 ans de R&D et a fait l’objet de dépôts de brevets.
ELIPS– environnement ouvert de développement (Framework) de téléphones portables
grand public. CELIPS permet aux éditeurs de logiciels, aux fabricants de téléphones et aux opérateurs de téléphonie mobile de créer et de déployer des applications mobiles, des interfaces utilisateurs riches et des solutions logicielles.
Pourquoi ?– Pour le développement rapide des nouveaux modèles de téléphones
portables et facilite l’implémentation de nouvelles solutions logicielles et la création d’interfaces utilisateurs.
– Pour réutiliser leurs développements d’une plateforme de téléphone à l’autre et développer des variantes de leurs produits plus rapidement.
Introduction : plasticité des IHMs – Page 20
Quand les chercheurs s’en mêlent…
Introduction : plasticité des IHMs – Page 21
Equipes et travaux en présence
Equipe IIHM Laboratoire IMAG à Grenoble–Gaelle Calvary & Joelle Coutaz
Equipe RAINBOW Laboratoire I3S à Sophia Antipolis– Michel Riveill & Philippe Renevier & Audrey Occello &
Anne Marie Dery Laboratoire HIIS à l’université de Pise
– Fabio Paterno Equipe IHM au Université de Valencienne
–Anas Hariri & Sophie Lepreux & Christophe Kolski Laboratoire CHI Université catholique de
Louvain–Jean Vanderdonckt
Introduction : plasticité des IHMs – Page 22
Exemples d’articles
EMMA pour la Plasticité en MobilitéIn Actes de la 20ème Conférence francophone sur l’Interaction Homme-Machine (IHM’2008,
Metz, France, Septembre 2008). 2008. Vincent Ganneau, Rachel Demumieux, Gaëlle Calvary http://iihm.imag.fr/publication/GDC08a/ Model-Driven Engineering of Multi-Target Plastic User InterfacesIn Proc. of 4th International Conference on Autonomic and Autonomous Systems ICAS 2008.
pages 7-14. 2008. Benoit Collignon, Jean Vanderdonckt, Gaëlle Calvary D. Greenwood, M. Grottke, H. Lutfiyya, M. Popescu (eds.), IEEE Computer Society Press, Los
Alamitos, Gosier, 16-21 March 2008http://iihm.imag.fr/publication/CVC08a/Anne-Marie Pinna-Déry, Cédric Joffroy, Philippe Renevier, Michel Riveill, Christophe Vergoni.
"ALIAS: A Set of Abstract Languages for User Interface Assembly" in Proceedings of the 9th IASTED International Conference Software Engineering and Applications (SEA'08), IASTED, pages 77--82, ACTA Press, Orlando, Florida, USA, 16-17 nov 2008http://rainbow.polytech.unice.fr/publis/pinna-dery-joffroy-etal:2008.pdf
Anne-Marie Pinna-Déry, Jérémy Fierstone. "Construction d'Interfaces Utilisateurs Par Fusion de Composants d'IHM : un Atout Pour la Mobilité" in Proceedings of the Premières Journées
Francophones: Mobilité et Ubiquité, 2004
Introduction : plasticité des IHMs – Page 23
Un cadre de référence : Cameleon
Projet multi partenaires
Introduction : plasticité des IHMs – Page 24
Cadre de référence : phase “conception”
Config 1 ModèleTâches etConcepts
IHM concrète
IHM finale
IHM abstraite
ModèleTâches etConcepts
Modèles archétypes
Config 2Concepts
Tâches
User
Plate-forme
Environment
Evolution
Transition
IHM concrète
IHM finale
IHM abstraite
Concepts
Tâches
User
Plate-forme
Environment
Evolution
Transition
Domaine
Concepts
Tâches
Contexte
User
Plate-forme
Environment
Adaptation
Evolution
Transition
Modèles ontologiques
ARTStudio
D. Thevenin
Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine
“Spécifier 1 fois -> N Interfaces” approche par modèles
Introduction : plasticité des IHMs – Page 25
Tâches &Concepts
IHM abstraite
IHM concrète
IHM finale
Config 1
Cadre de référence : phase “conception”
Introduction : plasticité des IHMs – Page 26
Equipe IIHM : "Plasticité des IHM"
Approches explorées :1) Composition d'IHM2) Transformation de modèles (IDM). - métamodèles pour l'IHM
- taxonomie d'IHM (extra-IHM, trans-IHM, meta-IHM, mega-IHM). 3) Modèle d'évolution.
- modèle utilisateur par réseau bayésien sur mobile- métamodèle d'évolution- premiers patrons d'adaptation.
Introduction : plasticité des IHMs – Page 27
Projet RAINBOW : Plasticité
Applications évolutives et adaptables – accessibles via un PDA, un portable ou une station– variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…)
Applications construites à base de composants (composants métiers, composants d’IHM, composants services…)
S’appuyer sur les infrastructures systèmes (RMI, EJB, …) et sur une plate-forme à composants
Exemples :– Agenda collaboratif
– Gestion commerciale (facturations, commandes, client, fournisseur)
Introduction : plasticité des IHMs – Page 28
Contenu du module
Semaine 1 1H30: Introduction aux RIA (Audrey Occello) 2H00 : Introduction au module
Semaine 2 4H Cours Flex en entreprise Semaine 3 2H + 2H : Présentation Open Plug Flex pour MobileSemaine 4 Semaine libérée Semaine 5 3H : Cours XUL (Paul Franchi)
Semaine 6 Des solutions recherche : UsiXML + ALIAS Semaine 7 4H : TP XUL (Paul Franchi) Semaine 8 D’autres solutions en recherche - Approche IIHM (Gaelle Calvary) Semaine 9 ENTRETIENS
Introduction : plasticité des IHMs – Page 29
Evaluation
Pour chaque thème abordé en coursdéfinir le domaine de plasticité
plateforme / environnement / utilisateurconception / exécutionmodèle sous jacentillustration du besoin sur un exempleavantages et inconvénients
Conclusion : votre synthèseBibliographie
Travail individuelRendu : apport PDF + entretiensLe rapport doit être rendu 2 jours avant l’entretien