Ergonomie, Rails et Architecture de l'information web (2.0)

Ebay n’en est pas à sa première provocation stupide en termes d’accroche client. Après son désormais célèbre “pas content de vos cadeaux de Noël ? Revendez-les sur Ebay”, le numéro 1 des enchères en ligne s’attaque à la Saint Valentin avec un message délicat, raffiné, et sans aucun stéréotype.

Voyez plutôt :

Monsieur, si vous êtes “pour” la Saint Valentin, Ebay vous propose d’offrir à votre douce bijoux, foulard, ou lingerie. Quant à vous, mesdames, quoi de mieux qu’une belle montre, une… cravate – quelle originalité – ou quelques bouteilles d’un excellent cru millésimé pour faire plaisir à votre mâle dominant ?

Mais si vous êtes contre la Saint Valentin – ou célibataire, ça marche aussi – vous pourrez toujours vous offrir une collection de films d’action, un écran plasma, ou (sic) un maillot de foot.

Quand je lis les billets de Frédéric Cavazza sur le marketing personnalisé, je me dis qu’Ebay a encore bien du chemin à faire : je déteste les films, je ne regarde plus la télé depuis 1995, et je considère le foot comme le comble de la beaufitude, un peu comme les messages marketing d’Ebay d’ailleurs. Il doit y avoir un lien de cause à effet.

Vendredi dernier, je devais conseiller au pied levé un ancien camarade d’école, deux promotions en dessous de moi, confronté à un dilemme cornélien quant à son avenir professionnel : à salaire, clients et avantages égaux, valait-il mieux qu’il fasse son stage de fin d’études dans une petite ou une grosse SSII ? Souvent considérées – pas toujours à tort – comme les négriers du XXIème siècle, les Sociétés de Services en Ingénierie Informatique représentent aussi un formidable tremplin pour les jeunes diplômés, à condition de ne pas craindre les heures supplémentaires. Grands comptes, projets d’envergure, missions de longue durée permettent de se constituer très rapidement un CV alléchant, propre à vous faire rejoindre quelques années plus tard la DSI d’un de vos anciens clients, ou à vous constituer le réseau professionnel dont vous aurez besoin le jour où vous voudrez voler de vos propres ailes. Le tout est de bien commencer, et de savoir quand s’arrêter.

Je ferai un saut au salon Solutions Linux – ex Linux Expo – mercredi, jeudi et vendredi entre midi et deux afin de revoir pas mal de gens de l’espace associatif que je n’ai pas croisé depuis plusieurs années.

À la fin des années 90, la Linux Expo était le point de rencontre annuel d’un très grand nombre de geeks de l’hexagone, et la meilleure manière que j’ai jamais vue de refaire gratuitement sa garde robe grâce à IBM et VA Linux. Depuis, les choses ont pas mal changé, le 11 septembre est passé par là, les distributions de t-shirts à la volée ont été remplacée par de plus discrets et moins coûteux stylos, mais l’espace associatif existe toujours.

Si jamais vous y passez et que vous voulez que nous déjeunions ensemble, n’hésitez pas à me laisser un mail.

La version à venir de la Debian apporte son lot de mises à jour intéressantes, et parmi elles, pas des moindres, l’arrivée d’Apache 2.2 en tant que serveur web par défaut et de Ruby 1.8.5, propre à faire tourner Ruby on Rails dans de bonnes conditions. Alors pourquoi ne pas franchir le pas et enfin vous mettre à ce merveilleux framework dont vous entendez monts et merveilles depuis bientôt 4 ans, d’autant qu’on vous prend par la main pour mettre en place votre environnement de développement. Un didacticiel pour vous emmener pas à pas vers le paradis des applications web (rien que ça).

Apache 2.2 et Mysql5

Dans un premier temps, vous allez installer le serveur web Apache 2.2, et la version 5.0 de la base de données MySQL. Ce didacticiel ne traite pas encore de PostgreSQL, mais ça ne saurait tarder.

7el.net:~$ sudo aptitude install mysql-client mysql-server apache2-mpm-prefork apache2.2-common apache2-utils
[...]
7el.net:~$ sudo a2enmod rewrite

