Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué d’images et qui s’adapte au contenu (technique des sliding-door ou portes-coulissantes).

Démonstration

Vous pouvez dès maintenant télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS.

Une version de démo est visible sur cette page : Démo : fil d’ariane avancé en css.

Explications

Pour réaliser notre fil d’ariane nous allons nous servir des balises html <ul> et <li> et nous allons y placer des images de fond.

L’important ici c’est de repérer les ensembles d’éléments. Ici il y en a trois :

• Le premier élément de la liste : l’image de fond est différente des autres
• Tous les éléments de la liste sauf le premier et le dernier : l’image de fond est identique à chaque fois
• Le dernier élément de la liste : ne contient pas de lien

Un petit schéma pour mieux comprendre la construction html de notre fil d’ariane :

Pour chaque élément de la liste il y a trois images. Puisque les « multiple-backgrounds » n’en sont encore qu’à leur début en CSS3, il faudra se contenter d’une seule image de fond par élément html. Il faut donc nécessairement 2 éléments html en plus du <li>. J’ai utilisé les balises <a> et <span>.

Puisque le dernier élément de la liste n’est pas cliquable, j’utiliserai deux balises <span> côte à côte.

Venons-en au cœur du problème à savoir le code…

Le code html

<div id="breadcrumb">
 <ul>
  <li class="first"><a href="#" title="Back to item1">item 1</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 2">item 2</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 3">item 3</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 4">item 4</a><span class="end"> </span></li>
  <li><span>item 5</span><span class="end"> </span></li>
 </ul>
</div><!-- /breadcrumb-->

Le code CSS

/*Largeur du div englobant*/
#breadcrumb{width:500px;}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}  

/*Style de la liste*/  
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}  

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url(../images/first-left.png) 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}  

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url(../images/bg-gradient.jpg) 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.02em;
}  

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url(../images/general-right.png) 0 0 no-repeat;
width:15px;
height:33px;
}

Quelques explications complémentaires…

<div id="breadcrumb"> ...</div>

Ce div englobant peut vous permettre d’éviter les soucis d’interprétation du modèle de boite par les différents navigateurs… Ainsi vous pouvez donner une largeur au div#breadcrumb et donner les valeurs de padding/margin à votre liste ul. Aucun de ces deux éléments ne couple width+margin+padding. En codant ainsi, vous ne rencontrerez aucune différence de rendu entre navigateurs.

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}

Ici on place l’image de fond située sur la partie gauche des <li> principaux. Pour ne pas que le contenu empiète sur l’image de fond, on donne un padding-left de la même largeur que l’image de fond soit 13px.

Pour centrer verticalement le contenu d’un élément de type « inline » on utilise la formule : height = line-height.

Compatibilité IE6…

J’ai volontairement utilisé des images transparentes en png pour cet exemple puisque les navigateurs sont maintenant capables de très bien gérer ce format. Cependant, le format png n’est pas pris en compte par IE6 et cet exemple ne fonctionnera donc pas vraiment sur ce navigateur.

Pour ceux qui sont pour le progrès, laissez tombez ce qui va suivre…

Pour ceux qui sont souhaitent encore optimiser leur contenu web pour les utilisateurs d’IE6, voici 3 solutions pour gérer correctement la transparence du format png sur ce navigateur :

Vous trouverez une solution qui fonctionne parfaitement en allant voir de ce côté : IE PNG Alpha Fix v2.0 Alpha 4.

Vous pouvez aussi utiliser des images en gif en plus de vos images png et faire en sorte qu’elles ne soient prisent en compte que pour IE6 grâce à la propriété : «!important». Je vous renvoie à l’article de Gopal Raju sur son blog ProductiveDreams : IE CSS hack without using any hacks!

La troisième et dernière solution consiste à utiliser les filtres Alphaimageloader. Elle est à bannir si vous voulez passer la validation du W3C mais s’avère être tout à fait fonctionnelle. Pour plus d’infos à ce sujet je vous renvoie à l’article d’Alsacreations : Obtenir la transparence PNG avec Internet Explorer 6.

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins mais il y a peut-être mieux ?! Pour finir je vous donne les deux liens de téléchargement et de démonstration :

Télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS. Le contenu du zip est visible sur cette page : Démo : fil d’ariane avancé en css.

Vous avez été nombreux à me demander comment créer la barre d’icônes permettant de partager mes articles. J’ai déjà répondu à certains d’entre vous par mail et j’ai décidé d’y consacrer un article entier. Après tout, même si je n’aborderais que des notions déjà bien documentées sur le net, cela pourra peut-être servir à certains.

Voici à quoi ressemble ce bloc :

Les icônes que j’ai utilisé ont été créées par Rogie King et sont disponibles gratuitement sur son site Komodo Media.

La barre de liens se compose d’une liste non-ordonnée ul/li dans laquelle j’ai placé 9 liens pour partager l’article sur :

• Twitter
• Delicious
• Stumble Upon
• Facebook
• Digg
• Technorati
• Linked In
• FriendFeed
• dFloat

Comme je le disais précédemment, nous allons utiliser la technique des sprites pour ne créer qu’une seule image de fond contenant tous les logos dans les 2 états (normal et hover). L’image va se déplacer si le lien est survolé.

Voici un petit schéma pour mieux comprendre la construction :

Pour voir le rendu réel vous pouvez vous rendre à la fin de l’article ou aller faire un tour sur la page de démo.

Le code XHTML

Voici le code « classique » valable dans n’importe quelle page html :

<div class="example">
 <ul class="social-links">		
  <li><a class="twitter-link" rel="nofollow" href="http://twitter.com/home?status=VotreURL" title="Partagez cet article avec vos followers sur Twitter">Tweet this !</a></li>
  <li><a class="delicious-link" rel="nofollow" href="http://delicious.com/post?url=VotreURL" title="Bookmarkez cette page sur Delicious">Bookmarkez cette page sur Delicious</a></li>
  <li><a class="stumble-link" rel="nofollow" href="http://www.stumbleupon.com/submit?url=VotreURL&title=VotreTitre" title="Partagez cet article sur StumbleUpon">Stumble this !</a></li>
  <li><a class="facebook-link" rel="nofollow" href="http://www.facebook.com/sharer.php?u=VotreURL&t=VotreTitre" title="Partagez cet article sur Facebook">Partagez cet article sur Facebook</a></li>
  <li><a class="dig-link" rel="nofollow" href="http://digg.com/submit?phase=2&url=VotreURL" title="Submit this post to Digg">Digg this !</a></li>
  <li><a class="technorati-link" rel="nofollow" href="http://technorati.com/faves?add=VotreURL" title="VotreTitre">Ajoutez à vos favoris sur Technorati</a></li>
  <li><a class="linkdin-link" href="http://www.linkedin.com/shareArticle?mini=true&url=VotreURL&title=VotreTitre" title="Partagez cet article sur LinkedIn">Partagez cet article sur LinkedIn</a></li>
  <li><a class="friendfeed-link" rel="nofollow" href="http://friendfeed.com/?url=VotreURL&title=VotreTitre">Partager cet article sur FriendFeed</a></li>
  <li><a class="dfloat-link" rel="nofollow" href="http://designfloat.com/submit.php?url=VotreURL&title=VotreTitre" title="Float This!">Float This !</a></li>
 </ul>
</div>

Vous l’aurez compris il suffit de remplacer : « VotreURL » par l’url à partager et « VotreTitre » par un contenu approprié pour chaque balise « title ».

Le code pour Wordpress

Le code pour Wordpress est un peu différent puisqu’il existe des tags permettant de récupérer directement l’url de l’article ou du blog. Nous allons donc ajouter un peu de php dans notre code XHTML :

