Archive pour la catégorie ‘Développement Web’

Tâches à faire – Je commence à avoir le dessus !

Mercredi 30 juin 2010

Ces derniers mois, j’ai eu pas mal de boulot à faire. Cela allait au point où j’ai été quelques temps où j’avais même du mal à m’avancer, même de quelques lignes, dans mon big-tuto GIMP que j’écris depuis plusieurs mois.

Hors-internet, j’avais à jongler entre renouveler les biscuits maison, mes entraînements au gym (bien que j’ai pris une pause le temps de laisser mon genou récupérer après un claquage lors d’un step-up), mes rendez-vous divers avec mes intervenantes, ainsi que plus récemment, les sorties avec ma nouvelle amie.

Mais il reste que j’ai quand même pas mal de boulot à faire sur le PC aussi : Avec la découverte du problème de couleurs des PNGs de mes styles sous Firefox 3.6, cela m’amène donc beaucoup de boulot à faire. Puis vient une commande où l’on me demande plusieurs variantes de mon style phpBB3 « Pro_Ubuntu » pour un phpBB-SEO, ce qui implique qu’en plus de faire les variantes de couleur, il faut que je modifie ce qui est à personnaliser dans ce qui a été ajouté par les modules de la prémod. Puis avec le problème de bots qui devenait de plus en plus difficile à gérer sur mon ancien blog, il a fallu que je déménage et donc, que je me familiarise avec WordPress pour pouvoir mettre en place et personnaliser ce blog où vous êtes présentement en train de lire ce billet. Et c’est sans compter tous les imprévus qu’il peut y avoir.

Avec tout ça, j’en venais à en avoir même de la misère à me trouver du temps pour travailler sur mon cours. Mais avec la demande croissante d’un cours de graphisme ainsi que les questions concernant une date de sortie du cours, il fallait bien que je fasse un choix, d’autant plus que j’aimerais bien pouvoir passer à la toute dernière version d’Ubuntu qui est sortie vers fin avril de cette année.

S’organiser

Même si j’avais une grosse commande et que les mises à jour des styles étaient à faire, le cours de GIMP pressait de plus en plus. Je me suis donc lancée dans un blitz de rédaction durant le mois de juin pour au moins finir le chapitre 6 et faire des retouches sur le cours. J’ai finalement même eu le temps de réorganiser le chapitre 4 dont la structure ne me satisfaisait plus. Je remercie au passage m@tteo78 pour son aide précieuse en tant que gimpeur expérimenté pour certains points.

Entre-temps, en allant sur le blog de Simple IT, je tombe sur ce billet sur l’organisation qui m’a permise d’apprendre quelques trucs pour organiser mes tâches, dont une application pour les gérer.

En effet, jusqu’à maintenant, j’utilisais une simple note où j’écrivais les tâches à faire, mais je ne mettais pas de délai, ni de division selon la priorité : tout était pêle-mêle ! Cela avait pour résultat que certaines tâches pouvaient traîner pendant plus d’un an !

En lisant le billet, j’ai donc découvert Getting Things Gnome!, un utilitaire Linux s’intégrant parfaitement dans l’environnement Gnome pour gérer ses tâches. Pour un cas comme moi, cela fait parfaitement l’affaire et ainsi, j’ai migré tout ce que j’ai noté. Ce qui est le fun, c’est que :

  • On peut définir un délai pour chaque tâche, en utilisant le petit calendrier. Ainsi, une tâche urgente aura un délai plus court qu’une tâche qui presse moins.
  • Le système d’arborescence fait que l’on peut ajouter des tâches-enfant dans une tâche-parent. Ainsi, par exemple, ma tâche parent est Mettre à jour mes styles phpBB3, et dans cette tâche, il y a plusieurs sous-tâches (ou tâches-enfants), chacun désignant un style à mettre à jour. La profondeur de l’arborescence peut aller à l’infini !

Ainsi, j’ai mis dans les tâches urgentes le big-tuto ainsi que la commande à faire. Ensuite, comme tâches qui viennent après, ce sont mes styles à mettre à jour. De cette façon, si j’ai un trou de libre, je peux mettre à jour un style, avant de replonger dans les tâches urgentes.

