CSC 105 Project 2

Overview

This project aims to take you beyond the principles covered in project 1, to the point of incorporating significant interactivity into your design. As before, you will design a web site from scratch, beginning with the goals of the site and using those goals to drive the construction process. Again you will be expected to incorporate a new list of required elements.

You may choose any topic you wish for your site, but it should be something different from the topic chosen for project 1. If you like, you may take a look at this list of ideas to get you started in choosing a topic. The subject matter of your site may be real or fictional. Please keep in mind that you should pick a topic that will allow you to fulfill the requirements of this assignment; it is not acceptable to leave out a required element because it does not fit the topic you have chosen. Also, remember that topics with a clear audience and purpose tend to be easier to develop because these factors help to motivate the design. Finally, bear in mind that applications requiring storage of information for later viewing by other users typically require server-side scripting such as PHP and cannot be created using JavaScript alone. (Students interested in such topics are encouraged to take CSC 107.)

As before, please remember the following parameters. The content of your site must not violate any of Smith's policies on computer use, nor any local, state or federal laws. It is further expected that you will not create sites containing material that, while not breaking any rules or laws, may be offensive to other students in the course or to the course staff who are required to view your site as part of the course. We reserve the right to remove such material, and/or not to grade sites that contain such material. Use your common sense.

You are encouraged to work alone on this project. If you wish to complete it with a partner you must submit a suitable 2-person project in advance of the deadline and receive approval from the instructor.

Remember that you may adopt an effect you like from any source, including the projects of other students in the course. However, if you use material from such a source, you must (1) note the debt in your design document with a link to the original, and (2) adapt it so that it fits the into your site and is more than a verbatim copy of the original. Also remember that your work will be judged based on what you add to the original, not on what is copied. A beautiful site design that is taken as a package from someone else's work will not receive a high grade, even if it is used with permission and cited properly.

Your Project Documentation (Design Document)

As before, the documentation page will again be the key to the evaluation of your work. If you work with a partner, both of your names should appear clearly at the top of this page.

The design document should state exactly how your site satisfies each requirement (with links where appropriate), and should explain what effects you were trying to achieve and how you used various techniques to do so. If you adapted HTML or other content from somewhere else, your design document should contain a link to that page. (Remember that when taking concepts from other web sites you should try to identify the basic idea that you are trying to capture and then adapt it to your own needs.) When in doubt, always include an explanatory note. Your design document should be easily accessible from the main page of your course account, and should be clearly named with the assigment number and the fact that it is the design document.

Required Elements

Put the files for your second project in their own folder within the public_html folder of your aurora account. Please make sure that you add a link from the top-level index page to the home page for your project. (You should already have a link to your project 1 work there.)

The content for this assignment is left up to you. The site you create should have a top level page (which must be named index.html) with links to at least four other pages that you designed (plus your design document). You must use relative URLs to link between the pages of your site, because the pages will be copied elsewhere for grading (and the absolute URLs would not properly point to the copied pages). Your site design must somehow incorporate the following requirements, and the design document must explain their use. Please make sure that each required element is addressed in the design document, and is easy to find in the site, preferably via a link to the area where the requirement is satisfied.

Forms: Your site should incorporate form elements in at least one page, and process the input somehow via Javascript (either to check the form results before they are submitted, to process the submitted results, or both.) Use of form elements as controls for a page without a submit button (as in this example) also qualifies so long as there is significant scripting involved.
Cookies: Your site should make use of cookies or alternate means to record state information in one page and recover it in another. (Since we will be learning this technique in the second-to-last week of the course, you may wish to plan in advance where it will be used, and fill in the details once we have covered them.) For example, your site might allow the user to customize certain aspects of the page appearance, or enter other preferences. Or you can have a page that remembers what the user did the last time she visited.
Interaction: Some part of the site should include a significant interaction implemented through JavaScript. Examples of such interaction might include a game, interpreted form, interactive story, etc. This differs from the user feedback requirement below in that it involves overt interaction more complex than a simple rollover. A good use of interaction should achieve some effect not possible through the use of static pages. (Your solution to the form and cookie requirements above may satisfy this requirement simultaneously. For example, you may gather information on one page using a form, store that information in a cookie, and use it on another page to customize the visitor's web experience.)
User feedback: The site should incorporate techniques (primarily CSS-based but using Javascript where appropriate) to be highly responsive to the user. User actions should cause appropriate changes to the page appearance so as to provide (possibly subtle) feedback to the user about the state of the page, what happens when a link is clicked, etc. For example, mouseover effects should be used wherever appropriate, perhaps to give a preview of what lies beyond the link.
Canvas Graphics: Some part of your site should take advantage of the HTML5 canvas element to draw graphics on the page. These may be static or active, depending on their role. However, for full credit they should be used to accomplish something not possible with just an image. Even if static, they should be based in some way on user input or other sources of variability (date, random numbers, etc.).
Multimedia: We may not have time to cover multimedia interactions in class until late in the course. Therefore, including multimedia elements is not required, but can be undertaken as an enhancement to the site. Please take care to choose elements that are tasteful, non-intrusive, and serve to advance the goals of the site in some way. Appropriate use of multimedia with scripting may be worthy of extra credit.
Elements from project 1: This project should employ all the knowledge of web design you have acquired to date. Thus your site should incorporate style sheets, navigation aids, and formatting techniques as necessary. Generous use of images and appropriate hyperlinks is encouraged.

As before, this is not just a 'coding' exercise. Your attention to design (use of color, shape, etc.) is a large element of the whole process. You should continue to use style sheets and other approaches as necessary to control the appearance of your pages.

To the greatest extent possible, your site should work across browsers and with different browser window sizes. If a particular feature is not available on a particular browser type, then the site's behavior should degrade gracefully without "breaking". (If you can't get something to work across browsers, you should acknowledge this in your design document, along with any steps you took to compensate.)

Account Setup

Your web site should be stored in the project_2 directory inside the public_html directory. (Keep in mind that directory permissions must be set to code 755, unlike content files which are 644.)If you work with a partner, the web site pages should be stored in just one of your accounts; both partners should link to the site from the index.html of their public_html directory.

Grading

Grades will be divided into two equal parts: a grade for technical merit, and a design grade. Each grade will be based in part on the presence of the required elements. The technical merit grade reflects mastery of the technical elements taught in the course, including innovative and/or unusual use of techniques taught in class. The design grade reflects the overall layout, appearance, and user experience of the web site. The design document should point out any significant technical or design elements of the page for consideration. In general, meeting the minimum requirements as described in this document is sufficient effort to earn a "B" grade. Incorporation of additional elements, creative use of these elements, and close attention to details of style are all ways of earning an "A".

Deadlines

9:00 AM, 29 November 2018: Project proposal & design sketch, including partners chosen if any. (On paper)
9:00 AM, 6 December 2018: Project draft. (Class presentation)
11:59 PM, 13 December 2018: Completed project. (Electronic collection).

Where electronic collection is noted above, all readable files in your public_html directory will be collected automatically from the web server at the specified due date. It is your responsibility to ensure that all files are in the proper place, properly linked, and publicly readable at the time that the files are collected. Changes and/or additions to the collected work will not normally be permitted after the deadline.