Fall 2009: Web Site Design and Development Syllabus
U48 218—Web Site Design and Development
Washington University University College
Fall 2009
Saturdays 9:00 a.m.–12:00 p.m.
29 August—12 December 2009
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.
In addition, students will need to sign up with the following listservs:
- 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.
- GranneNotes, an irregularly-published newsletter about interesting & important stuff in technology and on the Internet. To subscribe, send a blank email to grannenotes-subscribe@yahoogroups.com. To review the home page and look at archived messages, go to http://groups.yahoo.com/group/grannenotes.
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 take-home mini-projects (25% each): We will practice HTML and CSS in class. After practicing each technology in class, you will have one week to complete an assigned mini-project involving the use of these technologies. Think of it as an open-book test, since you will be allowed to use your class notes 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
Accommodation of disabilities: If you have a disability that might affect your ability to complete the required assignments, please contact me during the first week of class to discuss an accommodation.
Academic Integrity
Policy regarding academic dishonesty: 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.
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., 29 Aug. 2009: Introductions & Beginnings; HTML
Software: Firefox & Google Chrome
HTML: html, head, body, p, br, hr, h1, h2
In class:
- Class Information
- Software
- Samples
- Basic HTML Structure
- Samples, Corrected
Readings for next class (unless otherwise stated, you will NOT be quizzed over the contents of these readings):
- Definitely skim through this
- HTML School ~ http://www.w3schools.com/html/default.asp
- Definitely read & understand this
- Talk like a Googler: parts of a URL ~ http://www.mattcutts.com/blog/seo-glossary-url-definitions/
- HTML references: look & bookmark
- HTML 4.01 Quick List ~ http://www.w3schools.com/html/html_quick.asp
- The Complete HTML 4.01 Reference ~ http://www.w3schools.com/html/html_reference.asp
- HTML 4.01 Entities Reference ~ http://www.w3schools.com/html/html_entitiesref.asp
- Colors
- HTML Colors ~ http://www.w3schools.com/html/html_colors.asp
- HTML Color Values ~ http://www.w3schools.com/html/html_colorsfull.asp
- HTML Color Names ~ http://www.w3schools.com/html/html_colornames.asp
- Examples
- HTML Examples ~ http://www.w3schools.com/html/html_examples.asp
- Simple Web Page 2 ~ Look at the source code
- Google Chrome
- Google Chrome: Behind the Open Source Browser Project ~ http://www.google.com/googlebooks/chrome/ ~ The 38-page comic explaining Google Chrome
- Google Chrome Comic: The Readers Digest Version ~ http://technologizer.com/2008/09/01/google-chrome-comic-the-readers-digest-version ~ If you don't want to read the entire 38-page comic, here's a shorter version
- 10 Key Features That Differentiate Google's Chrome From Firefox & IE ~ http://searchengineland.com/080903-130137.php
- Meet Chrome, Google's Windows Killer ~ http://www.techcrunch.com/2008/09/01/meet-chrome-googles-windows-killer/ ~ Who's Googlereallycompeting with when it comes to Chrome?
Sat., 5 Sept. 2009: Labor Day—NO CLASS!
Sat., 12 Sept. 2009: Hand-coded HTML
Software: Firefox, jEdit
HTML: character entities, ul, ol, li, img, b, i, center, a
In class:
- HTML Character Entities Cheat Sheet ~ http://www.addedbytes.com/cheat-sheets/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
- HTML
- Simple Web Page 2
- "Basic HTML"
- URLs, Paths, Addressing, & the Anchor Element
- Validation
Readings for next class:
- HTML
- HTML ~ Lots of links to other HTML resources
- Block-Level and Inline Elements ~ http://www.ahuka.com/htmllevel1/blocklevel.html
- When semantic markup goes bad ~ http://mpt.net.nz/archive/2004/05/02/b-and-i ~ Why and are bad, and why and aren't much better.
- Firefox (a descendent of Mozilla)
- 101 things that the Mozilla browser can do that IE cannot ~ http://www.xulplanet.com/ndeakin/arts/reasons.html
- Introduction to Mozilla Firefox ~ An excellent, & thorough, tutorial
- Of course, I highly recommend Don't Click on the Blue E!: Switching to Firefox
- Advanced only!
- The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets ~ http://www.joelonsoftware.com/articles/Unicode.html ~ A pretty detailed piece about character encodings. Read it if you're feeling hardcore.
Sat., 19 Sept. 2009: Hand-coded HTML
Software: Firefox, Internet Explorer, jEdit
HTML:
In class:
- W3C MarkUp Validation Service
- Download & install the Andale Mono TrueType font
- jEdit Configuration
- Configuring Windows To Show Extensions
Readings for next class:
- True Colors ~ http://www.newarchitectmag.com/documents/s=4455/new1013636396/index.html ~ A brief article covering the ideas & problems of "Web-safe colors".
- Using Kuler to create color themes ~ http://www.presentationzen.com/presentationzen/2009/11/using-kuler-to-create-color-themes.html ~ An "online resource that can help you create harmonious color themes without requiring advance knowledge in color theory".
Sat., 26 Sept. 2009: Hand-coded HTML
Software: Firefox, Internet Explorer, jEdit
HTML:
In class
Multimedia: Images, Audio, Video
Sat., 3 Oct. 2009: Hand-coded HTML
Software: Firefox, Internet Explorer, jEdit
HTML:
In class:
Sat., 10 Oct. 2009: XML, XHTML, & HTML 5
Software:
HTML: table, tr, td
In class:
- XHTML and XML ~ An overview of XML and XHTML for Web developers new to the subjects. (251 kb PDF or 119 kb Flash)
- HTML 5
- HTML 5 Doctor ~ Read the main blog, or the articles on
- 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
- 12 common problems with HTML 5 ~ Problemsandsolutions
- HTML 5 Doctor ~ Read the main blog, or the articles on
- HTML 5: The Future of HTML
Readings for next class:
- Dreamweaver
- Why is Dreamweaver the Best WYSIWYG Editor?
- Macromedia Dreamweaver MX ~ http://www.macromedia.com/software/dreamweaver/ ~ Especially check out the Feature Tour
- Middleware
- Relational Databases ~ http://www.computerworld.com/databasetopics/data/story/0,10801,55918,00.html ~ A brief introduction to relational databases.
- PHP links from WebReference.com ~ "PHP is a powerful, free, server-side programming language …"
- A Gentle Introduction to SQL ~ http://sqlzoo.net/ ~ Hands-on tutorials for learning SQL, just like w3schools does for HTML & CSS.
- The Next Big Thing: AJAX
- Ajax on Rails ~ http://www.onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html ~ Do NOT read the whole thing (unless you want to); instead, start at the 2nd paragraph ("Just in case you've been stranded …") & read through the paragraph that starts "Ajax is all about usability …".
- Ajax (programming) ~ http://en.wikipedia.org/wiki/Ajax_%28programming%29 ~ A longer, somewhat more technical explanation of AJAX.
Sat., 17 Oct. 2009: Fall Break—NO CLASS!
Sat., 24 Oct. 2009: Design principles ~ WYSIWYG tools ~ Middleware ~ tables
Software:
HTML:
In class:
- Dreamweaver 4 Configuration
- Connecting the World: A Brief Intro to Concepts of Web and Database Integration
Readings for next class:
- Tutorial
- Mulder's Stylesheets Tutorial ~ http://hotwired.lycos.com/webmonkey/98/15/index0a.html?tw=stylesheets ~ A really good tutorial through quite a bit of CSS. Highly recommended. And no, it's notthat Mulder.
- CSS Tutorial ~ http://www.w3schools.com/css/default.asp ~ An excellent set of tutorials about all aspects of CSS.
- Linking Style Sheets to HTML ~ http://www.htmlhelp.com/reference/css/style-html.html ~ A clear explanation of the various ways to incorporate CSS into your Web pages. I recommend usually linking to an external style sheet.
- CSS—Cascading Style Sheets ~ Lots of links to great CSS resources. Dive in and explore.
- Cascading Style Sheets: Separating Content from Presentation: Chapter 1: Foundation Concepts ~ Note the links at the bottom of the page to A Short History of the Web and Introduction to Cascading Style Sheets.
- Cheatsheet
- CSS Cheat Sheet ~ http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ ~ An excellent quick reference guide for CSS. Download the PDF & print it out.
Sat., 31 Oct. 2009: Out of town—NO CLASS!
Sat., 7 Nov. 2009: Intro to Cascading Style Sheets (CSS)
Software:
In class:
- Slides
- CSS Cheat Sheet ~ http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ ~ An excellent quick reference guide for CSS. Download the PDF & print it out.
- Understanding the C in CSS ~ http://blog.thembid.com/index.php/2007/07/19/understanding-the-c-in-css/ ~ A short explanation of the order in which CSS cascades.
Readings for next class:
- Learning to Design Web Pages with Style ~ http://www.linuxjournal.com/article.php?sid=6618&mode=thread&order=0
- Fonts
- Combined font survey results ~ http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml ~ Which fonts are most popular on all computer operating systems?
- CSS font-family glossary ~ http://www.codestyle.org/css/font-family/Glossary.shtml ~ An excellent overview of terms
- Anchor Points: Fonts & font foundries ~ http://www.codestyle.org/css/font-family/AnchorPoints.shtml ~ Popular fonts & the companies who make them
Sat., 14 Nov. 2009: CSS
Software: jEdit
Book: Eric Meyer on CSS: Mastering the Language of Web Design
In class:
Readings for next class:
- SimpleQuiz ~ Short quizzes on the best way to format HTML & CSS, followed by the best responses. It'll make you think!
Sat., 21 Nov. 2009: CSS
Software: jEdit
Book: Eric Meyer on CSS: Mastering the Language of Web Design
In class:
Readings for next class:
- CMS: Content Management System
- What Is Content Management? ~ An attempt to give a brief overview.
- SEO: Search Engine Optimization
- Webmaster Help Center—Webmaster Guidelines ~ Google's advice about making sure your website gets into Google
- Speeding up your website
- Exceptional Performance : Thirteen Simple Rules for Speeding Up Your Web Site ~ Yahoo's advice, all of it worth considering
- 14 rules for fast web pages ~ A list of the previous advice, but with helpful links
Sat., 28 Nov. 2009: Thanksgiving—NO CLASS
Sat., 5 Dec. 2009: Intro to Content Management Systems (CMS) & SEO
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
Readings for next class:
- Win the SPAM Arms Race ~ How to encode your email address using simple HTML & JavaScript, so spammers can't harvest it from your Web pages.
- Facts and Opinions About PDF Accessibility ~ A long & sometimes slightly technical look at the facts behind PDF usage on the web, especially in terms of accessibility.
Sat., 12 Dec. 2009: The future ~ Goodbye
Software:
In class:
