Encore une nouvelle version de The ASW

cgo2 — Thu, 29 Mar 2007 12:24:00 +0200

Et de 7 ! Cette nouvelle version de The ASW est la septième du nom, ce qui fait un peu plus d'une par an depuis la création du site dans les années 2000. Au programme, comme d'habitude, des fonctionnalités en plus et... des fonctionnalités en moins.

Dans les « en plus », il y a les fortunes du channel #asw à droite (cliquez dessus pour les rafraichir, et tant pis pour ceux qui ont désactivés Javascript), des mots clés associés à chaque billet (les fameux « tags ») pour naviguer plus facilement, des archives pour voir les anciens billets, et d'autres bricoles qui font bien « web 2.0 ».

Dans les « en moins », dites au revoir à la galerie de photos qui ne servait à rien d'autre qu'à se faire spammer la tronche. D'ailleurs, au moment de transférer la base de données, j'ai eu la surprise de constater qu'elle avait atteint environ 160 Mio... dont 155 Mio de spam. Merci aux 23 163 commentaires (!) de spam accumulés dans la galerie, pour laquelle le plugin anti-spam Spamplemousse ne fonctionnait pas... Un petit extrait de la table en question :

| Name                 | Type   | Row_format | Rows   | Avg_row_length | Data_length
| dc_galComment        | MyISAM | Dynamic    |  23163 |           7042 |   163136712

Un design de la mort qui tue

J'ai réalisé tout le graphisme avec The GIMP, le premier logiciel libre de graphisme conçu par des experts anti-ergonomes (l'inverse des ergonomes : ils conçoivent les interfaces les moins pratiques possibles). C'est un euphémisme de dire que j'ai particulièrement galéré pour réaliser le design, mais enfin, je suis bien content du résultat, et finalement, c'est le principal.

Les trucs techniques

Le site est transféré chez mon grand ami l'hebergeur OVH, non pas parceque je suis convaincu par ses qualités, mais parceque l'ancien hebergeur, Online.net, était vraiment à la bourre au niveau technologique (MySQL 3 et pas de possiblité de migration). Au moins maintenant, tous mes domaines sont au même endroit.

Dotclear fait place à la future nouvelle version pas encore terminée, DotClear 2 bêta 6, dont le cycle de développement n'a rien à envier celui de Duke Nukem Forever (début des dev on ne sait pas quand, en version bêta depuis août 2006 (!) ). Je l'ai choisi car la migration depuis la précédente version était facile, mais un jour j'écrirai un billet sur ce que je pense de ce logiciel et des gens qui s'en occupent (vous vous en doutez, pas vraiment du bien). Quand j'aurais le temps, je tenterai bien une migration vers Wordpress...

