[EDIT 772 home] [Jeff Williamson home]

Requrements, technical and design specifications, and scoring guide - EDIT 772 final projects

*!* = Easy to miss

General requirements (5 points)
Beginning class
Intermediate class
There should be at least 5 web pages in the site.

These pages must be uploaded to the web and functional; pages on local disks or e-mail attachments are not acceptable.

There should be at least 5 web pages in the site

These pages must be uploaded to the web and functional; pages on local disks or e-mail attachments are not acceptable.

At least one page in the site should use tables for layout control. Most of the site should use tables for layout control.
The site should use at least three graphics.
Suggested: Make at least one graphic yourself.
The site should use at least three graphics.
Required: Use - in an interesting manner - at least one advanced graphic technique such as an image map or sliced graphic, a homemade background tile or transparent graphic, or an animation, low source switch or Javascript rollover.
Optional: The site should use logical subdirectories or folders.

Suggested: The site should use logical subdirectories or folders, e.g. the first example below is a better portfolio address than the second.

mason.gmu.edu/~jsmith/portfolio/
mason.gmu.edu/~jsmith/edit772/my_portfolio.html

 

The site should use at least one form The site should use at least one form
The site should have some sort of engagement. The technical nature of this is up to you. The site should be richly engaging. The technical nature of this is up to you.
  The site should use at least one Javascript, and one advanced technology such as
DHTML
HTML 4 CSS and/or layers
Streaming media
Flash or Shockwave
Java

If you would like to work on a site for an outside project, great!  Just be sure that you can meet the requirements above - students have had problems with this, e.g. "our designers won't let us use Javascript"  

If it helps - students have had better luck with their own projects or outside projects done from scratch than from outside projects they were expected to contribute pages to.

If you would like to continue a site in the advanced class that you began somewhere else, great again!  Just be sure - for me - that you can meet the requirements above in a way that I can see clearly.  For yourself, be sure you're pushing yourself to learn and implement new stuff.  

If it helps - students have had better luck with new projects than with old ones.

If you would like to use a host for your project outside of GMU, great a third time!  Just be sure to also use your GMU site to track your assignments, and, well, don't expect me to care much about the problems of your ISP.  Students have had problems with this, too, e.g. "I can't get any work done until they fix the network at work."  

If it helps - students have had better luck with GMU as a host than other providers.

Technical and design specifications, and scoring guide

3 points = excellent to very good; the site meets all specifications and works superbly

2 points = good to average, the site has more than some small problems and/or maybe doesn't work in some places

1 point = below average; the site has some clear specification problems

0 points = the site overlooks this area completely

*!* = Frequently missed

1. Navigation (____ points x  3 = _____)

*!* The site should have some sort of persistent and consistent navigation controls (e.g. links to home page and main pages, and same links in same order on every page.  Do not delete the link of the current page).  

*!* Graphics used as design enhancements on the tops of pages should be linked (i.e. if your chicken site has an egg on top of every page, make that egg clickable - link it to the home page).

Link labels and destination page headlines should be the same or similar, e.g. a link labeled "Clients" should lead to a page that has the word "Clients" as a headline and has the word "Clients" in the HTML <TITLE>.  