<div class="example">
 <ul class="social-links">			
  <li><a class="twitter-link" rel="nofollow" href="http://twitter.com/home?status=&agrave;&#160lire&#160:&#160http://tinyurl.com/api-create.php?url=<?php the_permalink(); ?>" title="Partagez cet article avec vos followers sur Twitter">Tweet this !</a></li>
  <li><a class="delicious-link" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmarkez cette page sur Delicious">Bookmarkez cette page sur Delicious</a></li>
  <li><a class="stumble-link" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur StumbleUpon">Stumble this !</a></li>
  <li><a class="facebook-link" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur Facebook">Partagez cet article sur Facebook</a></li>
  <li><a class="dig-link" rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg this !</a></li>
  <li><a class="technorati-link" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Ajouter <?php bloginfo('name'); ?> á vos favoris sur Technorati">Ajoutez <?php bloginfo('name'); ?> á vos favoris sur Technorati</a></li>
  <li><a class="linkdin-link" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>/&title=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur LinkedIn">Partagez cet article sur LinkedIn</a></li>
  <li><a class="friendfeed-link" rel="nofollow" href="http://friendfeed.com/?url=<?php the_permalink() ?>&title=<?php echo urlencode(get_the_title($id)); ?>">Partager cet article sur FriendFeed</a></li>
  <li><a class="dfloat-link" rel="nofollow" href="http://designfloat.com/submit.php?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Float This!">Float This !</a></li>
 </ul>
</div>

Explications :

Pour récupérer l’url de l’article :

<?php the_permalink(); ?>

Utilisez cette expression pour afficher le titre de l’article en encodant correctement les caractères spéciaux :

<?php echo urlencode(get_the_title($id)); ?>

Pour afficher le nom de votre blog Wordpress :

<?php bloginfo('name'); ?>

Pour afficher l’url de votre blog Wordpress :

<?php bloginfo('url'); ?>

Si l’url de votre article est trop longue, vous pouvez utilisez les service de TinyURL pour la raccourcir. C’est ce que nous utilisons dans le lien Twitter :

http://tinyurl.com/api-create.php?url=<?php the_permalink(); ?>

Le code CSS

La technique des Sprites vous oblige à repérer à l’avance la position des différents éléments dans votre image de fond.

Pour cela, ouvrez votre image dans Photoshop et notez les positions des pictos (coin haut-gauche de chaque picto).

Lorsque vous reporterez les positions dans vos styles, n’oubliez-pas de mettre un signe « - » devant car c’est bien le background qui se déplace sur le lien et non l’inverse.

Voici un petit schéma pour visualiser les positions des logos sur l’image :

Et maintenant le code :

/* Reset sur liste non-ordonnée */
ul,li{margin:0;padding:0;list-style:none;}

/* Placement horizontal des éléments */
.social-links li{display:inline;width:16px;}

/* Style généraux sur tous les liens de la liste*/
.social-links a {display:inline;float:left;width:16px;height:16px;margin:0 5px 0 0;font-size:0.01em;text-indent:-9999px;overflow:hidden;}

/* Ajout background-image + styles sur la liste */
.social-links{background: url(../img/links-bg.gif) no-repeat 0 0;width:196px;height:36px;padding:10px 5px;}

/* CSS Sprites : positionnement de l'image de fond sur chacun des liens */
.social-links .twitter-link:link,
.social-links .twitter-link:visited{background:transparent url(../img/social-icons.jpg) 0 0 no-repeat;}
.social-links .twitter-link:hover,
.social-links .twitter-link:active{background:transparent url(../img/social-icons.jpg) 0 -18px no-repeat;}

.social-links .delicious-link:link,
.social-links .delicious-link:visited{background:transparent url(../img/social-icons.jpg) -20px 0 no-repeat;}
.social-links .delicious-link:hover,
.social-links .delicious-link:active{background:transparent url(../img/social-icons.jpg) -20px -18px no-repeat;}

.social-links .stumble-link:link,
.social-links .stumble-link:visited{background:transparent url(../img/social-icons.jpg) -40px 0 no-repeat;}
.social-links .stumble-link:hover,
.social-links .stumble-link:active{background:transparent url(../img/social-icons.jpg) -40px -18px no-repeat;}

