Web systems and interface design

instructor Ellen M. Zimmer
office phone: 732-1179
Description &
This course explores web concepts and implementation issues. Topics include markup languages, script customization, web interface design principles, security issues, and information retrieval techniques. Each student designs and creates web-based projects.
  • Information design & architecture
  • Graphic design, including typography
  • Cascading style sheets (CSS)
  • HTML & Dynamic HTML (DHTML)
  • Web-based forms
  • Server-side programming
  • Client-side programming
  • Security
Texts &

The following texts are available at the campus library, or you can order them from the campus bookstore or any online booksellers such as and

Don't Make Me Think (Krug) (I will circulate a copy of this)
Que, ISBN: 0789723107

The Non-Designer's Web Book, 2nd Edition (Williams and Tollett)
Peachpit Press, ISBN: 0201710382

HTML 4 for the WWW: Visual Quickstart Guide, 4th Edition (Castro)
Peachpit Press, ISBN: 0201354934


HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, 5th Edition (Castro)
Peachpit Press, ISBN: 0321130073


HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide,
6th Edition (Castro)
Peachpit Press, ISBN: 0321430840

You should also obtain textbooks on the topics listed in the "topics covered" section.  Some suggestions are:

PHP for the WWW: Visual Quickstart Guide , 2nd Edition (Ullman)
Peachpit Press, ISBN: 0321245652

PHP and MySQL, 2nd Edition (Welling and Thomson)
SAMs Publishing, ISBN: 067232525X

In addition to these texts, online readings will be assigned and linked from this page.

You should purchase at least one jump drive or other removable media to store your work on. I recommend you always maintain a backup of your work!


Your grade will be based on

Project 1 (35%)
Project 2(35%)
mid-term exam (15%)
final exam (15%)


It's important to understand that if you complete all the requirements for an assignment, that entitles you to a grade of "B" (i.e. "satisfactory work"). To receive an A for an assignment, you must go beyond the basic requirements, and demonstrate creativity, initiative, and excellence--the grade of "A" is intended for work that is superior, rather than average.

"Incomplete" Grades: You may request an incomplete, or "I" grade, only in cases where exceptional conditions beyond your control, such as accidents, severe illness, family problems, etc., have kept you from completing the course. You must alert me to these circumstances as soon as possible--telling your instructor in November that you were sick in September is not acceptable. If your request for an incomplete is granted, you must complete the work for the course within the time limits set by the University.  Unfinished "I" grades automatically become "F". Incomplete grades are not given to students who have simply fallen behind in their work.


Project 1:

  • Assignment 0: Create a new directory named it660 in the public_html directory of your Linux account for your assignments, and place in that directory an index.html page from which you will link all subsequent assignments. (That means the url to the index.html page will be The page must include a picture of yourself, your name, and your preferred e-mail address (the one you check most often, and would like me to use). Do your best to use the principles of design you are learning this semester; 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.)
  • Assignment 1: (Due Week 9) Create a web based "academic portfolio" about yourself, showcasing your academic interests and technical skills for a prospective employer. See grade sheet for details.
  • Assignment 2: (Due Week 15) Create a revised and expanded version of assignment 1, incorporating a variety of technologies covered in class.  See grade sheet for details.
  Project 2:
  • Assignment 1: (Due Week 8) Site Design Document with page mock-ups.  (40%)
  • Assignment 2: (Due Week 12) Prototype of site for critique. (ungraded)
  • Assignment 3: (Due Finals week) Final presentation of site. Delivery of electronic items and group binder. (60%)

The schedule is outlined below.  This may change as the semester progresses and I will update you on these modifications in class.

Topics Covered
Week 1 Course Overview

    logging on
    Linux and the web

Understanding the Internet
    IP address
    Internet Searching


WebMonkey: Unix Guide



How the Internet Works
How DNS Works
How Can You Find Anything?
Berkeley Internet Search Tutorials Hobbes' Internet Timeline
A Brief History of the Internet

Week 2 Standards
   Understanding copyright laws
   WWW Standards
   WWW Accessibility
   EUP Policies




Copyright information
How does Napster Work FAQ
Browser Support Chart
HTML/XHTML Validation (W3C)
CSS Validator (W3C)
The Web Accessibility Initiative
A Primer for Accessible Web Pages
EUP Policies

How Email Works

Week 3 XHTML
    Authoring tools
    XHTML Tags
    simple web page

MS FrontPage & Publishing
    Just the basics
    Web Page Creation
           Using Tables

How Web Pages Work
Dwnld Macromedia MX 30-day trial
HTML tags
XHTML tags
Barebones HTML Tag Guide
HTML/XHTML Validation (W3C)
HTML Primer

1st Page: HTML editor
NVU - open source HTML editor 

Week 4 Web Site Design
    Design issues
    Design Document
    Design Principles
    Examples of poor design

Type and Color on the WWW
    Type on the web

Webmonkey IA tutorial
Web Design
Web Style Guide (ch. 1-4)
Web pages that suck

Why Type on the Web is So Bad
Web Style Guide (ch. 5-6)

Web Palette
Death of Web-Safe Palette?
Choosing Color Schemes
Color Schemer
Color Palette
Well Styled

Week 5 Cascading Style Sheets
    Advantages and Disadvantages
    What are they
    How to create a style
W3C CSS Info
Get Started with CSS
Webmonkey:  CSS Tutorial
CSS Tutorial & Guide
CSS Reference Table
CSS Cheat Sheet
DevShed - CSS
Introduction to CSS Layout

CSS Validator (W3C)
Week 6 Digital Image Basics:
    Image formats
    Image map

    Creating a form
    Form elements

Webmonkey: Graphics Tutorial
Optimizing Your Images
Anti-aliasing, Transparency,Web
Web Style Guide (ch. 7-8)

W3Schools Form Tutorial forms

Week 7 PHP
    Basic Syntax
    Writing a script
    Processing a form
PHP Documentation
WM:CGI Scripts for Fun & Profit ABCs of CGIs
Webmonkey XSSI Article
Webmonkey XSSI Extensions
Week 8  

    Creating a table
    Loading a table
    Selecting from a table
    Joining tables 

Group Assignment 1 due

MySQL Documentation


Week 9


Putting it all together
    PHP code to connect to MySQL
    Executing and processing queries
    Processing a form that using db

Individual Assignment 1 due

PHP Doc regarding MySQL


Week 10

    Basic syntax
    Writing a script
    automatic vs triggered script
    Form validation

Webmonkey JS Tutorial
Webmonkey DHTML Tutorial
JavaScript Cheat Sheet
Form Validation Tool
WM: JavaScript Code Library 
Week 11 Security


Apache HTTP Authentication


Week 12 Presentations Group Assignment 2 due
Week 13 Session Control
  session id
  session variables 
Week 14   Cookies Individual Assignment 2 due Dec 8

WM: Cookies make ...
WM: What Cookies Can Do for You

WM: Advanced JS & Cookies
PHP Cookies

Finals week Presentations Group Assignment 3 due Dec 13
Peer Evaluation due Dec 13
Web page

January 13, 2008