hatom-examples

2009-02-04T16:38:27Z

Peter Kahoun: .headline -> .entry-title

<h1>hAtom examples</h1>

Examples of [[hatom]] - '''Work in progress!'''

= Contributors =
* [[User:DavidJanes|David Janes]]
* [[User:RobertBachmann|Robert Bachmann]]
* [[User:Chris_Messina|Chris Messina]]

= Transformation 1 =

A well behaved weblog.

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="...">Wiki Attack</a>
</h3>
<p>We had a bit of trouble with ...</p>
<p>We’ve restored the wiki and ...</p>
<p>If anyone is working to combat said 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="...">October 10th, 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 Comments</a>
</li>
</ul>
</div>

<div class="entry">
....
</div>
...
</div>
</div>
</body>
</nowiki></pre>

Transformed to hAtom compliant:

<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="...">Wiki Attack</a>
</h3>
<span class="added"><div class="entry-content"></span>
<p>We had a bit of trouble with ...</p>
<p>We’ve restored the wiki and ...</p>
<p>If anyone is working to combat said 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>October 10th, 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 Comments</a>
</li>
</ul>
</div>

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

Changes:
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to Entry
* Added <code>class="entry-title"</code> to Entry Title
* Moved <code>id="###"</code> from <code><h3></code> to Entry
* Added <code><div class="entry-content"></code>...<code></div></code> around the Entry Content
* Added <code><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code>class="author"</code> to <address>

Also note:
* We did not need to add a <code><address></code> element
* We did not need to add a <code><h#></code> element
* We did not need to add a <code>rel="bookmark"</code> to Entry Permalinks

= Transformation 2 =

A not-so well behaved weblog (an older blogspot weblog)

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>

Transformed to hAtom compliant:

<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>

Changes:
* 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

Also note:
* the ID/fragments are not XHTML -- this is a big problem.
* there are multiple content blocks, because Natalie Solent embeds the title in the content
* cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet
* this is one of the uglier transformations you're likely to see

= Transformation 3 =

A media page (from [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>

Transformed to hAtom compliant:

<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><span class="text"><a <span class="added">class="url"</span> href="/news/credit.html">CBC News</a></span><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>

Changes:
* 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

Also note:
* We made the document more XHTML compliant
* There is no <code>rel="bookmark"</code> so it is assumed to be the URI of the 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>

... more entries ...

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

</div>
</div>
</body>
</nowiki></pre>

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>

<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>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="<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>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="<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>

Changes:
* Added <code><div class="hfeed"></code> around the entries (as opposed to an existing <code><div</code> that enclosed more than entries.
* Added <code>class="hentry"</code> to each Entry
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code><span class="entry-title"></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><address class="author vcard"></code> and <code>class="fn url"</code> to the poster's name

Also note:
* We did not need to add <code>id="###"</code> to the Entry

= Transformation 5 =

Transforming RSS to hatom using MagpieRSS. [http://factoryjoe.com/projects/sixwords/index.txt PHP source available]. Result:

<ol><li><html></li>
<li><body <span class="added">class="hfeed"</span> id="<span class="nu0">173333</span>"></li>
<li> </li>
<li><div id="content" <span class="added">class="hentry"</span>></li>
<li>        <h2 <span class="added">class="entry-title"</span>></li>
<li>                No. <a href="http://twitter.com/ssmith/statuses/<span class="nu0">173333</span>" <span class="added">rel="bookmark"</span>><span class="nu0">173333</span></a></li>
<li>        </h2></li>
<li>        <p <span class="added">class="entry-content"</span>></li>
<li>                  Sweet potato pie. Sugar coma. Die.</li>
<li>        </p></li>
<li>        <p></li>
<li>                <small>Penned by <span <span class="added">class="vcard author"</span>><a href="http://twitter.com/ssmith" <span class="added">class="url fn"</span>>Sean</a></span> at <span class="added"><abbr title="Fri, <span class="nu0">24</span> Nov <span class="nu0">2006</span> <span class="nu0">01</span>:<span class="nu0">03</span>:<span class="nu0">11</span> <span class="nu0">+0000</span>" class="updated"></span><span class="nu0">1</span>:03am</abbr></small>.</li>
<li>        </p></li>
<li> </li>
<li></div></li>
<li></body></li>
<li></html></li></ol>

= More Examples =

hAtom for search results, from [[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>

Changes:
* Added <code>class="hentry"</code> to each result
* Added <code>rel="bookmark"</code> to each result link
* Added <code><abbr class="updated" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> for date of index update

Microformats Wiki - User contributions [en]

hatom-examples