.social-links .facebook-link:link,
.social-links .facebook-link:visited{background:transparent url(../img/social-icons.jpg) -60px 0 no-repeat;}
.social-links .facebook-link:hover,
.social-links .facebook-link:active{background:transparent url(../img/social-icons.jpg) -60px -18px no-repeat;}

.social-links .dig-link:link,
.social-links .dig-link:visited{background:transparent url(../img/social-icons.jpg) -80px 0 no-repeat;}
.social-links .dig-link:hover,
.social-links .dig-link:active{background:transparent url(../img/social-icons.jpg) -80px -18px no-repeat;}

.social-links .technorati-link:link,
.social-links .technorati-link:visited{background:transparent url(../img/social-icons.jpg) -100px 0 no-repeat;}
.social-links .technorati-link:hover,
.social-links .technorati-link:active{background:transparent url(../img/social-icons.jpg) -100px -18px no-repeat;}

.social-links .linkdin-link:link,
.social-links .linkdin-link:visited{background:transparent url(../img/social-icons.jpg) -120px 0 no-repeat;}
.social-links .linkdin-link:hover,
.social-links .linkdin-link:active{background:transparent url(../img/social-icons.jpg) -120px -18px no-repeat;}

.social-links .redit-link:link,
.social-links .redit-link:visited{background:transparent url(../img/social-icons.jpg) -140px 0 no-repeat;}
.social-links .redit-link:hover,
.social-links .redit-link:active{background:transparent url(../img/social-icons.jpg) -140px -18px no-repeat;}

.social-links .friendfeed-link:link,
.social-links .friendfeed-link:visited{background:transparent url(../img/social-icons.jpg) -140px 0 no-repeat;}
.social-links .friendfeed-link:hover,
.social-links .friendfeed-link:active{background:transparent url(../img/social-icons.jpg) -140px -18px no-repeat;}

.social-links .dfloat-link:link,
.social-links .dfloat-link:visited{background:transparent url(../img/social-icons.jpg) -160px 0 no-repeat;}
.social-links .dfloat-link:hover,
.social-links .dfloat-link:active{background:transparent url(../img/social-icons.jpg) -160px -18px no-repeat;}

Quelques explications :

.social-links a {
display:inline;
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
font-size:0.01em;
text-indent:-9999px;
overflow:hidden;
}

• Chaque lien fera 16px de côté. Cette taille correspond exactement à celle d’un picto. Les liens vont fonctionner comme des fenêtres ne laissant apparaître qu’une petite partie de l’image de fond.
• Nous ajoutons un float:left pour les placer en ligne. La propriété display:inline va éviter les marges doublées sous IE6 (voir « Position is Everything : IE5/6 Doubled Float-Margin Bug»)
• Les2 propriétés font-size:0.01em et text-indent:-9999px vont servir à masquer le texte présent dans les balises <a> sans le faire disparaître pour autant.
  Cette technique a 3 gros avantages : Même en désactivant les styles, votre code restera utilisable ; Une meilleure accessibilité en autorisant la lecture du texte par des logiciels pour mal-voyant ; C’est une méthode qui ne ruine pas le référencement.
• Enfin, overflow:hidden servira à masquer le reste de l’image de fond qui dépassera grandement des limites de notre lien.

Petite explication sur le placement de l’image de fond

.social-links .twitter-link:link,
.social-links .twitter-link:visited{background:transparent url(../img/social-icons.jpg) 0 0 no-repeat;}
.social-links .twitter-link:hover,
.social-links .twitter-link:active{background:transparent url(../img/social-icons.jpg) 0 -18px no-repeat;}

• Dans cas du premier lien « Twitter ». Nous utilisons les pseudos-classes Link/Visited et Hover/Active pour changer l’image entre l’état normal et l’état survolé du lien.
• L’ordre est important. Pour vous en rappeler il y a le moyen mémo-technique : LoVe & HAte.
• Dans le premier cas on place l’image de fond à x=0, y=0.
• Dans le second cas l’image doit se déplacer de -18px sur l’axe des y pour se caler sur le coin haut-gauche du picto Twitter coloré. Il nous suffit donc de reporter ces 2 mesures dans la feuille de style. Ce qui explique le : …0 -18px no-repeat;.
• Ensuite, il suffit de reporter toutes les mesures sur chacun des styles des liens pour terminer la barre de bookmarks.

