<?xml version="1.0" encoding="UTF-8"?>
<essay xml:lang="en" version="5.0" xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:gal="http://norman.walsh.name/rdf/gallery#" xmlns:foaf="http://xmlns.com/foaf/0.1/">
<info>
    
    
    
    
    
    
    
    
<title>DocBook.org redesigned</title><biblioid class="uri">http://norman.walsh.name/2006/07/28/docbookOrgRedesign</biblioid>
<volumenum>9</volumenum>
<issuenum>74</issuenum>
<pubdate>2006-07-28T07:28:09-04:00</pubdate>
<date>$Date: 2006-07-28 09:12:44 -0400 (Fri, 28 Jul 2006) $</date>
<author>
      <personname>
<firstname>Norman</firstname>
	<surname>Walsh</surname>
</personname>
    </author>
<copyright>
      <year>2006</year>
      <holder>Norman Walsh</holder>
    </copyright>
<abstract>
<para>Yesterday, I rolled out a redesign of the DocBook.org website.</para>
</abstract>
<dc:subject rdf:resource="http://norman.walsh.name/knows/taxonomy#DocBook"/>
<dc:subject rdf:resource="http://norman.walsh.name/knows/taxonomy#TheWeb"/>
</info>

<para xml:id="p1"><link xlink:href="http://docbook.org/">DocBook.org</link>,
like <link xlink:href="http://nwalsh.com/">nwalsh.com</link> and a number
of other sites I put together, was originally created with the
Website customization layer of DocBook.</para>

<para xml:id="p2">Back in 1999 or 2000, when I did most of the design for the
Website document type, it seemed a pretty reasonable solution. Back
then, CSS support was limited at best and browsers weren't as
compatible as they are today, especially in the area of scripting
support. In order to get a menu system, I resorted to HTML tables
constructed staticly in each page<footnote>
      <para xml:id="p3">And because tables
aren't the most accessible sort of markup, I could also generate a
completely different set of pages with more accessible markup (though
I wasn't actually using that feature on docbook.org).</para>
</footnote></para>

<mediaobject role="flickr">
    <!--DocBook.org (Old Design)-->
  <imageobject xlink:href="http://www.flickr.com/photos/ndw/200251817/">
    <imagedata fileref="http://static.flickr.com/61/200251817_7c8af3929f.jpg"/>
  </imageobject>
</mediaobject>

<para xml:id="p4">In order to make maintaining the navigation system practical in
Website, it is described by a separate “layout” file, but the entire
layout is constructed in each page. So if the layout changes,
<emphasis>every</emphasis> page has to be rebuilt. (In point of fact,
that's not true, but any page that is related to the layout change
does, and I never figured out a good way to determine which subset of
pages was actually effected by the layout change.)</para>

<para xml:id="p5">For the DocBook.org site, this was particularly tedious because
each new release of any DocBook resource added a page to the site
and that required rebuilding the whole site. Also, the actual page for
each release was a pretty thin skin over a simple directory listing.</para>

<para xml:id="p6">So, inspired by the
<link xlink:href="http://developer.yahoo.com/yui/">Yahoo! UI Library</link>,
I went looking for something better. What I ended up with was a simple
set of
<link xlink:href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=navigationtabs">navigation tabs</link> that require nothing more than CSS.</para>

<mediaobject role="flickr">
    <!--DocBook.org (New Design)-->
  <imageobject xlink:href="http://www.flickr.com/photos/ndw/200251785/">
    <imagedata fileref="http://static.flickr.com/68/200251785_2433438764.jpg"/>
  </imageobject>
</mediaobject>

<para xml:id="p7">To ease the tedium of making a new release, I decided to turn
all the release pages into actual directory listings, dressed up with
a little header markup and some additional descriptions.</para>

<para xml:id="p8">I'm still using a separate file to establish the menus, so that
they can be changed without editing every page. In fact, the resulting
menus are inserted into each page with a server-side include so I can
actually change the menus without editing <emphasis>any</emphasis>
pages. The markup for the pages, by the way, is no longer Website,
they're straight DocBook V5.0 <tag>article</tag>s.</para>

<para xml:id="p9">I think the design is an improvement. What do you think?</para>

<para xml:id="p10">Speaking of website design, <emphasis>this</emphasis> site got a
bit of a facelift a few weeks ago. I think it's improved as well. And
I have every intention of improving the design of <link xlink:href="http://nwalsh.com/">nwalsh.com</link> real soon now. I haven't
decided if I want to simply give the site a face lift or if I want to
convert the whole thing to use my blog software. Stay tuned.</para>

</essay>

