Preamble

  • Course Title: Theory and Programming of Interactive Media I (MSTU 5003)
  • Lecture: Mondays, 7:00 PM – 9:00 PM, Horace Mann (HM) 234
  • Recitation: Wednesdays, 7:20 PM – 8:20 PM, Macy (MY) 345B
  • Office Hour: Wednesdays, 6:00 PM – 7:00 PM, Macy (MY) 345C
  • Dates: 21 January 2015 – 12 May 2015
  • Instructor: Roy Vanegas
  • Teaching Assistant: Joanne Beckwith

Description

The first of a two-semester sequence, Theory and Programming of Interactive Media I teaches students how to manipulate the logic of computer programming, develop logical, intuitive multimedia projects, and instills in students the importance of superb UI design. Using HTML5, CSS3, and JavaScript/jQuery (collectively known as the front-end web stack), students learn to develop accessible, W3-compliant web-based applications “rooted in learning theories,” as Professor Jin Kuwata notes in his syllabus. At the conclusion of this course, students will understand the complexities of creating front-end, web-based, multimedia projects.

Note: there is not a Flash component to this course. At one point, however, there was, and, consequently, some legacy course descriptions still mention Flash when referencing this and the subsequent course, Theory and Programming of Interactive Media II.

Prerequisite

There are no prerequisites for the course, and no prior programming experience is required. It is assumed, however, that students are proficient with the Windows, Mac, and/or Linux operating systems.

Learning Outcomes

Upon successful completion of this course, you will understand...

  • the many elements of a fron-end web application, from HTML to JavaScript.
  • the importance of good user interface and user interaction design.
  • the basic elements of a client-side language and its impact on real-time, on-the-fly document manipulation, via JavaScript/jQuery.
  • the theories behind building solid and sound multimedia web applications.

Schedule

Note: classes do not meet between 15 — 22 March for spring break.

Week Dates Topics Homework
1 Wednesday (21 January) Rec Introduction to the course, its materials, and my teaching style.
  • Purchase your books.
  • Install the required software. (See the Software Requirements section.
2 Monday (26 January) Lec
  • A historical discourse on the evolution of the Internet and its technologies.
  • A discussion on type.
  • An introduction to the front-end web stack.
Wednesday (28 January) Rec Good design—how to spot it. Bad design—how to avoid it. Read chapters 1 – 5 in The Laws of Simplicity.
3 Monday (2 February) Lec
  • An introduction to HTML, CSS, and JavaScript/jQuery syntax.
  • An introduction to HTML4.01 and HTML5.
Wednesday (4 February) Rec
  • Wireframing
  • Typography
 Read chapters 6 – 10 in The Laws of Simplicity.
4 Monday (9 February) Lec HTML
Wednesday (11 February) Rec Read pages 90 – 100 in The Laws of Simplicity.
5 Monday (16 February) Lec
  • HTML
  • Final project proposals
Wednesday (18 February) Rec Read chapters 1 – 3 in Don’t Make Me Think.
6 Monday (23 February) Lec HTML
Wednesday (25 February) Rec Read chapters 4 and 5 in Don’t Make Me Think.
7 Monday (2 March) Lec An introduction to CSS.
Wednesday (4 March) Rec Read chapters 6 and 7 in Don’t Make Me Think.
8 Monday (9 March) Lec CSS Read chapter 2, Selecting, Decorating, and Enhancing in jQuery: Novice to Ninja.
Wednesday (11 March) Rec Read chapters 8 and 9 in Don’t Make Me Think.
9 Monday (23 March) Lec CSS Read chapter 3, Animating, Scrolling, and Resizing in jQuery: Novice to Ninja.
Wednesday (25 March) Rec Read chapters 10 – 12 in Don’t Make Me Think.
10 Monday (30 March) Lec CSS Read chapter 4, Images and Slideshows in jQuery: Novice to Ninja.
Wednesday (1 April) Rec Read chapters 1 and 2 in The Elements of User Experience.
11 Monday (6 April) Lec An introduction to JavaScript/jQuery. Read chapter 5, Menus, Tabs, Tooltips, and Panels in jQuery: Novice to Ninja.
Wednesday (8 April) Rec Read chapter 3 in The Elements of User Experience.
12 Monday (13 April) Lec JavaScript/jQuery Read chapter 6, Construction, Ajax, and Interactivity in jQuery: Novice to Ninja.
Wednesday (15 April) Rec Read chapter 4 in The Elements of User Experience.
13 Monday (20 April) Lec JavaScript/jQuery Read chapter 7, Forms, Controls, and Dialogs in jQuery: Novice to Ninja.
Wednesday (22 April) Rec Read chapters 5 and 6 in The Elements of User Experience.
14 Monday (27 April) Lec JavaScript/jQuery Read chapter 8, List Trees, and Tables in jQuery: Novice to Ninja.
Wednesday (29 April) Rec Q&A Lab Read chapters 7 and 8 in The Elements of User Experience.
15 Monday (4 May) Lec JavaScript/jQuery Read chapter 9, Plugins, Themes, and Advanced Topics in jQuery: Novice to Ninja.
Wednesday (6 May) Rec Q&A Lab
16 Monday (11 May) Lec Final project presentations

Code

29 April 2015
— Two elaborate HTML5 audio examples
27 April 2015
— A simple Ajax example
13 April 2015
— Simple example of responsive design, using a navigation menu
— Working with a reset CSS document
6 April 2015
— Working with Font Awesome
1 April 2015
— The beginning of a simple, JavaScript-based Q&A project using facts surrounding Abraham Lincoln’s assassination as its content
30 March 2015
— Beginning JavaScript
25 March 2015
— Simple form example
23 March 2015
— Images rendered in circles
— Simple single-row navigation system
2 March 2015
— Tables and colors
25 February 2015
— The <div> element
2 February 2015
— Some introduction HTML

Required Textbooks

The required theory-based and jQuery textbooks are listed below.

I will be writing your readings on HTML and CSS, and these will be assigned from the web site http://www.essential-html.com.

Title Author Cover
Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability Steve Krug
The Laws of Simplicity John Maeda
jQuery: Novice to Ninja Earle Castledine & Craig Sharkie
The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) Jesse James Garrett

