Project Outline

Project Outline, 2011 Fall Semester

Due Date:     Saturday, March 24th, 11:59:59pm.

Marking Breakdown:

Total Marks: 25

5 marks: 'XHTML Quality'

For the quality of your HTML code. Your HTML coding in your project must be correct and within the XHTML 1.0 Transitional standard. To verify your pages, you can use the validator at the URL http://validator.w3.org, as it will also be used in the marking of your project. You will lose 1/4 of a mark per error generated by the validator - be careful, they can build up quickly. In addition, each HTML file is required to contain a !DOCTYPE tag marking it as XHTML 1.0, and an <?xml tag defining the character encoding of the file. Missing these tags will also be considered an error. Remember to read the Project Rules for important details regarding your files!

4 marks: 'StyleSheet Quality'

Use of a site-wide style sheet to set a uniform colour scheme & style for your site. All tags which are used in the site (and have styles applied to them) should be represented in some way in the style sheet, either implicitly (ie: P {color: blue}) or by a class which is applied to them. (ie: .bluetext {color: blue} and then <P class="bluetext">). By 'site-wide', it is meant that you should have a separate file which contains all of your style definitions, and you should use a link tag to include it in each page in your site. Your whole site must use the same style settings - you may not use a different stylesheet for each page of your site. As with the XHTML Quality section, this section will be marked using w3.org's validator, located at http://jigsaw.w3.org/css-validator/. As with the Site Quality section, 1/4 of a mark will be deducted per error found by the validator. (Feel free to ignore any warnings it generates, especially regarding missing color or background-color properties.) Also note - use of the bgcolor, background, text, link, vlink, and alink attributes in HTML, as well as the <font> tag are explicitly forbidden for the project - each occurrence of any of these will be counted as one error in this section. For validation purposes, you may use CSS level 3 in your project, as long as it passes validation and works in all required browsers.

5 marks: 'JavaScript Quality'

All JavaScript in your project must work properly, in all of the test browsers - Google Chrome, Internet Explorer and Firefox. Code which works in only one or two of the browsers will not be eligible for full marks in this section, and will be penalized heavily. Also, sites which do not contain javascript, or have almost no javascript in them will not be given marks in this section.

Please note that Javascript code which is commented out, or otherwise does not actually get run as part of your handed in project will NOT be credited as part of your Javascript code for the project.

4 marks: 'Originality and Feature Integration'

You need to put some original thought into the features included in your site - just including the same set of features and the same JavaScript code, and the same stylesheets as other projects will NOT be sufficient. Also, any feature you include in your project must actually have some sort of purpose for being there. Decorative features are acceptable, however, buttons which read "click me" and pop up a window reading "you clicked the button" are NOT. Also, complex features should have some connection to the content of your site - if the topic of your site is "reptiles", adding on a game of hangman where all of the words are computer terms, or a gas mileage calculator for cars will lose marks here.

It should be noted that this is the most difficult section on the project to receive full marks in - having a project which is entirely your own work, and which contains no poorly-fitting features (as described above) will only receive a mark of 2/4 here. To obtain the other two marks, you must create features which involve creative thought and planning, and which are not found in all of the other projects from the class, or simply taken from the class website or suggestions made during lectures.

Also, though this should be obvious already, it should be noted that this is an INDIVIDUAL project, not a group project. Projects turned in with excessive similarities will receive a total of zero (0) marks in this section.

3 marks: 'Required Features'

In your project, you are required to include the following features:

1. A script which uses cookies to transfer information between pages. The cookie must be set on at least one page, and then read and used on at least one other page in your site. (ie: not only the page it is created on.)
2. Some type of HTML form which interacts with JavaScript. Examples would include feedback forms which verify their contents, or forms which perform calculations, such as calculating the total price and taxation on a fictional order form. Please note that clocks and navigation menus do not qualify for this section, your form must have some complexity to it.
3. At least one of the following:
   • A JavaScript-controlled form of navigation to get from one page to another in your site (this is usually done through a pull-down menu like the one on the class site, but can also be done other ways.) Note that using this feature does not mean you do not need to include proper HTML links on your pages. This should involve more than mouse-over image swapping, or a simple form 'select' box, or an a tag which uses the 'onclick' event to send the user to another location instead of the href.
   • A mechanism for changing the site-wide stylesheet you are using, or some other visual/design aspect of your site, via the use of a cookie to allow the user to select their preference. (Note that this only counts as your third feature if you already have something else to use as the first feature (use of cookie).
   • Some form of 'mouse chaser' animated item following the mouse around on the screen.
   • Any other type of JavaScript/DHTML based feature which involves a level of difficulty similar to one of the above. (Examples include JavaScript based games, self-marking tests, ... Coming up with your own ideas here can also be a way to earn marks in the 'originality' section.) Note that to qualify for this section, the feature must be browser independent!
   • There are some things which do not qualify for the third feature, including mouse-over image swapping, javascript clocks such as the one demonstrated in the 60-205 web site, and navigation menus using form select items.

4 marks: 'Site Appearance & Usability'

Your project needs to be easy to use, navigate, and understand. Proper use of colour and layout should be made to enhance the information you are providing. Images used should be appropriate to your content, and of good quality. Alternate text for images should be apropriate, and proper tags should be used for layout of pages. (ie: Paragraphs belong in a p tag, not h3.) Also, your project must have level A conformance to the W3 Consortium's Web Content Accessibility Guidelines. Violations of those guidelines will result in mark deductions in this section.