hatom-examples-fr

2009-01-03T16:26:07Z

MonsiTrode: olovicdelvar

delrorocolon
<h1>Exemples hAtom</h1>

'''Chantier en cours!'''

= Contributeurs =
* [[User:DavidJanes|David Janes]]
* [[User:RobertBachmann|Robert Bachmann]]
* traduction localisation en cours par [[Christophe Ducamp]]

= Transformation 1 =

Un weblog bien qui se tient bien

Original :

<pre><nowiki>
<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>
</nowiki></pre>

TransformÃ© en compatible hAtom :

<body>
<div id="wrap">
<div <span class="added">class="hfeed"</span> id="content">
...
<div class="<span class="added">hentry</span> entry" <span class="change">id</span>="post-60">
<h3 class="<span class="added">entry-title</span>">
<a href="<nowiki>http://</nowiki>www.microformats.org/blog/..." rel="bookmark" title="...">Attaque Wiki</a>
</h3>
<span class="added"><div class="entry-content"></span>
<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>
<span class="added"></div></span>

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

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

<div class="<span class="added">hentry</span> entry" <span class="change">id</span>="post-59">
....
</div>
...
</div>
</div>
</body>

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

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

= Transformation 2 =

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

Original :

<pre><nowiki>
<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>
</nowiki></pre>

TransformÃ© en compatibilitÃ© hAtom :

<body bgcolor="...">

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

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

</body>

Modifications :
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to each Entry
* Added <code>class="entry-title"</code> to each Entry Title
* Moved <code>id="###"</code> up to the Entry (and deleted the empty anchor block)
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code><span class="entry-content"></code>...<code></div></code> around the Entry Title (!)
* Added <code><span class="entry content"></code>...<code></div></code> around the Entry Content
* Added <code><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code><span class="author vcard"></code> and <code><span class="fn"></code> 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 [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).

Original :

<pre><nowiki>
<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>
</nowiki></pre>

TransformÃ©e en hAtom compatible :

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

<div class="text">
<p <span class="added">class="entry-content"</span>>
China has confirmed three new outbreaks of bird flu, ...
</p>
<p>
<ul>
<li><font size="1">INDEPTH: </font><font size="2">
<a href="<nowiki>http://</nowiki>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="<nowiki>http://</nowiki>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 <span class="added">class="entry-content"</span>>State media says the new outbreaks are in...</p>
<p <span class="added">class="entry-content"</span>>The news comes a day after China announced the ...</p>
<p <span class="added">class="entry-content"</span>>In China's eastern Anhui province, authorities have ...</p>
<p <span class="added">class="entry-content"</span>>The province says the measure will prevent domestic ...</p>
<p <span class="added">class="entry-content"</span>>Vietnamese health officials have confirmed that a ...</p>
<p <span class="added">class="entry-content"</span>>Doctors from the health department in the northern ...</p>
<p <span class="added">class="entry-content"</span>>Bird flu has killed 42 people in Vietnam since December ...</p>
<p <span class="added">class="entry-content"</span>>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 <code><div class="hfeed hentry"></code> around the single entry on the page
* Added <code><div class="entry-title"></code> to the Entry Title
* Added <code><span class="entry-content"></code>...<code></div></code> 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 <code><abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code><address class="author vcard"></code> and <code><span class="fn org"></code> to the CBC Newsroom

Remarquez aussi
* 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

= Transformation 4 =

A bulletin board ([http://forums.punbb.org/viewtopic.php?id=9135 PunBB])

Original :

<pre><nowiki>
<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>
</nowiki></pre>

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>

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

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

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

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

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

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

= Plus d'exemples =

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

<li <span class="added">class="hentry"</span>><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/</a> <span class="added">updated <abbr class="published" title="2006-07-10T14:05:54-04:00">2006-07-10 14:05:54</abbr></span></li>

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

Microformats Wiki - User contributions [en]

hatom-examples-fr