Cet article se termine, j’espère qu’il sera utile à certains. Si vous souhaitez réutiliser ce code, vous pouvez télécharger le zip qui contient les css, le code xhtml classique, le code xhtml pour Wordpress ainsi que toutes les images.

N’oubliez pas que les visuels ont été créés par Rogie King et sont téléchargeables sur son site Komodo Media, un petit lien ne fait jamais de mal…

Demo Download

Microformats kesako ?

Les Microformats sont nés au début des années 2000 dans le but d’apporter plus de sémantique aux contenus affichés sur le web. Bien que le standard (X)HTML apporte déjà un certain niveau de sémantique grâce aux balises, cela ne suffit pas pour cibler très précisément un contenu.

Exemple : la balise <p> nous permet de savoir qu’il s’agit d’un paragraphe mais ne nous permet pas de connaître la nature de son contenu ou en d’autres termes le « sens » des mots qui le composent.

Le but des Microformats est donc d’ajouter un niveau sémantique plus strict que celui du standard (X)HTML en vue d’automatiser le traitement d’un contenu web par des machines.

Microformats : comment ça marche ?

Pour apporter ce niveau sémantique supplémentaire les Microformats s’appuient sur les balises (X)HTML couplées aux attributs « rel » et « class » pour donner du sens au contenu.

Puisqu’il existe une infinité de contenus potentiellement formatables, il existe de nombreuses spécifications en fonction de la nature du contenu formaté. On retrouvera par exemple les Microformats suivant :

• vCard : carte de visite électronique (ex : fiche de contact Outlook)
• hCard : carte de visite format Web (une vCard affichée dans une page web)
• geo : formatage de coordonnées géographiques
• hCalendar : formatage de données temporelles
• adr : formatage d’adresses
• XFN : formatage de données de type réseaux sociaux
• etc…

Je viens d’en citer 6 mais il existe de nombreux Microformats différents, tous liés à un type de contenu à formater.

Le Microformat hCard

Pour mieux comprendre comment il est possible d’utiliser les Microformats, nous allons nous appuyer sur la spécification hCard servant à afficher une vCard au sein d’une page Web.

Exemple d’une carte de visite XHTML basique :

Le code XHTML :

<div class="vcard-ex">
 <p><a href="http://all-for-design.com" title="All for Design, le blog">All for Design</a></p>
 <p>Aurelien Dupond</p>
 <p>Marseille, France</p>
 <p>Mobile : 06.05.04.03.02</p>
</div>

Si je veux formater ce contenu, je vais utiliser la spécification hCard (car il s’agit d’une carte de visite). Comme vous pourrez le constater il n’y a aucune différence visuelle entre la version formatée et la version classique. La seule différence se situe au niveau du contenu.

La même carte de visite avec le Microformat hCard :

Le code XHTML :

<div class="vcard">
 <a class="url" href="http://all-for-design.com">All for Design</a>
 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>
  <p class="adr">
   <span class="locality">Marseille</span> 
   <span class="country-name">France</span> 
  </p>
 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>
</div>

Quelques explications

Comme vous le voyez, le Microformat hCard utilise les balises XHTML. Vous pouvez utiliser les balises que vous voulez pour peu que vos choix soient sémantiquement corrects.

Comme cet exemple est très simple et que je ne vais pas faire un cours de sémantique XHTML, j’ai simplement utilisé des balises <p> et <span>.

Dans le cas de hCard plus complexes on pourra utiliser des listes de définition dd/dl/dt, éventuellement couplées à des listes ordonnées ol/li s’il y a beaucoup de sous-sections, afin d’obtenir le code le plus logique possible d’un point de vue sémantique. (Pour approfondir, vous pouvez aller lire les articles de Luc Muller et de Bruno Bichet sur ce sujet).

