Calendar

  1. Welcome and Overview January 11, 2016

    Class Agenda

    1. Welcome & Introductions
    2. Review course policies, calendar, projects
    3. Introduce Background and Ambitions Project
    4. Web-standards history and theory

    Assigned Work

    To Read
    1. Stolley, How to Design and Write Web Pages, 2nd ed. (draft). Chapters 1-6
    2. Pro Git, Chapter 2 (read all sections)
    3. David Heinemeier Hansson, Finding your workbench muse
    4. Inspiration: Ten Remarkable Website Typography Designs
    To Do
    1. Submit COM327/530 Contract and Survey (link in your @hawk.iit.edu inbox)
    2. Create Basecamp account (invite will arrive after you submit the Contract and Survey)
    3. Sign up for a GitHub account
    4. Computer setup (Text editor, Node.js, Git); follow links on this wiki page
    5. Begin plain-text and Git work on Background and Ambitions project
    6. Use your editor and Git for as much writing as possible (emails, to-do lists, etc. etc.)

    Martin Luther King, Jr. Day NO CLASS January 18, 2016

  2. Essential Languages: XHTML/HTML5, CSS, JavaScript; Essential Tools January 25, 2016

    Class Agenda

    1. Introducing ourselves, lab logins
    2. Linux Mint: Keyboard shortcuts, workspaces
    3. Set up Git and GitHub with these instructions
    4. Working with the command-line interface (CLI)
    5. Working with plain text and version control (Git)
    6. Hands-on with XHTML/HTML5, CSS, and JavaScript

    Assigned Work

    To Read
    1. Stolley, chapters 10-12
    2. Wroblewski, Mobile First, chapters 2 & 3
    3. Keith, HTML5 for Web Designers (contents linked from sidebar on that page), chapters 1, 2, & 5
    4. Web Standards Project, “History
    5. Video (40 mins): Jeffrey Zeldman: 20 Years of Web Design and Community
    6. Get familiar with the contents and organization of WebPlatform.org and Mozilla Developer Network’s Web technology for developers
    7. Inspiration/History: CSS Zen Garden (browse as many designs as possible, on as many devices as possible)
    To Do
    1. Post draft of Background and Ambitions project to GitHub
    2. Email instructor with your project’s GitHub link
  3. Foundational Techniques: Semantic Structure; Mobile First; Typographic Scales February 1, 2016

    Class Agenda

    1. Reading discussion
    2. Theory and hands-on with three foundational techniques (and lots of Mozilla Developer Network, MDN, documentation):
    3. Overview of SMACSS for organizing stylesheets

    Assigned Work

    To Read
    1. Lupton, ed., Type on Screen, chapters 01 & 02
    2. Wroblewski, chapters 4 & 5
    3. Wilson Miner, “Setting Type on the Web to a Baseline Grid
    4. Richard Rutter, “Compose to a Vertical Rhythm
    5. Inspiration: MediaQueri.es (gallery site; browse as many designs as possible, on as many devices as possible)
    To Do
    1. Continue work on Background and Ambitions project
  4. Accessibility: General Principles, Touchscreens February 8, 2016

    Class Agenda

    1. Open Q&A on all material covered so far
    2. Accessibility: General principles, touchscreens

    Assigned Work

    To Read
    1. Stolley, chapters 7, 14, & 16
    2. Clark, Designing for Touch, chapters 1-3
    3. Keith, chapter 3 of HTML5 for Web Designers
    4. Clarissa Peterson, “Accessibility in HTML5
    5. W3C, “Using WAI-ARIA in HTML” (Introduction; first thru fifth rules of Aria use; browse remainder)
    6. Inspiration: Personal Websites on One Page Love (browse gallery; visit actual sites)
    To Do
    1. Complete Background and Ambitions project; double-check your project against the project requirements and deliverables
  5. Layout: Media Queries; More Typographic Scales, Grids February 15, 2016

    Class Agenda

    1. Background and Ambitions Project Due
    2. Introduce Single-Page Web Presence project
    3. Reading discussion
    4. Media queries and meta-viewport elements
    5. Working with accessible non-text media in HTML5:

    Assigned Work

    To Read
    1. Mark Boulton, “Five Simple Steps to Designing Grid Systems” (Part 1, Part 2, Part 3, Part 4, Part 5)
    2. Nick Salloum, “Easy Responsive CSS Grid Layouts: 4 Methods
    3. Inspiration: Typography (not all of it Web) on Inspiration Grid
    To Do
    1. Start a new GitHub repository and begin working on copy and media elements for Single-Page Web Presence project
  6. Review: Old Material, New Technology and Grids & CSS3 Techniques February 22, 2016

    Class Agenda

    1. Set up Configurable Menu applet in Mint
    2. Firefox Developer Edition and Firefox Web Developer Add-on
    3. Review: Eric Meyer’s Reset CSS v. 2.0 (direct link to CSS file)
    4. New: CSS3 display: flex A Complete Guide
    5. Node utility: postcss
    6. Q&A

    Assigned Work

    To Read
    1. Stolley, chapters 15, 17
    2. Lupton, chapter 04
    3. Clark, chapters 4 & 5
    4. Frank Chimero, The Web’s Grain
    5. Inspiration: One Page Love NB: Some may not be responsive. Most are.
    To Do
    1. Work on Single-Page Presence project
  7. Richer Media Elements: HTML5/CSS Techniques February 29, 2016

    Class Agenda

    1. Project Presentations
    2. Git LFS: setup and usage
    3. Working with accessible non-text media in HTML5:

    Assigned Work

    To Read
    1. Stolley, Chapter 18
    To Do
    1. Work on Single-Page Presence project; double-check your work against the project deliverables and requirements
  8. Stylesheet Organization; RWD refresher March 7, 2016

    Class Agenda

    1. Project Presentations
    2. Introduce Expanded Web Presence project
    3. SMACSS-style Organization for CSS
    4. Refresher on RWD & media queries

    Assigned Work

    To Read
    1. Read through SMACSS chapters: Categorizing CSS Rules, Base, Layout, Module
    2. Media Queries
    3. Working with media queries and min-width
    4. Butterick’s Practical Typography (all)
    5. Balancing Line Length and Font Size in RWD
    6. Haverbeke, Eloquent JavaScript, Introduction and chapters 1-6
    To Do
    1. Finish Single-Page Presence project; double-check your work against the project deliverables and requirements

    Spring Break NO CLASS March 14, 2016

  9. Web Typography: @font-face, Hosted Solutions March 21, 2016

    Class Agenda

    1. Review calendar through end of the semester
    2. Open-ended Q&A
    3. Web fonts, FOUT, and font-stacks
    4. OpenType features and the limits of free fonts
    5. Progressively-enhanced approaches to Web fonts, including Web Font Loader events
    6. Single-Page Presence Project Due

    Assigned Work

    To Read
    1. Stolley, chapters 20
    To Do
    1. Begin work on Expanded Web Presence project
  10. Site Architecture March 28, 2016

    Class Agenda

    1. Developing and adhering to a solid site architecture
    2. Working with performance tools like Google PageSpeed

    Assigned Work

    To Read
    1. Stolley, Chapters 22 & 25
    2. Haverbeke, Eloquent JavaScript, Introduction and chapters 1-6 (assigned again, if by some strange chance you didn’t read it over spring break)
    3. picture element and source element
    4. More at Responsive Images Community Group
    To Do
    1. Continue work on Expanded Web Presence project
  11. Sustainability, Performance, and Progressive Enhancement: JavaScript & jQuery; Revisiting picture elements April 4, 2016

    Class Agenda

    1. JavaScript and jQuery
    2. The JavaScript console

    Assigned Work

    To Read
    1. Stolley, Chapters 9 & 13
    2. Haverbeke, Eloquent JavaScript, Introduction and chapters 12-14
    To Do
    1. Finish Expanded Web Presence project
  12. Preprocessors: HAML, SASS; Minification, Lint Tools April 11, 2016

    Class Agenda

    1. Create some aliases in .zshrc file
    2. HAML HTML preprocessor for Node (HAML HTML elements reference)
    3. Sass/SCSS CSS preprocessor for Node (SCSS guide and full reference)
    4. Lint tools: HTML Lint, CSS Lint, JSHint
    5. minify, a simple minification tool built on Node.js

    Assigned Work

    To Read
    1. Stolley, Chapter 23
    To Do
    1. Set up HAML & Sass on your computer by running $ npm install -g coffee-script haml-coffee node-sass in your terminal
    2. Add HAML/Sass aliases to your .zhsrc/.bashrc file
    3. Finish expanded presence project (due 4/18)
  13. Theming: Tumblr; WordPress/Drupal and Friends/Enemies April 18, 2016

    Class Agenda

    1. Expanded Web Presence project due
    2. Course Evaluations (15 mins)
    3. Introduce Tumblr theme project
    4. Introduce Sass project (COM530 only)
    5. Tumblr theming reference
    6. Example: Stolley’s Tumblr theme on GitHub (shares same CSS with karlstolley.com)

    Assigned Work

    To Read
    1. Stolley, Chapter 24
    To Do
    1. Work on remaining project(s)
  14. Work Week / No Class April 25, 2016

    Class Agenda

    1. Stolley available online only for Q&A and open work time

    Assigned Work

    To Do
    1. Finish remaining projects, due 5/4 at 11:59pm

