BoyWiki:Agora/3 janvier 2013

Agora/3 janvier 2013

Recherche d'une présentation de galerie

Sur la page Albert Anker (galerie), j'ai fait trois tentatives de mise en page d'une galerie d'images. Chacune a ses défauts : manifestement la meilleure solution reste à trouver.

Je n'ai pas repris la même présentation que, par exemple, dans Claude Joseph Bail (galerie), où il y avait 28 images seulement (ce qui est déjà beaucoup). Celle d'Anker devrait atteindre ou même dépasser les 60 images : il faut donc de plus petites images, rangées par lignes de 3 ou 4, et non plus de 2 seulement.

Le premier essai (tableau) est le plus facile. Inconvénients :

• la largeur des images reste toujours à peu près la même, limitée par la taille des cellules
• en cas d'affichage haute définition, il y a de grands vides entre les images (pas esthétique)

Le deuxième essai (tableau + modèle Image relative) donne un tableau systématiquement trop large, même en haute définition.

Le troisième essai (modèle Image relative seul) est le plus souple, mais il est presque impossible de faire tenir trois images sur une même ligne : celle de droite est décalée vers le bas, sans doute gênée par celle du centre. Quant à en aligner 4, ça semble complètement impossible, puisque les seuls paramètres de position sont "gauche", "centre" et "droite".

Peut-être n'ai-je pas su mettre les bons paramètres...

N'a-t-on jamais trouvé un système pour aligner simplement des images les unes à la suite des autres, comme on met des mots dans un texte, en laissant le logiciel décider de l'endroit où il faut passer à la ligne suivante ?

Pour ce soir je laisse les choses telles quelles, ne sachant trop comment améliorer les choses. Pinocchio, si tu as des idées, n'hésite pas à faire de nouveaux essais, même si ça chamboule tout : cette page n'est qu'une ébauche très provisoire.

Caprineus 4 janvier 2013 à 00:12 (GMT)

J'ai retiré les tableaux qui troublaient la largeur de page et faisaient apparaitre des ascenseurs.

Mais si ! Nativement pour html, les images sont considérées comme du texte, par exemple :

Une image et une autre et encore une ...

Mais ce n'est plus aussi simple si on veut placer l'image dans un cadre de taille variable, y ajouter un titre, un commentaire, un lien vers l'image originale...

