WordPress : afficher une blogroll contextuelle

La blogroll, c’est en général le grand fourre tout voir bien souvent le grand n’importe quoi.

On affiche d’un coup des tonnes de liens, ça prend une place folle dans la sidebar à tel point que de nombreux blogueurs la placent dans une page dédiée voir la supprime totalement.

Comme vous l’avez peut être constaté, ce blog subit de profonds changements, l’occasion pour moi de tester différentes choses et de mettre en place certaines idées que j’ai eu.

Parmi celles-ci, la blogroll thématique.

Passons aux choses sérieuses : la technique

Afficher une blogroll (liste de liens externes) thématique en fonction d’une catégorie ou d’un tag

Pré requis : utiliser wordpress, bidouiller un peu le PHP (et encore) et surtout connaitre un peu le moteur wordpress.

Première étape : créez une catégorie de liens.

Allez dans votre interface wordpress, onglet liens > catégories de liens

Créez une catégorie thématique (exemple référencement), enregistrez là.

Affichez la liste des catégories de liens et cliquez sur le lien modifier la catégorie.

Regardez l’url affichée dans votre barre d’adresse elle se finit par le code suivant : cat_ID=X.

X est l’identifiant de votre catégorie, notez le dans un coin et passons à l’étape 2.

Deuxième étape : récupérer l’identifiant de la catégorie d’articles concernée.

Allez dans votre onglet Articles > Catégories.

Faites la même chose que pour la catégorie de liens et notez le numéro identifiant dans un coin.

Troisième étape : récupérer l’identifiant du tag qui vous intéresse.

Là c’est pas difficile, en fait, il vous suffit de récupérer le Slug du tag, vous pouvez même le déduire aisément :

  • retirez les accents
  • remplacez les espaces par des –
  • retirez les majuscules

Exemple : Référencement devient referencement, mais vérifiez quand même des fois que.

Dernière étape, le code pour afficher la blogroll thématique

Ouvrez le fichier sidebar.php de votre thème et ajoutez le code suivant à l’emplacement ou vous voulez voir apparaitre la blogroll thématique :

<?php if (is_category('8') || in_category('8') || has_tag('referencement')) { ?>
<ul class="xoxo">
<h3>Blogs de Référencement</h3>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&category=44'); ?>
</ul>
</ul>
<?php } ?>

is_category('8') définit si vous êtes sur une page d’archive de catégorie

in_category('8') définit si l’article affiché fait partie de la catégorie ciblée

has_tag('referencement') regarde si votre article possède le tag ciblé

<?php wp_list_bookmarks('title_li=&categorize=0&category=44'); ?> affiche la liste de liens de la catégorie ciblée.

A vous d’utiliser les identifiants que vous avez noté plus haut.

Ce code est à personnaliser en fonction de la construction de votre sidebar.

Sur l’Ajblog, ce code me permet d’afficher la blogroll de blogs et sites parlant de référencement sur les pages d’archives de la catégorie, sur tous les articles de la catégorie et sur tout article possèdent le tag référencement (et ne faisant pas forcément partie de la catégorie référencement).

Vous pouvez ensuite répéter ce code (ou l’affiner avec des elseif) pour chaque catégorie de liens thématiques de votre blogroll.

Faire défiler vos derniers commentaires sous Dotclear ou WordPress avec jQuery – Mise à jour

Suite à une demande d’un lecteur sur le mode de fonctionnement du script de défilements des commentaires je me fend d’un petit billet.

En fait, c’est assez simple, donc on va expliquer ça dans l’ordre.

1 Télécharger la bibliothèque jQuery

Vous la trouverez à cette adresse :

Comme c’est pour utiliser directement en production, préférez la version compressée pour une question de poids. Utilisez le clic droit >> Enregistrer la cible sous et gardez en mémoire l’endroit de votre disque dur ou vous l’avez enregistré.

2 Installer le plugin des derniers commentaires

Pour dotclear c’est le plugin Last Comment de Francois Simond + David Latapie à cette adresse : http://blog.lienweb.fr/plugins-dotclear/plugin-lastcomments-0.9.3.pkg.gz.

C’est l’adresse du fichier auto-installeur, utilisez votre procédure habituelle d’installation, vous trouverez toutes les informations à cette adresse : http://blog.lienweb.fr/2006/03/04/122-plugin-dotclear-lastcomments-derniers-commentaires-0-9-3.

Pour WordPress nous allons nous baser sur le plugin Get Recent Comments de Krischan Jodies que vous trouverez à cette adresse : http://wordpress.org/extend/plugins/get-recent-comments/installation/ (utilisez le bouton download Plugin).

Suivez bien les procédures d’installation des plugins que vous soyez sur Dotclear ou WordPress, vérifiez bien que le plugin est actif et que vos derniers commentaires apparaissent bien là ou vous le voulez, je ne vais pas vous expliquer comment installer un plugin Dotclear ou WordPress aujourd’hui, nous partons du principe que vous savez déjà le faire.

3 télécharger le script qui va nous servir de base pour gérer le défilement

J’utilisais à l’origine un script JQuery appellé Newsticker, mais devant des problèmes de stabilité j’ai décidé d’utiliser un autre script : InnerFade with JQuery

La page explique l’utilisation générale du script, le lien de téléchargement est en bas de page.

Il vous faudra décomposer l’archive et récupérer le fichier jquery.innerfade.js qui s’y trouve. L’archive contient en fait une copie de la page d’explication d’utilisation du script.

J’ai décidé d’utiliser ce script pour des rasions de stabilité et de facilité d’intégration.

Il lui manque la fonctionnalité de stopper l’animation au passage de la souris, mais j’y travaille.

