Web Design and Implementation (4002-409)


Personal Web Site 1

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.

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 group in class. You will get feedback on it, but it will not affect your final grade.

Please have the site done by noon on Monday, December 15th. Post the URL for the site as a comment here.

Project Group Assignments

Group 1: Circle
Nicholas Hawkins
Josephine Leow
Kimberly Mitchell
Olga Olin
Qing Quan
Jennifer Rohrig

Group 2: Triangle
Michael Ashman
Sarah Begonis
Jay Bibby
Christine Chriscaden
Maria Morris
Amy Moyer

Group 3: Oval
Brendyn Alexander
Philip Charles
Michael Delaney
Frederic Lindenhovius
Shawn Snyder
Brian Tepfenhart

Group 4: Rectangle
Shad Ali
Jordan Fripp
Erhardt Graeff
Sean Hannan
Ryan Munding

Personal Midterm Site

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 noon on Friday, January 16th.

Group Project 1: Design Document

The group project topic is a guide to RIT and IT computer resources—labs, accounts, tutors, documentation, etc.

Create a design document for your group’s 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 Thursday, January 22nd. 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.

Group Project 2: Final Site & Presentations

The first half of the last week of class will be devoted to final group project presentations.

You should be 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 garde 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:

Final Personal Site

Your final personal site is due by noon on February 24th (Tuesday of finals week).

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.