Trucs et astuces pour Dotclear

Installer Dotclear sur un serveur Nginx

Lomalarch — Sat, 16 Aug 2025 18:01:00 +0200

Nginx est un logiciel de serveur web, moins gourmand en ressources que son grand frère Apache, et assez populaire pour un hébergement dédié. Mais comment faire tourner votre Dotclear préféré dessus ? Suivez le guide !

Je ne détaillerai pas ici l’installation même du serveur, mais bien la part de configuration qui concerne Dotclear. Il existe de nombreux tutoriels pour installer et configurer un serveur dit LEMP^[1].

Mise en place

Vous devez avoir installé Nginx, un serveur de base de données (MySQL ou son clone libre MariaDB, PostgreSQL ou, si vous êtes joueur, SQLite), et PHP-FPM^[2].

Puis, dans le fichier qui gère l’hôte de votre Dotclear, quelques règles de sécurité (Nginx ne tient pas compte des .htaccess livrés dans Dotclear)

location ~ /dotclear/(inc|cache|db|plugins|var) { #on interdit l’accès direct aux dossiers protégés de Dotclear
	deny all;
	access_log off;
	log_not_found off;
	}

et, bien sûr, les instructions pour faire traiter le php par php-fpm (je reprends ici le fichier /etc/nginx/snippets/fastcgi-php.conf, on modifiera ensuite pour la réécriture d’URL)

location ~ [^/]\.php(/|$) { # l’expression régulière permet de prendre en compte les urls en path_info
        # regex to split $uri to $fastcgi_script_name and $fastcgi_path
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;

        # Check that the PHP script exists before passing it
        try_files $fastcgi_script_name =404;


        # Bypass the fact that try_files resets $fastcgi_path_info
        # see: http://trac.nginx.org/nginx/ticket/321
        set $path_info $fastcgi_path_info;
        fastcgi_param PATH_INFO $path_info;

        fastcgi_index index.php;
        include fastcgi.conf;
        fastcgi_pass unix:/var/run/php/php-fpm.sock; # l’emplacement du socket php-fpm peut varier suivant votre système
}

À partir de là, installez Dotclear et votrejolisite.com/dotclear/index.php? pourra afficher votre page d’accueil ! On va pouvoir affiner.

Rediriger depuis la racine

Si vous souhaitez que Dotclear s’affiche à la racine de votre site, il n’est pas nécessaire d’y ajouter un index.php^[3]. Vous pouvez définir comme url http://votrejolisite.com/ et définir la méthode de lecture de l’url en PATH_INFO, puis ajouter ces lignes de réécriture dans la configuration Nginx :

location / {
	try_files $uri $uri/ @dotclear_path_info; # vérifier si le fichier ou dossier existe, et sinon, renvoyer le traitement à Dotclear
}
location @dotclear_path_info {
	rewrite ^/index.php /dotclear/index.php last; 
	rewrite ^/(.*) /dotclear/index.php/$1;
}

et modifier la section concernant le traitement php comme suit :

location ~ [^/]\.php(/|$) { # l’expression régulière permet de prendre en compte les urls en path_info
        (…)
        # redirection vers @dotclear_path_info si le fichier n’existe pas (permet notamment d’afficher les 404 de Dotclear pour tout le site)
        try_files $fastcgi_script_name @dotclear_path_info;
        (…)
}

Multi-blogs

Pour une installation multi-blogs, on peut utiliser aussi la réécriture d’URL si on ne souhaite pas créer un dossier par blog, en utilisant la constante DC_BLOG_ID, définie dans l’index.php de Dotclear si elle n’a pas été définie ailleurs. Il faut simplement ajouter un paramètre fastcgi qui sera envoyé à PHP.

location ~ [^/]\.php(/|$) {
	(…)
	fastcgi_param  DC_BLOG_ID $dotclear_id;	# identifiant du blog Dotclear qu’on veut appeler
}

Et ensuite, on n’a plus qu’à définir $dotclear_id à chaque location correspondant à un blog du multi-blog.

location / {
	set @dotclear_id default;
	try_files $uri $uri/ @dotclear_path_info; # vérifier si le fichier ou dossier existe, et sinon, renvoyer le traitement à Dotclear
}
location /blog1 {
	set @dotclear_id blog1;
	try_files $uri $uri/ @dotclear_path_info; # vérifier si le fichier ou dossier existe, et sinon, renvoyer le traitement à Dotclear
}
#et on n’oublie pas toutes les redirections
location @dotclear_path_info {
	rewrite ^/blog1/?(.*) /dotclear/index.php/$1 last;
	rewrite ^/index.php /dotclear/index.php/$1 last;
	rewrite ^/(.*) /dotclear/index.php/$1;
 }

Configuration complète exemple

Pour finir, un exemple de configuration, inspirée de celle qui fait fonctionner les sites des plugins de DotAddict.

server {
	listen 80;
	server_name example.org;
	root /var/www;  # emplacement des fichiers du site sur le serveur
	index index.php /dotclear/index.php;

	access_log /var/log/www/example.log;
	error_log /var/log/www/example.log;

	# pour Dotclear 2.35 et plus, pour gérer les thèmes modifiables
	if ($request_uri ~* "^/index\.php(\?.*)") {
        	return 301 https://$host/$1;
	}

	location = /favicon.ico {
		log_not_found off;
		access_log off;
	}
	location = /robots.txt {
		allow all;
		log_not_found off;
		access_log off;
	}
	# Deny all attempts to config files such as .htaccess, .htpasswd
	location ~ /\.ht {
		deny all;
		access_log off;
		log_not_found off;
	}
	location ~ /dotclear/(inc|cache|db|plugins|var) { #on interdit l’accès direct aux dossiers protégés de Dotclear
		deny all;
		access_log off;
		log_not_found off;
	}
	location ~*  \.(jpg|jpeg|png|gif|css|js|ico)$ { #optimisation du cache pour les images et feuilles de style
		expires max;
		log_not_found off;
	}
	location ~ [^/]\.php(/|$) {
	        # regex to split $uri to $fastcgi_script_name and $fastcgi_path
        	fastcgi_split_path_info ^(.+?\.php)(/.*)$;

	        # Check that the PHP script exists before passing it
        	try_files $fastcgi_script_name =404;


	        # Bypass the fact that try_files resets $fastcgi_path_info
        	# see: http://trac.nginx.org/nginx/ticket/321
	        set $path_info $fastcgi_path_info;
        	fastcgi_param PATH_INFO $path_info;

	        fastcgi_index index.php;
	        include fastcgi.conf;
        	fastcgi_pass unix:/var/run/php/php-fpm.sock; # l’emplacement du socket php-fpm peut varier suivant votre système

	        fastcgi_param  DC_BLOG_ID   $dotclear_id;
	}
	location /dotclear {
 		set $dotclear_id default;
		try_files $uri $uri/ =404;
	}
	location /blog1 {
		set $dotclear_id blog1;
		try_files $uri $uri/ @dotclear_path_info;
	}
	location /blog2 {
		set $dotclear_id blog2;
		try_files $uri $uri/ @dotclear_path_info;
	 }
	location / {
		set $dotclear_id default;
		try_files $uri $uri/ @dotclear_path_info;
	}
	location @dotclear_path_info {
		rewrite ^/blog2/?(.*) /dotclear/index.php/$1 last;
		rewrite ^/blog1/?(.*) /dotclear/index.php/$1 last;
		rewrite ^/(.*) /dotclear/index.php/$1;
 	}
}

N’hésitez pas à partager vos propres astuces, j’éditerai cette fiche au besoin.

Notes

[1] Le E représente Nginx dans l’acronyme, en raison de la façon dont on le prononce EnGineX

[2] FPM pour FastCGI Process Manager. Là où Apache utilise un module pour traiter les requêtes PHP, Nginx les adresse à PHP-FPM et lui « délègue » le traitement.

[3] Selon la méthode détaillée ici.

Changer le mot de passe administrateur quand plus rien ne marche

BG — Tue, 25 Mar 2025 16:38:00 +0100

Vous avez oublié votre mot de passe Dotclear et vous ne pouvez plus vous connecter à votre administration, pas de panique ! Il vous suffit de suivre la petite manipulation suivante.

Vous avez oublié votre mot de passe Dotclear et vous ne pouvez plus vous connecter à votre administration, pas de panique ! Il vous suffit de suivre la petite manipulation suivante :

Tout réparer en deux minutes :

Téléchargez le fichier passwd.php.txt disponible en pièce jointe
Renommez-le en passwd.php
Modifiez le fichier en entrant votre adresse IP à la ligne define('ALLOWIP','');. Si vous ne connaissez pas votre adresse IP, cliquez ici pour l’obtenir. Par exemple avec l’adresse IP 127.0.0.1, la ligne devra être modifiée ainsi : define('ALLOWIP','127.0.0.1');
Transférez-le dans le dossier admin/ de votre installation Dotclear
Dans votre navigateur web favori, allez sur : http://votre-site.tld/votre-installation-dotclear/admin/passwd.php

C’est tout, il ne vous reste plus qu’à suivre les instructions affichées.

N’oubliez pas de retirer le fichier passwd.php de votre serveur quand vous aurez fini.

Solution de Sasha

Le fichier disponible a été mis à jour et est désormais compatible avec les versions de Dotclear 2.28 et supérieures.
Le 2^e fichier disponible (passwd-old.php.txt) est compatible avec la version 2.24.

Mettre en place une installation de test

Tomek — Fri, 12 Jul 2013 12:22:00 +0200

Suite à l’appel aux utilisateurs pour tester des versions en développement de Dotclear, il apparaît indispensable de pouvoir le faire dans son environnement habituel, soit sur son hébergement favori, soit en local sur son propre ordinateur.

Installation de Dotclear

1^er cas : l’installation sur l’hébergement.

Pour ce faire, il faut d’abord installer un Dotclear indépendamment de son blog si on en possède déjà un (ce qui semble assez logique, si vous êtes ici), juste histoire de ne pas faire de bêtise sur son site tout beau qu’on bichonne. Qui dit indépendant, dit base de données supplémentaire pour ne rien casser de l’existant ou, si vous n’en disposez pas, un changement de préfixe pour les tables de cette installation dédiée.

Il faut également créer un dossier via le ftp en indiquant un nom explicite tel que dotclear-test dans lequel vous pourrez installer la bête.

L’installation est fort bien expliquée dans la documentation et pour les néophites, plusieurs billets sur DotAddict sont consacrés à cette étape primordiale http://tips.dotaddict.org/fiche/Ce-… / http://abc.dotaddict.org/post/2009/… / http://abc.dotaddict.org/post/2009/…, aussi nous ne la détaillerons pas plus. Si vous avez déjà installé une fois, vous devriez vous en sortir sans problème. Sachez toutefois que si vous éprouvez des soucis ou avez des questions, le forum est là pour ça.

