User Interaction Software

Course Overview

Welcome to INF 133: User Interaction Software. Here you will find all learning materials for the course including: assignment descriptions, lecture recordings, lecture notes, references to external material, and quiz results.

This website is built with Jupyter Book because it provides a rich format for sharing, viewing, and consuming technical information. In the upper right side of this website you will find a link that allows you to download the entire book in Markdown or PDF format. Feel free to use this feature if you need an offline copy of course materials. I will be updating this website frequently as we work our way through the class. So be sure to check back at least once a week. However, when major updates do occur, an announcement will be sent to the class mailing list.

Course Description

From the catalog:

Introduction to human-computer interaction programming. Emphasis on current tools, standards, methodologies for implementing effective interaction designs. Widget toolkits, Web interface programming, geo-spatial and map interfaces, mobile phone interfaces.

In practice, every instructor takes a slightly different bend to these topics. I focus on covering modern technologies for web and mobile development and how device capabilities can impact interface design and software architecture.

Learning Objectives

At the end of this course, students should be able to:

  • Program web applications in HTML, CSS, and JavaScript which are sensitive to screen size and a person’s abilities

  • Leverage external data sources and APIs via asynchronous HTTP requests Develop hybrid mobile applications which take advantage of on-device utilities

  • Describe affordances of different screen modalities and input techniques

  • Choose an appropriate web or mobile development framework for a given task

  • Implement and articulate best practices for authentication, storage, and communication in web and mobile

Required Text and Materials

Given the rapid changes in web and mobile development, any materials relying on a particular technology will quickly lose their value as a reference material. Articles online serve as a great resource, and all required materials will be made available. Check the resources section for some pointers, and feel free to send the course staff any resources you find useful as the course progresses.

Assignments

Assignment details will be posted as the quarter progresses. When a new assignment overview page is posted a link to the page will appear in the navigation bar to the left.

Note

For a breakdown of grade percentages and due dates please see the Canvas course page.

Assignments:

  • A0: Getting to Know You, Getting to Know Us

  • A1: Responsive Portfolio in HTML and CSS

  • A2: Runkeeper Tweet Report in JavaScript and TypeScript

  • A3: Spotify Browser using a Web Framework

  • A4: Sleep Tracker

  • A5: Alternative Interaction

Exams

Due to the inherent difficulty of proctoring an exam remotely, and our need to support some remote students, for this quarter we will not have midterm and final exams. Instead, you will complete one additional assignment (A5, required to pass the course) that will require you to bring together the learning objectives for the course. This assignment will be the only (optionally) partnered project allowed for the quarter.

Participation

Participation grades will be based on your individual activity across the various platforms used in the class. To earn full participation credit, you must complete all of the Socrative quiz sessions (taken during lecture) and demonstrate engagement with the class in some capacity. Engagement can occur through discussion during in-person class time, regular attendance at your assigned discussion section, and helpful activity in the class communication tool, Zulip.

Schedule

Note

The following schedule is subject to change throughout the quarter.

Quarter at a Glance

Week 0

Introduction

Week 1

HTML

Accessibility

CSS

Week 2

Responsive Design

Javascript

Week 3

DOM Manipulation

Package Management

TypeScript

Data Visualization Tools

Week 4

Network Communication

Security

Week 5

Web Frameworks

Week 6

Mobile Design

Hybrid Architectures

Week 7

TBD

Week 8

Mobile Frameworks

Mobile Security

Week 9

Mobile Resources & Sensors

Week 10

Databases & Local Storage