La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM contrat Creative Commons Paternité-Pas d'Utilisation.

Présentations similaires


Présentation au sujet: "Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM contrat Creative Commons Paternité-Pas d'Utilisation."— Transcription de la présentation:

1 Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique 2.0 France License

2 2 Réalisation - dld n Styles dinteractions n Dispositifs dEntrée/Sortie u Périphériques de Sortie : F écrans u Périphériques dEntrée F périphériques de localisation F Interaction multimodale n Gestion : F des Entrées F des Fenêtres

3 3 Écrans n Type : u cathodique u LCD n Écrans bitmap : u résolution : pixels per inch (ppi) u profondeur : bits par pixel u rafraîchissement : images par seconde u taille mémoire

4 4 Écrans n Couleurs directes n Tables de couleurs n et les autres Buffers !

5 5 Périphériques physiques n Retour de toucher u capteur piézzo u dispositif mécanique n Retour deffort u joystick u souris u brasetc...

6 6 Périphériques dentrée n Périphériques physiques F claviers, boîtes à boutons F potentiomètres (rotatifs, linéaires) F souris, tablettes, manche à balai, boules F écrans tactiles, crayons optiques F capteurs de position, dorientation n Périphériques simulés n Périphériques logiques n Périphériques virtuels

7 7 Périphériques de localisation n Absolu / Relatif u tablette, écran tactile, crayon otique u souris, joystick, trackball n Direct / Indirecte u écran tactile, stylo optique u tablette, souris, joystick, trackball n Discret / Continu n Position / Taux de contrôle n Position / Force (physiquement)

8 8 Périphériques de localisation n Control-to-Display Ratio n Loi de Fittst = 0.1 log (2D / L) L D

9 9 Périphériques de localisation n Multimodalité n Bi-latéralisation u main dominante : situe le contexte u main non-dominante : agit dans le contexte Gestion des entrées !

10 10 Type dentrée Requête Echantillonnage Événement attente bloquante réponse immédiate file d attente

11 11 Interaction directe : Modèle à base d'événements n Création, propagation, réception, traitement n Boucle dévénements u Détection u Détermination de la cible / liste des objets n Synthèse des événements u Ex : Drag = Click + Move n Machine à état : Down Move Move Move Move Up

12 12 Modèle à base d'événements gestion n Bouche de scrutation n Gestion de la file dattente des événements système n Construire le dialogue à partir de ces événements n Comportement lié aux objets graphiques

13 13 Gestion dévènements n Terminaux virtuels u une fenêtre appartient à une application u une application dessine dans ses fenêtres u une application reçoit les évènements qui se produisent dans ses fenêtres n Notion de focus u la fenêtre qui reçoit les évènements dun périphérique à linstant t

14 14 Types dévènements n Liés aux périphériques u changement de focus u entrée/sortie du curseur dans une fenêtre n Liés aux fenêtres u demande de ré-affichage u création, destruction, … u etc...

15 15 Bilan Interaction directe n Objets liés à la manipulation directe : 10 % ? n Différencié linteraction directe sur les objets dintérêts, les documents de linteraction dans les menus, etc. n Évolution de Manipulation Directe vers Interaction Instrumentale Un utilisateur pilote un instrument physique pour manipuler un instrument logique

16 Fenêtrage Modèles graphiques Architecture Logicielle

17 17 Systèmes de fenêtrage n Structurer lespace daffichage n Partager la ressource écran n Gestionnaire de fenêtres u interface utilisateur u système de fenêtrage n Fenêtre = zone autonome u pour laffichage u pour les entrées

18 18 Modèles de fenêtrage n Sans superposition n Avec superposition n Hiérarchique

19 19 Systèmes de fenêtrage n X-windows et ses window managers F Motif/Motif CDE/Motif OLWM/Openwin F AfterStep Fvwm F Enlightenment F GNOME (Sawfish), KDE (Kwm), Qt n Explorer de Windows (MFC) n Finder de MacOS (QuartzExtreme) window manager desktop environments working environments

20 20 Librairies graphiques n Modèles de dessin : u dessin direct : peinture de formes u dessin structuré : arbre dobjets n Définitions des objets graphiques u attributs géométriques u attributs graphiques n Librairies graphiques u Xlib, OpenGL, Direct Draw, etc...

21 21 Modèle de dessins n Dessin direct u Problème : ré-affichage des parties cachées F par le système de fenêtrage (nécessite de mémoriser le contenu des fenêtres) F par les applications (nécessite de communiquer des demandes de réaffichage aux applications) n Dessin structuré

