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. Read through SMACSS chapters: Categorizing CSS Rules, Base, Layout, Module
    6. 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. Introduce Single-Page Web Presence project

    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
    2. Start a new GitHub repository and begin working on copy and media elements for Single-Page Web Presence project
  5. Layout: Media Queries; More Typographic Scales, Grids February 15, 2016

    Class Agenda

    1. Background and Ambitions Project Due
    2. In-progress project presentations
    3. Reading discussion
    4. Media queries and meta-viewport elements
    5. Working with accessible non-text media in HTML5:

    Assigned Work

    To Read
    1. Stolley, chapters 15, 17, 18
    2. Mark Boulton, “Five Simple Steps to Designing Grid Systems” (all five parts; links at bottom of page for Part 1)
    3. Nick Salloum, “Easy Responsive CSS Grid Layouts: 4 Methods
    4. Inspiration: Typography (not all of it Web) on Inspiration Grid
    To Do
    1. Work on single-page presence project
  6. Review: Old Material, New Technology and Grids & CSS3 Techniques February 22, 2016

    Class Agenda

    1. In-progress project presentations
    2. Introduce Redesigned Login/Sign-up Form project
    3. Set up oh-my-zsh and Firefox Web Developer Add-on
    4. Review: Eric Meyer’s Reset CSS v. 2.0 (direct link to CSS file)
    5. Review(ish): font-family and font stacks; also see fontfamily.io
    6. New(ish): CSS background-image like a boss
    7. New: CSS3 flexbox A Complete Guide
    8. Q&A

    Assigned Work

    To Read
    1. Stolley, Chapter 20
    2. Lupton, chapter 04
    3. Clark, chapters 4 & 5
    4. Keith, chapter 4 (Web Forms 2.0) of HTML5 for Web Designers
    5. Inspiration: 45 Single-Page Website Designs NB: Some may not be responsive. Most are.
    To Do
    1. Finish Single-Page Presence project; double-check your work against the project deliverables and requirements
  7. Usability & Interface Elements: HTML5/CSS Techniques February 29, 2016

    Class Agenda

    1. Single-Page Presence Due
    2. Project Presentations
    3. HTML5 form/interface elements & usability
    4. Styling HTML5 form/interface elements
    5. Prep for 3/14: The JavaScript console

    Assigned Work

    To Read
    1. Stolley, chapters 19, 21
    2. MDN Guide to HTML Forms, articles 1-4 (through all of the styling sections)
    To Do
    1. Work on Login/Sign-up Form
  8. Sustainability, Performance, and Progressive Enhancement: JavaScript & jQuery March 7, 2016

    Class Agenda

    1. JavaScript and jQuery

    Assigned Work

    To Read
    1. Haverbeke, Eloquent JavaScript, Introduction and chapters 1-6, 12-14, 18
    2. Selections from jQuery Learning Center: About jQuery (all), JavaScript 101 (all), and Using jQuery Core (all).
    To Do
    1. Email GitHub URL draft of Login/Sign-up Form to Stolley week of 3/14

    Spring Break NO CLASS March 14, 2016

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

    Class Agenda

    1. Redesigned Login/Sign-up Form Due
    2. Introduce Expanded Web Presence project
    3. Refresher on RWD & media queries
    4. Web fonts, FOUT, and font-stacks
    5. Progressively-enhanced approaches to Web fonts, including Web Font Loader events
  10. Preprocessors: HAML, LESS, and Others March 28, 2016

    Assigned Work

    To Read
    1. ...
    To Do
    1. Set up HAML & Less on your computer by running $ npm install -g coffee-script haml-coffee less in your terminal
    2. Continue work on Expanded Web Presence project
  11. Review & Work Session April 4, 2016

    Class Agenda

    1. Q&A and open work-time

    Assigned Work

    To Do
    1. Finish Expanded Web Presence project
  12. Optimization: Minification, Async; Reducing Server Requests April 11, 2016

    Class Agenda

    1. Expanded Web Presence project due; presentations
    2. Introduce Tumblr theme project
    3. Introduce Pull request project (COM530 only)
    4. Working with performance tools like Google PageSpeed
    5. minify, a simple minification tool built on Node.js

    Assigned Work

    To Do
    1. Work on remaining projects
  13. Theming: Tumblr; WordPress/Drupal and Friends/Enemies April 18, 2016

    Class Agenda

    1. Course Evaluations (15 mins)
    2. Tumblr theming reference
    3. Create alias in .zshrc file: alias hamlr="haml-coffee -r -f xhtml -i" (Then you can use hamlr index.haml to quickly generate HTML from your HAML files.)
    4. Example: Stolley’s Tumblr theme on GitHub (shares same CSS with karlstolley.com)

    Assigned Work

    To Do
    1. Work on remaining projects
  14. Work Week April 25, 2016

    Class Agenda

    1. Q&A and open work time

    Assigned Work

    To Do
    1. Finish remaining projects

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. A class presentation of your work in progress (see calendar 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)
    • 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 February 29)

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. Full project description available on Febraury 8.

Redesigned Login/Sign-up Form (Due March 21)

You will locate a crappy combination login/sign-up form somewhere on the web (don’t worry, they’re not hard to find). You will then create a usable, accessible and mobile-friendly redesign of the form. Full project description available on Febraury 22.

Expanded Web Presence (Due April 11)

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.). Full project description available on March 21.

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 LESS or another CSS preprocessor, but your CSS must be based on your stylesheets for the Expanded Presence project. Full project description available on April 11.

COM530 Only: Pull Request (Due any time before May 4, 11:59pm)

You will fork another student’s Expanded Presence project on GitHub, pull it to your computer and create a feature branch that introduces a minor improvement to the other student’s work, and submit to the student the improvement as a pull request on GitHub. Full project description available on April 11.

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: 10pts
    • Project 4: 20pts
    • Project 5: 10pts
    • 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: 10pts
    • Project 4: 20pts
    • Project 5: 10pts
    • Project 6: 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.