les interfaces homme ordinateur
DESCRIPTION
Les Interfaces Homme Ordinateur. Présentation générale mis à jour en Février 2008. Actuellement. Windows Xwindow Mac Html Xml/Xslt/Xpath... Php Gif/Jpeg Flash ActionScript swf Javascript Java bibliothèques propriétaires …. Enjeux. Interopérabilité Portabilité - PowerPoint PPT PresentationTRANSCRIPT
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
Présentation généralePrésentation généralemis à jour en Février 2008mis à jour en Février 2008
ActuellementActuellement• WindowsWindows• XwindowXwindow• MacMac• HtmlHtml• Xml/Xslt/Xpath...Xml/Xslt/Xpath...• PhpPhp• Gif/JpegGif/Jpeg• Flash ActionScript swfFlash ActionScript swf• JavascriptJavascript• JavaJava• bibliothèques propriétairesbibliothèques propriétaires• ……
EnjeuxEnjeux• InteropérabilitéInteropérabilité• PortabilitéPortabilité• Bibliothèques de composantsBibliothèques de composants• HégémonieHégémonie• Maîtrise du mondeMaîtrise du monde
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
Exemples et conceptsExemples et concepts
Interfaces multimodesInterfaces multimodes
• Mode Standard / mode ExpertMode Standard / mode Expert• Exemple : NeroExemple : Nero
Interfaces "MDI"Interfaces "MDI"• Multiple Document Interfaces = interfaces Multiple Document Interfaces = interfaces
à documents multiplesà documents multiples
• gestion d'un espace de travail interne à gestion d'un espace de travail interne à l'applicationl'application
• Ex : Visual C++, Eclipse, Word, Powerpoint Ex : Visual C++, Eclipse, Word, Powerpoint etc.etc.
Interfaces MDI gérées à fenêtres Interfaces MDI gérées à fenêtres indépendantesindépendantes• Ex : Word, PowerpointEx : Word, Powerpoint
• Systèmes hybrides : Netscape / FirefoxSystèmes hybrides : Netscape / Firefox
IDEIDE• Integrated development environment = Integrated development environment =
Environnement de développement intégréEnvironnement de développement intégré
• Combinaison de fenêtre de message, Combinaison de fenêtre de message, fenêtre de travail, fenêtre d'exploration, fenêtre de travail, fenêtre d'exploration, fenêtre d'informationfenêtre d'information
• Ex : Visual C++, Eclipse, OPL Studio, Ex : Visual C++, Eclipse, OPL Studio, PowerpointPowerpoint
IDE à perspectives multiplesIDE à perspectives multiples• Organisations prédéfinies de fenêtres de Organisations prédéfinies de fenêtres de
travail selon le type de tache effectuéetravail selon le type de tache effectuée
• Ex : EclipseEx : Eclipse
Interfaces WizardsInterfaces Wizards• L'utilisateur est guidé par une succession L'utilisateur est guidé par une succession
d'écransd'écrans
• Ex : installeurs, mode standard de Ex : installeurs, mode standard de nombreuses interfaces (Nero), Dr Divx nombreuses interfaces (Nero), Dr Divx
Environnements à PluginsEnvironnements à Plugins• Des applications dont les fonctionnalités Des applications dont les fonctionnalités
peuvent peuvent être complétées par l’utilisateur, être complétées par l’utilisateur, par ajout simple de modulespar ajout simple de modules
• Ex: EclipseEx: Eclipse
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
Concepts FondamentauxConcepts Fondamentaux
Niveaux logiquesNiveaux logiques• Trois niveaux logiques dans les interfaces Trois niveaux logiques dans les interfaces
• Niveau graphique (interaction de bas Niveau graphique (interaction de bas niveau)niveau)
• Niveau composant (Widget / Charte Niveau composant (Widget / Charte graphique)graphique)
• Niveau dialogue (modèles d'interaction)Niveau dialogue (modèles d'interaction)
Analogie avec les languagesAnalogie avec les languages• Trois niveauxTrois niveaux
• Niveau lexical : composants élémentaire Niveau lexical : composants élémentaire (boutons, labels etc...)(boutons, labels etc...)
• Niveau syntaxique : règles de bonne Niveau syntaxique : règles de bonne composition de composants élémentairescomposition de composants élémentaires
• Niveau sémantique : fonctions de Niveau sémantique : fonctions de interfacesinterfaces
Concepts Fondamentaux de bas Concepts Fondamentaux de bas niveauniveau• FenêtreFenêtre• DessinDessin• Attribut GraphiqueAttribut Graphique• Contexte GraphiqueContexte Graphique• ÉvénementÉvénement• Plan visuelPlan visuel• Instrument de pointage (pointeur)Instrument de pointage (pointeur)• Protocole de réaffichage (<expose>)Protocole de réaffichage (<expose>)• Hiérarchie de fenêtresHiérarchie de fenêtres• ModalitéModalité
Concepts fondamentaux de niveau Concepts fondamentaux de niveau ComposantComposant• Attribut (grisé,actif,accélérateur, etc...)Attribut (grisé,actif,accélérateur, etc...)• CallbackCallback• Distribution des événements (Dispatch)Distribution des événements (Dispatch)• Automate de prise en charge des Automate de prise en charge des
événementsévénements• AccélérateurAccélérateur• Hiérarchie d'objetsHiérarchie d'objets• Gadgets/WidgetsGadgets/Widgets• Menu / Pop up menuMenu / Pop up menu
Concepts Répandus de niveau Concepts Répandus de niveau DialogueDialogue• Ces éléments sont sujet à des progrès constants, et Ces éléments sont sujet à des progrès constants, et
à des modesà des modes
• Feuille à ongletsFeuille à onglets• Assistant (Wizard)Assistant (Wizard)• Menus dynamiquesMenus dynamiques• Boite de sélection de fichierBoite de sélection de fichier• Sélecteur d'arborescenceSélecteur d'arborescence• Menu contextuel bouton droitMenu contextuel bouton droit• Changement de "skin"Changement de "skin"• Bouton "advanced"/ ou "propriétés"Bouton "advanced"/ ou "propriétés"
Feuille à OngletsFeuille à Onglets
WizardWizard
Selection de fichiersSelection de fichiers
Explorateur d'arborescencesExplorateur d'arborescences
Communication Inter ApplicationsCommunication Inter Applications
• Copier CollerCopier Coller• Drag and dropDrag and drop• Ole DCOMOle DCOM• Concept de PluginConcept de Plugin• CorbaCorba
Cas particulier des interfaces pour Cas particulier des interfaces pour le graphisme 2Dle graphisme 2D• Différents modèles d'automates pour le graphismeDifférents modèles d'automates pour le graphisme
– PowerpointPowerpoint– XfigXfig
• Bounding BoxBounding Box
• Point de contrôlePoint de contrôle
• Quadtrees pour l'accès rapide aux élémentsQuadtrees pour l'accès rapide aux éléments– permet de cliquer sur un parmi plusieurs centaines de permet de cliquer sur un parmi plusieurs centaines de
milliers d'éléments affichésmilliers d'éléments affichés
Cas particulier de la 3DCas particulier de la 3D• Utilisation de la souris en 3DUtilisation de la souris en 3D• Logique de l'envoi d'événements (click)Logique de l'envoi d'événements (click)• Problème de l'identification de l'objet Problème de l'identification de l'objet
pointépointé• Point de contrôlePoint de contrôle• Navigation 3DNavigation 3D
Cas particulier : la simulation Cas particulier : la simulation d'appareild'appareil
• L'ordinateur remplace de nombreux L'ordinateur remplace de nombreux appareils électroniques,appareils électroniques,
• Le bouton rotatif, l'interrupteur à bascule Le bouton rotatif, l'interrupteur à bascule (switch), l'afficheur graphique, etc.. ont (switch), l'afficheur graphique, etc.. ont été incorporés comme des métaphores été incorporés comme des métaphores utilisablesutilisables
Réalisation d'une interface: cas Réalisation d'une interface: cas simplesimple• Application mono posteApplication mono poste
• Choix d'un environnement cible (Unix/Windows)Choix d'un environnement cible (Unix/Windows)• Choix d'un environnement de développementChoix d'un environnement de développement• Choix d'une bibliothèque de composants Choix d'une bibliothèque de composants
graphiquesgraphiques– portabilité, efficacité, adéquation au besoin ...portabilité, efficacité, adéquation au besoin ...– la bibliothèque apporte sa propre charte graphique, et la bibliothèque apporte sa propre charte graphique, et
des éléments relatifs au dialoguedes éléments relatifs au dialogue• Possibilité d'innover dans la présentation et les Possibilité d'innover dans la présentation et les
interacteurs selon le public visé et le goûtinteracteurs selon le public visé et le goût
Réalisation d'une interface en Réalisation d'une interface en environnement industrielenvironnement industriel• Application multi posteApplication multi poste• Développement en équipeDéveloppement en équipe• Choix techniques complexes (distribution, Choix techniques complexes (distribution,
bases de données etc...)bases de données etc...)• Définition/respect d'une charte graphiqueDéfinition/respect d'une charte graphique• Spécification/Conception de l'interface et du Spécification/Conception de l'interface et du
logiciellogiciel– lié au besoin de respecter des délais et de travailler lié au besoin de respecter des délais et de travailler
en équipeen équipe• Suivi d'un cycle de vie de type développement Suivi d'un cycle de vie de type développement
rapide d'applications (RAD)rapide d'applications (RAD)
L'analyse des besoins en matière L'analyse des besoins en matière d'IHOd'IHO• Analyse du travail pour informatisationAnalyse du travail pour informatisation
• Intégration du prototypage dans un processus Intégration du prototypage dans un processus répétitif de type RAD / spirale de Boehmrépétitif de type RAD / spirale de Boehm– 1 analyse du besoin1 analyse du besoin– 2 réalisation d'un prototype2 réalisation d'un prototype– 3 évaluation avec le client3 évaluation avec le client– 4 évaluation des risques; retour en 14 évaluation des risques; retour en 1
• Le RAD prévoit des échéances fixes, et Le RAD prévoit des échéances fixes, et strictes pour chaque cyclestrictes pour chaque cycle
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
Les grands paradigmes techniquesLes grands paradigmes techniques
Principe FondamentalPrincipe Fondamental• Assurer la séparation des interfaces et des Assurer la séparation des interfaces et des
applications:applications:
• au niveau du code sourceau niveau du code source
• au niveau des exécutablesau niveau des exécutables
Séparation IHO/ApplicationSéparation IHO/Application• Modèle client/serveurModèle client/serveur
– disparudisparu
• Modèle serveur/serveurModèle serveur/serveur– xwindowsxwindows
• Modèle associatifModèle associatif– windowswindows
Prise en charge de l'utilisateurPrise en charge de l'utilisateur• Utilisateur maîtreUtilisateur maître
– threadsthreads– possibilité d'interruption de tâchepossibilité d'interruption de tâche
• Utilisateur guidé plus ou moins contraintUtilisateur guidé plus ou moins contraint– remplissage de formulairesremplissage de formulaires– fenêtres modales fenêtres modales
Couches Réseau UtiliséesCouches Réseau Utilisées• pipes, sockets tcpippipes, sockets tcpip• rmirmi• oleole• httphttp• corbacorba
Avancées techniques Avancées techniques fondamentalesfondamentales• connexion réseau sécurisée (tcp/ip)connexion réseau sécurisée (tcp/ip)• concept de struct -> object graphiqueconcept de struct -> object graphique• pointeur de fonctions -> callbackpointeur de fonctions -> callback• chargement dynamique de bibliothèquechargement dynamique de bibliothèque• interprétation des symboles d'une dllinterprétation des symboles d'une dll• concept d'objetconcept d'objet• chargement dynamique de classechargement dynamique de classe
X WindowsX Windows
Client 1
Client 2
Client 3
Serveur X
Client 4
Client 5
Serveur X
Protocole X
WindowsWindows
Ole Server
Windows Windows
Ole Server
Client 1 Client 2 Client 3 Client 4 Client 5
Jsp/Php/AspJsp/Php/Asp
Web Server:80
Prg 2
Prg 1
Web Server:80Prg 4
Prg 3
Navigateur
Navigateur
Limitations de XWindowLimitations de XWindow• La communication repose sur un protocole La communication repose sur un protocole
d'assez bas niveau (X) non construit sur la d'assez bas niveau (X) non construit sur la base de RMI, corba, etcbase de RMI, corba, etc
• La communication entre applications se La communication entre applications se fait donc soit via le serveur X par des fait donc soit via le serveur X par des échanges de propriétés, soit directement, échanges de propriétés, soit directement, via tcp/ip ou toute couche supérieure via tcp/ip ou toute couche supérieure (Corba)(Corba)
Avantages de XWindowAvantages de XWindow• Fenêtre = ressource partagéeFenêtre = ressource partagée
Window Id
Machine 2Machine 1
Machine 3
Avantages de XWindowAvantages de XWindow• Tout est fait pour permettre l'affichage d'informations Tout est fait pour permettre l'affichage d'informations
provenant de différentes machines simultanémentprovenant de différentes machines simultanément
• Totale interopérabilité, tout programme client Totale interopérabilité, tout programme client s'exprimant selon le protocole X peut se connecter à s'exprimant selon le protocole X peut se connecter à tout serveur, même au bout du monde et d'une autre tout serveur, même au bout du monde et d'une autre architecture matériellearchitecture matérielle
• Le protocole X est très léger (pas de codage Xdr)Le protocole X est très léger (pas de codage Xdr)
• La boucle d'événements est sophistiquéeLa boucle d'événements est sophistiquée
Interopérabilité selon XwindowInteropérabilité selon XwindowProblème du ByteSexProblème du ByteSex
1 2 3 4Machine 1
(4 + 3*28 + 2*216 + 224)
1 23 4
12 34
1234
Machine 1
Machine 2
Machine 3
• La machine qui établit la connexion envoie un entier La machine qui établit la connexion envoie un entier particulier, qui permet au destinataire de connaître particulier, qui permet au destinataire de connaître le codage des entiers chez son partenairele codage des entiers chez son partenaire
• Ensuite, si nécessaire, celui qui "subit" la connexion Ensuite, si nécessaire, celui qui "subit" la connexion traduit systématiquement ses entrées pour les traduit systématiquement ses entrées pour les convertir convertir
Copie d'une "struct" pour C Copie d'une "struct" pour C (XWindow)(XWindow)
char buffer
struct
...
Copie d'une struct pour XdrCopie d'une struct pour Xdr
struct• Définition récursive:Définition récursive:char* Xdr (struct,buf){char* Xdr (struct,buf){ buf=Xdr(a ,buf);buf=Xdr(a ,buf); buf=Xdr(b ,buf);buf=Xdr(b ,buf); buf=Xdr(c ,buf);buf=Xdr(c ,buf); buf=Xdr(d ,buf);buf=Xdr(d ,buf); buf=Xdr(e ,buf);buf=Xdr(e ,buf); return buf;return buf;}}• A partir des fonctions de base A partir des fonctions de base char* Xdr (int,char*); char* Xdr (int,char*); ......
abc
de
Avantages de WindowsAvantages de Windows• Intégration dans l'environnement Windows Intégration dans l'environnement Windows
où les dll sont totalement interprétées (on où les dll sont totalement interprétées (on peut interroger dynamiquement une dll pour peut interroger dynamiquement une dll pour savoir ce qu'elle offre comme services)savoir ce qu'elle offre comme services)
• Disponibilité de OLE pour les Disponibilité de OLE pour les communications inter applications, possibilité communications inter applications, possibilité de rmi (remote method invocation)de rmi (remote method invocation)
• La fluidité est garantie par une intégration La fluidité est garantie par une intégration totale au systèmetotale au système
• L'accès aux ressources graphiques est directL'accès aux ressources graphiques est direct
Limitations de WindowsLimitations de Windows• Le graphisme et l'interaction sont gérés Le graphisme et l'interaction sont gérés
par l'OS. On ne peut donc pas changer de par l'OS. On ne peut donc pas changer de serveur graphique, ou de window serveur graphique, ou de window manager. On ne peut que changer de manager. On ne peut que changer de "skin"."skin".
• Les couches logicielles traversées sont Les couches logicielles traversées sont nombreuses, et consomment plus de nombreuses, et consomment plus de ressources pour la communication inter ressources pour la communication inter processusprocessus
Avantages du modèle HtmlAvantages du modèle Html• Le client peut choisir son style d'affichage, Le client peut choisir son style d'affichage,
ainsi que le contenu (avec un fichier de ainsi que le contenu (avec un fichier de style css, ou un programme de style css, ou un programme de transformation xslt)transformation xslt)
• Le client choisit son navigateurLe client choisit son navigateur
Limitations du modèle HtmlLimitations du modèle Html• Un programme ne décide pas d'afficher quelque Un programme ne décide pas d'afficher quelque
part, c'est l'utilisateur présent devant son écran part, c'est l'utilisateur présent devant son écran qui choisit d'afficher une adresse (mode ‘pull’)qui choisit d'afficher une adresse (mode ‘pull’)
• L'affichage est en mode "page" et non en mode L'affichage est en mode "page" et non en mode "fenêtre" : cela change grace aux bibliothèques "fenêtre" : cela change grace aux bibliothèques javascript et flash action script : ext-JS, tinyMCE…javascript et flash action script : ext-JS, tinyMCE…
• Toute intervention sur l'écran mobilise beaucoup Toute intervention sur l'écran mobilise beaucoup de ressources:de ressources:– réseauréseau– ré-affichage complet de la page (sauf ajax)ré-affichage complet de la page (sauf ajax)– transfert complet de contexte lors de la requête (cookies transfert complet de contexte lors de la requête (cookies
- m- même en ajax…ême en ajax…))
Gestion du ContexteGestion du Contexte• Dans le cas Html, le protocole permet l'interruption Dans le cas Html, le protocole permet l'interruption
de connexion en gardant la session ouvertede connexion en gardant la session ouverte
Le contexte peut être :Le contexte peut être :
• conservé par le serveurconservé par le serveur• conservé par le clientconservé par le client• non conservénon conservé
soit en mode session, soit de façon rémanentesoit en mode session, soit de façon rémanente
Le Modèle Thin ClientLe Modèle Thin Client• Plutôt que d'exécuter des algorithmes Plutôt que d'exécuter des algorithmes
d'interface complexes au niveau du client,d'interface complexes au niveau du client,
• on crée une "photo" d'écran sur un on crée une "photo" d'écran sur un serveur, que l'on envoie à destination, serveur, que l'on envoie à destination, avec simplement des zones de capture avec simplement des zones de capture d'événements et leurs adresses associéesd'événements et leurs adresses associées
ok
ici :
ou bienla :
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
BibliothèquesBibliothèques
Couche graphiqueCouche graphique• Sous X Window : supportée par le Sous X Window : supportée par le
protocole Xprotocole X• Dessin de formes de baseDessin de formes de base
– rectanglerectangle– trait, courbetrait, courbe
• Gestion des fenêtresGestion des fenêtres– plansplans– événementsévénements– propriétés associéespropriétés associées
• Gestion du contexte graphiqueGestion du contexte graphique
Couche ObjetCouche Objet• Sous X Window, supportée par la couche Xt Sous X Window, supportée par la couche Xt
(librairie)(librairie)• Sous Windows, supportée par les MFCSous Windows, supportée par les MFC
• Gestion des objets graphiques:Gestion des objets graphiques:
• fenêtres associéesfenêtres associées• propriétés et attributs graphiquespropriétés et attributs graphiques• gestion de la structuregestion de la structure• gestion des automates de prise en charge des gestion des automates de prise en charge des
événementsévénements
Evénements de baseEvénements de base• <enter><enter>• <leave><leave>• <focus><focus>• (<left-ctrl><right-alt><left-(<left-ctrl><right-alt><left-
shift>)<ButtonDown>shift>)<ButtonDown>• <buttownUp><buttownUp>• <pointerMotion><pointerMotion>• etc...etc...
Tables de Translations XWindowTables de Translations XWindow• Langage de désignation interprété, avec Langage de désignation interprété, avec
préférencespréférences• Détaché des objets : affectation externe des Détaché des objets : affectation externe des
callbacks, permettant le paramétrage par callbacks, permettant le paramétrage par l'utilisateurl'utilisateur
• Implanté dans les fichiers de défauts présents Implanté dans les fichiers de défauts présents dans le dossier app-defaultsdans le dossier app-defaults
*.XmPushButton:color=blue*.XmPushButton:color=blueMainWin*CancelButton:color=redMainWin*CancelButton:color=redMainWin.MenuBar.File.Quit:callback=leave()MainWin.MenuBar.File.Quit:callback=leave()
Couche DialogueCouche Dialogue• Non implantée en XwindowNon implantée en Xwindow• Disponibilité de bibliothèques de styles Disponibilité de bibliothèques de styles
graphiques comme Motif, bâties sur Xtgraphiques comme Motif, bâties sur Xt• Implantée par des objets de haut niveau Implantée par des objets de haut niveau
sous windows (assistants)sous windows (assistants)
Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur
Modèles pour la portabilitéModèles pour la portabilité
Niveaux de portabilitéNiveaux de portabilité• Interfaces non portables: nécessitent la modification Interfaces non portables: nécessitent la modification
des sourcesdes sources
• Interfaces portables par re compilation/édition de Interfaces portables par re compilation/édition de liens sans modification de sourceliens sans modification de source– Ilog ViewsIlog Views– Haxe pour le web http://haxe.org/Haxe pour le web http://haxe.org/– GWT http://code.google.com/webtoolkit/GWT http://code.google.com/webtoolkit/– permet de développer sur une machine, et de diffuser sur permet de développer sur une machine, et de diffuser sur
un grand nombre de plate formes différentesun grand nombre de plate formes différentes
• Interfaces portables par le recours à une machine Interfaces portables par le recours à une machine virtuellevirtuelle– JavaJava
Portabilité par machine virtuellePortabilité par machine virtuelle• Une seule version de la bibliothèque graphique doit Une seule version de la bibliothèque graphique doit
être conçueêtre conçue
• Les fonctionnalités de cette bibliothèque sont donc Les fonctionnalités de cette bibliothèque sont donc offertes sur toutes les plate formesoffertes sur toutes les plate formes
• Seule la machine virtuelle doit être portéeSeule la machine virtuelle doit être portée
• Dans le cas de Java, cette machine virtuelle est Dans le cas de Java, cette machine virtuelle est généralement portée directement par le couple généralement portée directement par le couple constructeur/OSconstructeur/OS
Portabilité par Compilation Portabilité par Compilation • Pour permettre la portabilité sans édition de Pour permettre la portabilité sans édition de
source, chaque version de la bibliothèque source, chaque version de la bibliothèque définit exactement les mêmes symbolesdéfinit exactement les mêmes symboles
• Chaque implantation de la bibliothèque pour Chaque implantation de la bibliothèque pour une plate forme donnée:une plate forme donnée:– fournit une passerelle vers la plate forme cible par fournit une passerelle vers la plate forme cible par
des appels de fonctions graphiques existantesdes appels de fonctions graphiques existantes– comble éventuellement certains manques si des comble éventuellement certains manques si des
fonctions présentes sur une autre plate forme fonctions présentes sur une autre plate forme doivent être disponibles partoutdoivent être disponibles partout
Taux de Portabilité par Taux de Portabilité par CompilationCompilation
Windows
Linux
Atari Os
Difficultés de la Portabilité par les Difficultés de la Portabilité par les bibliothèquesbibliothèques
• Chaque OS requiert un portage de la Chaque OS requiert un portage de la bibliothèque, même pour la même machinebibliothèque, même pour la même machine
• Plus la bibliothèque utilise des fonctions de Plus la bibliothèque utilise des fonctions de haut niveau, plus elle dépend de leurs haut niveau, plus elle dépend de leurs évolutions : coût de maintenanceévolutions : coût de maintenance
• Chaque fonction spécifique d'une plate forme Chaque fonction spécifique d'une plate forme dont on veut la portabilité doit être implantée dont on veut la portabilité doit être implantée ou simulée sur les autres plate formesou simulée sur les autres plate formes
Look and Feel et simulationLook and Feel et simulation• Chaque plate forme possède un certain style, Chaque plate forme possède un certain style,
aussi appelé "look and feel".aussi appelé "look and feel".– style Windowsstyle Windows– style X11/Motifstyle X11/Motif– style Macstyle Mac
• Une bibliothèque de portabilité peut simuler les Une bibliothèque de portabilité peut simuler les styles (ne pas utiliser les bibliothèques natives styles (ne pas utiliser les bibliothèques natives mais en simuler l'aspect et le comportement)mais en simuler l'aspect et le comportement)
• Une des raisons peut être de rester Une des raisons peut être de rester indépendant des couches objet trop variables, indépendant des couches objet trop variables, comme indiqué précédemmentcomme indiqué précédemment
Émulation de Style graphiqueÉmulation de Style graphique• Cela permet d'émuler X11 sous Windows ou Cela permet d'émuler X11 sous Windows ou
Mac, et réciproquement.Mac, et réciproquement.
• Le changement de style se fait Le changement de style se fait dynamiquement comme un changement de dynamiquement comme un changement de skinskin
• Avantages: on peut développer sur un plate-Avantages: on peut développer sur un plate-forme avec le style de la future plate-forme forme avec le style de la future plate-forme de déploiementde déploiement
Interfaces Homme OrdinateurInterfaces Homme Ordinateur
DialogueDialogue
Interfaces et ProtocolesInterfaces et Protocoles• Une interface donne accès à des ensembles Une interface donne accès à des ensembles
logiciels respectant des protocoleslogiciels respectant des protocoles
• Un protocole est une interface de programmation Un protocole est une interface de programmation dont les fonctions ne peuvent pas être appelées dont les fonctions ne peuvent pas être appelées indifféremmentindifféremment
• Exemple : la pileExemple : la pile
• Le modèle de ces restrictions peut être décrit à Le modèle de ces restrictions peut être décrit à l'aide d'automatesl'aide d'automates
Interfaces et Modalité Interfaces et Modalité • Une interface donne ajoute et supprime Une interface donne ajoute et supprime
des fonctionnalités de façon dynamiquedes fonctionnalités de façon dynamique
• Ces variations forment ce que l'on appelle Ces variations forment ce que l'on appelle la modalitéla modalité
• Les modalités sont constructives ou Les modalités sont constructives ou destructivesdestructives
Fenêtres ModalesFenêtres Modales• Une fenêtre est modale quand elle désactive Une fenêtre est modale quand elle désactive
totalement ou partiellement l'accès au systèmetotalement ou partiellement l'accès au système
• Elle est application modale quand l'OS Elle est application modale quand l'OS multitâche n'est pas verrouillé sur l'application multitâche n'est pas verrouillé sur l'application courantecourante
• Elle est système modale quand l'utilisateur doit Elle est système modale quand l'utilisateur doit impérativement répondre à la question posée impérativement répondre à la question posée pour faire quoi que ce soit d'autrepour faire quoi que ce soit d'autre
Modalité ConstructiveModalité Constructive• La modalité est constructive quand elle La modalité est constructive quand elle
donne accès à des fonctions nouvellesdonne accès à des fonctions nouvelles
• Exemples:Exemples:• après avoir ouvert un fichier, dans un après avoir ouvert un fichier, dans un
éditeuréditeur
• après avoir appuyé sur le bouton "imprimer" après avoir appuyé sur le bouton "imprimer" ce qui donne accès aux paramètresce qui donne accès aux paramètres
Modalité DestructiveModalité Destructive• La modalité est destructive quand elle La modalité est destructive quand elle
supprime l'accès à certaines fonctionssupprime l'accès à certaines fonctions
• Exemples: pendant l'impressionExemples: pendant l'impression
• Le cas particulier des fenêtres modales est Le cas particulier des fenêtres modales est particulièrement saillant et anti-particulièrement saillant et anti-ergonomiqueergonomique
Modalité et SignalétiqueModalité et Signalétique• Le mode dans lequel se trouve une Le mode dans lequel se trouve une
interface doit être perceptible à l'utilisateurinterface doit être perceptible à l'utilisateur
• La signalétique de l'interface doit être La signalétique de l'interface doit être précise et non ambiguëprécise et non ambiguë
• Elle doit être homogèneElle doit être homogène
• Elle doit être dénuée de défauts d'aspectElle doit être dénuée de défauts d'aspect
Signalétique de bas niveauSignalétique de bas niveau• Items de menus grisés quand inactifsItems de menus grisés quand inactifs
• Boutons de mode enfoncés quand actifsBoutons de mode enfoncés quand actifs
• Icône de curseur, icône de pointeurIcône de curseur, icône de pointeur– exemple: paintexemple: paint
• Rémanences d'iconesRémanences d'icones– exemple: couleur de remplissage dans drawexemple: couleur de remplissage dans draw
ConclusionConclusion• Cet ensemble de transparents a servi de Cet ensemble de transparents a servi de
support à un exposé des concepts et état support à un exposé des concepts et état de l'art des différents grands paradigmes de l'art des différents grands paradigmes des interfaces homme ordinateurdes interfaces homme ordinateur
• Il est prolongé par un cours sur la Il est prolongé par un cours sur la spécification des interfacesspécification des interfaces