22 22 X n Portable n Transparent vis à vis des réseaux n Architecture client/serveur n Solaris, Irix, Linux (XFree86) n tous les OS n séparation des composants window manager

23 23 Boîtes à Outils n X11/Motif n X11/GTK n Tcl/Tk n MFC n Swing

24 24 Architecture logicielle u systèmes de fenêtrage u boîtes à outils u librairies graphiques n Décomposition modulaire

25 25 Pourquoi une architecture spécifique? n Interfaces graphiques n WIMP n Standardisation de l aspect (look) et du comportement (feel) n Nouvelle philosophie de programmation u Contrôle utilisateur u Séparation Interface et Noyau fonctionnel u Architectures de type Arch

26 26 Architecture conceptuelle n Développement dapplications interactives n Spécifications liées au Modèle Arch Domaine Adaptateur Contrôle de Dialogue Présentation Interaction

27 27 Outils de construction dinterfaces Catégories dOutils n Outils correspondants à différents niveaux de codage : u Composant de base u Boîte à outils u Générateur de présentation u Squelette d applications Saut Application (Squelette dapplication) Boîte à outils Composant de base (Générateur de présentation)

28 28 Catégories doutils de construction dinterfaces Composants de base n Accès au système de fenêtrage (dit graphique) u X, MacOS, Windows u Sémantique graphique n Fonctions graphiques u Évolution par enrichissement ou par extension u Compatibilité ascendante u Ex de système graphique : OpenGL n État des périphériques d entrée u Boucle de gestion des messages et des évènements ++ Gestion du copier-coller

29 29 Composants de base Système de fenêtrage n Niveau primitif des applications graphiques interactives n Différentes catégories de fonctions offertes : gestion de session (ouverture, fermeture, gestion du temps) gestion des évènements gestion du graphique écran communication avec le gestionnaire de fenêtres communication entre les applications utilitaires (gestion de ressources, formats de fichier)

30 30 Catégories d outils de construction dinterfaces Trois niveaux de construction Boîtes à outils Générateurs dinterfaces Squelettes d applications

31 31 1 er niveau de construction dinterfaces Boîtes à Outils … natives n Couche de programmation la plus basse du système de fenêtrage n Conventions de bas niveau * plateformes n Boucle de traitement des évènements n Accès au système graphique +performance, abstraction spécifiques temps d apprentissage et de construction Ex : jeux vidéo

32 32 Boîtes à outil natives Description n Bibliothèque daccès au Système de Fenêtrage n Bibliothèque dobjets de contrôle : Widgets n Mécanismes dextension des objets de contrôle n Mécanismes de communication entre les objets Application Boîte à Outils : Bibliothèque Système de fenêtrage Système d exploitation

33 33 Boîtes à outil natives Caractéristiques + Couverture de lensemble de larche, de l interface au noyau fonctionnel. Appels fonctionnels, callbacks, gestion des évènements - Plusieurs mois dapprentissage -- Temps de développement important pour une application complète. Peu de méthodologie de construction préconisée ++ Tous les modèles graphiques sont supportés + Modularité des widgets - Modularité de lensemble de lapplication dépendante du programmeur - Extensibilité de lensemble dépendante du programmeur - Code rarement compact ==> Méthodologie de développement

34 34 1 er niveau de construction dinterfaces Boîtes à Outils … multiplateformes n Pour éviter de développer une version de l application pour chaque plateforme n Point commun de toutes les plateformes u Primitives les plus simples u Évènements nombreux u Composants natifs vs composants spécifiques n Ré-implémentation des composants natifs par plateforme : Java Swing (99), IlogViews (94)

35 35 Boîtes à outil multiplateformes Encapsulation n Encapsulation des mécanismes spécifiques à chaque plateforme u + Bonne extensibilité u - Difficultés à respecter le look and feel natif u - Difficultés à exploiter les utilitaires de communication entre applications Application Boîte à Outils générale Système de fenêtrage Système d exploitation Système de fenêtrage

36 36 Boîtes à outil multiplateformes Machine virtuelle n Abstraction des mécanismes primitifs (modèle abstrait générique) u Exemples : IlogViews, Java u - Production du plus petit dénominateur commun u + Portabilité et respect du look and feel natif sont garantis Application Boîte à Outils Générique Système de fenêtrage Système d exploitation Système de fenêtrage Adaptation