Au final, j’ai déjà quelques tâches mis en Terminé : trois styles phpBB3 que j’ai mis à jour lorsque j’ai eu des trous libres. Quant aux tâches urgentes, la finition de mon big-tuto Gimp pour la première publication viendra bientôt rejoindre la liste, puisque j’ai pu faire les dernières retouches (dont compléter les annexes) à temps, et au moment d’écrire ce billet, le cours sera envoyé à la validation dans quelques heures..

Le sentiment d’avancer vite tout d’un coup

Maintenant, dans les tâches urgentes, il ne reste que la grosse commande de styles pour le forum phpBB-SEO. Déjà, j’ai commencé à travailler dessus à fond, en commençant par compléter les modifications là où il y a les modules, pour au moins que le portail soit dans les bonnes teintes de couleurs. Et lorsqu’arrive un trou, j’update un style !

Donc, dès le moment où j’ai terminé la réorganisation du chapitre 4 de mon cours (incluant le transfert des images), j’ai senti tout d’un coup que ça s’est mis à avancer vite et que je ne stagne plus dans les tâches à faire ! Même si je me couche très tard ces temps-ci, le fait que j’ai terminé quelquechose de gros à faire fait que je me couche avec le sourire, en pensant au boulot que je viens de terminer et que je n’aurai pas à reprendre le lendemain.

Je commence donc à être confiante à terminer mes différentes tâches à temps selon le délai donné, voire même de prendre un peu d’avance. Enfin… du moins ça dépend encore de la date à laquelle la version 1.0 de Connectix Boards sortira, puisque je ne veux pas me lancer dans les travaux majeurs sur mon site tant que cette version ne sortira pas, puisque j’aimerais réorganiser l’architecture de mon site pour en faire un vrai CMS utilisant le moteur du forum, et non plus un simple site maison qui ne fait qu’utiliser les sessions du forum pour l’espace membre. D’après les dernières nouvelles, il y a des possibilités que ça puisse sortir en septembre, mais ça dépend toujours des imprévus qui sont inévitables en développement Web.

Mais d’ici-là, j’ai encore deux gros mois pour tout le boulot que je compte faire avant septembre.

[Critique design Web] Pixia.free.fr

Mardi 15 juin 2010

Je prévoyais déjà faire cet article dès la journée où je rédigeais l’article qui précède celle-ci, mais je voulais laisser quelques jours passer avant de rédiger la critique. Ce n’est finalement qu’aujourd’hui que je peux le faire puisque j’ai eu un WE assez occupé où, entre deux sessions de lecture du tome 1 des Héritiers d’Enkidiev – la suite de la saga des Chevaliers d’Émeraude que l’auteure Anne Robillard a fini par accepter d’écrire à la demande générale des lecteurs – j’avais différentes activités comme notre feu de samedi soir, mon après-midi à Beauce Carnaval qui était en ville et le spectacle de baladi auquel j’assistais avec mes parents. J’étais si occupée que je n’ai même pas pu allumer mon PC de tout le WE.

Maintenant que ça s’est calmé et que Beauce Carnaval a repris la route pour aller égayer d’autres villes ailleurs au Québec avec ses manèges, ses jeux d’adresses et les peluches à gagner, me voilà de nouveau devant mon PC où je peux enfin écrire ma critique de design Web, ou « Webdesign review » comme pourrait le dire mon grand frère.

Le site qui sera analysé

En naviguant sur le forum Servhome, je constate qu’il y a un nouveau message dans la section « Logiciels libres ». Le sujet parle de Pixia, un gratuiciel de dessin pour Windows (mais qui peut tourner sous Linux avec Wine). L’url donnée dans le post menait vers le site francophone dédié au logiciel et je jette donc un coup d’oeil, surtout que le site était en .free.fr. Mais je constate vite que le site présente des problèmes d’ergonomie. Puisque je pensais depuis quelques temps à continuer à faire de temps en temps des critiques de designs Web, j’ai donc décidé de faire une critique sur ce site, cette fois en essayant de procéder par barèmes.