Projects

Tumblr Theme (Due May 4, 11:59pm)

You will repurpose your visual design from the Expanded Web Presence project into a Tumblr theme that adds a blogging/social component to your site or the site for your organization. You must use HAML (or another HTML preprocessor of your choosing) to create a more manageable codebase for your theme’s HTML structure. You may optionally also use Sass, LESS or another CSS preprocessor, but your CSS must be based on your stylesheets for the Expanded Presence project.

Goals

  • Learn the basics of front-end development
  • Learn to repurpose HTML and CSS to extend the look and feel of a website to another service
  • Develop a foundation in writing with an HTML preprocessor
  • Employ mobile-first, responsive design techniques and typographic grids/grid systems

Deliverables

  • An email to the instructor by the due date containing:
    • The https:// link to your project’s GitHub repository containing your HAML/preprocessed HTML and CSS files; and optionally also your compiled HTML file
    • The URL with your live, posted project on Tumblr (either at your own domain/subdomain or at username.tumblr.com)
    • A 4-5 sentence self-critique, including details of your experiences working with HTML/CSS preprocessors (email to instructor by due date)

Requirements

  • A Tumblr theme that handles at least one Tumblr post type in addition to the Text post type (e.g., Photo, Quote, Link, Chat, Audio, Video, Answer)
  • Two posts to your Tumblr blog showing the Text post type and your chosen additional type
  • Valid, well-formed HTML5 output from preprocessor source and CSS
  • A single CSS file for controlling the design of all site pages
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • Thoughtful use of media-queries with breakpoints specified in em units
  • JavaScript that does not throw any errors, if project uses JavaScript
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, other than your chosen preprocessor)

