« | »

Du nouveau dans mon design !

Ces trois derniers jours, je me suis replongée dans les méandres de WordPress, du PHP et du CSS pour apporter quelques petites modifications à mon blog.

D’abord, j’ai ajouté une petite touche de finition dans le design de mon blog : les coins arrondis. Vous ne les voyez peut-être pas encore, suivant le navigateur que vous utilisez, car c’est une propriété de CSS 3, qui n’est pas encore mise dans tous les navigateurs ! Si vous utilisez Safari ou Chrome ou Opera vous les voyez certainement, sinon il faut avoir les versions bêta de Firefox 4 ou Internet Explorer 9 pour en profiter. Ce n’est probablement pas visible, mais j’ai dû repenser la structure de certains éléments de mon blog pour pouvoir le mettre en place : les coins arrondis ça pardonne moins facilement que des rectangles parfaits ! Mais depuis sa création, mon blog me semblait manquer de quelque chose, il me laissait une impression d’inachevé, et je pense que les coins arrondis ça lui donne vraiment un air plus fini.

Ensuite, je me suis penchée sur les avatars des gens dans mes commentaires. Si vous avez un compte sur Gravatar, ça affichait (et ça affiche toujours d’ailleurs) votre avatar personnel. Mais la plupart des gens n’on pas de compte Gravatar, et donc ils avaient tous le même avatar gris neutre et terne qui ne me plaisait pas vraiment. Quand j’ai créé mon blog, j’avais bien cherché mieux, mais les générateurs d’avatars existants ne me plaisaient pas, et je ne savais pas trop quoi mettre comme images à la place.

Il y a trois jours, donc, j’ai trouvé quoi mettre comme images ! J’allais générer des avatars aléatoirement grâce à mon cher ami Context Free Art Grammar :) J’adore ce logiciel, parce que j’aime bien programmer et j’aime faire des images sur ordinateur, et il allie les deux ! D’ailleurs, je ne crois pas l’avoir dit, mais les arbres qui servent de fond à ce blog ont été générés avec Context Free et du code que j’ai écrit et j’ai ensuite peint les feuilles dans GIMP. D’ailleurs j’ai écrit un tutoriel sur la génération d’arbres avec Context Free si vous voulez essayer ! Pour en revenir à mes avatars, j’avais déjà pensé à Context Free pour les générer, mais faire un code qui produise des avatars assez différents les uns des autres pour être reconnaissables, et qui soit en plus jolis, ce n’est pas évident ! Et récemment, mycelium, un habitué de la galerie Context Free Art a publié sa création qui répondait à ces deux critères :D

Ensuite venait le problème de générer assez d’avatars différents pour qu’on ne retombe jamais sur les mêmes. Et générer une image, et l’enregistrer avec un nom chaque fois différent (forcément sinon ça efface la précédente) des dizaines de fois, c’est plutôt fastidieux et rébarbatif. Alors en bonne geek que je suis, j’ai cherché sur la toile comment écrire un petit script qui me ferait ça automatiquement :p Et donc, j’ai pu faire en sorte qu’en tapant une simple petite commande dans la console de mon Linux, ça me génère 400 avatars numérotés en moins de trois minutes. Je n’ose même pas imaginer combien de temps ça me prendrait à faire à la main !

En voici quelques uns :

Exemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatarExemple d'avatar

Ensuite il me fallait un plugin qui attribue un avatar à chaque personne, et toujours le même pour cette personne. J’ai trouvé Wavatar, qui attribue un avatar à chacun en se servant de l’adresse e-mail renseignée. Comme il génère des petits monstres plutôt que les avatars que je veux, j’ai dû me plonger dans son code pour le modifier. Et puis gros problème aussi, dans les commentaires que je rapatrie de mon ancien blog, il n’y a pas d’adresse mail ! J’ai donc dû encore plus le modifier pour que, s’il n’y a pas d’adresse mail, il regarde le pseudonyme de l’auteur du commentaire afin que tout le monde puisse avoir son propre avatar. Ça a bien été le casse-tête, mais vous l’aurez remarqué, j’aime bien ce genre de petits défis !

Ah et au fait…

Bonne année !

    8 commentaires pour “Du nouveau dans mon design !”

  1. Wavatar

    J’en connais une qui a dû s’amuser comme une folle ! :p
    Bonne année !!!!!
    Gros bisous

  2. Wavatar

    Ouaip ! :p
    D’ailleurs je suis obligée de copier coller ton adresse mail partout parce que sinon t’as pas le même avatar dans les commentaires que tu as fait dans les vieux articles ! Mais ça c’est parce que c’est moi qui le veux bien :p

  3. Wavatar

    Rahlala le petit détail qui tue !!!! lol
    Et pour les avatars je me suis aussi posé le problème mais je n’y ai pas apporté une solution aussi aussi élaborée que la tienne :D
    Et bonne année à toi aussi !!!!!

  4. Wavatar

    N’oublie pas que safari/chrome-ium/opéra utilisent webkit, mais mozilla utilise son propre système, il faut donc également mettre -moz- dans tes css (et oui, ça fait répétition :s )

  5. Wavatar

    Comme je disais, la version 4 de Firefox supportera cette propriété CSS. Comme elle va sortir bientôt, et que certains ont déjà la bêta, il va très vite ne plus avoir besoin de mettre -moz- pour avoir les bords arrondis sous Firefox, et j’ai pas trop envie de mettre ça dans mon CSS ! Ça faisait un an et demi que les bords étaient carrés, les utilisateurs de Firefox peuvent bien attendre quelques mois ;)

  6. Wavatar

    Tu vois, tu es meilleure que moi maintenant ;)

  7. Wavatar

    Salut Lydie! Alors que deviens-tu? Je pensais que tu n’écrivais plus dans ton blog mais je suis passée aujourd’hui et en fait si. :) J’aimerais bien discuter avec toi et je n’ai plus windows live messenger, est-ce que tu as facebook ou un autre site?

  8. Wavatar

    Mouna> Je t’ai envoyé un mail !

Laissez un commentaire

Votre commentaire

:) :p ;) :D :lol: :( :(( (angry) :s :| :-O (o_O) -_- (oue)

Si vous savez vous en servir, vous pouvez utiliser ces balises xhtml :<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Votre adresse email ne sera pas divulguée.
Elle me sert à afficher votre avatar si vous en avez enregistré un sur Gravatar et à vous identifier comme visiteur honnête lors de vos prochains passages.

Les avatars aléatoires ont été générés avec le logiciel Context Free Art grâce au code créé par mycelium.