xFolk 0.3 — General Approach & XMDP

The general appeal of xhtml microformats is that they combine the machine-processing efficiency of xml with the presentation capabilities of html. Another important goal of microformats is not to force reinvention of the wheel. In this regard, xFolk is being proposed at a time when the number of folksonomy aggregation services is proliferating and many people are engaging in do-it-yourself efforts with link blogs. These approaches generally consist of specifying components of the folksonomy with xhtml elements but differ significantly on the elements used.

Therefore, the general strategy behind xFolk is to provide a means of specifying one folksonomy entry while allowing for extreme flexibility in the elements used. Multiple entries are specified by simply creating more than one xFolk entry in a given web article.

All components of an entry are identified by giving special values to the class attributes of the xhtml elements that contain them. Specifically, an xFolk entry is contained in an element of class xEntry, and all components of the entry, also specified by elements with specific class attribute values, must be contained within that element. A tag definition is contained in an entry of class xTagDefinition, and all components of the definition, also specified by elements with specific class attribute values, must be cotnained within that element.

xFolk 0.3 XMDP

XMDPs (xhtml meta data profiles) provide a systematic way of specifying what I just said in the last paragraph. The XMDP for xFolk 0.3 is here. The relevant excerpt for this discussion is as follows:

class

HTML4 definition of the 'class' attribute. This meta data profile defines some 'class' attribute values (class names) and their meanings as suggested by a draft of “Hypertext Links in HTML”:

xEntry

Indicates a container element for an xFolk entry. An xFolk entry indicates one item that the user wants to have aggregated into a folksonomy. It has a URL and a title. An xFolk entry may also have an extended description and zero or more tags. The xEntry class attribute value is usually applied to <div>, <ul>, <ol>, <dt>, <p> or <span> elements. xFolk elements contained in an xEntry may be nested at an arbitrary depth.

xTagged

Indicates the URL of the item the xFolk entry references. One and only one <a> element of class xTagged occurs within each element of class xEntry. Applied only to <a> elements with the value of the href attribute indicating the URL.

xTitle

The title of the xFolk entry is contained in the element of class xTitle. Typically applied to <a>, <dd>, <li>, <p>, and <span> elements. There must be one and only one element of class xTitle for each xFolk entry.

xExtended

A further description of the xFolk entry. Typically applied to <dd>, <li>, <p>, and <span> elements. This element is optional.

xTag

A one word tag applied to the xFolk entry. Typically applied to <a> and <span> elements. The value of the element for which this class attribute occurs is the value of the tag. If this class attribute value occurs for an <a> element, the value of the href attribute is considered to point to a repository of links classified under that tag with perhaps an explicit definition of the tag's meaning. This element is optional in an xEntry container and mandatory in an xTagDefinition container.

xTagDefinition

Elements with this class attribute value contain a folksonomy tag definition. If a folksonomy tag definition is provided, it must contain an element of class xTag and one or more elements of class xTagDescription. As with xEntry, this class attribute value is most likely to be applied <div>, <ul>, <ol>, <dt>, <p> or <span> elements.

xTagDescription

A description of an xFolk tag. Typically applied to <dd>, <li>, <p>, and <span> elements. This element is mandatory in an xTagDefinition container.

There are a few things of note in this XMDP snippet. First, to keep the class attribute space from being too prone to conflicts, I have prefixed each attribute with a lower case “x”. Second, tags do not have to be URLs. As a result, the tag is indicated as a class attribute value and not a rel attribute value. Third, I have been remarkably agnostic as to the exact elements used. It is expected that implementers will simply be as consistent as possible in selecting elements and use elements that are appropriate for the expressive context (i.e., use lists for lists of links, etc.).

Current Practice

Formal statements describing xFolk are really only a first step in specifying a microformat. Often such statements do not provide sufficient hints for what to do in every day practice. Here, I offer ten examples of how xFolk could be applied to examples pulled from current everyday practice.