Useful Resources

Sass Rewrite (COM530 students only; Due May 4, 11:59pm)

You will rewrite the CSS from your Expanded Web Presence project/Tumblr theme project as Sassy CSS (.scss). Include the SCSS file in your repository, but set up your .gitignore file to ignore both the .sass-cache directory and any .map files.

Completed Projects

Background and Ambitions (Due February 15)

You will write four to five paragraphs about your background as well as your ambitions for this class and your career at IIT and beyond. Begin by writing this in either simple plain text (.txt) or Markdown (.md) in your text-editor of choice. Be sure to make frequent, descriptive commits in Git as you write.

Once you have finished your plain-text version, use git tag to tag it as plain-text. You will then create a basic structured HTML page out of your plain-text work (revision to your content is encouraged), styled with a separate, basic stylesheet in CSS that is linked to your HTML via the <link> tag. Commit this also to Git as you write.

Goals

  • Learn to work with plain text and do basic HTML and CSS source-formatting
  • Learn to name files for the web
  • Learn to organize files in a Git repository
  • Learn to share your work via GitHub
  • Learn some basics of HTML and CSS
  • Create a mobile-friendly, mobile-first design

Deliverables

  1. An email to the instructor by the due date containing:
    • The https:// link to your project’s GitHub repository (email URL to instructor by due date)
    • A 4-5 sentence self-critique of your project and your progress in class to this point (include in email to instructor by due date)