Installer et configurer l’ensemble.

Vous allez copier les fichiers les fichiers jquery-latest.pack.js et jquery.innerfade.js dans le répertoire de votre thème/template dotclear ou WordPress.

Vous éditez le fichier contenant le « head » général de votre thème/template, sout dotclear c’est template.php sous wordpress, normalement, ça doit être header.php.

Ajoutez les lignes suivantes juste avant le </head> :

Pour Dotclear :

<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery.innerfade.js"></script>

Pour WordPress :

<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery.innerfade.js"></script>

Attention : plusieurs personnes ayant essayé ce Tutoriel ont eu des problème avec ces lignes donc je vous donne les versions exactes pour Dotclear 1.2.x et WordPress à partir de la 1.5.

Ensuite, une petite feinte, allez sur votre blog en ligne ou les plugins de derniers commentaires est en fonctionnement et vérifiez le code html généré par ces commentaires.

Sous dotclear vous devriez avoir (a peu de près) le code généré suivant :

<div id="lastcomments">
<h2>Derniers commentaires</h2>
<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

</div>

Sous wordpress :

<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

Pour dotclear :

Il va falloir modifier le code à inclure dans notre template.php de la façon suivante :

Voici le code proposé par défaut :

<div id="lastcomments">
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Il faut le modifier pour avoir ça :

<div>
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Vous pouvez même supprimer le <div></div> si vous n’en avez pas l’utilité.

Ensuite, c’est un peu plus compliqué, mais à peine.

Si vous avez installé le plugin via une archive d’installation automatique (en passant par le backoffice -> outils -> Gestionnaire des plugins), vous n’avez pas les fichiers gérant le plugin lastcomments sur votre pc, il vous faut donc les télécharger.

Utilisez votre logiciel FTP et téléchargez le dossier suivant dans votre répertoire dotclear en ligne : /ecrire/tools/lastcomments.

Une fois le dossier téléchargé sur votre ordinateur, éditez le fichier functions.php avec votre éditeur de texte préféré.

A la ligne 158 (normalement) modifiez le code suivant :

echo '<ul>';

de cette façon :

echo '<ul id="lastcom">';

Enregistrez et republiez le fichier dans le répertoire /ecrire/tools/lastcomments sur votre serveur.

Normalement, tout devrait fonctionner. ;)

Pour WordPress :

L’identifiant « lastcom » de la liste non ordonnée étant important nous allons éditer le code que nous avons ajouté à notre template wordpress pour l’y intégrer.

Vous devez avoir quelque chose comme ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul>
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Nous ajoutons l’identifiant et nous avons alors ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul id="lastcom">
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Il nous reste le plus dur pour la fin, vous vous en doutez.

Pour finir donc :

Insérez dans le head de votre page ou template la ligne suivante, juste avant le </head> :

<script type= »text/javascript »> $(document).ready( function(){
$(‘#lastcom’).innerfade({ speed: ‘slow’, timeout: 6000, type: ‘sequence’, containerheight: ‘150px’ });
} ); </script>

Et c’est tout. ;)

Pour le reste il vous faudra travailler sur la partie CSS pour que l’ensemble se marie avec le design de votre site.

Vous pouvez changer la vitesse de rotation (le timeout:) la hauteur etc.. reportez vous sur la page de présentation du script pour plus de réglages.

Et n’oubliez pas de faire de l’habillage de #lascom dans votre feuille de style.

Il ne vous reste plus qu’à publier l’ensemble sur votre serveur.

L’AJblog n’est pas une hotline

Tout comme Eric Dupin de presse citron qui publie ce matin une mise au point sur les abus de demandes par mail, je tiens à préciser certains points quant aux sollicitations de plus en plus fréquentes que je reçois par email.

Pour des problèmes techniques :

Je ne suis pas un SAV de vos problèmes informatiques quels qu’ils soient.

Je ne réponds qu’aux personnes qui font l’effort d’un minimum de politesse, l’exemple que donne Eric sur son blog est caractéristique de la majorité des sollicitations reçues.

Si je vous renvoie vers un forum, c’est tout simplement que votre problème est classique et ne nécessite qu’un peu de recherche et de courage.

Je ne fais un article sur votre problème que dans le cas ou je pense qu’il peut intéresser la communauté de lecteurs de l’AJblog, et que leur participation peut éclairer le problème rencontré sous plusieurs angles.

Ce n’est pas la peine de me relancer si je ne réponds pas, surtout si la demande initiale ne contenait même pas un simple bonjour, en général votre adresse mail finit avec un filtre qui renvoie vos emails direct à la boitaspam.

Pour les demandes d’échanges de liens :

Voir ci-dessus pour la politesse.

Je n’accepte d’échange de liens que pour des blogs parlant des mêmes sujets que l’AJblog (notez au passage que ça laisse pas mal de possibilités) ou qui me semblent vraiment intéressants. Ce n’est pas du snobisme, une liste de liens longue comme le bras n’a aucun intérêt pour le visiteur, j’ai même retiré des liens vers des ressources que j’apprécie tout simplement parce que je pense que la majorité de mes lecteurs les connaissent déjà et que cela ne leur apporte rien de nouveau.

Petit écart avec mes principes, la rubrique de liens « De tout de rien » ou se retrouvent en général les « annuaires » ou l’Ajblog est inscrit, soit par choix (blogobulle, pages hub…) soit par « obligation », et les obligations ne vont pas tarder à aller voir ailleurs si j’y suis à mon avis, je n’aime pas être « obligé ».

Pour les offres commerciales :

C’est quand vous voulez, je vais bientôt avoir une quatrième bouche à nourrir. ;)

Correction d’exercice : un menu en rollover façon "dock" Mac

