xFolk Entry 0.4 — 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. In xFolk Entry 0.4, there are three class attributes. An element of class xfolkentry contains one <a> element of class taggedlink with the URL to be bookmarked, an optional element of class extended to allow a further description of the bookmark, and one or many &a> elements with the rel attribute set to tag (rel=“tag”) to indicate tags.

xFolk Entry 0.4 XMDP

XMDPs (xhtml meta data profiles) provide a systematic way of specifying what I just said in the last paragraph. The XMDP for xFolk Entry 0.4 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”:

xfolkentry

Indicates a container element for an xFolk entry. An xFolk entry indicates one bookmark with supporting metadata that the user wants to have aggregated into a folksonomy. The xfolkentry class attribute value is usually applied to <div>, <ul>, <ol>, <dt>, <p> or <span> elements. xFolk elements contained in an xfolkentry may be nested at an arbitrary depth.

taggedlink

An <a> tag of class taggedlink indicates the URL of the item the xFolk entry bookmarks. One and only one <a> element of class taggedlink must occur within each element of class xfolkentry. The title of the bookmark is in order of availability: (1) the value of an optional title attribute; (2) The value of the <a> element itself.

extended

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

There are a few things of note in this XMDP snippet. First, the class attribute space is disambiguated by context. The attribute values taggedlink and extended only have meaning within an element of class xfolkentry. Second, tags are indicated using the reltag microformat, thereby not reinventing the wheel. 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.).

Changes between versions 0.3 and 0.4

Strongly motivated by commentary from Tantek Çellik, Kevin Marks, and Brian Del Vecchio, I vastly simplified this version of xFolk. For the most part, the concept remains the same, but the attribute names have changed or been eliminated. In particular, there is no longer a separate attribute for indicating bookmark titles. They are assumed to be contained either in the title attribute or the value of the <a> element of class taggedlink. Further, tags are now indicated using the reltag format, so tags must now be URLs.

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 Entry 0.4 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 Entry 0.4. 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 Entry 0.4 with the changed portions bolded:

<div class=“xfolkentry”>
  <div>
    <a class=“taggedlink” 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 rel=“tag” href=“/fpgibson/folksonomy”>folksonomy</a>
    <a rel=“tag” 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>

[note: This solution has been revised based on helpful remarks from Rijk van Geijtenbeek in the comments]

To get this into xFolk 0.4, the easiest way is to have each xFolk entry in its own <dl> element of class xfolkentry so that individual xFolk entries can be demarcated. 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 class=“xfolkentry”>
    <dt>
      <a class=“taggedlink” 
      href=“http://www.sifry.com/alerts/archives/000306.html”>
        Sifry&#039;s Alerts: Technorati launches Related Tags
      </a>
    </dt>
    <dd 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&#039;ll see the patterns. Can you smell the emergence?
    </dd>
    <dd class=“tags”>
      2005-04-09 to 
      <a rel=“tag” 
       href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/folksonomy”>
        folksonomy
      </a>, 
      <a rel=“tag” 
       href=“http://www.niallkennedy.com/scuttle/bookmarks.php/budgibson/technorati”>
        technorati
      </a>
    </dd>
  </dl>
</div>

de.lirio.us

de.lirio.us presents a case much closer to del.icio.us and can be converted to xFolk 0.4 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.4.

<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 Entry 0.4:

<div class='xfolkentry'>
  <div class='uri'>
    <a class='taggedlink' href='http://www.thinkwiki.org/ThinkWiki'>
      ThinkWiki
    </a>
  </div>
  <div class='extended'>
    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 rel=“tag” href='http://de.lirio.us/rubric/entries/tags/ibm'>
      ibm
    </a>
    <a rel=“tag” href='http://de.lirio.us/rubric/entries/tags/linux'>
      linux
    </a>
    <a rel=“tag” href='http://de.lirio.us/rubric/entries/tags/thinkpad'>
      thinkpad
    </a>
    <a rel=“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>

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 Entry 0.4. 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=“xfolkentry”>
  <a class=“taggedlink”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>
  </span>
  <br />
    <span class=“extended”> “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 technorati reltag microformat. Since xFolk is built using reltag, the two can be used interchangeably, but there may be an advantage to using xFolk because its additional context can help disambiguate exactly where reltag applies on large archive pages that may contain many entries. To see how this might work, we will consider two self taggers: 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.

