Syllabus :: 2005 AISICS

Class Days/Time:

Instructor: Robert Scott Truesdell

Course web site: http://www.ics.uci.edu/~aisics-t/2005

Syllabus (this document): http://www.ics.uci.edu/~aisics-t/2005_syllabus.html

Course Objectives

You will learn how to design and build web pages based on current and future best-practice standards as recommended by the W3C.

You will build a web site consisting of the following specifications:

1. Page layout and typography will be accomplished via one or more external style sheet(s) (CSS).
2. There will be a minimum of 4 pages:
   • A home page — your opening and introduction.
   • A class roster page with links to the pages created by all the students in the class.
   • A personal story (biography) page (you can write about your family, your culture, your friends.)
   • A "What I learned in class" page (to be written last.)
   Additional pages may be included like: favorite music; hobbies and interests; the arts.
3. Each page will share a consistent design and layout. Part of the layout will include a menu to the other pages of your site.
4. Each page will be professional in appearance including spelling, grammar, and appropriate content.

Software used

Dreamweaver by Macromedia or GoLive by Adobe (to be determined) (30-day trial version)

Photoshop by Adobe (30-day trial version)

Firefox from Mozilla with the "Web Developer" extension.

Plain text editor.

and, of course, IE.

Required Texts

Cederholm, Dan. 2004, Web Standards Solutions: The Markup and Style Handbook, Friends of ED publishers. This is a fantastic book, easy to read, and full of step-by-step examples.

Recommended Texts

Meyer, Eric A. 2001, Cascading Style Sheets 2.0 Programmer's Reference, McGraw-Hill Osborne Media. This simple reference is my most turned-to book. The material can be found online, but it is so nice to just pick up this book and instantly thumb to the information needed.

Meyer, Eric A. 2004, More Eric Meyer on CSS, New Riders Press. This beautiful volume contains explanations of actual solutions that Eric Meyer used in solving real problems. It is less general than Cederholm, and ultimately less practical, but it serves as an inspiration.

Here are some useful web sites for CSS references

Some have tutorials, some have design ideas, some are CSS references.

• CSS2 Reference (http://www.w3schools.com/css/css_reference.asp) This is an authoritative and definitive reference for CSS.
• XHTML Reference (www.w3schools.com/xhtml/xhtml_reference.asp) This is an authoritative and definitive reference for XHTML.
• WaSP (www.webstandards.org) The Web Standards Project - leading the mass migration toward compliant, accessible web sites.
• World Wide Web Consortium (W3C) (www.w3.org) This is the real deal.
• CSS Zen Garden (www.csszengarden.com) One web page, one markup, many styles. An inspiration and aspiration.
• mezzoblue (www.mezzoblue.com) A compendium of tried-and-true plus cutting edge web design and CSS.
• Holy CSS Zeldman! (www.dezwozhere.com/links.html) A list of links that is bristling with up-to-date design and coding ideas.
• Learning CSS (by W3C) (www.w3.org/Style/CSS/learning) A tutorial by the people that wrote the specifications.
• W3C Online Tutorials (http://www.w3schools.com/) A rich collection of instructional and reference material.
• Web Color Kit (webcolor.webmaster-kit.com) Suggests colors of links and text given a background color of your choice.

Grade Weighting

• 40% Professional Appearance.
• 30% Standards Compliance (pages will be run through a validator.)
• 30% Completeness of Assignments.

General Overview

1. Lecture: Introduction to web history, standards, and CSS. Familiarization of other ways to design web pages including table-based layout and Flash. Presentation of syllabus and goals of the class. Introduction of text books.
   Lab: Computer environment setup including the creation of accounts and configuring the software.
2. Lecture: Introduction to XHTML and CSS. Introduction to the separation of presentation from content.
   Lab: Presentation of template pages and style sheets and explanations on how to modify them.
3. Lecture: Intro to Photoshop and the major features for web designers; graphics file formats, file size issues, etc.
   Lab: Selecting a theme for your web site. Selecting a palette of colors.
4. Lecture: Optimizing graphics for web use. The importance of lean and uniform graphics.
   Lab: Practice with Photoshop. Import and resize graphics. The "Save for web..." function.
5. Lecture: Page layout using CSS positioning.
   Lab: Create a navigation menu for our sites and practice displaying it in different locations and colors using CSS.
6. Lecture: Graphics 2: the importance of correctly sizing the images in Photoshop and not in the browser. A discussion on how uniform appearance of graphics lends a professional look to a site.
   Lab: Work on individual pages. (Instructor available for help)
7. Lecture: Accessibility issues. Designing for cell phones, PDAs, the blind, etc.
   Lab: Work on individual pages. (Instructor available for help)
8. Lecture: Allowing users to "skin" your site for a personalized viewing experience.
   Lab: Work on individual pages. (Instructor available for help)
9. Lecture: Pitfalls and shortcomings of CSS as it stands today. What we may expect in the future.
   Lab: Work on individual pages. (Instructor available for help)
10. Lecture: Final clean-up and consolidation of our sites.
    Lab: Show-and-tell: each student will walk through their site explaining the overall theme and what problems had to be overcome.