Pour rappel, voici le code source html qui sera utilisé pour les deux exercices :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

Les sources utiles :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Correction :

Il n’y a pas de grande difficulté pour cette exercice, vous avez presque toutes les réponses nécessaires en analysant bien les quelques exemples de menus fournis par le site Alsacréations.

Les grandes différences sont :

  • L’agrandissement de la surface active du lien au passage de la souris
  • l’effet de transition appliqué à l’image

Nous ne toucherons plus à la structure html, l’ensemble de l’exercice va se dérouler au niveau de la gestion de la feuille de style CSS et des images utilisée.

Le fichier CSS

Nous allons utiliser la technique du fond changeant en fonction du changement d’état du lien, passage du lien par défaut au lien (a) au passage de la souris (a:hover) et pour simplifier, à l’usage du clavier (a:focus).

Préparons la base de notre fichier CSS :

* {margin:0; padding:0;}
body {margin-top: 20%}
ul {width:350px; margin: 0 auto;}
li {display:inline;}

li a {
	display:block; 
	float:left; 
	width:50px; 
	height:100px; 
	}

Le sélecteur universel * est là pour remettre à zéro les valeurs de marge extérieure (margin:0) et marge extérieure (padding:0) qui peuvent être différentes d’un navigateur à l’autre. Au passage, en commençant toutes vos feuilles de style par ce petit bout de code, vous réglez 90 % de vos problèmes de rendu sur les différents navigateurs.

Les valeurs appliquées au body et au ul ne sont ici qu’à titre d’exemple et ne servent que pour la présentation de l’exercice, ce qui nous intéresse viens ensuite.

li {display:inline;} permet de changer la nature du conteneur li du type en bloc à type en ligne, pour résumer, cela vas permettre de présenter les éléments de la liste sur une ligne et non plus les uns « sous » les autres, pour plus d’informations vous pouvez aller voir cet article d’Alsacréations : La structure des balises : bloc et en-ligne.

li a {"valeurs"} c’est ici que nous construisons la forme de nos boutons, nous modifions la nature de la balise a pour la transformer en type « en bloc » (display:block), nous lui donnons un positionnement flottant à gauche (float:left;) de façon à ce qu’ils se positionnent les un a côté des autres, nous leur donnons une forme (width:50px; height:100px). Voila, nos boutons sont prêts.

Le 100px de hauteur des boutons n’est pas choisi au hasard, il correspond à la hauteur des boutons en mode actif, nous passerons donc de boutons de 50 pixels de large et 100 pixels de haut à des boutons de 100 pixels de large sur 100 pixels de haut.

c’est aussi pour ça que nous avons donné une largeur de 350 pixels à la liste (ul) car cela corresponds à 5 boutons de largeur 50 pixels et un de largeur 100 pixels. Ca vous évitéra des surprises de mise en page en prévoyant dés le début la taille maximale prise par votre menu.

Passons à la décoration.

Nous allons en premier lieu préparer nos images.

Les boutons en version off :

Une simple image de 300 pixels de large et 100 pixels de haut dans laquelle vous allez créer vos boutons que vous placerez tous les 50 pixels.

Essayez avec des images simples pour l’exercice, rien de vous empêche par la suite de le refaire avec d’autres types de boutons, à vous d’adapter.

Voici l’image utilisée :

Nous avons utilisé un format gif pour une meilleure concordance de couleurs sous les différents navigateurs vu que nous devons utiliser des fichiers gifs pour les boutons en mode ON.

On les insère ensuite dans le document en ajoutant ces lignes à notre feuille de style :

#un a {background:transparent url(menu-rollover-jscript.gif) no-repeat  left top; }
#deux a {background:transparent url(menu-rollover-jscript.gif) no-repeat -50px top; }
#trois a {background:transparent url(menu-rollover-jscript.gif) no-repeat -100px top; }
#quatre a {background:transparent url(menu-rollover-jscript.gif) no-repeat -150px top; }
#cinq a {background:transparent url(menu-rollover-jscript.gif) no-repeat -200px top; }
#six a {background:transparent url(menu-rollover-jscript.gif) no-repeat -250px top; }

menu-rollover-jscript.gif est le nom de mon image, bien sur, utilisez le nom de l’image que vous avez créé.

Cela ne fonctionnera que si vous avez utilisé le code html fourni, ou chaque élément de liste (li) a son id propre (un, deux, trois, etc.).

On a utilisé la technique du positionnement de fond (left top, -50px top, etc) de façon à ce que chaque bouton ait bien le fond qui lui convient, une seule image pour les 6 boutons.

Les boutons version ON

En temps normal, pour un simple changement de fond, nous aurions utilisé la même image que celle du fond par défaut, en y incluant, plus bas, les versions ON des boutons, mais comme nous voulons obtenir un effet de transition, nous allons utiliser une image par bouton, un bon vieux gif animé.

Voici comment nous allons faire (l’exemple ci-dessous est réalisé avec Photoshop/imageready, si vous utilisez un autre logiciel pour vos gif animés, adaptez en fonction des spécificités de votre logiciel).

Créez une image de 100 pixels par 100 pixels avec un fond transparent.
Créez un équivalent du bouton de base bien centré dans votre image (par exemple outil elipse avec la touche shift enfoncée pour l’homothétie).

Ajoutez le texte correspondant (1, 2, etc.)

Fusionnez le texte avec votre bouton (calques photoshop)
Dupliquez le calque.
Réduisez le calque inférieur à 75% de la taille du calque supérieur, recentrez le si besoin.
appliquez à ce calque un flou gaussien (filtres/atténuation/flou gaussien), normalement le réglage par défaut devrait suffire.
Basculez sous imageready (bouton en bas à droite de votre barre d’outils flottante).

