Université de Lorraine – Département MIM – Master 1 Informatique. Réaliser par : - Samir GUENDOUL. - Karim HAMELADJI. Encadrer par : -Mme Isabelle PECCI.

Présentation au sujet: "Université de Lorraine – Département MIM – Master 1 Informatique. Réaliser par : - Samir GUENDOUL. - Karim HAMELADJI. Encadrer par : -Mme Isabelle PECCI."— Transcription de la présentation:

1 Université de Lorraine – Département MIM – Master 1 Informatique. Réaliser par : - Samir GUENDOUL. - Karim HAMELADJI. Encadrer par : -Mme Isabelle PECCI. Responsable de lUE : - M. Dominique MICHEL.

2 Introduction. Partie I : Définition Historique et Littéraire. Définition Technique (trois définitions). Forme du Carrousel. Dispositions des Eléments. Dispositions de la Vue. Type de Visualisation. Partie II : Notre définition du carrousel. Les paramètres des carrousels. Les dimensions. La visualisation. Le mouvement. Les éléments. Linteraction avec lutilisateur. Conclusion.

3 Grace aux nouvelles technologies de communication et de l'informatique, l'information nous parvient comme une grosse masse chaotique où il devient difficile de trouver l'information pertinente. Devant cette difficulté, plusieurs techniques de visualisations graphique ont été élaboré; parmi elle la technique du carrousel

4

5 Le carrousel consistait en un tournoi ordinairement en course de bague, de tète...etc. entre plusieurs chevaliers partagés en différentes quadrilles distingués par la diversité des livrées et des habits, se livrent à différents jeux et exercices. On y ajoutait souvent des courses de chariots, des machines, des récits et des danses de chevaux.

6 Définition 1 : Un carrousel est un système qui est utilisé pour représenter des éléments dans un ordre précis. Un tel système peut tenir beaucoup déléments différents qui tournent dans une boucle fermée.

7 Figure 1 – Carrousel Circulaire Figure 2 – Carrousel Linéaire

8 Définition 2 : Carrousel, élément d'IHM consistant à afficher une liste d'items défilants, souvent de manière circulaire (3D) à l'image du Flip 3D dans Windows Vista et Windows 7 (touche Win+Tab) (figure 3), ou du célèbre affichage des albums dans iTunes.

9 Figure 3 - Aero (Win+Tab) Figure 4 - (Alt+Tab)

