search | site map

Home > Teaching > Washington University > Website Design & Development > Archives > Fall 2010 Syllabus

U48 218—Web Site Design and Development
Washington University University College

Fall 2010
Saturdays 9:00 a.m.–12:00 p.m.
4 September—18 December 2010
Eads 14

Instructor: Scott Granneman

Adjunct Professor

Washington University in St. Louis

Author

Don't Click on the Blue E!: Switching to Firefox (O'Reilly: 2005)

Hacking Knoppix (Wiley & Sons: 2005)

Linux Phrasebook (Pearson: 2006)

Podcasting with Audacity: Creating a Podcast with Free Audio Software (Prentice Hall: 2007)

Google Apps Deciphered: Compute in the Cloud to Streamline Your Desktop (Prentice Hall: 2008)

Mac OS X Snow Leopard for Power Users: Advanced Capabilities and Techniques (Apress: 2010)

Contributor, Ubuntu Hacks (O'Reilly: 2006) &Microsoft Vista for IT Security Professionals (Syngress: 2007)

Former columnist for SecurityFocus &Linux Magazine

Former professional Blogger for Download SquadThe Open Source Weblog (also see personal blog)

Full list of publications at /writing/

Business Owner

Principal, WebSanity

Contact Info

scott at granneman dot com

314-644-4900 (office)

314-780-0489 (mobile)

Twitter: scottgranneman

Facebook: http://www.facebook.com/scottgranneman

Course Description

This course covers Web site development using the three methods that have been used since Web design first began: hand-coding HTML using a text editor; building Web pages using a WYSIWYG editor like Dreamweaver; and using the most modern method, a Content Management System that separates design from content while making it easy for non-technical users to update a site. We will cover design principles, Cascading Style Sheets, server-side vs. client-side technologies, Web browsers, and Web servers. We will conclude the course with a brief overview of the future of Web development: XHTML and XML.

Required Texts

There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Most of what you need you can access through my Web site; however, each week I will try to recommend a book useful for further study and reference.

Wash U's library has many web development books available online, at http://proquest.safaribooksonline.com.libproxy.wustl.edu/. If you are on-campus, you should be able to simply access the books; if you are off-campus, you will need to log in with your Wash U library ID and password.

Required Tasks

In order to participate fully in this class, you need to sign up with the following listserv:

• GranneClass, the class listserv, hosted by Yahoo Groups. To subscribe, send a blank email to granneclass-subscribe@yahoogroups.com. To review the home page and look at archived messages, go to http://groups.yahoo.com/group/granneclass; note, though, that you must be a Yahoo member (which is free and relatively painless) to use the group on the Web. To send and receive email, you do NOT need to be a Yahoo member.

Grading

Your grade will be based on the following factors:

• Class attendance and participation (25%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
• 3 in-class mini-projects (25% each): We will practice HTML and CSS in class with a series of assigned mini-project involving the use of these technologies. Think of it as an open-book test, since you will be allowed (heck, encouraged!) to use your class notes, websites, and any other resources you can access.

Grades will be based on an average of the above as follows:

100 A+
94-99 A
89-93 A-
86-88 B+
83-85 B
79-82 B-
76-78 C+
73-75 C
69-72 C-
66-68 D+
63-65 D
59-62 D-
0-58 F

Policies

Accommodation of disabilities

Washington University is committed to providing accommodations and/or services to students with documented disabilities. Student who are seeking support for a disability or a suspected disability should contact the Disability Resource Center (DRC) at 314-935-4062, located in Cornerstone, Gregg Hall (or see http://disability.wustl.edu). The DRC is responsible for approving and arranging all accommodations for students.

Academic Integrity

This course will follow Washington University's policies concerning academic dishonesty. Academic dishonesty may result in failure for the assignment in question and/or referral to the college's Academic Integrity Office, which has discretion to impose a stricter penalty. While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else's work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your writing should be your own. The papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

Distractions

I have no problem with students using a laptop, tablet, or smartphone during class for academic purposes; in fact, I would do the same thing. However, please do not use your personal device (or the computer on your desk) during class to conduct personal business such as Facebook, email, or IMing. This reduces your concentration & participation and distracts others around you. Repeated distractions will reduce your grade for the course.

Netiquette

It is paramount that we respect each other online in our email listserv. Follow this simple rule: disagree with the idea, but not the person. In other words, it's OK to say "That's a bad idea, because …", and it's not OK to say "You're a bad/stupid/inconsiderate person, because …". If you have an issue with a classmate's behavior online, please bring it to me privately by emailing me at scott@granneman.com. If you'd like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

Key Links

As we proceed through the course, you will find yourself constantly installing, using, and depending upon certain software, websites, and resources. In an effort to make your life easier, I have consolidated most of those items onto Web Site Design and Development Key Links.

Tentative Schedule

Sat., 4 Sept. 2010: Introductions & Beginnings; HTML

Software

• Firefox
• Google Chrome

HTML

html, head, body, p, br, hr, h1, h2

In class

Class Information

• Email Listservs
• Recommended Software

Software

• Rendera: a great way to learn HTML & CSS!
• Install Firefox
• Configure Firefox
• My List of Installed Firefox Extensions

Example

• Example 1

Basic HTML Structure

• Everything You Need to Know About DTDs
• Everything You Need to Know About Character Encoding

Examples

• Example 1, corrected
• Example 2 (AKA, Everything & the Kitchen Sink)

Sat., 11 Sept. 2010: Hand-coded HTML

Software

Firefox, jEdit

HTML

Character entities, ul, ol, li, img, b, i, center, a

In class

Character entities

• HTML Character Entities Cheat Sheet
  A quick reference for character entities (like " & ©, for example). Save the PDF & print it out.

Web goodies

• Definitions
• Greeking (also see The Lorem Ipsum Generator, the Greeking Machine, & Fillerati)

HTML

• Simple Web Page 2

Slides

• URLs, Paths, Addressing, & the Anchor Element [PDF Slides] (1.7 MB)
• URLs, Paths, Addressing, & the Anchor Element [PDF Handouts] (1.7 MB)
• URLs, Paths, Addressing, & the Anchor Element [QuickTime Movie] (1.6 MB)

Sat., 18 Sept. 2010: Hand-coded HTML

Software

• Firefox
• Internet Explorer
• jEdit

In class

Validation

• W3C MarkUp Validation Service

Configuratino

• Download & install the Andale Mono TrueType font
• jEdit Configuration
• Configuring Windows To Show Extensions

Sat., 25 Sept. 2010: Hand-coded HTML

Software

• Firefox
• Internet Explorer
• jEdit

In class

Slides

• Multimedia: Images, Audio, Video [PDF Slides] (6 MB)
• Multimedia: Images, Audio, Video [PDF Handouts] (6 MB)
• Multimedia: Images, Audio, Video [QuickTime Movie] (16.5 MB)

Sat., 2 Oct. 2010: Out of town—NO CLASS!

Sat., 9 Oct. 2010: XML, XHTML, & HTML5

In class

XHTML & XML

Slides

• XHTML and XML: An overview of XML and XHTML for Web developers new to the subjects [PDF] (251 KB)
• XHTML and XML: An overview of XML and XHTML for Web developers new to the subjects [Flash] (119 KB)

HTML5

Slides

• HTML5: The Future of HTML [PDF Handouts] (624 KB)
• HTML5: The Future of HTML [PDF Slides] (266 KB)
• HTML5: The Future of HTML [QuickTime Movie] (41 MB)

HTML5 Doctor

• The main blog
• HTML 5 Boilerplates
  Includes the HTML 5 DTD & a nice template
• HTML 5 Reset Stylesheet
• Elements: , , , , , , &
• Wrapping links around block-level elements
• How to get HTML5 working in IE and Firefox 2

Readings

• HTML5—Edition for Web Developers

Sat., 16 Oct. 2010: Fall Break—NO CLASS!

Sat., 23 Oct. 2010: Design principles ~ WYSIWYG tools

In class

Dreamweaver

• Dreamweaver 4 Configuration

Sat., 30 Oct. 2010: Middleware ~ Hand-coded HTML5

In class

Slides

• Connecting the World: A Brief Intro to Concepts of Web and Database Integration (215 KB)

Sat., 6 Nov. 2010: Intro to CSS (Cascading Style Sheets)

In class

Slides

• CSS Overview [PDF Slides with white background] (1.6 MB)
• CSS Overview [PDF Slides with black background] (2 MB)
• CSS Overview [PDF Handouts] (1.6 MB)
• CSS Overview [QuickTime Movie] (4.2 MB)

Info

• CSS Cheat Sheet
  An excellent quick reference guide for CSS. Download the PDF & print it out.
• Understanding the C in CSS
  A short explanation of the order in which CSS cascades.

Sat., 13 Nov. 2010: CSS

Software

• jEdit

Book

• Eric Meyer on CSS: Mastering the Language of Web Design

Sat., 20 Nov. 2010: CSS

Software

• jEdit

Book

• Eric Meyer on CSS: Mastering the Language of Web Design

Sat., 27 Nov. 2010: Thanksgiving—NO CLASS

Sat., 4 Dec. 2010: CSS

Sat., 11 Dec. 2010: Intro to CMS (Content Management Systems) & SEO (Search Engine Optimization)

Software

• jEdit

In class

General CMS info

• cmsInfo
  News and information on open source CMSs
• OpenSourceCMS
  Try out, online, some of the best PHP/MySQL-based free & open source CMSs
• TinyMCE Javascript Content Editor
  An easy-to-use, easy-to-integrate WYSIWYG for your web pages

Sat., 18 Dec. 2010: The future ~ Goodbye

Evaluation

• Web Design and Development Evaluation