hatom-examples
hAtom examples
Work in progress!
Contributors
Transformation 1
A well behaved weblog.
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="...">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>
Transformed to hAtom compliant (shown in UPPER CASE for visibility only):
<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="...">Wiki Attack</a>
</h3>
<DIV CLASS="ENTRY-CONTENT">
<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>
</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">October 10th, 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 Comments</a>
</li>
</ul>
</div>
<div class="HENTRY entry" ID="post-59">
....
</div>
...
</div>
</div>
</body>
Changes:
- Added
class="hfeed"to Feed - Added
class="hentry"to Entry - Added
class="headline"to Entry Title - Moved
id="###"from<h3>to Entry - Added
<div class="entry-content">...</div>around the Entry Content - Added
<abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">...</abbr>around the Entry Datetime - Added
class="author"to <address>
Also note:
- We did not need to add a
<address>element - We did not need to add a
<h#>element - We did not need to add a
rel="bookmark"to Entry Permalinks
Transformation 2
A not-so well behaved weblog (an older blogspot weblog)
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>
Transformed to hAtom compliant (shown in UPPER CASE for visibility only):
<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="ENTRY-TITLE ENTRY-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>
Changes:
- 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
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 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>
Transformed to hAtom compliant (shown in UPPER CASE for visibility only):
<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="POSTED" TITLE="2005-11-23T04:26:18Z">Tue, 22 Nov 2005 23:26:18 EST</ABBR>
</span>
<ADDRESS CLASS="VCARD"><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>
Changes:
- 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 "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>to the CBC Newsroom
Also note:
- We may the document more XHTML compliant
- There is no
rel="bookmark"so it is assumed to be the URI of the 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 (changes shown in UPPER CASE for visibility only):
<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="POSTED" TITLE="20051016T103624-0500">2005-10-16 10:36:24</ABBR>
</a></span>
</h2>
<div class="box">
<div class="inbox">
<div class="postleft">
<dl>
<dt><strong><ADDRESS><a 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="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="POSTED" TITLE="20051016T1105441-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="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>
</div>
</div>
</body>
Changes:
- Added
<div class="hfeed">around the entries (as opposed to an existing<divthat enclosed more than entries. - Added
class="hentry"to each Entry - Added
rel="bookmark"to the Entry Permalinks - Added
<span class="entry-title">...</div>around the Entry Title - Added
<span class="entry-content">...</div>around the Entry Content - Added
<abbr class="posted" title="YYYYMMDDThh:mm:ss+ZZZZ">...</abbr>around the Entry Datetime - Added
<address class="author vcard">to the poster's name
Also note:
- We did not need to add
id="###"to the Entry