10 Définition 3 : Le carrousel est un objet 3D avec son propre système de coordonnées. La base de celui-ci est une surface circulaire qui se trouve dans le plan XZ (que nous appelons "plan du socle", son centre étant le point (0, 0, 0). Nous nous référerons à l'axe Y comme axe central du carrousel. Les éléments seront sur le plan du socle, chacun dans la même distance R de l'axe central qui représente le rayon du carrousel.

11 Figure 5 - Modèle Basic du carrousel

12 Figure 6 – Carrousel en forme de cylindre Figure 7 – Carrousel en forme de sphère

13 Figure 8 – Dispositions des éléments Figure 9 – Distance entre les éléments

14 Figure 10 – Caméra Fixe Figure 11 – Caméra en mouvements

15 A. Collage-mode RSVP : Les éléments sont représentés de manières multiples pour lutilisateur sur une surface fixe, les objets arrive un par un avec une vitesse permettant la visualisation des éléments positionner sur la surface avant larrivée des nouveaux. Figure 18 – Principe Collage-mode RSVP

16 B. Floating-mode RSVP : Chaque élément est représenté initialement en miniature au centre de lécran, puis se dilate en se déplaçant radialement dans l'une des directions possibles de l'arête de l'affichage. Figure 18 – Principe Floating-mode RSVP

17 C. Shelf-mode RSVP : La représentation des éléments est sous forme dune autoroute, les éléments sont empilés les uns derrières les autres en fil indienne (on a la possibilité de les voir)., les éléments sont représenté en taille décroissante du 1er élément jusquau dernier, les éléments se déplace en chaine FIFO, chacun son tour. Figure 18 – Principe Shelf-mode RSVP

18

19 Notre définition : « Un carrousel est un élément informatique qui permet dexposer une masse dinformation dune façon ergonomique à lutilisateur. » On définit : Elément informatique : composant, programme, … Exposer : illustrer, étaler ou présenter. Masse dinformation : des images, des vidéos, des documents, … Façon ergonomique : Une manière simple, compréhensible et déductive avec une interface graphique conviviale et facile qui donne une vue générale et détailler en même temps à lutilisateur.

20 Chaque carrousel possède des propriétés et caractéristiques propres à lui qui permettent de le décrire. nous pouvons citer comme propriété la « forme du carrousel », qui peut être : spirale, circulaire, linaire, …etc. Exemple de carrousels : Carrousel linaire.Carrousel spirale.Carrousel circulaire.

21 Les recherches que nous avons effectuée, nous ont permit de recenser les caractéristiques communes et distinctes des différents carrousels existants. Le tableau suivant regroupe toutes les propriétés, que nous avons pus trouver :

22 Nous avons extrait cinq caractéristiques globales : Dimension du carrousel. Visualisation. Le mouvement. Les éléments. Linteraction.

23 La dimension est létendue mesurable dun corps en tel ou tel sens. Elle représente la taille et la surface du carrousel. largeur Hauteur Profondeur

24 Plan de représentation : Représentation 2D; Représentation isométrique (2,5D); Représentation 3D. Carrousel 2D Carrousel 2,5D Carrousel 3D

25 Cest la surface de visualisation du carrousel présenté pour lutilisateur. Il représente le retour visuel de manière ergonomique. Nous avons les propriétés suivantes : Forme du carrousel : Linéaire ; Circulaire ; Spirale ; Sphère ; Forme 3D.

26 Forme des éléments. Vue déléments. vue partiel; vue entière. Repère de navigation Illustration au centre Forme circulaire. Forme rectangulaire. Vue partiel. Vue entière. Repère de navigation

27 Cette propriété défini le mouvement effectué par le carrousel. Nous avons les propriétés suivantes : Orientation du déplacement : cest la direction de déplacement des éléments dans le carrousel. Horizontale ; Verticale ; Diagonale ; Spirale ; … Etat de lanimation : Le carrousel est déclenché soit : Dune manière automatique Par lutilisateur. Effet de transition : c'est un effet qui permet de passer d'un élément A à un élément B.

28 Type de parcours : il définit la façon avec laquelle est exploré le carrousel. On a deux type de parcours : Parcours rotatif ; Parcours de bout-en-bout. Parcours rotatif. Parcours bout-en-bout.

29 Les éléments ou items, ce sont les composants graphiques exposer par le carrousel. On distingue deux types déléments : Éléments principaux; Éléments secondaires. Elément Eléments principales Eléments secondaires

30 Éléments principaux : ce sont les éléments présenter pour lutilisateur situé sur la partie principale du carrousel. Nombre déléments. Opacité. Focus. Éléments secondaires : Ce sont tout les éléments situé sur la partie arrière plan du carrousel. Nombre déléments Opacité. Focus. Visibilité Espacement entre les éléments. Espacement

31 Cest les actions effectuer par lutilisateur pour manier le carrousel. Nous avons définit les propriétés suivantes : Type délément : Éléments dillustration (images, vidéos, documents, …) Éléments cliquables (boutons, liens, …). Zoom : Cest laction de grossir ou réduire la taille du carrousel.

32 Périphérique dinteraction : Cest loutil de communication entre lutilisateur et le carrousel. La souris ; Le clavier ; Lécran tactile ; Le micro (manipulation par la voix) ; La Cam (manipulation par les yeux ou par les gestes). Méthodes de manipulation : Cest la façon avec laquelle lutilisateur manipule le carrousel.

33 Létude des carrousels est un domaine de visualisation dinformation, il offre à lutilisateur une vue ergonomique de plusieurs données dune manière globale et détailler à la fois. A travers létude et les recherches que nous avons effectués sur le carrousel, nous avons put réaliser un espace de conception pour le développement des carrousels. Dautre paramètres existent dans nous navions pas parlés car ce sont soit des paramètres généraux (nombre déléments, taille des éléments, …etc.), ou bien dautre paramètres que nous navons pas pu voir.

34