Discussion utilisateur:Pinocchio/Test infographie

Premières impressions

Encore bravo pour cette création ! En vrac, voilà quelques questions ou suggestions :

1°) Une présentation chronologique est-elle possible ? Par exemple, des boutons portant des noms de siècles (du -XVe siècle au XXe siècle), qui permettraient de choisir une époque, avec des puces et des textes complètement différents (en fait, seul le fond de carte serait commun à toutes les époques).

2°) Il serait judicieux de prévoir l'emplacement d'une légende, par exemple pour expliquer la signification des différentes couleurs et tailles des puces.

3°) Je suppose qu'il est possible de mettre des liens dans le texte des bulles ?

4°) Peut-on appliquer sur la carte d'autres images que des puces ? Par exemple, une zone plus ou moins étendue et semi-transparente (pour désigner une région), ou une photo, etc.

5°) La couleur du texte et du fond des bulles est-elle modifiable ? (Si c'est possible sans trop de complications, je verrai bien, à partir du VIIe siècle, les bulles concernant la civilisation arabo-musulmane avec un texte vert sombre sur vert clair ; et celles concernant le monde chrétien en texte bleu sombre sur bleu clair.)

6°) Une fois cette technique d'infographie mise au point, est-il envisageable de rendre les pages plus faciles à créer et à modifier grâce à un formulaire à remplir ? (un peu comme celui que tu avais fait pour la création d'une page de référence bibliographique.)

Caprineus 13 juin 2010 à 22:03 (GMT)

1°) Le nom des boutons est libre, mais la sélection d'affichage n'opère que sur les bulles, je n'ai pas prévu que les légendes (avec ou sans bulle) puissent être masquées comme des bulles. Les légendes ont actuellement un rôle de bouton. C'est peut-être possible, il faut voir, mais se pose déjà le problème de ce double rôle.

2°) Le modèle infographie se place dans une page article ordinaire, il est donc possible d'ajouter simplement du texte au-dessus ou au-dessous.

3°) Oui.

4°) Superposer des photos, je n'y ai pas pensé. À voir. Les seules zones actuellement définissables sont limitées aux rectangles et transparentes. Une image est aussi inscrite dans un cadre rectangulaire. De ce fait ce cadre risque de gêner en se superposant au éléments alentour.

5°) Ça devrait être possible, au prix de l'ajout de nouveaux paramètres...

6°) Un formulaire, c'est pas du tout amusant à faire ! Et je ne sais pas si ça simplifie le problème principal qui est le positionnement précis des éléments sur le fond.

Pinocchio 14 juin 2010 à 22:34 (GMT)

1°) Exemple : « La pédérastie dans le monde méditerranéen », c'est surtout intéressant si on peut montrer une chronologie, avec des boutons par siècles. Mais si puces et légendes sont fixes, on va obtenir des résultats bizarres : Le Caire et Baghdâd figureront déjà sur la carte du Ve siècle avant notre ère, alors que Sparte et Héraklion continueront de figurer au Moyen-Âge ! Pas génial...

4°) Pour ce qui est des photos (avec ou sans texte), je te laisse le soin de faire des essais. Je ne comprends pas trop la difficulté que tu exposes (bien sûr, si la photo est inscrite dans une bulle, il faudra la réduire pour qu'elle tienne à l'intérieur).

6°) Je ne me suis pas encore penché sur le positionnement des éléments. C'est vraiment si compliqué ? Est-ce que c'est expliqué quelque part ?

Caprineus 15 juin 2010 à 18:44 (GMT)

Oui j'ai compris le but mais je n'ai pas eu le temps de voir comment gérer le double rôle des légendes qui doivent s'afficher comme des bulles et ensuite se comporter comme des boutons. De plus elles doivent pouvoir cohabiter avec des légendes fixes...

Pour les photos dans les bulles, c'est déjà possible. Je n'avais pas compris, tu parlais de zones semi-transparentes traçant une région, et je rappelais que les fenêtres définissables sont rectangulaires.

Le positionnement n'est pas très compliqué mais il est long si on travaille par essais successifs. Il y a quelques explications dans les modèles qu'il faudra compléter. On peut aussi ouvrir l'image de fond dans sa taille naturelle dans un éditeur d'image et noter les coordonnées du curseur pour chaque point requis.

Pinocchio 15 juin 2010 à 22:37 (GMT)

Mise à jour et test de nouvelles fonctionnalités :

