ITD-110-001
Final Project
– Create a non-profit organization web site.Due Date: Saturday, Dec. 11, 2004 9 AM
Instructions
You may partner with another student from the class if you wish on this project, or you may do the project independently. I encourage partnering. In the real world web site design and maintenance is usually a team project. In addition you will likely be able to draw on the strengths of your partner and end up with a better end product.
It can be for a real or pretentious non-profit organization. Feel free to make it a silly non-profit if you wish. Put a disclaimer on the site that this is not a real non-profit organization site prominently on the main page. If you wish let your imagination go wild … as long as you remember that you are creating a site designed to draw people in and solicit money. (Of course you must follow the constraints of the project specified below.) Be persuasive!
A donation page is required and details are specified below. In addition you should have other pages in the web site explaining the purpose of your organization including its mission, what you are trying to accomplish, etc. Frames are not required for this assignment, but you may find it will be easier to implement with frames. I will leave the design up to you but of course you are trying to draw people into the web site and to get them to care about your particular causes and to lead them persuasively to a page where they can contribute money.
You should integrate all the skills you learned from the first two projects. The same criteria will be used as with the other projects, but 30% of the total score will be based on the attractiveness and usability of the site, as perceived by me. You must publish the effort to the NVCC student web site and provide me with the URL.
Test your site with both IE 6.0 and Mozilla Firefox browsers. Some cascading style sheet attributes may not work or behave differently in the browsers.
Cascading Style Sheet Requirements
Create an external style sheet for your site that will apply the same theme to all pages of your site. This would be stored in a .css file and referenced in each individual HTML page. You may selectively override the style sheet if you think it is necessary on individual pages. At a minimum the style sheet should specify:
 | Background color or image |
| All the style information for the fonts for normal text and h1-h6 (i.e. font: font-family font-size font-style font-weight font-variant text-transform text-decoration) |
| If you use a table, specify border colors and a background color or image. |
Image Requirements
You must use either (1) one client side image map included with two or more hotspots or (2) a variety of linked images that effectively navigate a user to appropriate places in the site. If you use a client side image map it is up to you to split the image into two or more clickable links. Assign alternate and title attributes to all clickable images. You may need to find software to help you do the mapping correctly. (Note: I believe your book has a copy of the shareware program MapEdit you can use. I think you can use it without cost for 30 days.)
Donations Page Requirements
The Donation page should contain an HTML form that a customer can use to contribute money. Of course you accept all major credit cards but mail in donations are also gleefully accepted. Also provide them with a phony address where checks can be sent. The following form fields below are required. Of course you should have some plain text next to the form field so it’s clear what sort of information should go in each field. (You may wish to use the <label> tag to map the form field to its associated text.) You can add additional fields if you wish. For design purposes you may find it desirable to put the form information into a table. You must use the exact name of the form fields specified. This is because in the real world the web server programmer would provide you with this information. You should test the form by submitting it to the URL below. To test, enter your own E-mail address in the Email field. If it works correctly you should get a page back listing your form’s parameters, and an E-mail message. I suggest you copy and paste the URL from the web site since it is easy to get wrong.
http://www.oakhillva.com/php/ITD-110-P3.php
Please use the POST method to process the form. This will keep the information sent to the web server from appearing on the URL field, which is appropriate when processing sensitive information like credit card numbers.
You will be supplied with Javascript functions that you must use to validate your HTML form. You must integrate this code with your form so that form validation occurs. (In other words, you need a properly coded <form> onsubmit event.) The form should not submit if any of the validations fail. The URL to include for the Javascript functions is:
http://www.nvcc.edu/home/mhamill/ITD-110/Files/project3.js
You will need to link to this file with an appropriate <script> tag. You may not be able to view the file directly in your browser. To see a text only version of the file suitable for inspection or printing click here.
| Name of Field (use in NAME attribute) | Form Field Type | Notes | Additional information |
| CreditCardHolder | TEXT | Maxlength="30" | Name as entered on credit card. You must ensure the field is not blank. |
| CreditCardNumber | TEXT | Size="16", Maxlength="16" | The credit card number. You must ensure this field contains exactly 16 characters and all characters entered are numeric (0-9). |
| CreditCardType | RADIO or SELECT, you decide | Should accept at
least Visa, Mastercard and Discover |
It's good to use specify an option as a default. |
| Amount | You decide. It might be RADIO, SELECT or a TEXT field. | This is the amount of money they will contribute. | You must ensure only numeric data is entered and the user does not enter a negative number. |
| TEXT | Maxlength="50" | Place your E-mail address in here for testing if you want to get a response. You must ensure the field is not blank and that the email address is formatted properly. |
Optional
If you wish for an extra learning experience you can create three hidden fields in your form. Some extra points may be given if the result is an improved user experience. These hidden fields will be used by the response page to dynamically provide a title to the page, substitute the name of your organization and create a <link> tag with the URL to your cascading style sheet file. If you name your hidden fields as follows the values associated with them will be substituted on the response page.
| title (This will appear in the <title> tag.) |
| organization (This will appear in a heading tag in the response page. It should be the name of your organization and it will be echoed back to the user.) |
| css_location (This must be a full url to your .css file, i.e. http://<something>) |
Caveats
Warning: If the URL you provide is not correct or inaccessible from the public internet, you will lose 5 points for every day this problem exists. Due to the "end of the semester crunch" projects not received by December 14th may not be graded.
Students are honor bound not to have anyone other than their partner help them with this project. Students are also honor bound not to modify the contents of their site after they have turned it in. Please bear in mind that all files in your web site and date stamped and it is a simple matter to determine if newer files have been uploaded. Students are expected to code all HTML by hand instead of relying on tools, particularly since I’ll be grading based on how well I can read your source code.