Requirements

  • Valid, well-formed HTML5 and CSS
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators)
  • A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make

Single-Page Web Presence (Due March 21)

You will create a mobile-first, responsively-designed single-page web presence for yourself or a club, organization, or business that you are affiliated with that currently has no web presence. If you already have a web presence that you do not wish to alter, you will create a GitHub homepage for yourself on github.io using GitHub pages.

Goals

  • Engage the rhetorical complexities of writing content for a single-page presence
  • Increase your sophistication in writing HTML and CSS
  • Employ mobile-first, responsive design techniques
  • Design to a typographic scale
  • Design to a basic grid system

Deliverables

  1. A class presentation of your work (see email for your personal due date)
  2. An email to the instructor by the due date containing:
    • The https:// link to your project’s GitHub repository (email URL to instructor by due date)
    • The URL with your live, posted project (either at your own domain or at username.github.io)
    • A 1-2 paragraph self-critique (email to instructor by due date)

Requirements

  • Valid, well-formed HTML5 and CSS
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • Thoughtful use of media-queries with breakpoints specified in em units
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators)
  • A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
  • GitHub repository must contain only the files and commits from this project

Expanded Web Presence (Due April 18)

Building on your expanding capabilities with web design, you will revisit your single-page presence and expand to a multi-page or multi-page-like presence that provides greater user engagement and a stronger representation of yourself (e.g., through an online portfolio of work) or your organization (e.g., by showcasing activities, members, etc.).

Important: Students looking to improve their grades for the Single-Page Presence Project may do so by excelling at this project and submitting, along with the reflection memo for this project, a detailed list of improvements made based on shortcomings of the Single-Page Presence project. Single-Page Presence grades will be matched to the grades earned for the Expanded Web Presence project.

Goals

  • Engage the rhetorical complexities of writing content for a multi-page presence
  • Revise an existing web project of one’s own creation
  • Experiment with creative ways to present examples of your academic or professional work
  • Increase your sophistication in writing HTML and CSS
  • Employ mobile-first, responsive design techniques
  • Design to a typographic scale
  • Design to a basic grid system

Deliverables

  • An email to the instructor by the due date containing:
    • The https:// link to your project’s GitHub repository (email URL to instructor by due date; ideall, this will be the same repository as your single-page presence project)
    • The URL with your live, posted project (either at your own domain or at username.github.io)
    • A 1-2 paragraph self-critique, plus a detailed description of improvements over the Single-Page Presence project for students looking to improve their grades (email to instructor by due date)

Requirements

  • Valid, well-formed HTML5 and CSS
  • A single CSS file for controlling the design of all site pages
  • HTML-based fallbacks for any media elements (image, audio, video) that you include
  • Thoughtful use of media-queries with breakpoints specified in em units
  • CSS3 transitions that enhance user experience, where appropriate
  • JavaScript that does not throw any errors, if project uses JavaScript
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators)
  • A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
  • GitHub repository must contain only the files and commits from this project, and possibly also Project 2

Instructor

