Pages :
Bonjour à tous,

Voilà, suite à mes errances de ces derniers mois autour de la constitution d'une galerie photos je me suis décider à en faire une version auto installable.

C'est ça en fait :
Galerie photos php / javascript

Et du coup j'essaye de faire un petit design de l'affaire. Ma version de test est ici :

Démonstration de la galerie

Alors avant de faire pire je veux bien des critiques pour m'aider...

A vot' bon coeur quoi Smiley lol


Merci Smiley smile
Modifié par clb56 (01 Dec 2006 - 16:25)
en vrac:

- je n'aime pas torp le fait que le grand cadre aie un effet "blur" et l'autre non. je trouve ca plus joli sans blur.

- les coins du cadre bleu n'ont pas le meme orange que le background du grand cadre... " c'est pas raccord !! " dirait-on dans le milieu du cinema.

- l'harmonie des couleurs... je suis pas graphiste, mais je le trouve pas top. as-tu pensé a ca ou ca ??

- quand on est sur le panorama de la galerie, et quon regarde la source, il y a un petit probleme de semantique : le titre "panorama" et les titres des series sont tous des h3 ...

- j'aime bien les liens assez sobre en dessous d'une serie ("precedente", "suivante", "panorama"

- je rajouterais peut etre en bas les liens "page d'accueil" et le "panorama" de la galerie que tu mets en haut pres du texte d'explication. avec un style discret.

- j'ai tendance a ne pas aimer les liens avec le style par defaut (bleu, violet quand :visited ...)

- ton soft est chouette, sans frioriture, je garde l'adresse en tete...

opi
Merci, merci, merci

Trop cool quelqu'un qui répond !!! Smiley smile

Opi a écrit :

- je n'aime pas torp le fait que le grand cadre aie un effet "blur" et l'autre non. je trouve ca plus joli sans blur.

Smiley confused

J'avais fait ça pour affirmer ma personnalité artistique Smiley biggol

Opi a écrit :

- les coins du cadre bleu n'ont pas le meme orange que le background du grand cadre... " c'est pas raccord !! " dirait-on dans le milieu du cinema.

Ah oui zut j'ai fait des modifs en oubliant de m'occuper de ces coins là.

Opi a écrit :

- je rajouterais peut etre en bas les liens "page d'accueil" et le "panorama" de la galerie que tu mets en haut pres du texte d'explication. avec un style discret.


Ah là je ne comprends pas, ce que tu demandes est ce qui existe déjà. que ce soit en terme de flux (enchainement des liens pas la touche tab) ou visuellement.

a écrit :

- quand on est sur le panorama de la galerie, et quon regarde la source, il y a un petit probleme de semantique : le titre "panorama" et les titres des series sont tous des h3 ...


La honte !!!!!!!!!!!!!!!!!!!!!!!!
Suis mort sur ce coup là Smiley bawling
Juste le temps de me mettre un coup de pied où je pense et je corrige.
Salut,

rapidement, je suis du même avis pour le blur du gros cadre qui fait crados , essaye plutôt un contour d'1px ou une ombre nette...

Le cadre intérieure, est arrondi, mais on en vois ses coins ! ! ! comme si c'était du png avec transparence sous IE, sauf que je suis avec Firefox.

Voilà pour le moment, mais je repasse...car j'ai rien testé, c'est un coup d'oeil à chaud...

Smiley smile
Bonsoir Clb...

Bon pour faire mon chieur...

Les remarques ci-dessous concernant essentiellement le versant "accessibilité" des images :

1. Je trouve étrange le traitement "automatique" des attributs title et alt des vignettes.

Lorsqu'on utilise une image lien on à le choix suivant, concernant la gestion des attributs alt et title :
- alt seul
- alt et title identique.
Le choix d'utiliser un alt et un title différent est très problématique car on ne sait pas, selon l'aide technique et le paramétrage de l'utilisateur lequel de ces deux attributs va être effectivement restitué.

La solution la plus logique et la plus robuste est d'utiliser un alt et un title identique.

2. Pourquoi ce choix d'utiliser un contenu incrémental pour le title et le alt ?
Pourquoi ne pas demander, en plus de la description, la saisie d'un titre court pour chaque image ce qui permettrait de linker sur ce titre.

3. Lorsque je désactive javascript et que je clique sur une vignette, je linke sur le fichier image.
Ce n'est pas logique avec le traitement javascript activé qui me donne accès à l'image et sa description associée.

Bon, en realité, pour être accessible, la galerie devrait fournir le traitement php équivalent au wiewer javascripté et présentant les même éléments : notamment la pagination et la description.

Jean-pierre
Modifié par jpv (04 Dec 2006 - 00:25)
Salut jpv,

sur le point 1, oui je me suis moi même posé la question du contenu du title sur les vignettes et je dois dire que que c'est plus une coquetterie techniciste qu'une vraie réflexion qui donne le résultat que tu relèves.
Dans ce que j'ai fait le title n'a en fait à peu près aucun intérêt et je ferais sans doute mieux de tenir compte de cela. mais c'est dur de grandir Smiley lol

sur le point 2, ben en fait je n'ai pas compris ce que tu as dit, c'est un problème de vocabulaire, je ne comprend pas les termes que tu emploies.

sur le point 3, et notamment ceci :
a écrit :

Bon, en realité, pour être accessible, la galerie devrait fournir le traitement php équivalent au wiewer javascripté et présentant les même éléments : notamment la pagination et la description.


Ah, c'est très embêtant. J'ai la prétention justement d'avoir régler la question de l'accès à tous les contenus (fichiers images, textes associés).

Enfin quand je dis prétention je veux dire que j'ai réellement travailler là dessus.

Simplement les choses peuvent paraitre un peu compliqué quand on compare directement la situation avec ou sans js. Je pense néanmoins que c'est beaucoup plus clair dans le cas d'une navigation canonique (soit js est actif soit il est inactif et pas l'un puis l'autre puis l'un puis l'autre etc...)

Donc soit js est actif et dans ce cas le texte accompagnant la photo est accessible en visionnant l'image.

Soit js est inactif et le texte est accessible en tant qu'il est associé en dur dans le document directement aux vignettes.

J'ai la faiblesse de penser que par rapport à beaucoup de galeries javascript existantes où le texte associé n'existe en cas de js inactif que comme title des vignettes, cela constitue une avancée positive enterme d'accessibilté des contenu.

Les éléments de ma réflexion sur ce point se trouvent ici :
http://www.clb56.fr/test_php_js/etude_galerie_js/
Modifié par clb56 (04 Dec 2006 - 01:36)
a écrit :

Dans ce que j'ai fait le title n'a en fait à peu près aucun intérêt et je ferais sans doute mieux de tenir compte de cela. mais c'est dur de grandir...

et

sur le point 2, ben en fait je n'ai pas compris ce que tu as dit, c'est un problème de vocabulaire, je ne comprend pas les termes que tu emploies.



Le traitement des title et des alt est fondé sur le n° de l'image, généré automatiquement par ta boucle d'affichage.

Au delà de la problématique d'un title et d'un alt identique, ce que je te recommandes, la question que je me posais c'est : Pourquoi au lieu de ce traitement automatique ne pas utiliser un "vrai" titre d'image comme contenu du alt et du title des vignettes ?

Cela aiderai notablement à l'interprétation de la liste des liens des vignettes hors contexte, par exemple au travers des fonctionnalités d'un lecteur d'écran...

C'est un des points sur lesquels je tiquerais fortement en audit : certes tes liens sont "uniques" mais mériteraient d'être beaucoup plus "pertinent".

Un vrai titre d'image (la pertinence in-fine étant à la charge de l'auteur) permettrait sans doute à la liste des liens d'être beaucoup plus utilisable.


