Course Outline

1

Intro & Project Overview

• Course Overview
• Course Introduction
• Pre-Test & Foundations
• In-class outline

• Webmaster in a Nutshell, Chpt 2,3,7,8
• WebStandards.org
• Usability article: Are Users Stupid? by Jakob Nielsen
• Interaction Design article: Progressive Disclosure by Jakob Nielsen

2

Info Architecture & Visual Organization

• Information Architecture
• Organizing Information
• Schemes and Structures
• In-class outline
• Intro to CSS (formatting)
  • Cascading Style Sheets intro
  • Selectors and Rules
  • Elements and Atributes
• Design document example

• Yale Style Guide - Site Design
• The Magical Number Seven - George Miller
• Information Architecture Tutorial - Webmonkey
• Designing the User Experience - Jennifer Fleming
• Web Navigation - Tiller and Green
• A Visual Vocabulary - J.J.Garrett
• Wodtke, Chpt 1,2,5,6
• Eye Tracking Study of Web Users - Jakob Nielsen
• Death of the Web-Safe Color Palette?
• Color in Motion

Some Online Webmaster Resources

• HTML Character Entities
• Color Wheel
• Quality Tips for Webmasters
• Web Developer Extension Menubar (Netscape, Firefox, Mozilla all platforms)
• W3C Link-Checker
• The Top Ten New Mistakes of Web Design
• NYPL Online Style Guide
• CSS Quick-Reference Guide
• Unix Quick-Reference Guide

3

Interaction Design

• In-class outline
• Interaction Design
• Navigation
• Storyboards and Flowcharts
• Usability
• Intro to Javascript
• ECMAScript email anchor replacement

4

Page Design

• Presentation Design
• Web Gestalt
• Browser Considerations
• JavaScript

• Webmaster in a Nutshell, Chpt 9
• Webmonkey CSS Tutorial
• Using CSS
• Webmaster in a Nutshell, Chpt 4
• Webmaster in a Nutshell, Chpt 11
• Webmonkey JS Tutorial
• Web Teacher JS Tutorial
• W3Schools Javascript Tutorial
• Browser Support Chart (Webmonkey)
• Browser Support Chart (Wikipedia)
• Webmonkey DHTML Tutorial
• DHTML Lab
• Webmaster in a Nutshell, Chpt 6
• W3Schools Form Tutorial
• The Future of Forms

5

CSS Positioning & Frames

• Cascading Style Sheets
• Selectors and Rules
• Formatting & Positioning

• Frames
• iFrames
• Asynchronous loading

• BrainJar: CSS Positioning Tutorial
• WebReference: CSS Positioning Tutorial
• A List Apart: Practical CSS Layout Tips
• WebMonkey: CSS Positioning Tutorial
• Prof Sonstein:General CSS review
• W3Schools: CSS Positioning Properties Table

6

Deeper Into Scripting

• Client-side Scripting: Javascript
• MVC: The Document Object Model
• Javascript: Review the Basics
• JavaScript: Enhancing Interactivity
• JavaScript Libraries and AJAX

• Webmaster in a Nutshell Chpt 12, 14
• PERL Tutorial
• Take the PERL Quiz
• Comprehensive Perl Archive Network
• Webmaster in a Nutshell, Chpt 13
• .htaccess on Grace
• SSI Tutorial from Apache
• Apache Software Foundation
• The Web Accessibility Initiative
• Dive Into Accessibility

• Framework example: the prototype JavaScript and AJAX framework

7

Dynamic Pages

• Dynamic Pages
• Advanced Techniques
• Cross Browser Compatability
• Development Case Study: A sliding menu system

Dynamics in the Browser

• Wikipedia article on Dynamic HTML concepts
• Example of dynamic pages using XHTML, CSS, and JavaScript: S5: A Simple Standards-Based Slide Show System
• Dynamic HTML: overview

The Document Object Model

• Document objects reference
• DOM manipulation examples
• DOM functions and examples

"Liquid Layout" Walkthrough

• Float Tutorial

In-Class Exercises

1. Create a simple cross-platform image-swapping display page, using only HTML/XHTML and CSS and JavaScript. For an example, look at this tutorial from WebMonkey.
2. Create a simple cross-platform page which opens at least one new browser window each time you try to close a browser window, using only HTML/XHTML and CSS and JavaScript. For a discussion of Window creation and manipulation, look at this other tutorial from WebMonkey. Think of this as a start on building the user interface from Hell.
3. Dynamic HTML and Layouts Exercise

Example Solution

• image rollover problem

Final Group Project Assignments

Group Final Projects presented on exam day

8

Servers & Forms

• Forms
• Basic Forms and Validation
• Forms and PHP
• Forms Processing with CGI
• The re-emergence of CGI & server-side code

Example Uses:

• Developing a comment form with server-side file storage using PHP
• A simple email comment system using forms and PHP
• N-tiered environments and database integration with PHP

Final Project Milestone

Monday: Group Final Project design document ready for in-class review

9

Servers

• PERL & CGI
• Outputting HTML (or whatever)
• Regular Expressions
• Apache configuration
• Server Side Includes & .htaccess

Final Project Milestone

Monday: Group Final Project site mock-up ready for in-class review

Wednesday: Practice Practical Exam

10

Accessability & Demos Begin

• Accessibility

Monday: Practical Exam

Final Project Milestone

Wednesday: Group Final Project functional demos ready for in-class review

exam week

• Individual Final Project due Monday midnight
• Group Final Projects presentations on exam day