Normalement, aptitude devrait vous demander un mot de passe pour l’administrateur. Si ce n’est pas le cas, tapez juste

7el.net:~$ mysqladmin -u root -h localhost -p 'toto'

Mod_fcgid 2.0

Malheureusement pour les utilisateurs de Ruby on Rails – et d’une manière générale pour n’importe quelle application utilisant fastcgi, trac par exemple si vous ne souhaitez pas installer modpython – Etch n’inclut pas le module Apache modfcgid pour la version 2.2 du serveur. Le paquetage est en effet cassé, et seule la version pour Apache 2.0 est supportée. Il vous faudra donc à priori choisir entre :

• Installer Apache 2.2, PHP5 et vous passer de mod_fcgid.
• Ou bien installer Apache 2.0 et mod_fcgid, mais vous passer de PHP5 (pourquoi pas).
• Ou encore backporter mod_fcgid depuis la version unstable de la Debian.

Vous allez donc télécharger les sources de mod_fcgid depuis la version unstable de Debian, puis reconstruire et installer le paquetage.

Commencez par ajouter la ligne suivante à votre fichier /etc/apt/sources.list :

deb-src http://mirrors.kernel.org/debian unstable main contrib non-free

7el.net:~$ sudo aptitude update 7el.net:~$ cd /tmp
7el.net:/tmp$ sudo apt-get build-deps libapache2-mod-fcgid-2.0
[...]
7el.net:/tmp$ apt-get -b source libapache2-mod-fcgid-2.0

Et là, c’est le drame : au moment d’activer le module à l’aide d’a2enmod, dpkg vous annonce “ce module n’existe pas”. Pour une raison que j’ignore, le paquetage n’a pas copié les fichiers fcgid.conf et fcgid.load dans /etc/apache2/mods-avaliable. Pas de panique, vous allez le faire et tout va rentrer dans l’ordre.

7el.net:/tmp$ cd libapache2-mod-fcgid-2.0/debian
7el.net:/tmp/libapache2-mod-fcgid-2.0/debian$ sudo cp fcgid.load fcgid.conf /etc/apache2/mods-avaliable
7el.net:/tmp/libapache2-mod-fcgid-2.0/debian$ a2enmod fcgid
7el.net:/tmp/libapache2-mod-fcgid-2.0/debian$ /etc/init.d/apache2 restart


Toi aussi tu veux un mod_fcgid avec bas de caisse, phasres violets et une sono de 10000 watts ?

Afin de bénéficier de meilleures performances, nous allons modifier la configuration de base de mod_fcgid. Remplacez le fichier /etc/apache2/mods-available/fcgid.conf par ceci :

<IfModule mod_fcgid.c>
  AddHandler fcgid-script .fcgi
  SocketPath /var/lib/apache2/fcgid/sock
  IPCConnectTimeout 6
  IdleTimeout 60
  ProcessLifeTime 6000
  MaxProcessCount 32
  DefaultMaxClassProcessCount 5
  IPCConnectTimeout 6
  IPCCommTimeout 6
</IfModule>

La signification de tout ceci peut sembler obscure, aussi quelques éclaircissements s’imposent.

• AddHandler fcgid-script .fcgi : nous disons explicitement à Apache d’exécuter tous les fichiers portant l’extension .fcgi avec mod_fcgid.
• SocketPath /var/lib/apache2/fcgid/sock : le chemin de la chaussette à l’aide de laquelle Apache et le serveur de fcgi vont communiquer.
• IPCConnectTimeout 6 : timeout d’une connexion à un processus fcgi.
• IdleTimeout 60 : une application lancée par fcgi se terminera après 60 secondes d’idle. Cela permet de ne pas avoir trop de processus lancés en même temps.
• ProcessLifeTime 6000 : durée maximum d’un processus fcgid.
• MaxProcessCount 32 : nombre maximum de processus fcgid lancés en parallèle. À ajuster en fonction de la charge de votre serveur.
• DefaultMaxClassProcessCount 5 : nombre maximum d’instances d’une même application fcgid pouvant être lancées en parallèle.
• IPCConnectTimeout 6 : timeout d’une connexion à un processus fcgid.
• IPCCommTimeout 6 : timeout d’une communication avec un processus fcgid.

