COM271—Web Design and Programming
Fall 2007 (4 credits)
Dr. Patrick Logan
Department of Communications Studies, University of Rhode Island, Kingston RI 02881
Phone: 401-874-2970 | Fax: 401-874-9257 | Email: mayfly@uri.edu
Web: http://www.uri.edu/artsci/com/Logan/logan.html
http://www.uri.edu/artsci/com/Logan/teaching/html/COM271_fall_07/syl_F_07.htm

CATALOG DESCRIPTION Web development with client-side programming using XHTML, CSS, and JavaScript. Includes designing with web standards, accessibility, usability, and site development and management. (Lecture 2, Lab. 3: 4 credits)

COURSE GOALSThis course is for students who want to learn to communicate effectively using web development technology. The course explores principles and techniques of client-side programming using XHTML, CSS, and JavaScript following leading-edge standards. Coverage includes designing for web standards, accessibility, usability, and workflow for web design.

TEXTS

Web Design: A Complete Introduction. 2007.
Nigel and Jenny Chapman. Wiley. 692.p.
Eric Meyer on CSS: Mastering the Language of Web Design. 2003.
 E. Meyer. New Riders Publishing. 322 p.

Additional materials provided as handouts and via the web by the instructor.

FORMAT

We will have two weekly lectures, two 90-minute labs, and generous office hours. Lectures will discuss the W3C and its recommendations, the web standards movement, the web accessibility initiative and Section 508 mandates, as well as structure and syntax of XHTML, CSS, client-side scripting with JavaScript, and web graphics. We will analyze the content and design of web pages and sites, critiquing existing WWW materials, with an emphasis on usability, speed, and web standards. Laboratories will be based on training exercises from the instructor and from the texts.

GRADES

Grades are based on weekly programming assignments, quizzes, midterm, final, and attendance. (details).

PREREQUISITES Students with no previous programming or computer experience should note that the course is rigorous and demands time for reading and exercises; inexperienced students will only succeed by engaging in focused work and scholarship; those who persevere will become facile and masterful in programming using XHTML, CSS, and Javascript. Note: this is a 4-credit course, reflecting the investment (and return on investment) the student should expect.

SCHEDULE (Fall, 2007)

Lab (requested schedule; approved schedule TBA): Quinn Computer Lab (215), T-Th, 3:30-5:20. | Lecture: 214 Quinn, M-W, 3-3:50.

COURSE OUTLINE

Week 1 (Sept. 5-6)

Lecture 1:

The course: Goals, syllabus, grades, assignment schedule, procedures.

Evolution of the WWW: Changes in the nature and scope of the web—1990-2005. The growing role of the web in contemporary information technology.

Lab 1:

Web site management: Building, testing, and serving pages. Setting up a local server. Communicating with a remote server via FTP. Site definition.

Assignment:

Reading:
Chapman & Chapman (Web Design), cpts. 1, 2.

Programming: Establishing local and remote sites, creation of an individual course assignment home page and an on-line resume page. (Assignment 1)

Week 2 (Sept. 10-13)

Lecture 1:

Standards W3C, the World Wide Web Consortium. The Web Standards Project. W3C recommendations as standards. Document Type Definitions from the W3C. Backward compatibility for old browsers.

The client-server model Client-side versus server-side web development. Server technology from Microsoft and open source. Designing for standards or for browsers?

Core HTML — Concepts Tags as content containers. Elements, attributes, and attribute values. Block and inline elements.

Lab 1:

Document structures: <!DOCTYPE>, <head> and <body>. Tags: <title>, <h1...h6>, <p>, <img />, <br />, and <hr />. Setting elements and attributes with <style>.

Lecture 2:

Introduction to XHTMLLogical and physical structuring of content: HTML for structure, CSS for layout, and XML for standards.

XHTML as XML SGML and XML. Defining "well-formed" and "valid" XML documents. XML validators. XHTML Document Type Definitions "strict," "transitional," and "frameset.". Comparing HTML to XHTML.

Lab 2:

Core XHTML — Layout

Assignment:

Reading:
C & C, cpts. 3, 5.

Programming: Use structural XHTML to create an on-line resume. (assignment 2)

Week 3 (Sept. 17-20)

Lecture 1:

Core XHTML — Structural Elements

Lab 1:

Practice using basic XHTML structures (table, row, cell, paragraph, lists) to organize page content and to determine page layout.

Lecture 2:

Lab 2:

Practice creating a frame layout with a simple navigation menu.

Assignment:

Review / Quiz: (Posted; due 3:00, Sept. 26.)

Reading:
C & C, cpt. 4.

Meyer (Eric Meyer on CSS), project 1.

Programming: Meyer, cpt. 1 exercise applied to assignment home page and resume (assignment 3)

Week 4 (Sept. 24-27)

Lecture 1:

Core XHTML — Cascading Style Sheets The XML way: Separating style from content and structure. Selectors: Class and ID rules. CSS structure: inheritance, specificity, and the cascade. Properties. Inline, embedded, and external style sheets.

Styling text: Controlling spaces within and around words. Box border effects. Units and values. CSS for text and font properties. Colors and backgrounds under CSS. Color coding in hex, percentages, names.

Lab 1:

CSS for basic page layout (press release and events calendar).

Lecture 2:

The Box Model. Styling with content, padding, borders, and margins. Which browsers get it right.

Browsers and CSS NN4, IE5, Mac IE5.5, Safari, IE6, NN6-7, Firefox, and Opera. What to expect. What won't work. Hacks and other work-arounds. Designing pages that degrade gracefully in older browsers.

Lab 2:

CSS for hyperlinks and menus Link states and attributes. Dynamic rollover menus using CSS only.

Assignment:

Reading and Exercises:
Meyer, cpts. 2-5

Programming: CSS Menu for personal resume page (assignment 4)

Week 5 (Oct. 1-4)

Lecture 1:

Media: Separating styling for screen vs. print.

Lab 1:

Non-Screen media: Setting up a page for print media.

Lecture 2):

CSS positioning: Relative, absolute, and fixed positioning. The IE6 fixed positioning workaround. Foreground and background positioning.

Multi-column layout using CSS: CSS positioning to replace nested tables for layout.

Advanced positioning techniques: Achieving curved layout designs. Layering effects. Making text readable over complex backgrounds. Browser positioning bugs.

Lab 2:

Positioning: Setting up columns without using html <table> element.

Assignment:

Review / Quiz: (Posted here, 2 p.m., Oct. 15; due 3:30, Oct. 17.)

Reading and Exercises:
Meyer, cpts. 6, 8-10

Programming: CSS for positioning and spacing (assignment 5)

Week 6 (Oct. 9-11)

Monday, Oct. 8, is Columbus Day: Classes do not meet.

Lab 1:

CSS positioning Work on assignment 5.

Lecture:

Introduction to Javascript Client-side Programming (for browsers); The <script> Element. Event Handlers.

Language characteristics Variables. Arrays, Objects, Expressions. Flow Control. Functions.

Lab 2:

JavaScript arithmetic and logic Operators (assignment, bitwise, comparison, etc.); statements—branching (if's) or looping (while, do-while, for loops). Here we will work through a few code examples to begin exploring how JavaScript can be used for simple animation effects (movement of page elements, sliding menus): see assignment 6, below.

Assignment:

Reading:
C & C, cpt. 7, p. 340-370.

Examples:

Programming: JavaScript for animation (assignment 6)

Week 7 (Oct. 15-18)

Lecture 1

JavaScript data Variables, data types (simple and composite), declaration, conversion.

JavaScript subroutines Functions, scope of variables, parameter passing.

Lab 1:

Using Variables and Operators: Programming a calculator.

Lecture 2):

JavaScript's Built-in Objects Array, Date, Math, Boolean, Number, String, Global

The DOM and Javascript Object Models The W3C Document Object Model; nodes;

DHTML: Javascript + CSS = Dynamic HTML

Lab 2):

Checking input: Using JavaScript to evaluate input (assignment 7, below).

Assignment:

Reading and Exercises:
C & C, cpt. 7, p. 370-418.

Again, the following notes are for reference only. They will be significantly supplemented by in-class handouts (or replaced during the semester).

Examples:

Programming: A simple (error-proof) calculator (assignment 7)

Week 8 (Oct. 22-25)

Mid Semester is October 22 (already?!): Assignments 1-6 must be complete and on the server for review by the instructor.

Lecture 1

Event Handling Handlers and Objects. Mouse Events; browser events.

DHTML for Image Swapping Graphic Navigation (How do those fancy rollover buttons work?)