Adresse du site : http://pixia.free.fr

Le code

En regardant un tant soit peu le code-source, on remarque très rapidement qu’on a affaire à un codage très archaîque.

Les frames, ça fait mal au coco !

Dans l’accueil, on remarque tout de suite que les frames sont utilisés pour n’avoir qu’un fichier à éditer pour le menu. Or, ce moyen est ergonomiquement très mauvais. Si quelqu’un vient avec un navigateur texte type Lynx, je n’aurais pas une vue d’ensemble des trois frames, ce qui fait qu’une fois que j’entre dans le frame du corps, je ne peux plus en ressortir puisqu’il n’y a aucun lien de retour, alors qu’Accessiweb recommande d’en mettre un. Les non-voyants naviguant avec un lecteur d’écran auront exactement le même problème, puisqu’eux non plus n’auront pas une vue d’ensemble. Et lorsqu’il n’y a pas de lien permettant de retourner à l’accueil, on parle alors de page orpheline. Il ne faut pas oublier non plus que les moteurs de recherche sont « aveugles » et donc, se retrouvent avec le même problème de « non-vue d’ensemble », ce qui a pour résultat qu’un site utilisant des frames sera généralement très mal indexé.

De plus, si un visiteur qui sait à peine naviguer sur internet veut bookmarker une des pages du site ou transmettre le lien direct de la page, il lui sera difficile de le faire avec des frames. Comment le saura-t-il qu’il faut faire clic-droit > Ce cadre > Afficher ce cadre uniquement, pour arriver à ses fins ? Je soulève ce point sur la non-intuitivité des sites construits en frames, puisque je suis déjà passée par là, quand j’étais encore noob en informatique.

Pour ces différentes raisons, ce type de structuration des pages est fortement déconseillé : c’est à réserver aux démos de styles !

Les pages orphelines des tutoriaux

Si on regarde dans les tutoriaux, on constate que si on consulte un tuto en particulier, on tombe directement sur une page orpheline même si on n’a pas demandé à ouvrir dans un nouvel onglet ! On se retrouve alors avec juste le corps contenant le tuto et on n’a donc ni menu, ni lien de retour à l’accueil ! Et puisque ces pages s’ouvrent dans une nouvelle fenêtre ou dans un nouvel onglet sans nous avoir laissé le choix, on ne peut pas utiliser Précédent !

Des tableaux mur à mur…

Si on regarde maintenant à l’intérieur des frames, on remarque vite que c’est bourré de tableaux de mise en page, et que le CSS est à peine utilisé pour les polices des textes et pour le style des liens. Le reste de la présentation est géré par les tableaux et par les balises et atttributs dépréciés.

Cette manière de coder, non seulement alourdit le chargement des pages en obligeant le navigateur de tout lire à chaque fois, mais rend aussi la maintenance plus difficile et donc, c’est la cohérence des fichiers de corps qui devient difficile à garder.

Les solutions

Pour les premiers problèmes, soit les frames et les pages orphelines, on passe au PHP, en remplaçant l’utilisation des frames par l’utilisation de la fonction include(), qui permet tout comme les frames de n’avoir qu’un fichier à éditer pour modifier le menu, sans les inconvénients qu’ont les frames au niveau de l’ergonomie. Puisque Free supporte PHP, ce virage peut donc être fait sans problème !

En combinant avec l’utilisation des includes de PHP, le passage à une structure sans tableaux et la séparation de la présentation du contenu permettrait à la fois d’accélérer le chargement des pages en permettant la mise en cache du styles, et de faciliter la maintenance du code.

Style, ergonomie et accessibilité,

On peut dire que le design est vivant avec l’orange et les chibis et autres dessins manga qui rappelle les origines nippones de Pixia, mais des améliorations auraient pu être apportés.

Je mettrais ma main au feu que le design a été conçu sur un écran cathodique, puisque sur mon écran LCD, j’ai des difficultés à lire les liens qui sont blancs sur fond orangé. Un orangé un poil plus foncé aurait pu rendre ces liens plus lisibles.