Vous ne trouvez pas ça tellement plus clair ? Ce n’est pas grave, et ça ne vous empêchera pas d’avancer plus avant dans ce didacticiel.

Ruby et Gem

Vous allez maintenant installer Ruby, rdoc et irb depuis les paquetages Debian, puis Gem à l’aide des sources afin de bénéficier de la toute dernière version. Gem est le gestionnaire de paquetages de Ruby, un outil absolument indispensable.

7el.net:~$ sudo aptitude install ruby1.8 rdoc irb
[...]
7el.net:~$ cd /usr/bin
7el.net:/usr/bin$ sudo ln -s ruby1.8 ruby


Récupérez maintenant les sources de la dernière version de Gem, actuellement la 0.9.1, et installez la.

7el.net:/usr/bin$ cd /tmp
7el.net:/tmp$ wget http://rubyforge.org/frs/download.php/16452/rubygems-0.9.1.tgz
[...]
7el.net:/tmp$ tar xvzf rubygems-0.9.1.tgz
7el.net:/tmp$ cd rubygems-0.9.1
7el.net:/tmp/rubygems-0.9.1$ sudo ruby setup.rb


Rails, MySQL et fcgid

Il reste que Ruby ne peut pas encore converser avec fcgid ni avec MySQL – ou PostgreSQL si vous avez opté pour cette solution.

Dans un premier temps, il va vous falloir installer les en-têtes des librairies nécessaires à l’installation des gems mysql et fcgid :

7el.net:~$ sudo aptitude install libmysqlclient-dev libfcgi-dev
7el.net:~$ sudo gem install mysql
7el.net:~$ sudo gem install fcgid


Typo

Typo dispose d’un programme d’installation, mais il implique d’utiliser SQLite en tant que base de données. Vous allez donc commencer par récupérer la dernière version de l’application sur Typosphere (hébergé ici à partir de demain ou après demain, le temps de terminer ma conf), et créer une base de données pour votre application.

Pas une mais 3 bases

Nous allons en fait créer 3 bases de données, correspondant aux 3 environnements d’une application Rails : développement, production et test.

7el.net:~$ mysql -u root -p
[...]
mysql> create database typo;
mysql> grant all privileges on typo.* to 'typo'@'localhost' identified by 'typosaibo'
mysql> create database typo_dev;
mysql> grant all privileges on typo_dev.* to 'typo'@'localhost' identified by 'typosaibo'
mysql> create database typo_test;
mysql> grant all privileges on typo_test.* to 'typo'@'localhost' identified by 'typosaibo'


7el.net:~$ cd /var/www
7el.net:/var/www$ sudo wget http://rubyforge.org/frs/download.php/12504/typo-4.0.3.tgz
7el.net:/var/www$ sudo tar xvzf typo-4.0.3.tgz
7el.net:/var/www$ sudo mv typo-4.0.3 typo


Nous allons maintenant configurer la base de données de Typo :

7el.net:/var/www$ cd typo
7el.net:/var/www/typo$ sudo vim config/database.yml
7el.net:/var/www/typo$ sudo rake RAILS_ENV=production db:migrate


Les petites particularités d’Apache 2.2

Parmi les nouveautés d’Apache 2, nous avons le retrait du support des options du .htaccess. Nous allons donc devoir supprimer une ligne de celui de Typo et les ajouter dans le vhost Apache que nous allons créer pour lui.

7el.net:/var/www/typo$ sudo vim public/.htaccess

La ligne incriminée :

Options +FollowSymLinks +ExecCGI

Notre virtualhost va alors ressembler à :

7el.net:/var/www/typo$ sudo vim /etc/apache2/sites-avaliable/typo

<VirtualHost 87.106.13.102:80>
  ServerAdmin root@typo
  DocumentRoot /var/www/typo/public
  Options +FollowSymLinks +ExecCGI
  ServerName typo.t37.net

  CustomLog /var/log/apache2/log.typo.t37.net combined
  Errorlog /var/log/apache2/error.typo.t37.net
</VirtualHost>

