hatom-examples: Difference between revisions
Jump to navigation
Jump to search
(Updated to hAtom 0.1) |
|||
| (18 intermediate revisions by 13 users not shown) | |||
| Line 1: | Line 1: | ||
<h1>hAtom examples</h1> | <h1>hAtom examples</h1> | ||
'''Work in progress!''' | Examples of [[hatom]] - '''Work in progress!''' | ||
= Contributors = | = Contributors = | ||
* [[User:DavidJanes|David Janes]] | * [[User:DavidJanes|David Janes]] | ||
* [[User:RobertBachmann|Robert Bachmann]] | * [[User:RobertBachmann|Robert Bachmann]] | ||
* [[User:Chris_Messina|Chris Messina]] | |||
= Transformation 1 = | = Transformation 1 = | ||
| Line 55: | Line 56: | ||
</nowiki></pre> | </nowiki></pre> | ||
Transformed to hAtom compliant | 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: | Changes: | ||
* Added <code>class="hfeed"</code> to Feed | * Added <code>class="hfeed"</code> to Feed | ||
* Added <code>class="hentry"</code> to Entry | * Added <code>class="hentry"</code> to Entry | ||
* Added <code>class=" | * Added <code>class="entry-title"</code> to Entry Title | ||
* Moved <code>id="###"</code> from <code><h3></code> to Entry | * 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><div class="entry-content"></code>...<code></div></code> around the Entry Content | ||
| Line 153: | Line 153: | ||
</nowiki></pre> | </nowiki></pre> | ||
Transformed to hAtom compliant | Transformed to hAtom compliant: | ||
<body bgcolor="..."> | |||
<div class=" | |||
<<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: | Changes: | ||
| Line 209: | Line 209: | ||
* cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet | * 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 | * this is one of the uglier transformations you're likely to see | ||
= Transformation 3 = | = Transformation 3 = | ||
| Line 229: | Line 228: | ||
<p> | <p> | ||
<ul> | <ul> | ||
<li><font | <li><font size="1">INDEPTH: </font><font size="2"> | ||
<a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font> | <a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font> | ||
</ul> | </ul> | ||
| Line 263: | Line 262: | ||
</nowiki></pre> | </nowiki></pre> | ||
Transformed to hAtom compliant | Transformed to hAtom compliant: | ||
<div class="text"> | <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: | Changes: | ||
* Added <code><div class="hfeed hentry"></code> around the single entry on the page | * 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><div class="entry-title"></code> to the Entry Title | ||
* Added <code>< | * Added the class <code>class="entry-content"</code> to every paragraph, eg <code><p class="entry-content"></code>...<code></p></code> -- 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><abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime | ||
* Added <code><address></code> to the CBC Newsroom | * Added <code><address class="author vcard"></code> and <code><span class="fn org"></code> to the CBC Newsroom | ||
Also note: | Also note: | ||
* We | * 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 | * There is no <code>rel="bookmark"</code> so it is assumed to be the URI of the page | ||
| Line 424: | Line 421: | ||
</nowiki></pre> | </nowiki></pre> | ||
Transformed to hAtom compliant | 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> | ||
</div> | |||
</body> | |||
| Line 535: | Line 531: | ||
* Added <code><span class="entry-title"></code>...<code></div></code> around the Entry Title | * 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><span class="entry-content"></code>...<code></div></code> around the Entry Content | ||
* Added <code><abbr class=" | * 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> to the poster's name | * Added <code><address class="author vcard"></code> and <code>class="fn url"</code> to the poster's name | ||
Also note: | Also note: | ||
* We did not need to add <code>id="###"</code> to the Entry | * 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 = | = 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 | |||
Latest revision as of 06:51, 20 August 2013
hAtom examples
Examples of hatom - 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:
<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="entry-title"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:
<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>
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:
<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"><span class="text"><a class="url" href="/news/credit.html">CBC News</a></span></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 the class
class="entry-content"to every paragraph, eg<p class="entry-content">...</p>-- 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
Also note:
- We made 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:
<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>
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="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr>around the Entry Datetime - Added
<address class="author vcard">andclass="fn url"to the poster's name
Also note:
- We did not need to add
id="###"to the Entry
Transformation 5
Transforming RSS to hatom using MagpieRSS. PHP source available. Result:
- <html>
- <body class="hfeed" id="173333">
- <div id="content" class="hentry">
- <h2 class="entry-title">
- No. <a href="http://twitter.com/ssmith/statuses/173333" rel="bookmark">173333</a>
- </h2>
- <p class="entry-content">
- Sweet potato pie. Sugar coma. Die.
- </p>
- <p>
- <small>Penned by <span class="vcard author"><a href="http://twitter.com/ssmith" class="url fn">Sean</a></span> at <abbr title="Fri, 24 Nov 2006 01:03:11 +0000" class="updated">1:03am</abbr></small>.
- </p>
- </div>
- </body>
- </html>
More Examples
hAtom for search results, from [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>
Changes:
- Added
class="hentry"to each result - Added
rel="bookmark"to each result link - Added
<abbr class="updated" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr>for date of index update