• la couleur du fond et du texte peut être changée pour les bulles ;
• nouveau mode optionnel pour les légendes leur permettant d'être cachées ou visibles à la manière des bulles ;
• les bulles s'affichent désormais si on clique sur la légende et non plus quand on passe au-dessus : l'apparition intempestive des bulles à chaque mouvement de souris m'a semblé pénible ; l'affichage des bulles liées aux aires reste activé par survol ;
• il y a deux possibilités (mais pas au choix) pour configurer l'extinction des bulles : soit une à une quand on la survole, soit toutes à la fois quand on en survole une seule.

Un canevas plus étoffé (valant mieux que de longues explications) peut être élaboré en exemple si tu fournis quelques informations dates-lieux à représenter : on sait déjà qu'il y aurait 35 boutons (siècles) !

Pinocchio 19 juin 2010 à 21:04 (GMT)

Bon, je viens d'essayer de me pencher sur le code de la page, et je crois comprendre à peu près comment utiliser les boutons et les aires... (Qu'est-ce que je suis intelligent !)

En revanche, je ne vois pas comment faire apparaître et disparaître boutons et aires en fonction des époques.

Supposons qu'il y ait 35 boutons "externes" (hors de la carte), depuis -XV^e s. jusqu'à XX^e s.. Je souhaite qu'il y ait sur la carte un bouton interne Capri au I^er s. (avec un texte mentionnant Tibère et ses pisciculi), un autre au XVII^e s. (pour mentionner que selon Jean-Jacques Bouchard les garçons de Capri « font volontiers la galanterie »), et un troisième au XX^e s. (pour évoquer Fersen, puis Peyrefitte). Aux autres siècles, Capri ne doit pas apparaître (pour éviter d'encombrer inutilement la carte). Est-ce possible ?

Je propose, pour plus de clarté, de nommer les boutons internes (dans le code) avec le numéro du siècle suivi du nom de lieu. Par exemple, les 3 boutons ci-dessus seraient nommés 1capri (ou 01capri), 17capri et 20capri. Le bouton d'Athènes au siècle de Périclès serait -5athenes (ou -05athenes).

Toute l'astuce (et la difficulté), c'est de ne faire apparaître, quand l'utilisateur a cliqué sur le bouton externe XVII^e s., que les boutons internes dont le nom commence par 17.

En revanche, les boutons externes mentionnant un lieu (comme les Grèce et Crète que tu as mis) ne semblent pas utiles.

Ces quelques indications sont-elles suffisantes pour faire avancer le schmilblick ?

(Je vais essayer de localiser Capri – sans garantie de réussite...)

Caprineus 21 juin 2010 à 15:29 (GMT)