Folksonomy Services

Del.icio.us is a social bookmarking system that first introduced the capability that came to be called folksonomy. Recently, two open source implementations of del.icio.us's feature set have come into use: scuttle and de.lirio.us. They all use semantic markup to indicate folksonomy components within the xhtml they publish. However, there are significant differences in these markups. Here, we'll see that xFolk can provide a unified markup that works for all three services.

del.icio.us

Del.icio.us uses semantic markup that can be easily converted to xFolk 0.3. The pre-xFolk version is as follows with items that will be changed by xFolk bolded.

<div class=“post”>
  <div>
    <a class=“delLink” href=“http://www.sifry.com/alerts/archives/000306.html”>
      Sifry's Alerts: Technorati launches Related Tags
    </a> 
  </div>
  <div class=“extended”> 
    Ever wanted to see what posts are related to other posts, what tags 
    are related to others? Now you can! Just check under the Tag 
    description on most tag pages, like this one, or this one, and you'll
    see the patterns. Can you smell the emergence?
  </div>
  <div class=“meta”>
    to
    <a class=“delNav” href=“/fpgibson/folksonomy”>folksonomy</a>
    <a class=“delNav” href=“/fpgibson/technorati”>technorati</a>
    ... <a class=“delNav” href=“/url/cbcabf7de070fdb46598ee679367be49”>
    and 1 other person
    </a>
    ... on 2005-04-09
  </div>
</div>

Here is the snippet after after alteration to conform to xFolk 0.3 with the changed portions bolded:

<div class=“xEntry”>
  <div>
    <a class=“xTagged xTitle” href=“http://www.sifry.com/alerts/archives/000306.html”>
      Sifry's Alerts: Technorati launches Related Tags
    </a> 
  </div>
  <div class=“xExtended”> 
    Ever wanted to see what posts are related to other posts, what tags 
    are related to others? Now you can! Just check under the Tag 
    description on most tag pages, like this one, or this one, and you'll
    see the patterns. Can you smell the emergence?
  </div>
  <div class=“meta”>
    to
    <a class=“xTag” href=“/fpgibson/folksonomy”>folksonomy</a>
    <a class=“xTag” href=“/fpgibson/technorati”>technorati</a>
    ... <a class=“delNav” href=“/url/cbcabf7de070fdb46598ee679367be49”>
    and 1 other person
    </a>
    ... on 2005-04-09
  </div>
</div>

scuttle

Here is the scuttle bookmark for the same item. An issue with scuttle's xhtml presentation is that it specifies a collection of bookmarks with the implicit idea that bookmarks are separated each time a new URL is specfied in a <dt> element. Further, things like tags are specified as a collection in a sublist. This approach is fine if one expects that the information will always be presented in a definition list. Given the radical difference we see in the del.icio.us and scuttle approaches, we can assume that such will not be the general case for those not already using scuttle.

<div id=“bookmarks”>
  <h2>Your Bookmarks</h2>
  <dl>
    <dt>
      <a href=“http://www.sifry.com/alerts/archives/000306.html”>
        Sifry&#039;s Alerts: Technorati launches Related Tags
      </a>
    </dt>
    <dd class=“description”>
      Ever wanted to see what posts are related to other posts, what 
      tags are related to others? Now you can! Just check under the 
      Tag description on most tag pages, like this one, or this one, 
      and you&#039;ll see the patterns. Can you smell the emergence?
    </dd>
    <dd class=“tags”>
      2005-04-09 to 
      <a href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/folksonomy”>
        folksonomy
      </a>, 
      <a href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/technorati”>
        technorati
      </a>
    </dd>
  </dl>
</div>

To get this into xFolk 0.3, We will have to add a <div> element to demarcate the different xFolk entries. We will also have to add class attributes in cases where there are none. Changed and added components are bolded.

