Today's date: 08/29/08

Course Schedule

News

Because of the school closing on 2/6 due to extreme weather conditions, the Wednesday section is now on a different schedule. Those in the Wednesday night class please note the updated Course Calendar below.

Classes

  1. Introduction to Course (Wed: 01/30, Thu: 01/31)
  2. Structure and Presentation (Wed: 02/13, Thu: 02/07)
  3. Web Standards and Validation (Wed: 02/20, Thu: 02/14)
  4. Introduction to Box Model (CSS) (Wed: 02/27, Thu: 02/21)
  5. Intermediate CSS (Wed: 03/05, Thu: 02/28)
  6. Introduction to Information Architecture (Wed: 03/12, Thu: 03/06)
  7. Midterm (Wed: 03/19, Thu: 03/13)
  8. Introduction to XML (Wed: 04/02, Thu: 03/20)
  9. XML continued (Wed: 04/09, Thu: 04/04)
  10. Introduction to Forms (Wed: 04/16, Thu: 04/10)
  11. Forms and PHP (Wed: 04/23, Thu: 04/17)
  12. Advanced Design (Wed: 04/30, Thu: 04/24)
  13. Final Exam (Wed: 05/07, Thu: 05/01)
  14. Production (Thu: 05/08)
  15. Final Project Presentations (Wed: 05/14, Thu: 05/15)

Grades

Grade Breakdown

Final grades are based on the following:

10% Class Portfolio

35% Projects (3)

20% Assignments (6)

20 % Exams

15 % Class Participation

Grade Updates

Grade updates will be handed out at least twice during the semester. You can download a blank copy of the grade form (PDF).

Class Portfolio

Class Portfolio v1

Due: week 4
Description: A website that will showcase all of your in class and homework assignments. The visual design of the site should be clear and uniquely yours.

Basic requirements

  1. The portfolio will have sections (such as assignments and projects). Your portfolio should consist of several pages (versus one long list of links). Example structures are available for you to use as a starting point.
  2. Individual assignment and project descriptions and links (assignments and projects are individual sites separate from the class portfolio). Include the description of the assignment and information about how you created it (what was your approach? why did you make the design decisions that you did?), a link to the actual assignment, and any further information required by the assignment or that you wish to include. If it is a project you must have a screenshot.
  3. Full and consistent navigation on each page. The actual projects and assignments do not need global navigation, but the sections for them do.
  4. Pages must be valid XHTML.
  5. No functionality errors (for example, no broken links).
  6. Customized CSS and design (if you use one of the templates you must alter it).
The basic structure for your class portfolio is pretty much outlined by the requirements. And if you use the example files as a basis you have the foundation built. What you might want to start thinking about now is the first thing you would want someone to think of when they see your class portfolio. Is it that you are creative? Artistic? Intellectual? Fun? Whatever descriptive word you come up with, start brainstorming visual elements to support it (such as colors, images, layout, etc.).

Course Objectives

This project supports the following course objective:

  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.

Additional Resources

A grade checklist is used to see that the basic requirements were met.

Optional templates are available. If you use a template you must make considerable changes to make it uniquely yours (most of the changes will be in your CSS file, but you should also add your own images and content). If you would like to use the templates you can read about them or just directly download them:

Class Portfolio v2

Due: week 15
Description: A website that will showcase all of your in class and homework assignments. The visual design of the site should be clear and uniquely yours.This second version should be a substantial improvement over the first version.

Basic requirements

  1. Meet all requirements of v1.
  2. Individualized and well executed design. Building on the previous version, your Class Portfolio version two should have a unique style and look that is considerably more polished. Having gone through an additional 10 weeks of the course, ideally you will have learned more techniques (and perhaps even tips or tricks) to enhance the visual appeal, organization, and markup (or php coding) of your initial class portfolio. As with the initial version your site must validate and meet the other requirements outlined for version one.

Course Objectives

This project supports the following course objective:

A grade checklist is used to see that the basic requirements were met.

Projects

Project: Zen Garden Redesign

  1. Devise a message you want to communicate (cultural or critical theory topic)
  2. Download the html file - you don't change this! Just leave it as is
  3. Download the css file - this you change to reflect your message. You will also need to create original images.
Demonstrate an understanding of basic principles of information architecture, and the practical application of XHTML and CSS.
Choose a cultural or critical theory topic on which to base a "Zen Garden" design.
Create your own original redesign of CSS Zen Garden. Do not rehash an existing design.
Start first with a concept based on your cultural or critical theory topic, then build your redesign.