L’effet au survol des liens du menu rend la lecture encore plus difficile, avec cet effet d’ombrage qui cause des variations de couleurs derrière les lettres blanches. Quand il y a trop de variations derrière un texte, ça gêne la lecture. Essayez de lire le mot « Téléchargement » sur ces deux captures :

Menu avec effet Menu sans effet

De plus, je remarque que c’est des images qui sont utilisées et qui sont gérées par Javascript. Même si les liens sont tout à fait fonctionnels même si Javascript est désactivé, le fait d’utiliser des images fait en sorte que si on navigue avec Lynx, on n’a que les noms des images au lieu du titre des liens à cause de l’absence de texte de remplacement, comme vous pouvez le voir dans cette capture :

Aperçu du menu sous Lynx

On peut dire la même chose des autres images présentes sur le site : Aucun d’entre eux ne semble avoir de texte de remplacement !

Pour revenir au style, je remarque que dans la page Contact, la présence de pubs Google brise l’unité, car ces pubs dépassent largement la largeur du corps alors qu’ils ne devraient pas.

De plus, à l’accueil, je trouve plutôt étrange visuellement de voir des liens hors de la largeur de la page, alors qu’il y aurait eu un meilleur moyen de les intégrer. Une rubrique « Liens » par exemple, aurait fait l’affaire.

Et finalement, comme je l’avais déjà dit dans la critique précédente, les designs « icy », c’est à dire les designs fixes alignés à gauche, ne sont pas conseillés, car plus la résolution du visiteur sera grande, plus l’espace à droite sera énorme, et ce vide peut justement gêner le visiteur, comme c’était le cas de mon père qui avait déjà réduit sa résolution d’écran parce que le vide à droite sur l’ancienne version de GlobeTrotter.net le gênait. Il vaut donc mieux faire usage d’un style « liquid » (design fixe centré) ou d’un style extensible.

Conclusion

Ce site aurait énormément à gagner en ergonomie, en référencement naturel et en facilité de maintenance en adoptant PHP pour gérer le haut, le menu et le bas ainsi que certains modules hors-forum, et en adoptant de bonnes pratiques basées sur le Web accessible, soit d’éliminer les tableaux de mise en forme et séparer la présentation du contenu.

Pour cela, si un jour l’auteur du site tombe sur ce billet, je lui recommande chaudement ces sites où il pourra apprendre à coder selon les normes du W3C, et à utiliser PHP :

L’utilisation d’un CMS (WordPress, Drupal, …) pour la partie site pourrait également être une bonne solution si le temps manque pour coder. Ces sites sont déjà pré-codés en PHP, et tout comme un système de forum, on n’a qu’à l’installer et après, on a accès à l’administration à partir duquel on peut créer ses pages, publier des articles et gérer les membres ! Pour le choix, il ne faut pas hésiter à demander des avis sur les sites que j’ai cités, et à tester en local avec Wampserver avant d’arrêter son choix final.

Le site a tout à gagner en repartant sur des bases saines et solides qui sauront traverser le temps.

[Critique design Web] Quand un site ne rend pas justice au produit offert

Jeudi 3 juin 2010

Ayant eu peu de temps dernièrement pour trouver d’autres sujets pour mes articles, j’y vais donc pour une première republication d’un ancien billet que j’avais publié sur l’ancien blog, mais qui reste d’actualité. Il s’agit d’une critique de design Web que j’avais faite après avoir découvert un site d’un logiciel commercial dont l’ergonomie et l’esthétique laissait vraiment à désirer, et puisque on est en pleine Semaine québécoise des personnes handicapées, ça tombe pile puisque je fais justement mention de quelques principes d’ergonomie et d’accessibilité dans ce billet.

En même temps, j’apporte quelques retouches à la mise en forme et j’ajoute quelques précisions.

Enjoy !
———————–
(Originalement posté le 21 août 2009)

D’habitude, les sites offrant un logiciel commercial (Adobe par exemple) ont une structure et une esthétique bien travaillées et sont faciles à naviguer, ce qui les rendent invitants pour le client potentiel. Mais il y a des exceptions…

