Web Design and Technologies (4004-737)


Personal Web Site 1

Create a 737 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/737/ .) The page must include a picture of yourself and your name, and should include space to link your midterm and final personal projects and your group project.

Do your best to use the principles of design you learned in 320 or 741; 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.

The site should be online no later than noon on Sunday, December 14th. When you’ve completed it, please post the URL as a comment to this post.

Personal Midterm Site

Create a web based “academic portfolio” for yourself, showcasing your academic interests and technical skills. Place the site in its own directory within your 737 directory (e.g. www/737/midterm/ ), with its own index.html file. It should have a minimum of five pages. You can use Movable Type to create the site, or you can hand-code it.

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 Wednesday, January 14th.

Group Project 1: Design Document

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 January 19. 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.

I will evaluate these documents based on the following aspects:

  • Quality and comprehensiveness of content (did you include all the things outlined in the tutorial?)
  • Clarity of expression (how well did you express yourself? does it make sense? does it hang together as a cohesive document?)
  • Appropriateness of choices (was your identification of goals, initial design look & feel, etc, well-suited to the site and audience?)

More details on the trip:

Here’s the basic itinerary.

In addition to staying with a family friend in Tokyo, we’ll be making day trips to Kyoto, Kamakura, and Inba (Chiba province).

Group Project 2: Final Presentations and Peer Evals

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.

My mother and son will be there for the presentations, as well. They’ll be looking at the sites from the end-user point of view, while I’ll be evaluating them for their architecture and their technology implementation.

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 (10%)
  • 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 are downloadable versions of the peer evaluation form. Please do not fill these out until week ten—you want to be sure to incorporate feedback for the whole project, including (especially) the down-to-the-wire crunch time.

Final Personal Site

Your final personal site is due by noon on February 24th (Tuesday of finals week). I’ll have somebody available during our usual class time on Monday the 23rd to help you with last-minute technical snafus.

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.