Grading

Documentation: 30% (documentation template)
Project: 70%

Course Objectives

This project supports the following course objectives:

  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.
  • Be able to develop goal-oriented media.
  • Apply cultural and critical theory to create work that considers contemporary cultural and social conditions.
  • Produce finished piece for inclusion in student portfolio

Project: Image Organization

Your class portfolio page should have a brief description of the project, a screenshot, and links to the project itself and to your documentation.

Description

You will use what you have learned about information architecture to organize and display a set of images.

Requirements

  1. 12 images (original media) within 3 categories (4 images in each category)
  2. Media showcases should follow a micro-to-macro format (thumbnail showcase linked to large files, descriptive text-links to larger media files).
  3. Images are properly formatted for web distribution (proper dpi, resized with an imaging program and not with XHTML, etc.)
  4. Each section should have a brief description/backstory of the content.
  5. Advanced presentation. Use CSS to create a unique design.
  6. Pages must be valid XHTML
  7. No functionality errors (for example, no broken links)
  8. Documentation about your process (minimum of: initial proposal, a scan of your prototype/mockup, and credits)

Documentation

Your documentation will consist (at a minimum) of:
  1. Proposal
  2. Mockup/Paper prototype
  3. Credits

Your documentation must be linked from your class portfolio site along with a link to the actual project (your documentation can be an XHTML/CSS page, a PDF file, or a DOC file).

A mockup should be a 2D display on paper larger than 8.5x11, giving us enough of an idea of the site structure and design to facillitate feedback. Ink should be used, and all writing and sketches need to be legible. (See Paper Prototype article)

Course Objectives

This project supports the following course objectives:
  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.
  • Demonstrate the ability to successfully develop interactive strategies using methodology introduced in the Media Theory and Design classes.
  • Be able to develop goal-oriented media.
  • Be able to create projects that emphasize discourse and dialogue (interactivity rather than exposition).

Project: Goal Oriented Design

Grading

Documentation: 30% (template: doc | doc)
Project: 70%

Project: Goal Oriented Design

Description: Create a goal-oriented interactive piece using XHTML and CSS (both valid). You may also incorporate other media and technologies (such as JavaScript, PHP, or other languages - as long as the output validates). The goal should be SMART (specific, measurable, attainable, realistic, and time-limited). Be specific about your target audience and exactly what you hope to accomplish with this project.

Requirements

  1. Your project must have a goal - something that is to be accomplished.
  2. You must take into careful consideration the participants of the piece.
  3. Images are properly formatted for web distribution (proper dpi, resized with an imaging program and not with XHTML, etc.)
  4. Advanced presentation. Use CSS to create a unique design.
  5. Pages must be valid XHTML
  6. No functionality errors (for example, no broken links)
  7. Documentation about your process (minimum of: initial proposal, research about your target audience, a scan of your prototype/mockup, and credits)

Course Objectives

This project supports the following course objectives:
  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.
  • Demonstrate the ability to successfully develop interactive strategies using methodology introduced in the Media Theory and Design classes.
  • Be able to develop goal-oriented media.
  • Be able to create projects that emphasize discourse and dialogue (interactivity rather than exposition).

Assignments

Assignment: Analysis

Format

A one page written analysis linked from your class portfolio site.

Due: Before second class begins (uploaded and linked)

Process: Find two sites that you think are successful and that inspire you.

Write up a short analysis of each. Include the following information for each site:

  1. What is the goal of the site?
  2. Who is the intended audience?
  3. What aspects of the site are successful based on the goal and audience?
  4. If you were handed this site to make improvements, what would you change and why?
  5. What is inspiring about it?

Requirements

  1. An XHTML page online (in pub>aim) that is linked from class portfolio.
  2. Text formatted correctly (use appropriate tags such as: paragraph, list items, etc.).
  3. A link to each site.
You can view this assignment and a checklist as a PDF file: pdf file

Assignment: Non-Linear Visual Series

Format: Four XHTML pages, one external .CSS file, and three visuals properly formatted in both large and small versions

Due: Before third class begins

Process

Choose three images that you have created (photographs, drawings, graphic designs, etc.). You will create a site that showcases and connects these three images. Each image should be presented large on its own XHTML page. The fourth page will be the introduction to the site and will have smaller sized versions of your larger images. You may use additional images as design elements or to support the series, but you will only be showcasing three images.