a écrit :
Ah, c'est très embêtant. J'ai la prétention justement d'avoir régler la question de l'accès à tous les contenus (fichiers images, textes associés).


Oui... et non :

Bien sur, en maintenant la description des images sur la liste des vignettes tu restitues l'ensemble des informations sur les images...

Mais...

Premier point :

Lorsque javascript est désactivé le lien "voir l'image" est, dans ce contexte, un lien de téléchargement, je devrais donc y trouver le poids de l'image et ses dimensions, comme pour les liens "photo disponible en grand format". Dans ce contexte ces liens sont fonctionnellement identiques et devraient être traités de la même manière.


Second point :

Lorsqu'on implémente un procédé javascript on doit en fournir un équivalent pour le contenu et les fonctionnalités.

Si je navigue sans javascript je ne vais pas pouvoir visualiser les images agrandies en succession, comme sur le wiewer, ce n'est pas normal.


Au delà de ça j'aurais une réflexion plus personnelle sur le choix ergonomique du fonctionnement de la galerie :

Je comprends bien l'idée d'utiliser les descriptions des images au niveau des vignettes.

Mais en même temps je trouve ça très ambigue, les liens indiquent "voir l'image et son commentaire", oui mais lequel ? un autre ?, le même ?...

Si je navigue avec un lecteur d'écran je vais me poser cette question, puisque j'ai accès à une première description, le "commentaire" indiqué dans le lien est forcément différent, c'est logique.

Ce n'est qu'après avoir visualisé quelques images dans le wiewer que je vais comprendre que le "commentaire" est toujours identique à la "description" des vignettes...

En revanche si je navigue au clavier ou à la souris, là pas de soucis, c'est logique, je vois bien l'image et son commentaire.

Du coup, de manière très paradoxale, cette "adaptation" qui consiste à implémenter les description d'images au niveau des vignettes créer une ambiguité pour ceux là même qu'elle est censée aider...

Maintenant imagines que tu supprimes simplement les descriptions au niveau des vignettes et que tu implémentes des titres pertinents sur tes images :

Le lien "voir la photo - titre et son commentaire" devient logique pour tout le monde.

Notamment, si je suis avec un lecteur d'écran et si je veux accéder au commentaire de l'image je suis bien obligé de cliquer sur la vignette, je me retrouve stricto-sensu dans la même situation que tout le monde...

Tous mes utilisateurs naviguent et utilisent de la même manière la galerie, obtiennent le même résultat et de la même manière : je suis accessible.

Bon c'est une réflexion à l'arrache mais je persistes à penser que pour des utilisateurs de lecteurs d'écrans il y à une vraie ambiguité là où on ne l'attends pas...

D'un coté je comprends l'idée qui est de dire : en implémentant la description des images au niveau des vignettes je permets à des utilisateurs de lecteurs d'écrans d'éviter de cliquer et de charger l'image agrandie pour accéder au commentaire.

Mais, de l'autre coté, cela nécessite une compréhension à postériori : "Les commentaires sont identiques sur la vignette et sur l'image agrandie" ce qui génère une ambiguitée.

Du coup, ce qu'on économise d'un coté on le perds de l'autre...

Dernier problème :

Je n'ai pas la possibilité d'implémenter une description longue sur les images.

Dans la perspective de faire une galerie "accessible" je vais vouloir décrire les images en détails, de manière factuelle, pour lui permettre de pouvoir choisir celle dont il à besoin.

Du coup je me demande si le "commentaire" implémentée au niveau des vignettes ne joue pas, dans le projet, un double rôle : c'est à la fois une espèce de description logue de l'image, mais dans le même temps, comme tu le reprends dans le pied du wiever ce ne peut pas être une vraie description longue...

On peut donc se poser la question de la pertinence du rôle associée à ce "commentaire".

Du coup je me demande si la bonne structure ne serait pas plus simplement :

- Un titre pertinent sur le lien "vol d'oiseau libre"
- Un "commentaire" (on va voir son utilisation tout de suite)
- Une "description longue et détaillé" : "L'image représente, un oiseau en train de voler sur fond de ciel à dominante bleue avec quelques nuages" ou quelque chose de ce genre.

Dans ce cas là, l'image étant définie par des champs textes clairement identifié on peut imaginer des structures "logiques" :

Par exemple :

- Le titre comme contenu du title et du alt du lien de la vignette

- Un commentaire qui serait, pour le coup, un vrai suplément au titre, ce qui pourrait rendre pertinent son implémentation au niveau des vignettes (encore que, mais bon, faut voir....)

- La description longue et détaillé, à usage des lecteurs d'écrans, implémentée en pied du wiewer en légende cachée.

De cette manière, quelque soit les scénarios d'usage et le rôle dévolue à champs "commentaire", tous mes utilisateurs seraient dans un fonctionnement identique et mes utilisateurs de lecteurs d'écrans disposeraient, en légende cachée, d'une information "supplémentaire" ce qui "casserais" l'ambiguité du titre du lien.

Bon je disais quelque soit les scénarios d'usage, pour être vraie cela impliquerais également qu'un dispositif php reprennent les fonctionnalités du wiewer...

Oui, je sais, je fous un peut le bazard, mais bon... je te sais exigeant... Smiley smile

Jean-pierre

Ps : Désolé si cette réflexion chamboule ton idée de départ, mais je suis certain que tu me pardonneras... Smiley cligne
Modifié par jpv (04 Dec 2006 - 02:46)
Merci beaucoup pour toutes tes remarques, il y a beaucoup à creuser.

Certaine chose me paraissent assez claires et sans doutes pas trop difficiles à mettre en oeuvres, d'autres points me paraissent beaucoup plus complexes notamment ce qui concerne le title des liens.
Et je ne parle pas de mes sottises noobiesques Smiley lol mais plutôt du fait que le traitement que tu souhaites des liens repose je pense (en raison d'autres propos que tu as tenu) sur la nécessité de considérer ceux ci d'un point de vue complètement décontextualisé.
Dans ce que j'ai fait, dans la mesure où chaque lien est associé dans un même item de liste à un texte en disant plus et mieux qu'un title, j'avais tendance à considérer que le dispositif était suffisant et que la question du title du coup devenait un peu accessoire.
J'imagine bien que sur ce point je vais me faire remonter lers bretelles. Mais je dois dire que combiner une description conséquente avec un title pertinent ben c'est pas facile, facile... Surtout dans un dispositif automatisé. Affaire à suivre.


Sur un point je ne suis pas vraiment d'accord :
jpv a écrit :

Lorsqu'on implémente un procédé javascript on doit en fournir un équivalent pour le contenu et les fonctionnalités.


Autant c'est sans conteste concernant le contenu autant cela doit être un peu relativisé concernant les fonctionalités.

Je serai bien le premier à dire qu'autant que faire se peut une fonctionalité js doit se penser comme surcouche d'une fonctionalité équivalente d'un dispositif coté serveur par exemple.
Mais justement "autant que faire se peut" ou, dit autrement, dans la mesure où à l'impossible nul n'est tenu. Et il se trouve justement que la combinaison de deux types de dispositifs de galeries complètement opérationnels que ce soit versus js ou versus php, ben là c'est vraiment au delà de la limite de ce que je peux faire.
Déjà que ça fait déjà 6 mois que je suis sur ce fichu bazard Smiley langue

<edit>
Le présent message a été écrit sans avoir vu ton edit, du coup il ne tient pas compte de tes remarques finales.
</edit>
Modifié par clb56 (04 Dec 2006 - 02:43)
jpv a écrit :

Désolé si cette réflexion chamboule ton idée de départ, mais je suis certain que tu me pardonneras... Smiley cligne


Ben dans la mesure où ça me donne de magnifiques outils et des pistes de travail pour les mois à venir, il n'y a vraiment rien à pardonner je pense Smiley cligne
Modifié par clb56 (04 Dec 2006 - 03:27)
Je reconnais bien dans ce site la patte de mon ami clb56 !

Une conception très restrictive de l'esthétique qui dit flute aux contingences des autres.
A regarder les photos de près, il parait évident que l'auteur a suivi Heidegger dans sa recherche de la transcendance dans le néant.

Le résultat est... malheureusement pour moi... très cohérent avec cette approche :

QUAND JE CLIQUE SUR UNE PHOTO, J'OBTIENS UN SPLENDIDE ECRAN TOUT NOIR AVEC UN NON MOINS SPLENDIDE CADRE TOUT BLANC AU MILIEU !!!!

(FireFox 1.5.0.7 / FreeBSD 6.1 / 64 bits... => NO PLUGIN !!!!)

Quand je pense que je m'amuse pour des raisons de Validome à remplir les attributs alt, pour d'autres raisons à traiter le cas if not de mes ifgetelementbyid,... et que d'autres s'amusent à faire des sites invisibles à ceux qui n'ont pas ce @#]#&! de #)#[@@ player !

Bon,, je ne veux pas faire de concurrence... surtout pas à des amis... mais le mien à moi, il donne cela POUR TOUT LE MONDE (enfin... pour ceux qui ont activé JS):

http://perso.orange.fr/finis-europae/myAGSE_TT/Pages/GalGen.html?1?28

Quoi ? Ah ? On n'est pas vendredi ?

Pardon !
Modifié par aCOSwt (04 Dec 2006 - 13:29)
Salut,

@aCOSwt : Et moi sans Js sur ton exemple je ne vois que petites imagettes sans légende et quand je clique sur elles, il ne se passe rien. Smiley biggol
papyjo a écrit :
Salut,

@aCOSwt : Et moi sans Js sur ton exemple je ne vois que petites imagettes sans légende et quand je clique sur elles, il ne se passe rien. Smiley biggol


Certes papyjo ! Certes !

Sauf que... si tu VEUX... tu PEUX !

Alors que moi, dans le cas du site de clb56, MÊME si je VEUX... je... ne peux pas !

C'est toute la nuance. Si on continue un peu ce sujet avec clb56, on ne manquera pas de faire état de volonté de puissance et le débat roulera rapidement de l'esthétique à l'éthique...

Mais...

Pas avant vendredi !
Modifié par aCOSwt (04 Dec 2006 - 13:58)
aCOSwt a écrit :
et que d'autres s'amusent à faire des sites invisibles à ceux qui n'ont pas ce @#]#&! de #)#[@@ player !


1. je ne m'amuse pas !
J'espère quand même que l'échange avec jpv montre que je prend les questions d'accessibilité tout à fait au sérieux (et pas du tout au passage pour une bonne note auprès d'un quelconque validateur automatique).

2. Il n'y a pas de player.

3. la situation que tu décris correspond a priori à js actif et images non chargées (si tel n'est pas le cas alors il y a quelque chose qui m'échappe). Je serai le premier à dire que le script lightbox est au delà de sa sophistication et de sa séduction une usine à gaz bien difficile à manier suivanr le niveau que l'on a en javascript.
Déjà
. Réussir à obtenir une navigation clavier correspondant à l'usage canonique (Si l'image s'ouvre via lightbox, alors tab reste opérationnelle).
. Réintégrer dans l'interface lightbox la présence permanente des liens images précédentes et suivantes pour éviter leur apparition magique qui semble bien poser un vrai problème d'accessibilité cognitive.
. Supprimer les abhérations rendant impossibles l'accès, via la fonctionalité du menu contextuel, aux propriétés de l'image ainsi qu'à l'enregistrement sous... de cette dernière.

Ben ça n'a vraiment pas été de la tarte...

La remarque concernant l'absence de alt dans le code généré via le js lightbox est néanmoins juste (en fait c'est l'ensemble du html généré par lightbox qui devrait être revu, il n'y a que des div) et je vais m'y pencher.

Merci donc, même si je regrette un peu la forme de ton intervention. Effectivement on n'est pas vendredi, mais surtout on n'est pas dans le bar.
clb56 a écrit :

1. je ne m'amuse pas !


Ben... Flute alors. Moi toujours !

clb6 a écrit :

2. Il n'y a pas de player.


