Chargement...
 
[Voir/Cacher menus de gauche]
[Voir/Cacher menus de droite]

3 - Le site : philosophie, organisation, problèmes...

Dernier post

Images sur le site

yanshee utilisateur non connecté
Salut à tous !
J'ai remarqué et j'en ai déjà parlé avec Olinuxx qu'il y a des problèmes avec les images du site: certaines images sont très larges, dépassant parfois les 1200px de large, et cassent donc la mise en page du site, forçant les utilisateurs à scroller horizontalement pour avoir accès à la colonne de gauche. Je suis en train de bosser sur une nouvelle css pour le site où je force une largeur maximale de 450px pour les images. Le problème avec les images larges, est que si leur taille est réduite, elles deviennent difficilement lisibles, or, il est souvent nécessaire de voir ce qu'il y est écrit. L'idée, c'est donc d'ajouter un attribut link aux images afin que lorsqu'on clique sur celles-ci, elles s'ouvrent dans une nouvelle fenêtre/onglet.

Je vous demanderais donc si vous modifier/créer des pages avec des images, d'y ajouter l'attribut link à la balise image, histoire de pas devoir repasser systématiquement sur les pages pour les modifier...wink

Voici un code exemple de commetn ça fonctionne:
{img src="monimage.png" link="monimage.png"}


Si vous voulez éviter de casser la mise en page actuelle du site, vous pouvez rajouter un attribut width, mais veillez à ne pas dépasser 450px si vous le faites (histoire de nouveau de pas devoir repasser sur les pages après...)

exemple:
{img src="monimage.png" link="monimage.png" width="450"}


Pour l'instant, j'ai déjà modifié toutes une série de pages, ou j'ai rajouter l'attribut link, et modifié l'attribut width, le cas échéant (je ne l'ai pas rajouté lorsqu'il n'y en avait pas vu que je comptes gérer ça via css, mais je l'ai modifié lorsqu'il était présent, plutôt que de le supprimer, considérant que l'auteur a essayé de faire une mise en page propre...wink)

Une question que je me pose néanmoins, concernant ces liens, faut-il mettre des liens sur toutes les images, y compris les petites et ce, afin d'avoir une cohérence globale au niveau des images du site, ou ne faut-il mettre un lien que sur les grandes images ? confused

pianolivier utilisateur non connecté France
bien joué Yanshee, c'est un boulot de taré que fait la !

pour repondre a ta question, je dirai, d'ajouter un attribut link seulement aux images qui font plus de 450px de large, c'est a dire qu'elles sont redimensionnées et donc un peu/beaucoup moins lisible

pour les autres (plus petites ou egal à 450px), la regle pourrai etre de ne pas les redimensionner, et donc aucun interet à l'attibut link vu qu'on les vois deja comme elles devraient etre
apres avec ca, il y a plein d'images de presentation (comme sur la page d'acceuil) qui sont expressement redimensionnées pour etre petites et qui n'ont pas de vocation a etre vu seules, elle ne sont pas des captures d'ecran mais plutot des agréments visuels ou de joli liens
un autre exemple peut etre l'image de presentation dans les pages du glossaire des logiciels

yanshee utilisateur non connecté
Citation :
bien joué Yanshee, c'est un boulot de taré que fait la !

En même temps, ça me donne l'occase de parcourir toutes les pages et de découvrir des trucs intéressants... wink

Pour les petites images, je suis assez d'accord avec toi, je dirais qu'on ne redimensionne que les grandes, mais bon, je me disais qu'il y en a peut-être que ça perturbe...

Sinon, pour les images expressément redimensionnées pour être vue petites (exemple, les boutons le coin de... sur la page d'accueil), c'est une très mauvaise idée, une image redimensionnée (que ce soit agrandie ou reéduite) a toujours une qualité de rendu dégueulasse, je dirais donc que pour les images destinées à être vue réduite, il faut prendre la bonne habitude de les redimensionner directement via Gimp avent de les uploader sur le serveur. De plus, ça réduiré le poids des images à afficher, et donc la charge du serveur.

Autres points auxquels j'ai pensé pour les images:
- Sur certaines pages, les images sont directement affichées via le site du projet ou wikipedia. Très mauvaise idée également ! En effet, sur certaines pages, les images ne s'affichent pas parce que: le site n'existe plus ou l'auteur du site a supprimé l'image ou l'auteur du site à modifier l'architecture de son site, et l'image n'est donc plus au bon endroit. Si vous voulez utiliser une image provenant d'ailleurs (vérifiez quand même les droits avant...), téléchargez l'image sur votre bureau et ensuite uploadez-là sur linuxmao, ainsi quoiqu'il arrive, l'image s'affichera toujours.

-Autre point: de nombreuses images ont une petite ombre portée, ce qui à mon avis est également une mauvaise idée, je m'explique: tout d'abord, certains font des ombres portées de 10px, d'autres de 5px, certains font l'ombre d'une opacité de 80%, d'autres de 60%, etc. et certains ne font carrément pas d'ombre pour leurs images. Il n'y a donc aucune cohérence graphique dans les images du site. De plus, imaginons que l'on décide de rajouter une bordure de décoration à nos images via les css, l'ombre va se retrouvée inclue (incluse ?) dans la bordure, résultat: pas terrible. Les ombres portées peuvent en plus être directement gérées via les css (je sais c'est CSS3 et c'est encore un peu expérimental, mais les bons navigateurs supportent déjà cette propriété...), ce qui permet de donné une ombre portée identique et donc cohérente à toutes les images du site. En plus, je suis sûr que vous préférez passer votre temps à faire de la musique qu'à mettre des ombres portées sur vos images... wink

D'une façon générale, je dirais qu'il faut éviter au maximum de "styler" les éléments du site. Il faut laisser les css s'occuper de cela, parce que ça rend les choses difficiles à gérer sinon. Un exemple, ce sont les boxes du site auxquelles une couleur est attribuée: impossible de changer leur couleur via css, vu que la couleur est "hard-codée" dans l'html, c'est donc celle-là qui prend la main. Pour modifier les couleurs des boxes, va falloir toutes les éditer et supprimer l'attribut couleur... confused Bon c'est pas dramatique, mais vous voyez l'idée général du truc: créé vos pages, organisez-les comme il faut en utilisant les listes, etc. et laissez les css s'occuper de l'apparence du tout, le site n'en aura qu'une meilleure cohérence visuelle !

jy_moustache utilisateur non connecté
ok c'est noté...

y'a-t-il possibilité d'utiliser 2 images ? Si on se fixe une résolution à 300 dpi pour un bel affichage :
  • une image aperçu de 450 px (et 300 dpi) de large qui s'afficherait sur la page, monimage_apercu.png
  • image en taille naturelle plus grande (et 300 dpi) qui serait pointée par l'image précédente, monimage_originale.png

l'idée c'est que l'aperçu soit enregistré directement à la bonne taille (et bonne résolution) pour assurer un bel affichage. si la réduction est faite par l'intermédiaire de la balise, l'interpolation fait du mauvais boulot et l'image est vraiment moche, pas du tout adaptée et illisible.

donc pour résumer :
une image aperçu, enregistrée en 450px et à une bonne résolution, qui pointe vers l'image naturelle, grande dimension en 300 dpi, que l'on peut afficher en cliquant sur l'aperçu.

jy

PS : je m'étais pas mal arraché les cheveux sur ces questions au moment de la rédaction du dossier son. biggrin

pianolivier utilisateur non connecté France
Citation :
je dirais donc que pour les images destinées à être vue réduite, il faut prendre la bonne habitude de les redimensionner directement via Gimp avent de les uploader sur le serveur
(...) directement affichées via le site du projet ou wikipedia. Très mauvaise idée
(...) D'une façon générale, je dirais qu'il faut éviter au maximum de "styler" les éléments du site. Il faut laisser les css s'occuper de cela, parce que ça rend les choses difficiles à gérer sinon

+1 le mieux serai d'inserer toutes ces idées dans le manuel du site

Citation :
de nombreuses images ont une petite ombre portée, ce qui à mon avis est également une mauvaise idée

va faloir voir ca avec olinuxx, c'est lui qui y tient particulierement !

@jy :
Citation :
y'a-t-il possibilité d'utiliser 2 images ?

a mon avis c'est une fausse bonne idée vu que le travail de yanshee est justement de rendre ces images lisibles par un clic
de plus c'est beaucoup de travail, il faut redimmensionner toutes les images du site avec gimp, les re-uploader (ca n'aide pas le serveur) et reapsser sur toutes les pages pour changer les attributs d'image

jy_moustache utilisateur non connecté
Citation :
y'a-t-il possibilité d'utiliser 2 images ?
Ouais mais si on laisse le browser faire la réduction, c'est hyper moche... confused

Citation :
va faloir voir ca avec olinuxx, c'est lui qui y tient particulierement !

si la balise CSS le gère, il sera pour.

jy

yanshee utilisateur non connecté
Pour les deux images, c'est vrai que ce serait plus joli, mais le faire manuellement, comme le dit Pianolivier, ce serait une surcharge de travail. De plus ces images sont faites pour être vues agrandies. Maintenant, il se peut que Tikiwiki gère les "miniatures" d'images (des tas de sites utilisent la librairie GD pour pour redimensionner à la volée et créé des aperçus), à voir dans le fonctionnement de Tikiwiki, ce serait alors idéal, vu qu'on uploaderait une seule image et Tikiwiki se charge de créer un aperçu de l'image.

Pour les ombres portées, je confirme bien, c'est une nouvelle fonctionnalité de css3 (comme les bords arrondis, halleluia ! mrgreen), mais ça ne fonctionne pas encore sur tous les navigateurs (comprendre par là: IE evil), mais bon, la plupart des navigateurs modernes supportent déjà cette propriété (j'ai testé avec Firefox 3.5 notamment), et comme je sors pas ma css demain, je crois qu'il n'y a aucuns problèmes à ce niveau là. Pour un exempe, vous pouvez aller voir cette page .

Pour le manuel du site, tout à fait d'accord qu'il faudrait y mettre ces infos, je m'en occuperai quand j'aurai le temps (beaucoup de boulot pour le moment...) confused

PS: les images en 300dpi, c'est pour l'impression, pour l'écran, on bosse en 72dpi wink

jy_moustache utilisateur non connecté
ok, pour le 72 dpi, je savais pas redface

pianolivier utilisateur non connecté France
Citation :
il se peut que Tikiwiki gère les "miniatures" d'images

je ne suis pas sur de bien comprendre l'idée des "miniatures d'images, mais pour info :
on utilise sur ce wiki leplugin img, il existe un autre plugin pas implementé image (img et image sur la doc de tikiwiki)
le plugin image incorporait jusqu'alors des fonctions plus avancées, mais qui sont intégrée au plugin img dans les nouvelles versions de tikiwiki, vous pouvez allez voir des exemples de miniatures (?) sur la page img , il fuadra cependant attendre une mise a jour de tikiwiki pour que ca soit accessible ici
btw: on est sur quelle version de tikiwiki deja ?

Afficher les articles :
Aller au forum :

Documentation [Afficher / Cacher]

Connexion
[Afficher / Cacher]



Mégaphone [Afficher / Cacher]

syberia303, 22:23, jeu. 05 Dec 2019: Sitala: une boîte à rythmes lecteur d'échantillons disponible au format vst ou en programme autonome:[Lien]
allany, 20:29, jeu. 05 Dec 2019: Coco, il est là l'édito ! [Lien]
sub26nico, 23:17, mer. 04 Dec 2019: Salut et bienvenue à Olivier212, MusoCompoSon, TroupeV et Fred71 :-)
olinuxx, 13:38, dim. 01 Dec 2019: Bonjour et bienvenue à FIFI71 cool
r1, 09:20, sam. 30 Nov 2019: @sasaki : dans le cas de mon album, cela veut dire trésor. Un clin d'œil à mes princesses dont la maman est chinoise.
Sasaki, 14:50, ven. 29 Nov 2019: @olinuxx : Bao Bao peut signifier en mandarin : - mon coeur/mon chéri/mon trésor/ma puce (宝宝) ou bien - tempête de grêle !(雹暴)
olinuxx, 14:27, jeu. 28 Nov 2019: Bonjour et bienvenue à LarryV cool
sub26nico, 23:22, mar. 26 Nov 2019: salut et bienvenue à sanouchtef, stefanouch et Philben :-)
olinuxx, 15:38, mar. 26 Nov 2019: Bonjour et bienvenue à jit cool
olinuxx, 10:41, lun. 25 Nov 2019: Bonjour et bienvenue à Rafy Martos et à vella 38 cool
olinuxx, 18:13, sam. 23 Nov 2019: @lila : va ici : [Lien]
olinuxx, 17:49, sam. 23 Nov 2019: Bonjour et bienvenue à aa78 et à Michmech cool