Requirements

  1. Three images to be showcased
  2. 4 XHTML pages: 1 will contain 3 smaller-sized versions of the images, the rest of the pages will have one image showcased per page
  3. All Images must be properly formatted (not resized with markup)
  4. Site will use a micro-to-macro format (thumbnail sized links to larger images)
  5. Must be able to access all large image pages from any page (global navigation)

Course Objectives

This project supports the following course objectives:

  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.

Assignment: Non-Linear Narrative

Format: Five XHTML pages, one external .CSS file, and an appropriate amount of visuals properly formatted.

Due: Before fifth class begins

Process

Create a narrative using the assigned elements. The narrative can be of any type, serious or silly, but must have a minimum of 400 words. Each assigned element will act as a focus for a page; you will have 4 elements translating into 4 pages, plus a default/introduction page. Space out your narrative balancing text and visuals to create interesting compositions on each page. The amount of visuals used is variable but a minimum of 4 images is required. The navigation should be non-linear; do not use a page-turning next/previous navigation method.

Assigned elements are randomly picked in class. If you miss the class when this was assigned, contact your instructor for a list of items.

When complete you should have a folder that contains six text files and a folder inside that containing your images.

Example:

Assignment 3 file list example

Requirements

  1. Five XHTML pages
  2. One external CSS file
  3. At least 4 images
  4. All Images must be properly formatted (not resized with markup)
  5. Non-linear navigation
  6. All pages must be valid (use the W3C Validator to check them)

Course Objectives

This project supports the following course objectives:

  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.

Assignment: CSS Positioning

Format: Three XHTML pages, one external .CSS file, and an appropriate amount of visuals properly formatted (a minimum of three per page).

Due: Before sixth class begins

Process

Create a three page site that uses several layered images to create compositions using CSS properties such as z-index and positioning.

Requirements

  1. Three XHTML pages
  2. One external CSS file
  3. At least nine images (a minimum of three per page)
  4. Images must overlap in some manner to create the compositions
  5. Non-linear navigation
  6. All pages must be valid (use the W3C Validator to check them)
  7. As always, images must either be original or you must have written permission to use them and credit the sources. It is much better to use your own original media.

Course Objectives

This project supports the following course objectives:

  • Demonstrate the ability to integrate media into an interactive multimedia project.
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.

Assignment: XML collection

Description

Create a system to classify and organize twenty items in a collection (you can choose anything that you happen to have a lot of as long as you use at least 20 items). Present this system using three files: a basic XML document, a DTD, and a CSS file.

Requirements

  1. A brief half page description of your organization system and the rationale for your choices (put this on your class portfolio site by the link to the assignment)
  2. An outline showing the basic structure of your system
  3. A DTD that defines the rules of your system
  4. A CSS file to style the XML

Course Objectives

This project supports the following course objective:
  • Demonstrate an understanding of the underlying concepts behind, and be able to create, interactive projects using current production technologies.

Assignment: Web Forms

Readings

Weekly

  1. XHTML 6th Edition: Introduction (pgs 13-22), Chapters 1, 2, 3, and pages 356-359
  2. XHTML 6th Edition: pages 81-93, 339-351, 119-126, 137-150, 127-129
  3. XHTML 6th Edition: pages 96-102, 103-115
  4. XHTML 6th Edition: pages 151-168,169-197 and CSS Zen Garden Chapter One
  5. Information Architecture: Blueprints for the Web - pages 1-5, 8-9, 33-38, 57, 69-70, 81-87 and online articles: The Perils of Prototyping by Alan Cooper and Dan Willis's Classic IA Tools
  6. None for week six
  7. IA for the World Wide Web- pages 39-49, 106-131 and Information Architecture: Blueprints for the Web by Christina Wodtke pages 89-119, 126-128, 136-140, 156-167
  8. Learning XML (PDF)
  9. PE: pages. 37-45, 53-59, 142-146
  10. XHTML 6th Edition: pages 253-280, excerpts from Homepage Usability: 50 Websites Deconstructed by Jakob Nielsen and Marie Tahir, and PE: pages 60-69, 230-231
  11. PE: pages 154-161, 163-166, 170-176

Extra Credit

Extra Credit Options

Up to ten points of extra credit are available throughout the semester. You can mix and match any of the following options with a maximum total of 10 points:

Valid XHTML 1.0! Valid CSS!
unless otherwise noted, all content on this site is copyright 1999-2008 janell baxter