<div id=“bookmarks”>
  <h2>Your Bookmarks</h2>
  <dl>
    <div class=“xEntry”>
    <dt>
      <a class=“xTagged xTitle” 
      href=“http://www.sifry.com/alerts/archives/000306.html”>
        Sifry&#039;s Alerts: Technorati launches Related Tags
      </a>
    </dt>
    <dd class=“xExtended”>
      Ever wanted to see what posts are related to other posts, what 
      tags are related to others? Now you can! Just check under the 
      Tag description on most tag pages, like this one, or this one, 
      and you&#039;ll see the patterns. Can you smell the emergence?
    </dd>
    <dd class=“tags”>
      2005-04-09 to 
      <a class=“xTag” 
       href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/folksonomy”>
        folksonomy
      </a>, 
      <a class=“xTag” 
       href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/technorati”>
        technorati
      </a>
    </dd>
    <div>
  </dl>
</div>

de.lirio.us

de.lirio.us presents a case much closer to del.icio.us and can be converted to xFolk 0.3 by changing attribute values. We will leave some extraneous elements and attributes that may be intended as semantic markup but will be ignored by xFolk 0.3.

<div class='entry'>
  <div class='uri'>
    <a class='title' href='http://www.thinkwiki.org/ThinkWiki'>
      ThinkWiki
    </a>
  </div>
  <div class='description'>
    Wiki Web for Thinkpad users. Here you find anything you need to 
    install your favourite Linux distribution on your Thinkpad.
  </div>
  <div class='created'>
    <a class='tag' href='http://de.lirio.us/rubric/entries/tags/ibm'>
      ibm
    </a>
    <a class='tag' href='http://de.lirio.us/rubric/entries/tags/linux'>
      linux
    </a>
    <a class='tag' href='http://de.lirio.us/rubric/entries/tags/thinkpad'>
      thinkpad
    </a>
    <a class='tag' href='http://de.lirio.us/rubric/entries/tags/wiki'>
      wiki
    </a>
    by 
    <a href='http://de.lirio.us/rubric/entries/user/blixtra'>
      blixtra
    </a>
    (created: 2005-04-09 21:54)
  </div>
</div>

Here is the entry in xFolk 0.3:

<div class='xEntry'>
  <div class='uri'>
    <a class='xTag xTitle' href='http://www.thinkwiki.org/ThinkWiki'>
      ThinkWiki
    </a>
  </div>
  <div class='xExtended'>
    Wiki Web for Thinkpad users. Here you find anything you need to 
    install your favourite Linux distribution on your Thinkpad.
  </div>
  <div class='created'>
    <a class='xTag' href='http://de.lirio.us/rubric/entries/tags/ibm'>
      ibm
    </a>
    <a class='xTag' href='http://de.lirio.us/rubric/entries/tags/linux'>
      linux
    </a>
    <a class='xTag' href='http://de.lirio.us/rubric/entries/tags/thinkpad'>
      thinkpad
    </a>
    <a class='xTag' href='http://de.lirio.us/rubric/entries/tags/wiki'>
      wiki
    </a>
    by 
    <a href='http://de.lirio.us/rubric/entries/user/blixtra'>
      blixtra
    </a>
    (created: 2005-04-09 21:54)
  </div>
</div>

Self Publishers

People who self publish links with commentary predate folksonomy. These people provide value to their readers as a sort of navigation service and likely see no reason to outsource this component of their sites to an external entity such as del.icio.us. There may be tremendous value to them in adopting a microformat such as xFolk since it will further help them share their links, something they have already set out to do.

kottke

Kottke's remaindered links is an internationally recognized link blog.

Kottke's entry is taken from his remaindered links link blog. It represents several challenges for applying xFolk because, as is, it is not valid xhtml. Further, there are no explicit semantics, only implied semantics.

