Web Design and Implementation (Winter 04-05)


Personal Web Site 1 (10 December 2004)

Create a 409 directory in your www directory on grace, and in it an index.html page from which you will link all subsequent assignments. (The url to the page should be http://www.rit.edu/~yourid/409/ .) The page must include a picture of yourself and your name, and should include a link to your weblog, as well as placeholders for links to your midterm and final personal projects and your group project. It should use valid code--ideally XHTML and CSS.

Do your best to use the principles of design you learned in 320; I want to see the best you can do (that does not mean putting in every type of bell and whistle you can imagine; keep it simple and clean!)

This will be an ungraded assignment that I'll use as an assessment of your current coding and design skills, in order to assign you to an appropriate project group. You will get feedback on it, but it will not affect your final grade. (Failure to submit it at all, however, or evidence that you spent little time or effort on it, will affect your participation grade.)

Please have the site done by noon on Friday, December 10th. Post the URL for the site as a comment here. (The best way to do it is to put the URL in the URL field for the comment.)

Group Assignments (14 December 2004)

As promised, here are the group assignments. Your first two tasks are to choose a project manager and a name. I'd suggest taking advantage of the studio time tomorrow for your first group meeting.

(If you need contact information for a group member, try the RIT online directory for their email address...if that fails, let me know.)

Group 1
-------
Ryan Weigand
Bryan Miller
Dave Galvin
Matt Doyle
Dave Morgan
Greg Heerkens

Group 2
-------
Sean Martin
Ryan Taylor
Brandon Benvie
Jared Balboni
Kent Walker
Regan Messenger

Group 3
-------
Kevin Kroetsch
John Caligaris
Shaena Bogart
Kenny Johnson
Nick Ward
Jesús Janne

Group 4
-------
Christopher Welch
Matthew Mikuzewski
James Schmatz
Matt Muoio
Kyle Nikolich
Darryl Williams

Group 5
-------
Li Chun Yu
Jeremy Clark
Erin Milano
Adrienne Dahler
Sudha Bhat
Nicole LaGrasso

Group 6
-------
Elaine Hackley
Phil Leith-Tetrault
Elizabeth LaFrance
Katie Nemmer
Kara Slezak
Kevin Sweeney

Group Accounts on Vega ( 5 January 2005)

I have created accounts for each group on vega.it.rit.edu, the CME group web server. I've sent out email with the group user names and passwords.

The default web directory on vega is Sites (with a capital S), rather than www. You'll need to create the Sites directory in your home directory, and set the permissions (for it and anything you put in it) to allow reading (there's no "ofw" script on vega!).

The URL for your site will not have a "www" in it--it will look like this:

http://vega.it.rit.edu/~yourgroupname/

You must use secure shell (ssh) instead of telnet when connecting to the server (you should do this on grace, as well). On a PC, PuTTY supports secure shell; on Mac OS X, you can use ssh in the terminal window.

There is also a mySQL database account associated with each vega account, with the same user name and password. (Changing your vega login will not change your mySQL password.)

Group Project 1: Design Document (10 January 2005)

The group project is to redesign the web site for RIT's new Lab for Social Computing. There's a basic site there right now, based on Movable Type--you need to come up with a better visual design, ideas for content (including a resource guide with links to social computing tools and sites), and, if necessary, a revised information architecture. I'll be posting more information for you to work with during the next several weeks.

The first group assignment will be to create a design document for the site, using the guidelines provided in the Webmonkey Information Architecture tutorial.

The document should be submitted to my dropbox in myCourses no later than the beginning of class on Monday, January 10th. A printed copy of the document should be brought to class on that day. Page mock-ups can be included as part of the document (screen shots and diagrams), or you can provide an URL to a web-based mock-up as part of the design document.

Only one document should be submitted per group.

Personal Midterm Site (14 January 2005)

Create a web site about a place that you've lived--and you can interpret that very broadly. Place the site in its own directory within your 409 directory (e.g. www/409/midterm/ ), with its own index.html file. It should have a minimum of five pages.

Divide the content up into appropriate "chunks" of information, and design the site in a way that enhances the presentation of the content. This means you need to think about how to break it up, how to label it, how to navigate through it, keeping in mind who your audience is. I will be evaluating the quality of your content, as well as your information organization and navigation.

Use CSS for text formatting and layout. While you may use inline and document-based styles, I would also like you to create a linked style sheet that controls formatting for some aspect(s) of all of the pages in the assignment.

Include a link to an annotated version of your external CSS (not just a link to the CSS itself, but to an HTML document that has the contents of the CSS along with annotations explaining what the various rules accomplish).

You can assume I'll be using a current generation browser to view your pages, but don't assume that it will be IE, or that it will be a specific hardware platform.

Grading will be based on the following components:

  • Content (quality of writing/ presentation, depth of content, organization of content)
  • Design (visual design principles, navigation)
  • CSS (external CSS, inline only where appropriate, text formatting, positioning)
  • Clean, standards-compliant XHTML and CSS
  • Documentation (annotated CSS, appropriately commented code)

The site must be online by 9am on Friday, January 14th.

Final Personal Site (20 February 2005)

Your final personal site is due by noon on Sunday, February 20th.

The basic idea behind the project is that you're going to rework the midterm site, incorporating all changes and feedback from the first round of grading, and adding in implentations of various technologies covered during the second half of the class.

Required components include:

  • Complete standards compliance in your HTML and CSS.
  • CSS used for positioning as well as formatting. No tables or font tags for formatting purposes.
  • DHTML functionality--write your own, or use something from an archive.
  • Either SSI or PHP-based file includes to place information from a single file on multiple pages (navigation, copyright, etc).
  • One subdirectory protected with server-side authentication. Do not protect your entire site, or I won't be able to grade it! Put a link to the protected directory in your site, and with the link provide the user ID and password for access so I can test it.
  • At least one CGI script implemented on the site. Again, use a script from an archive!

In place of the annotated CSS file from the midterm, provide a documentation page in which you discuss the scripts and additions to your site, detailing where you found the various scripts, and what you had to do to implement them on the site.

Group Project 2: Final Site & Presentations (22 February 2005)

Final project presentations will be done during our scheduled final exam slot (Tuesday, 2/22, at 12:30pm).

Your entire group should be there, ready to present a version of your site that has the full information architecture implemented, with content on the main page, any second-level (main topic) pages, and at least one set of third-level or below (specific content) pages implemented, as well. More is better, of course, but it's possible to get a good grade without all content being completed.

I'm not going to provide a laundry list of technologies to implement on the site--your use of technology should be to facilitate the user experience, rather than to meet a set of arbitrary criteria. That said, effective and appropriate use of the technologies we cover in class--from client-side scripting to back-end scripts--is expected.

Your final project grade will be based on three components:

  • Design Document (20%)
  • Final Site and Presentation (40%)
  • Peer Evaluation (40%)

As you can see, the peer evaluation is a significant component of your final project grade, so if you haven't been pulling your weight in the project up to this point, now would be a good time to step up to the plate and prove your worth to your groupmates. :)

Here's the peer evaluation: