Tweet
genesis.biloucorp.com

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Une galerie de dessins, c'est tout beau !

Répondre au sujet

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

Ce forum vierge et incompréhensible vient d'être dépucelé par plein de dessins ! Les miens.

A l'occasion de cet heureux événement, vous pouvez en plus découvrir la toute nouvelle balise BBCode CUSTOM "gallery" que je viens de programmer en jQuery.

Une balise où il suffit de mettre les liens des images entre, et PAF ! Toutes les images s'affichent sous forme de miniatures qu'on peut agrandir !


Par exemple, le code :
gallery_
lien de la première image
lien de la seconde image
lien de la troisième image
etc.
_gallery
Présente les images de cette manière :

gallery_
http://www.ilovegenerator.com/large/i-love-bilou-131710668134.png
http://www.icone-gif.com/gif/prenoms-garcon/bilou/bilou-01.gif
http://auto.img.v4.skyrock.net/5872/16605872/pics/456795889.jpg
http://www.martinlachapelle.com/wp-content/uploads/2012/07/m.bilou-1.jpg
http://www.ilovegenerator.com/large/bilou-love-131560446118.png
http://www.padezil.com/wp-content/uploads/pochettes/albums/batako-bilou-back-cover--1339853286-2.jpg
http://bangbangblog.com/files/2010/12/155362_461558288021_190457223021_5806004_276327_n1-300x463.jpg
http://idata.over-blog.com/1/94/46/86/Bilou-affiche.gif
http://www.ilovegenerator.com/normal/nini-love-bilou-nue-132870933896.png
http://3.bp.blogspot.com/-71LmyHBH1tg/UjBcFwan9cI/AAAAAAAAAsQ/MAsSe6Jlq8M/s1600/DSC07048.JPG
http://img113.imageshack.us/img113/6175/bilou8ke.jpg
_gallery
caption_C'est beau comme google image._caption

Note : On pourrait écrire [gallery][/gallery] si je le voulais (je l'ai d'ailleurs codé mais désactivé) mais j'ai préféré faire une nouvelle syntaxe plus économe (c'est chiant, les raccourcis claviers pour "[", "]" et "/")



C'est le genre de choses que je voulais depuis fort fort longtemps, en particulier pour l'aspect design/ergonomie que vous remarquerez : Ça fait des années que j'imaginais les galeries d'images de Feu BilouCorp agencées de cette manière, ce qui change de l'éternel diaporama ou carrousel que vous voyez partout (ou pire).

Mais pourquoi c'est cool ?

h2_Agencement particulier des miniatures_h2

Cet agencement est naturel, pourtant, il est complexe à mettre en place. (C'est ce qui m'a donné le plus de fil à retordre)

On le retrouve presque sur google image, mais google se permet tout de même de recadrer les images, ou de réduire la hauteur des images trop larges :

caption_Exemple d'agencement des miniatures sur google image_caption

Un plus grand nombre de galerie choisi ce qu'il y a de mieux en terme de "miniature" : les miniatures carrées (facebook, tout ça).

Sauf que justement, je préfère de loin des miniatures où l'on voit le dessin complet sans recadrage, et c'est encore plus joli si les miniatures ensemble prennent bien toute la largeur et font la même hauteur côte à côte :

flickr correspond parfaitement à ce que j'ai choisi de faire :

caption_Exemple d'agencement des miniatures sur flickr.com_caption

Et je n'ai pas attendu de découvrir flickr pour y penser. Je pense que c'est la première idée que peut avoir un maniaque de l'ergonomie visuelle ! =)


h2_Visualisation particulière des images_h2

Dans 90% des galeries d'image (flickr, facebook, twitter, etc.) on a le droit au diaporama. (Et avant, on avait simplement l'image en pop-up, puis en pop-in... ou encore le chargement d'une nouvelle page contenant l'image en grand, comme Deviant Art.)

Le diaporama, c'est simplement visualiser l'image en grand et par-dessus la page, on parcours ainsi toutes les images avec des flèches "gauche" et "droite".
Cette solution est cool car elle intègre bien les commentaires, et elle est particulièrement adaptée aux portables et tablettes (contrairement à ma solution).

Mais pourquoi le diaporama ne convient pas à un maniaque de l'ergonomie ?

C'est qu'on perd le fil de la galerie, de la page qui intègre la galerie !

Une fois qu'on entre dans le diaporama, on ne parcours plus les images comme dans une galerie : on ne passe plus d'une image à l'autre librement, car on est contraint à "la suivante" ou "la précédente".

Systématiquement, on oublie la galerie, ainsi que la page qui intègre la galerie. Quel est donc l'intérêt de la galerie ? Entrer dans un diaporama, et se taper les images une par une.

Si on veut vraiment parcourir les images librement, dans le désordre, par curiosité, en profitant pleinement du fait de "parcourir les miniatures"... On clique sur la miniature, on regarde la visu dans le diaporama, on ferme le diaporama, etc. Personne ne fait ça, c'est simplement chiant.

C'est alors que vient ma solution magique, qu'est d'intégrer la visualisation dans la galerie :

caption_Visualisation intégrée dans la galerie_caption

Je me demandais il y a trois ans si j'étais le premier à penser à ça... jusqu'au jour où j'ai vu la dernière mise à jour de google.com faire un équivalent pour son google-image ! =O (google.fr n'ayant pas eu cette mise à jour, encore)

Je suis persuadé depuis ce jour que GOOGLE.COM utilise des BOTS-ESPION pour voler mes recherches sur Feu BilouCorp, afin d'optimiser ses propres produits !!!! OMG !!!! (Ou pas.)

Tout l'avantage de ma solution, où l'image visualisée s'affiche au sein même de la galerie, c'est qu'on garde le fil, le parcours de la galerie, la lecture de la page qui intègre la galerie. Il y a une continuité parfaite entre le moment où on parcours la page, le moment où on parcours la galerie, et le moment où on visualise une image de la galerie.

Dans le cas de la présentation d'un jeu-vidéo, par exemple, les miniatures s'intègrent parfaitement à la présentation, ce qui fait qu'on parcours aussi librement le texte que les images, on reste dans la lecture de la page, de la galerie.


h2_Images trop grandes ? Quand s'en foutre est un bon choix_h2

Une grande problématique, pour cette brillante solution qu'est d'intégrer la visualisation dans la galerie (donc, dans la page, le design du site)... c'est que la visualisation doit permettre de voir l'image en grand (logique) et au mieux, à taille réelle.

Sauf qu'on sait tous, rien qu'avec la balise "img" des forums, qu'une image trop grande va déformer le site/forum. Alors en général, on la redimensionne, et on propose de l'afficher en plus grand dans une autre page.

Mais dans le cas d'une visualisation, ce serait bien frustrant de ne pas avoir directement la taille réelle ! On vient déjà de cliquer pour agrandir l'image, on va pas re-cliquer pour l'agrandir encore !

Alors j'ai trouvé une solution simple que je n'ai pas encore vue ailleurs, mais qui semble extrêmement bête... c'est simplement de "laisser dépasser".

L'image est trop grande ? On s'en fout, elle a qu'à dépasser à droite et à gauche !

caption_Une image plus large que le forum ?!_caption

Si ça pose un problème, de violer la largeur du forum ?
Aucun. (sauf éventuellement pour les foruministes radicaux.)

Ça poserait un problème si plusieurs images dépassaient joyeusement comme ça en permanence, pour un problème esthétique, ou un problème d'accessibilité si jamais des publicités/liens/menus étaient affichés sur les côtés.

Mais en l’occurrence, quel que soit le nombre de galeries affichées sur la page, il n'y aura jamais qu'une seule image visualisée en même temps. Et cette image visualisée se referme simplement en cliquant dessus (s'il y a une gêne, donc, elle est résolue en un clic après avoir apprécié l'image).

Pour le peu que l'on y soit sensible, esthétiquement et artistiquement parlant, ça peut même être plutôt impressionnant de voir l'image entière, librement plus large que le corps qui l'intègre. L'image ainsi visualisée n'est plus "enfermée", ça donne une impression de perspective et "premier plan".

Et puis, tout ce qui importe, c'est d'apprécier l'image ! = D



Conclusion : ça fonctionne !

Cette nouvelle balise ne sera pas la seule à rendre les topics cools par ici, en effet il y en a 6 autres déjà faites avant celle-ci, notamment les balises de titre, ou de "float", ou encore la balise qui me permet de présenter des choses sur toute la largeur du forum et non seulement la largeur du post.




float=full-right__float

Voir le profil de l'utilisateur
Partager cet article sur : diggdeliciousredditstumbleuponslashdotyahoogooglelive

Aucun commentaire.

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Répondre au sujet

Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum

UP ▲