<li>
  <a href=“http://www.guardian.co.uk/arts/news/story/0,11711,1188015,00.html”>
    A previous Banksy unauthorized art placement took place in the 
    Natural History Museum in London
  </a>  
  <span class=“nocmt”>
    <a href=“http://www.kottke.org/remainder/05/03/7937.html”>
      &thinsp;#&thinsp;
    </a><br />
    “The graffiti artist Banksy has managed to smuggle in his latest 
     work, a dead rat in a glass-fronted box, into the Natural History
     Museum where it was exhibited on a wall for several hours.”
</li>

Here is the version rendered in xFolk 0.3. Note that we fixed the <span> tag that was not properly closed in the original rendition. A further issue is that Kottke used a <br /> element, a sort of no-no in semantic markup. Under the idea of altering practice as little as possible, we just leave it. A challenge with this particular entry is the presence of two URLs that could be interpreted as the URL to tag, one pointing to a permalink on Kottke's site and one pointing to the original article. We opt for the URL pointing to the original article.

<li class=“xEntry”>
  <a class=“xTagged xTitle”href=“http://www.guardian.co.uk/arts/news/story/0,11711,1188015,00.html”>
    A previous Banksy unauthorized art placement took place in the 
    Natural History Museum in London
  </a>  
  <span class=“nocmt”>
    <a href=“http://www.kottke.org/remainder/05/03/7937.html”>
      &thinsp;#&thinsp; </span>
    </a><br />
    <span class=“xExtended”> “The graffiti artist Banksy has managed 
     to smuggle in his latest 
     work, a dead rat in a glass-fronted box, into the Natural History
     Museum where it was exhibited on a wall for several hours.”</span>
</li>

Self taggers

Self taggers tag their own posts by using the legacy technorati Reltag microformat. Self taggers are prime candidates to become users of xFolk because they have already adopted the idea of putting tags in their markup. We will consider two self taggers here: David Weinberger and Ben Hammersley. We note in passing that Infoworld's recently begun self-tagging efforts are almost identical to those of David Weinberger. So, what we say here will apply to them.

However, self-taggers also represent a particularly nettlesome use case. They are tagging the entire post and depending on search engines and other web crawlers to interpret the tags as applying to the entire post. The general strategy here is to surround the tags with a <div> of class xEntry, add a link to the article with a title (both of which may be styled for no display), and add class attributes to the <a> elements that contain the tags.

Weinberger

Here are some tags as written by David Weinberger on Joho the Blog for one of his posts.

[Technorati tags:
<a href=“http://technorati.com/tag/paradox” rel=“tag”> 
  paradox
</a> 
<a href=“http://technorati.com/tag/puzzle” rel=“tag”> 
  puzzle
</a>
]

Here is a version that would correspond to xFolk 0.3 with changes bolded. Note how we accommodated Technorati's legacy tagging scheme using the rel attribute by simply adding the xTag value to the class attribute.

<div class=“xEntry”>
<a class=“xTagged xTitle” style=“display: none”
  href=“URL of the entry”>Entry title</a>
[Technorati tags:
<a href=“http://technorati.com/tag/paradox” class=“xTag” rel=“tag”> 
  paradox
</a> 
<a href=“http://technorati.com/tag/puzzle” class=“xTag” rel=“tag”> 
  puzzle
</a>
]
</div>

Hammersley

Ben Hammersley represents a more complicated case because he indicates tag repositories for both technorati and del.icio.us when he tags his posts. As Kevin Marks observes, even though Hammersley is using the exact same word for the tags pointing at different repositories, we might well consider each tag subtly different because it is in fact the collection in the repository that defines the tag. Fortunately, we can avoid such quandaries with the simple observation that the technorati repository includes the del.icio.us repository, so it suffices just to indicate the technorati links as xTags. Otherwise, the strategy is exactly as for Weinberger. Here is the original version.

<h2>Folksonomies</h2>
<a href=“http://del.icio.us/” title=“del.icio.us”>
  http://del.icio.us
</a> / 
<a href=“http://del.icio.us/tag/hacking”>
  hacking
