Metropolitan State University

ICS 225 Web Design and Development

 

Project:                     Final Project

Concept:                  Accessibility, Browser Compatibility, Putting it

All Together

Due:                           Monday, December 4

Points:                      100 points

 

 

          Deadlines

                   Preliminary project plan due in 1 week  (Nov 13)

                   In-class design walkthrough (Nov 20)

                   In-class presentation (Dec 4)

                   Final report (Dec 4)

 

 

1. Goals:

§         Combine the use of XHTML, CSS and JavaScript

§         Provide a consistent navigation scheme

§         Provide a consistent and attractive look and feel

§         Add dynamic elements to your page

§         Validate your code

§         Program for accessibility

§         Program for both IE and Firefox

 

2. Overview: 

 

Design and build a web site of at least 8 pages on a topic of interest to you.  That is, you should have at least 8 separate new html pages in your project.  You may NOT adapt the idea you used for project #1, project #2 or project #3.  You must start fresh.  Bear in mind that you may wish to use your work in this class as part of a portfolio that you can show to a prospective employer.  Make your web site look as professional as possible.

 

Your work must be your own original and individual work.  That is, you cannot exactly copy an example from a book to meet any requirement.  Although you may adapt examples given in class, given in your textbook or found on the web, each piece should be tailored to fit your application.

 

3. Requirements:   Demonstrate the use of at least these features. 

 

  • Usability

-          The navigation must be consistent (the same on all pages) and easy to understand.

-          Your pages must be attractive and professional looking. 

-          Use good design principles, including a consistent look and feel across pages.

-          Make sure there are no typographical, spelling or grammar errors.

-          Choose colors and fonts according to good design principles (McCracken, chapters 9 & 10)

 

  • Rollover menus

-          Implement your navigation scheme as rollover/drop down or pop out menus.  If you used dropdowns for project #3, you must use pop outs for this project.  If you used pop outs for project #3, you must use dropdowns for this project.  That is, you must provide a new form of navigation here.

 

  • Tables

-          Display a multi-column table of data

-          Allow the user to sort the contents of the table by choosing a variety of columns (see chapter 13)

 

  • Accessibility

-          Design your pages for accessibility

-          Use Bobby to validate at least one of your pages

 

  • Browsers

-          Your web pages must look attractive and professional in both Firefox and IE browsers.

-          On one page, display the name and version of the browser you are using. 

-          Display a tooltip.  The tooltip must display in both Firefox and IE to receive credit (see chapter 13)

 

  • Style

-          Use a separate style sheet file which contains style rules for at least 10 different tags.

-          On at least one page allow the user to choose between style sheets, changing the look of your web page according to the user’s choice (see chapter 12)

 

 

  • Validate the format of your HTML code

-          Use the HTML validator link at http://w3.org/ to validate that at least four of your web pages meet the XHTML standards.  You may ignore the warnings generated by JavaScript, but the rest of the web page must pass the validation test.  That is, the validator must display "This page is VALID XHTML."  Clearly identify which pages fulfill this requirement.

 

  • Put at least one set of JavaScript functions in a separate file and “include” it in your web pages

 

  • Add at least one pop up window to your application – this could be a good way to explain what is implemented on each page.

 

  • Other

-          Use functions where appropriate.

-          Comment your code appropriately.  Include the name of the file, the author, the creation date and a description of the purpose of the page in each file.

-          In the footer or in a pop up window or some other unobtrusive part of each web page, include a brief description of the project requirement(s) that page meets.  Come up with a standard convention for doing this that is not distracting to the user of your web site. 

-          The use of frames is not permitted

 

Note: your project must be a completely different project from any projects you have done or you are now doing with other courses.  Projects which are not original and individual work are not acceptable.

 

Turn in:

1.       Put this project in a separate directory on the class server.

2.       Add a link from your home page to this project.

3.       Print and hand in a project report on December 4 which includes the following sections:

  1. A title page with your name, the name and number of the class (ICS 225), the date and the URL of your project.  Indicate which browser you normally use for testing
  2. A one to two paragraph (minimum) summary of the nature and purpose of the system (see McCracken, p. 5, needs analysis). 
  3. A 2-paragraph user analysis characterizing your typical user.  Include items such as user learning style, tool preference, physical attributes, education, profession, and/or application familiarity (see McCracken, Chapter 3).
  4. A task analysis (see McCracken, Chapter 3)

-          List the user goals/tasks

  1. A usability specification (see McCracken, Chapter 3)

-          itemize at least 3 quantifiable usability measures

-          have 2 to 3 real people use your website.  Use their feedback and your usability measures to report on the usability of your web site

  1. Discuss what you’ve done to make your website accessible.  Be specific.
  2. A project plan with – a preliminary version with milestones and estimated times is due next week

-          Milestones with dates (due next week)

-          Estimated time to complete each milestone (due next week)

-          Actual time to complete each milestone

-          Actual completion date

  1. Rough sketches of the web pages and the links between them (flow of control)

 

There will be a 2% penalty if you email your report rather than providing a printed copy of it to me.

 

Late Penalty:  10% per day late

 

 

Evaluation of the Project – 100 Points

Design walkthrough                                                                            10

Project final presentation                                                                    10

Project final report                                                                              15      

Implementation of project                                                                   65

Total                                                                                                   100

 

 

Project Walkthough

Monday, November 20

 

Come to class prepared to explain your project to a small group of your peers.  During your discussion provide written copies of your design documentation/initial report to your group (max group size will be 3) and the instructor.

 

Plan to discuss, at a minimum

  • Your idea
  • Your potential users
  • What tasks they will be able to perform
  • What your web pages will look like
  • How your navigational scheme will operate

 

In addition, plan to discuss anything you are confused about or don’t know how to do.  That is, ask your group for advice.

 

 

Final Presentation

Monday, Dec. 4, 2006

 

On the last night of class, each person will be asked to demonstrate their final project.  Plan to take 5-10 minutes.

 

During your presentation

  • Briefly describe the general idea behind your web site
  • Demonstrate how it works
  • Specifically call attention to the navigation scheme and any special features
  • Explain what is going on in the background

 

 

 

Note:  All sections of this project must be turned in by the end of the last class session.  Projects that are turned in after the last class WILL NOT be accepted.  If you project comes in after the last class session it will count as zero points. 

 

 

Start planning as soon as possible for this project.