hatom-examples-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m ([typo : page à synchroniser et corriger, traduire ])
m (olovicdelvar)
Line 1: Line 1:
delrorocolon
<h1>Exemples hAtom</h1>
<h1>Exemples hAtom</h1>


Line 23: Line 24:
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Attaque Wiki</a>
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Attaque Wiki</a>
     </h3>
     </h3>
     <p>Nous avons connu quelques problèmes avec ...</p>
     <p>Nous avons connu quelques problèmes avec ...</p>
     <p>Nous avons restauré le wiki...</p>
     <p>Nous avons restauré le wiki...</p>
     <p>Si quelqu'un est en train de travailler pour combattre les dits spammers...</p>
     <p>Si quelqu'un est en train de travailler pour combattre les dits spammers...</p>


Line 56: Line 57:
</nowiki></pre>
</nowiki></pre>


Transformé en compatible hAtom :
Transformé en compatible hAtom :


  &lt;body>
  &lt;body>
Line 67: Line 68:
     &lt;/h3>
     &lt;/h3>
     <span class="added">&lt;div class="entry-content"></span>
     <span class="added">&lt;div class="entry-content"></span>
       &lt;p>Nous avons connu quelques problèmes avec ...&lt;/p>
       &lt;p>Nous avons connu quelques problèmes avec ...&lt;/p>
       &lt;p>Nous avons restauré le wiki et ...&lt;/p>
       &lt;p>Nous avons restauré le wiki et ...&lt;/p>
       &lt;p>Si quelqu'un est en train de travailler pour combattre les dits spammers...&lt;/p>
       &lt;p>Si quelqu'un est en train de travailler pour combattre les dits spammers...&lt;/p>
     <span class="added">&lt;/div></span>
     <span class="added">&lt;/div></span>
Line 103: Line 104:


Modifications :
Modifications :
* Ajouté <code>class="hfeed"</code> à Feed
* Ajouté <code>class="hfeed"</code> à Feed
* Ajouté <code>class="hentry"</code> à Entry
* Ajouté <code>class="hentry"</code> à Entry
* Ajouté <code>class="headline"</code> à Entry Title
* Ajouté <code>class="headline"</code> à Entry Title
* Migré <code>id="###"</code> de <code>&lt;h3></code> vers Entry
* Migré <code>id="###"</code> de <code>&lt;h3></code> vers Entry
* Ajouté <code>&lt;div class="entry-content"></code>...<code>&lt;/div></code> autours de Entry Content
* Ajouté <code>&lt;div class="entry-content"></code>...<code>&lt;/div></code> autours de Entry Content
* Ajouté <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code>&lt;/abbr></code> autour de Entry Datetime
* Ajouté <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code>&lt;/abbr></code> autour de Entry Datetime
* Ajouté <code>class="author"</code> à &lt;address>
* Ajouté <code>class="author"</code> à &lt;address>


Remarquez aussi :  
Remarquez aussi :  
* Nous n'avons pas eu besoin d'ajouter un élément <code>&lt;address></code>
* Nous n'avons pas eu besoin d'ajouter un élément <code>&lt;address></code>
* Nous n'avons pas eu besoin d'ajouter un élément <code>&lt;h#></code>
* Nous n'avons pas eu besoin d'ajouter un élément <code>&lt;h#></code>
* Nous n'avons pas eu besoin d'ajouter un <code>rel="bookmark"</code> à Entry Permalinks
* Nous n'avons pas eu besoin d'ajouter un <code>rel="bookmark"</code> à Entry Permalinks


= Transformation 2 =
= Transformation 2 =


Un weblog qui ne s'est pas comporté aussi bien (un weblog plus ancien blogspot)
Un weblog qui ne s'est pas comporté aussi bien (un weblog plus ancien blogspot)


Original :
Original :
Line 153: Line 154:
</nowiki></pre>
</nowiki></pre>


