hatom-examples-fr
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 auteur"><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 grop 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> ... more entries ... <div id="brdfooter" class="block"> ... footer stuff ... </div> </div> </div> </body>
Transformed to hAtom compliant:
<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 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>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="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>Member</strong></dd> <dd class="postavatar"></dd> <dd>Registered: 2005-10-14</dd> <dd>Posts: 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">
andclass="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