Il s’agit évidemment d’une configuration minimale, qui permet à Typo de tourner. Il ne nous reste plus qu’à activer le site et à redémarrer Apache.

7el.net:/var/www/typo$ sudo a2ensite typo
7el.net:/var/www/typo$ sudo chown -R www-data:www-data *
7el.net:/var/www/typo$ sudo /etc/init.d/apache2 restart


Et voilà, ça marche.

Afin de lutter contre le spam, Wikipedia vient d’ajouter l’attribut rel="nofollow" sur tous ses liens externes. C’est du moins ce qu’annonce Google Blogoscoped, et un simple coup d’oeil sur une page de l’encyclopédie communautaire permet de s’en assurer.

rel=”nofollow” ?

La croissance des blogs depuis 2002 a entraîné une nouvelle pratique dont nombre d’entre vous ont certainement été victimes : le spam de commentaires. Des robots viennent déposer un commentaire contenant des mots clés précis et pointant vers leur URL sur votre blog afin de faire monter leur page rank Google.

La situation est très rapidement devenue incontrôlable, et les causes en sont multiples :

• Le peu d’outils de blogging différents, qui permet de créer peu de versions des scripts de spam.
• La quantité de blogs et de wiki sur lesquels il est possible de publier des commentaires et des pages sans authentification (et même avec, ça ne change pas grand chose, particulièrement sur les wiki).
• L’absence – à l’époque – de solutions de lutte contre le spam efficaces.

Il a donc fallu rapidement trouver une solution, sous peine de voir tout le système du pagerank s’écrouler sur lui-même. C’est le microformat rel="nofollow". La présence de l’attribut “nofollow” dans un lien indique aux outils de recherche que ceux-ci ne doivent en aucun cas suivre le lien donné dans leur récolte. Ce lien externe n’est dont pas pris en compte dans l’indexation de la cible, et les spammeurs en sont pour leurs frais.

La mort du page rank ?

Le pagerank d’un site se base non seulement sur la quantité de liens externes pointant vers lui, mais également sur le pagerank des pages liant ce site. Il y a donc un certain principe de réciprocité : un site fortement lié agira fortement sur le pagerank des sites qu’il met en lien.

En appliquant l’attribut rel="nofollow", Wikipedia vient de casser ce principe de manière inquiétante : l’encyclopédie en ligne possède en effet un très fort pagerank, et chacune de ses pages (23 millions selon Google) est également très bien cotée au point d’apparaître dans les 10 premiers résultats d’à peu près n’importe quelle recherche sensée (je précise pour les petits plaisantins qui chercheraient des choses absurdes ou n’existant pas dans le seul but de me contredire). Elle récupère donc tout le bénéfice de ses liens entrants, sans toutefois rendre la pareille à ceux qui la lient. Et vue l’importance du site, on est en droits de craindre

• Que ce genre de pratique devienne systématique sur toutes les grosses publications.
• Que le page rank finisse par perdre complètement sa valeur suite à la sortie de la boucle des sites les mieux cotés.

On lit régulièrement à gauche et à droite (sic) que les standards du web gagnent du terrain, que les usages changent y compris dans le grand public, que ce soient grâce aux pionniers de l’évangélisation ou à la généralisation des plates-formes de publication générant du code conforme aux standards du web. En un mot, il parait que Monsieur Tout Le Monde produit aujourd’hui un XHTML parfaitement valide, accompagné de feuilles de style valides elles-aussi, légères et bien optimisées. Il parait aussi que l’open source et les logiciels libres gagnent du terrain, que ce soient chez les grands comptes ou dans l’administration, et que le monde entier va bientôt communier dans la liberté des outils, des formats et des idées. Seul une petite enclave américaine, dans la province de Redmond, résisterait encore à l’envahisseur…

Comme je n’avais pas grand chose d’autre à faire de ma matinée, je me suis penché sur les sites de campagnes des différents candidats à l’élection présidentielle de 2007, qu’ils détiennent ou non leurs 500 signatures, et sur leurs usages. J’en ai tiré deux tableaux récapitulatifs, le premier sur les technologies utilisées, et le second sur les standards du web, et les résultats ne sont pas bien glorieux.

La technologie

Pour cette première partie, mes critères de sélection étaient :