Une fois dans Imagerady (ou votre logiciel d’animations), créez deux « images » d’animation, la première avec l’objet flouté et la deuxième avec l’objet « normal ».
Pas de temps de transition et pas de répétition d’animation.
Enregistrez la copie optimisée sous et vous voila avec votre premier bouton ON.

Répétez l’opération pour les cinq autres boutons. Il y a bien sur une méthode plus rapide pour créer les cinq boutons, mais pour l’instant nous allons rester sur cette méthode « simple ».

Il ne vous reste plus qu’a appliquer ces fonds via votre feuille de style avec le code suivant à ajouter à la suite :

#un a:hover, #un a:focus {width:100px; height:100px; background:transparent url(1.gif) no-repeat left top; }
#deux a:hover, #deux a:focus { width:100px; height:100px; background:transparent url(2.gif) no-repeat left top; }
#trois a:hover, #trois a:focus {width:100px; height:100px; background:transparent url(3.gif) no-repeat left top; }
#quatre a:hover, #quatre a:focus {width:100px; height:100px; background:transparent url(4.gif) no-repeat left top; }
#cinq a:hover, #cinq a:focus {width:100px; height:100px; background:transparent url(5.gif) no-repeat left top; }
#six a:hover, #six a:focus {width:100px; height:100px; background:transparent url(6.gif) no-repeat left top; }

Nous appliquons le changement de taille et de fond lors des changements d’état :hover et :focus, pour que l’effet soit accessible soit à la souris, soit au clavier.

Encore une fois j’ai utilisé mes noms de fichiers, pensez à utiliser vos propres noms de fichiers.

Ah oui, dernier point, votre texte s’affiche toujours à l’écran, pour éviter cela vous pouvez utiliser text-indent:-5000px; a ajouter a votre partie de feuille de style li a {…}. Ou pour faire plaisir à Florent V. jouer avec la taille de police, les couleurs des images et les couleurs de fond des balises a de façon à ce que le texte apparaisse si les images sont désactivées.

Et voici le résultat :

http://www.ajcrea.com/exercices/rolloverjscript/

Attention : cette méthode a un défaut, comme les images « ON » ont une animation qui ne s’effectue qu’une fois, on ne peut les précharger sans que l’animation ne s’active, donc au premier affichage dans le menu, vous aurez une latence d’affichage, le temps que le navigateur charge le fichier. C’est bien pour ça que j’ai continué à creuser pour en arriver au deuxième exercice.

Fin de la correction pour ce matin, le travail m’appelle, je publierai la correction du deuxième exercice cet après midi.

Nous revoila avec la correction du deuxième exercice :

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Rappel des directives :

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Nous partons toujours du fichier html fourni en début de correction et encore une fois tout va se jouer au niveau du CSS et des images.

Un peu de réflexion

Quand j’ai commencé à réfléchir à ce type de menu, j’ai d’abord essayé avec la méthode du premier exercice, mais elle ne m’a pas totalement convaincue.

J’ai donc creusé dans mes connaissances des comportements CSS pour voir comment je pouvais contourner les difficultés détectées :

  • Il me fallait un changement multiple d’images pour simuler les augmentations proportionnelles des boutons (du plus grand au plus petit).
  • Une compatibilité avec un maximum de navigateurs, donc pas de trucs et astuces ne fonctionnant pas sur Internet Explorer.
  • Que « l’animation » soit fluide, donc pas d’animations longues à charger au survol de la souris.
  • Pas de javascript
  • Que soit globalement « accessible »

Je vous livre dés maintenant la solution :
[
Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac »|http://www.ajcrea.com/exercices/rolloverjscript/test2.html|fr].

L’image utilisée :

La feuille de style CSS :

body {margin-top: 20%}

* {margin:0; padding:0;}
ul {
position:relative; 
width:350px; 
height:100px; 
margin: 0 auto; 
background:transparent url(global.png) no-repeat  left top; }
li {display:inline;}

li a {
	display:block; 
	width:50px; 
	height:100px; 
	text-indent:-5000px;
	}
#un a {position:absolute; top:0; left:0px; z-index:200; }
#deux a {position:absolute; top:0; left:50px; z-index:200; }
#trois a {position:absolute; top:0; left:100px; z-index:200;}
#quatre a {position:absolute; top:0; left:150px; z-index:200;}
#cinq a {position:absolute; top:0; left:200px; z-index:200;}
#six a {position:absolute; top:0; left:250px; z-index:200;}

#un a:hover, #un a:focus, #deux a:hover, #deux a:focus, #trois a:hover, #trois a:focus, #quatre a:hover, #quatre a:focus, #cinq a:hover, #cinq a:focus, #six a:hover, #six a:focus  {
position:absolute; top:0; left:0px; 
width:350px; height:100px; 
z-index:100
}

#un a:hover, #un a:focus {
background:transparent url(global.png) no-repeat left -100px;
}
#deux a:hover, #deux a:focus {
background:transparent url(global.png) no-repeat left -200px;
}
#trois a:hover, #trois a:focus {
background:transparent url(global.png) no-repeat left -300px;
}
#quatre a:hover, #quatre a:focus {
background:transparent url(global.png) no-repeat left -400px;
}
#cinq a:hover, #cinq a:focus {
background:transparent url(global.png) no-repeat left -500px;
}
#six a:hover, #six a:focus {
background:transparent url(global.png) no-repeat left -600px;
}

Ce qui nous donne la page suivante :

http://www.ajcrea.com/exercices/rolloverjscript/test2.html

Explications :

Je ne vais pas revenir sur les points déjà vus dans le premier exercice, juste expliquer les différents points importants.