Il y a quelques jours, en faisant ma ronde quotidienne sur QuébecOS, je tombe sur un post où l’un des membres est venu faire découvrir un shareware de captures vidéo pour Linux qu’il a découvert et dont il a été impressionné par la fluidité des vidéos créées pendant ses tests.
-> lien du post en question

Il a donc donné le lien vers le site, en mentionnant que le site est bordélique. Je suis allée voir et je comprends totalement le choix du terme.

Vous pouvez le voir par vous-mêmes : http://www.demorecorder.com/

Je vous livre donc ma critique, que j’avais d’abord postée sur Gimp-Attitude, mais que je reposte ici sur le blog :

Les points négatifs

En regardant le code-source, on remarque que l’ordre logique n’est pas du tout respectée. Une page respectant l’ordre logique doit avoir cette suite : header -> menus -> contenu principal -> footer.

Mais dans le cas du site cité, on a ceci : Colonne centrale contenant le logo central, le contenu principal et le footer. Ensuite, on a la colonne de gauche, avec la partie gauche du header (une simple image de la boîte juste "là" sans aucune intégration graphique) et le menu de gauche. Puis vient en dernier la colonne de droite, contenant les blocs de droite.

Donc, au final, le footer n’est même pas en bas de la page, et le menu est placé après le contenu principal ! Donc, on ajoute à ça l’absence de skiplinks pour avoir comme résultat que tous les sans-souris fuient car ils n’ont pas envie de s’abîmer les tunnels carpiens à user la touche « Tab » pour avoir le menu… j’ai déjà mal à mon épaule droite rien qu’à y penser, déjà que je viens tout juste de reprendre mes traitements de physiothérapie pour soigner mon épaule en vue de retourner sur le marché du travail… ouch !

TOUT est en Times New Roman ! Et comme on sait que ce type de police n’est pas très adapté pour les écrans, où sa lecture n’est pas très aisée… ça on réserve ça à l’imprimé !

La page d’accueil : Mettre les questions fréquentes dans la page d’accueil, ça allonge inutilement la page d’accueil qui doit être la première page sur laquelle le visiteur tombe. Or, une page d’accueil surchargée rendra le visiteur mal à l’aise. Ces questions et réponses, je les aurais vu dans la page FAQ.

Le design : J’ai beau faire dans le le style épuré, mais ce design, on dirait qu’il n’est pas fini, il est trop brouillon. Le logo de côté, où l’on montre la boîte, n’est pas du tout intégré au reste, son fond est d’une couleur complètement différente et donc, ça tranche sur le fond turquoise. Il y a aussi un manque d’homogénéité entre les pages. Pendant que le fond de la page d’accueil est turquoise, le fond des autres pages est blanc, ce qui fait sauter aux yeux la fausse transparence du logo central.

Et niveau CSS (Vive Web Developer Toolbar !), je vois un party de position:absolute;, ce qui explique donc le fait que sur ma résolution de 1280*1024, la page n’est pas centrée et donc, semble optimisée pour du 1024*768… et ça peut fatiguer certains internautes quand une page n’est pas centrée… je pense notamment à mon père, qui avait déjà baissé sa résolution à 800*600 car ça le fatiguait de voir les pages alignées à gauche avec un gros rien à droite, sur les sites à largeur fixe qu’il visitait fréquemment. Le positionnement absolu est à éviter autant que possible pour cette raison !

Les seuls points positifs

En analysant le poids, on remarque que malgré tout, la page d’accueil fait 145571 octets, ce qui est quand même loin du millon d’octets que j’avais déjà vu sur d’autres sites. Les éléments les plus lourds sont surtout l’animation Flash et les deux images d’en haut (qui ne sont pas des grosses images redimensionnées, heureusement).

Ensuite, j’ai vu peu de tableaux dans le code HTML, comparativement aux pages bourrées de tableaux mur à mur qu’on rencontre encore régulièrement.

Conclusion

La structure est à repenser, et le design est à retravailler, afin de mettre des chances de son côté, pour rendre le site plus attractif et ainsi attirer davantage de Linuxiens modérés, en améliorant son ergonomie et sa présentation visuelle pour que le site ait l’air plus « pro ». Qu’il n’hésite pas à faire appel à un webdesigner-intégrateur s’il le faut, pour réaliser le travail !