• Système d’exploitation.
• Serveur Web.
• Technologie utilisée.

Candidat	Parti	Système d’exploitation	Serveur Web	Technologie
François Bayrou	UDF	Linux Mandriva	Apache 2.2.23	PHP
Frédéric Nihous	CPNT	Linux	Apache 1.3.33	Frontpage (?)
Ségolène Royal	PS	Debian	Apache 1.3.33	PHP
Nicolas Sarkozy	UMP	Linux	Apache 1.3.33	PHP
Gérard Schivardi	RDL	Linux	Apache	?
Dominique Voynet	Les Verts	Linux	Apache	PHP (Dotclear)
Olivier Besancenot	LCR	Linux	Apache 2.0.54	PHP
Marie-George Buffet	PCF	Debian	Apache 2.0.54	PHP
Christian Chavrier	PF	Fedora	Apache 2.0.51	HTML
Jacques Cheminade	S et P	Debian	Apache 1.3.33	PHP
Philippe de Villier	MPF	Debian	Apache 1.3.33	HTML
Nicolas Dupont-Aignant	DLR	Debian	Apache 1.3.33	PHP (Spip)
France Gamerre	GE	Windows 2003 Server	IIS 6.0	.NET
Jean-Michel Jardy	CNI	Linux	Apache	PHP
Arlette Laguiller	LO	Linux	Apache	HTML
Jean-Marie Le Pen	FN	Linux	Apache 1.3.37	PHP
Corinne Lepage	Cap 21	Linux	Apache 2.0.58	PHP

Les systèmes d’exploitation.

Une majorité écrasante des candidats est hébergée sous Linux (94,12%) pour 5.88% de systèmes d’exploitation propriétaires.

Les distributions les plus communément rencontrées sont :

• Debian : 5 (29.41%).
• Fedora : 1 (5.88%).
• Mandriva : 1 (5.88%).

52.94% (9) des candidats n’affichent pas la version de leur système d’exploitation (et il serait particulièrement impoli d’aller à la pêche aux informations à coup de nmap sans leur demander avant).

Les serveurs webs

Là aussi, l’open source est à l’honneur, avec 94.5% d’Apaches, pour 5.88% de IIS 6.0

La répartition entre les versions donne :

• Apache 2.2 : 1 (5.88%).
• Apache 2.0 : 4 (23.52%).
• Apache 1.3 : 7 (41.17%).
• IIS 5.0 : 1 (5.88%).
• Version non communiquée : 3 (23.52%)

Langages utilisés

Curieusement, on trouve encore un certain nombre de sites n’utilisant pas de moteur de rendu, mais simplement des pages HTML statiques. PHP reste pourtant à l’honneur, et .NET arrive bon dernier.

• PHP : 11 (64,7%).
• HTML statique : 4 (23.52%).
• .NET : 1 (5.88%).

Je ne suis pas parvenu à voir ce qu’utilisait Gérard Schivardi.

Développement spécifique, solutions hébergées et open source

Une très faible majorité des candidats s’appuie sur des solutions open source (ou admettent les utiliser). Parmi elles, on trouve :

• Dotclear (Bix, on t’a reconnu) : 1 (5.88%).
• SPIP : 1 (5.88%).

La très grande majorité des candidats s’appuie sur un développement spécifique (70.58%), et seuls 17.64% utilisent des solutions hébergées :

• Blogspirit : 1 (5.8%).
• Over-Blog : 1 (5.8%).
• Haut et Fort : 1 (5.8%).

Les candidats et le standards du web

C’est là que les choses se gâtent, puisque les chiffres sont tout simplement catastrophiques : un seul site passe la validation (Nicolas Sarkozy ), une grande majorité de développements en tableaux, et beaucoup de n’importe quoi, à croire qu’un grand nombre de candidats a recyclé les sites de la campagne de 1995.

Mes critères d’étude pour cette seconde section étaient :

• Modèle de développement.
• Doctype.
• Content Type.
• (X)HTML valide
• CSS Valide