La liste non ordonnée :

utilisation du positionnement relatif (position:relative) pour une seule raison, permettre aux éléments enfants en positionnement absolu (position:absolute) de se fixer sur son layout et non pas sur la page.

Le fond de base est appliqué a cet élément, et non pas aux éléments liens (a).

les boutons version OFF (les éléments a) :

Ils sont positionnés en absolu pour ne pas bouger quand nous allons modifier les comportement des a:hover et a:focus.
On leur donne une forme (width:50px, height:100px) et un z-index de 200, l’intérêt du z-index va venir par la suite.

les boutons version ON (:hover, :focus) :

On profite du changement d’état pour donner une nouvelle taille au bouton (width:350px; height:100px;) soit la taille exacte du menu, on les positionne en absolu en haut à gauche pour qu’ils commencent graphiquement au début du menu.

On leur donne un z-index de 100 pour qu’ils se positionnent au dessous des zones réactives des liens (qui elles, sont en z-index:200 soit « au dessus »), de fait, le fond recouvre bien l’ensemble des boutons, mais les zones réactives de chaque lien restent accessibles au survol et clic de souris (et au clavier).

Attention : bien que personnellement je trouve l’effet efficace, il faut faire attention au poids de l’image utilisée en fond qui peut finir par être assez lourde si vous faites un menu vraiment graphique.

Pour finir

Le premier exercice n’était pas bien compliqué, il s’agit juste d’une variante des menus que vous trouvez dans la galerie d’Alsacréations fournie dans les sources.

Le deuxième demandait presque plus de travail au niveau de l’image que des CSS, mais quand même je suis assez content du résultat.

Comme toujours, si vous avez des questions ou des remarques, n’hésitez pas.

Exercice CSS : un menu en "rollover façon "Dock Mac"

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Voici ce qui m’a donné envie de tester ce genre de rendu (bien joué julien A ;) ) : attention le cargement de cette page risque de « geler votre navigateur pendant de longues secondes.
http://archive.dojotoolkit.org/nightly/tests/widget/test_FisheyeList.html

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Attention !!

Ces deux exercices, quel que soit leur niveau, demandent quand même de prendre un peu de recul par rapport à vos méthodes de travail. Leur but principal est de vous faire penser « rendu » dans sa globalité, une page web est un ensemble de choses, pour arriver à un rendu, il faut parfois prendre les choses sous un angle différent de ce à quoi vous êtes habitués.

Dernier point : le questionnement sur les images utilisées est important.

Bon courage à vous.

PS : j’oubliais, voici le code html utilisé :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

PPS : pour information, les deux constructions on été testées avec succès sur : IE5.5, IE6, IE7, Opera 9, FF 1.5 et FF 2.

Le corrigé :

Correction d’exercice : un menu en rollover façon « dock » Mac

Correction d’exercice CSS : un pied de page qui dépasse sur le contenu

Voici donc ma correction, vous trouverez les propositions des lecteurs en fin d’article.

En premier : le code html

Pas de grandes difficultés, il s’agit d’une mise en page classique en trois colonnes comme on en trouve un peu partout, vous avez d’ailleurs d’excellents exemples sur Alsacréations : Modèles de mise en page en CSS

On va donc faire une construction simple, avec : un bloc d’en tête (header), une colonne gauche (qui sera le menu principal), un contenu central, une colonne droite, un pied de page (footer).

Comme la colonne de gauche fait office de menu général, on va donc sans aucun remord la placer avant le contenu central dans le flux de la page.

Ca nous donne la structure suivante (en XHTML strict) :

Lien vers la page de code (pensez à afficher la source)

Vous remarquerez deux choses:

  • J’ai déjà identifié mes blocs via une ID unique pour chaque, j’utilise toujours les mêmes ID dans mes constructions html, tout simplement pour pouvoir m’y retrouver facilement et pour pouvoir recycler des modèles de feuilles de style CSS facilement.
  • Le code est commenté, pour l’instant il est très lisible, mais dans des pages à fort contenu, il est toujours bon de commenter son code, soit pour s’y retrouver aisément, soit pour qu’un autre s’y retrouve.

Pour l’instant, nous n’allons pas mettre de contenu, nous allons construire la mise en page de ce squelette via une feuille de style CSS simple.

Et pour savoir quelles valeurs de hauteur/largeur nous allons donner à nos différentes parties, nous allons nous baser sur la maquette fournie :

miniature de la maquette cotée

Le design fait 990 pixels de large, chaque colonne fait 200 pixels de large, le pied de page fait 50 pixels de haut.

Ce qui nous donne le code CSS suivant :

#general {width:990px; margin: 0 auto;}
#header {height:100px}
#colgauche {
	float:left;
	width:200px;
	height:400px;
}
#central {
	float:left;
	width:550px;
	height:400px
}
#coldroite {
	float:right;
	width:200px;
	height:400px;
}
#footer {
	clear:both;
	height:50px;
}

J’ai attribué une hauteur aux éléments de contenu pour les tests, pensez à les retirer une fois qu’il y a un vrai contenu.
Ensuite, les images de déco.

Et bien, nous n’allons pas nous embêter à découper l’image utilisée en fond du pied de page, nous allons l’utiliser en entier, son poids global (si bien compressée) ne pose pas de problèmes, une fois nettoyée des résidus de texte (pour exemple, l’image que je vais utilise est en png24 et fait 35 kos).

C

Toute la découpe va se faire via un mélange de html et de CSS.

Ces images de décoration, n’ont aucune valeur d’information, aussi nous pouvons les afficher via des fonds CSS sans aucune arrière pensée, elles n’apportent aucune information utile à la page, elles sont juste là à titre de décoration.

