COM310 (Special Topics)—Client-side Web Development
Fall 2005
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
http://www.uri.edu/artsci/com/logan/COM310.htm

COURSE GOALS This course is designed for students who want to learn to communicate effectively using web development technology. You will learn principles and techniques for client-side programming using XHTML, CSS, JavaScript, and web graphics. Coverage includes designing for web standards, accessibility, usability, and workflow for web design. Emphasis is on separating the content, structure, and presentation of communications for screen, print, aural, or other media using standards-based extensible markup language (XML) technologies.

TEXTS

HTML and XHTML, 4th edition. 2003.
 Thomas A. Powell. McGraw Hill. 956 pp.
Photoshop 7 / ImageReady 7 HOT Hands-on Training. 2003.
 J. Kabili and L. Weinman. Peachpit Press. 591 pp., +CD.
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

None.

SCHEDULE (Fall, 2005)

Lab: Quinn Computer Lab, Tuesday and Thursday, 9-10:30 (or by arrangement). | Lecture: Monday and Wednesday, 8-8:50, 102 Ballentine. (Class #21584, COM310.0004)

COURSE OUTLINE

Week 1 (September 7-9)

Lecture (Wednesday, September 7):

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

Evolution of the WWW: Changes in the nature and scope of the web—1990-2005—and the influence of the web on modern information technology.

Lab (Thursday, Sept. 8):

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 12-16)

Lecture (Monday, September 12):

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 13):

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 14):

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 15):

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 19-23)

Lecture (Monday, September 19):

Core XHTML — Structural Elements

Lab (Tuesday, September 20):

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

Lecture (Wednesday, September 21):

Lab (Thursday, September 22):

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 26-30)

Lecture (Monday, Sept. 26):

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 27):

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

Lecture (Wednesday, Sept. 28):

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 29):

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

Lecture (Monday, October 3):

Media Separating styling for screen vs. print.

Lab (Tuesday, October 4):

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

Lecture (Wednesday, October 5):

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 6):

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 10-14)

Monday the 10th is Columbus Day: Classes do not meet. Monday clases will meet on Wednesday (i.e., we have one lecture this week).

Lab (Tuesday, October 11):

Photoshop Basics Photoshop vs. ImageReady, Interface, Color.

Lecture (Wednesday, October 12):

Introduction to web graphicsCompression: GIF, JPEG, or PNG file formats—which to use and why it matters.

Image size and download speed Speed counts—the psychology of web performance. Images and response time.

Image sourcesUsing images from Google or other image search engines. Scanning. Digital photography.

Images for the web vs. images for print. Resolution. Color: CYMK vs. RGB. Web color: Web-safe, hexadecimal, gamma, dither and other color terminology.

Lab (Thursday, October 13):

Image optimization Getting web-ready images.

Type Characters and paragraphs, text and images of text.

Assignment:

Reading and Exercises Green, cpts. 1-4, 6.

Programming Complete all exercises that accompany readings for this week (assignment 6)

Week 7 (October 17-21)

Lecture (Monday, October 17)

Image Editors Toolboxes. Menus, palettes, and tabs. Default settings. Shortcuts. Photoshop / ImageReady, and Fireworks.

Color profiling Setting preferences for the web.

Creating images for the web Optimization. JPEGs for photographs and complex images. Matting images. GIFs for graphs, transparencies, animations. PNG files. 8 and 24-bit color. Dithering. Previewing in a browser.

Typography HTML character fonts versus type in images. Rasterizing and transforming type.

Lab (Tuesday, October 18):

Layers Moving and linking layers, solid and gradient color layers, patterns, adjustment layer, groups.

Lecture (Wednesday, October 19):

Special Effects for Type and Graphics (in-class demo) Working with layer styles. Understanding styles and style options. Overlays. Shadows and Glows. Satin. Stroke. Bevel, Emboss, Contour, Texture, and blending options.

Combining layer effects How to create special effects for letters: Photoshop effects to create Lucite, chrome, wood, glass, or steel.

Lab (Thursday, October 20):

