Fall 2014

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

CATALOG DESCRIPTION

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)

COURSE GOALS

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.

TEXTS

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.

Dr. Logan will provide good used copies of these texts for free.

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

FORMAT

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

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

PREREQUISITES

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

SCHEDULE (Fall 2014)

Lab (Monday & Wednesday 3:00-5:00): 102 Fine Arts Center
Lecture (Tuesday & Thursday, 4:00-5:15): 318 Woodward Hall.

COURSE OUTLINE

Week 1 (Sept. 3 - 4)—Introduction and HTML

Lecture

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 (Sept. 8 - 11)—HTML

Lecture

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.

Lab

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 (Sept. 15 - 18)—HTML & Introduction to CSS

Lecture

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.

Lab

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.

Weekly Review: (W3C & HTML II)

Week 4 (Sept. 22 - 25)—CSS

Lecture:

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.

Lab:

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)

Week 5 (Sept. 29 - Oct. 2)—CSS

Lecture:

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.

Lab:

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 (Oct. 6 - 9)—CSS

Lecture:

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.

Lab:

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

Task 9:—Fixed Positioning.

Weekly Review: (CSS Positioning)

Week 7 (Oct. 14 - 16)—JavaScript and HTML Forms

Oct. 13 is Columbus Day. Classes do not meet and there is no make-up day.

(Mid-semester Check List of Tasks and Reviews)

Lecture:

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.

Lab:

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 (Oct. 20 - 23)—JavaScript

Lecture:

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.

Lab:

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

Weekly Review: Introduction to JavaScript

Week 9 (Oct. 27 - 30)—JavaScript

Lecture:

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.

Lab:

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

Weekly Review: JavaScript Programming

Week 10 (Nov. 3 - 7)—JavaScript

Lecture:

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.

Lab:

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

Task 13CSS nested list drop menu.

Weekly Review: Web Design

Week 11 (Nov. 10, 12 - 13)—Advanced Topics

November 11 is Veteran's Day. Classes do not meet. Tuesday classes are held on Wednesday. (i.e., we have one laboratory this week, on Monday.)

Lecture:

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.

Lab:

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

Weekly Review: Accessibility

Week 12 (Nov. 17 - 20)—Advanced Topics

Lecture:

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.

Lab:

Task 14Advanced Project (Choose 1 option).

Final Task and Review Checklist

Weekly Review: None this week

Week 13 (Nov. 24 - 26)—Advanced Topics

Thanksgiving Recess is Nov. 27-30. Classes do not meet. Attendance at Wednesday's lab is optional (no attendance taken).

Lecture:

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

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

Lab:

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 (Dec. 1 - 4)

Lecture:

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.

Lab:

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

Week 15 (Dec. 8)

Dec. 8 is the last day of classes.

Lab

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 Dec. 19, please.