Software Requirements

All the required software for this course is listed below. Most are free and available for Mac and Windows.

Browsers

Download all the browsers available at Browse Happy, and get Firefox’s Developer Edition here. I use Chrome and both versions of Firefox in class.

Text Editor/IDE

You’ll require a text editor to write your source code. You may use Sublime Text or WebStorm. The former is a simple editor, the latter a full integrated development environment, or IDE. Sublime Text is free (indefinitely), but requires a $70 license fee to remove occasional purchase reminders. Use these preference files with Sublime.

WebStorm, free for students, is an advanced tool for web developers. It’ll prove useful as a text editor at the outset, and will become more valuable as you grow into a more sophisticated web developer.

Fonts

Here are a few typeface alternatives to the banal, stock issue, fixed width fonts included with Windows and Mac:

A Link Checker

The W3’s Link Checker isn’t software you download, but rather a utility that verifies links on a web page so you don’t have to. Bookmark it.

A Compression/Decompression Utility

If you’re using Windows and you don’t have a compression/decompression utility, download 7-Zip, which is free and open source. Mac and Linux/UNIX users already have free compression utilities installed at the command line.

Grading Standards

Grading Formula

Your grade for this course will be computed entirely on the following formula:

  1. Attendance/participation/caring (25%)
  2. Final project proposal (25%)
  3. Final project presentation (50%)

This grading formula will be adhered to quite closely.

The A Range

A (“Work of exceptional quality”)

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might—or should—share their knowledge with their classmates, and are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.

A- (“Work of high quality”)

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed a class or showed up to class late too often.

The B Range

B+ (“Very good work”)

Students earning grades of “B+” produce very good work, which is close to that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, these are under control and do not impede user experience or content.

B (“Good work; satisfies course requirements”)

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

B- (“Below-average work”)

Students in the “B-” range are producing work that is considered above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling enought for a grade of “B.”

The C Range

C+ (“Less than adequate work”)

“These are average assignments. They will demonstrate some success in engaging with the assigned material. The work shows that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, their assignments will demonstrate effort in the areas of user experience and interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general—or even advanced—coding and/or design errors that create unwanted or negative rendering. The assignments, for the most part, work, and an effort to debug errors and re-design poor design is present.”

C (“Well below average work”)

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

C- (“Poor work; lowest possible passing grade”)

A student who earns a grade of “C-” has performed the absolute bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal expended effort.

F (“Failure”)

Failing grades are earned by students who do not submit required work, miss class excessively, produce incomplete work, and/or do not take examinations (without prior notification and approval). Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

Important Note

Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.

I do not accept late work; Manage your time well.

Web Programming Resources

HTML

CSS

JavaScript

Validators

Divisional, Program, and Class Policies

  • Attendance: Attending class is compulsory, and students risk failing this course for excess absence, defined as missing class for two or more lectures/recitations. Lateness or early departure from class may also translate into one full absence. Documented absences do not count toward the absence allotment. Irrespective of why a student was absent, she/he is responsible for any material missed.
  • Participation: Class participation is an essential part of class and includes keeping up with reading, assignments, projects, contributing meaningfully to class discussions, and regularly attending class on time.
  • Delays: In rare instances, I may be delayed arriving to class. If I have not arrived by the schedule time class starts, you must wait a minimum of thirty minutes for my arrival. In the event that I miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting. Note: In the eleven years that I’ve been teaching, I have yet to miss a class.
  • Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
  • Academic Honesty and Integrity: Academic honesty and integrity is the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use.” The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the University, or dismissal from the University.
  • Student with Disabilities: In keeping with the University’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations are kept confidential. Students requesting any accommodations will also need to meet with the Office of Access and Services for Individuals with Disabilities. OASID assists students with disabilities in need of academic and programmatic accommodations as required by the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Federal Rehabilitation Act of 1973.

Help

You have four options for help:

  • The Google Group
  • The Internet (including Stack Overflow and the like)
  • Your TA
  • Me

The Google Group

Posting your questions to the Group is equivalent to asking them in class: everyone is exposed to your question and my or Joanne’s answer. In general, if you’d ask a question during class, then its appropriate for the group.

The Internet

Google your questions, error messages, and the like. It’s highly likely that many others have asked your same question or encountered the same error, and that one or more people have posted answers. The Q&A web site Stack Overflow will prove especially helpful. Read about how it works here.

Your TA

Joanne has been hired by Columbia specifically to help you. Make use of her.

Me

There will be myriad opportunities for you to ask me questions: during, before, or after class, during breaks, and during office hours.

Contact and Office Hours

Joanne’s email is jlb2288 at tc dot columbia dot edu. You may also meet with her during her office hours, which will be scheduled during the first week of class.

My email address is rv2357 at tc dot columbia dot edu. However, I rarely every answer emails nowadays.

For help, you’re strongly advised to see me in person, before or after class, during the break, or my office hour. We can also meet via Skype.