Navigation should be built from the user's perspective, not the client's. (e.g. for a company site, don't organize the web site by your company org chart, but think of how users see your company)

The number of required clicks to reach content should be minimal - say, 3 clicks.

Technical aspects of navigation

Portions of your site with multiple pages should go into folders. *!* The main page of the site, and the main pages within the subdirectories or folders, should be named "index.html" - lower case, four-letter extension (a requirement of GMU's web server)

At least the main page, and preferrably every page, should have a last modified date and a contact e-mail for the author.

File names (other than main pages) should be meaningful, e.g. "illegal_condiments.html" rather than "page2.html"

*!* Page titles should match page content, i.e. when you re-use a template page, be sure you change the  [TITLE]  element and not just the filename.

*!*  [TITLE] elements should bookmark well - "Portfolio"  is not as good as "John Smith's GMU GSE Portfolio"

2. Graphic design and layout (____ points x 3 = _____)

The site should have some sort of common and consistent theme or design. This includes repeated metaphors, colors, graphics, phrases, layout, and text styles, including headlines, subheadings, links and body text.

The ordering, size, weight, color, and placement of elements in navigation pages should vary enough to give users an indication of where to begin on a page.

Ideally, graphics should contribute to the purpose of the site. Minimally, they should not detract from the site.

Pages should use some sort of appealing color scheme, whether minimal or colorful.

Layouts should be uncluttered and readable

*!* Design should be compact; no more than 1/3 of the page area in a 640-resolution monitor should be inert, lacking content and/or links.

Text formatting

Blinking text (a design evil) or *!* underline text (which looks too much like links) should not be used.

Line lengths of text pages should not run the entire width of the browser window - this is too hard to read.

Text on content pages should print acceptably well.

Font faces should make appropriate accomodations for users whose machines do not have the primary specified font.

Intermediate class suggestion: Hand-link all your pages to an external style sheet. It doesn't have to do much, but once it's there, you can make global changes to your site.

3. Engagement (____ points x  3 = _____)

The site should, at least somewhere, use a (text) voice or graphics perspective other than third person.  

The user's feedback should be warmly encouraged throughout the site, in some places in ways richer than a mailto link (e.g. different forms, polls, whatever)

The user may be given things to do, such as a form to join or register or receive something, or a game, quiz, puzzle, or discussion area. The more value these things have, the better the site.

The user may be encouraged to customize the site in some way - addition or removal of site elements, or personalization, or even changes of graphic or colors

Intriguing text or graphic hooks may be appropriate to draw users through the site, e.g.

Ex. 1 - blah blah yadda yadda blah blah yadda yadda more
Ex. 2- blah blah yadda yadda blah blah yadda yadda read more
Ex. 3- blah blah yadda yadda blah blah yadda yadda and then
Ex. 4 - blah blah yadda yadda until the chef brought the soup to the table.

Explicit instructions may also be engaging

Users may want/need to be able to communicate with each other - you may want to provide them with an e-mail list, bulletin board, guest book, or chat room.

Help sections are often a good form of engagement - try adding feedback forms, a site index, search forms, FAQ's, and similar items to a help section.

4. Content (____ points x  3 = _____)

*!* The content should be needed or useful on the web (e.g.not stuff like bedtime stories in streaming audio, chatrooms for criminal planning, advice columns for the rich and famous, online treatment for net addiction - you get the idea)

*!* The content should have some sort of definsible place on the web (e.g. if you're going to make a Star Wars site, yours needs to do something that the other 10,000 Star Wars sites don't do)

The content should be appropriate in scope (e.g. a site on gum chewing should cover both gum wrappers and gum disposal)

*!* The content should accomplish real and preferrably measurable objectives. E.g.

Bad objective:

Better objectives:

In case it's not clear: the longer set of objectives does not suppose a different committment than the bad objective - they don't represent more work.  If you build "an Internet presence," things like accessibility and search engine indexing and the place of a web site in a company's work are going to be addressed, whether consciously or unconscriously.  The bad objective leaves these things to chance; the better objectives separates elements into mostly measurable, specific increments.

Also note that most of the goals are business goals, rather than technology goals.  

5. Compatibility and technical details (____ points x  3 = _____)

Beginning class -The site should not use frames
Advanced class -The site may use frames with justification

The site should look and function acceptably in Netscape versions 3 and 4 and one version of Internet Explorer (3, 4, or 5). Note that "acceptable" does not have to mean "the same"

The site should look acceptable on Mac and Windows platforms.

*!* The site should look acceptable in different screen resolutions (e.g. 640x480 and 800x600). Unplanned horizontal scrolling is not acceptable.

*!* ALT text should be supplied for all graphics.

Suggested, but not required: The site should be able to to used acceptably by users with a text-only browser. Again, "acceptable" does not have to mean "the same."

Most links should be relative, so that the site should run equally well on a floppy or the WWW.

File names must not contain spaces and should have consistent endings (e.g. all .html or all .htm, but not both).

Graphics should load at an appropriate speed over a dialup Internet connection. (i.e. be sure you test your site on the net, and not just on your local machine). Large graphics and slower loads can be justified if they are crucial to your objectives.

HTML tags for graphics should roughly match the graphics' true sizes, i.e. large graphics should not simply have their tags resized.

*!* When background images are used, background color must also be specified.

*!* Text to be displayed under images should always be preceded by <br clear="all">

Body and table colors should be taken from the 216 color palette. Please specify background, text, and other color values in hexadecimal format.

GIF and JPEG formats should be used appropriately

Transparent graphics should not have halos (in general this happens when you use anything other than transparent-on-white graphics).

Total possible = 50 points