37 37 2ème niveau de construction dinterfaces Générateurs dinterface n Générateurs de la partie Présentation de lapplication n Éditeurs graphiques à manipulation directe n La partie générée peut être : du code natif (C, C++, Java), rapide mais difficile à modifier du code intermédiaire, fichier de ressources interprété par lappli, modifiable mais lent un mélange des deux : code intermédiaire et talons de communication entre adaptateur de noyau fonctionnel et fonctions natives Présentation Générateur Système de fenêtrage Système d exploitation Domaine Bibliothèque

38 38 Générateurs d interface Gestion du placement n Placement statique des composants en wysiwyg u Fenêtres d application de taille fixe u Résultat fidèle mais qualité d usage dépendante des tailles et des résolution d écran n Placement implicite dans des conteneurs invisibles u Retaillage difficile u Lisibilité et hiérarchisation des informations n Placement sous contraintes / description de relations u Rataillage à évaluer à l usage n Nécessité de connecter les composants obtenus à l application n Difficultés à décrire la dynamique de l interface u telle que apparition progressive et déplacement des composants

39 39 Générateurs d interface Caractéristiques... n Construction isolée de la présentation n Temps d apprentissage court u … sauf pour la connexion au reste de l application n Temps de construction court … pour le standard n Méthodologie recommandée : u 1° Interface u 2° Connexion au noyau sémantique n Extensibilité et modularité restreintes

40 40 Générateurs d interface … Caractéristiques. Seule la Présentation est générée + Enrichissement des mécanismes de la BAO sous-jacente. Générateurs dédiés à un certain type dinterfaces, exemple : Formulaire + Temps dapprentissage court si on suit les stéréotypes. Talons de communication efficaces si on reste proche des modèles génériques - Le modèle graphique reste celui du SDF natif - Seules les entrées souris et clavier sont prévues - Difficultés à réutiliser des composants inter-applications et des talons existants. Les applications générées sont compactes en code sous condition dutiliser des bibliothèques dynamiques

41 41 3ème niveau de construction dinterfaces Squelettes dapplication n Application Frameworks : Découpage en objets coopérants dune application graphique interactive Factorisation des parties de code récurrentes n Développement dune application spécifique par Dérivation des classes abstraites dun squelette Spécialisation des méthodes Présentation Générateur Système de fenêtrage Système d exploitation Domaine Boîte à Outils

42 42 Squelettes d Application Exemples n Exemples historiques u MacApp : classes Application, Document, View u NextStep sur station NeXT u > Éditeurs de texte, de dessin n Exemples contemporains u Java Swing : Boîte à outils ET squelettes génériques u MFC Microsoft u OpenStep Apple u GNUstep

43 43 Squelettes d Application Caractéristiques... n Peuvent construire toute l application u Programmation objet, design pattern n Temps d apprentissage long / squelettes abstraits n Temps de développement court / stéréotypes n Méthodologie incrémentale u Description progressivement raffinée des méthodes n Connexions simples avec d autres protocoles u BdD, web n Extensibilité et modularité limitées aux stéréotypes

44 44 Squelettes dapplication … Caractéristiques ++ Extensibilité : grande richesse dans les dérivations -- Grande complexité : trop modifiables ++ Modularité : utilisation rigoureuse des protocoles, pas de spécialisation u Ex : éditeur de texte, de graphe sous NextSTEP + Les squelettes peuvent aider à construire toutes les parties de lapplication.. Les composants communiquent par invocation de méthodes ou par callback. Certains formalismes sont très compacts (interacteurs). Dautres sont de très bas niveau (gestion du graphique interne) + Construction (relativement) rapide dapplications collant au modèle du squelette - Long temps dapprentissage (= Fonction du degré dabstraction des squelettes). Méthodologie de développement : u dériver les classes abstraites u définir les méthodes requises - Seules les entrées souris et clavier sont prévues

45 45 Outils de construction dinterfaces Perspectives Langages spécialisés n Langages dédiés à la construction d application graphique interactive n Mécanismes de communication entre composants n Exemples u Visual Basic u Tk avec Tcl, PERL ou Scheme n Facilités syntaxiques n Facilités sémantiques : Contrôleur de dialogue u Communication entre Noyau fonctionnel et Présentation

46 46 Outils de construction dinterfaces Perspectives Méthodologie de conception des interfaces n Design Pattern, Motifs de conception u Abstraction des squelettes dapplications u Découpage de lapplication en composants autonomes u Schémas de programmation n But : améliorer la qualité du logiciel en robustesse, modularité, réutilisabilité n Démarche : u Identification de Patrons à partir des spécifications u Développement orienté objet avec communication par messages

47 47 Questions ?


Télécharger ppt "Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM contrat Creative Commons Paternité-Pas d'Utilisation."

Présentations similaires


Annonces Google