Currently, self-taggers 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 xfolkentry, 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. I am currently using this strategy on this very post.

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 Entry 0.4 with changes bolded.

<div class=“xfolkentry”>
<a class=“taggedlink” style=“display: none”
  href=“URL of the entry”>Entry title</a>
[Technorati tags:
<a href=“http://technorati.com/tag/paradox” rel=“tag”> 
  paradox
</a> 
<a href=“http://technorati.com/tag/puzzle” 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. 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 Entry 0.4.

<div class=“xfolkentry”>
<a class=“taggedlink” 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”> 
  hacking
</a> / 
<a href=“http://technorati.com/tag/movabletype” rel=“tag”>
  movabletype
</a> / 
<a href=“http://technorati.com/tag/books” rel=“tag”>
  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 Entry 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 Entry 0.4. Therefore, we will have to add a container element for the entry. Here is the altered version.

<ul class=“delicious”>
  <li class=“xfolkentry”>
    <a class=“taggedlink”
     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>

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 it uses the title attribute in a completely different way. Consulting recommended and current uses of the title attribute, xFolk Entry's use of the title attribute seems to conform more to the standard approach than Jacobian's. One simple option is to just switch the title and element values. Alternatively, one could simply place a new element of class extended in the markup. We'll adopt the first option because it is simpler.

Here is the markup before conversion to xFolk Entry 0.4 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.4 conformant version with the element and title attribute values switched.

<ul id='delicious'>
  <li class=“xfolkentry”>
    <a class=“taggedlink” title=“Cricket” 
     href=“http://cricket.sourceforge.net/”>
     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 jobs.
    </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 Entry 0.4. 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=“xfolkentry”>
  <p>
    <a rel=“bookmark” class=“taggedlink”
     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=“extended”>
    <p>
      (Apr 7) It looks like Amazon is trying a new book detail page.
    </p>
  </div>
  </div>
</li>

Jonas Luster

Jonas Luster is a developer at Technorati who is somewhat of a tagging maven. Recently, he has started publishing blogmarks, essentially entries consisting of tagged links with commentary. He is a perfect candidate for xFolk Entry 0.4.

Here is snippet from a recent blogmarks entry before making it conformant with xFolk Entry 0.4:

<ul>
  <li>
    <p>
      <a href=“http://news.yahoo.com/news?tmpl=story&amp;u=/washpost/20050526/ts_washpost/bid_to_limit_women_in_combat_withdrawn”>
        Bid to Limit Women In Combat Withdrawn
      </a> 
      (<a href=“http://blogmarks.net/tag/combat”>combat</a> 
      <a href=“http://blogmarks.net/tag/war-n-peace”>war-n-peace</a> 
      <a href=“http://blogmarks.net/tag/womensrights”>womensrights</a> 
      <a href=“http://blogmarks.net/tag/goodthing”>goodthing</a>)
      <br />House Republicans retreated yesterday from a measure 
      that would have restricted women&#8217;s roles in the military 
      in an effort to keep them out of combat.
    </p>
  </li>
</ul>

Here is the markup after conversion to xFolk 0.4 with changes bolded:

<ul>
  <li class=“xfolkentry”>
    <p>
      <a class=“taggedlink” 
      href=“http://news.yahoo.com/news?tmpl=story&amp;u=/washpost/20050526/ts_washpost/bid_to_limit_women_in_combat_withdrawn”>
        Bid to Limit Women In Combat Withdrawn
      </a> 
      (<a href=“http://blogmarks.net/tag/combat” rel=“tag”
        >combat
      </a> 
      <a href=“http://blogmarks.net/tag/war-n-peace” rel=“tag”>
        war-n-peace
      </a> 
      <a href=“http://blogmarks.net/tag/womensrights” rel=“tag”>
        womensrights
      </a> 
      <a href=“http://blogmarks.net/tag/goodthing” rel=“tag”>
        goodthing
      </a>)
      <br /><span class=“extended”>House Republicans retreated
      yesterday from a measure that would have restricted women&#8217;s
      roles in the military in an effort to keep them out of 
      combat.</span>
    </p>
  </li>
</ul>

Summary and next steps

In this post, I have described xFolk Entry 0.4, a very simplified version of the xFolk microformat that is extremely easy to implement.

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