Candidat	Parti	Développement	Doctype	Content Type	(X)HTML valide	CSS valide
François Bayrou	UDF	Divs	XHTML 1.1	text/html	non	non
Frédéric Nihous	CPNT	Tableaux	Aucun	Aucun	non	Pas de CSS
Ségolène Royal	PS	Tableaux	XHTML 1.0 Transitionnal	text/html	non	oui
Nicolas Sarkozy	UMP	Tableaux	HTML 4.01 Transitionnal	text/html	oui	non
Gérard Schivardi	RDL	Tableaux	Aucun	text/html	non	non
Dominique Voynet	Les Verts	Divs	XHTML 1.0 Strict	text/html	non	oui
Olivier Besancenot	LCR	Tableaux	Aucun	text/html	non	Pas de CSS
Marie-George Buffet	PCF	Tableaux	XHTML 1.0 Transitionnal	text/html	non	non
Christian Chavrier	PF	Tableaux	Aucun	text/html	non	non
Jacques Cheminade	S et P	Tableaux	HTML 4.01 Transitionnal	text/html	non	non
Philippe de Villier	MPF	Frames	XHTML 1.0 Frameset	text/html	non	non
Nicolas Dupont-Aignant	DLR	Divs	XHTML 1.0 Transitionnal	text/html	non	non
France Gamerre	GE	Tableaux	Aucun	text/html	non	non
Jean-Michel Jardy	CNI	Tableaux	XHTML 1.0 Transitionnal	text/html	non	non
Arlette Laguiller	LO	Divs	XHTML 1.0 Transitionnal	text/html	non	non
Jean-Marie Le Pen	FN	Tableaux	HTML 4.01 Transitionnal	text/html	non	non
Corinne Lepage	Cap 21	Divs	XHTML 1.0 Transitionnal	text/html	non	non

Les modes de développement

On trouve de tout, un peu comme au bon vieux temps de la Samar’ :

• Tableaux : 11 (64.7%).
• Divs : 5 (29.41%).
• Frames : 1 (5.88%).

Une écrasante majorité de tableaux, qui commencerait presque à me faire sérieusement douter de tout ce que j’ai entendu au sujet de l’adoption des standards du web ces deux dernières années.

Les doctypes

Et vous, vous aimez ça comment ?

• XHTML 1.0 Transitionnal : 6 (35.29%).
• Pas de doctype : 5 (29.41%).
• HTML 4.01 Transitionnal : 3 (17.64%).
• XHTML 1.0 Strict : 1 (5.88%).
• XHTML 1.0 Frameset : 1 (5.88).
• XHTML 1.1 : 1 (5.88%).

Les content Types

Ça sert à quoi au juste ?

• text/html : 16 (94.11%).
• Aucun doctype : 1 (5.88%).

La validation (X)HTML

Et là… c’est le drame !

• Oui : 1 (5.88%).
• Non : 16 (94.11%).

La validation CSS

• Oui : 2 (11.76%).
• Non : 12 (70.58%).
• Pas de CSS (style intégré dans les balises) : 2 (11.76%).

Conclusion

C’est… déprimant comme un dimanche de novembre, ne me vois pas d’autre mot.

En tout cas, cela montre qu’un travail d’évangélisation urgent doit se faire auprès des professionnels, en commençant par la base, c’est à dire les développeurs et les intégrateurs. La prochaine fois, si j’ai le temps, je vous proposerai un comparatif des points d’échec de tous ces sites aux tests d’accessibilité. Et si on me paye très cher, des propositions pour une refonte ergonomique… y’a du boulot !

[edit]

Le blog de Dominique Voynet validera certainement quand son attaché de presse cessera de copier / coller des caractères non UTF-8 depuis son Word OpenOffice.org favori. Bix, si tu m’entends…

Le nombre minimum d’erreurs recensé à la validation tourne autour de 30, ceci pour faire taire ceux qui diraient “oui, mais si ça se trouve, ils ne valident pas pour 2 ou 3 erreurs”.

Ce n’est pas encore annoncé sur le site officiel, mais Ruby on Rails, le meilleur framework qu’il m’ait été donné de tester à ce jour vient de passer en version 1.2. Mettez votre paquetage à jour, et vous verrez.

powerbook58-de-frederic-de-villamil:~ neuro$ sudo gem update -y
[...]
powerbook58-de-frederic-de-villamil:~ neuro$ rails -v
Rails 1.2.0

