UNIVERSITY of VIRGINIA
Computer Science
Research  Teaching  People  Community   

Search
Directory
Contact Us
 
Undergrads • Grad Students • Faculty • Staff • Alumni • Locator • Phones

Webteam Policy and Practices

Makefile philosophy/conventions:

An effective user interface can dramatically increase efficiency in navigation, and can boost user satisfaction with the product. It is, therefore, essential to be consistent in your design and presentation. Fortunately, it is fairly easy to replicate your most often used HTML code by using macros.

To create a homogenous set of pages for the CS department, a number of macros have been developed. These macros save HTML authors the burden of having to manually retype our most commonly used constructs. Examples of commonly used code include the clickable image map that appears at the top of every page, the set of buttons at the bottom of every page, the credit line at the bottom of every page, etc. Using the C language pre-processor (cpp), we are able to insert and expand these macros into any file by simply referring to a short macro name.

The basic chain of events is such:

  1. The macros are defined.
  2. Raw HTML files are created, with calls to macros defined in previous step.
  3. UNIX command make is invoked to go from "raw" HTML format to final format, with macros expanded.
* Macro Definitions:

All macros are defined under /server/htdocs/include.
"macro_header.html" creates the clickable image map that appears at the top of every page.
"index_buttons.html" creates the small set of clickable buttons that appears only on the top-level CS home page.
".html" creates the large set of clickable buttons that appears at the bottom of every subpage.
"macros" contains various other macro definitions--- e.g. table macro for faculty page, large letter macro, news page macro, etc

Macro definitions must begin with a #define declaraction. A macro can accept any number of arguments, in the fashion of C function calls. Arguments must be separated by commas.


A sample macro definition:
#define macro_link(name,url)
<a href=url>name</a>

This macro accepts two arguments: name and url. A call to this macro would look like:
macro_link(John Smith,http://www.johnsmith.com/>

The output of the macro will then be:
<a href=http://www.johnsmith.com/>John Smith</a>

Note: If a macro definition does not fit on one line, each wrapped line must be broken by a backslash (\) to indicate continuity to cpp.

An example:

#define macro_header(bar_picture)
<body bgcolor="#FFFFFF"> \
<img src=http://www.cs.virginia.edu/newimages/bar_picture \
width=560 height=28 alt=" ">

* Raw File Editing:

All .raw files processed by cpp must have this as their first line:

#include "macros"

You may then begin writing conventional HTML code:

<html>
<head>
<title>Test Page</title>
<head>

Immediately after the closing </head> tag, insert the following line:

macro_header(bar_XXXX.GIF)

where bar_XXXX.GIF is the name of the custom gradient bar that appears beneath the top-level image map on every page (*See below). Continue writing HTML code, until you are ready to end the document with the usual </body> </html> tags. Immediately before these two statements, include the following lines:
macro_buttons
macro_footer

The first statement inserts the large button set, and the second statement inserts the credit line.


A full example:

#include "macros"
<html>
<head> <title>Test Page</title>
</head>
macro_header(bar_test.GIF)

<center><h1>Test Page</h1></center>
This is a test page. etc. etc.
<p>

macro_buttons
macro_footer

</body>
</html>

*Note from above: These gradient bars are created using Adobe Photoshop, using a template image. For details, see graphics, below.

* Make How-To

See the Makefiles tutorial.

* Graphics

Whenever a new page is written, two images must also be created. One of these images is the button that goes at the bottom of all pages (in macro_buttons.html) and the other is the gradient title bar at the top of each page.

For the title bar, use the template file Bartempl.PSD in the ~Webteam/extra/PCFiles directory. On the template are two vertical lines. These lines are guides for where the text should be roughly located. They exist on a separate layer from the background. To add the text, use the Times New Roman font, bold and anti-aliased, at 23 points. The color is RGB 0,0,255. The spacing will need to be adjusted so it roughly fits between the two vertical lines. Then deselect the layer with the vertical lines by clicking on the eye icon next to the layer that reads 'bar.' Then save the image as bar_pagename.JPG and upload it to the server/htdocs/newimages/ directory.

To add a button to the list of buttons at the bottom of each page, open the b_template.psd file in the directories mentioned above. Select the image layer that contains the text, and erase the word Template. Using the text tool, set the font to Poppl-Laudatio Regular, 14 point, bold, anti-aliased, and enter the name of the page you have created. Then go to the ~Webteam/server/htdocs/include/ directory and open the file ".html". This file is just a list of all the buttons, one entry per line, in alphabetical order. Scroll down until you find the position where your button should go (alphabetically), and add a link to that page, following the format of the other links in that file.

Once the macro is updated, return to the htdocs directory and type 'make'. This will remake all the html files, replacing the old button list with the new one. Once the html files have been updated, edit the /directory/index.raw file to show the new page you have added.

Finally, whenever new buttons are created, the directory page needs to be updated appropriately.

* Videos

Whenever a lecture or talk is recorded, the 8mm video should be converted to a standard VHS tape and the tape should be stored with Kim Gregg in her office. The video page should be updated to include the contents of the newly recorded video.


On Efficiency

Possibly the single most important question you should ask yourself when designing a page is: "Would I want to browse this page over a modem connection?" Too often, HTML authors ignore the vast audience of "T-1 Challenged" users who will potentially visit their page, and go overboard with graphics and special effects. Always try to keep transfer times to a minimum. You will find your users very grateful.

Fortunately, there are ways to achieve respectable download times, while still maintaining a visually appealing interface. Here are some tips:


On Style

Webteam Checklist

An eclectic collection of tips, tricks & hints from Paco

The Yale Web Style Guide

The Listing of 3,000 Universities



UVa CS Department of Computer Science
School of Engineering, University of Virginia
151 Engineer's Way, P.O. Box 400740
Charlottesville, Virginia 22904-4740

(434) 982-2200  Fax: (434) 982-2214
Web Comments: webteam@cs.virginia.edu
Admissions Inquiries: inquiry@cs.virginia.edu
Site directory, Other addresses
Server statistics
© Created by the CS Web Team