hatom-examples

From Microformats Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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="HEADING CONTENT">I really, truly </strong>
   <SPAN CLASS="ENTRY-CONTENT">
    didn't go ... view.
   </SPAN>
   <DIV>
    <span class="byline">
     posted by <span class="author">Natalie</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 <div that 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

More Examples

Retrieved from "http://microformats.org/wiki/index.php?title=hatom-examples&oldid=5414"