Xieme-Art a fini de travailler pour un ami...

J'en avais parlé ici il y a quelques mois, mais le voilà enfin fini : le thème Dotclear pour mon cher ami girollien Bastien... La création de ce thème a été révélatrice à plus d'un titres. J'ai d'abord appris à apprécier GIMP, découvert jQuery et dernièrement yuicompressor. Bien entendu, ce thème est libre, mais en plus, je vous fournis tout les fichiers sources pour que vous puissiez le modifier à votre guise.

Quelques précision concernant le thème

Pour l'instant, ce thème ne contient ni les Archives, ni les rétro-liens, ni les catégories. En effet, Bastien n'utilise pas ces trois éléments. Cependant, dans un avenir proche, il n'est pas exclu que je les ajoute (sinon, vous pouvez le faire...). Il est aussi incompatible avec Internet explorer 6 et inférieur.

C'est Bastien qui a écrit tous les titres, ils sont photographiés puis vectorisés avec Inkscape. Les petits dessins au trait sont faits sous Gimp avec une tablette graphique.

Ma méthode de travail

le gabarit général

La première étape est la construction d'un gabarit avec Inkscape. Pourquoi Inkscape? Tout simplement la facilité avec laquelle les élément peuvent être re-dimensionnés, les dégradés modifiés, les objets déplacés sans altérer la définition. Je créé dont un document de 960px de large (la largeur optimale pour un site internet non fluide), si besoin est, je place des guides en fonction des différentes partie de mon layout XHTML (bandeau haut, contenu, pied de page, menu de navigation etc...).

C'est aussi avec Inkscape que je créé la majeur partie des éléments graphiques (clé USB, post-it, badges etc...).

le travail des pixels sous GIMP

Le vectoriel, c'est bien, mais c'est un peu trop propre, surtout pour un design de type carnet de notes... Je me sert donc de GIMP pour "dégrader" un peu tout ça, mais aussi pour assurer la découpe de certains éléments (la page, les commentaires...). J'exporte les images soit en png (pour les transparentes) soit en jpeg (pour les autres histoire d'optimiser la taille).

Notez tut de même que je ne retravaille pas toutes les images avec Gimp, certaines comme la clé USB ou le stylot sont directement exportées depuis Inkscape.

l'assemblage

L'assemblage XHTML se fait tout simplement avec gedit sous forme d'un fichier autonome en XHTML. Cet outil est simple, paramétrable et suffisamment complet pour les petits projets comme celui-ci. Le "débuggage" se fait à l'aide de Firefox avec Firebug, et je teste le site sur différents navigateurs (Firefox, Opera, Safari, Internet Explorer 7 et+). Une fois le fichier bien en place, il ne reste plus qu'à transformer le tout en véritable thème Dotclear.

Pour ce, j'installe ce fabuleux moteur de blog sur un serveur de test avec un export du blog à relooker histoire de tester en situation réelle. Comme je suis un fainéant, je n'ai pas de serveur local Apache/PHP/MySQL. Je le met donc sur mon espace de mon hébergeur (mon ami Antoine). Gnome étant mon ami, il me permet de monter un espace FTP comme une unité locale. Je travaille donc sur le serveur distant comme sur un répertoire local, pratique non?

Une fois l'intégration terminée, il ne reste plus qu'a parcourir le blog de test à la recherche d'erreur de design pour les corriger, histoire de livrer un thème vraiment adapté. Ensuite, je passe le tout à la moulinette YSlow histoire de voir combien tout cela pèse (pour ce thème, c'est un peu lourd...) et ce qu'il faut optimiser.

optimisation des fichiers.

D'abord, j'optimise les fichiers png à l'aide d'optipng. Sous Ubuntu, un simple sudo aptitude install optipng l'installe et un simple optipng -o7 imgs/*.png réduit parfois de manière très significative le poids de tout les png contenu dans le répertoire img.

Ensuite les fichiers CSS / JavaScript avec le fabuleux YUICompressor. Pour l'installer, il suffit de télécharger ici l'archive, d'extraire le fichuer yuicompressor.jar dans le répertoire /yuicompressor-2.4.2/build/. Notez qu'il a besoin d'un machine virtuelle java pour fonctionner. Pour l'utiliser avec un CSS :

java -jar yuicompressor --type css /repertoire/css/fichier.css -o /repertoire/css/fichier.css.

Attention cependant, le fichier CSS deviendra difficilement visible, veillez à garder une sauvegarde histoire de modifier des trucs et des choses facilement...

Pour les fichiers javascript, c'est pratiquement la même commande :

java -jar yuicompressor --type js /repertoire/js/fichier.js -o /repertoire/js/fichier.js

et voilà

Voila pour la méthode de travail sur ce projet. c'est bien entendu assez idéalisé, les allez retours entres étapes étant relativement fréquent, surtout pour un travail comme celui-ci ou le commanditaire laisse carte blanche.

Les fichiers sources

Voici donc le moment tant attendu, la livraison des sources, mais avant de commencer, un petit laïus sur la licence, c'est toujours un peu rébarbatif, mais au final pas très compliqué : tout ce beau monde est sous Creative Commons 3.0 By-Sa. En clair utilisez, transformez partagez, citez. Si vous réutilisez ce travail, un petit mot pour me montrer ce que vous avez fait est toujours le bienvenu, je suis curieux...

Notez cependant que le plugin JQuery Shadowise contenu dans ce thème est sous licence GPL 2.0.

Voilà donc le fichier SVG à ouvrir avec Inkscape, une archive très lourde (15,3Mo) contenant les fichiers GIMP et enfin le thème Dotclear en lui même (qui n'est pas optimisé avec yuicompressor pour des question de lisibilité).