| Due date | Assignment |
|---|---|
| 8 May |
|
| 1 May |
|
| 24 April |
|
| 17 April |
|
| 10 April |
|
| 3 April |
|
| 27 March |
|
| 20 March |
|
| 6 March |
|
| 28 February |
|
| 21 February |
|
| 14 February |
|
| 7 February |
|
| 31 January |
|
| 24 January |
|
Project 1
Working as part of a group, your task is to create a web site for an arts organization. The organization can be real or fictitious, commercial or non-profit. Possibilities include an art gallery, a musician or musical group, a dance company, a theatre, a museum, a recording company. This first project will form the foundation for the second and third projects, as additional capabilities, such as database management and delivery of multimedia content, are added.
Specific requirements for this project:
- General project requirements governing all projects should be followed.
- The home page should provide a welcome to the site and general information about the organization.
- One page should show or offer links to the organization's news stories and press releases. (The articles you reference should have appropriate titles, but to simplify your task, you're welcome to use a random text generator, such as the one at www.lipsum.com, to create the body of the articles.)
- One page should show graphic images relevant to the organization.
- One page should allow users to sign up for the organization's
mailing lists, as follows:
- Create an XHTML form to collect the appropriate data.
- For your form's action, call the script at
http://sunny-banana.com/cgi-bin/itd210_prj1.cgi, using the POST method. (Avoid typing errors: copy and paste this URL into your HTML code.) This script will cause your web browser to display a confirmation page which will show the data that was transmitted to the web server; at the bottom of the page will be a hypertext link to another page that you specify. - At a minimum, the following hidden fields must be included
for proper operation of the script:
Field name Description sort_type value should be "alphabetic" redirect supply as a value the URL of a page you want displayed after the confirmation page subject supply as a value the title you wish displayed on the confirmation page - In addition, collect other fields as appropriate, such as name, address, mailing preferences, etc.
- One page should display "products" for sale; these may be tangible objects or downloadable content (such as music files).
- The site should be easy to read, easy to use, and easy to navigate.
Grading criteria:
- 15% Required pages present
- 20% XHTML/CSS validation
- 15% General quality of code
- 10% Appropriate use of comments and white space in code
- 20% Correct implementation of forms
- 20% Readability/usability/navigability
Project 2
Building on the work you did for Project 1, incorporate additional functionality, as described below.
Specific requirements for this project:
- General project requirements governing all projects should be followed.
- On the forms submission page, use JavaScript to ensure that all fields have been filled in when the user clicks the Submit button. Your form should include at least one numeric field, and use JavaScript to verify numeric input only.
- If necessary, restructure the "news" page to provide an in-line layout — in other words, headlines/titles of news items are interspersed with the paragraphs of text constituting those articles.
- On the "news" page, allow the user to click article headlines to view or hide the corresponding articles.
- On the "news" page, provide two buttons for zooming text larger or smaller. You should allow at least two sizes larger and two sizes smaller than the default.
- On the "images" page, allow the user to click a thumbnail image in order to have the full-sized version of the image displayed on the same page, either in the same position or in a fixed position on the page dedicated to this purpose.
Grading criteria:
- 10% XHTML/CSS validation
- 5% General quality of code
- 5% Appropriate use of comments and white space in code
- 20% JavaScript forms validation
- 20% Dynamic font size
- 15% Dynamic text hide/display
- 15% Dynamic image display
- 10% Site usability/readability/navigability
Project 3
Building on the work you did for Projects 1 and 2, incorporate additional functionality, as described below.
Specific requirements for this project:
- General project requirements governing all projects should be followed. (Note the requirement regarding publishing!)
- On the forms submission page, provide a PHP script to add the submitted information to a MySQL database. (I will provide you with a pre-created and -defined database. If you wish, you may design your own database, for extra credit.
- Provide a page to display all records in the database (either all in a table or one at a time in a form).
- Demonstrate the use of cookies: on the "news" page, when the user clicks to change the displayed font size, save the current size in a cookie, and restore the setting on subsequent visits to the page.
- Display the date and time of the current user's most recent visit at the bottom of the home page.
- Provide some multimedia content on your "images" page, such as MIDI or MP3 sound files or video files. (You should be able to easily find free sound files on the Internet. Both washingtonpost.com and amazon.com provide extensive libraries of downloadable MP3 files.)
Your MySQL database has been created for you. Its name matches your three initials.
Your database contains one table, created as follows:
table friends (
id int not null auto)increment primary key,
firstName char(20),
lastName char(30),
address1 char(50),
address2 char(50),
city char(15),
state char(2),
zip char(10),
country char(12),
email char(30) not null,
password char(10),
comments tinytext,
receiveInfo enum ('yes', 'no'),
checkbox1 enum ('0', '1'),
checkbox2 enum ('0', '1'),
checkbox3 enum ('0', '1'),
checkbox4 enum ('0', '1'),
checkbox5 enum ('0', '1')
);
Note the following points about this database design:
- Only the
emailfield is required; all other fields are optional. (Theidfield is automatically generated, so you don't need to worry about it.) - You are not required to use all the database fields, just the ones that make sense for your form.
- The
commentsfield can be up to 255 characters. - The
checkboxfields expect '0' or '1' as character strings. (This isn't the best way to implement this functionality, but was done this way for the sake of simplicity.)
Grading criteria:
(Total points available on this project is greater than 100%.)
- 10% General quality of code, including validation
- 15% Add records to database
- 15% Display records in database
- 15% Cookies for font preference
- 15% Timestamp of last visit
- 10% Multimedia content
- 10% Site usability/readability/navigability
- 20% Team participation
General project requirements
- All XHTML code must conform to the XHTML 1.1 specification.
- All formatting is to be done through the use of Cascading Style Sheets.
- All XHTML and CSS code must be validated.
- All code should include appropriate comments.
- All copied materials (graphic images, audio files, etc.) should be credited in the comments.
- Tables may be used for appropriate presentation of data, but not as a general layout device.
- The site should be easy to read, easy to use, and easy to navigate.
- Projects 1 and 2 are to be published to your NVCC web space. Project 3 will be published to the class web server. Provide me with the URL, along with hardcopy listings of all code.
- As discussed in class, each class member will work as part of a group in doing the projects. Only one copy of each project needs to be submitted.
- Each project is to be presented to the class, with each team member participating equally in the presentation.
- Each team member is to submit a short write-up, explaining what each team member contributed to the overall project.
I will be viewing each project with Internet Explorer 6, Opera 9, and Firefox 2, using screen resolutions of 800 x 600 and 1024 x 768 pixels.