Le positionnement des flottants (c'est le cas de {{image relative}}) est parfois d'humeur primesautière quand ils sont nombreux ! Le {{clr}} n'est pas indispensable après chaque rangée, il permet d'arrêter l'effet flottant et de repartir sur une ligne horizontale : un seul est nécessaire, celui placé tout à la fin des images. On peut en insérer d'autres pour figer une organisation. L'option droite ou gauche doit être vue comme le sens d'empilement des images les unes après les autres, et non comme un ordre de répartition dans la page dès lors que les images sont placées cote à cote. En particulier l'option centre ne doit pas être utilisée dans ce cas. La première image à gauche va le long de la marge ; la seconde toujours à gauche vient se placer le long de la première, et ainsi de suite tant qu'il reste de la place sur la même rangée. Il peut être intéressant de ranger les images par ordre de hauteur, ainsi le rang suivant s'imbrique mieux sous le précédent. Pour casser l'effet empilement vertical il peut être utile de changer l'ordre gauche ou droite d'un rang à l'autre.

Reste le problème du poids et du temps de chargement de la page qui ne sont pas négligeables.

Pinocchio 4 janvier 2013 à 16:00 (GMT)

Bon, je comprends mieux, merci de ces explications. Il n'empêche que la logique informatique n'est pas toujours compatible avec la logique humaine — sans doute parce que nous sommes plus pragmatiques que des logiciels, c'est ce qui nous induit souvent en "erreur".

L'idée d'occuper au maximum l'espace de la page, comme des tableaux qui couvriraient entièrement un mur, est un choix intéressant, bien que peu courant en France (et inimaginable au Japon...). Je me rappelle avoir été frappé d'une telle disposition lors d'une lointaine visite en Italie — peut-être ont-ils tant d'oeuvres d'art là-bas qu'ils ne savent plus où les mettre !

Le poids est un problème aujourd'hui, mais ne le sera plus demain. Dire qu'il y a dix ans à peine j'étais tout content d'avoir du 56K ! Idem pour le temps, qui malgré tout n'est pas si long que ça : même à travers TOR les pages s'affichent assez vite. Et puis, rester parfois quelques secondes supplémentaires devant une oeuvre d'art, en attendant que la suivante se charge, ça apprend la patience, voire la contemplation...

Caprineus 4 janvier 2013 à 22:58 (GMT)

Bien sûr ce n'est qu'une façon de ranger qui a pour moi l'avantage de casser les alignements. Pour recréer des alignements horizontaux il suffit de remettre les {{clr}} entre chaque rang. Mais pour des alignements verticaux c'est plus difficile. Sinon il existe un outil souvent appelé visionneuse sur de nombreux sites, qui n'affiche qu'une image en grand à la fois et toutes les autres en miniatures que l'on peut faire défiler. L'inconvénient est qu'il nécessite du code pour fonctionner.

Pinocchio 5 janvier 2013 à 08:09 (GMT)

Il est sans doute bon de varier les modes de présentation, ça fait partie de l'animation d'un site. La disposition que tu suggères a en effet l'intérêt de rompre la monotonie des alignements.

Qu'entends-tu par « L'inconvénient est qu'il nécessite du code pour fonctionner » ? Risque de piratage du code et de modification par un malveillant ? (Certains prennent peur et évoquent cette possibilité dès qu'il y a du javascript ; mais n'étant pas spécialiste, je n'ai jamais su s'il s'agissait d'un vrai risque...)

Caprineus 5 janvier 2013 à 14:25 (GMT)

Le principal inconvénient est que les utilisateurs qui ont désactivé dans leur navigateur l'utilisation des scripts, ne voient rien. Si c'est acceptable, à mon avis, pour des options de présentation ou des gadgets, ça l'est moins pour des contenus. Pinocchio 6 janvier 2013 à 23:40 (GMT)

Une galerie sans script à tester :

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

Oui, cette galerie est intéressante et d'utilisation très intuitive. Reste à déterminer dans quels cas elle est préférable à d'autres sortes de présentation.

A mon goût, il serait peut-être plus esthétique de supprimer le fond gris (le mettre en blanc ou transparent ?).

Est-il possible d'insérer du texte pour chaque image ? (titre, auteur, date, lieu, etc.)

Une possibilité de présentation verticale serait bienvenue. Mais si ça ne peut pas se faire dans le modèle, on pourra toujours empiler des modèles comme ça :

{{Image galerie|ANKER Albert 1858 Der Pfeifenschnitzer 1184x1575.jpg}}
{{Image galerie|ANKER Albert 1861 Sonntagnachmittag (Detail) 612x522.jpg}}
{{Image galerie|ANKER Albert 1858 Der Pfeifenschnitzer 1184x1575.jpg}}

à condition d'avoir un paramètre permettant d'afficher l'image à droite de la miniature. J'imagine par exemple un tableau énumérant les œuvres avec leurs caractéristiques, un peu comme celui-ci.

Caprineus 8 janvier 2013 à 12:54 (GMT)

Je viens de tester la galerie dans une fenêtre étroite, qui donne une idée de ce que serait une suite d'une vingtaine d'œuvres. Là, pour le coup, ce n'est pas très intuitif, ni commode : les miniatures s'affichent sur deux lignes, et il faut aller chercher la deuxième en utilisant un ascenseur.

S'il n'est pas possible de faire défiler la galerie sur une seule ligne sans utiliser de script, il vaudrait sans doute mieux afficher d'emblée les deux lignes de miniatures, sans ascenseur donc.

Caprineus 8 janvier 2013 à 13:07 (GMT)

Insérer du texte me semble difficile, peut-être possible par dessus l'image ?

Le nombre de rangées de miniatures dépend de leur quantité et de leur tailles. Une option a été ajoutée pour agrandir la hauteur de fenêtre des miniatures.

Une présentation verticale comparable est possible mais avec un nouveau modèle, le nombre des paramètres à modifier est trop grand pour une simple option. Mais ce modèle n'est pas adapté à l'insertion dans un tableau. Pour une présentation en forme de tableau tu peux utiliser des miniatures ordinaires (statiques) et utiliser le modèle {{Image lien}} sur le titre par exemple, pour faire apparaitre une version plus large de la même image. Pinocchio 8 janvier 2013 à 18:20 (GMT)

Un brouillon de ton tableau avec liens "surgissants" :

Bild	Titel	Jahr	Grösse/Material	Eigentümer/Sammlung
	Die Knöchelspieler	1864	Oel auf Leinwand
	Mädchen die Hühner fütternd	1865	66 x 51 cm Öl auf Leinwand	Musée d' art et histoire, Neuchâtel
	Die Bauern und die Zeitung	1867	64 x 80,5 cm Öl auf Leinwand	Privatbesitz

J'aime bien ces grandes images qui surgissent avec une apparence de léger relief. Le seul inconvénient, c'est qu'elles apparaissent quand on passe sur le nom de l'œuvre, et non sur la miniature. C'est gênant pour deux raisons :

• intuitivement on dirige plutôt le curseur vers les miniatures pour en augmenter l'image — l'utilisateur est donc pris à contrepied par ce nouveau fonctionnement ;
• surtout, de nombreuses œuvres auront une page dédiée, et un tel tableau est particulièrement opportun pour rediriger le lecteur vers ces pages — ce qui n'est plus possible si le lien appelle l'image.

Mais à part ça l'idée générale est très séduisante...

Caprineus 8 janvier 2013 à 22:10 (GMT)

Un autre test : Pinocchio 9 janvier 2013 à 17:10 (GMT)

Bild	Titel	Jahr	Grösse/Material	Eigentümer/Sammlung
	Die Knöchelspieler	1864	Oel auf Leinwand
	Mädchen die Hühner fütternd	1865	66 x 51 cm Öl auf Leinwand	Musée d' art et histoire, Neuchâtel
	Die Bauern und die Zeitung	1867	64 x 80,5 cm Öl auf Leinwand	Privatbesitz

Ah oui ! Voilà une présentation qui est vraiment adaptée pour présenter toute l'œuvre d'un artiste. C'est clair, pratique et esthétique. On va voir ce que ça donne pour Albert Anker...

Un point intéressant est qu'on peut moduler le zoom en fonction des images, plus ou moins intéressantes, et aussi plus ou moins nombreuses — pour Anker, par exemple, le nombre d'œuvres approchant la centaine, il vaudra peut-être mieux diminuer l'ensemble des zooms.

Histoire que je comprenne un peu ce que je fais : que veulent dire (et à quoi servent) les codes « prettytable », « sortable », « wikitable », « unsortable », « width="110px" », « width="175px" » ?

Le paramètre de taille d'une image doit-il être |400px ou |x400px (tu as utilisé les deux) ? Je suppose qu'il s'agit de la hauteur.

Un petit perfectionnement qui serait bienvenu, s'il est possible : empêcher l'image zoomée de sortir de la fenêtre. (S'il faut un script, ça peut quand même être acceptable, puisqu'il s'agit simplement d'un confort de visionnage.)

Caprineus 9 janvier 2013 à 21:53 (GMT)

Un modèle a été créé pour simplifier (un peu). Il y a un problème pour l'instant avec le taux de zoom qui n'est pas modulable. Pour le tableau, j'ai simplement recopié celui de ton lien vers Anker, tu peux utiliser un tableau habituel : prettytable ne sert à rien et sortable ajoute une option de tri sur les colonnes. Le x400px indique bien la hauteur, comme dans 600x400, mais ici il n'indique pas la taille de l'image mais seulement son poids maxi.

Pinocchio 9 janvier 2013 à 23:39 (GMT)

La première période de la page Albert Anker (galerie) est faite. Ce système de tableau permet de donner de façon claire et agréable un grand nombre d'informations. N'ayant pas encore vu ton nouveau modèle, je ne l'ai pas utilisé — ce sera sans doute pour demain.

J'ai un doute sur le fonctionnement du zoom : est-ce un simple agrandissement de la miniature, ou vraiment une image de 400 pixels avec définition maximum ? Certaines images zoomées paraissent en effet légèrement floues.

Pas sûr qu'il faille garder la fonction « sortable » : elle n'offre pas d'intérêt pour les titres (puisque beaucoup commencent par un article), ni pour les dimensions (tout faux !), et guère non plus pour les dates ("vers 1864" étant classé après "1868"). Quant à « prettytable », en effet on peut le supprimer sans dommage. Mais je n'ai jamais su ce que voulait dire exactement « wikitable »...

(Soit dit en passant, nous sommes en train de mettre en place là un document unique au monde sur les garçons dans l'œuvre d'Albert Anker ! Toutes ces choses sont actuellement éparpillées dans une foultitude de sites, souvent difficiles d'accès, ou d'utilisation problématique, et avec des qualités d'image très aléatoires. Bref, désormais les amateurs et les spécialistes de l'art suisse, pédérastes ou pas, seront bien obligés de rendre visite à BoyWiki — et Google les y aidera).

Caprineus 10 janvier 2013 à 00:20 (GMT)

En fait il ne s'agit pas d'un zoom, la vignette n'est pas grossie, mais l'inverse, l'image de grande taille est réduite pour créer la vignette. La taille native et celle de l'image transférée doivent être suffisantes pour assurer l'affichage zoomé. Certaines images ont une définition insuffisante comme Die Taufe et sont donc floues.

Wikitable est le mot-clé associé au style (classe) appliqué au tableau.

Pinocchio 10 janvier 2013 à 13:40 (GMT)

Trop occupé ailleurs (dur d'être au four et au moulin !), je n'ai pas eu le temps de revenir sur ces tableaux depuis deux jours. Merci de les avoir améliorés, et en particulier d'avoir supprimé l'en-tête, dont je ne savais pas comment me débarrasser tout en gardant des réglages de largeur.

Pour moi, cependant, la largeur de la première colonne pose maintenant problème (au moins pour les deux premiers tableaux). Je l'avais réglée à 270 pixels parce que c'était nécessaire pour contenir les tableaux les plus longs, en particulier "Les baigneurs". Avec le réglage que tu as fait à 200 pixels, je vois plusieurs tableaux qui débordent sur la colonne voisine, recouvrant en partie le texte. Mais pour l'instant je n'y touche pas, afin que que tu vérifies si tu constates le même problème avec ton affichage, qui est peut-être différent du mien.

Tu as bien fait de remplacer les span par des images zoom. J'attendais, pour le faire, que tu aies fini de mettre au point le modèle.

N'as-tu pas diminué l'affichage du zoom ? J'ai l'impression qu'il est maintenant à 400 pixels (de haut), alors qu'il était plus important avant (600 ?). Ce qui expliquerait que j'aie eu l'impression d'un manque de netteté : si l'image était chargée en 400 et qu'elle s'affichait en 600, elle perdait forcément en qualité. Maintenant ça me paraît plus petit mais plus net (dans quelques cas comme "Le baptême", en effet, l'image est agrandie, et donc le flou est inévitable, mais c'est finalement mieux que de visualiser une image trop petite).

Caprineus 13 janvier 2013 à 23:08 (GMT)

Chez moi 200px suffisent, mais la représentation varie effectivement avec la définition des écrans entre autre. C'est l'inconvénient d'utiliser des valeurs absolues. J'ai donc supprimé la taille imposée à la colonne et l'ai remplacée par une dimension plus large occupée par la vignette. Il suffit d'affecter cette option à seulement une vignette d'un même tableau (la plus large) pour modifier toute la colonne. L'intérêt est que les vignettes sont dimensionnées en em (équivaut 1 caractère moyen), les fontes étant plus ou moins proportionnées à la taille de l'écran.

Je ne me souviens plus de la valeur du zoom initial. Actuellement il est fixé par défaut à 3x la vignette, laquelle a une taille initiale relative (en em). Les images sont transférées en 600px de haut par défaut (on ne peut indiquer que des px), sauf pour celles qui font nativement moins de 600px.

Pinocchio 14 janvier 2013 à 11:56 (GMT)