CSCI 481/581: Summer, 2004

Skip Navigation

Topics, by Class

1. Introduction
2. Interviews, XHTML
3. Structure & Presentation
4. Multiple components
5. Presentation revisited
6. Client-side interactivity
7. Server-side interactivity
8. Web graphics
9. Accessibility
10. Security
11. Final

1. Syllabus
2. Resources
3. Class Topics Index
4. Assignments

 

Class Topics

Skip to Main Content

1. Class One: Introduction; site design; HTTP protocol; account setup
2. Class Two: Client interviews; elements of HTML and XHTML; create a page
3. Class Three: Structure vs presentation: alternative text, tables, div and span, intro CSS
4. Class Four: Integrating multiple components: frames, SSI, forms
5. Class Five: Document presentation: more selectors, CSS box model, lists and menus; K.I.S.S.
6. Class Six: Client-side interactivity: JavaScript programming, examples
7. Class Seven: Server-side interactivity: using CGI, examples, CGI scripts on wyrd.hood.edu; PHP
8. Class Eight: Web graphics: preparing images for web pages, image maps, graphic identity
9. Class Nine: Accessibility Standards: Section 508, WAI
10. Class Ten: Security: issues and actions, .htaccess files, robots.txt
11. Class Eleven: Final, Project Presentations

Alert: The class notes are not a substitute for reading the textbooks.

Class One: Introduction

Text Readings:

• Musciano & Kennedy: Preface, Chapters 1-2
• Schmitt: Intro
• Krug: Intro, Chapters 1, 2

Online Readings

• Top Ten Web Design Mistakes of 2003 by Jakob Nielsen, at Jakob Nielsen's Alertbox
• Usability 101 and Misconceptions About Usability by Jakob Nielsen, at Jakob Nielsen's Alertbox

Topics:

1. Syllabus
2. Registered Students:Complete Student Information Form
3. Stages in Building a Site
4. Overview of client interview process:
   • How to prepare
   • How to document
   • How the Clients will prepare
5. BREAK: Form teams
6. Web overview
7. In-class lab activity: account setup

Homework:

1. READ the text readings assigned for for Class 2.
2. LOOK OVER the notes and activities for for Class 2.
3. PREPARE for the client interviews.
4. Individual Assignment 1 Individual index page, with assorted attachments - Due Class 3.
5. Team week 1: Initial planning and team site

On-line references

• Acceptable Use Policies for wyrd.hood.edu.
• Jakob Nielsen's Alertbox usability articles.

Other References

• Practical Perl Chapter 1, for Web overview
• Practical Perl Appendix A for setting up a server; Appendix B, for some Unix commands

Class Two: Focus on the XHTML Document

Text Readings:

• Musciano & Kennedy: Chapters 3-7, 15, 16

Online Readings

• Better Living Through XHTML by Jeffey Zeldman at A List Apart
• How to Read W3C Specs by J. David Eisenberg at A List Apart

Topics:

1. Client Interviews
2. Break
3. Basic elements of XHTML
4. The emmel family - SG, HT, X, and XHT
5. In-class lab activity: Create a basic page   Publish your page

Homework:

1. READ the text readings assigned for for Class 3.
2. LOOK OVER the online readings and notes for for Class 3.
3. Individual Assignment 2 Site Reviews- Due Class 4.
4. Team week 2 Interview; document your planning and interview; begin analysis.

On-line references

• W3C HTML Validation Service at http://validator.w3.org/
• W3C Link Checker at http://validator.w3.org/checklink
• http://www.w3.org/MarkUp/#tutorials W3C HTML Tutorials
• http://www.nypl.org/styleguide/ New York Public Library Style Guide
• http://www.w3.org/MarkUp/#guidelines W3C Authoring Guidelines
• Form to submit a page to HTML TIDY
• XHTML reference sidebar tabs at http://www.zvon.org/Output/bar_list.html.
• HTML 4.0 reference sidebar tab at http://devedge.netscape.com/toolbox/sidebars/.

Class Three: Focus on Presentation

Text Readings:

• Musciano & Kennedy: Chapters 8, 10
• Schmitt: Chapters 1-3;
• Krug: Chapter 3-5;

Online Readings

• Design Rant by Owen Briggs at The Noodle Incident
• Guidelines for Visualizing Links and Let Users Control Font Size by Jakob Nielsen, at Jakob Nielsen's Alertbox

Topics:

1. More HTML
   • Images: Information text: alt and title attributes.
   • Tables: Presenting tabular data
   • Tags and attributes: div, span, and more
2. Structure vs Presentation: Controlling presentation with style sheets

Homework:

1. READ the text readings assigned for for Class 4.
2. LOOK OVER the online readings and notes for for Class 4.
3. Individual Assignment 3 Add style to your page - Due Class 5.

On-line references

• W3C CSS Validation Service at http://jigsaw.w3.org/css-validator/
• Google is god. Don't piss her off. by Vincent Flanders.
• Use of ALT texts in IMGs by Alan Flavell
• CSS Tips and Tricks at W3C
• Chapter 2 of Cascading Style Sheets by by Håkon Wium Lie and Bert Bos.
• CSS reference sidebar tabs at http://devedge.netscape.com/toolbox/sidebars/.

Other References

• Cascading style sheets 2.0: Programmer's Reference, Eric Meyer, Osborne/McGraw Hill. Everything in one place.

Class Four: Integrating multiple components

Text Readings:

• Musciano & Kennedy: Chapters 9, 11
• Krug: Chapter 6;

