<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Project #2

Due Dates:

Project Introduction: Tuesday, October 20, 2009
Thumbnails Due: Week of October 29, 2009 - Beginning of Lab Period.
Color Comp & Audience Analysis Due: Week of November 5, 2009 -Beginning of Lab Period.
Site Map Due: Week of November 12, 2009 - Beginning of Lab Period.
Project Due Date: Week of December 10, 2009 - Beginning of Lab Period.

Examples & Grading:

Project 2 Examples: Browse these examples
Project 2 Grade Sheet: View the grading rubric

Deliverables:

  1. Itoya folder:
    • All of the following items are to be submitted inside of the folder, in the order listed below.
    • NOTE: Do not place multiple pages into a single document protector such that they would have to be taken out to be read. It is OK to have two pages back-to-back in the same document protector such that both pages can be read without taking them out.
    • Printed label in folder spine.
      • Full Name
      • CIT 141 or CGT 141
      • Section number according to the table on the main page for this course.
  2. In the first document protector(s):
  3. In the next document protector(s) following the Table of Contents:
  4. In the next document protector(s) following the Audience Analysis:
    • Thumbnails (minimum of 6 interations of the site design... more is better).
  5. In the next document protector(s) following the Thumbnails:
    • Color Comp (Not a splash page. Depending on the site, more than one may be required).
  6. In the next document protector(s) following the Color Comp:
    • Site Map (flowchart of site files and directory structure)
  7. On the inside of the back cover of Itoya folder:
    • Self-adhesive CD holder
    • CD-R containing the entire contents of your web site to be graded

Background

This project is designed to combine and assimilate all of the things that you have done over the semester. Thus, it will be a site that contains all of the major features/capabilities of XHTML plus added enhancements via CSS and Javascript. The content for this final web site can be anything you want, a personal site, a corporate site, whatever (within reason, and abiding by the rules set for by Purdue University and the course syllabus). This site cannot be the same as project 1. However the site must include the following items*:

Required Features

  • The finished site must be uploaded to your Purdue web account (or other approved location).
  • There should be a well-designed method of navigation.
  • The site should be aesthetically pleasing.
    • Should contain visually pleasing graphics, appropriately used
    • Usability should be taken into account - the user should be able to easily navigate the site to find what they are looking for.
  • You must read through the Web Design & Usability Basics module
  • The entire site must include at least 10 content pages.
    • A content page is defined as: a page that has enough "content" to fill the entire browser window when the browser window is opened to an appropriate size (at least 800 pixels wide by 600 pixels tall).
    • A page that only has a large image on it does not count as a content page.
    • A content page can contain all text. It can also be a page with an image and some text surrounding it... or any combination thereof.
  • The site must include a identifiable starting "home" page.
    • This starting page should be called "index.html"
    • This page should contain the main navigation and the main look-and-feel of the website
    • This page should not be simply an image with a couple links.
  • Rather than using XHTML to define placement and formatting, external CSS should be used to apply specific styles across all the pages in the site.
    • Realize that the styles should be established prior to creating pages (rather than defining your styles as you go).
    • Internal and Inline styles are also welcome in your CSS, however try to use external wherever possible.
    • However, the site should have at least one page that is table formatted.
  • The site should include a sufficient number of graphics that are appropriately designed.
    • Of those graphics, the site must contain at least two PNG, two JPG, and two GIF (not animated) graphics (two of each, appropriately used).
  • Tables should be used, where necessary, to assist CSS in page formatting. Tables should not be your primary method of formatting / placement.
  • There must be at least one form in the site -- not the one from the prior project, nor the one you created during the exercises.
    • The form must contain at least 10 form elements
    • The form should submit either to an email address or to another page.
  • Javascript should be used to enhance the site.
    • Use Javascript to validate form information:
      • Each form field should have some Javascript validation associated with it.
      • Check if the email form field has an @ sign, correct ending, etc.
      • Check to see if form fields are empty
      • etc., etc.
    • Use Javascript enhancements, such as placing the link name in the status bar, rollovers, etc.
    • For more examples of enhancements, see W3 Schools, or Astalavista., or dhtmlcentral
  • The site should include examples of intermediate to advanced Javascripting, such as functions, detecting plugins etc.
    • There must be at least 1 JavaScript function that is called using an event handler
      • An idea for this is form validation... mentioned above
  • The site may include other media assets such as sound, Shockwave, Flash, PHP, etc. components if you so wish to include them. However, the percentage of these elements should not be greater than 10%. Thus a multimedia introduction to your site with Flash or other media is fine, but designing more than 10 percent of the site around any technology other than XHTML, raster graphics, CSS or Javascript is not permitted.

    *Note that these specifications are the minimum expected. Simply completing the minimum requirements for this project will not yield an A for this project. "A" projects will demonstrate things that are Above and Beyond these minimum requirements.

    *Note that editors can be used on this project. I recommend that you use Adobe Dreamweaver.

Above and Beyond

  • Additional Content Pages beyond 10 (1 point per additional page)
  • Additional scripting beyond the requirements (1 point per unique piece of scripting)
  • Exceptional use of CSS formatting (positioning, z-index, etc)
  • Other criteria can also count towards above and beyond, it depends on the creativity of the student and the nature of the project.