Exemples hAtom

Chantier en cours!

Contributeurs

David Janes
Robert Bachmann
traduction localisation en cours par Christophe Ducamp

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

hatom-examples-fr

Contents

Exemples hAtom

Contributeurs

Transformation 1

Transformation 2

Transformation 3

Transformation 4

Plus d'exemples

Navigation menu

hatom-examples-fr

Exemples hAtom

Contributeurs

Transformation 1

Transformation 2

Transformation 3

Transformation 4

Plus d'exemples

Navigation menu

Search