References and Useful Links | Tasks and Reviews
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
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.
Dr. Logan will provide good used copies of these texts for free. You are welcome to keep them if you believe you will use them in the future; if not, please return them at the end of the semester.
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
There are no prerequisites, but the course is 4-credits because it is rigorous and requires a more-than-3-credit workload.
SCHEDULE (Spring 2013)
Lab (Monday & Wednesday 9:00-10:50): 102 Fine Arts Center | Lecture (Mon & Weds, 8-8:50): 203 Kelley.
COURSE OUTLINE
Week 1 (Jan. 23)—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.
HTML: Elements. Attributes and values.
HTML Tables: Table, heading, row, data elements and attributes. Table structure not for page layout.
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. 28, 30)—HTML
Lecture
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. 4,6)—HTML & Introduction to CSS
Lecture
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 (Feb. 11, 13)—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: Simple print styling.
Weekly Review: (CSS Basics)
Week 5 (Feb. 18, 20)—CSS
Monday is President's Day. Classes meet.
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. 25, 27)—CSS
Lecture:
More on positioning: Fixed positioning.
A Photoshop moment: Creating a simple background gradient.
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. 4, 6)—JavaScript and HTML Forms
March 8 is mid-semester!
(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. 18, 20)—JavaScript
Spring Break is March 11-17.
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 (Mar. 25, 27)—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 (Apr. 1, 3)—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. 8, 10)—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. 15, 17)—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. 22, 24)—Advanced Topics
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 (Apr. 29)
April 30 is the last day of classes.
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.
Finishing: Reserved for work with individual students who need additional assistance with completing required coursework.