COM271X—Web Design and Programming
Fall 2006 (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/COM271X/syl_F_06.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
(available at RI Book Company, Kingston Emporium)

HTML and XHTML, 4th edition. 2003.
Thomas A. Powell. McGraw Hill. 956 pp.
JavaScript. 2nd Edition. 2004.
by Thomas Powell and Fritz Schneider. McGraw Hill. 948 pp.
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, 2006)

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

COURSE OUTLINE

Week 1 (September 6,7)

Lecture (Wednesday, September 6):

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 (Thursday, Sept. 7):

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

Assignment:

Reading: Powell (HTML & XHTML), cpts. 1-4.

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

Week 2 (September 11-14)

Lecture (Monday, September 11):

Standards W3C, the World Wide Web Consortium. The Web Standards Project. W3C recommendations as standards. Document Type Definitions from the W3C.

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

Designing for Web Standards Browser development and the W3C. Backward HTML compatibility for older browsers. Browser version statistics. Deciding what client technologies you are designing for.

Lab (Tuesday, September 12):

Core HTML — Concepts Tags as content containers. Document structures: <DOCTYPE>, <head>, <body>, and <frameset> tags. Elements, attributes, and attribute values. Block and inline elements. Setting elements and attributes with <style>.

Lecture (Wednesday, September 13):

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 1.1 Document Type Definitions "strict," "transitional," and "frameset.". Comparing HTML to XHTML.

Lab (Thursday, September 14):

Core XHTML — Layout

Assignment:

Reading: Powell (HTML & XHTML), cpts. 5-9.

Programming: Use structural XHTML to redesign your course assignment home page. (assignment 2)

Week 3 (September 18-21)

Lecture (Monday, September 18):

Core XHTML — Structural Elements

Lab (Tuesday, September 19):

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

Lecture (Wednesday, September 20):

Lab (Thursday, September 21):

Practice creating a frame layout with a simple navigation menu.

Assignment:

Reading: Powell, cpts. 10,11.

Meyer, project 1.

Supplemental on the Box Model.

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

Week 4 (September 25-28)

Lecture (Monday, Sept. 25):

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 (Tuesday, September 26):

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

Lecture (Wednesday, Sept. 27):

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

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 (Thursday, September 28):

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 (October 2-5)

Lecture (Monday, October 2):

Media Separating styling for screen vs. print.

Lab (Tuesday, October 3):

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

Lecture (Wednesday, October 4):

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 (Thursday, October 5):

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

Assignment:

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

Programming: CSS for positioning and spacing (assignment 5)

Week 6 (October 9-12)

Monday the 9th is Columbus Day: Classes do not meet.

Lab (Tuesday, October 10):

Javascript Preview of client-side javascript.

Lecture (Wednesday, October 11):

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

Overview of JavaScript Language characteristics, Variables. Arrays, Objects, Expressions. Flow Control. Functions.

Lab (Thursday, October 12):

The 3 R's in Javascript

Assignment:

Reading and Exercises Handouts; Powell and Schneider, cpts. 1,2.

Programming: JavaScript for animation (assignment 6)

Week 7 (October 16-19)

Lecture (Monday, October 16)

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

JavaScript arithmetic and logic Operators (assignment, bitwise, comparison, etc.); statements—branching (if's) or looping (while, do-while, for loops)

Lab (Tuesday, October 17):

Using Variables and Operators: Programming a calculator.

Lecture (Wednesday, October 18):

JavaScript subroutines Functions, scope of variables, parameter passing.

Overview of Objects Objects and object-oriented programming in Javascript.

Lab (Thursday, October 19):

Checking input: Using JavaScript for to evaluate input.

Assignment:

Reading and Exercises: Powell and Schneider, cpts. 3-6.

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

Week 8 (October 23-26)

Lecture (Monday, October 23)

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

RegExp The Regular Expression Object

Lab (Tuesday, October 24): MIDTERM: In-lab mid-semester review

Lecture (Wednesday, October 25):

Javascript Object Models An Overview

The DOM The W3C Document Object Model; nodes; Javascript + CSS = Dynamic HTML

Lab (Thursday, October 26):

DHTML for Image Swapping Graphic Navigation

Assignment:

Reading and Exercises: Powell and Schneider, cpts. 7-10.

Programming (assignment 8)

Week 9 (October 30 - November 2)

Lecture (Monday, October 30)

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

Windows Controlling windows and frames; Iframes.

Lab (Tuesday, October 31):

DHTML for menus Creating a drop-down menu using javascript event handlers and CSS

Lecture (Wednesday, November 1):

Documents More on using Javascript and the DOM to manipulate document content and element properties

Lab (Thursday, November 2):

Assignment:

Reading and Exercises: Powell and Schneider, cpts. 11-14

Programming (assignment 9—due November 22)

Week 10 (November 6-9)

Lecture (Monday, November 6)

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 (Tuesday, November 7):

Forms I Creating a client-side form

Lecture (Wednesday, November 8):

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

Lab (Thursday, November 9):

Forms II Responding to form options

Assignment:

Reading and Exercises: Powell, cpt. 12 & 13; Powell and Schneider, pt. 14.

Week 11 (November 13-16)

Lecture (Monday, November 13)

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

Lab (Tuesday, November 14):

Data Entry Using Javascript for form-field validation.

Lecture (Wednesday, November 15):

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

Lab (Thursday, November 16):

? topic

Readings: Handouts (TBA)

Week 12 (November 20-22)

Thanksgiving Day recess begins Thursday, November 23.

Lecture (Monday, November 20)

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*).

Lab (Tuesday, November 21):

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

Lecture (Wednesday, November 22):

Review and discussion.

Assignment:

Reading and Exercises: Excerpts from More Eric Meyers on CSS, cpt. 5,6.

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

Week 13 (November 27-30)

Lecture (Monday, November 27)

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 (Tuesday, November 28):

List-based CSS menus (continued)

Lecture (Wednesday, November 29):

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

Lab (Thursday, November 30):

List-based CSS menus Finish work on assignment 10.

Week 14 (December 4-7)

Lecture (Monday, December 4)

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 (Tuesday, December 5):

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

Lecture (Wednesday, December 6):

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 (Thursday, December 7):

Feedback Return and review of lab final.

Week 15 (December 11)

SET’s and feedback to the instructor. Last day of class.

Final exam period is Dec. 14-15, 18-22 (Final TBA)