Notez qu’une installation standard est tout à fait suffisante pour tester, rien n’oblige à effectuer une installation optimisée, sauf à vouloir tester sous cette configuration, aussi.

2^er cas : l’installation en local.

Avant de procéder à l’installation de Dotclear, il y a d’abord un pré-requis incontournable : l’installation d’un environnement complet permettant de faire tourner Dotclear : vous trouverez tout les informations pour ce faire sur cette page dédiée. Une fois cette première étape franchie, il reste à suivre la même procédure pour l’installation de Dotclear que précédemment.

Passer en version de test

Une fois le blog installé et paramétré, vous devriez voir un billet agrémenté de son commentaire : si c’est bien le cas, vous êtes alors presque prêt à tester. Presque, car il reste à effectuer une modification du fichier de configuration config.php qui se trouve dans le dossier inc/ de votre installation. Il faut donc télécharger ce fichier en passant par un logiciel FTP, et ajouter ces deux lignes juste avant la balise php fermante ?> :

// Allow RC and Beta auto-update
define('DC_UPDATE_VERSION','testing');

Une fois la modification faite, il suffit de le renvoyer sur le serveur et d’écraser la version courante. Si vous avez peur de faire une bêtise avec cette manipulation, vous pouvez d’abord renommer le fichier en config.php.old, uploader/envoyer le fichier modifié (config.php), et si tout fonctionne bien, supprimer le config.php.old.

Et voilà !

Dorénavant, à chaque mise à jour de version de développement (également appelée nightly – qui est générée la nuit), vous aurez la notification sur le tableau de bord du blog d’une nouvelle version disponible à mettre à jour en 2 clics, comme d’habitude. Vous pourrez alors tester les améliorations, corrections de bugs qui auront été faites la journée précédente.

On ne précisera jamais assez que les développeurs ont besoin de vous, utilisateurs pour tester les avancées, dénicher les bugs qui s’y trouvent et faire avancer le développement. Car plus la base de testeurs est large avec différentes configurations d’hébergement, de base de données, plus il y a de chance de débusquer et corriger les soucis avant la sortie définitive d’une version.

À vous de jouer !

Un menu déroulant pour les tags

Brol — Mon, 24 Jan 2011 10:00:00 +0100

Par défaut, les tags sont affichés en nuage, ou en liste.
Je vous propose ici de les afficher dans un menu déroulant.

Pour ce faire, il n’est – hélas – pas possible d’utiliser un widget texte.

Deux solutions s’offrent à nous :

copier le code suivant directement dans le template, mais ça implique qu’on ne pourra pas l’intercaler entre deux widgets depuis l’interface d’administration du blog ET qu’il faudra répéter l’opération dans chaque fichier .html du thème :

<div class="taglist">
<tpl:Tags type="tag">
  <tpl:TagsHeader>
    <h2>{{tpl:lang Tags}}</h2>
    <form method="get" action="" id="tag">
    <fieldset style="border:none;">
    <p>
    <select name="tag" onchange="location = this.options[this.selectedIndex].value;">
    <option>Sélection...</option>
  </tpl:TagsHeader>
    <option value="{{tpl:TagURL}}">{{tpl:TagID}}</option>
  <tpl:TagsFooter>
    </select>
    </p>
    </fieldset>
    </form>
  </tpl:TagsFooter>
</tpl:Tags>
</div>

utiliser le plugin templateWidget et copier ce code-ci dans un nouveau fichier à nommer en "taglist.widget.html" et à placer dans le tpl du thème utilisé :

<tpl:WidgetName>taglist</tpl:WidgetName>
<tpl:WidgetDescription>Tags en menu déroulant</tpl:WidgetDescription>
<div class="taglist">
<tpl:Tags type="tag">
  <tpl:TagsHeader>
    <h2>{{tpl:lang Tags}}</h2>
    <form method="get" action="" id="tag">
    <fieldset style="border:none;">
    <p>
    <select name="tag" onchange="location = this.options[this.selectedIndex].value;">
    <option>Sélection...</option>
  </tpl:TagsHeader>
    <option value="{{tpl:TagURL}}">{{tpl:TagID}}</option>
  <tpl:TagsFooter>
    </select>
    </p>
    </fieldset>
    </form>
  </tpl:TagsFooter>
</tpl:Tags>
</div>

Et voici le résultat en image ;-)

Clap clap clap clap

Utiliser les behaviors de template pour créer des thèmes enfants simples et faciles à maintenir

Evren Kiefer — Thu, 23 Sep 2010 08:51:00 +0200

Pour effectuer de petits changements au code HTML d'un thème, nul besoin de dupliquer tous ses fichiers et de devoir les maintenir par la suite. En s'appuyant sur les behaviors de template et le mécanisme d'héritage des thèmes, on peut ajouter des balises autour d'éléments tout en ayant du code plus facile à maintenir.

Imaginons que je souhaite apporter un changement simple au code HTML d'un thème comme ajouter une <div> autour des groupes de widgets sur toutes les pages ou encore autour de chaque billet pour faire du centrage dans une mise en page fluide, par exemple. La réponse évidente serait de dupliquer chaque fichier du thème en créant un nouveau thème et d'effectuer les changements dans chaque contexte. Cependant, cette solution a un inconvénient, elle créée beaucoup de fichiers qu'il faudra maintenir en veillant à ce que les changements du thème parent soient répercutés sur le nouveau thème. Comme les thèmes sont appelés à évoluer régulièrement au gré de la découverte de bugs de rendu CSS dans les navigateurs et autres, le processus peut vite devenir fastidieux.

Heureusement, il existe des mécanismes dans Dotclear que l'on peut utiliser pour éviter de devoir dupliquer les fichiers. En s'appuyant sur les behaviors de template et le mécanisme d'héritage des thèmes, on peut ajouter du code autour d'éléments tout en ayant du code plus facile à maintenir.

Avant de continuer, il faudra se familiariser avec le mécanisme d'héritage des thèmes et le fichier _public.php. Les deux premières étapes sont couvertes par des ressources déjà existantes ici.

Mettez en place un thème enfant avec le thème parent de votre choix.
Ouvrez et/ou créez le fichier _public.php de votre thème.

Disons que j'ai besoin d'avoir une balise div autour de mes groupes de widgets. Afin d'y parvenir, nous allons créer deux fonctions, une créera la balise <div> ouvrante et l'autre la balise </div> fermante de part et d'autre des groupes de widgets.

Premièrement, il nous faut attacher nos fonctions aux behaviors qui sont appelés avant et après les blocs de contenu.

$core->addBehavior('templateBeforeValue',array('behaviorsDeMonTheme','templateBeforeValue'));
$core->addBehavior('templateAfterValue',array('behaviorsDeMonTheme','templateAfterValue'));

Ensuite, il nous faut déclarer la classe behaviorsDeMonTheme et les deux fonctions qui en feront partie, une qui précède le bloc et l'autre qui le suit.

class behaviorsDeMonTheme {

 function templateBeforeValue($core,$v,$attr) {
          if ($v == 'Widgets') { // fonction qui affiche la balise ouvrante devant les groupes de widgets
                       return "<?php echo '<div class=\"widgets\">'; ?>";
          }
          }
 function templateAfterValue($core,$v,$attr) {
          if ($v == 'Widgets') { // fonction qui affiche la balise fermante derrière les groupes de widgets
                       return "<?php echo '</div>'; ?>";
               }
          }

 }

Grâce à cette méthode, vous pouvez ajouter du code HTML à tous les contextes en même temps sans être obligé de dupliquer le fichier du thème parent. En vous servant de cette astuce, vous pourrez aussi faire des choses plus élaborées. Il vous suffit pour cela d'en apprendre plus sur les behaviors de template dans le forum ou la documentation.

Un thème avec seulement une feuille CSS et un fichier _public.php est tellement plus propre et facile à entretenir :)

Ajout/Suppression/Modification des smilies

Beb'R — Mon, 30 Aug 2010 10:55:00 +0200

L'ajout, la suppression et/ou la modification d'un ou plusieurs smilies dans votre thème est possible.
Pour cela, quelques règles importantes doivent être respectées notamment lors de la rédaction du fichier smilies.txt

Après avoir transféré vos smilies au format PNG dans votre dossier smilies de votre thème ; l'heure est venue de modifier le fichier smilies.txt.

Un éditeur de texte est nécessaire et je ne peux vous conseiller que l'excellent Notepad++ sous Windows qui est gratuit et en français ou Smultron pour les Macqueux.

Ainsi, ce fichier se présente de cette manière : à gauche les caractères pour inclure un smiley dans votre billet et en face le nom du fichier PNG qui y fait référence.

Exemple :

;-)           laugh.png

Mais qu'y a-t-il entre la typographie et le nom du fichier ?
Point d'espace, non ! Mais 2 tabulations.
Sinon votre smiley ne s'affichera pas sur votre billet.

Petite expérience personnelle...

Edit : Pour ceux qui sont moins à l’aise avec ce type de manipulations de fichiers, il est également possible d’utiliser l‘excellent plugin smiliesEditor d’Osku

Flux RSS limités à l'extrait

mirovinben — Fri, 27 Aug 2010 13:54:00 +0200

Voici comment limiter les billets dans les flux atom et RSS2 à l'extrait si (et seulement si) présence d'un extrait et afficher le contenu du billet si pas d'extrait comme sait le faire home.html.

Comme il existe deux types de flux, RSS2 et Atom, il faut intervenir sur deux fichiers qui sont, par défaut, dans le répertoire (dotclear)/inc/public/default-templates. Il s'agit de rss2.xml et atom.xml.

Pour éviter de casser la garantie avec le risque d'empêcher les prochaines mises à jour automatiques de Dotclear, le plus simple reste de passer par l’Éditeur de thèmes, accessible depuis Apparence du blog dans la colonne de gauche ou, pour les versions antérieures à 2.2, via le Tableau de bord.

Vous pouvez aussi, par FTP, faire une copie de ces deux fichiers dans le répertoire tpl de votre thème. Vous pourrez ensuite y apporter les modifications souhaitées à l'aide d'un éditeur de texte.

Selon le type de flux, les syntaxes xml utilisées diffèrent légèrement.

pour rss2.xml :

remplacer