Prof. Karl Stolley

  • karl.stolley@gmail.com
  • @karlstolley on Twitter
  • karl.stolley on Skype
  • Office hours in Siegel Hall 208 or via Skype (karl.stolley) or GChat (karl.stolley@gmail.com) on Mondays & Wednesdays, 2pm to 3pm, or by appointment or chance (I’m signed into GChat most of the time)

Policies

Course Description

This course introduces the theory and applied practice of designing for the web according to standardized forms of the web’s core languages (HTML5, CSS, and JavaScript). The course focuses on an agile, incremental approach to building accessible, usable, and sustainable websites that work across all modern browsers and web-enabled mobile devices. The course also provides a rhetorical and technological foundation for establishing competence in other areas of web-based experience design and communication, such as web application development.

  1. Course Goals

    • Learn to create, prepare, and maintain web- and audience-appropriate text and media
    • Learn to structure web pages that are both valid and well-formed according to the Extensible Hypertext Markup Language (XHTML) and HTML5
    • Learn to create page designs using the Cascading Style Sheet (CSS) design language
    • Understand and implement web standards from the World Wide Web Consortium (W3C), Ecma, ISO, and other standards-issuing groups
    • Understand and apply progressive enhancement and responsive design in web development
    • Develop an agile approach to web writing and design, supplemented by the use of a version control system (Git)
    • Apply course concepts and adjust/extend course projects to fit your own academic and professional interests
  2. Materials and Technologies

    Required Texts

    • Clark, Josh. Designing for Touch. New York: A Book Apart, 2015.
    • Lupton, Ellen, ed. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students. New York: Princeton Architectural Press, 2014.
    • Wroblewski, Luke. Mobile First. New York: A Book Apart, 2011.
    • Other materials linked from the course calendar and otherwise made available electronically

    Recommended Texts

    • Swicegood, Travis. Pragmatic Version Control Using Git. Dallas, TX: The Pragmatic Bookshelf, 2012.

    Required Materials

    • A blank, bound paper sketchbook of about 100 pages

    Required Technologies

    • An email account that you check regularly
    • A Dropbox account
    • A Basecamp account (invite will arrive via email); Basecamp, not Blackboard, will be where we coordinate our work and communication in- and outside of class.
    • A GitHub account (see note about anonymity in the course technology policy below)
    • A touch-screen device (phone, tablet, etc.)
    • The domain of your name (e.g., karlstolley.com is the instructor’s)
    • A personal computer, ideally Unix-based (Linux, BSD, OS X), with the following software installed:
      • A plain-text editor capable of syntax highlighting; set up to use UTF-8/Unicode and Unix-style line endings (LF)
      • Firefox Developer Edition (free)
      • Git (free)
      • Node.js (free)
      • Image-editing software (such as the free and open-source GIMP)
      • As many different browsers as your operating system supports (e.g., Chrome, Opera, Firefox; all free)
  3. Grading Policy: COM327 Students

    • Project 1: 10pts
    • Project 2: 10pts
    • Project 3: 25pts
    • Project 4: 15pts
    • Participation: 40pts
    • TOTAL: 100pts

    A = 90+ pts; B = 80-89pts; C = 70-79pts; D = 60-69pts; E =< 59 pts

    Grading Criteria

    • A - Student has turned in all required components of a project, the work is exceptional in quality, and reflects the student’s dedication to adjusting the project to his or her own interests.
    • B - Student has turned in all required components of a project, and the work is exceptional for undergraduate work.
    • C - Student has turned in all required components of a project and submitted work that is acceptable as undergraduate level.
    • D - Student has turned in all required components of a project, but the work is below undergraduate level.
    • E - Student has not turned in all required components of a project.
  4. Grading Policy: COM530 Students

    • Project 1: 10pts
    • Project 2: 10pts
    • Project 3: 25pts
    • Project 4: 15pts
    • Project 5: 10pts
    • Participation: 30pts
    • TOTAL: 100pts

    A = 90+ pts; B= 80-89pts; C=70-79pts; E =< 69 pts

    Grading Criteria

    • A - Student has turned in all required components of a project, the work is exceptional in quality, and reflects the student's dedication to adjusting the project to his or her own interests.
    • B - Student has turned in all required components of a project and submitted work that is acceptable as graduate level.
    • C - Student has turned in all required components of a project, but the work is below graduate level.
    • E - Student has not turned in all required components of a project.
  5. Assignment Submission

    All assignments for this course will be submitted via email to the instructor, at karl.stolley@gmail.com. Submissions should not include email attachments, but rather URLs pointing to your project’s Git repository or, for certain assignments as indicated, Dropbox Share URLs. Examples will be demonstrated in class.

    Late Work

    I do not accept late work. All work must be submitted before the date and time specified in each project description. Weekly work is due before the start of the first class meeting each week.

  6. Participation

    Your active participation in class and in online discussions and chats is required both for your own success in the class, and for the success of the class as a whole. I do not give reading quizzes, but I assign a lot of reading. And I expect you to be prepared to discuss that reading.

  7. Course Technology Policy

    Technology is an essential part of learning and day-to-day living. It is therefore essential to this class. You are just as responsible for learning to command various technologies as for any other course content. Difficulty with technology is not an acceptable excuse for being unprepared for class.

    If you are having trouble with technology or any other material covered in this course, it is your professional responsibility to do research beyond the resources and guidance provided in class and find materials that work for you. I also encourage all students to meet with me during my office hours or at another arranged time. I prefer that you contact me via email or GChat well in advance of assignment and project deadlines.

    Note that coming to class with broken or malfunctioning work is far better than showing up with nothing but an excuse like “I just didn’t get it.” For most of the semester, it is expected that you’ll show up with broken work. When you’re learning, effort is more important than perfection. Just be sure to put in the effort early, and not the night before a project is due.

    Also, I have asked you to sign up for a GitHub account for this class. Note that GitHub accounts are public, as are most social-type accounts. To protect your privacy you are certainly allowed to use a pseudonym/alias for GitHub and any other account. At the same time, you might want to think about how establishing GitHub and other accounts under your own name, in cases where you conduct yourself professionally, might actually be an asset to your online presence, and the results that future schools or employers turn up when they search for you on Google and elsewhere.

  8. Academic Honesty

    As with any course at IIT, you are expected to uphold the Code of Academic Honesty as described in the IIT Student Handbook). All work for this course must be your own original effort, including print and digital page design and computer code. Summarizations and quotations of text, as well as any use of open-source code libraries and images not of your own making, should be clearly cited as legally and ethically warranted and rhetorically appropriate. Access, storage, dissemination, and other use of data from third-party sources must conform to the source’s terms of service, licensing, and other relevant legal and ethical restrictions.

    If you are at all uncertain as to whether you are submitting work that in whole or in part may violate the Code of Academic Honesty, please contact me immediately and before the work is due. The consequences of academic dishonesty are severe. Any student who violates the Code of Academic Honesty will be subject to expulsion from this course with a failing grade, and I will report the student to the Chair of the Department of Humanities, who may take additional disciplinary action, including reporting violations to the relevant offices of Undergraduate or Graduate Academic Affairs.

  9. Special Needs Statement

    Reasonable accommodations will be made for students with documented disabilities. In order to receive accommodations, students must obtain a letter of accommodation from the Center for Disability Resources. The Center for Disability Resources is located in IIT Tower, 3424 S. State Street - 1C3-2 (on the first floor). Contact the Center by telephone at 312-567-5744, by TDD at 312-567-5135, or via email at disabilities@iit.edu

    Students who have any difficulty (either permanent or temporary) that might affect their ability to perform in class should contact me privately, either in person or via email, at the start of the semester or as a documented difficulty arises. Methods, materials, or deadlines will be adapted as necessary to ensure equitable participation for all students.