Transformé en compatibilité hAtom :
Transformé en compatibilité hAtom :




Line 205: Line 206:


Remarquez aussi  
Remarquez aussi  
* que les ID/fragments ne sont pas du XHTML -- c'est un gros  problème
* que les ID/fragments ne sont pas du XHTML -- c'est un gros  problème
* il existe plusieurs blocs de contenu, parce que Natalie Solent encapsule le titre dans le contenu
* il existe plusieurs blocs de contenu, parce que Natalie Solent encapsule le titre dans le contenu
* nettoyé beaucoup de trucs de présentation HTML, avec l'hypothèse que ce pourrait être réparé dans la feuille de style.
* nettoyé beaucoup de trucs de présentation HTML, avec l'hypothèse que ce pourrait être réparé dans la feuille de style.
* c'est l'une des transformations les plus laides que vous verrez probablement
* c'est l'une des transformations les plus laides que vous verrez probablement


= Transformation 3 =
= Transformation 3 =


Une page média (extraite de [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).
Une page média (extraite de [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).


Original :
Original :
Line 262: Line 263:
</nowiki></pre>
</nowiki></pre>


Transformée en hAtom compatible :
Transformée en hAtom compatible :


  &lt;div class="news">
  &lt;div class="news">
Line 320: Line 321:
Remarquez aussi  
Remarquez aussi  
* Nous avons fait que le document est plus compatible XHTML
* Nous avons fait que le document est plus compatible XHTML
* Il n'y a pas de <code>rel="bookmark"</code> aussi c'est supposé être l'URI de la page
* Il n'y a pas de <code>rel="bookmark"</code> aussi c'est supposé être l'URI de la page


= Transformation 4 =
= Transformation 4 =
Line 421: Line 422:
</nowiki></pre>
</nowiki></pre>


Transformé en hAtom :
Transformé en hAtom :


  &lt;body>
  &lt;body>
Line 428: Line 429:
   
   
     &lt;div id="brdheader" class="block">
     &lt;div id="brdheader" class="block">
     ... trucs-en-têtes ...
     ... trucs-en-têtes ...
     &lt;/div>
     &lt;/div>
   
   
Line 436: Line 437:
   
   
     &lt;div class="linkst">
     &lt;div class="linkst">
     ... contrôles pour le blog
     ... contrôles pour le blog
     &lt;/div>
     &lt;/div>
   
   
Line 465: Line 466:
         &lt;h3 class="entry-title">PunBB 1.2.9&lt;/h3>
         &lt;h3 class="entry-title">PunBB 1.2.9&lt;/h3>
         &lt;div class="<span class="added">entry-content</span> postmsg">
         &lt;div class="<span class="added">entry-content</span> postmsg">
         &lt;p>Juste une petite note à cette heure....&lt;/p>
         &lt;p>Juste une petite note à cette heure....&lt;/p>
   
   
         &lt;/div>
         &lt;/div>
Line 493: Line 494:
         &lt;dd class="usertitle">&lt;strong>Membre&lt;/strong>&lt;/dd>
         &lt;dd class="usertitle">&lt;strong>Membre&lt;/strong>&lt;/dd>
         &lt;dd class="postavatar">&lt;/dd>
         &lt;dd class="postavatar">&lt;/dd>
         &lt;dd>Enregistré : 2005-10-14&lt;/dd>
         &lt;dd>Enregistré : 2005-10-14&lt;/dd>
         &lt;dd>Billets : 27&lt;/dd>
         &lt;dd>Billets : 27&lt;/dd>
         &lt;/dl>
         &lt;/dl>
Line 526: Line 527:


Changements :
Changements :
* Ajouté <code>&lt;div class="hfeed"></code> autour des entrées (à l'opposé d'une <code>&lt;div</code> existante qui enveloppait plus que les entrées.
* Ajouté <code>&lt;div class="hfeed"></code> autour des entrées (à l'opposé d'une <code>&lt;div</code> existante qui enveloppait plus que les entrées.
* Ajouté <code>class="hentry"</code> à chaque Entrée
* Ajouté <code>class="hentry"</code> à chaque Entrée
* Ajouté <code>rel="bookmark"</code> à l'Entrée des Permalinks
* Ajouté <code>rel="bookmark"</code> à l'Entrée des Permalinks
* Ajouté <code>&lt;span class="entry-title"></code>...<code>&lt;/div></code> autour du titre de l'Entrée
* Ajouté <code>&lt;span class="entry-title"></code>...<code>&lt;/div></code> autour du titre de l'Entrée
* Ajouté <code>&lt;span class="entry-content"></code>...<code>&lt;/div></code> autour du Contenu de l'Entrée
* Ajouté <code>&lt;span class="entry-content"></code>...<code>&lt;/div></code> autour du Contenu de l'Entrée
* Ajouté <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> autour du Datetime de l'Entrée
* Ajouté <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> autour du Datetime de l'Entrée
* Ajouté <code>&lt;address class="author vcard"></code> and <code>class="fn url"</code> au nom du posteur
* Ajouté <code>&lt;address class="author vcard"></code> and <code>class="fn url"</code> au nom du posteur


Remarquez aussi :  
Remarquez aussi :  
* Nous n'avons pas eu besoin d'ajouter <code>id="###"</code> à l'Entrée
* Nous n'avons pas eu besoin d'ajouter <code>id="###"</code> à l'Entrée


= Plus d'exemples =
= Plus d'exemples =


hAtom pour les résultats de recherche, extrait de [[http://randomchaos.com/microformats/base/ Microformats Base]] :
hAtom pour les résultats de recherche, extrait de [[http://randomchaos.com/microformats/base/ Microformats Base]] :


&lt;li <span class="added">class="hentry"</span>>&lt;a <span class="added">rel="bookmark"</span> href="http://tantek.com/presentations/2006/03/what-are-microformats/" <span class="added">class="headline"</span>>http://tantek.com/presentations/2006/03/what-are-microformats/&lt;/a> <span class="added">updated &lt;abbr class="published" title="2006-07-10T14:05:54-04:00">2006-07-10 14:05:54&lt;/abbr></span>&lt;/li>
&lt;li <span class="added">class="hentry"</span>>&lt;a <span class="added">rel="bookmark"</span> href="http://tantek.com/presentations/2006/03/what-are-microformats/" <span class="added">class="headline"</span>>http://tantek.com/presentations/2006/03/what-are-microformats/&lt;/a> <span class="added">updated &lt;abbr class="published" title="2006-07-10T14:05:54-04:00">2006-07-10 14:05:54&lt;/abbr></span>&lt;/li>


Modifications :  
Modifications :  
* Ajouté <code>class="hentry"</code> à chaque résultat
* Ajouté <code>class="hentry"</code> à chaque résultat
* Ajouté <code>rel="bookmark"</code> à chaque lien de résultat
* Ajouté <code>rel="bookmark"</code> à chaque lien de résultat
* Ajouté <code>&lt;abbr class="updated" title="AAAA-MM-JJThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> pour la date de la mise à jour de l'index
* Ajouté <code>&lt;abbr class="updated" title="AAAA-MM-JJThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> pour la date de la mise à jour de l'index

Revision as of 16:26, 3 January 2009

delrorocolon

Exemples hAtom

Chantier en cours!

Contributeurs

Transformation 1

Un weblog bien qui se tient bien

Original :

<body>
 <div id="wrap">
  <div id="content">
   ...
   <div class="entry">
    <h3 id="post-60">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Attaque Wiki</a>
    </h3>
    <p>Nous avons connu quelques problèmes avec ...</p>
    <p>Nous avons restauré le wiki...</p>
    <p>Si quelqu'un est en train de travailler pour combattre les dits spammers...</p>

    <h4 class="tags">Technorati Tags:</h4>
    <ul class="tags">
     <li><a href="http://technorati.com/tag/mediawiki" rel="tag">mediawiki</a></li>
     <li><a href="http://technorati.com/tag/microformats" rel="tag">microformats</a></li>
     <li><a href="http://technorati.com/tag/spam" rel="tag">spam</a></li>
    </ul>

    <ul class="post-info">
     <li>
      <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">10 octobre 2005</a>
     </li>
     <li>
      <address class="vcard"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
     </li>
     <li>
      <a href="http://www.microformats.org/blog/...">4 Commentaires</a>
     </li>
    </ul>
   </div>
   
   <div class="entry">
   ....
   </div>
   ...
  </div>
 </div>
</body>

Transformé en compatible hAtom :

<body>
 <div id="wrap">
  <div class="hfeed" id="content">
   ...
   <div class="hentry entry" id="post-60">
    <h3 class="entry-title">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Attaque Wiki</a>
    </h3>
    <div class="entry-content">
     <p>Nous avons connu quelques problèmes avec ...</p>
     <p>Nous avons restauré le wiki et ...</p>
     <p>Si quelqu'un est en train de travailler pour combattre les dits spammers...</p>
    </div>

    <h4 class="tags">Technorati Tags:</h4>
    <ul class="tags">
     <li><a href="http://technorati.com/tag/mediawiki" rel="tag">mediawiki</a></li>
     <li><a href="http://technorati.com/tag/microformats" rel="tag">microformats</a></li>
     <li><a href="http://technorati.com/tag/spam" rel="tag">spam</a></li>
    </ul>

    <ul class="post-info">
     <li>
      <a href="http://www.microformats.org/blog/..." rel="bookmark" 
        title="..."><abbr class="published" title="2005-10-10T14:07:00-07:00">10 octobre 2005</abbr></a>
     </li>
     <li>
      <address class="vcard author"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
     </li>
     <li>
      <a href="http://www.microformats.org/blog/...">4 Commentaires</a>
     </li>
    </ul>
   </div>
   
   <div class="hentry entry" id="post-59">
   ....
   </div>
   ...
  </div>
 </div>
</body>


Modifications :

  • Ajouté class="hfeed" à Feed
  • Ajouté class="hentry" à Entry
  • Ajouté class="headline" à Entry Title
  • Migré id="###" de <h3> vers Entry
  • Ajouté <div class="entry-content">...</div> autours de Entry Content
  • Ajouté <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">...</abbr> autour de Entry Datetime
  • Ajouté class="author" à <address>

Remarquez aussi :

  • Nous n'avons pas eu besoin d'ajouter un élément <address>
  • Nous n'avons pas eu besoin d'ajouter un élément <h#>
  • Nous n'avons pas eu besoin d'ajouter un rel="bookmark" à Entry Permalinks

Transformation 2

Un weblog qui ne s'est pas comporté aussi bien (un weblog plus ancien blogspot)

Original :

<body bgcolor="...">

 <div class="posts">
  <a name="112993192128302715"> </a><br>
  <div style="clear:both;"></div><strong>Nelson's final prayer</strong> 
  written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
  <div style="clear:both; padding-bottom: 0.25em;"></div>
  <br>
  <span class="byline">
   posted by Natalie at 
   <a href="2005_10_16_nataliesolent_archive.html#112993192128302715">9:49 PM</a>
  </span>
 </div>

 <div class="posts">
  <a name="112993022840118939"> </a>
  <br>
  <div style="clear:both;"></div><strong>I really, truly </strong>didn't go ... view.
  <div style="clear:both; padding-bottom: 0.25em;"></div>
  <br>
  <span class="byline">
   posted by Natalie at 
   <a href="2005_10_16_nataliesolent_archive.html#112993022840118939">9:28 PM</a>
  </span>
 </div>
 ...

</body>

Transformé en compatibilité hAtom :


<body bgcolor="...">

 <div class="hfeed">
  <div class="hentry posts" id="112993192128302715">
   <strong class="entry-title entry-content">
    Nelson's final prayer
   </strong> 
   <span class="entry-content">
    written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
   </span>
   <div>
    <span class="byline">posted by <span class="author vcard"><span class="fn">Natalie</span></span> at 
     <a rel="bookmark" href="2005_10_16_nataliesolent_archive.html#112993192128302715">
     <abbr class="published" title="2005-10-24t09:49:00-00:00">9:49 PM</abbr></a>
    </span>
   </div>
  </div>

  <div class="hentry posts" id="112993022840118939">
   <strong class="heading content>"I really, truly </strong>
   <span class="entry-content">
    didn't go ... view.
   </span>
   <div>
    <span class="byline">
     posted by <span class="author vcard"><span class="fn">Natalie</span></span> at 
     <a rel="bookmark" href="2005_10_16_nataliesolent_archive.html#112993022840118939">
     <abbr class="published" title="2005-10-24t09:49:00-00:00">9:28 pm</abbr></a>
    </span>
   </div>
  </div>
 ...
 </div>

</body>


Modifications :

  • Added class="hfeed" to Feed
  • Added class="hentry" to each Entry
  • Added class="entry-title" to each Entry Title
  • Moved id="###" up to the Entry (and deleted the empty anchor block)
  • Added rel="bookmark" to the Entry Permalinks
  • Added <span class="entry-content">...</div> around the Entry Title (!)
  • Added <span class="entry content">...</div> around the Entry Content
  • Added <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <span class="author vcard"> and <span class="fn"> to the poster's name

Remarquez aussi

  • que les ID/fragments ne sont pas du XHTML -- c'est un gros problème
  • il existe plusieurs blocs de contenu, parce que Natalie Solent encapsule le titre dans le contenu
  • nettoyé beaucoup de trucs de présentation HTML, avec l'hypothèse que ce pourrait être réparé dans la feuille de style.
  • c'est l'une des transformations les plus laides que vous verrez probablement

Transformation 3

Une page média (extraite de CBC Newsworld).

Original :

<div class="news">
 <div class="story">
  <h1>China confirms new bird flu outbreaks</h1>
  <span class="byline">Last Updated Tue, 22 Nov 2005 23:26:18 EST</span>
  <div class="text"><a href="/news/credit.html">CBC News</a></div>

  <div class="text">
   <p>
   China has confirmed three new outbreaks of bird flu, ...
   <p>
    <ul>
     <li><font size="1">INDEPTH: </font><font size="2"> 
     <a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
    </ul>
   </p>
   <table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
    <tr>
    <td align="center">
    <img src="http://www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
    </td>
    </tr>
    <tr>
    <td align="center">
    <div class="caption">
    <font size="1" face="verdana,arial"><i></i></font>
    </div>
    </td>
    </tr>
   </table>
   <p>State media says the new outbreaks are in...</p>
   <p>The news comes a day after China announced the ...</p>
   <p>In China's eastern Anhui province, authorities have ...</p>
   <p>The province says the measure will prevent domestic ...</p>
   <p>Vietnamese health officials have confirmed that a  ...</p>
   <p>Doctors from the health department in the northern  ...</p>
   <p>Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p>The World Health Organization fears the H5N1 strain of  ...</p>
  </div>

  <p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
 </div>
 ...
</div>

Transformée en hAtom compatible :

<div class="news">
 <div class="hfeed hentry story">
  <h1 class="entry-title">China confirms new bird flu outbreaks</h1>
  <span class="byline">Last Updated
  <abbr class="published" title="2005-11-23T04:26:18Z">Tue, 22 Nov 2005 23:26:18 EST</abbr>
  </span>
  <address class="vcard author"><div class="text"><a class="url" href="/news/credit.html">CBC News</a></div></address>

  <div class="text">
   <p class="entry-content">
   China has confirmed three new outbreaks of bird flu, ...
   </p>
   <p>
    <ul>
     <li><font size="1">INDEPTH: </font><font size="2"> 
     <a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
    </ul>
   </p>
   <table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
    <tr>
    <td align="center">
    <img src="http://www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
    </td>
    </tr>
    <tr>
    <td align="center">
    <div class="caption">
    <font size="1" face="verdana,arial"><i></i></font>
    </div>
    </td>
    </tr>
   </table>
   <p class="entry-content">State media says the new outbreaks are in...</p>
   <p class="entry-content">The news comes a day after China announced the ...</p>
   <p class="entry-content">In China's eastern Anhui province, authorities have ...</p>
   <p class="entry-content">The province says the measure will prevent domestic ...</p>
   <p class="entry-content">Vietnamese health officials have confirmed that a  ...</p>
   <p class="entry-content">Doctors from the health department in the northern  ...</p>
   <p class="entry-content">Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p class="entry-content">The World Health Organization fears the H5N1 strain of  ...</p>
  </div>

  <p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
 </div>
 ...
</div>

Modifications :

  • Added <div class="hfeed hentry"> around the single entry on the page
  • Added <div class="entry-title"> to the Entry Title
  • Added <span class="entry-content">...</div> around every single paragraph -- this looks pathological but it may be the way this would need be produced from a template. The latter part of the document could be enclosed in a single "entry-content" div but note that we did this so the "INDEPTH" part would not be marked as content,
  • Added <abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <address class="author vcard"> and <span class="fn org"> to the CBC Newsroom

Remarquez aussi

  • Nous avons fait que le document est plus compatible XHTML
  • Il n'y a pas de rel="bookmark" aussi c'est supposé être l'URI de la page

Transformation 4

A bulletin board (PunBB)

Original :

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">

   <div id="brdheader" class="block">
    ... header stuff ...
   </div>

   <div id="announce" class="block">
    ... announcement stuff ...
   </div>

   <div class="linkst">
    ... controls for the blog
   </div>

   <div id="p54390" class="blockpost rowodd firstpost">
    <h2>
     <span><span class="conr">#1 </span>
     <a href="viewtopic.php?pid=54390#p54390">2005-10-16 10:36:24</a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><a href="profile.php?id=2">Rickard</a></strong></dt>

        <dd class="usertitle"><strong>PunBB Developer</strong></dd>
        <dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
        <dd>From: 127.0.0.1</dd>
        <dd>Registered: 2001-11-02</dd>
        <dd>Posts: 7806</dd>
        <dd class="usercontacts"><a href="http://www.punbb.org/">Website</a></dd>

       </dl>
      </div>
      <div class="postright">
       <h3>PunBB 1.2.9</h3>
       <div class="postmsg">
        <p>Just a quick note this time....</p>

       </div>
       <div class="postsignature"><hr />"Programming is like sex: ...</div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>
      <div class="postfootright"><div> </div></div>
     </div>
    </div>

   </div>

   <div id="p54392" class="blockpost roweven">
    <h2><span><span class="conr">#2 </span><a href="viewtopic.php?pid=54392#p54392">2005-10-16 10:54:41</a></span></h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><a href="profile.php?id=5298">IdleFire</a></strong></dt>

        <dd class="usertitle"><strong>Member</strong></dd>
        <dd class="postavatar"></dd>
        <dd>Registered: 2005-10-14</dd>
        <dd>Posts: 27</dd>
       </dl>
      </div>
      <div class="postright">

       <h3> Re: PunBB 1.2.9</h3>
       <div class="postmsg">
        <p>...</p>
       </div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>

      <div class="postfootright"><div> </div></div>
     </div>
    </div>
   </div>
   
   ... plus de billets ...

   <div id="brdfooter" class="block">
    ... trucs en pied de page ...
   </div>

  </div>
 </div>
</body>

Transformé en hAtom :

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">

   <div id="brdheader" class="block">
    ... trucs-en-têtes ...
   </div>

   <div id="announce" class="block">
    ... trucs d'annonces ...
   </div>

   <div class="linkst">
    ... contrôles pour le blog
   </div>

   <div class="hfeed">
   <div id="p54390" class="hentry blockpost rowodd firstpost">
    <h2>
     <span><span class="conr">#1 </span>
     <a rel="bookmark" href="viewtopic.php?pid=54390#p54390">
      <abbr class="published" title="2005-10-16T10:36:24-0500">2005-10-16 10:36:24</abbr>
     </a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><address class="author vcard"><a class="url fn"href="profile.php?id=2">Rickard</a></address></strong></dt>

        <dd class="usertitle"><strong>PunBB Developer</strong></dd>
        <dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
        <dd>From: 127.0.0.1</dd>
        <dd>Registered: 2001-11-02</dd>
        <dd>Posts: 7806</dd>
        <dd class="usercontacts"><a href="http://www.punbb.org/">Website</a></dd>

       </dl>
      </div>
      <div class="postright">
       <h3 class="entry-title">PunBB 1.2.9</h3>
       <div class="entry-content postmsg">
        <p>Juste une petite note à cette heure....</p>

       </div>
       <div class="postsignature"><hr />"Programmer c'est comme le sexe : ...</div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>
      <div class="postfootright"><div> </div></div>
     </div>
    </div>

   </div>

   <div id="p54392" class="hentry blockpost roweven">
    <h2>
     <span><span class="conr">#2 </span>
     <a rel="bookmark" href="viewtopic.php?pid=54392#p54392">
      <abbr class="published" title="2005-10-16T10:54:41-0500">2005-10-16 10:54:41</abbr>
     </a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><address class="author vcard"><a class="url fn" href="profile.php?id=5298">IdleFire</a></address></strong></dt>

        <dd class="usertitle"><strong>Membre</strong></dd>
        <dd class="postavatar"></dd>
        <dd>Enregistré : 2005-10-14</dd>
        <dd>Billets : 27</dd>
       </dl>
      </div>
      <div class="postright">

       <h3 class="entry-title"> Re: PunBB 1.2.9</h3>
       <div class="entry-content postmsg">
        <p>...</p>
       </div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>

      <div class="postfootright"><div> </div></div>
     </div>
    </div>
   </div>
   
   ... more entries ...
   </div>

   <div id="brdfooter" class="block">
    ... footer stuff ...
   </div>

</body>


Changements :

  • Ajouté <div class="hfeed"> autour des entrées (à l'opposé d'une <div existante qui enveloppait plus que les entrées.
  • Ajouté class="hentry" à chaque Entrée
  • Ajouté rel="bookmark" à l'Entrée des Permalinks
  • Ajouté <span class="entry-title">...</div> autour du titre de l'Entrée
  • Ajouté <span class="entry-content">...</div> autour du Contenu de l'Entrée
  • Ajouté <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr> autour du Datetime de l'Entrée
  • Ajouté <address class="author vcard"> and class="fn url" au nom du posteur

Remarquez aussi :

  • Nous n'avons pas eu besoin d'ajouter id="###" à l'Entrée

Plus d'exemples

hAtom pour les résultats de recherche, extrait de [Microformats Base] :

<li class="hentry"><a rel="bookmark" href="http://tantek.com/presentations/2006/03/what-are-microformats/" class="headline">http://tantek.com/presentations/2006/03/what-are-microformats/</a> updated <abbr class="published" title="2006-07-10T14:05:54-04:00">2006-07-10 14:05:54</abbr></li>

Modifications :

  • Ajouté class="hentry" à chaque résultat
  • Ajouté rel="bookmark" à chaque lien de résultat
  • Ajouté <abbr class="updated" title="AAAA-MM-JJThh:mm:ss+ZZZZ">...</abbr> pour la date de la mise à jour de l'index