Metropolitan State University

ICS 225 Web Design and Development

 

Project:                     3

Concept:                  Arrays, Browsers, and Cookies

Due:                           Thursday, October 28 (section 1)

                                    Friday, October 29 (section 2)

Points:                      50 points

 

 

Preliminary Project Plan is Due Next Week

 

 

1. Goals:

§         Combine the use of XHTML, CSS and JavaScript

§         Use arrays

§         Detect and use information about the browser and operating system you are using

§         Use cookies

§         Validate your code

§         Be creative and produce a visually attractive set of pages

 

2. Overview: 

 

Design and build a web site of at least 5-7 pages on a topic of interest to you.  You may adapt the work you did on project #1 and/or project #2 if you wish.  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 the requirements.

 

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

 

  • Arrays

-          Demonstrate the use of arrays in at least two different ways.

 

  • Browser Differences

-          Detect and display the name and version of the browser the user is using.  Note that it is not sufficient to simply print the browser properties.  Some interpretation is necessary to provide the most accurate information.

-          Detect and display the name and version of the operating system the user is using.  Note that it is not sufficient to simply print the browser properties.  Some interpretation is necessary to provide the most accurate information.

-          Test your application with at least two different browsers and note the differences.

 

  • User login and validation

-          Require users of your web site to register and login.

-          Use JavaScript validation to make sure that the user name and password are not blank.

-          Store the user’s login name and password in a cookie, along with some additional information about the user

-          When the user returns to the site later, retrieve their information from the cookie.  Validate the login and display the information you’ve stored about the user.

-          Note:  Try to uniquely name your cookie to avoid cookie conflicts.  For example, give the cookie a name based on your initials and class section.  Try to avoid intuitively obvious names since they may conflict with cookies stored on my computer by other students.

 

  • Validate the format of your HTML code

-          Use the HTML validator link at http://w3.org/ to validate that at least three 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.  Clearly identify which pages fulfill this requirement.

 

  • Other

-          Use a separate style sheet file which contains at least 4 style rules.

-          Use functions where appropriate.  Use functions at least once.

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

-          In the footer (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. 

-          Your pages must be attractive and professional looking.  Use good design principles, including a consistent look and feel across pages.

-          The navigation must be consistent and easy to understand. 

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

 

4. Turn in:

§         If you have not already done so, create a file named index.html and place it in your public_html folder.  index.html must contain your name and links to your projects.

§         Post your project web pages on the class server.  I suggest you put each project into a separate folder.

§         Print and hand in a project report which includes the following sections:

a.       A title page with your name, the name, number and section of the class, the date and the URL of your project

b.       A needs analysis (see McCracken, p. 5) including

-          a summary of the nature and purpose of the system

-          who the system will serve

-          the benefits your system will provide

c. A user analysis (see McCracken, p. 6) – characterize your typical user

d. Task analysis (see McCracken, p. 6)

-          List the user goals

-          List the user tasks or activities

      e. A project plan with – a preliminary version with milestones and estimated times is due next week

-          Milestones with dates

-          Estimated time to complete each milestone

-          Actual time to complete each milestone

            f.   Rough sketches of the web pages

            g.  A brief description of the organizational structure of the information on your web site

            h.  A brief description of the navigational scheme used on your web site

            i.  A paragraph describing at least one difference which shows up when you are using different browsers.

            j.  A usability specification that itemizes at least 3 quantifiable usability measures.  Report on the usability of your web site using these measures.