Fall 2014 Course Calendar

  1. Aug 26 Essential Tools: Editor, Command Line, Git; Files & Paths

    Before diving into the languages of web design, we’ll work for a week with essential tools: plain-text editors and the version-control system Git along with sensibly-named and findable files and directories (folders) and their paths on the command line.

    • In Class

      • Welcome & introductions
      • Course policies, calendar, projects
      • Working with the command-line interface (CLI)
      • Working with plain text and version control (Git)

    • To Read

    • To Do

      • Email instructor w/ your preferred email address
      • Sign up for Basecamp/Campfire account (invite coming via email)
      • Sign up for Twitter, Tumblr, and GitHub accounts
      • Computer setup (Text editor, Node.js, Git); follow links on this wiki page
      • Begin plain-text and Git work on Background and Ambitions project
      • Use your editor and Git for as much writing as possible (emails, to-do lists, etc. etc.)

  2. Sep 02 Essential Languages: XHTML/HTML5, CSS, JavaScript

    Three languages make up the core of user-facing web design. We’ll look at the history, development, and standard usage of each.

  3. Sep 09 Foundational Techniques: Semantic Structure; Mobile First; Typographic Scales

    Web design is daunting in the abstract. It can be simplified greatly by employing three foundational techniques that support mobile-friendly, future-proof pages.

  4. Sep 16 Accessibility & Media: Image, Audio, Video [Background and Ambitions DUE]

    Although non-text media elements deserve their own careful study and treatment, they all present a shared set of accessibility challenges for diverse users and their devices.

  5. Sep 23 Layout: Media Queries; More Typographic Scales, Grids & CSS/CSS3 Techniques

    We revisit the typographic scale and work closely with grid-based design aided by advanced CSS3 layout techniques that gracefully degrade or rely on effective polyfills.

  6. Sep 30 Review: Old Material, New Technology and Techniques

    We’ll cover some issues that plagued many students for the first project, introduce a few new, useful technologies and techniques, and take time to answer questions.

  7. Oct 7 Usability & Interface Elements: HTML5/CSS Techniques [Single-Page Presence DUE...Friday]

    • In Class

    • To Read

      This is a hefty list of readings, esp. the Haverbeke; that's because we won't meet again until 10/21.

      • Maeda, Laws 4-6
      • Stolley, chapters 7, 13
      • MDN Guide to HTML Forms, articles 1-4 (through all of the styling sections)
      • Haverbeke, Eloquent JavaScript, Introduction and chapters 1-6, 12-14, 18

    • To Do

      • Finish Single-Page Presence project; double-check your work against the project deliverables and requirements; send email with GitHub URL and reflection memo to instructor by Friday, 10/10 at 11:59pm
      • Work on Login/Sign-up Form; email GitHub URL draft to Stolley week of 10/13; project due 10/21

  8. Oct 14 No Class: Stolley at IEEE/IPCC

  9. Oct 21 Sustainability, Performance, and Progressive Enhancement: JavaScript & jQuery

    JavaScript is no longer the dirty word it once was.

  10. Oct 28 Web Typography: @font-face, hosted solutions [Redesigned Login/Sign-up Form DUE Oct. 31 at 11:59pm]

    A brave new world beyond the limited set of system fonts.

  11. Nov 04 Review & Work Session

    Open work-time.

    • In Class

      • Open work-time for Expanded Web Presence project

    • To Do

      • Submit a draft of Expanded Web Presence project to instructor

  12. NOV 11 Optimization: Server requests, minification

    Some basic techniques to speed up page loading and reduce the amount of weight your projects have.

  13. Nov 18 Preprocessors: HAML, LESS, and others [Revised/Expanded Presence DUE]

    Working with preprocessors

  14. Nov 25 No Class: Thanksgiving Break

  15. Dec 02 Theming: Tumblr; WordPress, Drupal and Friends/Enemies

    Front-end design and development over readymade web platforms, for fun and profit.

    • In Class

    • To Do

      • Finish Tumblr theme project; due to Stolley by 11:59pm on Dec. 10

  16. Dec 08 Finals Week [Tumblr Theme DUE 11:59pm Dec 10]

