INTM 3100.01 Programming for Web Communications
Webster University
School of Communications
Dept. of Electronic & Photographic Media
Fall 2015
Wednesdays 9:00–11:50 a.m.
26 August–16 December 2015
Sverdrup 106
On this page…
Instructor: Scott Granneman
- Adjunct Professor
- Washington University in St. Louis
- Webster University
- Southern Illinois University Edwardsville
- Instructor
- Professional Education Technology & Leadership Center
- Oasis Digital
- 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)
- Linux Phrasebook (Second Edition) (Pearson: 2015)
- Contributor, Ubuntu Hacks (O’Reilly: 2006) & Microsoft Vista for IT Security Professionals (Syngress: 2007)
- Former columnist for SecurityFocus & Linux Magazine
- Former professional blogger for The Open Source Weblog
- Full list of publications
- Business Owner
- Principal, WebSanity
- Contact Info
- scott@granneman.com
- Mobile: 314-780-0489 (feel free to text, but please identify yourself)
- Blog: Chainsaw on a Tire Swing
- Twitter: @scottgranneman
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
- Ability to implement an appropriate planning strategy for developing websites.
- Ability to produce functional, flexible, & versatile websites.
- Ability to locate, evaluate, & critically assess current & emerging technologies for developing websites.
- Possess a good working knowledge of HTML & CSS.
- Experience creating various small website projects.
- An awareness of the process in creating a website & the various roles needed in that process.
Mini-Topics
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
Requirements
Texts
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.
Jon Duckett’s JavaScript and JQuery: Interactive Front-End Web Development is also very good if you want to learn JavaScript.
Tasks
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.
Grading
Your grade will be based on the following factors:
- Class attendance and participation (20%): 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.
- Projects (80%): We will practice HTML & CSS in & out of class with a series of assigned projects involving the use of these technologies. Think of them as open-book tests, since you will be allowed (heck, encouraged!) to use your class notes, websites, & any other resources you can access. IMPORTANT: You must either show me that you have completed a project within two weeks of its assignment date or asked me for an extension. Neglecting to do so will result in a failing grade for that project.
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
At any time you can ask me how you’re doing in the course & I will show you.
How the Class Works
This course is based around the idea of flipped teaching. Instead of coming to class to hear a lecture & then going home to do work, we’re going to flip that.
I’ve made videos for most of the lectures in this course, & you will watch those at home. Some videos are 2 minutes long, while the longest is around 40 minutes; most are around 10 minutes or so. When we’re in class, I’ll review important or tricky stuff, answer questions, & walk around to help or grade your work.
Note that all grading will be done by the two of us sitting together. I will never accept homework turned in via email or any other way that is not collaborative.
If you want to show me some code that you’re confused about or need help with, please go to Pastebin, do the following, & then send me the URL:
- Enter your code into the box
- Set Syntax Highlighting to HTML or CSS
- Set Paste Expiration to 1 week
Policies
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.
Privacy
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 addition, I may keep some assignments to show future students. 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!
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. Please do what you need to do to keep cell phone distractions at a minimum.
Netiquette
It is paramount that we respect each other in class & online. 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.
Tech Support
Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?
- Download & install the free Jing, which works on both Mac OS X & Windows.
- Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
- Upload the resulting video to screencast.com (also free).
- Send me a link to the video.
In the email you send me, include the following information:
- What you did.
- What you thought should happen.
- What actually happened.
- Why that’s a problem.
If you’re talking about a public webpage, don’t forget to include the URL!
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 / HTML
Wednesday, 2015-08-26
Scott: An Introduction
Topics: Scott. Jans. Lovecraft. An outline. Mobility eating the world.
Web Development: The Absolute Basics
Topics: History. Browsers. Rendering engines. Simple webpages. Elements, attributes, & values. DTDs. Character encoding. Simple webpages, corrected. Comments. Editing tools. Templates.
Tools
- Recommended Software
Software for Windows, Mac OS X, & Linux users
HTML
Wednesday, 2015-09-02
Videos
- HTML Overview
- Categorization ← Boring, but you need to know it—sorry!
- Basic Document Structure ★
- Metadata ★
- Global Attributes
- Lines & Paragraphs ★
- Outlines & Sections ★
- Grouping ★
- CSS Hooks
- Lists ★
HTML Overview: Elements, Attributes, Entities
Topics: Categorizing HTML elements. Basic document structure. Metadata. Global attributes. Lines & paragraphs. Outlines & sections. Grouping. CSS hooks. Lists.
Tools
- Brackets
An open source, free, innovative HTML, CSS, & JavaScript editor - Portable Brackets
From the people at PortableApps, a version of Brackets that installs & runs from a USB flash drive - Basic Settings for Brackets
Themes, font size, & code indentation - HTML Templates extension for Brackets
Learn to be lazy with this extension written by Travis Almand - W3CValidation
Before you ask me for help, validate your code first with this extension by Raymond Camden! - Indentator
Re-indent your code so it’s easy to read & work with - Duplicate Files & Folders for Brackets
Duplicate, copy, or move files & folders
Assignments
HTML
Wednesday, 2015-09-09
Videos
- HTML Overview
HTML Overview: Elements, Attributes, Entities
Topics: Quotations. Text semantics. Text formatting. Multimedia. Tables. Forms. Frames. Scripting. Foreign characters. Obnoxious & obsolete. Character entities. IE, bringing up the rear. Tools.
Tools
- Brackets
An open source, free, innovative HTML, CSS, & JavaScript editor - Additional Right Click Menu extension for Brackets
An extension by Deddy Lasmono Putro, for the Windows users who cannot re-train their muscle memory - Indent Guides (install via Extension Manager)
Show lines for each level of indentation - Brackets Icons
Display icons next to all files in your project that identify each kind of file
Assignment
HTML: linking with a
Wednesday, 2015-09-16
Videos
- HTML Overview
- Links ← no video (yet), so read the “Links” section in the slides, especially the part about
<a>
- Links ← no video (yet), so read the “Links” section in the slides, especially the part about
HTML Overview: Elements, Attributes, Entities
Brackets
- Select Lines extension
Select 1 or more lines using the gutter - Better HTML Auto-Completion for Brackets
Format your HTML in a more efficient manner
Assignment
- Stooges Project
We’ll do this in class. - Chartreuse No. 3
HTML
Wednesday, 2015-09-23
Assignment
CSS Overview
Wednesday, 2015-09-30
Videos
CSS Overview: Selectors, Integration, Inheritance, Cascading
Basic Selectors. Universal. Type. Class. ID. Grouping. Descendant Combinator. Formatting. <span>
& <div>
. Integrating CSS.
Assignments
- Using the source code from Chartreuse No. 5, label all DOM objects
Lagniappe [Webster Works]
Wednesday, 2015-10-07
Password managers
- Password manager at Wikipedia
- 1Password
- LastPass
- Dashlane
Backing up
- Backup (4.2 MB PDF)
CSS Overview
Wednesday, 2015-10-14
Videos to watch for today
- CSS Overview
CSS Overview: Selectors, Integration, Inheritance, Cascading
Inheritance. Importance. Specificity. Order. The Cascade. Tools.
Assignments
NO CLASS: Fall Break!
Wednesday, 2015-10-21
Have fun!
CSS Typography
Wednesday, 2015-10-28
Videos
CSS Data Types: One of Those Things You Have To Know
CSS Typography: Typefaces, Fonts, & Formatting
Assignment
CSS Typography
Wednesday, 2015-11-04
CSS Typography: Typefaces, Fonts, & Formatting
Markdown
Videos to watch for today
- CSS Typography
Assignments
Layout Methods
Wednesday, 2015-11-11
Webpage Layouts: 4 Methods
Assignment
Bonus Materials
Tables & Lists: Organized Data
Videos
Assignment
Forms
Wednesday, 2015-11-18
Forms: Collecting Information in a Usable Way
Videos to watch for today
Assignment
- Facebook Forms
A simple form that you’ve probably seen at least once.
Media-Specific Styles
Wednesday, 2015-11-25
Media-Specific Styles: Same HTML, Different CSS
Videos to watch for today
Assignment
Responsive Web Design with Bootstrap
Wednesday, 2015-12-02
Fixed to Fluid to Responsive: Grids in Design
Bootstrap: A Quick Introduction
Assignment
- Responsive Web Design: Sidebar Page
An introductory assignment for learning Responsive Web Design with Twitter Bootstrap.
Files
Responsive Web Design with Bootstrap
Wednesday, 2015-12-09
Files
Goodbyes, Finals, & Evaluations
Wednesday, 2015-12-16
Final Assignment: 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. - The CSS Zen Garden Assignment
Details about your final project.
Evaluation
- Web Design and Development Evaluation
Please fill out this anonymous evaluation in class on the last day of class.