Voici comment nous allons procéder :

Nous allons créer 3 conteneurs/division (div) vides que nous allons positionner juste avant la balise fermante (</div>) du pied de page (footer).

<div id= »decogauche »>
</div>
<div id= »decocentre »>
</div>
<div id= »decodroite »>
</div>

Puis nous allons leur donner une forme et un fond via CSS, on connait le fond, on connait leurs largeurs, la seule inconnue est la hauteur optimale pour qu’elles se marient le mieux avec les contenus des colonnes et du contenu central, pour l’instant nous allons leur donner une hauteur égale à celle de l’image utilisée, soit 190 pixels.

Au passage, nous allons en profiter pour attribuer le fond au pied de page.

Voici donc le code CSS appliqué à ce moment là :

#footer {
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	width:590px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Les colonnes faisant 200 pixels de large chacune, on a déduit la largeur du bloc central à 590 pixels (990-400). On a positionné le fond de ce bloc à -200 pixels sur la gauche de façon à ne faire apparaitre que la partie qui nous intéresse.

Si vous avez effectué ces opérations et que vous affichez votre page dans un navigateur, vous voyez le pied de page avec un fond et 3 blocs qui s’affichent en dessous et qui correspondent au parties sur lesquelles nous allons travailler.

C’est bien beau, mais maintenant ?

Maintenant, on va doucement positionner tout ça en utilisant le positionnement absolu (position: absolute).

Pour ce faire, nous allons commencer par donner un positionnement relatif (position: relative) au pied de page (footer). En effet, donner un positionnement relatif à un conteneur, permet que ses conteneurs enfants en position absolue se fixent par rapport à sa forme et non plus par rapport à la page.

De plus, nous allons réduire la hauteur des blocs concernés de 50 pixels (la hauteur du pied de page) de façon à ce que les fonds se marient le plus parfaitement possible.

Voici ce que donne le css maintenant (du moins la partie que nous modifions) :

#footer {
	position:relative;
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

C’est déjà pas mal, mais ce n’est pas encore ça, nous avons découpé notre image en hauteur en fonction de l’élément le plus haut, la petite fille sur son vélo à droite, seulement la partie gauche et la partie centrale n’ont pas besoin d’être aussi hautes, on va donc travailler le CSS de façon à ce qu’ils fassent juste la hauteur nécessaire et surtout repositionner les fond en fonction.

Faites vos essais, mais voici ce que ça donne pour moi :

#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 100px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left -40px;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 55px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px -85px;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Pour terminer, pensez à donner à vos éléments de contenu (colgauche, central, coldroite) une marge intérieure basse (padding-bottom) au mois égale à la hauteur des blocs de déco pour que leur contenu de passe pas sous les blocs déco.

Voici la construction dans sa version « finale » : page3.html

Bon, je vous rassure, il y a, dans ce cas précis, une méthode beaucoup plus simple. ;)

Vu que nous avons utilisé une seule et grande image, nous aurions pu mettre cette image comme fond du conteneur « general » et appliquer les règles de marges intérieures basse aux éléments de contenu (et chercher une solution pour le fond de la colonne de gauche). Je crois d’ailleurs que c’est en partie la solution gardée par Florrent V.

Mais je le rappelle, il s’agit d’exercices pour apprendre à mieux appréhender les différents comportements des CSS.

Les contributions des lecteurs :

La réponse de clb56 :
http://www.clb56.fr/test_css/aj_css_exercice3/
http://www.clb56.fr/test_css/aj_css_exercice3bis/

La réponse de Florent V :
http://web.covertprestige.info/divers/ajblog/exo3.html

Maintenant, essayons de déterminer ensemble quelle est la « meilleure » solution, à vos claviers.

Exercice CSS : un pied de page qui dépasse sur le contenu

La semaine dernière, je vous avais parlé d’une maquette à réaliser en urgence.

Cette maquette a été acceptée par le client, moyennant quelques petites modifications, mais le prestataire en charge de l’intégration m’est tombée dessus à propos de certaines libertés que j’avais prises d’un point de vue de la mise en page (coucou Myriam ;) ).

Euhhh, dis Aymeric, elle est sympa ta maquette, mais je ne rêve pas, ton pied de page là, il dépasse vers le haut, c’est super chelou à intégrer ça.

Tss tss femme de peu de foi dans les capacités des CSS (on notera au passage que ce pied de page est un mix entre ma proposition de maquette et celle de Myriam, donc je ne suis pas le seul fautif).

Je donne donc à Myriam deux ou trois trucs et astuces pour faciliter ce type d’intégrations (pour une fois que c’est dans ce sens, en général c’est moi qui appelle Myriam à l’aide pour des problèmes de php).

Donc, voici l’exercice.

Un pied de page qui dépasse sur le contenu de la page

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de positionner des éléments graphiques inclus dans la partie appelée « pied de page » de façon à ce qu’ils se superposent avec des contenus présents dans des éléments supérieurs de la page (voir image fournie pour une meilleure visualisation).
  • Niveau de difficulté : complexe
  • Difficulté détectée : Mise en page en trois colonnes, la colonne de gauche à un fond de couleur.
  • Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement et leurs interactions est nécessaire (des sources sont fournies en bas de page).
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Le design à une largeur fixe, les textes des colonnes visibles dans l’image jointe ne sont là qu’a titre indicatif, il faut, au final, que le texte du contenu central soit clairement positionné comme précisé sur le visuel. Comme toujours, le code html et CSS doivent être valides, c’est le minimum, je vous laisse tout liberté au niveau de contraintes supplémentaires si vous en avez envie. Bien sur au minimum compatible avec les principaux navigateurs du marché.