Ceci était ma première critique, mais peut-être pas la dernière, ça dépendra sur quoi je pourrais tomber.

Retour sur les PNGs assombris – là cette fois, c’est la bonne

Vendredi 14 mai 2010

À la suite des commentaires par rapport à mon précédent article, je viens faire un retour là-dessus.

Réglé… ou presque

Puisque mes images s’affichaient correctement une fois le profil appliqué et que je n’avais pas eu de signalements de problèmes, je pensais que c’était totalement réglé.

Or, Florent.V, dans ses interventions autant ici que dans mon sujet sur Alsacréations, m’a fait remarquer que la solution que j’utilisais était risquée car le profil utilisé par le système pouvait varier d’un OS à l’autre, ce qui fait que mes images pouvaient aussi bien mal rendre sur Mac OSX par exemple, alors que ça rend bien sur Ubuntu 9.04.

L’optimisation – Oui, mais il faut trouver le bon outil

On m’a donc parlé de l’optimisation de mes images. J’avais déjà vu l’article d’Alsacréations à ce sujet et j’avais même déjà commencé à utiliser des outils en ligne de commande bien avant mon passage vers Firefox 3.6. Mais je croyais que mon problème n’avait rien à voir avec ce qui était évoqué avec l’article puisque les seuls sujets que je trouvais dataient de plusieurs années déjà.

De plus, mes tentatives avec optipng et pngcrush ne m’avaient pas permis de virer ce problème de couleur (mauvais paramètres ?). On me parlait de PNGOptimizer et d’autres scripts pour Windows, mais le hic c’est que je suis sur Linux !

On me parlait donc de Smushit, mais je ne l’avais pas encore essayé jusqu’à aujourd’hui puisque je pensais que les résultats allaient être aussi mitigés qu’avec optipng et pngcrush.

Ce n’est donc que ce soir que je l’ai essayé, en envoyant les 8 coins de mon cadrage du thème Provalentina pour finalement voir que… l’assombrissement a disparu, autant sous Firefox que sous Internet Explorer ! Cet outil enlève vraiment toute information de couleur superflue (gamma, profil ICC) en plus que le poids total a considérablement baissé, surtout avec deux morceaux qui ont été allégés de 90% !

Vous pouvez donc voir le résultat sur ce lien, où j’ai remplacé tous les morceaux du cadrage.

La leçon à retenir

Cette épisode qui aura duré plus d’un mois m’a fait voir l’importance d’optimiser mes images, et surtout, d’utiliser les bons outils pour l’optimisation, afin de prévenir tout problème de rendu.

Pour les webdesigners-gimpeurs, je vous donne donc le lien de l’outil en ligne Smushit, qui est à utiliser en complément avec Gimp : http://www.smushit.com/

Firefox 3.6 et les PNGs assombris – Dénouement !

Vendredi 7 mai 2010

Jusqu’à la fin mars, j’étais encore sur Firefox 3.0 qui était installé par défaut sur ma Ubuntu 9.04. Or, en parcourant les articles de Branchez-vous.com, je tombe sur un article annonçant la fin du support de Firefox 3.0 le 30 mars cette année.

Jusque là, je n’osais pas mettre à niveau mon Firefox, car je n’étais pas sûre si ça allait bien se passer, surtout que je n’avais jamais fait de mise à niveau d’un logiciel sur une version donnée d’Ubuntu depuis mon passage vers Linux. Mais face à l’annonce, je me suis finalement décidée de le faire et je retranscrirai d’ailleurs l’article que j’avais écrit à ce sujet sur l’ancien blog.

