COM 271: Web Design and Programming
References and Useful Links | Tasks and Reviews
Retired from Department of Communications Studies, University of Rhode Island, Kingston RI 02881
Email: mayfly@uri.edu
Web: http://www.patrickalogan.com/mayfly/index.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
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.
Eric Meyer on CSS: Mastering the Language of Web Design.
2003. Eric Meyer. New Riders Publishing. 322 p.
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.
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 (Spring 2015)
Lab (Monday & Wednesday 9:00-10:50): 102 Fine Arts Center
Lecture (Monday & Wednesday, 8:00-8:50): 251 Chafee Hall.
COURSE OUTLINE
Week 1 (Jan. 21)—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 (Jan. 26, 28)—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.
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 (Feb. 2, 4)—HTML & Introduction to CSS
Lecture
Standards: W3C, the World Wide Web Consortium: W3C recommendations as standards.
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.
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
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)
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
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 8—Absolute Positioning.
Weekly Review: (Typography and the Box Model)
Week 6 (Feb. 23, 25)—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 (Mar. 2, 4)—JavaScript and HTML Forms
(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 10—HTML form structure and styling.
Mid-semester Review: (Advanced HTML & CSS)
Weekly Review: HTML Form Basics
Week 8 (Mar. 9, 11)—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
Spring Break is March 16-22.
Week 9 (Mar. 23, 25)—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 (Mar. 30, Apr. 1)—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 13—CSS nested list drop menu.
Weekly Review: Web Design
Week 11 (Apr. 6, 8)—Advanced Topics
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 (Apr. 13, 15)—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 14—Advanced Project (Choose 1 option).
Final Task and Review Checklist
Weekly Review: None this week
Week 13 (Apr. 20, 22)—Advanced Topics
Lecture:
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
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 (Apr. 27, 29)
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.
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.