COAP 2000.01 & 2000.02 Introduction to Web Programming (Fall 2014)

Webster University
George Herbert Walker School of Business & Technology
Dept. of Mathematics & Computer Science

Fall 2014
01: Tu–Th 10–11:20 a.m.
02: Tu–Th Noon–1:20 p.m.
26 August–18 December 2014
East Academic Building 210, Webster

Instructor: Scott Granneman

You can also read my full CV.

Course Description

Introduction to Web Programming (formerly titled XHTML Programming). HTML is the programming language used to develop home pages on the Internet. This course covers the most current tools available for developing HTML documents and posting pages on the World Wide Web. This course covers the basics of HTML5.

What You're Going to Learn

Basically, HTML5 & 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 HTML5 & 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 most classes I will take a few minutes & discuss a mini-topic for 10 minutes or so. Some of these mini-topics include:

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.

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, however, 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 HTML5 & 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.

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

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

Tech Support

Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?

1. Download & install the free Jing, which works on both Mac OS X & Windows.
2. Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
3. Upload the resulting video to screencast.com (also free).
4. Send me a link to the video.

In the email you send me, include the following information:

1. What you did.
2. What you thought should happen.
3. What actually happened.
4. Why that’s a problem.

If you’re talking about a public webpage, don’t forget to include the URL!

Tentative Schedule

2014-08-26 Introductions

Slides

• Scott: An Intro
  Scott. Jans. Lovecraft. An outline.
• Web Development: The Absolute Basics
  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
• Brackets
  An open source, free, innovative HTML, CSS, & JavaScript editor

2014-08-28 Web Dev Basics

Slides

• Web Development: The Absolute Basics
  History. Browsers. Rendering engines. Simple webpages. Elements, attributes, & values. DTDs. Character encoding. Simple webpages, corrected. Comments. Editing tools. Templates.

2014-09-02 HTML Overview

Slides

• HTML Overview
  Categorizing HTML elements.

2014-09-04 HTML Overview

Slides

• HTML Overview
  Basic document structure. Metadata. Global attributes. Lines & paragraphs.

Tools

• Brackets
  An open source, free, innovative HTML, CSS, & JavaScript editor

2014-09-09 HTML Overview

Slides

• HTML Overview
  Outlines & sections. Grouping. CSS hooks. Lists.

Brackets

• HTML Templates extension by Travis Almand

Assignment

• Chartreuse No. 1
  Reproduce this webpage in Brackets without viewing the source code!

2014-09-11 HTML Overview

Slides

• HTML Overview
  Quotations. Emphasis. Size. Inferiors & superiors. Indicating changes.

Brackets

• Indentator extension by Andrew Huth

Assignment

• Chartreuse No. 1
  Reproduce this webpage in Brackets without viewing the source code!

2014-09-16 HTML Overview

Slides

• HTML Overview
  Links.

Brackets

• Select Lines extension by Travis Almand

2014-09-18 HTML Overview

Videos to watch for today

• Text Semantics
  • Technical
  • Terms
  • Machine-Readable
  • Visualized Data
• Text Formatting
• Tables
• Forms

Brackets

• Better HTML Auto-Completion

Assignment

• Chartreuse No. 2

2014-09-23 HTML Overview

Videos to watch for today

• Multimedia
• Frames
• Scripting
• Character Entities

Brackets

• Brackets Auto Pairs extension by Julian Popescu

Assignment

• Chartreuse No. 3

2014-09-25 HTML Overview

Videos to watch for today

• Dealing With Internet Explorer
• Tools

Brackets

• Brackets Surround extension by Patrick Edelman
• Right Click Extended extension by Jarrad Salmon

Assignment

• Index No. 1 & Chartreuse No. 4

2014-09-30 HTML Practice

Assignment

• Tertiary No. 1, Index No. 2, & Chartreuse No. 5

2014-10-02 HTML Practice

Work on assignments

2014-10-07 CSS Overview

Slides

• CSS Overview
  History. Why CSS? DOM.

Videos to watch for today

• CSS Overview
  • CSS History
  • Why CSS?
  • The DOM

Assignment

• Using the source code from Chartreuse No. 5, label all DOM objects.

2014-10-09 CSS

Slides

• CSS Overview
  Basic Selectors. Universal. Type. Class. ID. Grouping. Descendant Combinator. Formatting. <span> & <div>. Integrating CSS.

Videos to watch for today