Layer Styles Bitmaps vs. vectors. Photoshop shape tools and shape layers.

Assignment:

Reading and Exercises: Green, cpts. 5,7.

Excerpts from Photoshop Wow, cpt. 8.

ProgrammingFixed image background for personal resume page (assignment 7)

Week 8 (October 24-28)

Lecture (Monday, October 24) MIDTERM

Lab (Tuesday, October 25):

Background images Sizing, defining, editing, previewing, and saving a background image. Seamless tiling. Offset. Seamless photographic background images. Full-screen and large-screen background images.

Lecture (Wednesday, October 26):

Navigation Overview of approaches and alternatives for site navigation. Text links. Javascript rollovers. CSS pseudoselectors. Flash.

Lab (Thursday, October 27):

Transparent GIFS Transparency, transparent layers, masks and GIFs. Problems on the edge. Anti-aliasing. Transparent layer versus transparent GIF. Browser offsets.

Image maps Server-side or client-side images maps? Image maps from drawing tools. Image maps from layers. Fitting an image map to text.

Assignment:

Reading and Exercises: Green, cpts. 8, 9, 12.

ProgrammingFixed image background for personal resume page (assignment 8)

Week 9 (October 31 - November 4)

Lecture (Monday, October 31)

Slicing Slice types. Slicing and selecting. Optimizing, previewing, saving, and using slices.

Rollovers One-button rollover without slicing. Slicing before you rollover. Single-button rollover with layer visibility. Previewing rollovers in browsers. JavaScript and rollover states. Remote rollovers. Saving complicated rollovers.

Lab (Tuesday, November 1):

Slicing Preparing a graphic navigation bar with rollovers

Lecture (Wednesday, November 2):

Graphic Rollovers I Creating and promoting a layer-based slice with a rollover. Navigation bar artwork in layers.

Rollover styles: creating, customizing, reusing. Style palettes for buttons and type. Importing JavaScript and images into HTML.

Lab (Thursday, November 3):

Graphic Rollovers II Layer based rollover buttons with text.

Assignment:

Reading and Exercises: Green, cpts. 10,11,16-exercise 6.

ProgrammingGraphic Rollovers for Navigation (assignment 9)—due 11/14

Week 10 (November 7-11)

Lecture (Monday, November 7)

Dynamic client-side HTML An introduction to Javascript. The DOM. Event handling. Combining Javascript with CSS to create DHTML. Examples of client-side DHTML.

Lab (Tuesday, November 8):

DHTML Javascript for dynamic style changes

Lecture (Wednesday, November 9):

Forms Preparing for server-side interactivity with client-side HTML forms. The <form> tag. Form elements and attributes.

Lab (Thursday, November 10):

Forms Preparing an XHTML form

Assignment:

Reading and Exercises: Powell, cpts. 12-14.

Week 11 (November 14-18)

Lecture (Monday, November 14)

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

Lab (Tuesday, November 15):

Core web animation CSS and JavaScript: DHTML for simple movements.

Lecture (Wednesday, November 16):

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

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

Lab (Thursday, November 17):

Animated GIFS Tweening with varying opacity, position, and timing.

Flash (demonstration) Flash as an alternative for navigation and special dynamic effects. Animation basics. Shape, motion, color and other tweening effects.

Assignment:

Reading and Exercises: Green, cpt. 13.

Additional handout on DHTML

Week 12 (November 21-23)

Thanksgiving Day recess begins Thursday, November 24.

Lecture (Monday, November 21)

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 22):

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

Lecture (Wednesday, November 23):

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 28-December 2)

Lecture (Monday, November 28)

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

Lab (Tuesday, November 29):

List-based CSS menus CSS for dropdown or slide-out menus.

Lecture (Wednesday, November 30):

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

Lab (Thursday, December 1):

Work on Assignment 10.

Assignment:

Week 14 (December 5-9)

Lecture (Monday, December 5)

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 6):

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

Lecture (Wednesday, December 7):

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 8):

Feedback Return and review of lab final. SET’s and feedback to the instructor.

Final Exam (TBA)

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