proj01, CISC103, Fall 2005

Introduction

Up until now, your assignments have been mostly "cookbook" assignments from the Essentials for Design XHTML and JavaScript books... follow the instructions and see the results. Now you get a chance to apply some of what you've learned.

What you'll be doing

The web site for the Interactive Media Minor (http://interactivemedia.udel.edu) is currently in a "Wireframe" format. Your job is to produce a more interesting looking "finished design", using XHTML and CSS.

The finished design should have five aspects that make it an improvement over the current site. The first one involves visual creativity, while the other five are technical goals:

1. It should look more visually interesting, in a way that supports the goals of the site
2. It should be written in valid XHTML, and should pass validation when validated through http://validator.w3.org
3. The CSS should be written in valid CSS, and the finished stylesheet should pass validation through http://jigsaw.w3.org/css-validator/
4. The XHTML and CSS should be clean, and should be capable of being understood by someone reading the code.
5. There should be no CSS styles defined in the stylesheet that are not actually used in the document.
6. Use external JavaScript instead of embedded scripts.

In addition, the site should preserve the content of the original.

What is a wireframe?

A wireframe is a site that is used as a prototype when a designer works with a customer. It is typically a very "grey" looking site that:

• has all the content of the finished site
• shows the proper relationships among the pages and content of finished site
• is used as a starting point for a finished design.

The finished site should preserve the "structure" of the wireframe, but the "look" can change dramatically. For example:

• If the wireframe has 4 pages, typically the finished site will have the same four pages
• If, on a particular page of the wireframe, one paragraph is clearly "more important" than another paragraph, that relationship will be preserved in the finished site.
• The content will be grouped in the same basic pages as the finished site, and have the same navigation.

A designer will often have a customer "sign off" on a wireframe before moving on to design the finished site.

In moving from the wireframe to a finished site, what can change, and what should be preserved? Here are some guidelines:

• Colors and fonts may change, but the relationships should be preserved (e.g. if a font for X is larger than the font Y in the wireframe to indicate that X is more important than Y, this relationship must be preserved.)
• The general sequence of information is typically preserved
• Navigation menus may move, e.g. from the top, to the side.

Is it ever permissable to break the wireframe? Yes, provided that the spirit and intent of the wireframe is preserved; for example if a page becomes too cluttered, some of the less important information on the page could get "factored out" to separate page, provided the overall structure and intent of the page is preserved. (In lecture, I'll present a specific example of this suggested by Hendrik-Jan Franke, who teaches in Visual Communications, and introduced me to the wireframe methodology.)

Required Concepts

Assignment Description

Instructions

Stage 1: Copying the files

The files for the site http://interactivemedia.udel.edu are in the directory proj01, which is reachable at the same address where you found this project description:

http://copland.udel.edu/~pconrad/cisc103/proj

I deliberately renamed the file index.html to theIndex.html, so that when you click on the directory, you'd see the individual files listed rather than the actual site. After you download the files, you'll want to change that name back to index.html.

(Incidentally, it is considered bad form by some to include the text of a URL in a document, rather than just linking some text to that URL like this. I violate that rule all the time because some students are in the habit of printing out my assignments; a link on a printed page doesn't do anyone any good.)

You'll want to create a directory called proj01 under your directory on the H drive, and copy each of these files into this directory. Note that there are four .html files, one .css file, and one directory that has dot.gif located inside it. You need to preserve this structure exactly.

Stage 2: Understanding the existing stylesheet.

In stage two, you'll want to first look over the existing stylesheet to understand how it works.

You should also remove any part of the file that are not actually being used. For example,

• the stylesheet has styles for ul, ol and li elements, but no such elements exist in any of the .html files on the site. On the other hand, there are definitions for h1 and h4, which are used. So you can't just assume; you need to go through and look.
• the stylesheet has several "classes" that are not used, including "paragraphtext". On the other hand, some classes are being used, including the "nospacebefore" class which is used on the page degree_requirements.html. So, be careful about what you keep and what you delete.

The existing stylesheet validates clean through the validator service. Be sure that it still validates after you are finished!

Stage 3: Convert the existing HTML files to XHTML and make sure they validate clean.

Start by validating the current HTML file. You'll find that there are 19 errors reported, but in some sense there are only two. The first error is that the BODY element is in the wrong place. Can you find the root cause of this error?

The other 18 are related to the fact that there is no ALT attribute on the IMG elements. Page 92 of Deitel/Deitel/Goldberg discusses why ALT elements are required, and what is needed to fix this problem.

You are then ready to start converting from HTML into XHTML. The following article may be helpful:

http://www22.brinkster.com/beeandnee/techzone/articles/htmltoxhtml.asp

Move JavaScript into external files.

@@@ continue from here... Ask Hendrik-Jan about the form... can we use it by changing the email addresses?