it660

Web systems and interface design

instructor Ellen M. Zimmer
e-mail: zimmer@edinboro.edu
office phone: 732-1179
Course
Description &
Prerequisites
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.
Topics
Covered
  • 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 &
Materials

The following texts are available at the campus library, or you can order them from the campus bookstore or any online booksellers such as www.amazon.com and www.bn.com:

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

OR

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

OR

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!

Grading

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.

Projects

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 http://cslab103.cs.edinboro.edu/~your_user_name/it660/) 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%)
Course
Outline

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

Date
Topics Covered
Readings/Assignments
Week 1 Course Overview

Linux
    Connecting
    logging on
    Files
    Path/directories
    Linux and the web


Understanding the Internet
    Protocols
    IP address
    Internet Searching
    History
 

 

WebMonkey: Unix Guide
Putty

 

 

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

 

 

Email
    Server
    Client
    Attachments

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

How Email Works

Week 3 XHTML
    XML, XHTML, HTML
    Authoring tools
    XHTML Tags
    DOCTYPE
    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
    Typeface
    Color

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
ColorMatch
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
    Roll-overs

Forms
    Creating a form
    Form elements

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

W3Schools Form Tutorial
Builder.com: forms

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

MySQL
    Connecting
    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

Javascript
    Basic syntax
    Writing a script
    automatic vs triggered script
    DOM
    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
updated

January 13, 2008