</a> / 
<a href=“http://del.icio.us/tag/movabletype”>
  movabletype
</a> / 
<a href=“http://del.icio.us/tag/books”>
  books
</a> 
<br/>
<br/>
<br/>
<a href=“http://technorati.com/tag” title=“technorati”>
  http://technorati.com/tag
</a> / 
<a href=“http://technorati.com/tag/hacking” rel=“tag”>
  hacking
</a> / 
<a href=“http://technorati.com/tag/movabletype” rel=“tag”>
  movabletype
</a> / 
<a href=“http://technorati.com/tag/books” rel=“tag”>
  books
</a> 

Here is the version that would conform to xFolk 0.3. Note again how we accomodate technorati's legacy RelTag tagging protocol.

<div class=“xEntry”>
<a class=“xTagged xTitle” style=“display: none”
  href=“URL of the entry”>Entry title</a>
<h2>Folksonomies</h2>
<a href=“http://del.icio.us/” title=“del.icio.us”>
  http://del.icio.us
</a> / 
<a href=“http://del.icio.us/tag/hacking”>
  hacking
</a> / 
<a href=“http://del.icio.us/tag/movabletype”>
  movabletype
</a> / 
<a href=“http://del.icio.us/tag/books”>
  books
</a> 
<br/>
<br/>
<br/>
<a href=“http://technorati.com/tag” title=“technorati”>
  http://technorati.com/tag
</a> / 
<a href=“http://technorati.com/tag/hacking” rel=“tag”
  class=“xTag”> 
  hacking
</a> / 
<a href=“http://technorati.com/tag/movabletype” rel=“tag”
  class=“xTag”>
  movabletype
</a> / 
<a href=“http://technorati.com/tag/books” rel=“tag”
  class=“xTag”>
  books
</a> 
</div>

Link blog Republishers

Link blog republishers are generally using del.icio.us and republishing the links on their own blog as a sort of value-add for their readers. In essence, link blog republishers are attempting to gain more visibility for their links and link comments. For this reason, link blog republishers are a natural market for xFolk. xFolk will help them gain more search engine visibility for their links.

pollas

Anders Pollas maintains a blog where he discusses music, media, and new means of distribution for information products. Much like del.icio.us, his link blog already has many semantic elements. Here is the version before xFolk 0.3 with items to be changed bolded. Note that Pollas does not republish his folksonomy tags.

<ul class=“delicious”>
  <li>
    <a href=“http://db.tidbits.com/getbits.acgi?tbart=07140”>
      TidBITS: Catching Up with the Voice of Macintosh: Fred
    </a> 
    <div class=“extended”>
      Airport meetup with ... Fred
    </div>
  </li>
</ul>

One issue with Pollas' strategy is that he specifies a collection of entries vs. one entry at a time as required by xFolk 0.3. Therefore, we will have to add a container element for the entry. Here is the altered version.

<ul class=“delicious”>
  <li class=“xEntry”>
    <a class=“xTagged xTitle”
     href=“http://db.tidbits.com/getbits.acgi?tbart=07140”>
      TidBITS: Catching Up with the Voice of Macintosh: Fred
    </a> 
    <div class=“xExtended”>
      Airport meetup with ... Fred
    </div>
  </li>
</ul>

jacobian

Jacobian writes on recipes. These may be cooking recipes, software recipes, recipes for disaster, any kind of recipe. His link blog is sparse appearing to just consist of URLs and titles. However, an investigation of the source reveals that the extended entry is contained in the title attribute of the <a> tag.

This structure is challenging for xFolk because, with the exception of the tagged URL (class=“xTagged”) and tag URL (class=“xTag”), xFolk assumes that the folksonomy information is expressed as element not attribute values. There are two strategies one can pursue with xFolk: (1) Just ignore what is in the title attribute; (2) Extensively alter the markup to put what is in the title attribute as an element value, for instance put the text in the title attribute as the value of a <p> element.

