{
  "attachments": [],
  "comments_archived": true,
  "date": "2005-10-03T03:50:17.000Z",
  "layout": "post",
  "tags": [
    "xoxo",
    "microformats",
    "opml",
    "gopher"
  ],
  "title": "Web directories with XOXO and XSL",
  "wordpress_id": 712,
  "wordpress_slug": "web-directories-with-xoxo-and-xsl",
  "wordpress_url": "http://decafbad.com/blog/?p=712",
  "year": "2005",
  "month": "10",
  "day": "02",
  "isDir": false,
  "slug": "web-directories-with-xoxo-and-xsl",
  "type": "entry",
  "postName": "2005-10-02-web-directories-with-xoxo-and-xsl",
  "html": "<p>Now, in my <a href=\"http://decafbad.com/blog/2005/10/02/a-kerfluffle-of-opml-and-web-directories\">previous post</a>, I'd mentioned that I might have some ideas to \"put up\" in response to this recent OPML and web directories kerfluffle.  Here's my general idea:</p>\n<p>How about trying <a href=\"http://microformats.org/wiki/xoxo\">XOXO</a>, <a href=\"http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2\">the <code>rel</code> attribute on HTML links</a>, and <a href=\"http://www.w3.org/TR/REC-html40/types.html#type-links\">the <code>subsection</code> link type</a>—all with a bit of XSL to make it work?</p>\n<p>Here's some working data and code:</p>\n<ul>\n<li><a href=\"http://decafbad.com/2005/10/xoxo-transclude/xsltproc?xslAddr=xoxo-transclude.xsl&amp;docAddr=ex1.html\">Here's the end result</a>, a simple web directory.</li>\n</ul>\n<p>Here are some clues as to what the above does:</p>\n<ul>\n<li>This directory started with <a href=\"http://decafbad.com/2005/10/xoxo-transclude/ex1.html\">this top-level outline</a>.  View source on this page, notice the \"Syndication Feeds\" link with the <code>rel=\"subsection\"</code>.</li>\n<li>Applying <a href=\"http://decafbad.com/2005/10/xoxo-transclude/xoxo-transclude.xsl\">this XSL</a> using <a href=\"http://decafbad.com/2005/10/xoxo-transclude/xsltproc\">this web service</a> is where the work gets done.  This consists of dereferencing each link with a <code>rel=\"subsection\"</code> and transcluding the innards of the page at the end of the URL.</li>\n<li>Notice that <a href=\"http://hackingfeeds.com/2005/10/xoxo-transclude/ex2.html\">the URL of \"Syndication Feeds\"</a> comes from a domain other than <code>decafbad.com</code>.  If I wanted to, the <a href=\"http://hackingfeeds.com/2005/10/xoxo-transclude/ex3.html\">third level of transclusion</a> could've come from yet another domain, too.</li>\n</ul>\n<p>I think this solution is better than using OPML for web directories.  Although it could use some refinement—using a bit of <code>&lt;iframe&gt;</code> or AJAX magic to include in a page, perhaps—it's not only <em>already supported</em> by more applications than OPML, it <em>also</em> leverages a lot of prior art and consensus work.  </p>\n<p>So, am I wrong here?  If so, please tell me how, where, and why.</p>\n<div id=\"comments\" class=\"comments archived-comments\"><h3>Archived Comments</h3>\n<ul class=\"comments\">\n<li class=\"comment\" id=\"comment-221085762\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://theryanking.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=c846b78a4a4c978fd34ef965320a13b0&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://theryanking.com\">ryan king</a>\n</div>\n\n\n<p><a href=\"#comment-221085762\" class=\"permalink\"><time datetime=\"2005-10-03T05:53:27\">2005-10-03T05:53:27</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>You're not wrong. This is very awesome.</p></div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221085763\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://dannyayers.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7028f422ca6da0180de6c9d922a3228f&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://dannyayers.com\">Danny</a>\n</div>\n\n\n<p><a href=\"#comment-221085763\" class=\"permalink\"><time datetime=\"2005-10-03T13:37:31\">2005-10-03T13:37:31</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>Bravo! I believe you've got the optimal approach to outline-style hierarchies on the Web.</p>\n<p>Gopher NG here we come!</p>\n<p>http://dannyayers.com/archives/2005/07/14/gopher-ng/</p></div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221085764\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.decafbad.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=2377f34a68801b861c3e54e1301f0dce&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.decafbad.com\">l.m.orchard</a>\n</div>\n\n\n<p><a href=\"#comment-221085764\" class=\"permalink\"><time datetime=\"2005-10-03T14:18:23\">2005-10-03T14:18:23</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>Danny: Well, hey, if we're going to reinvent Gopher, we may as well do it right.  :)  Next, I set my sights on <a href=\"http://en.wikipedia.org/wiki/Archie_search_engine\" rel=\"nofollow\">Archie</a>--watch out, Google!</p></div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221085765\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://boston.conman.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=bbb1c69b64019a3df907c3545186f907&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://boston.conman.org/\">Sean Conner</a>\n</div>\n\n\n<p><a href=\"#comment-221085765\" class=\"permalink\"><time datetime=\"2005-10-03T22:30:43\">2005-10-03T22:30:43</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>You're wrong because Dave Winer will say you're wrong for not using <em>his</em> format (dispite it being rather loosely specified).</p>\n<p>But yeah, I thought that <acronym title=\"eXtensible HyperText Markup Language\">XHTML</acronym> was modular and that you could use sections of it as needed, and that <code>&lt;UL&gt;</code> and <code>&lt;OL&gt;</code> are good enough for outlines.  Seems pretty obvious to me.</p></div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221085766\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://dannyayers.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7028f422ca6da0180de6c9d922a3228f&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://dannyayers.com\">Danny</a>\n</div>\n\n\n<p><a href=\"#comment-221085766\" class=\"permalink\"><time datetime=\"2005-10-03T23:33:49\">2005-10-03T23:33:49</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>Ooh, Archie...yeah...</p></div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221085767\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.isolani.co.uk/blog/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=b4fadb98bc6bb92fd88c969c0d71d2fe&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.isolani.co.uk/blog/\">Isofarro</a>\n</div>\n\n\n<p><a href=\"#comment-221085767\" class=\"permalink\"><time datetime=\"2005-10-04T14:21:22\">2005-10-04T14:21:22</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>Hmm, excellent idea to use rel=\"subsection\" - that make so much sense. I have a few Ajax based outliners lying around handling things from ul/li lists, atom feeds and opml outlines. I should pull it all together and prototype what you've suggested above. (I think I also have an OPML-friendly PHP proxy to \"alleviate\" the cross-domain security measure - should be able to hack it to accept XOXO-like outlines)</p>\n<p>Step two would be some WikiSyntax additions to author the above on a wiki (for instance defining transclusion links).</p></div>\n\n\n</li>\n</ul>\n\n\n</div>\n\n\n",
  "body": "Now, in my [previous post][prev], I'd mentioned that I might have some ideas to \"put up\" in response to this recent OPML and web directories kerfluffle.  Here's my general idea:\r\n\r\nHow about trying [XOXO][], [the `rel` attribute on HTML links][rel], and [the `subsection` link type][subsection]—all with a bit of XSL to make it work?\r\n\r\nHere's some working data and code:\r\n\r\n  * [Here's the end result][end], a simple web directory.\r\n  \r\nHere are some clues as to what the above does:\r\n\r\n  * This directory started with [this top-level outline][master].  View source on this page, notice the \"Syndication Feeds\" link with the `rel=\"subsection\"`.\r\n  * Applying [this XSL][xsl] using [this web service][xsltproc] is where the work gets done.  This consists of dereferencing each link with a `rel=\"subsection\"` and transcluding the innards of the page at the end of the URL.\r\n  * Notice that [the URL of \"Syndication Feeds\"][ex2] comes from a domain other than `decafbad.com`.  If I wanted to, the [third level of transclusion][ex3] could've come from yet another domain, too.\r\n  \r\nI think this solution is better than using OPML for web directories.  Although it could use some refinement—using a bit of `<iframe>` or AJAX magic to include in a page, perhaps—it's not only *already supported* by more applications than OPML, it *also* leverages a lot of prior art and consensus work.  \r\n\r\nSo, am I wrong here?  If so, please tell me how, where, and why.\r\n\r\n[ex3]: http://hackingfeeds.com/2005/10/xoxo-transclude/ex3.html\r\n[ex2]: http://hackingfeeds.com/2005/10/xoxo-transclude/ex2.html\r\n[xsltproc_src]: http://decafbad.com/2005/10/xoxo-transclude/xsltproc.txt\r\n[xsltproc]: http://decafbad.com/2005/10/xoxo-transclude/xsltproc\r\n[xsl]: http://decafbad.com/2005/10/xoxo-transclude/xoxo-transclude.xsl\r\n[master]: http://decafbad.com/2005/10/xoxo-transclude/ex1.html\r\n[end]: http://decafbad.com/2005/10/xoxo-transclude/xsltproc?xslAddr=xoxo-transclude.xsl&amp;docAddr=ex1.html\r\n[subsection]: http://www.w3.org/TR/REC-html40/types.html#type-links\r\n[rel]: http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2\r\n[xoxo]: http://microformats.org/wiki/xoxo\r\n[prev]: http://decafbad.com/blog/2005/10/02/a-kerfluffle-of-opml-and-web-directories\n\n<div id=\"comments\" class=\"comments archived-comments\">\n            <h3>Archived Comments</h3>\n            \n        <ul class=\"comments\">\n            \n        <li class=\"comment\" id=\"comment-221085762\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://theryanking.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=c846b78a4a4c978fd34ef965320a13b0&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://theryanking.com\">ryan king</a>\n                </div>\n                <a href=\"#comment-221085762\" class=\"permalink\"><time datetime=\"2005-10-03T05:53:27\">2005-10-03T05:53:27</time></a>\n            </div>\n            <div class=\"content\"><p>You're not wrong. This is very awesome.</p></div>\n            \n        </li>\n    \n        <li class=\"comment\" id=\"comment-221085763\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://dannyayers.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7028f422ca6da0180de6c9d922a3228f&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://dannyayers.com\">Danny</a>\n                </div>\n                <a href=\"#comment-221085763\" class=\"permalink\"><time datetime=\"2005-10-03T13:37:31\">2005-10-03T13:37:31</time></a>\n            </div>\n            <div class=\"content\"><p>Bravo! I believe you've got the optimal approach to outline-style hierarchies on the Web.</p>\n\n<p>Gopher NG here we come!</p>\n\n<p>http://dannyayers.com/archives/2005/07/14/gopher-ng/</p></div>\n            \n        </li>\n    \n        <li class=\"comment\" id=\"comment-221085764\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://www.decafbad.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=2377f34a68801b861c3e54e1301f0dce&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://www.decafbad.com\">l.m.orchard</a>\n                </div>\n                <a href=\"#comment-221085764\" class=\"permalink\"><time datetime=\"2005-10-03T14:18:23\">2005-10-03T14:18:23</time></a>\n            </div>\n            <div class=\"content\"><p>Danny: Well, hey, if we're going to reinvent Gopher, we may as well do it right.  :)  Next, I set my sights on <a href=\"http://en.wikipedia.org/wiki/Archie_search_engine\" rel=\"nofollow\">Archie</a>--watch out, Google!</p></div>\n            \n        </li>\n    \n        <li class=\"comment\" id=\"comment-221085765\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://boston.conman.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=bbb1c69b64019a3df907c3545186f907&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://boston.conman.org/\">Sean Conner</a>\n                </div>\n                <a href=\"#comment-221085765\" class=\"permalink\"><time datetime=\"2005-10-03T22:30:43\">2005-10-03T22:30:43</time></a>\n            </div>\n            <div class=\"content\"><p>You're wrong because Dave Winer will say you're wrong for not using <em>his</em> format (dispite it being rather loosely specified).</p>\n\n<p>But yeah, I thought that <acronym title=\"eXtensible HyperText Markup Language\">XHTML</acronym> was modular and that you could use sections of it as needed, and that <code>&lt;UL&gt;</code> and <code>&lt;OL&gt;</code> are good enough for outlines.  Seems pretty obvious to me.</p></div>\n            \n        </li>\n    \n        <li class=\"comment\" id=\"comment-221085766\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://dannyayers.com\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7028f422ca6da0180de6c9d922a3228f&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://dannyayers.com\">Danny</a>\n                </div>\n                <a href=\"#comment-221085766\" class=\"permalink\"><time datetime=\"2005-10-03T23:33:49\">2005-10-03T23:33:49</time></a>\n            </div>\n            <div class=\"content\"><p>Ooh, Archie...yeah...</p></div>\n            \n        </li>\n    \n        <li class=\"comment\" id=\"comment-221085767\">\n            <div class=\"meta\">\n                <div class=\"author\">\n                    <a class=\"avatar image\" rel=\"nofollow\" \n                       href=\"http://www.isolani.co.uk/blog/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=b4fadb98bc6bb92fd88c969c0d71d2fe&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\n                    <a class=\"avatar name\" rel=\"nofollow\" \n                       href=\"http://www.isolani.co.uk/blog/\">Isofarro</a>\n                </div>\n                <a href=\"#comment-221085767\" class=\"permalink\"><time datetime=\"2005-10-04T14:21:22\">2005-10-04T14:21:22</time></a>\n            </div>\n            <div class=\"content\"><p>Hmm, excellent idea to use rel=\"subsection\" - that make so much sense. I have a few Ajax based outliners lying around handling things from ul/li lists, atom feeds and opml outlines. I should pull it all together and prototype what you've suggested above. (I think I also have an OPML-friendly PHP proxy to \"alleviate\" the cross-domain security measure - should be able to hack it to accept XOXO-like outlines)</p>\n\n<p>Step two would be some WikiSyntax additions to author the above on a wiki (for instance defining transclusion links).</p></div>\n            \n        </li>\n    \n        </ul>\n    \n        </div>\n    ",
  "parentPath": "./content/posts/archives/2005",
  "path": "2005/10/02/web-directories-with-xoxo-and-xsl",
  "needsBuild": true,
  "prevPostPath": "2005/10/02/a-kerfluffle-of-opml-and-web-directories",
  "prevPostTitle": "A kerfluffle of OPML and web directories",
  "nextPostPath": "2005/10/03/half-hearted-gopher-ng",
  "nextPostTitle": "Half-hearted Gopher NG"
}