Course Projects

Background and Ambitions (Due Sep 16)

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 commits to 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 allowed and 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

  • A class presentation of your work in progress (see calendar for your personal due date)
  • 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 (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)

Single-Page Web Presence (Due Friday Oct 10)

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

  • A class presentation of your work (see email for your personal due date)
  • 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)

Redesigned Login/Sign-up Form (Due Oct 31)

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.

Goals

  • Consider the usability challenges inherent in web-based forms
  • Design for the needs of new and returning users
  • Increase your sophistication in writing HTML and CSS, particularly for form elements
  • Employ mobile-first, responsive design techniques
  • Design to a typographic scale
  • Design to a basic grid system

Deliverables

  • An email sent to the instructor the week of October 6 with URLs to two possible forms that you might redesign
  • Written feedback on three other student’s projects, via email CC'd to instructor, before project due date
  • An email to the instructor containing:
    • The https:// link to your project’s GitHub repository containing an HTML file, your CSS, JavaScript and any media elements (email URL to instructor by due date)
    • A 1-2 paragraph self-critique (email to instructor by due date)

Requirements

  • Valid, well-formed HTML5 and CSS
  • CSS3 transitions that enhance user experience, where appropriate
  • HTML5 form elements, where appropriate
  • JavaScript that does not throw any errors, if project uses JavaScript
  • 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)

Expanded Web Presence (Due Nov 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)

Tumblr Theme (Due Dec 10, 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.

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
  • Increase your sophistication in writing HTML and CSS via preprocessors
  • 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 1-2 paragraph 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 and CSS output from preprocessor source
  • 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, other than your chosen preprocessor)

Useful Resources

Course Policies

Instructor Information

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.

Course Goals

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

Required Books

  1. Maeda, J. (2006). The laws of simplicity: Design, business, technology, life. Cambridge, MA: The MIT Press.
  2. Stolley, K. (2011). How to design and write web pages today. Santa Barbara, CA: Greenwood Press.
  3. Wroblewski, L. (2012) Mobile first. New York, NY: A Book Apart. (available for purchase from A Book Apart)

Required Materials & Technology

  • Paper sketchbook
  • A plain-text editor
  • A command-line Git installation on personal computer
  • A Node.js installation
  • Firefox and Chrome browsers
  • Twitter account
  • GitHub account
  • Tumblr account
  • A Basecamp/Campfire account (invites coming)
  • Ad-free, commercial web hosting space (not on iit.edu domain)
  • Domain of your name

Recommended Technology

  • A Linux installation on personal computer (if not running Mac)
  • A mobile or tablet device

Grading

  • 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 project deliverables, 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 project deliverables, and the work is exceptional for undergraduate work.
  • C - Student has turned in all required project deliverables and submitted work that is acceptable as undergraduate level.
  • D - Student has turned in all required project deliverables, but the work is below undergraduate level.
  • E - Student has not turned in all required project deliverables.

Late Work

I do not accept late work. All work must be submitted before the date and time specified in each project description.

Attendance and Participation

Your attendance and active participation are required both for your own success in the class, and for the success of the class as a whole. However, if you absolutely must miss, please contact me ahead of time via email. Students missing more than two consecutive class meetings will automatically fail the course.

Regarding active participation: I do not give reading quizzes, but I assign a lot of reading. And I expect you to come prepared to discuss that reading. As evidence that you are prepared, you must post at least three questions you have to our Campfire room before class begins at 6:25.

Academic Integrity

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 (in other words, you may not use readymade templates or WYSIWYG software in this class). 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.

Technology Policy

Because technology is an essential part web design and development, it is essential to this class. You are just as responsible for learning to command various technologies (particularly a plain text editor, the command-line interface, Git, as well as the HTML, CSS, and JavaScript languages) 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 outside of class or to contact me via email or GChat, or our Campfire room, well in advance of 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.

Accessibility and 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 (CDR) is located in IIT Tower, 3424 S. State Street - 1C3-2. Contact the Center by telephone at 312-567-5744 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.