<description>{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</description>

par

<description>
     <tpl:EntryIf extended="1">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}&lt;p&gt;&lt;a href="{{tpl:EntryURL}}"
       title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}"&gt; {{tpl:lang Continue
       reading}}&lt;/a&gt;...&lt;/p&gt;
     </tpl:EntryIf>
     <tpl:EntryIf extended="0">{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</tpl:EntryIf>
</description>

pour atom.xml :

remplacer

<content type="html">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</content>

par

<content type="html">
     <tpl:EntryIf extended="1">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}&lt;p&gt;&lt;a href="{{tpl:EntryURL}}"
       title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}"&gt; {{tpl:lang Continue
       reading}}&lt;/a&gt;...&lt;/p&gt;
     </tpl:EntryIf>
     <tpl:EntryIf extended="0">{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</tpl:EntryIf>
 </content>

Les flux : c'est mon dada !

Perfectfab — Mon, 07 Jun 2010 20:58:00 +0200

Proposez des flux Atom à ses lecteurs est devenu une chose courante sur les blogs actuels. Mais vous pouvez améliorer votre thème pour qu'il propose beaucoup plus de flux à vos agrégateurs !

Dans la plupart des navigateurs actuels, comme Internet Explorer 7, Mozilla Firefox ou bien Opera, vous pouvez facilement vous abonner aux flux proposés. Par exemple, sous Firefox (3), vous n'avez qu'à cliquer sur l'icône RSS pour vous abonner au flux ou avoir la liste de tous les flux disponibles. C'est précisément sur cette liste que nous allons travailler.

Proposer plusieurs flux dans la liste

Par défaut, on a souvent une ligne de ce type dans le fichier home.html :

<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="{{tpl:BlogFeedURL type="atom"}}" />

Comme on le voit, on ne propose dans la liste que les billets du blog, sans distinctions.

Préambule

J'ai choisi de mettre tous ces codes dans le _head.html pour qu'ils soient sur toutes les pages du blog, mais libre à vous de "restreindre" ceux-ci à home.html.

Dans l'exemple de base donné plus haut, le flux n'est pas nommé (title="Atom 1.0"), ce qui à mon sens n'est pas très professionnel. Je ferais en sorte de nommer les flux via le système de templates ({{tpl: lang}}) mais ceux-ci ne permettent pas de tout faire. Si vous êtes accro aux templates, suivez cet autre tips cet autre tips pour rajouter des traductions aux thèmes.

Proposer le flux des billets ET des commentaires

Premier travail, nous allons proposer le flux des commentaires en plus de celui des billets.

<link rel="alternate" title="Flux Atom des billets" type="application/atom+xml" href="{{tpl:BlogFeedURL type="atom"}}"/>
<link rel="alternate" title="Flux Atom des commentaires" type="application/atom+xml" href="{{tpl:BlogFeedURL type="atom"}}/comments"/>

Avec ce code, vous avez enfin la liste avec le choix des deux flux. Mais nous pouvons aller plus loin.

Proposer les flux de chaque catégorie

Si vous voulez proposer les flux de chaque catégorie, vous pouvez prendre ce code :

<tpl:Categories level="1">
  <link rel="alternate" title="Flux Atom de la catégorie : {{tpl:CategoryTitle encode_html="1"}}" type="application/atom+xml" href="{{tpl:CategoryFeedURL type="atom"}}"/>
</tpl:Categories>

Ici, seules les catégories de premier niveau (donc PAS les sous catégories) sont concernés, vous pouvez changer cela en effaçant le level="1" du <tpl:Catégories>.

Avec ces deux codes, vos internautes auront le choix des flux !

Proposer le flux des commentaires du billet affiché

Dernier code intéressant, il permet de proposer le flux des commentaires du billet quand on lit celui-ci.

<tpl:SysIf current_tpl="post.html">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des commentaires de ce billet" href="{{tpl:BlogFeedURL type="atom"}}/comments/{{tpl:EntryID}}" >
</tpl:SysIf>

Si vous voulez voir un exemple de tous ces codes, vous pouvez vous rendre sur cette page.

Rajouter les liens Atom pour les commentaires, tags et catégories

Si vous voulez continuer dans le Atom à outrance, voici des liens à rajouter pour proposer vos flux adaptés. Les icones que j'ai utilisées était distribuées avec le thème Freshy2.

Flux Atom des commentaires du billet

Ne fonctionne que si le billet a un commentaire

<tpl:EntryIf show_comments="1">
<a href="{{tpl:EntryURL}}#comments" class="comment_count" title="{{tpl:EntryCommentCount}}">{{tpl:EntryCommentCount}}</a>
</tpl:EntryIf>
<tpl:EntryIf has_comment="1">
<a href="{{tpl:BlogFeedURL type="atom"}}/comments/{{tpl:EntryID}}" title="Flux Atom des commentaires de ce billet">
<img alt="Flux Atom des commentaires de ce billet}}" title="Flux Atom des commentaires de ce billet}}" src="{{tpl:BlogThemeURL}}/images/icons/feed-icon-10x10.gif" /></a>
</tpl:EntryIf>

Flux Atom de la catégorie du billet

Ce code est issu de mon blog, ne copiez que la deuxième partie si vous ne voulez que l'icône.

<tpl:EntryIf has_category="1">
<strong>{{tpl:lang Category}}</strong><br />
 <tpl:EntryCategoriesBreadcrumb><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle encode_html="1"}}</a>&rsaquo;</tpl:EntryCategoriesBreadcrumb><a href="{{tpl:EntryCategoryURL}}">{{tpl:EntryCategory encode_html="1"}}</a>
<a href="{{tpl:BlogURL}}feed/category/{{tpl:EntryCategoryShortURL}}/atom" title="Flux Atom de la catégorie {{tpl:EntryCategory}}">
<img alt="Flux Atom de la catégorie {{tpl:EntryCategory}}}}" title="Flux Atom de la catégorie {{tpl:EntryCategory}}}}" src="{{tpl:BlogThemeURL}}/images/icons/feed-icon-10x10.gif" /></a>
</tpl:EntryIf>

Flux Atom des tags du billet

Idem que pour plus haut, gardez la partie intéressante si vous ne voulez pas retoucher le reste du code.

<tpl:EntryTags>
<tpl:TagsHeader><strong><br />{{tpl:lang Tags}}</strong><br /></tpl:TagsHeader>
<a href="{{tpl:TagURL}}">{{tpl:TagID}}</a>
<a href="{{tpl:TagFeedURL}}" title="Flux Atom du tag {{tpl:TagID}}">
<img alt="Flux Atom du tag {{tpl:TagID}}" title="Flux Atom du tag {{tpl:TagID}}" src="{{tpl:BlogThemeURL}}/images/icons/feed-icon-10x10.gif" /></a><tpl:LoopPosition start="1" length="-1">, </tpl:LoopPosition>
</tpl:EntryTags>

Conclusion

Avec tous ces flux et icônes pour y accéder, personne ne loupera plus les derniers rebondissement de votre site ! N'hesitez pas à laisser un commentaire sur ce tips si vous voulez corriger un code ou demander des explications.

Architecture, titrage et navigation : le trio gagnant !

Gautier et Kozlika — Sat, 08 May 2010 19:22:00 +0200

Vous êtes désormais un lecteur avisé, averti... et convaincu du fait qu'il faille impliquer l'utilisateur final pour proposer un blog ergonomique.

Nous avons passé en revue la démarche ergonomique dans son ensemble et beaucoup parlé d'analyse. Il est temps de passer à la phase de conception proprement dite. Nous allons donc aborder des choses plus concrètes avec de nombreuses recommandations.

