[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-usability
Subject:    Updated usability report XSLT stylesheet
From:       Gordon Tyler <gordon () doxxx ! net>
Date:       2003-02-12 0:06:16
[Download RAW message or body]

Hi all,

Here's my updated and tweaked XSLT stylesheet with accompanying bits for 
producing a nice XHTML document (valid XHTML 1.0 Strict) from an XML 
usability report.

Major changes:
 * Added xsl:output instruction to produce a valid XHTML document.
 * Handles solution rationale.
 * Handles bug references.
 * No longer displays section title when there is no such section (e.g. 
reproduction).
 * Assigned CSS class names to various important bits.

I also changed the DTD slightly. I renamed the 'bug_reference_no' attribute to 
'bugreference' to be more XML-like.

The XHTML document produced uses a CSS stylesheet of which I've included a 
skeleton example. The XSLT stylesheet could be changed to reference the CSS 
stylesheet from the usability.kde.org website.

I've also included my Konqueror usability report in XML and XHTML format. The 
XHTML was produced using xsltproc from libxml.

Ciao,
Gordon

["kde-usability-report.xslt" (text/x-xslt)]

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" indent="yes" media-type="application/xhtml+xml" \
encoding="UTF-8"  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" 
      doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

  <xsl:template match="/report">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <link rel="stylesheet" href="kde-usability-report.css" type="text/css"/>
        <title>KDE Usability Report - <xsl:value-of \
select="application/@name"/><xsl:text> </xsl:text><xsl:value-of \
select="application/@version"/></title>  </head>
      <body>
        <h1>KDE Usability Report - <xsl:apply-templates select="application"/></h1>
        <p class="report_header">Author: <xsl:call-template name="authors"/><br/>
          OS: <xsl:apply-templates select="os"/><br/>
          Interface: <xsl:apply-templates select="interface"/></p>
        <xsl:apply-templates select="comments"/>
        <xsl:apply-templates select="issue"/>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template name="authors">
    <xsl:for-each select="author">
      <a class="author">
        <xsl:attribute name="href">
          <xsl:text>mailto:</xsl:text>
          <xsl:value-of select="@email"/>
        </xsl:attribute>
        <xsl:value-of select="@name"/>
      </a>
      <xsl:if test="not(position()=last())">, </xsl:if>
    </xsl:for-each>
  </xsl:template>

  <xsl:template match="application|os|interface">
    <span>
      <xsl:attribute name="class">
        <xsl:value-of select="name()"/>
      </xsl:attribute>
      <xsl:value-of select="@name"/><xsl:text> </xsl:text><xsl:value-of \
select="@version"/>  </span>
  </xsl:template>

  <xsl:template match="report/comments">
    <h2>General Comments</h2>
    <p class="report_comments"><xsl:value-of select="."/></p>
  </xsl:template>

  <xsl:template match="issue">
    <hr/>
    <h2>Issue</h2>
    <xsl:if test="count(@bugreference) > 0">
      <p class="bugreference"><xsl:text>Bug Reference: </xsl:text>
        <a>
          <xsl:attribute name="href">
            <xsl:text>http://bugs.kde.org/show_bug.cgi?id=</xsl:text>
            <xsl:value-of select="@bugreference"/>
          </xsl:attribute>
          <xsl:value-of select="@bugreference"/>
        </a>
      </p>
    </xsl:if>
    <xsl:apply-templates select="description"/>
    <xsl:apply-templates select="reproduction"/>
    <xsl:apply-templates select="solution"/>
    <xsl:apply-templates select="comments"/>
  </xsl:template>
  
  <xsl:template match="issue/description">
    <p class="description"><xsl:value-of select="."/></p>
  </xsl:template>

  <xsl:template match="issue/reproduction">
    <h3>Reproduction</h3>
    <ol class="reproduction_list">
      <xsl:for-each select="step">
        <li class="reproduction_step"><xsl:value-of select="."/></li>
      </xsl:for-each>
    </ol>
  </xsl:template>

  <xsl:template match="issue/solution">
    <h3>Solution</h3>
    <p class="solution"><xsl:value-of select="text()"/></p>
    <xsl:apply-templates select="rationale"/>
  </xsl:template>
  
  <xsl:template match="issue/solution/rationale">
    <p><span style="font-weight: bold">Rationale: </span><xsl:value-of \
select="."/></p>  </xsl:template>

  <xsl:template match="issue/comments">
    <h3>Comments</h3>
    <p class="issue_comments"><xsl:value-of select="."/></p>
  </xsl:template>

</xsl:stylesheet> 


["kde_usability_report.dtd" (text/xml)]

<?xml version="1.0" ?>
<!ELEMENT report (author,application,os,interface,issue+)>
<!ATTLIST report date CDATA #IMPLIED>
<!ELEMENT author EMPTY>
<!ATTLIST author name CDATA #REQUIRED>
<!ATTLIST author email CDATA #REQUIRED>
<!ELEMENT application EMPTY>
<!ATTLIST application name CDATA #REQUIRED>
<!ATTLIST application version CDATA #REQUIRED>
<!ELEMENT os EMPTY>
<!ATTLIST os name CDATA #REQUIRED>
<!ATTLIST os version CDATA #IMPLIED>
<!ELEMENT interface EMPTY>
<!ATTLIST interface name CDATA #FIXED "KDE">
<!ATTLIST interface version CDATA #IMPLIED>

<!ELEMENT issue (description, reproduction?, solution+)>
<!ATTLIST issue	severity (low|medium|high) "medium">
<!ATTLIST issue	bugreference CDATA #IMPLIED>

<!ELEMENT description (#PCDATA)>
<!ELEMENT reproduction (step+)>
<!ELEMENT step (#PCDATA)>
<!ELEMENT solution (#PCDATA|rationale)*>
<!ELEMENT rationale (#PCDATA)>

["kde-usability-report.css" (text/css)]

h2, h3 {
        margin-bottom: .1em;
}

p {
        margin-top: .1em;
}

.report_header {
}

.author {
}

.application {
}

.os {
}

.interface {
}

.report_comments {
}

.bugreference {
        font-size: 90%;
        font-style: italic;
}

.description {
}

.reproduction_list {
}

.reproduction_step {
}

.solution {
}

.issue_comments {
}

["konqueror-usability.xml" (text/xml)]

<?xml version="1.0"?>
<!DOCTYPE report SYSTEM "http://usability.kde.org/DTD/kde_usability_report.dtd">
<report date="2003-02-08">
  <author name="Gordon Tyler" email="gordon@doxxx.net"/>
  <application name="Konqueror" version="3.1"/>
  <os name="Linux" version=""/>
  <interface name="KDE" version="3.1"/>
  
  <issue severity="medium">
    <description>Navigation panel: Tabs like Network and Services can be 
      removed by the user but not added</description>
    <solution>Make these tabs available for adding in the Add New 
      menu/dialog</solution>
  </issue>

  <issue severity="high">
    <description>Navigation Panel: Home tab is not selected when the user's home
      directory is opened either from the Desktop or from the Home icon on the
      panel</description>
    <reproduction>
      <step>Open the Home directory by clicking on the Home icon on the 
        panel</step>
      <step>Select a navigation panel other than Home, e.g. Bookmarks</step>
      <step>Close the window</step>
      <step>Re-open the Home directory by clicking on the Home icon on the 
        panel</step>
      <step>Observe that the Bookmarks are still being shown in the navigation
        panel</step>
    </reproduction>
    <solution>Always show the Home navigation panel when opening the Home
      directory in a new Konqueror window</solution>
  </issue>

  <issue severity="medium">
    <description>Navigation Panel: Order of the tabs are illogical</description>
    <solution>The default ordering of the tabs should be: Home, Root, Network, 
      Bookmarks, History, Sidebar Media Player, Services</solution>
  </issue>

  <issue severity="medium">
    <description>Navigation Panel: Tabs cannot be re-ordered</description>
    <solution>Multiple solutions: 1, Drag a tab to a new position; 
      2, "Change Order" menu item on context menu displays a dialog box, 
      with a list of the items and buttons to move them up/down</solution>
  </issue>
  
  <issue severity="high">
    <description>Navigation Panel: New tabs are added above the History 
    tab</description>
    <solution>New tabs should be added at the end of the list</solution>
  </issue>
  
  <issue severity="high">
    <description>Navigation Panel: Confusing difference between Network tab 
      and LAN Browser in Services tab</description>
    <solution>Combine Network tab and LAN Browser service into single Network 
      tab, renaming LAN Browser to Local Network</solution>
  </issue>
  
  <issue severity="low">
    <description>Navigation Panel: Separate menu items for changing icon and 
      URL in tab context menu</description>
    <solution>Properties menu item which shows Properties dialog with icon 
      button, URL field, etc.</solution>
  </issue>
  
  <issue severity="low">
    <description>Navigation Panel: Select Type dialog for adding new Directory 
      tab is far wider than necessary</description>
    <solution>Shrink dialog to half it's current size</solution>
  </issue>
  
  <issue severity="low">
    <description>Navigation Panel: Why is adding a Sidebar Media Player 
      different from adding a Directory (Bookmarks, History)?</description>
    <solution>Single menu item, "Add New Tab", which displays a dialog which
      allows the user to choose from Directory, History, Bookmarks, Sidebar 
      Media Player, etc. using a layout that can handle additions to that 
      list</solution>
  </issue>

  <issue severity="medium">
    <description>When I close a tab, the tab to the left is selected 
      afterwards. I expect the tab to the right to be selected.</description>
    <reproduction>
      <step>Open multiple tabs on different pages, one of which has multiple 
        links to other pages.</step>
      <step>Middle-click on a few links on that page to open tabs in the 
        background.</step>
      <step>Go to the first tab opened in the previous step and then close 
        it.</step>
    </reproduction>
    <solution> When a tab is closed, the next tab to the right should be 
      selected. If there are no tabs to the right, then the next tab to the 
      left should be selected.</solution>
  </issue>
  
  <issue severity="high">
    <description>When I middle-click on a link to a site whose DNS doesn't resolve 
      immediately, there is no indication that Konqueror is doing 
      anything.</description>
    <solution>I expect the tab to appear immediately and indicate that it is 
      resolving DNS and then loading the page.
      <rationale>Immediate feedback is necessary to provide the user with the 
        feeling that the system is responsive, even if there are actual delays 
        in a particular process.</rationale>
    </solution>
  </issue>
</report>

["konqueror-usability.html" (text/html)]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" \
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html \
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="kde-usability-report.css" type="text/css" />
    <title>KDE Usability Report - Konqueror 3.1</title>
  </head>
  <body>
    <h1>KDE Usability Report - <span class="application">Konqueror 3.1</span></h1>
    <p class="report_header">Author: <a class="author" \
href="mailto:gordon@doxxx.net">Gordon Tyler</a><br />  OS: <span class="os">Linux \
</span><br />  Interface: <span class="interface">KDE 3.1</span></p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation panel: Tabs like Network and Services can be 
      removed by the user but not added</p>
    <h3>Solution</h3>
    <p class="solution">Make these tabs available for adding in the Add New 
      menu/dialog</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Home tab is not selected when the user's \
                home
      directory is opened either from the Desktop or from the Home icon on the
      panel</p>
    <h3>Reproduction</h3>
    <ol class="reproduction_list">
      <li class="reproduction_step">Open the Home directory by clicking on the Home \
icon on the   panel</li>
      <li class="reproduction_step">Select a navigation panel other than Home, e.g. \
Bookmarks</li>  <li class="reproduction_step">Close the window</li>
      <li class="reproduction_step">Re-open the Home directory by clicking on the \
Home icon on the   panel</li>
      <li class="reproduction_step">Observe that the Bookmarks are still being shown \
in the navigation  panel</li>
    </ol>
    <h3>Solution</h3>
    <p class="solution">Always show the Home navigation panel when opening the Home
      directory in a new Konqueror window</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Order of the tabs are illogical</p>
    <h3>Solution</h3>
    <p class="solution">The default ordering of the tabs should be: Home, Root, \
Network,   Bookmarks, History, Sidebar Media Player, Services</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Tabs cannot be re-ordered</p>
    <h3>Solution</h3>
    <p class="solution">Multiple solutions: 1, Drag a tab to a new position; 
      2, &quot;Change Order&quot; menu item on context menu displays a dialog box, 
      with a list of the items and buttons to move them up/down</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: New tabs are added above the History 
    tab</p>
    <h3>Solution</h3>
    <p class="solution">New tabs should be added at the end of the list</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Confusing difference between Network tab \
  and LAN Browser in Services tab</p>
    <h3>Solution</h3>
    <p class="solution">Combine Network tab and LAN Browser service into single \
Network   tab, renaming LAN Browser to Local Network</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Separate menu items for changing icon \
and   URL in tab context menu</p>
    <h3>Solution</h3>
    <p class="solution">Properties menu item which shows Properties dialog with icon 
      button, URL field, etc.</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Select Type dialog for adding new \
Directory   tab is far wider than necessary</p>
    <h3>Solution</h3>
    <p class="solution">Shrink dialog to half it's current size</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">Navigation Panel: Why is adding a Sidebar Media Player 
      different from adding a Directory (Bookmarks, History)?</p>
    <h3>Solution</h3>
    <p class="solution">Single menu item, &quot;Add New Tab&quot;, which displays a \
                dialog which
      allows the user to choose from Directory, History, Bookmarks, Sidebar 
      Media Player, etc. using a layout that can handle additions to that 
      list</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">When I close a tab, the tab to the left is selected 
      afterwards. I expect the tab to the right to be selected.</p>
    <h3>Reproduction</h3>
    <ol class="reproduction_list">
      <li class="reproduction_step">Open multiple tabs on different pages, one of \
which has multiple   links to other pages.</li>
      <li class="reproduction_step">Middle-click on a few links on that page to open \
tabs in the   background.</li>
      <li class="reproduction_step">Go to the first tab opened in the previous step \
and then close   it.</li>
    </ol>
    <h3>Solution</h3>
    <p class="solution"> When a tab is closed, the next tab to the right should be 
      selected. If there are no tabs to the right, then the next tab to the 
      left should be selected.</p>
    <hr />
    <h2>Issue</h2>
    <p class="description">When I middle-click on a link to a site whose DNS doesn't \
resolve   immediately, there is no indication that Konqueror is doing 
      anything.</p>
    <h3>Solution</h3>
    <p class="solution">I expect the tab to appear immediately and indicate that it \
is   resolving DNS and then loading the page.
      </p>
    <p><span style="font-weight: bold">Rationale: </span>Immediate feedback is \
                necessary to provide the user with the 
        feeling that the system is responsive, even if there are actual delays 
        in a particular process.</p>
  </body>
</html>


_______________________________________________
kde-usability mailing list
kde-usability@mail.kde.org
http://mail.kde.org/mailman/listinfo/kde-usability

[prev in list] [next in list] [prev in thread] [next in thread] 

Configure | About | News | Add a list | Sponsored by KoreLogic