Here is the markup before conversion to xFolk 0.3 with items to be changed bolded.

<ul id='delicious'>
  <li>
    <a class=“delLink” title=“Cricket is a 
     high performance, extremely flexible system for monitoring trends 
     in time-series data. Cricket was expressly developed to help 
     network managers visualize and understand the traffic on their 
     networks, but it can be used all kinds of other job” 
     href=“http://cricket.sourceforge.net/”>
      Cricket
    </a>
  </li>
</ul>

Here is the xFolk 0.3 conformant version. I opted to do nothing with the title attribute, leaving it to the author to consider how he might want to alter his markup.

<ul id='delicious'>
  <li class=“xEntry”>
    <a class=“xTagged xTitle” title=“Cricket is a 
     high performance, extremely flexible system for monitoring trends 
     in time-series data. Cricket was expressly developed to help 
     network managers visualize and understand the traffic on their 
     networks, but it can be used all kinds of other job” 
     href=“http://cricket.sourceforge.net/”>
      Cricket
    </a>
  </li>
</ul>

julian-bez

Julian Bez is a german web designer. His link blog contains a lot of semantic markup. It only requires minor alteration to conform with xFolk 0.3. Here's the markup before conversion with items to change bolded.

<li id=“links”>
  <h3>del.icio.us bookmarks</h3>
  <p>
    <a rel=“bookmark” href=“http://37signals.com/svn/archives2/2005/04/amazons_new_clo.php”>
      <strong>
        Amazon's new clothes - Signal vs. Noise (by 37signals)
      </strong>
    </a>
  </p>
  <div class=“linkcontent”>
    <p>
      (Apr 7) It looks like Amazon is trying a new book detail page.
    </p>
  </div>
</li>

Here's the new version with changes and additions bolded.

<li id=“links”>
  <h3>del.icio.us bookmarks</h3>
  <div class=“xEntry”>
  <p>
    <a rel=“bookmark” class=“xTagged xTitle”
     href=“http://37signals.com/svn/archives2/2005/04/amazons_new_clo.php”>
      <strong>
        Amazon's new clothes - Signal vs. Noise (by 37signals)
      </strong>
    </a>
  </p>
  <div class=“xExtended”>
    <p>
      (Apr 7) It looks like Amazon is trying a new book detail page.
    </p>
  </div>
  </div>
</li>

hybernaut

Brian Del Vecchio has been doing “elite web surfing” since 1993 and currently blogs at the Institute of Hybernautics. He recently implemented an upcoming.org module for drupal that produces hCalendar, and he uses semantic markup extensively throughout his site.

Here is snippet from his links before making them conformant with xFolk 0.3:

<div class=“block block-delicious” id=“block-delicious-0”>
  <div class=“title”>
    <h3>
      recent links
    </h3>
  </div>
  <div class=“content”>
    <div class=“item-list”>
      <ul>
        <li>
          <a href=“http://www.sitepoint.com/article/php-xml-parsing-rss-1-0”>
            PHP and XML: Parsing RSS 1.0 [PHP & MySQL Tutorials]
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Here is the markup after conversion to xFolk 0.3:

<div class=“block block-delicious” id=“block-delicious-0”>
  <div class=“title”>
    <h3>
      recent links
    </h3>
  </div>
  <div class=“content”>
    <div class=“item-list”>
      <ul>
        <li class=“xEntry”>
          <a class=“xTagged xTitle”
           href=“http://www.sitepoint.com/article/php-xml-parsing-rss-1-0”>
            PHP and XML: Parsing RSS 1.0 [PHP & MySQL Tutorials]
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Summary and next steps

In this post, I have described an iteration of xFolk that is much more similar to previous microformat efforts in how it specifies and uses attribute values. This version should be easy to implement in templates and tools.

As always, please feel free to trackback or comment. You can also tagback through the xFolk technorati tag.