• CSS Overview
  • Basic Selectors
  • Formatting
  • <span> & <div>
  • Integrating CSS

Assignment

• CSS No. 1

2014-10-14 CSS

Slides

• CSS Overview
  Inheritance. Importance. Specificity. Order. The Cascade. Tools.

Videos to watch for today

• CSS Overview
  • Inheritance
  • Cascading
  • Tools

Assignment

• CSS No. 2: The Cascade

2014-10-16

Slides

• CSS Typography
  Types. Measure. Leading. Scale.

Videos to watch for today

• CSS Typography
  • Basics

2014-10-21 NO CLASS: Fall Break!

Have fun!

2014-10-23 NO CLASS: Fall Break!

Have fun!

2014-10-28 CSS Typography

Slides

• CSS Data Types
  Defined. Text.
• CSS Typography
  Operating system defaults. Web browser defaults. Core Fonts for the Web. ClearType Font Collection. Font properties.

Videos to watch for today

• CSS Data Types
  • Basics
  • length
• CSS Typography
  • Common Fonts & Defaults
  • Font Properties

Assignment

• Boor-ing Email

2014-10-30

2014-11-04 NO CLASS: Election Day!

I’m working as Tech Coordinator for the Election Protection Center. Go vote!

2014-11-06 CSS Typography

Slides

• CSS Typography
  Generated content. Font formats. @font-face. Licensing.

Videos to watch for today

• CSS Typography
  • Font Stacks
  • Line Box Properties
  • Multi-Column Layout
  • Embedding Fonts

Assignments

• Embedding Fonts
• Colostomo Home Page
  Reproduce this page without looking at the source code.

2014-11-11 CSS Typography

Assignment

• Boor-ing Email

2014-11-13 CSS Typography

Assignment

• Boor-ing Email

2014-11-18 Tables & Lists

Slides

• Tables & Lists: Organized Data
  Introduction. Basic tables. Defining sets of rows. Table title.

Videos to watch for today

• Tables & Lists
  • Introduction
  • Basic Tables
  • Defining Sets of Rows
  • Table Title

Assignment

• Creating & Styling Tables

2014-11-20 Tables & Lists

Slides

• Tables & Lists: Organized Data
  Styling tables. Columns. Sortable columns. Creating tables the easy way. Styling lists.

Videos to watch for today

• Tables & Lists
  • Styling Tables
  • Columns
  • Sortable Columns
  • Creating Tables
  • Styling Lists

2014-11-25 Forms

Slides

• Forms
  Daily use. How forms work. Labels, fields, & controls. Form attributes. Form containers. Text controls. Choice controls. File select controls. Submission controls. Accessibility. Tips & caveats.

Videos to watch for today

• Forms
  • Intro
  • Form Containers
  • Basic Form Controls: Text
  • Basic Form Controls: Choices
  • Basic Form Controls: Uploads
  • Basic Form Controls: Submission
  • Accessibility
  • Tips

Assignment

• Facebook Forms
  A simple form that you’ve probably seen at least once.

2014-11-27 NO CLASS: Thanksgiving!

Have a great holiday!

2014-12-02 Media-Specific Styles

Slides

• Media-Specific Styles: Same HTML, Different CSS
  Media types. Media-specific rule sets. Common print styles. Print CSS. Media queries.

Videos to watch for today

• Media-Specific Styles
  • Overview
  • Media Styles in Action
  • Common Print Styles
  • Print CSS
  • Media Queries

Assignment

• Simple Print Styles

2014-12-04 In-Class Work

Work! Work! Work!

2014-12-09 Responsive Web Design with Bootstrap

Slides

• Fixed to Fluid to Responsive: Grids in Design
  Grids in design. 960. Unsemantic. Foundation. Twitter Bootstrap. Fixed layouts. Fluid layouts. Responsive layouts.
• Bootstrap: A Quick Introduction
  Installation. Using Bootstrap. Template. Grid system.

Assignment

• Responsive Web Design: Sidebar Page
  An introductory assignment for learning Responsive Web Design with Twitter Bootstrap.

2014-12-11 Responsive Web Design with Bootstrap

Files

• Photoshop & HTML Templates for Bootstrap

2014-12-16 Finals

Final due!

Follow the instructions at Colostomo Website & hand it in.

2014-12-18 Finals

Final due!

Those who didn’t present on 2014-12-16 will go today.

Evaluation

• Intro to Web Programming Evaluation