Concrètement, qu’est-ce que ça va changer ? Beaucoup de choses, à commencer par l’intégration du greffon Simply RESTful dans le noyau du framework, et cette seule nouvelle valait une note, moi qui suis si peu prompt à relayer les nouvelles. Si vous ne savez pas ce qu’est REST, regardez tout de suite cette excellente vidéo de David Heinemeier Hansson lui-même, il l’explique mieux que personne.

Quant à moi, je vous laisse lire le reste des nouveautés, j’ai des mises à jour à faire un peu partout, mais j’en profite pour vous signaler que la version de développement de Typo s’appuie sur Rails 1.2 depuis plusieurs mois maintenant.

Typo est l’outil de publication développé avec Ruby on Rails qui propulse ce blog pratiquement depuis ses débuts. Malgré des erreurs de jeunesse, principalement en termes d’ergonomie de l’IHM et des performances, toutes deux en passe d’être réglées dans la version de développement, Typo dispose d’indéniables atouts. On pourra notamment citer une très belle collection de thèmes, une API de greffons particulièrement puissante, la construction de la “sidebar” par simple cliquer / déplacer des éléments, ou une “live preview” particulièrement bien faite.

Afin de permettre au plus grand nombre de découvrir cet outil sans avoir à l’installer, je viens de mettre en place deux plates-formes de test en libre accès :

• La première permet d’accéder à la version stable de l’application.
• La seconde permet d’accéder à la version de développement de Typo, mise à jour quotidiennement.

Vous pouvez accéder à l’ensemble des fonctionnalités de l’application à deux bémols près :

1. Afin d’éviter le spam, la base de données est remise à zéro toutes les heures.
2. Dans le même but, les pings vers l’extérieur ont été désactivés.

N’hésitez pas à faire remonter vos impressions, elles seront transmises à l’équipe de développement, ou directement prises en compte ici dans le cas où elles concerneraient l’ergonomie de l’administration actuellement en cours de refonte. Alors enjoy and have fun!.

[edit]
Le lien vers la version stable était cassée. Il est maintenant réparé.

Il y a peut-être deux ans maintenant, Michel, David et moi avions évoqué l’idée de créer un clone de Wordpress plus propre, plus léger et plus rapide, et en PHP5. Nous étions depuis longtemps lassés des vulnérabilités de sécurité jamais corrigées, de son usinagazification et de la mainmise absolue de Matt sur le projet, insulte permanente à une communauté d’utilisateurs et de développeurs particulièrement active sans laquelle il serait jamais devenu ce qu’il est aujourd’hui. Depuis, Michel a développé son propre environnement de blog en Ruby on Rails, Dave s’est consacré à d’autres projets plus terre à terre, et je suis finalement passé sous Typo.

Pendant ce temps, l’idée a travaillé quelques uns des plus gros contributeurs de Wordpress, et pas des moindres. Chris J Davis, Richard Bowen, Scott Merrill, Owen Winkler et même Michael Heilemann ont décidé qu’eux aussi en avaient assez et se sont regroupés afin de créer Habari, la prochaine killer blogging application grand public en tenant compte des erreurs du passé.

Habari “neuf” en Swahili, comme dans “Quoi de neuf, docteur ?”, et la version de développement s’annonce déjà prometteuse.

L’administration générale du site.

La zone de saisie des billets.

Habari a bien su tirer les leçons de l’aventure Wordpress, aussi bien sur le plan technique qu’au niveau organisationnel. Développé en PHP5 avec MySQL 5 – des versions PostgreSQL et SQLlite sont aussi prévues – il s’appuie particulièrement sur les possibilités de programmation orientée objet du langage, et se tourne radicalement vers l’avenir puisqu’on ne peut pas vraiment dire que celui-ci soit particulièrement disponible en standard chez les hébergeurs grand public. Coté management des développeurs, le projet fonctionne désormais à la méritocratie : plus vous en faites, plus votre voix compte quand il s’agit de faire prendre un virage stratégique au projet, chose que je trouve plutôt saine et qui permet de faire venir du sang neuf actif assez régulièrement, donc de ne pas laisser mourir le projet parce que les développeurs principaux se consacrent à autre chose et bloquent le processus d’évolution de l’outil.