Exact. Je l'ai cru au premier abord car le comportement de mon FireFox resemblait à ce cas. Il n'empèche alors... un autre plugin ?

clb56 a écrit :

3. la situation que tu décris correspond a priori à js actif et images non chargées (si tel n'est pas le cas alors il y a quelque chose qui m'échappe)


Tout ce que je peux te donner comme info supplémentaire est ma javascript console qui report :

a écrit :

Error: Unknown property 'filter'. Declaration dropped.
Source File: http://test-galerie.clb56.fr/clb56_pics_viewer/galerie_photo/lightbox/lightbox.css
Line: 82

Error: Error in parsing value for property 'display'. Declaration dropped.
Source File: http://test-galerie.clb56.fr/clb56_pics_viewer/galerie_photo/lightbox/lightbox.css
Line: 97


clb56 a écrit :

Merci donc, même si je regrette un peu la forme de ton intervention. Effectivement on n'est pas vendredi, mais surtout on n'est pas dans le bar.


Xcuses si tu ne l'as pas trop bien pris... j'ai encore dû me gourrer de css...
aCOSwt a écrit :

Il n'empèche alors... un autre plugin ?


Non, il ne s'agit que de javascript.

Je n'ai pas de souvenirs de problèmes paticuliers quand j'avais la version 1.5 de firefox.

Je viens de revoir cette histoire du alt. Il le semblait bien d'ailleurs m'être déjà penché là dessus. Et c'est un sacré foutoir dont je ne vois pas trop comme ça la solution.

En fait le déroulement du script semble être soumis au fait que l'image soit chargée, et tant que ce n'est pas le cas tout reste en suspend.
Je vois pas trop l'intéret du lightbox dans ce cas, l'interet de ce script étant qu'il superpose ton image sur le reste de ta page, ce qui est sympa quand tu as un page un peu complexe derriére, mais c'est si c'est juste des vignettes au milieu de la page, finalement, il y plus que l'effet scriptaculos de 40k qui t'amuse qu'a la premiére photo, parceque de toute façon tu ne vois plus le fond derriére. Pourquoi ne pas avoir les vignettes en bas et ainsi ne pas devoir revenir sur la page avec les vignettes? le tout avec un joli loading, et un fond gris foncé, ce serait plus simple et plus efficace.
matmat a écrit :
Je vois pas trop l'intéret du lightbox dans ce cas,


Cela va vous paraitre bizarre mais le pricipal intérêt là dedans pour moi c'est d'affronter la bête Smiley lol

Lightbox est un dispositif qui pose vraiment pas mal de problème d'utilisabilité et aussi d'accessibilité. Et j'ai déjà lu assez souvent que le mieux c'était de ne pas l'utiliser. Mais telle n'est pas ma démarche parce que je trouve que ce n'est pas comme ça qu'on apprend.

Or il se trouve que je ne développe que pour apprendre.

Et je trouve qu'a l'occasion de tous mes petits essais et bien j'ai quand même réussi à faire avancer certaines choses (navigation clavier). Comme personne ne me le reconnaitra, je préfère le dire moi même Smiley smile

a écrit :

Pourquoi ne pas avoir les vignettes en bas et ainsi ne pas devoir revenir sur la page avec les vignettes?

Ah oui tiens il faudra que je creuse ça Smiley cligne

a écrit :

le tout avec un joli loading,

pas compris.
Modifié par clb56 (04 Dec 2006 - 20:34)
a écrit :

le tout avec un joli loading,


pas compris.

Je parlais juste de l'image de loading, c'est un petit détail, mais celon le temps d'attente finalement comme tu la voie souvent... moi j'aime bien celle là:
voir (loadinganimation.gif, premiere boite avec onglets):
http://jquery.com/demo/thickbox/
Sinon la version 1 de lightbox est plus légére et surement plus facile a comprendre (perso moi j'utilise celle là) sinon si tu veux voir une bête encore plus méchante (avec les vignettes et tout) il y ça:
http://minishowcase.frwrd.net/
Mais là cà devient vraiment dur à comprendre...
Pages :