Spring 2015

COM 271: Web Design and Programming

References and Useful Links | Tasks and Reviews

Dr. Patrick Logan
Department of Communications Studies, University of Rhode Island, Kingston RI 02881
Office: 108 Davis Hall | Phone: 401-874-2970 | Fax: 401-874-9257 | Email: mayfly@uri.edu
Web: http://www.uri.edu/artsci/com/Logan/logan.html


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


Our goal is to develop a high degree of competence as a web developer by learning principles and techniques of client-side programming with HTML, CSS, and JavaScript. Coverage includes designing for web standards, accessibility, usability, and workflow for web design.


Text material is all available online (links below). The following are supplementary with useful exercises and practice. They will be given to you for free.

book cover for Eric Meyer on CSS

Eric Meyer on CSS: Mastering the Language of Web Design.
2003. Eric Meyer. New Riders Publishing. 322 p.

book cover for More Eric Meyer on CSS

More Eric Meyer on CSS: Mastering the Language of Web Design.
2004. Eric Meyer. New Riders Pub. 271 p.

Readings, including notes used in classroom lectures and discussions, are provided as links from this syllabus.


We meet twice weekly for lecture/discussion, and twice for 2-hour labs, and there are abundant office hours. Laboratories will focus on practice from the text and on related assignments.


Grades are based on weekly programming tasks, reviews, and attendance.


None. The course is 4-credits because it requires a substantial workload.

SCHEDULE (Spring 2015)

Lab (Monday & Wednesday 9:00-10:50): 102 Fine Arts Center
Lecture (Monday & Wednesday, 8:00-8:50): 251 Chafee Hall.


Week 1 (Jan. 21)—Introduction and HTML


Introduction: The Syllabus (goals, schedule, on-line materials). Assignments and grading. Web bibliography.

The client-server model: Client-side versus server-side web development.

What we will learn this semester: HTML for structure, CSS for layout, and JavaScript for client-side programming; Suggestions for learning.

Lab: Introduction to the lab and Dreamweaver. Work on task 1.

Task 1—Web Site Basics: Dreamweaver, ftp. Index.html (home page).

Preparation for Task 3 (next week): Notes on Writing a Resume.

Week 2 (Jan. 26, 28)—HTML


HTML: Elements. Attributes and values. HTML5 Semantic elements (W3Schools) | CanIuse (website) browser support for "new semantic elements"

HTML Tables: Table, heading, row, data elements and attributes. Table structure not for page layout.

Links and server-side includes: HTML links and anchors. Linking to external files to modularize html, build script libraries, or share styles; Server-side Includes.

Other <Head> Element tags: Title, Meta (for keywords and descriptions); !DOCTYPE and Document Type Definition (DTD).

Standards: W3C, the World Wide Web Consortium: W3C recommendations as standards.

HTML rules: Extensible markup languages; "well-formed" and "valid" XHTML; validators and the Mozilla Web Developer Add-on.


Photoshop: This week, a brief in-lab primer on using photoshop to crop and size images, adjust colors and brightness (see also, week 3, Photoshop..., below).

Task 2—Simple HTML Table layout: HTML Bio Page.

Task 3—Nested HTML Table layout: Simple Resume. (See Notes on Writing a Resume)

Weekly Review: (HTML I)

Week 3 (Feb. 2, 4)—HTML & Introduction to CSS


Standards: W3C, the World Wide Web Consortium: W3C recommendations as standards.

HTML rules: Extensible markup languages; "well-formed" and "valid" XHTML; validators and the Mozilla Web Developer Add-on.

Frames: A glance at a common but deprecated element; advantages and disadvantages; frame and frameset properties.

Images: Image types (JPG, GIF, PNG). Image file sizes. Making or finding images. Photoshop for image cropping and sizing.

Bringing Styles to Web Pages: Inline, embedded, and external styles.

Writing Style Rules: Writing CSS selectors and rules to tie style attributes and values to html elements.

The cascade: Inheritance, specificity, and the cascade.


Practice: Meyer Projects 1 and 2, "Converting an existing page" and "Styling a Press Release." (Apply in Task 4)

Task 4—HTML Table rowspans and Introduction to CSS Styling: Schedule.

Task 5—Server-side Include for Navigation: Site-wide navigation from a single file.

Special snow-day exercise (optional): Try this if you are snow-bound and bored (posted Feb. 9, our third snow day)

Weekly Review: (W3C & HTML II)

Week 4 (Feb. 9, 11)—CSS


Styling text: Font and text properties.

Media: Separate style sheets for screen and print.

Print Media: Controlling Page Breaks.

The Box Model: Styling with content, padding, borders, and margins. Using margins to separate and position.

Color: Color and background color. Color coding in hex, percentages, names.


Practice: Meyer Projects 5 and 6: "How to Skin a Menu" and "Styling for Print."

Task 6—Skinning your menu: Styling Navigation Links.

Task 7—Print media: Style for Print.

Weekly Review: (CSS Basics)

Feb. 16 is President's Day. Classes DO NOT meet and for us there is no makeup day (it's Wednesday).

