COM271—Web Design and Programming
Fall 2009 (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

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

HTML & XHTML, 4th ed.
2003. Thomas Powell. McGraw Hill (Osborne). 932 p.
Eric Meyer on CSS: Mastering the Language of Web Design.
2003. Eric Meyer. New Riders Publishing. 322 p.
Javascript, 2nd ed.
2004. Thomas Powell. McGraw Hill (Osborne). 948 p.

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

A note on texts: The two Osborne books are clearly references, but they also provide good breakdowns of XHTML and Javascript, and many examples. Can a reasonably experienced programmer (most computer science majors, for example) get along without them, using web sources for programming structures and examples to copy? I think so. If you are new to programming, I strongly advise that you have these at hand. You may be able to find used copies from Amazon. Check here for the Obsborne XHTML text and here for the Javascript text. The Meyer CSS text contains exercises that are to be worked through in their entirety, and I do not see how anyone can do that without acquiring the book (check Amazon for used book prices). PLEASE NOTE that you will need the XHTML text the first week, the Meyer book no later than the third week, and I am not going to be sympathetic to the excuse "it hasn't arrived yet."

FORMAT

We have two weekly lectures or workshops, two 2-hour labs, and generous office hours. Lectures will discuss structure and syntax of XHTML, CSS, and client-side scripting with JavaScript; the W3C and its recommendations; the web standards movement; the web accessibility initiative and Section 508 mandates; 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 2009)

Lab (M & W 3:00-4:50): Quinn Computer Lab (215) | Lecture: 215 Morrill, T &Th, 4-4:50.
(Note that this is a change that took place in mid August).

COURSE OUTLINE

Week 1 (Sept. 9, 10)

Lecture 1:

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

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

Logical and physical structuring of content XHTML for structure, CSS for layout, and JavaScript for client-side programming.

Lab 1:

Web site management: Building, testing, and serving pages. Setting up a local server; using a remote server for development and production. Communicating with a remote server via FTP. Site definition. (assignment 1, parts I&II)

Assignment:

Reading:
XHTML, cpts. 1, 3.

Programming: Establishing local and remote sites, creation of an individual course assignment home page, an on-line resume page, and a wire-frame sight for the remaining course assignments website. (assignment 1)

Week 2 (Sept. 14-17)

Lecture 1:

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

Document structures: <html>, <head> and <body>.

Elements (="Tags" or "Containers"):

Lab 1:

Work on assignment 1, parts III & IV, setting up list-based navigation.

Lecture 2:

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.

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:

Work on assignment 1, parts V & VI, creating site wire-frame and completing navigation.

Assignment:

Reading:
XHTML, cpts. 4, 5.

Programming: Continue work on assignment 1.

Week 3 (Sept. 21-24)

Lecture 1:

Attributes

Lab 1:

Work on assignment 1, part VI, personal online resume.

Lecture 2:

Cascading Style Sheets The XML way: Separating style from content and structure.

Selectors: Elements, Class and ID, contextual (descendent) rules.

Attributes and values

CSS structure: inheritance, specificity, and the cascade.

Inline, embedded, and external style sheets.

Lab 2:

Complete work on assignment 1.

Eric Meyer on CSS: project 1

Assignment:

Review / Quiz: (to be posted here)

Reading:
XHTML, cpts. 6, 7, 8(optional), 10.

Meyer (Eric Meyer on CSS), project 1.

Programming: CSS styles for site and resume (assignment 2)

Week 4 (Sept. 28—Oct. 1)

Lecture 1:

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 positioning (assignment 3)

Week 5 (Oct. 5-8)

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: (to be posted here)

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

Week 6 (Oct. 12-15)

Note: Classes do meet on Columbus Day, October 12

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

Assignment:

Reading:
JavaScript, cpt. 1, 2 (p. 3-44).

Examples:

Week 7 (Oct. 19-22)

Labs:

Complete Assignment 3; begin assignment 4 (part 1)

Review Meyer project 7: Making an Input Form Look Good

Lecture 2

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

JavaScript subroutines Functions, scope of variables, parameter passing.

Assignment:

Reading and Exercises:
JavaScript, cpt. 3, 4, 5 (p. 47-132) | XHTML, cpt. 12.

Examples:

Programming: Simple JavaScript Form Validation (assignment 4)

Week 8 (Oct. 26-29)

Mid Semester is October 26 (already?!)

Lecture 1

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

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

Labs:

Work on Assignments 4 or 5

Lecture 2:

DHTML: Javascript + CSS = Dynamic HTML

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

Assignment:

Reading and Exercises: JavaScript, cpt. 9, 10, 11.

Programming:

Week 9 (Nov. 2-5)

Lecture 1:

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

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.

Labs:

Work on Assignments 4 or 5

Lecture 2:

Assignment:

Quiz / Review: (here)

Reading and Exercises: JavaScript, cpt. 6, 7, 8

Week 10 (Nov. 9-12)

Note: Wednesday is Veterans Day and classes do not meet.

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

Labs:

Work on Assignment 5

Lecture 2:

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

Example:

Programming: Independent work (assignment 7)

Week 11 (Nov. 16-19)

Lecture 1:

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

Labs:

Work on Assignment 6

Lecture 2:

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

Programming: List-based CSS Dropdown Menus (assignment 6)

Week 12 (Nov. 23-25)

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.

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: 2,5,6 (class handouts describe projects, but you will be expected to download stylesheets and to figure them out for yourselves at this point (with instructor help as needed)).

Week 13 (Nov. 30—Dec. 3)

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.

Labs this week:

List-based CSS menus (continued)

Lecture 2):

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

Client survey (pdf) | Creative Brief Communication (pdf) | A & S Client survey (MSWord) | A & S Creative Brief (MSWord)

Week 14 (Dec. 7-10)

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.

Labs:

Wrap up: Final review of course website, including index page with links to all assignments, page commenting (html and javascript).

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?

Feedback: Class discussion of what we did, did well, didn't do, or did poorly; suggestions for improvement and future changes. NOTE: Be certain to fill out online course evaluation this week.

Classes end December 11.

Final Exam: (To be posted here)