Ante-scriptum. – Pour rendre les choses plus constructives pour vous, nous souhaitons que vous nous sollicitiez avec les questions que vous pouvez avoir avec vos blogs respectifs (bien évidemment en restant si possible en phase avec l'article publié). Nous prendrons un très grand plaisir à vous procurer nos humbles conseils.

Revenons donc à nos moutons. Les fondations ergonomiques d’un site reposent sur trois points clés qui s’entremêlent : l’architecture de l’information, le titrage (labelling) et le système de navigation en place. Allez hop, découvrons tout cela ensemble !

La phase de conception web se décline en 3 étapes clés :

définition de haut niveau (information design);
définition de l'interaction (interaction design);
définition détaillée des écrans (detailed graphical design).

(Entre parenthèses figurent les termes – souvent issus de l'anglais – en jargon d'ergonome. N'hésitez pas à les placer dans la conversation lors de vos dîners en ville ;-))

Nous décrivons dans cet article la première étape : Architecture, titrage, navigation.

Mais diantre, de quoi s'agit-il ? : des fondations de votre blog ! Pour comprendre ces termes assez hermétiques, prenons la métaphore du château. Vous êtes un châtelain très connu dans la région, et vous organisez régulièrement des évènements. Quand les invités arrivent chez vous, ils doivent s'orienter aisément entre les grands murs de marbre : comprendre rapidement où trouver les autres convives, savoir où se situe la salle du buffet, etc.

Phase 1 : Architecture. Agencez votre château de manière logique

Vous devez agencer votre château de manière logique pour les gens qui y vivent ou qui viennent le visiter. Pour un blog, c'est pareil. Cet agencement, ou cette structure, c'est ce que l'on appelle l'architecture de l'information.

Structurer, cela signifie :

catégoriser : tous les éléments concernant la salle des fêtes doivent se retrouver dans la salle des fêtes et non dans la cuisine. Il ne faut pas retrouver les toilettes dans les voûtes, etc. Chaque chose à sa place ! C'est pareil pour les rubriques d'un blog ;
hiérarchiser : dans les différentes pièces, certains éléments sont plus importants que d’autres, vous devez donc les proposer en priorité et les mettre en valeur.

Les modes de catégorisation le plus fréquemment proposés sur un blog sont les mots-clés (tags), les catégories, l'archivage par date. Et pourquoi pas par profils (orienté audience), par objectif (orienté tâche), par ordre alphabétique… ?

Quelques petits conseils en matière d’architecture de l’information :

concevez votre blog d’abord en largeur puis en profondeur (7±2 éléments de largeur pour chaque niveau de navigation;
limitez la profondeur à 5 niveaux;
proposez une information seulement à un endroit dans l'arborescence physique, faites ensuite des liens transversaux entre rubriques;

Evitez les pages cachées si vous souhaitez que vos utilisateurs les trouvent. Dans l'exemple ci-dessus, « Glossaire » mérite sans doute sa place dans les rubriques en haut à droite.

Phase 2 : Titrage. Nommez correctement les pièces de votre château

Ensuite, vous devez nommer correctement les pièces pour que les gens s'y retrouvent. C'est ce qu'on appelle le titrage ou labelling. Par extrapolation, un label peut être nom de domaine, une URL, le titre qui s'affiche dans le navigateur, les titres des rubriques et des sous-rubriques, les titres des pages, les intitulés de liens, les intitulés des boutons dans un formulaire…

Tout ce titrage est très important pour guider vos internautes.

Quelques petits conseils en matière de titrage

utilisez des labels explicites et clairs pour l’utilisateur;
utilisez des labels qui décrivent fidèlement les informations vers lesquels ils renvoient.

La signifiance d'un titre dépend évidemment de votre cible utilisateur. Dans l'exemple ci-dessus, on peut réellement se demander si le label « Tips » est compris par nos utilisateurs ? On peut sans doute faire l'hypothèse que les gens qui nous lisent ne sont pas effrayés par quelques petits mots d'anglais et comprennent ce terme bien ancré dans les mœurs des utilisateurs de la communauté Dotclear. Mais qu'en est-il des autres utilisateurs ? Ceux potentiellement intéressés par tous les conseils que nous proposons mais qui ne sont pas familiers de cet univers ?

Phase 3 : Navigation. Définissez des moyens de circulation entre les pièces de votre château

Vous devez proposer des moyens permettant de circuler dans votre château (un couloir, des portes, un escalier, etc.). Dans un blog c'est pareil, vous devez proposer une navigation centrale, des rubriques de support, etc.

Ce système de navigation peut-être enrichi d’autres outils d’aide à la navigation, comme un moteur de recherche, un chemin de localisation etc. Mais attention, il est primordial de proposer une navigation et de ne pas limiter l'interaction à un simple moteur de recherche.

Pourquoi ?

car de nombreuses personnes ne savent pas encore utiliser les recherches de manière efficace;
car la recherche est adaptée pour les gens qui savent ce qu'ils cherchent;
car très souvent, les gens ont une vue imagée de ce qu'ils recherchent. Ils ne savent pas forcément mettre les mots-clés juste pour trouver ces informations et les recherches sémantiques ont encore besoin d'évoluer ;
enfin car la recherche seule ne permet pas de naviguer sans raison précise, comme une abeille qui butine de fleur en fleur. C'est pourtant une pratique très courante^[1]

Même Google propose une navigation à part entière en plus du fameux moteur de recherche. Pourquoi ? Tout simplement car cela permet à l'utilisateur de comprendre ce qu'il peut trouver via Google.

Et puis, proposer une navigation est une vraie plus-value par rapport aux monstres qui indexent vos sites.

Quelques petits conseils en matière de navigation

évitez de faire bouger ou disparaître ces éléments de navigation. Les utilisateurs n’aiment pas jouer à cache-cache ;
conservez un système de navigation identique (homogène) sur toutes les pages de votre site ;
assurez-vous que l’utilisateur sache d’où il vient, où il a été, où il peut aller, etc. ;
permettez à l’utilisateur de comprendre dans quelle rubrique du site il se trouve ;
mettez en avant les zones cliquables ;
distinguez les zones de navigation des zones de contenus ;
conservez le soulignement pour les liens.

Il est très important, pour permettre à l'utilisateur de bien comprendre la structure de votre blog et les informations proposées, d'utiliser des termes homogènes. Dans l'exemple ci-dessus, il serait préférable d'utiliser soit « Contact », soit « Nous écrire ».

Pour conclure

L'architecture, le titrage et la navigation constituent un point majeur pour la qualité d'un site ou d'un blog. Il y a une telle diversité des profils utilisateurs et de leurs objectifs qu'il est fondamental de consulter les utilisateurs pour s’assurer que les choix de conception que vous faites sont adaptés à votre cible.

Prochain article

Pour les articles suivants nous avions deux possibilités : vous décrire une technique d'ergonomie pour faire des arborescences logiques pour les utilisateurs (le card sorting) ou passer directement à l'étape du maquettage fonctionnel. Nous avons choisi la seconde option.

A bientôt, donc !

Notes

[1] Les anglophones ont un mot pour ça : serendipity, qui a donné naissance au néologisme « sérendipité » chez nous.

Comment concevoir un blog réellement ergonomique ?

Gautier et Kozlika — Sat, 10 Apr 2010 13:14:00 +0200

Dans l'article précédent, nous avons pu voir qu'une démarche ergonomique apportait de nombreux avantages, le principal étant de permettre à l'utilisateur de trouver ce dont il a besoin, qui plus est simplement.

Très bien, l'ergonomie est une démarche qui place l'utilisateur au centre de la conception, et qui apporte plusieurs avantages indéniables, mais comment la mettre en place ?

La démarche ergonomique s'effectue en réalisant :

les activités de la démarche ergonomique,
à travers un mode de "conception évaluation" avec les utilisateurs.

Impliquez vos utilisateurs

La première chose à faire pour concevoir un blog ergonomique est d'impliquer activement les utilisateurs.

Ce sont vos utilisateurs qui guident les choix de conception, pas l'inverse.

Les trois questions

Qui sont vos utilisateurs ?

On ne construit pas un blog de la même façon s'il est destiné à des avocats, des plombiers, des enfants... Il est donc important de se questionner sur les caractéristiques de vos utilisateurs.

Les caractéristiques qui reviennent le plus souvent sont l'âge, le niveau d'expérience (informatique et web), le métier, la nationalité, les handicaps, la catégorie socio-professionnelle.

Exemple concret pour la refonte de l'admin Dotclear

Pour cette refonte, nous ciblons le grand public : autant dire que l'on brasse très large, tout âge, tout métier, etc. Les variables pertinentes identifiées sont les suivantes :

le niveau d'expérience (débutant / confirmé / expert)
le niveau de droits (administrateur / rédacteur)

A noter que nous considérons également les utilisateurs présentant des déficiences.

Quels sont les attentes et objectifs de vos utilisateurs ?

Qu'est-ce que vos utilisateurs souhaitent faire et comment souhaitent-ils le faire ? Il faut que l'analyse, en plus d'identifier les profils des utilisateurs, cible les cas d'utilisation (les scenarii). Vos utilisateurs souhaitent acheter un sandwich ? Contacter un gestionnaire de secte ? Contribuer à la réalisation d'article ? Donner de l'argent à Dotclear ? (faites un don !)

Exemple concret pour la refonte de l'admin Dotclear

Pour cette refonte, nous avons par exemple identifié les attentes fonctionnelles suivantes :

simples : monoblog, peu d'administration, structuration du contenu change peu ;
complexes : multiblog, toutes les dernières extensions, structuration du contenu change plus fréquemment.

En parallèle, nous avons entre autres identifié les cas d'utilisation suivants :

suivi de l'activité du blog : suivi des commentaires / détection et suppression des indésirables ;
le fond (production de contenu) : gestion des billets, gestion des médias ;
l'organisation (structuration du contenu) : gestion des catégories et tags / gestion de la blogroll / gestion des pages ;
la forme : gestion des themes / gestion des widgets ;
la gestion (administration) : gestion des utilisateurs, installation / configuration système, gestion des sauvegardes / de l'entretien, gestion des extensions, configuration des filtres antispam, gestion des langues, mise à jour plugins, mise à jour thèmes, mise à jour appli, création de blog supp / import de blog.

L'ergonome approfondit ces cas d'utilisation en réalisant ce que l'on appelle dans le jargon une analyse de la tâche. Cela permet, de décrire le mode d'interaction optimal (de quelles informations a besoin l'utilisateur, à quel endroit sur l'écran, comment cela doit être présenté et se comporter) en détails, avec les utilisateurs.

Quel est le contexte dans lequel les utilisateurs vont consulter le blog ?

Est-ce que l'utilisateur va se servir du produit dans un métro, chez lui, au travail, dans une situation stressante, bruyante, dans une situation où le temps est compté ? Vous comprenez qu'il est plus difficile d'envoyer un sms dans un bus bondé plutôt que chez soi au calme... Toutes ces dimensions doivent être connues afin de définir le mode d'interaction le plus adapté.

Évidemment, pour un blog, on peut se demander si tout cela est pertinent ? Détrompons-nous :)

Par exemple parmi vos utilisateurs y a t-il des gens qui consultent depuis des téléphones mobiles ? Quel(s) navigateur(s) est (sont) utilisé(s) ? Quel type de connection ? Consultent-ils de chez eux, en déplacement dans le train ?

Exemple concret pour la refonte de l'admin Dotclear

Pour cette refonte, nous avons notamment identifié :

que certains de nos utilisateurs alimentent leur site de chez eux, d'autres en voyage (contraintes matériel avec petits écrans).
que beaucoup sont en situation de travail collaboratif, à distance, ce qui nécessite de se pencher sur la question de l'amélioration des options de track changes, de versioning, de workflow. ^[1]

Spécifiez sur papier !

Il est très important de formaliser, par écrit, les réponses à ces trois questions. Cela vous permettra d'approfondir la réflexion, de vous assurer de mieux faire le tour des questions, et surtout de préparer la mise en pratique.

Les réponses à ces 3 questions vous donneront les premières orientations pour faire un blog ergonomique.

Répondez à ces questions en direct avec vos utilisateurs avant d'écrire une quelconque ligne de code.

Activités et techniques ergonomiques

Vous l'avez compris, pour chaque activité ergonomique, il y a des techniques d'ergo impliquant les utilisateurs. Voici quelques activités et techniques ergonomiques associées :

Phase d'analyse

Analyse des profils utilisateur : questionnaires, personas,
Analyse des objectifs (analyse de la tâche) : observation, entretien, focus group, enquête d'usage
Analyse du contexte : observation, enquête d'usage.

Phase de conception

Définition de l'architecture de l'information : tri par cartes
Maquettage fonctionnel : technique du maquettage papier / du storyboarding + tests utilisateurs

Phase de développement

Dans cette phase, l'objectif est de s'assurer que ce qui est défini en conception correspond aux besoins identifiés. Et l'on améliore les livrables avec les techniques classiques d'évaluation, tests utilisateurs, audit ergonomique, etc.

Après la mise en ligne : recueil du feed-back utilisateurs à outrance

Analyse des usages
Analyse de l'appropriation
Analyse de la satisfaction

Ces activités se font principalement grâce à trois techniques : observation, questionnaire, enquête d'usage

Pour finir

N'oubliez pas, gardez l'esprit agile et proposez ce que les ergonomes appellent des solutions intermédiaires de conception : nul besoin d'avoir le produit final pour le tester. Un début d'arborescence, un début de maquette papier est suffisant pour évaluer auprès des utilisateurs.

Ça y est, vous en savez trop ! Rendez-vous bientôt pour le prochain article.

Nous verrons comment définir une architecture de l'information qui fonctionne.

Notes

[1] Bah on est obligé de mettre des mots d'anglais pour faire "in"

Les bénéfices de l'ergonomie

Gautier et Kozlika — Sat, 20 Mar 2010 13:00:00 +0100

Dans le précédent article, nous avons vu ensemble en quoi consistait la notion d'ergonomie. Nous avons vu qu'il s'agit d'une démarche qui place l'utilisateur au centre de la conception. C'est surtout une histoire de méthodes et d'outils. Ce précédent article, en témoignent les nombreux commentaires, a suscité un engouement énorme. Nous avons également reçu de nombreux messages du monde entier.

Nous avons notamment reçu le retour d'un acteur méga connu, Jacques Plaque, qui entre deux films alliant amour de la guitare, du rock et du 10e degré non perceptible à l'œil nu, nous a posé de nombreuses questions. Nous avons trouvé original de reprendre ses questions et d'y répondre sous la forme d'un « article entretien ». Ses questions sont en gras et nos réponses suivent. Enjoy !

« Moi je fais de l'ergonomie dans mon coin, sans impliquer les utilisateurs. »

Que ce soit pour un site web ou un blog, le fait de ne pas impliquer activement l'utilisateur engendre des conséquences néfastes :

on ne répond pas aux vrais besoins des utilisateurs ;
on propose des choses inutilisables.

Prenons l'exemple classique de l'achat en ligne : le manque d'utilisabilité est clairement un frein à l'achat qui force les utilisateurs à tout simplement abandonner ce qu'ils sont en train de faire.

Même si les références commencent à dater, elles restent tout à fait actuelles :

65% des utilisateurs n’arrivent pas à acheter un produit en ligne ! (Forrester, 2000) ;
50% du temps les utilisateurs ne trouvent pas ce qu’ils veulent même s’ils sont aiguillés sur la page d’accueil (Nielsen, 1998) ;
62% des utilisateurs abandonnent leurs achats en cours de route (Nielsen, 1998).

« Oui ok, mais moi je ne vends rien, je ne fais pas un site e-commerce, pas besoin d'ergonomie ! »

Détrompe-toi Jacques ! Les bénéfices de l'ergonomie ne se limitent pas à améliorer l'expérience utilisateur pour acheter un produit.

Plus l'utilisateur est impliqué tôt dans la conception d'un site (dès la phase de pré-analyse) moins les risques de non-utilisation sont élevés.

Nous distinguons deux catégories de bénéfices:

Tout d'abord les bénéfices pour le commanditaire du projet :

hausse de la productivité de l’utilisateur,
augmentation des ventes,
optimisation de la conception et du temps de développement,
dépenses évitées grâce à des changements tôt dans la conception,
baisse de l’assistance après livraison,
pérennité de l’image de marque et fidélisation client.

Ensuite les bénéfices pour l'utilisateur final:

utilisation simple, efficace, sans efforts,
hausse de la compréhension,
durée d’apprentissage réduite et baisse des erreurs,
augmentation de la satisfaction utilisateur.

Ce n'est pas pour rien que les grands groupes ont sauté dans le train de l'expérience utilisateur depuis assez longtemps (Sun, IBM, Google, etc.).

Les gens trouvent ce qu'ils veulent et reviennent. C'est pas plus compliqué que cela.

« Ok je comprends, même si je fais un blog avec juste des billets, le fait d'impliquer les utilisateurs va m'apporter plein de choses ! »

Oui, entre autres :

mieux toucher le public cible,
te faire comprendre,
que les visiteurs trouvent rapidement les informations dans les catégories que tu as définies,
qu'ils utilisent le moteur de recherche sans problèmes,
globalement : temps d'apprentissage réduit, atteinte plus rapide des objectifs par les utilisateurs (ici les lecteurs), baisse des erreurs, hausse de la satisfaction,
etc.

« Ok pour tout cela, mais ca risque de coûter cher non ? »

Non Jacques, non. Grosso modo, il faut consacrer environ 10% du budget d'un projet à l'ergonomie. Pour un site personnel, cela équivaut à se poser les bonnes questions au bon moment, d'impliquer les utilisateurs à des moments clé.

« Très bien, mais comment je fais pour mettre une démarche ergonomique en place ? »

On voit cela dans le prochain article.

Jacques, U rocks :)

ergo koi ?

Gautier et Kozlika — Sat, 13 Mar 2010 11:58:00 +0100

L'objectif de ce billet est tout à fait humble : rétablir un semblant de vérité sur la notion d'ergonomie et vous permettre de mieux comprendre ce que vous pouvez réellement attendre de la série de billets qui est initiée ici.

Le terme ergonomie est très souvent employé. Vous avez certainement de nombreux exemples qui vous viennent à l'esprit.

« Hey Tony, j'ai acheté le dernier MUC pro big light, il est super. En plus, niveau ergonomie, y'a pas mieux. »

Ce qui est tout à fait paradoxal, c'est que lorsque l'on demande aux personnes qui utilisent ce terme de le définir, on n'obtient jamais de réponse claire et unanime.

Parfois, la simple évocation du terme fait resurgir de vieux démons :

« l'ergonomie c'est du bon sens »^[1] ;
« l’ergonomie c’est le choix des couleurs, c'est du détail »^[2] ;
« pas besoin d'ergonomie, je connais déjà les besoins des utilisateurs »^[3] ;
« l’ergonomie ça coûte cher et ça fait perdre du temps ! »^[4]

L'objectif de ce billet est tout à fait modeste : rétablir un semblant de vérité sur cette notion et vous permettre de mieux comprendre ce que vous pouvez réellement attendre de la série de billets qui commence ici.

Hop c'est parti !

Le terme ergonomie vient du grec ergon (travail) et nomos (loi ou science). Il signifie donc « science du travail ».

Le but de l'ergonome est de comprendre ce que font (ou veulent faire) les gens pour adapter le contexte dans lequel ils évoluent, leurs outils etc.

Besoins en ergonomie ?

Il y a des besoins en ergonomie dès qu'il y a d'un côté un utilisateur et de l'autre une interface. Par interface, nous entendons tout élément dont se sert un être humain pour atteindre un objectif. Une interface peut donc renvoyer à des choses très variées, par exemple un système physique (un poste de travail, un rayon de supermarché, un ascenseur, l'intérieur d'une voiture…), une technologie (logiciel, système GPS, site Web, un téléphone portable, un palm…), etc.

En extrapolant, cela peut même être un livre, une notice d’utilisation, votre brosse à dents quotidienne...

Qu'est-ce qu'un produit ergonomique ?

C'est un produit qui répond :

aux besoins et attentes des utilisateurs,
à leurs profils (les caractéristiques),
à leurs objectifs.

Ainsi, le niveau de qualité ergonomique d'un produit n'existe pas isolément. Il est bien évidemment lié à ses caractéristiques intrinsèques mais dépend surtout de l'utilisation et de l'usage que les gens en ont.

C'est bien pour cela d'ailleurs qu'il n'existe pas de label de type « produit » en ergonomie, avec une sorte de check-list magique qui permette de s'assurer qu'un site est ergonomique.

Comment faire pour concevoir un produit ergonomique ?

En adoptant une démarche spécifique, qui place l'utilisateur au centre de la conception. Quand on parle d'ergonomie, très rapidement tout le monde autour de la table donne son avis. Nous chez Dotclear, on a décidé de ne plus faire de brainstorming géant entre experts et on implique les utilisateurs. C'est ça l'ergonomie.

Le but de la série d'articles sera donc notamment de vous donner les clés pour impliquer vos utilisateurs, observer et comprendre ce qu'ils font et traduire cela en spécifications concrètes pour faire un produit ergonomique. C'est uniquement une question de méthode et de techniques.

Il est également important d'indiquer qu'il n'existe pas de démarche ergonomique spécifique en fonction d'un type de produit : la démarche ergonomique reste la même pour concevoir un téléviseur ergonomique, une brosse à dent ergonomique etc. Voilà donc une bonne nouvelle, vous pourrez aisément appliquer cette série d'articles à un blog, mais aussi à tout autre type de produit (site e-commerce, logiciel, borne PDA...).

Pourquoi adopter une démarche ergonomique ?

Pour comprendre l'intérêt d'une telle démarche et ce qu'elle peut vous apporter, il faut vous placer en tant qu'utilisateur : Qu'est-ce qui est très important pour vous, en tant qu'utilisateur, quand vous utilisez un site web ?

que les informations soient utiles, qu'elles répondent à votre besoin,
que ces informations soient utilisables (qu'elles correspondent à votre logique d'utilisation, la fameuse notion d'''utilisabilité').

Le premier point est théoriquement simple à évaluer : le site est-il utile, oui ou non. Dans la pratique, ce point est délicat et nécessite une analyse de ce que font réellement les utilisateurs afin de comprendre leur besoin.

Le second point, l'utilisabilité, se décline en plusieurs sous-critères. Un site utilisable est un site qui permet à l’utilisateur :

d’être efficace : atteindre ses objectifs,
d’être efficient : atteindre ses objectifs en faisant le moins d’efforts possible,
de comprendre, apprendre et de mémoriser rapidement,
de ne pas faire d’erreurs,
d’être satisfait.

Admettez que cela fait beaucoup de choses et vous avez tendance à revoir vos objectifs à la baisse... Non ! Encore une fois, il s'agit d'une question de méthode et de techniques.

Vous comprenez d'emblée qu'il est délicat d'atteindre ces objectifs si l'on ne travaille pas directement avec les utilisateurs.

Chez Dotclear d'ailleurs, même si on parle de démarche ergonomique (c'est pour le côté sexy et dans le vent, on pourrait même parler de user experience pour être tout à fait « in ») on préfère parler entre nous de démarche qualité utilisateur, en jouant un rôle d'entremetteur entre les différents corps de métier intervenant dans la conception.

Les points importants à retenir

un produit ergonomique est un produit qui répond aux profils des utilisateurs et à leurs objectifs,
l’ergonomie est une démarche qui place l’utilisateur au centre de la conception,
l’ergonomie permet d’atteindre deux objectifs : proposer des produits utiles et utilisables,
l'ergonomie est une question de méthode et de techniques.

Nous espérons que ce premier article vous a plu et nous vous donnons rendez-vous pour le prochain, où nous détaillerons en quoi l’ergonomie est importante pour votre site web / blog et ce qu'elle peut vous apporter.

À la semaine prochaine :)

Crédit : Nous n'avons pas trouvé qui créditer pour l'illustration. Si vous en connaissez la source, merci de nous l'indiquer.

Notes

[1] Mandieu.

[2] Mandieumandieu.

[3] Mandieumandieumandieu.

[4] Oh mandieumandieu mandieumandieu.

Prêts pour une virée dans le monde merveilleux de l’ergonomie ?

Gautier et Kozlika — Fri, 05 Mar 2010 19:39:00 +0100

Vous aimez votre blog au point d’envisager une relation physique avec lui ? Offrez-lui le cadeau de ses rêves : ~~une~~ dix séances d’ergonomie.

On entend souvent parler d’ergonomie.
On entend de tout et de rien.
Quel monde, mes enfants, quel monde.

Entre vendeurs de fables, lanceurs de poudre aux yeux, et ergonomes puristes « adeptes de la rétention d’information pour mieux faire briller leur expertise », difficile de savoir où donner de la tête.

Vous vous intéressez à l’ergonomie mais vous vous sentez tel Bob l’Éponge dans une mer déchaînée, ballonné, tiraillé… DAMMIT : nous zafons les moyens de fous zéponger ! euh de vous aider.

Nous nous engageons solennellement, et avec beaucoup de plaisir en perspective, à combler votre faim intense…

La sensibilisation passe par de la théorie et de la pratique. Comme disait Freud, « la théorie c’est chiant, ça me rappelle ma mère ». On ne peut évidemment pas contredire Freud, mais on ne peut pas faire sans théorie.

Nous vous proposons donc de commencer par une petite série de 9 articles (à raison d’une publication par semaine) au sein desquels nous aborderons les points importants « en théorie » pour faire de l’ergonomie. Et comme nous ne voulons pas nous fâcher avec Sigmund, nous illustrerons nos dires d’exemples concrets et variés.

Article n° 1 : Qu'est ce que l'ergonomie web ?
Article n° 2 : Pourquoi l'ergonomie est importante pour votre blog ?
Article n° 3 : Comment concevoir un blog réellement ergonomique ?
Article n° 4 : Architecture, navigation, labelling : le trio gagnant
Article n° 5 : Le « card sorting » : la technique magique pour catégoriser l’information de manière logique pour l’utilisateur
Article n° 6 : Du maquettage… oui… mais du maquettage papier !
Article n° 7 : Les tests utilisateurs
Article n° 8 : Rédaction ergonomique du contenu : un art à votre portée !
Article n° 9 : Les principaux critères ergonomiques

Nous enchaînerons ensuite avec des applications concrètes de la démarche ergonomique sur des blogs existants : comment améliorer un menu de navigation, un formulaire, déceler les problèmes clés d’ergonomie lors d’une session de tests utilisateurs, améliorer un blog grâce aux critères ergonomiques, etc.

Pour un peu épicer le tout et que vous puissiez trouver une utilité directe à notre démarche, nous trouverons lors de ces applications concrètes des moyens amusants pour vous faire participer. L'apprentissage par l'exemple et l'essai/erreur, y'à que ça de vrai !

Une administration séparée

Dsls — Thu, 14 Jan 2010 16:43:00 +0100

Le but de ce tip est de séparer l’administration de Dotclear du reste des autres blogs.

Contexte

Dans le cas d’une installation multi-blog, il peut être intéressant de fournir à ses utilisateurs une adresse différente pour accéder à l’administration de leur blog. Cela est d’autant plus intéressant lorsqu’on se base sur la documentation d’installation multi-blogs et que les blogs créés ne permettent pas une visibilité sur le répertoire admin/

Simple comme bonjour

Cette mise en place est simple :

Définir le nom de domaine voulu pour l’administration auprès de son hébergeur préféré, et la faire pointer vers le répertoire admin de l’installation de dotclear
Ne pas oublier, dans le fichier inc/config.php, de mettre à jour la valeur de DC_ADMIN_URL vers la nouvelle URL

Et le SSL, dans tout ça ?

Pour forcer l’accès à l’administration en SSL, rien de plus simple, il suffit d’ajouter la ligne suivante dans inc/config.php :

define('DC_ADMIN_SSL',1);

… et c'est tout !

Créer une balise template repérant certains mots des titres des billets

Moe — Thu, 14 Jan 2010 11:51:00 +0100

Un utilisateur du forum a eu l’idée de mettre en gras les titres des billets quand celui-ci comportait un mot particulier. On peut distinguer ledit titre de différentes manières grâce à une balise à créer soi-même.

Voici une nouvelle balise template semblable à la balise <tpl:EntryIf> de Dotclear. Dans cet exemple, nous voulons appliquer une mise en forme particulière à des titres de billets comportant certains mots déterminés.

Le code suivant doit être inséré dans le fichier _public.php de votre thème. :

$core->tpl->addBlock('EntryIfWordInTitle', array('tplEntryIfWordInTitle','EntryIfWordInTitle'));

class tplEntryIfWordInTitle
{
        public static function EntryIfWordInTitle($attr,$content)
        {
                return
                '<?php '.
                '$words = array("Federer","Santoro");'.
                'foreach ($words as $word) :'.
                'if (stripos($_ctx->posts->post_title,$word) !== false): ?>'.
                        $content.
                '<?php '.
                'break;'.
                'endif;'.
                'endforeach;'.
                'unset($words); ?>';

        }
}

On utilise ici les noms de joueurs de tennis pour mettre en valeur ses billets. Vous pouvez bien entendu utiliser n’importe quels autres mots.

Ce code crée la balise <tpl:EntryIfWordInTitle>[...]</tpl:EntryIfWordInTitle>. Elle sert à encadrer du code qui sera affiché seulement quand le titre du billet contiendra Federer ou Santoro. Puisqu’on veut distinguer les titres des billets, on va mettre la classe CSS distinguish entre les balises nouvellement créées :

<h2 class="post-title<tpl:EntryIfWordInTitle> distinguish</tpl:EntryIfWordInTitle>"><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>

La classe distinguish doit alors être définie dans la feuille de style CSS, par exemple de la manière suivante :

h2.distinguish {
        font-weight: bold;
}

pour un titre mis en gras^[1] ou

h2.distinguish, h2.distinguish a {
       color: red;
}

pour un titre en rouge^[2].

Idée originale : Mathieu M. du forum Dotclear

Notes

[1] notons au passage que les navigateurs appliquent un gras par défaut sur les titres, si votre CSS n’a pas désactivé ce gras, vous ne verrez dans ce cas aucune différence

[2] l’application sur h2.distinguish a permet de prendre en compte le lien sur le titre, car il y a souvent une couleur définie pour les liens

BBclone, statistiques sur son blog Dotclear

Franck — Sun, 27 Dec 2009 15:34:00 +0100

Cette fiche technique se propose de vous expliquer pas à pas comment installer des statistiques sur votre blog pour voir qui vous rend visite grâce à BBclone.

Page de statistiques globales

Page de statistiques détaillées

Préambule

L'installation décrite ci-après permettra de suivre les statistiques du ou des blogs de votre installation. Elle sera faite de telle manière qu'elle n'empêchera pas la mise à jour automatique de Dotclear et effectuée dans un répertoire indépendant.

Premiers pas, l'installation pour le premier blog

Téléchargez la dernière archive disponible.

Les autres types d'archives (.tar.gz et .tar.bz2) se trouvent ici.

La décompresser, sur votre bureau par exemple.

Via votre logiciel FTP préféré, créez un répertoire nommé exactement bbclone, au même niveau que le répertoire dotclear. En général c'est à la racine de votre hébergement et vous allez par conséquent avoir (au moins) deux dossiers à ce niveau, dotclear et bbclone.

Une fois le répertoire bbclone créé, positionnez-vous dedans, en général un double-clic suffit pour cela et créez un répertoire ayant pour nom l'identifiant exact du blog dont vous voulez suivre les statistiques. Pour une installation standard, ce nom — si vous ne l'avez pas modifié — est default. Vous pouvez vérifier cela dans les paramètres du blog ou dans la liste des blogs (section système, option blogs du menu de gauche).

Vous voilà maintenant avec un répertoire bbclone contenant lui-même un répertoire default (ou portant l'identifiant de votre blog). Toujours à l'aide de votre logiciel FTP transférez dedans le contenu de l'archive que vous avez décompressée sur votre bureau.

Une fois le transfert effectué, il faut modifier le fichier config.php — il se trouve dans le répertoire dotclear/inc/ de votre installation — pour y ajouter les lignes suivantes :

// bbclone
if (defined('DC_BLOG_ID')) {
    define("_BBC_PAGE_NAME", substr($_SERVER['PHP_SELF'],0));
    define("_BBCLONE_DIR", dirname(__FILE__)."/../../bbclone/".DC_BLOG_ID."/");
    define("COUNTER", _BBCLONE_DIR."mark_page.php");
    if (is_readable(COUNTER) && !isset($_GET['pf']) && !ereg("/feed/|/wikibar/",$_SERVER["REQUEST_URI"])) {
        include_once(COUNTER);
    }
}

Le plus simple est de placer ces lignes juste avant la ligne finale qui contient ?>. Une fois les lignes ajoutées — vérifiez que la dernière ligne du fichier comporte bien ?> et qu'aucune autre ligne, même vide la suit — enregistrez le fichier et transférez-le sur votre hébergement si vous l'avez modifié localement après l'avoir téléchargé.

C'est fini, vous avez des statistiques actives pour le blog à l'adresse suivante : http://example.com/bbclone/default/

Installation pour suivre un 2e blog

Si vous souhaitez suivre les statistiques d'un deuxième blog, repérez son identifiant et créez un autre répertoire portant ce nom dans le répertoire bbclone. Transférez-y avec votre logiciel FTP le contenu de l'archive bbclone que vous avez téléchargé au début.

C'est fini, vous avez des statistiques actives pour le 2e blog à l'adresse suivante : http://example.com/bbclone/second/ (si second est l'identifiant du 2e blog).

Répétez l'opération pour tous les autres blogs de votre installation dont vous souhaitez suivre les statistiques.

Configuration personnalisée

Maintenant que vos statistiques sont officiellement lancées, vous pouvez configurer bbclone sur certains aspects. Vous trouverez toute la configuration disponible en vous rendant sur votre page de statistiques (http://example.com/bbclone/default/) et en cliquant en haut sur Configuration.

Par exemple : vous ne souhaitez pas que les robots tels Google, Yahoo ou autres soient répertoriés, les visites humaines étant les seules à vous intéresser. $BBC_IGNORE_BOTS devra être changé à « 2 ».

Voici comment faire :

Lancez votre logiciel FTP
Connectez-vous à votre site web
Naviguez dans l’arborescence de votre site comme ceci : répertoire racine puis bbclone puis default puis conf
Éditez le fichier config.php
Aux alentours de la ligne 179, changer la valeur devant $BBC_IGNORE_BOTS à « 2 ».
Enregistrez, chargez sur le serveur.

Autre chose qui peut être intéressant : protéger l’accès à vos statistiques grâce à un mot de passe.

Première étape

Il va vous falloir connaître le nom d’accès exact à votre répertoire racine. Rien de bien compliqué là encore (merci à Mirovinben pour l’astuce).

Lancez votre éditeur de fichiers, cliquez sur nouveau en haut à gauche. Copiez-y le code suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
        <title>Test PHP</title>
</head>

<body>
  <table>
    <tr>
      <td class="Gch">Date courante</td>
      <td class="Drt"><?php print (Date("l F d, Y")); ?></td>
    </tr>
    <tr>
      <td class="Gch">IP du serveur : <b>SERVER_ADDR</b></td>
      <td class="Drt"><?php echo @$_SERVER['SERVER_ADDR']; ?></td>
    </tr>
    <tr>
      <td class="Gch">Nom du serveur : <b>SERVER_NAME</b></td>
      <td class="Drt"><?php echo @$_SERVER['SERVER_NAME']; ?></td>
    </tr>
    <tr>
      <td class="Gch"><b>HTTP_HOST</b></td>
      <td class="Drt"><?php echo @$_SERVER['HTTP_HOST']; ?></td>
    </tr>
    <tr>
      <td class="Gch"><b>REQUEST_URI</b></td>
      <td class="Drt"><?php echo @$_SERVER['REQUEST_URI']; ?></td>
    </tr>
    <tr>
      <td class="Gch">Nom du fichier : <b>PHP_SELF</b></td>
      <td class="Drt"><?php echo @$_SERVER['PHP_SELF']; ?></td>
    </tr>
    <tr>
      <td class="Gch">Répertoire racine : <b>DOCUMENT_ROOT</b></td>
      <td class="Drt"><?php echo @$_SERVER['DOCUMENT_ROOT'];?></td>
    </tr>
    <tr>
      <td class="Gch">Chemin complet de la page en cours : <b>__FILE__</b></td>
      <td class="Drt"><?php echo __FILE__; ?>;</td>
    </tr>
    <tr>
      <td class="Gch">Adresse IP du client : <b>REMOTE_ADDR</b></td>
      <td class="Drt"><?php echo @$_SERVER['REMOTE_ADDR']; ?></td>
    </tr>
    <tr>
      <td class="Gch">Client de la requête : <b>HTTP_USER_AGENT</b></td>
      <td class="Drt"><?php echo @$_SERVER['HTTP_USER_AGENT']; ?></td>
    </tr>
    <tr>
      <td class="Gch">Version de PHP : <b>PHP_VERSION</b></td>
      <td class="Drt"><?php echo PHP_VERSION; ?></td>
    </tr>
    <tr>
      <td class="Gch">OS : <b>PHP_OS</b></td>
      <td class="Drt"><?php echo PHP_OS; ?></td>
    </tr>
  </table>
</body>
</html>

Enregistrez ce fichier sur votre bureau en le nommant test.php

Grâce au logiciel FTP, chargez-le dans le répertoire racine de votre site internet.^[1]

Lancez la page www.example.com/test.php dans votre navigateur.

Relevez ce qui est écrit en face de Répertoire racine : DOCUMENT_ROOT

exemple: /un_nom_bizarre/domaine/répertoire_racine

Gardez-le dans un coin, vous allez en avoir besoin pour la suite.

Voici ensuite comment procéder pour définir un accès à vos statistiques par mot de passe :

Lancez votre éditeur de fichiers, cliquez sur nouveau en haut à gauche. Copiez-y le code suivant :

AuthType Basic
AuthName "Avez vous le bon mot de passe"
AuthUserFile /un_nom_bizarre/domaine/repertoire_racine/.htpasswd
Require valid-user

En troisième ligne, copiez l'accès à votre site précédemment relevé suivi de /.htpasswd

Enregistrez ce fichier en .htaccess et chargez-le dans le répertoire bbclone.

Deuxième étape

Lancez votre éditeur de fichiers, cliquez sur nouveau en haut à gauche. Copiez-y le code suivant :

Nom d’utilisateur:mot de passe

(changez nom d’utilisateur et mot de passe par ce que vous préférez)

Enregistrez ce fichier en .htpasswd et chargez-le dans le répertoire_racine.

Dorénavant, lorsque vous vous connecterez à http://example.com/bbclone, un nom d'utilisateur et mot de passe vous seront demandés. Vous les indiquez, et le tour est joué !

N'hésitez pas à laisser vos commentaires pour nous dire si tout fonctionne correctement !

Tutoriel proposé par susana

Notes

[1] Pensez à supprimer ce fichier test.php du serveur une fois la procédure terminée.

Configuration d'un thème multi CSS

Osku — Wed, 16 Dec 2009 17:46:00 +0100

Un thème peut proposer donc des déclinaisons en plus d'un habillage par défaut. La suite détaille comment réaliser un thème déclinable.

Objectif : livrer un thème offrant depuis le configurateur du thème le choix d'une déclinaison possible entre plusieurs CSS (ici des palettes de couleurs différentes ainsi que d'autres images décoratives).

Ingrédients nécessaires :

Un fichier _config.php
Un fichier _public.php
Des feuilles de style CSS

Fichier _config.php

<?php
// Protection contre la lecture du fichier en dehors de l'admin
if (!defined('DC_CONTEXT_ADMIN')) { return; }
// Initialisation : 
$walou_style = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

// Traitement à l'enregistrement :
if (!empty($_POST))
{
        $core->blog->settings->setNameSpace('walouwalou');
        if (!empty($_POST['walou_style']) && in_array($_POST['walou_style'],$walou_style))
        {
                $core->blog->settings->walou_style = $_POST['walou_style'];
                $core->blog->settings->put('walou_style',
                                        $core->blog->settings->walou_style,
                                        'string',
                                        'Walou-walou theme style',true
                                        );
        }
        $core->blog->triggerBlog();
         echo '<p class="message">'.__('Theme configuration has been successfully updated.').'</p>';
}

// Affichage d'un menu déroulant proposant le choix de la déclinaison : 
echo '<fieldset><legend>Style</legend>'.
'<p class="field"><label>'.__('Style:').' '.
form::combo('walou_style',$walou_style,$core->blog->settings->walou_style).
'</p>'.
'</fieldset>';
?>

Ce fichier se décompose en 3 parties : une phase d'initialisation, une phase de traitement et une phase d'affichage.

Initialisation :
Durant la phase d'initialisation, on déclare la variable $walou_style qui est de type tableau. Prenons l'exemple dans ce tableau de __('Monochrome') => 'grey', :

Monochrome est ce que l'on verra affiché dans la Configuration du thème dans le panneau d'administration.
grey est l'identifiant que j'ai choisi pour identifier la feuille de style (j'y reviens après).

Traitement :
Après clic sur le bouton enregistrer (aka !empty($_POST)) :

On enregistre la valeur envoyée par le formulaire ici defaut, grey, gold ou pastel dans un paramètre du blog nommé walou_style (attention c'est sans le $).
On invalide le cache des templates grâce à $core->blog->triggerBlog();. Cela permet d'activer le changement de déclinaison immédiatement côté public.
On affiche un joli message comme quoi la configuration a été mise à jour avec un echo.

Affichage :
Pour l'affichage, on utilise la fonction form::combo de Clearbricks (la trousse à outils géniale incluse avec Dotclear) pour proposer un menu déroulant, ou combobox c'est selon, des déclinaisons disponibles.

form::combo prend 3 arguments :

la variable attachée à la boîte qui se récupère après le clic dans $_POST['walou_style']
le contenu de la boite : ici notre tableau $walou_style.
une valeur présélectionnée : la valeur que l'on a enregistrée dans le paramètre de blog walou_style^[1].

fichier _public.php

<?php
// Protection contre la lecture du fichier en dehors de dotclear
if (!defined('DC_RC_PATH')) { return; }

// Ajout d'un behavior en base
$core->addBehavior('publicHeadContent','walou_publicHeadContent');

// Fonction d'ajout automatique d'une feuille de style
function walou_publicHeadContent($core)
{

        // Initialisation des variables
        $style = $core->blog->settings->walou_style;
        $url = $core->blog->settings->themes_url.'/'.$core->blog->settings->theme;

        //Test de comparaison 
        if (!preg_match('/^default|pastel|grey|gold$/',$style)) {
                $style = 'default';
        }
     
        //Écriture en sortie
        echo '<style type="text/css">'."\n".
                "@import url(".$url."/"."walou-".$style.".css);\n".
                "</style>\n";
}
?>

Ce fichier permet d'ajouter une feuille de style grâce au behavior publicHeadContent normalement présent dans le fichier head.html de notre thème.

Ici ce n'est pas très compliqué, on compare la valeur stockée dans le paramètre de notre blog walou_style aux mots retenus default, pastel, grey ou gold. Si pour quelque raison que ce soit on ne trouve rien, on choisit de retenir la valeur default.

Notre echo en fin de fichier nous retourne alors un joli :

(...)
<style type="text/css">
@import url(/blog/themes/walouwalou/walou-default.css);
</style>
</head>

Voilà pour le côté mécanique, il suffit maintenant d'écrire nos règles CSS spécifiques dans chacun des fichiers : walou-default.css, walou-grey.css, walou-gold.css et walou-pastel.css.

A vous de jouer :-)

Notes

[1] Avant le premier enregistrement, notre paramètre de blog walou_style n'existe pas, c'est alors la première ligne de notre tableau qui est sélectionnée : Défaut pour nous ici.

Ajouter un sous titre à vos billets

Fab — Thu, 10 Dec 2009 15:21:00 +0100

Proposer un sous titre est un moyen simple et original de donner du cachet à vos billets.

Sous titre ?

Sur certains blogs, on peut voir un deuxième petit titre, utilisé pour détailler un peu le contenu, ou autre. Sur mon blog perso, je m'amuse à mettre quelque chose d'un peu décalé, histoire de donner un autre point de vue sur mes billets.

MyMeta, un plugin sympathique

Pour cela, nous allons utiliser le plugin MyMeta, qui permet de rajouter des informations à vos billets. Nous allons donc simplement rajouter un champ "sous titre" que vous pourrez paramétrer à souhait. La partie affichage sera dans une deuxième partie.

En attendant, téléchargez-le depuis DotAddict ou bien via l'installateur DotAddict.

Paramétrage

Des images parlent plus que des mots :

Voila pour le plugin, ce n'est pas bien compliqué en soi.

Afficher le sous-titre dans le thème

Je pars du principe que vous savez à peu près comment ca marche pour bidouiller vos thèmes. N'hésitez pas à poster des commentaires si vous ne savez pas comment faire sur votre thème. Il vaudrait mieux que vous regardiez les pages que vous voulez changer, cherchez des choses comme {{tpl:EntryTitle}} ou class="post-title".

<tpl:MyMetaIf type="Sous_titre" defined="true"/>
<em class="soustitre">{{tpl:MyMetaValue type="Sous_titre"}}</em>
</tpl:MyMetaIf>

Explication : Si le titre est défini, on l'affiche en italique avec une classe soustitre

Conclusion

C'est tout, le reste est à votre guise !

Référencer un Blog Free Dans Google

hubert91 — Sun, 01 Nov 2009 23:27:00 +0100

Le système d'installation rapide de Free empêchant tout accès par FTP, le référencement sur Google passe par un certain nombre de figures imposées.

Sur Google un bon référencement nécessite l'installation de deux fichiers :

un fichier d'identification du site prouvant que vous en êtes le propriétaire ;
un fichier sitemap que les robots doivent trouver et analyser pour guider le référencement.

Le plus simple serait d'installer ces fichiers à la racine du site.

Impossible ! Heureusement, il existe un endroit où nous pouvons placer des fichiers de toute nature, le répertoire public accessible via le Gestionnaire de médias depuis la console d'administration.

C'est dans ce répertoire que tout va se passer. Il s'agit simplement du premier niveau du gestionnaire de médias.

1/ Déclaration de l'URL du blog à référencer

Pour Google l'URL de votre blog Free va avoir la structure suivante : http://monblog.blod.free.fr/public/

C'est cette URL que vous allez déclarer sur la console de Google, en remplaçant bien évidemment monblog par votre identifiant.

2/ Identification du blog

Google propose deux méthodes d'identification : une balise ou un fichier html.

Choisir cette seconde méthode. Google propose de télécharger un fichier. Sans rien y changer, ni le nom (un code) ni le contenu, télécharger ce fichier html sur votre blog dans le répertoire public via le Gestionnaire de médias.

Dès l'installation de ce fichier, relancer l'identification qui est immédiatement confirmée.

3/ Elaboration et mise en place du fichier sitemap

Il doit lui aussi être placé dans le dossier public via le Gestionnaire de médias du blog.

Je choisis ici de créer un fichier xml, mais ce n'est pas la seule possibilité. Son nom sera sitemap.xml. Sa syntaxe est assez bien expliquée sur le site de Google. Voici un exemple

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">

 <url>
    <loc>http://monblog.blog.free.fr/public/index.html</loc>
    <lastmod>2009-10-24</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
 </url>
 <url>
    <loc>http://monblog.blog.free.fr/public/accueil.html</loc>
    <lastmod>2009-10-24</lastmod>
    <changefreq>weekly</changefreq>
 </url>
 <url>
    <loc>http://monblog.blog.free.fr/public/direct.html</loc>
    <lastmod>2009-10-24</lastmod>
    <changefreq>weekly</changefreq>
 </url>

</urlset>

Pour la fréquence de passage des robots il est possible de choisir « daily », « weekly », « monthly ». Mais il vaut mieux éviter de rêver il ne suffit pas de demander « daily » pour obtenir un passage quotidien…

Notez que les URL des fichiers indiqués aux robots sont de la forme : http://monblog.blog.free.fr/public/monfichier.html

C'est une des contraintes de Google : le chemin du fichier doit impérativement reproduire l'URL du site à référencer, donc dans le cas d'un blog Free : http://monblog.blog.free.fr/public/

Un fichier sitemap peut contenir jusqu'à 50 000 URLs.

Notez que dans l'exemple ci-dessus les URL conduisent vers trois fichiers html : index, accueil et direct.

Le sitemap est prêt, il peut être télécharger via le Gestionnaire de médias de la console d'administration du blog.

Puis continuer les opérations de paramétrage sur Google en indiquant le chemin du fichier sitemap.xml dans la console dédiée à cet effet.

4/ Elaboration et mise en place des fichiers de redirection

Google devrait marquer d'une croix rouge la validation de votre fichier sitemap. Normal ils renvoient vers 3 fichiers qui n'existent pas ! Il va donc falloir les créer et les mettre en place dans le dossier public du blog.

Bien sûr il n'est pas intéressant de référencer ces fichiers qui ne conduisent pas sur le blog.

Chacun de ces fichiers va donc contenir une redirection vers les pages du blog.

Ce qui donne pour index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="description" content="Blog de xxxxx">
<meta name="keywords" content="mot clé, mot clé, mot clé, mot clé, mot clé"> 
<meta http-equiv="refresh" content="0; URL=http://monblog.blog.free.fr/">
</head>
<body>
</body>
</html>

Il y a bien d'autres façons de faire une redirection. Celle-ci a le mérite d'être simple…

Mettez en place les fichiers index accueil et direct dans le Gestionnaire de médias du blog et relancez la validation du fichier sitemap sur Google.

Cette fois Google devrait vous retourner une coche verte signe que tout est OK.

Il ne reste plus qu'à attendre que les robots passent et référencent les pages de votre blog !

Regrouper les tags par leur première lettre sur la page des tags

Moe — Sun, 04 Oct 2009 12:14:00 +0200

Vous voulez afficher les tags sur le blog en les regroupant par leur première lettre comme dans l'administration ?

Par défaut les tags de Dotclear sont affichés en nuage, ils sont regroupés sans distinction. En les regroupant par leur première lettre comme dans l'administration, on aboutit à ce résultat :

Pour obtenir le même affichage dans votre thème, vous devez modifier 2 fichiers. Voici comment faire. Cette astuce ne fonctionne qu'à partir de la version 2.1.6.

Modification du fichier _public.php

Vous devez placer le code suivant dans le fichier _public.php de votre thème :

$core->tpl->addBlock('TagsIfFirstLetter',array('TagsFL','TagsIfFirstLetter'));

$core->tpl->addValue('TagsFirstLetter',array('TagsFL','TagsFirstLetter'));

class TagsFL
{
	# <tpl:TagsIfFirstLetter> ... </tpl:TagsIfFirstLetter>
	public static function TagsIfFirstLetter($attr,$content)
	{
		return
		'<?php '.
		'if (mb_strlen($_ctx->TagsFirstLetter) == 0) {$_ctx->TagsFirstLetter = null;}'.
		'$_ctx->TagsFirstLetter = mb_strtoupper(text::cutString($_ctx->meta->meta_id,1));'.
		'if ($_ctx->TagsFirstLetter != $_ctx->TagsFirstLetter_next) : '.
		'?>'.
		$content.
		'<?php endif;'.
		'$_ctx->TagsFirstLetter_next = $_ctx->TagsFirstLetter;'.
		' ?>';
	}
	
	# {{tpl:TagsFirstLetter}}
	public static function TagsFirstLetter($attr)
	{
		$f = $GLOBALS['core']->tpl->getFilters($attr);
		
		return
		'<?php echo($_ctx->TagsFirstLetter); ?>';
	}
}

Modification du fichier template tags.html

Ensuite, utilisez l'éditeur de thème pour ouvrir le fichier tags.html. Vous devez remplacer la portion de code suivante :

<ul class="tags">
	<tpl:Tags>
		<li><a href="{{tpl:TagURL}}" class="tag{{tpl:TagRoundPercent}}">{{tpl:TagID}}</a></li>
	</tpl:Tags>
</ul>

Si vous voyez <tpl:MetaData type="tag"> à la place de <tpl:Tags>, cela signifie que votre thème n'a pas été mis à jour pour la version 2.1.6. Voici la portion de code à remplacer dans ce cas :

<ul class="tags">
	<tpl:MetaData type="tag">
		<li><a href="{{tpl:MetaURL}}" class="tag{{tpl:MetaRoundPercent}}">{{tpl:MetaID}}</a></li>
	</tpl:MetaData>
</ul>

Ceci est la portion de code qui remplace la portion au-dessus :

<tpl:Tags>
	<tpl:TagsIfFirstLetter>
		<!-- # ne pas afficher de balise fermante au premier tag -->
		<tpl:LoopPosition start="2"></ul></tpl:LoopPosition>
		<h3>{{tpl:TagsFirstLetter upper_case="1"}}</h3><ul class="tags">
	</tpl:TagsIfFirstLetter>
	<li><a href="{{tpl:TagURL}}" class="tag{{tpl:TagRoundPercent}}">{{tpl:TagID}}</a></li>
	<!-- # ajouter une balise fermante après le dernier tag -->
	<tpl:LoopPosition start="-1"></ul></tpl:LoopPosition>
</tpl:Tags>

Ce code ne fonctionne qu'à partir de Dotclear 2.1.6.

Si l'affichage ne change pas sur votre blog, pensez à vider le cache de votre navigateur et le cache de Dotclear en utilisant le plugin Maintenance.

Idée originale : Vince69 sur le forum Dotclear

Trucs et astuces pour Dotclear

Installer Dotclear sur un serveur Nginx

Mise en place

Rediriger depuis la racine

Multi-blogs

Configuration complète exemple

Notes

Changer le mot de passe administrateur quand plus rien ne marche

Mettre en place une installation de test

Installation de Dotclear

1er cas : l’installation sur l’hébergement.

2er cas : l’installation en local.

Passer en version de test

Un menu déroulant pour les tags

Utiliser les behaviors de template pour créer des thèmes enfants simples et faciles à maintenir

Ajout/Suppression/Modification des smilies

Flux RSS limités à l'extrait

pour rss2.xml :

pour atom.xml :

Les flux : c'est mon dada !

Proposer plusieurs flux dans la liste

Préambule

Proposer le flux des billets ET des commentaires

Proposer les flux de chaque catégorie

Proposer le flux des commentaires du billet affiché

Rajouter les liens Atom pour les commentaires, tags et catégories

Flux Atom des commentaires du billet

Flux Atom de la catégorie du billet

Flux Atom des tags du billet

Conclusion

Architecture, titrage et navigation : le trio gagnant !

Phase 1 : Architecture. Agencez votre château de manière logique

Quelques petits conseils en matière d’architecture de l’information :

Phase 2 : Titrage. Nommez correctement les pièces de votre château

Quelques petits conseils en matière de titrage

Phase 3 : Navigation. Définissez des moyens de circulation entre les pièces de votre château

Quelques petits conseils en matière de navigation

Pour conclure

Prochain article

Notes

Comment concevoir un blog réellement ergonomique ?

Impliquez vos utilisateurs

Les trois questions

Qui sont vos utilisateurs ?

Exemple concret pour la refonte de l'admin Dotclear

Quels sont les attentes et objectifs de vos utilisateurs ?

Exemple concret pour la refonte de l'admin Dotclear

Quel est le contexte dans lequel les utilisateurs vont consulter le blog ?

Exemple concret pour la refonte de l'admin Dotclear

Spécifiez sur papier !

Activités et techniques ergonomiques

Phase d'analyse

Phase de conception

Phase de développement

Après la mise en ligne : recueil du feed-back utilisateurs à outrance

Pour finir

Notes

Les bénéfices de l'ergonomie

ergo koi ?

Hop c'est parti !

Besoins en ergonomie ?

Qu'est-ce qu'un produit ergonomique ?

Comment faire pour concevoir un produit ergonomique ?

Pourquoi adopter une démarche ergonomique ?

Les points importants à retenir

Notes

Prêts pour une virée dans le monde merveilleux de l’ergonomie ?

Une administration séparée

Contexte

Simple comme bonjour

Et le SSL, dans tout ça ?

Créer une balise template repérant certains mots des titres des billets

Notes

BBclone, statistiques sur son blog Dotclear

Préambule

Premiers pas, l'installation pour le premier blog

Installation pour suivre un 2e blog

Configuration personnalisée

Première étape

Deuxième étape

1^er cas : l’installation sur l’hébergement.

2^er cas : l’installation en local.