Continuons l’explication du code…

<div class="vcard">

La proriété « vCard » est obligatoire. Elle va englober tout le contenu de votre carte de visite.

Question : Pourquoi utiliser la propriété « vCard » alors qu’il s’agit du Microformat « hCard »?

Le Microformat « hCard » emprunte les propriétés du Microformat « vCard » car il a été conçu après. (vCard est le nom d’un Microformat mais c’est aussi le nom d’une des propriétés de celui-ci.).

<a class="url" href="http://all-for-design.com">All for Design</a>

On utilise la propriété « url » pour désigner une adresse web. On peut la coupler avec d’autres propriétés pour être plus précis : « url org » pour l’adresse d’une société, « url nickname » pour spécifier une adresse rattachée à un surnom (ex : url de votre compte twitter rattachée à votre username). etc etc…

 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>

La propriété « fn » sert à spécifier le nom d’une personne. C’est une propriété obligatoire dans le Microformat hCard.

La propriété « n » est un peu « batarde » puisqu’elle n’est pas tout le temps obligatoire et qu’elle peut prendre une valeur nulle. Elle va regrouper les différentes parties du nom d’une personne. Pour plus d’information, rendez-vous sur la documentation officielle.

« given-name » contient le prénom et « family-name » contient le nom de famille.

Note : nous aurions pu nous passer de « given-name » et de familly-name » et faire tenir le nom complet directement dans <p class="fn n"> comme ceci :

<p class="fn n">Aurelien Dupond</p>
      OU
<p class="fn">Aurelien Dupond</p>

Continuons…

 <p class="adr">

La propriété « adr » désigne l’ensemble des constituants d’une adresse. Puisqu’en général une adresse est composée de plusieurs éléments, cette propriété en contiendra d’autres.

<span class="locality">Marseille</span> 
<span class="country-name">France</span> 

La propriété « locality » désigne la ville et « country-name » désigne le pays. Il existe beaucoup de sous-propriétés pour « adr« . Pour plus d’informations, rendez-vous sur la documentation officielle.

 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>

La propriété « tel » permet d’indiquer un numéro de téléphone, « type » contient le type de numéro (domicile, travail, fixe, mobile etc.) et « value » contient la valeur du numéro.

Le succès des Microformats tient au fait qu’ils soient basés sur des standards existant. Ils sont en ce sens très simples et très flexibles. Puisque nous utilisons les balises (X)HTML pour créer notre hCard, nous pouvons utiliser les CSS pour ajouter des styles et ainsi donner plus d’attrait au contenu. De la même façon, nous pouvons ajouter le langage Javascript pour animer ce contenu.

En utilisant le Microformat hCard, nous permettons aux logiciels capables de traiter ce type de contenu d’en extraire facilement les informations. Une hCard peut être téléchargée et sera automatiquement convertie en vCard pour être, par exemple, ajoutée à un carnet d’adresse électronique.

De plus, l’utilisation des Microformats permet de mieux structurer les informations et donc d’en améliorer le référencement par les moteurs de recherche.

Les plus beaux exemples de hCard

Le célèbre webdesigner Tim Van Damme a été l’un des premiers à proposer une hCard de grande qualité, esthétiquement et techniquement très réussie.

Voyant que sa petite création avait fait des envieux, il a eu la bonne idée de regrouper dans son « Wall of Fame » de nombreux exemples de hCard, la plupart inspirés (et non copiés sans autorisation comme il le dénonce dans le « Wall of Shame») de sa propre création.

Voici quelques exemples de hCard sélectionnés par Tim Van Damme :

Comme vous pouvez le voir dans ces quelques exemples, l’utilisation des Microformats ne limite en rien l’esthétique d’une page, bien au contraire…

Conclusion

En réalisant cet article je me suis plongé dans l’univers passionnant des Microformats. J’ai appris beaucoup de choses et je suis maintenant convaincu du bénéfice de leur utilisation.

