Fall 2012: Web Development Syllabus

INTM 3100.01 Programming for Web Communications

Webster University
School of Communications
Dept. of Electronic & Photographic Media

Fall 2012
Wednesdays 9:00–11:50 a.m.
29 August—19 December 2012
Sverdrup 105

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    Students learn the application of interactive media to the Internet. The course addresses concepts and strategies for integrating interactive function and design in the World Wide Web context. Students learn how to organize information and design the interactive function of a Web-based delivery system. The projects in this class are publications of Web sites that have interpreted and applied interactive design and function in their Web site. Prerequisites: INTM 1600 AND INTM 2200 OR permission of the instructor.

    What You're Going to Learn

    Basically, HTML & CSS & how to put them together correctly to create a website.

    Learning Outcomes


    During each class I will take a few minutes & discuss a mini-topic for 15 minutes or so. Some of these mini-topics include:

    • Snippets
    • Regular Expressions (RegEx)
    • Simplenote
    • OpenDNS
    • Backing up
    • Password safes
    • RSS
    • The best help sites
    • Ebooks
    • Markdown
    • Wolfram Alpha
    • Cookies
    • LAMP (& WAMP & MAMP)
    • Git & GitHub
    • Portable Apps
    • Encoding email addresses
    • SEO
    • Finding multimedia
    • AJAX
    • Minimizing code
    • WYSIWYG Web tools
    • Automating my Mac



    There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Virtually everything you need can be accessed via my website; however, when it's appropriate I will recommend books useful for further study & reference.

    OK, if you just have to kill a tree, I highly recommend Jon Duckett's HTML & CSS: Design and Build Websites. But it's not required.


    In order to participate fully in this class, you need to sign up with GranneClass, an email discussion group hosted by Yahoo Groups.

    To subscribe, send an email with a short sentence explaining who you are to granneclass-subscribe@yahoogroups.com. To send and receive email, you do NOT need to be a Yahoo member.

    To view 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.

    Please note that my web development course at Washington University also uses GranneClass. Cross-pollination is a good thing in nature; I think it will be a good thing in this case as well. If a message is meant for students at a particular university, I will preface the subject with either "WASH U" or "WEBSTER" to indicate to whom it is directed.


    Your grade will be based on the following factors:

    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

    Webster University is committed to providing accommodations and/or services to students with documented disabilities. If you have registered as a student with a documented disability and are entitled to classroom or testing accommodations, please inform me at the beginning of the course.

    Drops and Withdrawals

    The Drop/Add & Withdrawal dates are listed each semester on the University website, in the University catalog, & in the Course Description book. If the course is dropped within the Drop/Add period, no notation of the course will appear on the student’s transcript. Withdrawals that take place after the published Drop date will result in the dreaded “W” appearing on the student’s transcript.


    Some random student assignments or projects may be retained by the School of Communications for the purpose of academic assessment as it relates to student learning outcomes. In those cases, the student’s name and all identifying information about the student will be removed from the assignment or project.

    Academic Integrity

    This course will follow Webster University’s policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals, who have 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 work should be your own.

    Any 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.

    If you have any questions about academic integrity, please bring them to me before you do anything that may jeopardize your grades, your education, & your future!


    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. Please do what you need to do to keep cell phone distractions at a minimum.


    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 at granneman dot 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

    Introductions & Beginnings / HTML

    Wednesday, 22 August 2012



    Readings for next class (you will NEVER be quizzed over the contents of these readings):


    Wednesday, 29 August 2012


    Things you should know

    Code & coding

    In-class project

    • Basic formatting
      Without viewing the source code, re-create this webpage in HTML 4.01 Transitional

    URLs: Images & Links

    Homework due 9/5


    Wednesday, 5 September 2012


    Slides: URLs & Paths




    Wednesday, 12 September 2012


    • Sublime Text 2

    Snippet Storage

    Slides: Never Use Word to Make Webpages

    Slides: Finding Multimedia

    Slides: Markdown


    • Right-click to download this code, open it in Sublime Text, & reformat it correctly: Empty Nest


    Wednesday, 19 September 2012

    Design Theory

    Readings for next class

    Middleware / XHTML, XML, & HTML5

    Wednesday, 26 September 2012

    Middleware Slides

    XHTML & XML Slides

    HTML5 Slides

    Project due 10/3

    • Colostomo: Download & follow the instructions


    Wednesday, 3 October 2012


    Password safes


    Backing up

    • Backup [Slides] (4.2 MB PDF)
    • Backup [Handouts] (4.2 MB PDF)
    • Backup [Movie] (213 MB QuickTime) ← Large file!


    CSS Intro

    Wednesday, 10 October 2012

    Where to host your static sites

    CSS Slides

    In-class project

    • Basic formatting
      Without viewing the source code, re-create this webpage in HTML 5 with CSS

    Fall Break: No class!

    Wednesday, 17 October 2012


    CSS Selectors

    Wednesday, 24 October 2012

    2 free, open source fonts from Adobe

    In-class project

    • RFID Chips Are Here
      Without viewing the source code, re-create this webpage in HTML 5 with linked CSS & host it at Amazon S3.

    CSS Fonts & Formatting

    Wednesday, 31 October 2012

    Voting (a special talk because it’s election time)

    Fonts & Formatting Slides

    Fonts for @font-face

    CSS Patterns

    Wednesday, 7 November 2012

    Your final: CSS Zen Garden

    • Go to http://www.csszengarden.com & you'll find an awesome collection: a series of designs that all use the same HTML, but use wildly different CSS to change the look of the site. Download the sample HTML & CSS from the site and then go nuts changing the CSS to match a theme you come up with … but do not change the HTML! Your CSS Zen Garden design is due the last day of class, & we will take turns showcasing them to everyone.
    • The Zen of CSS Design: Visual Enlightenment for the Web
      Written by the designers of CSS Zen Garden. Some students find this helpful, & some do not.

    Pattern Libraries

    CSS: Media-specific styles

    Wednesday, 14 November 2012

    Media-specific CSS slides

    HTML (& some CSS) formatters & beautifiers

    Practice with CSS for printing

    CSS: Practice with Media Styles

    Wednesday, 21 November 2012


    CSS: Lightbox

    Wednesday, 28 November 2012


    • jQuery at Wikipedia
    • jQuery: “a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, & Ajax interactions for rapid web development”


    CSS: Lists into Navigation & CMS

    Wednesday, 5 December 2012

    CSS: Lists into Navigation

    Goodbyes, Finals, & Evaluations

    Wednesday, 12 December 2012


    WebSanity Top Secret