Online Readings

• Accessible HTML/XHTML Forms by Ian Lloyd at The Web Standards Project
• How to Create Accessible Frames at WebAIM.

Topics:

1. Frames: rendering multiple documents in one.
2. Server Side Includes: integrating multiple documents server-side.
3. Forms: structure and presentation.

Homework:

1. READ the text readings assigned for for Class 5.
2. LOOK OVER the online readings and notes for for Class 5.
3. Individual Assignment 4 Use frames and SSI - Due Class 6.
4. Team week 3: Continue analysis; begin design

On-line references

• Apache Module mod_include Documentation
• Apache Tutorial: Introduction to Server Side Includes

Class Five: Document presentation revisited

Text Readings:

• Schmitt: Chapter 4;
• Krug: Chapter 7;

Online Readings

• Reduce Redundancy: Decrease Duplicated Design Decisions and How Users Read on the Web by Jakob Nielsen, at Jakob Nielsen's Alertbox
• CSS positioning tutorial - the box model explained by Mike Hall at Brainjar.com

Topics:

1. More on selectors
2. The CSS Box Model
3. Lists and Menus
4. K.I.S.S.

Homework:

1. READ the text readings assigned for for Class 6.
2. LOOK OVER the online readings and notes for for Class 6.
3. Individual Assignment 5 Explore document structure - Due Class 7.

On-line references

• CSS Zen Garden Boxes are definitely not confining.
• CSS/Edge Sophisticated examples at Eric Meyer's site (most require a compliant browser)

Class Six: Client-side Interactivity

Text Readings:

• Musciano & Kennedy: Chapter 12
• Schmitt: Chapter 5;
• Krug: Chapter 8;

Online Readings

• Creating Accessible JavaScript at WebAIM.org.
• Let Them Eat Cake by Aaron Gustafson at A List Apart

Topics:

1. Client-side programming: JavaScript
   1. Using JavaScript
   2. Example: Form validation
   3. Example: Rollovers
   4. Example: Pop-up windows
   5. Example: Communicating between frames

Homework:

1. READ the text readings assigned for for Class 7.
2. LOOK OVER the online readings and notes for for Class 7.
3. Team week 4: Continue design; begin implementation

On-line references

• JavaScript tutorial by Mark Wilton-Jones at www.HowToCreate.co.uk. There are a lot of JavaScript tutorials out on the web. This one seems reasonably good. Wilton-Jones is the author of the style-switching script demonstrated on the class index page.

Other References

• Javascript: The Definitive Guide, Fourth Edition, David Flanagan, O'Reilly

Class Seven: Server-side programming

Text Readings:

• Musciano & Kennedy: Chapter 13
• Krug: Chapters 9-11;

Topics:

1. Server-side programming: external CGI programs
   1. Using CGI
   2. Example CGI applications. The HTML for the returned page is printed as output by the program.
   3. Running Perl programs as CGI scripts on wyrd
2. Server-side programming: PHP Server-parsed pages
   • Language comparison
   • PHP examples
3. File paths vs URLs
4. In-class Exercise: Install a CGI script

Homework:

1. READ the text readings assigned for for Class 8.
2. LOOK OVER the online readings and notes for for Class 8.
3. Individual Assignment 6 Scrip-a-licious - Due Class 9.

On-line references

• The CGI RFC Project Page
• Getting Started with PHP by Gez Lemon atJuicyStudio

Class Eight: Web Graphics

• Schmitt: Chapter 6;

Online Readings

• JPG vs. GIF vs. PNG at webopedia.com
• Testing Whether Web Page Templates are Helpful by Jakob Nielsen, at Jakob Nielsen's Alertbox

Topics:

1. Preparing images for web pages
2. Image maps for navigation
3. Creating a graphic identity
4. Demonstration of using Corel PhotoPaint
5. If time: animation

Homework:

1. LOOK OVER the online readings and notes for for Class 9.
2. Team week 5: Continue implementation

On-line references

• Graphics Tools, Techniques, Examples and Resources at Web DevelopersVirtual Library

Other References

• <Designing Web Graphics.4> by Lynda Weinman, New Riders

Class Nine: Acessibility Standards

Online Readings

• Introduction to Web Accessibility by Paul Bohman at WebAIM
• Usability for Senior Citizens and Beyond Accessibility: Treating Users with Disabilities as People by Jakob Nielsen, at Jakob Nielsen's Alertbox

Topics:

1. Accessibility
   1. Overview
   2. Video: Keeping Web Accessibility in Mind
   3. Section 508
   4. W3C WCAG
2. lab: Team work time

Homework:

1. LOOK OVER the notes for for Class 10.

On-line references

• Federal Rehabilitation Act Section 508
• WebAIM Section 508 Checklist
• W3C Web Content Accessibility Guidelines 1.0
• W3C Checklist for WCAG 1.0
• WAVE 3.0 Accessibility Tool
• WebAIM project at Ohio State

Class Ten: Security

Topics:

1. Security issues and techniques
   • Security issues
   • .htaccess files
   • robots.txt files
2. lab: Team work time

Homework:

1. Team week 6: Complete, review, present

On-line references

• CERT Coordination Center at Carnegie Mellon
• The World Wide Web Security FAQ hosted at W3C

Class Eleven: Final

Topics:

1. Project presentations
2. Distribute final

• CSCI 481/581 index
• echang.hood.edu
• wyrd.hood.edu
• Computer Science

Styles