Pour conserver les adresses de Dotclear version 1 (parcequ'évidemment, ils ont changés la façon de générer les URLs dans la version 2), j'ai utilisé mod_rewrite. Au passage, j'ai également supprimé le index.php qui apparait par défaut dans l'URL. Voici les règles de mon fichier .htaccess, adaptées pour OVH (qui utilise son système propriétaire ORT) :

SetEnv PHP_VER 5
mod_gzip_on 0ff

<IfModule mod_rewrite.c>
	RewriteEngine On

	# http://olivierm.cigogne.org/post/2006/12/31/Migration-DotClear-2
	# Compatibilité du chemin des images d'un blog migré de DotClear 1
	RewriteRule  ^images/(.*)$ /public/$1 [NC,L,R=301]
	RewriteRule  ^files/(.*)$ /public/$1 [NC,L,R=301]

	# compatibilité des liens directs vers les billets et RSS (URL DotClear1)
	RewriteRule ^articles/([0-9]{4}/[0-9]{2}/[0-9]{2}/[0-9a-z\-]+)$ /post/$1 [NC,L,R=301]

	# compatibilité des flux
	RewriteCond %{SCRIPT_FILENAME} !-f
	RewriteCond %{SCRIPT_FILENAME} !-d
	RewriteCond %{SCRIPT_FILENAME} !-l
	RewriteRule ^rss\.php /feed/rss2 [NC,L,R=301]
	RewriteRule ^atom\.php /feed/atom [NC,L,R=301]
	
	# Suppression du "index.php"
	RewriteCond %{REQUEST_FILENAME} !-f 
	RewriteCond %{REQUEST_FILENAME} !-d 
	RewriteRule ^(.*)$ /index.php?$1 [QSA,L]  
</IfModule>

Maintenant, comme on dit dans les quartiers chics du Web, « LacHé Vo Kom's LoL !! ».

Réaliser un texte façon web 2.0 avec The GIMP

cgo2 — Tue, 27 Mar 2007 16:10:00 +0200

Le web 2.0, ce n'est pas seulement des API, des feeds et du JSON, c'est aussi une tendance graphique. Il existe sur Internet un paquet de tutoriaux pour les apprentis webdesigners comme moi, mais, malheureusement, la plupart sont pour Adobe Photoshop, logiciel très puissant, certes, mais qui deux inconvénients majeurs : il n'est pas libre et il ne fonctionne pas sous Linux. Voici donc un tutorial pour les utilisateurs de The GIMP...

Etape 1

Commencez par créer un nouveau document blanc et insérez votre texte avec l'outil du même nom.

Utilisez de préference une police sans-serif et, évidemment, libre d'utilisation. Ici Boris Black Bloxx en taille 62px.

L'outil Texte de GIMP 2.2 étant ce qu'il est (c'est-à-dire tout pourri), il n'est pas possible de mettre plusieurs couleurs dans une zone de texte. Il faut donc ruser en créeant une zone de texte pour chaque mot et en les alignants correctement. Ici le calque « The » est en #666666 et le calque « ASW » est en #669966. Attention, ces couleurs seront éclaircies dans le rendu final.

Etape 2 : Dégradé

Créez un nouveau calque transparent, positionné par dessus les calques de textes.

Avec l'outil Dégradé, remplissez le calque par un dégradé du noir vers le blanc (noir en bas, blanc en haut). Ensuite, dans la fenêtre des calques (si elle n'apparait pas, utilisez la combinaison de touches Ctrl + L), sélectionnez le mode de fusion « Lumière douce ».

Etape 3 : Contour interne

Maintenant il s'agit de créer un contour au texte. Vu que GIMP n'a pas d'option toute faite pour ça, il faut ruser. C'est maintenant que le texte va être éclaircit.

D'abord, il faut regrouper les calques de textes dans un seul afin de pouvoir travailler sur des sélections (je n'ai pas trouvé de manière plus propre de faire ça !). Dupliquez chaque calque de texte, placez les les uns au dessus des autres et utilisez la fonction « Fusionner vers le bas » (clic droit sur le calque dans la fenête des calques). Au final, il faut obtenir un seul calque qui contient tous les mots. Vous pouvez masquer ce calque, qui ne sert qu'à obtenir des sélections.

Faites un clic droit sur ce calque dans la fenête des calques, puis « Alpha vers Sélection ». Vous devriez obtenir une selection de la forme du texte. Sans la perdre, créez un nouveau calque transparent et selectionnez le.

Dans le menu « Sélection », choississez la fonction « Réduire » de 1 pixel (ou plus, selon les goûts). Ensuite, remplissez la selection de blanc et choississez le mode de fusion « Superposer ». Si besoin, modifiez l'opacité pour obtenir l'effet souhaité.

Etape 4 : Ombre

Pour créer une ombre avec GIMP, il faut créer un nouveau calque, le placer dessous, et utiliser une option de flou. Oui, c'est super pratique.

Dupliquez le calque créé à l'étape 3 qui contient la totalité du texte. Faites un clic droit dessus dans la fenêtre des calques puis « Eliminer le texte d'information ».

Dans le menu « Calque », choisissez « Calque aux dimensions de l'image ». Ensuite, toujours dans le même menu, choisissez « Couleurs » puis « Luminosité-Contraste ». En mettant la luminosité au minimum (-127), on obtient un texte tout noir.

Enfin, dans le menu « Filtres », choisissez « Flou » puis « Flou Gaussien ». Vous pouvez choisir n'importe quelle taille de flou, mais il faut prendre en compte le fait qu'on va ajouter un contour blanc dans l'étape suivante. Ici c'est un flou de 11 pixel.

Enfin, placez ce calque sous les calques de textes pour obtenir l'effet d'ombre.

Note : Si le flou n'apparait pas, vérifiez que la case « Garder la transparence » (dans la fenêtre des calques, à côté du choix du mode de fusion) n'est pas cochée.

Etape 5 : Contour externe

Dernière étape : on ajoute un gros contour blanc. Encore une fois GIMP ne sait pas le faire tout seul, donc il faut se débrouiller autrement.

Refaite la manipulation de l'étape 3 pour obtenir une sélection de la forme du texte (« Alpha vers Sélection », etc.). Sans perdre la selection, créez un nouveau calque transparent. Dans le menu « Sélection », choississez la fonction « Agrandir » de 3 pixels (ou plus, selon les goûts). Puis remplissez la sélection de blanc.

Enfin, placez cette sélection sous les calques de texte. C'est fini, vous avez un maginifique texte façon web 2.0 !

Note : Plutôt que de faire une gros flou à l'étape 4, une autre possibilité consiste à d'abord agrandir la sélection pour prendre en compte le contour blanc, puis de faire un flou plus petit. L'effet est globalement similaire.

The ASW - gimp