Même si la densité des informations et le nombre de Microformats existant peuvent faire peur à première vue, je pense que cela vaut le coup de se pencher de plus près sur le sujet et je vous invite donc à faire de même !

Tout le monde n’étant pas né avec un manuel de php entre les mains, je présenterai dans cette rubrique des snippets s’adressant essentiellement aux débutants. Des questions simples pour des réponses simples. Vous débutez avec Wordpress, vous rencontrez un problème php, peut-être trouverez-vous une solution dans cette nouvelle série d’articles…

Exclure une catégorie de vos flux RSS

Dans function.php

<?php
  //La fonction
  function ExcludeFeed($query) {
    if ($query->is_feed) {
      //Exemple de suppression de la catégorie ayant l'id 1
      $query->set('cat','-1');
    }
    return $query;
  }
  //Le filtre
  add_filter('pre_get_posts','ExcludeFeed');
?>

Exclure une catégorie de la recherche

Dans function.php

<?php
  //La fonction
  function SearchFilter($query) {
    if ($query->is_search) {
      //Exemple d'exclusion des catégories ayant les id 16 et 17
      $query->set('cat','-16,-17');
    }
    return $query;
  }
  //le filtre
  add_filter('pre_get_posts','SearchFilter');
?>

Ajouter un nuage de tags sans utiliser de widget

Ajouter ce code à l’endroit où le nuage de tags doit s’afficher

<p>
  <?php wp_tag_cloud('smallest=8&largest=32&unit=px&number=50'); ?>
</p>

• smallest = la taille du plus petit tag (en fonction de votre unité de mesure)
• largest = la taille du plus grand tag (en fonction de votre unité de mesure)
• number = le nombre de tag maximum à afficher (0 affichera tous les tags)
• unit = l’unité de mesure (peut prendre la valeur « px », « pt », « em », « % »)

Depuis la version 2.8 de Wordpress, vous pouvez choisir d’afficher les catégories plutôt que des tags. Pour cela, utilisez la variable taxonomy comme suit :

<p>
  <?php wp_tag_cloud('smallest=8&largest=28&unit=px&number=50&taxonomy=category'); ?>
</p>

La variable taxonomy peut prendre les valeurs suivantes

• post_tag = affiche les noms des tags
• category = affiche les noms des catégories
• link_category = affiche les liens des catégories

Bien gérer la pagination et query_posts

Si vous utilisez la fonction query_posts() avant votre boucle, vous avez peut-être rencontré des soucis de pagination.

Pour éviter ce désagrément, il faut ajouter le paramètre query_string dans votre requête.

<?php
  //On empêche l'affichage des articles appartenant à la catégorie ayant l'id 17
  query_posts('query_string&cat=-17');
?>

Le code avec la boucle :

<?php
  query_posts('query_string&cat=-17');
    //La boucle affichera les articles selon les conditions fixées par la fonction query_post();
    if (have_posts()) :
      while (have_posts()) : the_post();
        ...Le contenu d'un article ici...
      endwhile;
    endif;
?>

Afficher les titres de vos futurs articles

Ajouter ce code là où la liste doit s’afficher

<?php
  $my_query = new WP_Query('post_status=future&showposts=3');
    if ($my_query->have_posts()) {
      while ($my_query->have_posts()) : $my_query->the_post();
        the_title();
      endwhile;
    }
?>

Un moteur de recherche vous permet de faire votre choix parmi les nombreuses catégories. Le site propose des réponses à vos question sur de nombreux langages, plateformes et systèmes : HTML, CSS, Javascript, PHP, Linux, Shell, Bash, Apache, MySQL, SVN, etc etc…

Une inscription suffit pour uploader vos petites astuces et les proposer aux internautes. Mieux, si vous disposez d’un compte, vous pouvez

ajouter un lien vers Posteet sur votre site pour permettre aux utilisateurs qui naviguent dessus de créer des posteets à partir du contenu de votre site directement sur leur compte posteet

Petit luxe supplémentaire, le site est proposé en Français (et en Anglais).