Web Design and Implementation

Intro & Project Overview

Course Overview: Introduction & Foundation Materials

Readings

• 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

Info Architecture & Visual Organization

• Information Architecture
• Organizing Information
• Schemes and Structures
• In-class outline
• Intro to CSS (formatting)
• Design document example

Readings

• Yale Style Guide - Site Design
• 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

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

• Groups assigned in class, first class meeting
• Individual Course Web Page, due Monday midnight

Interaction Design

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

Group Web Page due Sunday midnight

Page Design

• Presentation Design
• Web Gestalt
• Browser Considerations
• JavaScript

Readings

• 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 (Wikipedia)
• DHTML Lab
• Webmaster in a Nutshell, Chpt 6
• W3Schools Form Tutorial
• The Future of Forms

A Bit of This and a Bit of That: CSS, PHP, & JavaScript

• Cascading Style Sheets
• Selectors and Rules
• Formatting & Positioning
• Frames
• iFrames
• Asynchronous loading
• PHP and XBitHack for Modularization

Readings

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

Individual Midterm, due Wednesday midnight

Deeper Into Scripting

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

Readings

• Webmaster in a Nutshell Chpt 12, 14
• PERL Tutorial
• Take the PERL Quiz
• Comprehensive Perl Archive Network
• Webmaster in a Nutshell, Chpt 13
• SSI Tutorial from Apache
• Apache Software Foundation
• The Web Accessibility Initiative
• Dive Into Accessibility
• Framework example: the prototype JavaScript and AJAX framework

Group Midterm, due Wednesday midnight

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

The Document Object Model

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

"Liquid Layout" Walkthrough

• Float Tutorial

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

Accessability & Demos Begin

Monday: Practical Exam

Final Project Milestone

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

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