Une fois les données sauvegardées et Firefox 3.0 enlevé pour laisser la place à Firefox 3.6 après deux tentatives avant de pogner le bon dépôt, tout est maintenant en place, mais lorsque je m’en vais visionner un de mes propres styles phpBB3, là c’est le drame : Tous mes PNGs étaient assombris ou avaient une couleur bizarre, et ça paraissait encore plus sur les images avec fausse transparence et les images ayant une couleur moyenne ! De ce fait, le cadrage que j’avais fait pour le tour de la page de mon style Provalentina était assombri, tandis que le fond de page d’un thème Forumactif que j’ai fait récemment était plus clair que la couleur qui était censé prolonger ce fond ! Ce problème n’apparaissait ni sur Opera, ni sur Internet Explorer.

Étant donné le fait que les PNG s’assombrissent sous Internet Explorer si on enregistre nos PNGs avec le gamma, j’ai donc l’habitude de toujours enregistrer sans gamma. Lorsque je me suis aperçue de ce problème sous Firefox 3.6, je me suis mise à tester en enregistrant le gamma et… ô surprise, les images ne s’assombrissaient pas sous FF, mais l’étaient sous IE.

Pour mieux vous monter, je vous ai fait un petit montage des captures que j’avais prises de mon style ProValentina. Dans ces captures, le bout de cadre du haut est enregistré avec gamma, et le reste du cadrage est enregistré sans gamma. Vous pourrez constater que le haut est assombri sous IE et que le reste est assombri sous FF 3.6. Juste au cas où votre configuration d’écran rende cette perception très difficile, j’affiche à la fois la version non modifiée du morceau de capture à gauche, et une version où j’ai renforcé le contraste à droite.

Assombrissement des PNG sous IE et FF - Comparatif

Cela me mettait donc dans un dilemme : Soit je prenais en compte IE, soit je prenais en compte FF, soit je sacrifiais tous mes PNGs. Je me mettais donc à faire ma petite enquête en allant demander à d’autres Firefox-users sur Alsacréations, phpBB-fr, Québec, puis finalement Geckozone, pour me rendre compte que certains avaient le problème, d’autres pas, suivant l’OS, voire même la distribution (dans le cas de Linux), la version et même le Service Pack utilisé ! Je pus moi-même le remarquer en démarrant Windows XP SP2 pour pouvoir tester sur la version Windows de Firefox 3.6 : Les PNGs n’étaient pas assombris avec le SP2, tandis que chez ceux qui ont la SP3, ils sont assombris !

Sur Geckozone, j’avais pu avoir une solution qui consistait à désactiver la gestion du mode des couleurs sous Firefox 3.6, mais cela ne réglait le problème que chez moi. Puis plusieurs jours plus tard, je tombe sur une réponse dans mon sujet que j’avais posté sur Alsacréations, où ça parlait d’encodage des images et où on me disait que mes images étaient en TrueColor.

Une histoire de profils

Suite à cela, puisque j’ai entendu parler des profils ICC dont vous pouvez en savoir plus dans cet article Wikipédia, j’ai fait des recherches pour finalement trouver de la documentation concernant l’utilisation de ces fichiers dans Gimp, et sur le fait que l’utilisation du mode sRGB est recommandée pour les éléments de design pour sites Web. Je cherche donc dans la documentation de Gimp pour finalement trouver ce lien où j’ai trouvé le fichier que j’utilise maintenant. Par contre, je ne me souviens plus trop lequel j’avais pris parmi les deux premiers puisque je l’ai renommé, mais il me semble que c’était le premier. En tout cas, les gimpeurs pourront tester, mais dans mon cas, une fois que j’ai chargé le fichier dans mes préférences de la gestion des couleurs, j’ai testé en assignant ce profil à l’un des morceaux du cadrage du style ProValentina tout en enregistrant sans gamma. Le résultat : Plus aucun assombrissement, que ce soit sous IE ou FF, comme vous pouvez le voir dans la partie gauche du cadrage ProValentina sur mon forum phpBB3 de tests.

Puisque j’ai fait le design de ce blog après la découverte, ce design en a donc bénéficié !

Cette aventure m’a aussi fait réaliser que je devrais utiliser plus souvent le GIF ou le PNG indexé pour les images ayant peu de couleurs afin de réduire le poids des images.

Maintenant, avec tout ça, il me faudra mettre à jour tout mes styles et designs pour corriger ce problème de couleurs, ouille !