En consultant les modèles et en continuant de réfléchir (mon QI augmente d'heure en heure !), j'ai mieux compris le fonctionnement, et je me suis lancé dans la création d'une "vraie" page : Pédérastie dans le monde méditerranéen (infographie).

Pas encore parfait, loin s'en faut, mais apparemment on est sur la bonne voie. Confirme-moi que les choix effectués pour les codes sont corrects.

Quelques points à améliorer :

• Serait-il possible que l'infographie, à l'ouverture de la page (et à la fermeture du zoom) prenne exactement la largeur normale du texte ? C'est-à-dire qu'elle s'adapte à l'écran de l'utilisateur, sans dépasser sur la droite de la page.
• On ne peut pas cliquer sur les liens du texte dans les bulles, parce qu'elles disparaissent. Il faudrait trouver un autre fonctionnement (par exemple, qu'une bulle ne disparaisse jamais tant que le curseur est dessus).
• Dans le modèle {{Infographie légende}}, quand on modifie le paramètre "puce", ça déplace ladite puce, au lieu de simplement la redimensionner ! Afin que tu constates ce dysfonctionnement, je l'ai laissé pour Capri au XXe siècle, où puce=2 (ce qui met l'île en pleine mer Méditerranée), alors qu'au Ier et au XVIIe siècles puce=3.
• Une fonction qui serait bien utile : pouvoir visualiser en même temps toutes les bulles d'une époque (par exemple, par un double-clic sur le bouton du siècle, ou sur le fond de carte). D'une part ça permettrait d'avoir une vue d'ensemble des informations relatives à cette époque ; et d'autre part ce serait très utile au moment de la création de l'infographie, pour éviter que des bulles se chevauchent.
• Est-il possible de faire apparaître un bouton avec une bulle identique à différentes époques ? Par exemple, Athènes et sa bulle actuelle pourrait apparaître à la fois au VIe et au Ve siècle avant notre ère (bien sûr, on peut toujours recopier le code du bouton et de la bulle en changeant juste le siècle, mais c'est lourd, et pas très élégant).
• Pour les étourdis : ce serait bien que le bouton externe sélectionné (le siècle) s'affiche différemment — en gras, ou dans une nuance de couleur différente.

Caprineus 21 juin 2010 à 18:47 (GMT)

Voila tu as tout compris ! Pour les ids je ne sais pas dire encore jusqu'où le fonctionnement est correct, il y a à chaque fois des imprévus : à découvrir à l'usage. Je n'ai pas pensé à tester le nommage en clair (avec le nom) : attention toutefois aux caractères accentués et à bien faire en sorte que le nom soit hors champs sélectif (au delà des premiers caractères significatifs). Un détail que j'ai oublié de mentionner : l'id doit être unique à l'intérieur de chaque type (bouton, légende, popup ou aire).

• Je ne comprend pas ce que tu veux dire par dépasser sur la droite ? Normalement, si la largeur du cadre est plus grande que la fenêtre, alors un ascenseur horizontal devrait apparaitre. Les dimensions du cadre sont définies dans le modèle {{Infographie}} (largeur, hauteur) et sont modifiables. Attention au rapport largeur/hauteur afin de conserver les proportions de l'image originale. Mais il est probablement possible de faire en sorte que la largeur s'adapte à l'espace disponible, à voir.
• Comportement modifié : les bulles s'éteignent quand on clique dessus (en dehors d'un lien bien sûr). Voir si c'est plus pratique.
• Actuellement seule la taille 3 est définie pour les puces : à faire...
• Difficile : il n'y a pas de lien entre le bouton externe et la bulle finale quand on passe par une légende-bouton intermédiaire. Au moment de la création il est possible d'ajouter un bouton de test qui commande directement les bulles.
• Ça devrait être possible en utilisant pour le bouton -V un id à sélection multiple : id=-05,-06_athenes. En revanche une bulle (ou un ensemble de bulles) est associée à une légende-bouton comme tu l'as constaté pour Capri : si on veut plusieurs jeux de bulles pour une même légende il est nécessaire de dupliquer la légende avec des ids différents.
• Oui, c'est en cours.

Bon courage ! - Pinocchio 21 juin 2010 à 22:57 (GMT)

Quelques mises à jour :

• initialisation de la largeur du cadre en fonction de l'espace disponible dans la fenêtre, optionnelle si le paramètre largeur=auto dans la configuration (modèle Infographie). À tester, sans garantie pour les limites extrêmes (fenêtre minuscule);
• le bouton externe sélectionné reste visuellement enfoncé ;
• possibilité d'afficher l'ensemble des bulles liées à un bouton (en fait c'était pas si difficile…) en appuyant sur la touche Ctrl + clic sur le bouton.
• Pour les puces de taille variable, c'est plus compliqué…

Pinocchio 22 juin 2010 à 19:56 (GMT)

Je viens de rajouter une dizaine de lieux intéressants, tous dans le XVe siècle avant notre ère (ce sera plus commode de venir les chercher là ensuite pour les mettre à la bonne époque). Il y en a au moins autant à rajouter plus tard.

Toutes les remarques sont bienvenues quant à une éventuelle imprécision dans la localisation de certaines villes.

J'ai fini par "enfermer" les Celtes dans le VIe siècle avant notre ère, tellement ils m'énervaient ! Il faudrait que les aires se comportent à peu près comme les légendes, la bulle n'apparaissant que lorsqu'on clique dessus. (D'ailleurs, ce serait très utile de pouvoir visualiser les aires, au moins pendant la phase de création/modification.)

A propos, comment se comporte une légende qui est au même endroit qu'une aire (par exemple Marseille et les Celtes) ? Y a-t-il conflit ou empêchement ?

Désolé, mais la largeur=auto fonctionne mal. D'une part elle ne réduit pas vraiment la carte à la largeur du texte : elle ne réduit que la fenêtre, en faisant apparaître des ascenseurs. Mais surtout, les lieux ne suivent pas la carte (en réalité, j'ai l'impression que les coordonnées des lieux sont réduites correctement, et c'est la carte qui ne suit pas, comme je le dis plus haut).

Quant au bouton externe, je ne vois aucun changement (en fait, pour moi, il a la même apparence qu'il soit enfoncé ou pas – il y a juste le texte qui bouge un peu).

Décidément, je n'ai pas de chance ! Le Ctrl + clic sur le bouton -VIe s. ne fonctionne pas non plus... Le navigateur serait-il en cause ?

Caprineus 22 juin 2010 à 20:39 (GMT)

Je viens de constater (et modifier) en effet une différence de comportement de Opéra à propos de la largeur occupée par l'image cachée (habituellement j'utilise Firefox). Les ascenseurs ne devraient plus s'afficher dans la fenêtre principale quand on zoome. Pour le reste (bouton enfoncé et Ctrl+clic) es-tu sûr d'avoir rechargé le cache du navigateur ? Je viens de tester avec Opéra (v.10.54) et ça fonctionne.

Oui les aires posent problème : elles ne sont pas cliquable parce que invisibles. Peut-être en les rendant légèrement visibles ? Au départ leur rôle était d'encadrer des légendes inertes incluses dans une carte non muette pour les rendre dynamiques. L'autre problème est qu'elles sont forcément rectangulaires, ce qui n'est pas forcément esthétique si elles sont visibles, même si on peut juxtaposer plusieurs surfaces carrées pour faire une forme complexe.

Pinocchio 22 juin 2010 à 22:53 (GMT)

La "banque" de lieux méditerranéens (toujours au -XVe siècle) s'est encore un peu enrichie. Ça commence à prendre forme : il y a maintenant autant de villes que de siècles. Et il reste beaucoup à faire – en particulier toute la Grèce antique !

Finalement, créer une infographie de ce type est un gros travail. Mais heureusement, c'est très intéressant – et on a tout le temps devant nous...

Ctrl + clic sur un bouton de siècle fonctionne bien.

Un bouton enfoncé reste enfoncé, c'est vrai, mais il faut vraiment le savoir, tellement c'est peu visible ! (du moins chez moi)

largeur=auto fonctionne très bien maintenant, avec différentes tailles d'affichage. Mais contrairement à ce que tu disais plus haut, il y a toujours deux jeux d'ascenseurs quand on zoome : un pour la fenêtre principale, et un pour la carte.

A noter que le positionnement des bulles est devenu assez bizarre, et ne paraît pas correspondre aux coordonnées indiquées. D'ailleurs, ne vaudrait-il pas mieux positionner chaque bulle par rapport à son bouton, plutôt que par rapport aux bords de la fenêtre ?

Quant aux aires, je n'en vois plus trop l'utilité dans une infographie de ce type : il semble beaucoup plus commode de créer pour les régions des boutons de différentes tailles (sans puces), comme je l'ai fait pour les Djebala (dans le nord du Maroc). Les aires, ça pourra être utile pour créer des boutons sur des images plus géométriques qu'une carte (par exemple, sur un bandeau chronologique – il faudra en essayer un, représentant la vie d'une personne ou l'histoire d'un pays).

Caprineus 23 juin 2010 à 22:31 (GMT)

Positionnement des bulles modifié pour test. Les coordonnées sont désormais comptées relativement à l'image de fond et non plus au cadre (ce qui devrait résoudre les derniers problèmes d'ascenseurs). En effet, maintenant que la largeur du cadre peut être variable en fonction de l'espace disponible (largeur=auto), les coordonnées d'affichage des bulles relatives au cadre n'ont plus de sens. Ce choix avait été fait pour assurer qu'une bulle ne s'affichait pas à l'extérieur de la zone visible en mode zoom, ce qui n'est plus garanti, c'est l'inconvénient. Il est préférable d'indiquer des valeurs relatives en % et non plus en px. Quant au positionnement des bulles par rapport à leur légende-bouton, c'est plus compliqué : elles ne sont pas toutes forcément liées à une légende, et de plus il faudrait quand même prévoir des coordonnées pour le décalage en + ou en -.

Le bouton enfoncé devrait être (un peu) plus visibles. Là aussi c'est variable selon le navigateur.

Pinocchio 24 juin 2010 à 21:40 (GMT)

Je signale que ctrl+clic a une signification particulière sur Mac : il s'agit de l'équivalent du clic droit. Bref, en faisant ctrl+clic sur un bouton de siècle, j'obtiens un menu contextuel... Lascar 25 juin 2010 à 16:55 (GMT)

Merci pour l'info, je l'ignorais. On peut remplacer par Shift-clic ou Alt-clic : ces combinaisons sont-elles libres ? - Pinocchio 25 juin 2010 à 18:27 (GMT)