DHTML for style and content More on using Javascript and the DOM to manipulate document content and element properties

Lab 1: Work on the calculator (assignment 7)

Lecture 2:

Photoshop's ImageReady How Photoshop / Imageready generates JavaScript for really fancy graphic rollovers

Lab 2:

Rollovers Use of ImageReady to make a 3-button, 2-state (normal and hover) graphic menu

Assignment:

Reading and Exercises: C & C, cpt 7.

Assignment 8 is withdrawn. See Revised Assignments.

Programming: Client-side page security OR Style-sheet switching (assignment 8)

Week 9 (Oct. 29-Nov. 1)

Lecture 1:

Web Accessibility ADA Section 508. The web accessibility movement.

Changing style sheets: CSSZenGarden.COM—"The Beauty of CSS Design." Meeting the demands of 508. Alternative style sheets. Switching classes (C & C, p. 390-401)

Lab 1:

Advanced JavaScript: Work on Assignment 8

Lecture 2:

Design for Usability: Visual Communication, layout, color, and content. Writing for the web.

Lab 2:

Advanced JavaScript: Work on Assignment 8

Assignment:

Quiz / Review: (posted)

Reading and Exercises:
C & C, cpt. 9, 10.

Programming (assignment 9—due November 13)

Week 10 (Nov. 5-8)

Lecture 1:

Server-side Programming Overview Communications between client and server

Forms HTML Form elements; textbox, radio buttons, checkboxes, buttons, hidden fields; label, fieldset, and legend

Lab 1:

Forms I Creating a client-side form

Lecture 2:

Server-side Programming to process forms Reading and using form data.

Lab 2:

Forms II: Responding to form options—An overview of server-side scripting.

Example:

Assignment:

Reading and Exercises: Handout from T. Powell. HTML & XHTML, 4th ed., cpt. 12, Forms.

Week 11 (Nov. 12-15)

(November 11 is Veteran's Day. There are no classes.)

Lecture 1:

Form field validation Using Javascript for client-side validation of form data.

Lab 1:

Data Entry Using Javascript for form-field validation.

Lecture 2:

AJAX Asynchonous JavaScript and XML. The Google Map Application to illustrate AJAX.

Lab 2:

Open: Work on assignment 9.

Readings: Handouts (TBA)

Week 12 (Nov. 19-21)

Thanksgiving Day recess begins Thursday.

Lecture 1:

Web site optimization Crunching XHTML, using CSS to replace DHTML, and light-weight graphics to speed up web sites.

Advanced topic: List-based menus Using <li> and <a> tags with CSS pseudo-selectors for effective multi-background menus. IE limitations and workarounds (*sigh*).

Notes: Speed Up Your Site

Lab 1:

List-based CSS menus CSS for menus, with layer effects and fixed position backgrounds.

Lecture 2:

Review and discussion.

Assignment:

Reading and Exercises: Excerpts from More Eric Meyers on CSS, cpt. 2 (optional),5,6 (class handouts).

ProgrammingList-based CSS Dropdown Menus (assignment 10—due 12/4)

ProgrammingJavaScript and CSS Proficiency—OR—Form-driven Book Review Database (2 Options, Choose 1) (assignment 11—due 12/18) (example) (code used to generate example)

Week 13 (Nov. 26-29)

Lecture 1:

Website Design / Redesign Development of a professional web development practice. Overview of site redesign. Client survey.

Designing for Usability Combining program technique with structured content and web-centric writing to better serve site users.

Lab 1:

List-based CSS menus (continued)

Lecture 2):

Project Design / Redesign Creative Brief. Project Overview. Scheduling and budget. Structure, interface, and site integration.

Lab 2:

List-based CSS menus Finish work on assignment 10.

Reading and Exercises: C & C, cpt. 11.

Week 14 (Dec. 3-6)

Lecture 1:

Testing, launching, updating, and decommissioning your web sites Maintenance. How to keep content fresh and users aware of what’s new?

Content Management Systems Building maintain-it-yourself sites.

Lab 1:

Lab final In-class test of client-side web development skills.

Lecture 2:

Dynamic web sites and growing web functionality Where is the web going next, and what do I have to learn to go with it?

Lab 2:

Feedback

Week 15 (Dec. 10)

December 10 is the last day of class.

Final Exam: (To be posted here, 5 p.m., Nov. 19; due December 18, between 3:00-6:00.)