L’image

miniature de l'image de référence de l'exercice

Tout est dans l’image, une version à taille réelle est récupérable en cliquant sur l’image affichée.

Tout est réalisable à partir de cette image, si le besoin s’en fait sentir, je vous fournirai les fichiers graphiques source de chaque élément, mais ce n’est pas vraiment le fond du problème.

Je vous demande donc, de fournir un fichier html, un fichier css (ou le css intégré dans le fichier html), ainsi que les images découpées, et de si possible, préciser vos choix techniques.

Les sources (pour rappel) :

Voila, bon exercice et bon courage à vous.

Installer dotclear sur un serveur windows IIS

Quand j’ai découvert dotclear il y a quelques temps, je me suis dit « chouette je me fais un blog, ça a l’air très bien ce truc. »

Seulement, pour des raisons professionnelles, mon hébergement est sous serveur Microsoft IIS.

L’installation ne fonctionnant pas en automatique, j’ai dû alors bidouiller à droite et à gauche, aidé en cela par la très sympathique communauté des forums dotclear, spéciale dédicace à Kozlika.

L’article d’origine se trouve à cette adresse sur le forum de Dotclear.

Passons à l’essentiel, l’installation.

Bon alors, pour installer dotclear sous IIS :

  1. Brancher ses neurones et retrousser ses manches.
  2. Vérifier que votre hébergeur propose les version PHP et MYSQL nécessaires au bon fonctionnement de dotclear.
  3. Télécharger dotclear, dézippez le.
  4. Demander si nécessaire à votre hébergeur de vous créer vote base mysql et récupérez les données importantes.

* Adresse de la base

  • nom de la base
  • utilisateur
  • mot de passe

On va commencer avant toute chose par créer la structure de la base.

  1. Connectez vous a votre interface PHPmyadmin.
  2. Sélectionnez dans le cadre de gauche la base dans laquelle vous allez intégrer les tables de dotclear.
  3. Une fois la base sélectionnée.

* Soit vous utilisez le lien en bas du cadre de gauche pour lancer la fenêtre SQL.

  • Soit l’onglet SQL de la page de description du contenu de votre base.

Un formulaire permettant d’entrer une requête SQL est alors accessible.

Voici les requêtes à exécuter : (elles se trouvent dans le fichier db_create.xml du repertoire install)

  
   CREATE TABLE `dc_user` (
   `user_id` varchar(32) binary NOT NULL default '',
   `user_level` int(11) NOT NULL default '0',
   `user_pwd` varchar(32) binary NOT NULL default '',
   `user_nom` varchar(255) binary default NULL,
   `user_prenom` varchar(255) binary default NULL,
   `user_pseudo` varchar(255) binary default NULL,
   `user_email` varchar(255) default NULL,
   `user_post_format` varchar(5) NOT NULL default 'wiki',
   `user_edit_size` int(11) NOT NULL default '10',
   `user_pref_cat` int(11) default NULL,
   `user_lang` char(3) default NULL,
   `user_delta` int(1) NOT NULL default '0',
   `user_post_pub` int(1) NOT NULL default '0',
   PRIMARY KEY  (`user_id`)
   ) ENGINE=MyISAM
  
   CREATE TABLE `dc_categorie` (
   `cat_id` int(11) NOT NULL auto_increment,
   `cat_libelle` varchar(255) NOT NULL default '',
   `cat_desc` longtext,
   `cat_libelle_url` varchar(255) NOT NULL default '',
   `cat_ord` int(11) default NULL,
   PRIMARY KEY  (`cat_id`),
   UNIQUE KEY `cat_libelle_url` (`cat_libelle_url`),
   UNIQUE KEY `cat_libelle` (`cat_libelle`)
   ) TYPE=MyISAM
  
   CREATE TABLE `dc_post` (
   `post_id` int(11) NOT NULL auto_increment,
   `user_id` varchar(32) binary NOT NULL default '',
   `cat_id` int(11) default NULL,
   `post_dt` datetime default NULL,
   `post_creadt` datetime default NULL,
   `post_upddt` datetime default NULL,
   `post_titre` varchar(255) default NULL,
   `post_titre_url` varchar(255) default NULL,
   `post_chapo` longtext,
   `post_chapo_wiki` longtext,
   `post_content` longtext,
   `post_content_wiki` longtext,
   `post_notes` longtext,
   `post_pub` int(1) NOT NULL default '0',
   `post_selected` int(1) NOT NULL default '0',
   `post_open_comment` int(1) NOT NULL default '0',
   `post_open_tb` int(1) NOT NULL default '0',
   `nb_comment` int(11) NOT NULL default '0',
   `nb_trackback` int(11) NOT NULL default '0',
   `post_lang` varchar(5) default NULL,
   PRIMARY KEY  (`post_id`)
   ) TYPE=MyISAM
  
   CREATE TABLE `dc_comment` (
   `comment_id` int(11) NOT NULL auto_increment,
   `post_id` int(11) NOT NULL default '0',
   `comment_dt` datetime default NULL,
   `comment_upddt` datetime default NULL,
   `comment_auteur` varchar(255) default NULL,
   `comment_email` varchar(255) default NULL,
   `comment_site` varchar(255) default NULL,
   `comment_content` longtext,
   `comment_ip` varchar(15) default NULL,
   `comment_pub` int(1) default '0',
   `comment_trackback` int(1) NOT NULL default '0',
   PRIMARY KEY  (`comment_id`)
   ) TYPE=MyISAM
   CREATE TABLE `dc_ping` (
   `ping_id` int(11) NOT NULL auto_increment,
   `post_id` int(11) NOT NULL default '0',
   `ping_url` varchar(255) NOT NULL default '0',
   `ping_dt` datetime default NULL,
   PRIMARY KEY  (`ping_id`)
   ) TYPE=MyISAM
   CREATE TABLE `dc_log` (
   `user_id` varchar(32) binary NOT NULL default '',
   `table` varchar(255) NOT NULL default '',
   `key` varchar(255) NOT NULL default '',
   `date` datetime NOT NULL default '0000-00-00 00:00:00',
   `ip` varchar(15) default NULL,
   `log` varchar(255) NOT NULL default ''
   ) TYPE=MyISAM
   CREATE TABLE `dc_link` (
   `link_id` int(11) NOT NULL auto_increment,
   `href` varchar(255) NOT NULL default '',
   `label` varchar(255) NOT NULL default '',
   `title` varchar(255) NOT NULL default '',
   `lang` char(2) NOT NULL default '',
   `rel` varchar(255) default NULL,
   `position` int(11) NOT NULL default '0',
   PRIMARY KEY  (`link_id`)
   ) TYPE=MyISAM
   CREATE TABLE `dc_session` (
   `ses_id` varchar(32) NOT NULL default '',
   `ses_time` int(11) NOT NULL default '0',
   `ses_start` int(11) NOT NULL default '0',
   `ses_value` text NOT NULL,
   PRIMARY KEY  (`ses_id`)
   ) TYPE=MyISAM

Je n’ai pas exécuté les requêtes des :
<! FULLTEXT KEYS >

   SELECT REPLACE(VERSION(),'-log','') >= '3.23.23' (fonction de la version mysql non?)
   ALTER TABLE `PREFIXpost` ADD FULLTEXT `full_post_titre` (`post_titre`)
   SELECT REPLACE(VERSION(),'-log','') >= '3.23.23'
   ALTER TABLE `PREFIXpost` ADD FULLTEXT `full_post_content` (`post_content`)
   SELECT REPLACE(VERSION(),'-log','') >= '3.23.23'
   ALTER TABLE `PREFIXpost` ADD FULLTEXT `full_post_chapo` (`post_chapo`)

<! FIRST CATEGORY >

 INSERT INTO `PREFIXcategorie`
 (`cat_id`, `cat_libelle`, `cat_libelle_url`, `cat_ord`) VALUES
 (1, 'General', 'General', 0)

et

<!–
INDEXES

 ======================================================

–>

   ALTER TABLE `PREFIXpost` ADD INDEX `fk_post_categorie` (`cat_id`,`post_pub`)
   ALTER TABLE `PREFIXpost` ADD INDEX `fk_post_user` (`user_id`,`post_pub`)
   ALTER TABLE `PREFIXcomment` ADD INDEX `fk_comment_post` (`post_id`)
   ALTER TABLE `PREFIXping` ADD INDEX `fk_ping_post` (`post_id`)

Ni les requêtes du document db_upgrade.xml qui se retrouvent également dans le répertoire install de dotclear.
Si un gentil administrateur ou codeur dit que c’est obligatoire, n’hésitez pas à le faire. :)

Suite de la manip :
Créer un compte administrateur.

Une fois que vous aurez créé vos tables, elles apparaissent dans le cadre gauche de votre phpmyadmin, cliquez sur la table dc_user.
Par défaut elle apparaît en mode structure.
Cliquez sur l’onglet « Insérer » de la page d’affichage.
Et entrez vos coordonnées d’administrateur dans les champs valeur.

IMPORTANT :
dans le champs user_level mettez 9 (code administrateur)
pour le champs user_pwd mettez votre mdp encodé :

  • Allez à cette page (sans quitter le phpmyadmin hein) : http://scriptserver.mainframe8.com/md5.php
  • rentrez votre mdp dans le champ et cliquez sur « encode »
  • copiez la suite de chiffre et de lettres qui apparaissant sous le formulaire.
  • collez dans le champs user_pwd

Retournez sur votre interface phpmyadmin, cliquez sur le bouton exécuter.

Wala normalement votre base est prête.

Revenons a dotclear.

Allez dans le répertoire /conf
ouvrez le fichier config.php.in (si vous n’avez pas de bon éditeur html ou teste utilisez wordpad, il le fait très bien ^^)

Cherchez ces lignes :

  1. Utilisateur MySQL

define(‘DB_USER’,’test’);

  1. Mot de passe MySQL

define(‘DB_PASS’,’test’);

  1. Nom de machine MySQL (généralement localhost)

define(‘DB_HOST’,’test’);

  1. Nom de la base de données

define(‘DB_DBASE’,’test’);

  1. Préfixe à ajouter devant le nom de chaque table

define(‘DB_PREFIX’,’dc_’);

Remplacez les test par les données d’accès à votre base fournies par votre hébergeur.
J’ai laissé la partie préfixe bien que dans le cas d’une seule base avec un seul dotclear ce ne soit pas nécessaire. (à me confirmer)

Réenregistrez le fichier modifié dans le répertoire /conf mais au format .php (retirez le .in à la fin)

Faites pareil pour le fichier dotclear.ini.in.
Personnellement je ne l’ai pas modifié, juste réenregistré au format .ini en retirant le .in à la fin.

Publiez votre répertoire /dotclear chez votre hébergeur.

En ligne allez sur http://monadresse.com/dotclear/ecrire/idex.php (remplacez monadresse.com par l’adresse de votre site) et commencez à créer votre blog.

Bon voila, ça a marché pour moi, j’espère ne pas avoir dit de trop grosses bêtises, au cas où n’hésitez pas à rajouter des choses (si c’est possible d’éditer le message c’est aussi bien).

Bon blog à vous.
Aymeric