Si le projet vous intéresse, sachez que tout le monde est invité à y contribuer. Commencez par lire l’appel à contributeurs, et venez les rejoindre sur le canal IRC #habari@irc.freenode.net. Et si vous venez de Wordpress, il existe déjà un script d’importation vous permettant de faire le pas.

À la fin de l’année dernière, j’ai commencé à m’intéresser au positionnement de ce site sur les moteurs de recherche. J’ai alors contacté Sébastien Billard qui tient l’excellent blog Référencement, Design et Compagnie afin qu’il me fasse profiter de ses lumières. Suite à ses réponses, j’ai commencé une refonte structurelle – et ergonomique – qui a amené à la version actuelle. Un mois plus tard, retour sur les améliorations effectuées et sur les résultats obtenus.

Conseils Structurels

• Remplir le champ <title> à l’aide du titre du billet suivie de la mention “Frédéric de Villamil.com”. Cela permet aux outils de référencement de bien distinguer les pages les unes des autres.
• Dans la structure du code, mettre le contenu de chaque billet avant la navigation, de telle sorte qu’il se retrouve à la première place. Là aussi, il s’agit d’éviter que les moteurs de recherche ne considèrent les contenus comme semblables d’une page à l’autre. Techniquement, cela se fait en jouant sur la position des éléments : le contenu, placé avant dans le code, est placé dans un float: right;, tandis qu’on laisse la navigation dans le flot de la page.
• Supprimer le lien sur le titre du billet en mode lecture puisqu’il pointe de toute manière vers la page en cours. Cela rajoute en plus un bon point pour l’accessibilité.
• Mettre le message “Répondre à ce billet” dans une balise <h3> et non une balise <h2>, cette dernière étant déjà utilisée par le titre du billet, hiérarchiquement supérieur au formulaire de réponse dans la structure de la page.

Conseils éditoriaux

• Ajouter une tagline reprenant les principaux mots clé du site. Sébastien m’avait suggéré “Ergonomie, web design, métiers du web : le blog de Frédéric de Villamil”, mais ma préférence est finalement allée à “Webdesign, Ergonomie et Métiers du Web (2.0)”. Côté sémantique structurelle, le titre du blog se trouve dans une balise <h1> et l’accroche juste en dessous dans une balise <h2>.
• Supprimer le paragraphe de présentation placé en haut de chaque page. Relativement long, celui-ci leurrait les outils de recherche en leur faisant croire que toutes les pages étaient semblables. Le résultat était catastrophique, puisque Google ne recensait que 4 pages différentes, et plus de 1500 doublons. Le paragraphe de présentation a finalement rejoint la navigation, en bas de page.
• Faire figurer les catégories sur l’ensemble des pages, et particulièrement sur celles des billets. Seul problème, je ne voulais plus de sidebar sur ce blog. J’ai finalement décidé de déroger en ce qui concerne les catégories, pour des raisons purement ergonomiques : ce système permet au lecteur d’embrasser le contenu du dernier billet et les thématiques du site d’un seul coup d’oeil, sans retomber dans la pollution visuelle entraînée par une sidebar “fourre tout”.
• Soumettre le site à des annuaires afin de varier la provenance de mes liens entrants, principalement des blogs à ce jour.

Les résultats

Mot clé	14/12/2006	23/12/2006	13/01/2007
Pages	8 + 1200 doublons	1700	1930
Frederic	168	16	10
Frédéric	174	10	8
Webdesign	875	851	152
Ergonomie	763	804	144
Métiers du Web	979	143	36

Source : google.com, les chiffres de google.fr peuvent être différentes.

Je referai le point sur ces mots clé dans 6 mois, afin de constater les évolutions à venir, en faisant une vérification sur ces mots clé chaque premier du mois, et en les comparant à mes statistiques en entrée. Je remercie Sébastien pour ces conseils qui ne m’ont absolument rien coûté, puisque la bière promise n’a pas encore été commandée. J’espère que vous pourrez à votre tour en profiter pour accroître la visibilité de votre site.