Week 5 (Feb. 18)—CSS


CSS positioning: Static, relative, and absolute positioning.

Floating: Floated elements and their margins.

Styling Links and Lists: Pseudostates and lists within lists.

Generating text: "Greeked text" for text-filling—Lorem Ipsum and Cupcake Ipsum.

Fonts from Google: Embedding Fonts on Your Web Page.


Practice: Meyer Projects 8 and 9: "Creating an On-line Greeting Card" and "Multicolumn Layout."

Task 8Absolute Positioning.

Weekly Review: (Typography and the Box Model)

Week 6 (Feb. 23, 25)—CSS


More on positioning: Fixed positioning.

A Photoshop moment: Creating a simple background gradient.

CSS Linear Background Gradients: An alternative for backgrounds using CSS (works in most newer browsers)

Visual accessability: Making text readable over complex backgrounds with a halfscreen background mask.

Transparency Effects: CSS transparency and "see-through" effects.


Practice: Meyer Project 12: "Fixing Your Backgrounds."

Task 9:—Fixed Positioning.

Weekly Review: (CSS Positioning)

Week 7 (Mar. 2, 4)—JavaScript and HTML Forms

(Mid-semester Check List of Tasks and Reviews)


Introduction to JavaScript: Client-side programming for browsers. Event Handlers.

JavaScript Overview: Language characteristics. Variables. Assignment and comparison operators; expressions.

HTML Forms: The form element and inputs: textbox, radio buttons, checkbox, textarea.


Practice: Meyer Project 7, "Making an Input Form Look Good."

Task 10HTML form structure and styling.

Mid-semester Review: (Advanced HTML & CSS)

Weekly Review: HTML Form Basics

Week 8 (Mar. 9, 11)—JavaScript


JavaScript Functions: Writing blocks of separate, reusable code.

Validation Library—I: Getting started with developing simple functions for form validators.

Form Validation: JavaScript for Simple Form Validation

Validation Library—II: Validating Check boxes, radio buttons, and Select Lists.


Task 11—Simple form validation: Alert-boxes for simple form validation.

Weekly Review: Introduction to JavaScript

Spring Break is March 16-22.

Week 9 (Mar. 23, 25)—JavaScript


Regular Expressions: Looking for patterns in strings

W3C Reference for JavaScript built-in functions and the DOM: http://www.w3schools.com/jsref/default.asp

The DOM and JavaScript Object Models: The W3C Document Object Model; using nodes;

DHTML: JavaScript + CSS = Dynamic HTML

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

The Window Object: Opening, closing, and specifying windows.


Task 12—Advanced form validation: Javascript's innerHTML and dynamic CSS for advanced form validation

Weekly Review: JavaScript Programming

Week 10 (Mar. 30, Apr. 1)—JavaScript


Tracking the Mouse: Reporting the x and y position of the mouse.

Annotating text: Adding hidden text and accessing through JavaScript.

Advanced JavaScript—Super Hypertexts: Finding and implementing advanced JavaScript.

JavaScript's Built-in Objects: Arrays. Dates. Math. Number and String Objects

Web Site Design / Redesign: Overview of site redesign. Client survey.


Practice: Project 13 from More Meyer on CSS (red book).

Task 13CSS nested list drop menu.

Weekly Review: Web Design

Week 11 (Apr. 6, 8)—Advanced Topics


Web Accessibility: ADA Section 508: http://www.section508.gov. The web accessibility movement: http://www.w3.org/WAI.

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

Content Strategy: Putting the writer back in charge.

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


Task 13—Finish (if you complete the css-drop menu task, go ahead to task 14).

Weekly Review: Accessibility

Week 12 (Apr. 13, 15)—Advanced Topics


HTML5 & CSS3: HTML5. New features, brower compatibility with W3C recommendations: when to incorporate new elements and properties into your pages. CSS3. New properties.

Server-side Programming Overview Server-side Programming and Databases

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


Task 14Advanced Project (Choose 1 option).

Final Task and Review Checklist

Weekly Review: None this week

Week 13 (Apr. 20, 22)—Advanced Topics


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

Reading: "The growing problem of Internet 'link rot' and best practices for media and online publishers" Leighton Kille. Shorenstein Center (Harvard Univ.). Sep. 8, 2014.

Dynamic web sites and growing web functionality Where is the web going next, and what do I have to learn to go with it? What is server-side technology like?

Looking back, looking forward: A Brief History of Web Development in Universities and at URI


Wrap up: Finish independent project site, including index page with links to all pages; page commenting (html and JavaScript).

Weekly Review: Comprehensive Final Review

Week 14 (Apr. 27, 29)


Final Review: We'll go through the Comprehensive Final Review (week 13) and wrap it up.

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.


Wrap up: Final review of all course assignments; all pages should be completed this week.

Work with individual students who need assistance with completing required coursework.

All coursework should be complete by now. If you have not completed, be certain that you have a written memo to Dr. Logan with a firm schedule for completion, no later than May 7, please.

Apr. 29 is the last day of classes.