hatom-examples: Difference between revisions
Jump to navigation
Jump to search
m (<address> can't contain block level elements. Changed from div to span.) |
|||
| (6 intermediate revisions by 6 users not shown) | |||
| Line 105: | Line 105: | ||
* 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 314: | Line 314: | ||
* 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 class="author vcard"></code> and <code><span class="fn org"></code> to the CBC Newsroom | * Added <code><address class="author vcard"></code> and <code><span class="fn org"></code> to the CBC Newsroom | ||
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