title: Creating the GUSE pages author: mswe613-guse@python.org split_content: true

Cooking the GUSE (pages)

The Guide to Usability for Software Engineering is a collection of pages created by the University of Maryland, Masters of Software Engineering, Fall 98, Usability Engineering class (MSWE 613) taught by Professor Ben Schneiderman. The collection is intended for software engineers and usability engineering practitioners to find relevant resources on the Web.

The GUSE pages are a one time only online publication of sorts. Content has been provided in each of the subsections. The top page provides a short summary of each subsection. Authors for the subsection pages were given a guideline template to act as a style guide for their individual pages. The navigational controls are added later (See below). While nothing is actually enforced, the editorial board made recommendations when it appeared as though their were gross violations of the common motif for the collection.

Individual contributors were given complete freedom to write in whatever style (third person, first person, etc.) they liked, about any subject they deemed relevant, and with as many words as they deemed necessary. Discussions in class led to informal agreement about style issues such as having the text of the URL explicitly visible in each link. To this end, the editorial board largely took a hands off approach. Dr. Amy Friedlander, editor of DLib Magazine sums up this attitude succinctly: Just tell the story.

Goals Top

The goals for the GUSE Web page collection independent of the content were:

The collection should have a common navigational motif
The pages should be viewable without horizontal scrolling on computers with small screen resolution (e.g. 600x800)
The pages should have a small footprint. The utility of graphics should be carefully weighed against page load-time over a slow connection (e.g. 28.8 PPP Modem connection).
The pages should be easy to maintain with a high degree of automation. Their should be a clear separation of content and navigational motif as to facilitate easy experimentation with alternate motifs.

I believe we were able to satisfy these goals using freeware tools.

Limitations Top

At this point I should also mention some limitations in the current navigational motif of this collection:

The pages are designed to expect reasonable HTML table support and display from the reading browser. Certain versions of Netscape (pre Navigator 4.0) are known to display tables in an unexpected way. This sometimes results in a page being rendered with an row extending beyond the (natural) row boundary or an image that appears truncated. This minor glitch does not take away the ability to read content. It only effects the look of the page, If it really bothers you... What can I say? Browsers are free (or almost so in some cases) upgrade!
If it's not obvious already, I'm not a graphic artist! Several people have commented on the fact that the navigation bar seems a bit loud with ten different color bands right in a row (the navigation bar has each color motif's lightshade as a background). My limited abilities allow me to believe that this effect could perhaps be minimized by ensuring that the lightshade is a soft pastel-like color... but I'm not sure. I would gladly accept the RGB values for eleven new color motifs, so long as they each were distinguishable from one another and they each consisted of a lightshade, mediumshade, and darkshade that work well together.

Are there more? Of course there are. We'd like to hear about them!

Ht2html Top

The GUSE pages were created by an automated script called ht2html.py The script is written in an object-oriented scripting language known as Python. Python is often compared to Java or Perl and is freely available.

Ht2html.py is a script for creating and managing a collection of web pages with a similar navigational motif. Here's the source for the script. You are free to use the script for your own web pages but the authors will not assume responsibility for any unexpected results. There is a more production oriented version of ht2html in the most recent version of Python. Go to the Python web sight for more information.

Ht2html.py takes as input a template HTML file which is a file that creates a standard set of styles for section headers, colors, fonts, and graphics. The example template used for the GUSE pages was created by Jim Zahniser, (jzahnise@nova.umuc.edu).

Each page has a background image which has the GUSE lettering in a large font. This was contributed by G. V. Suresh, (Gsuresh@ifc.org). Including this background image was questionable in relation to the third goal. Since it is only one 13K file shared by all the HTML files, it seemed reasonable.

Content providers edit the template file. In the case of GUSE, each of the ten subgroups (Metrics, University, Formal Methods, etc) edited the template to contain their groups specific content.

Before running ht2html.py on files derived from the template, several small things are done to the template to prepare it for the script.

I add a series of meta-data lines to the template. These are in the form of RFC822 headers. These declarative headers are hooks into the contents of the final HTML and allow you to specify things like the title, author, pagecolor, and corner banner for the page.
Remove the <HTML></HTML>, <HEAD></HEAD>, <BODY></BODY> tags from the template. These are added by ht2html.py. (Note: a template written with ht2html.py in mind can simply not include these tags)
Rename the file to have a .ht rather than .html suffix.

Here's the example .ht file for this page. As you can see, I've specified title and author as meta-data. Here's the .ht file for the top level page. It also contains a pagecolor meta-data directive. Valid pagecolors are: blue, red, pink, orange, purple, bluepurple, sienna, olive, green, black, and brown. Each of these color motifs has a darkshade, mediumshade, and lightshade, which are used in each page to provide heading, subheading, navigation bar background colors.

The ht2html script also reads a file called links.h. This file contains the links (with <LI> tags) of all the pages that are part of the main collection (the ones that appear on the left side of each page). The script peeks at each corresponding .ht file in the list of links to see if the file has the pagecolor meta-data tag set. If so, it shades the link in the navigation bar to match the lightshade color of the specified pagecolor motif.

Once you run the script on each .ht file in your collection, a corresponding .html file is produced.

Finally, for convenience, I maintain a UNIX Makefile which includes a make.rules file (for common rules), that maintains all of the appropriate arguments to ht2html.py as well as manages what files have been modified and need recompilation. While this might seem like overkill, the script was run hundreds of times during the process of refining the GUSE page content and style. You can get very use to just typing make install , and having all the right things happen...

Enjoy!

Credits Top

This page was created by:

Roger E. Masse, (rmasse@cnri.reston.va.us)

This page was last modified on 10/17/98