- 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
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.
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.
Upon successful completion of this course, you will understand...
- the importance of good user interface and user interaction design.
- the theories behind building solid and sound multimedia web applications.
Note: classes do not meet between 15 — 22 March for spring break.
|1||Wednesday (21 January) Rec||Introduction to the course, its materials, and my teaching style.||
|2||Monday (26 January) Lec||
|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||
|Wednesday (4 February) Rec||
||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||
|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.|
|Wednesday (8 April) Rec||Read chapter 3 in The Elements of User Experience.|
|Wednesday (15 April) Rec||Read chapter 4 in The Elements of User Experience.|
|Wednesday (22 April) Rec||Read chapters 5 and 6 in The Elements of User Experience.|
|Wednesday (29 April) Rec||Q&A Lab||Read chapters 7 and 8 in The Elements of User Experience.|
|Wednesday (6 May) Rec||Q&A Lab|
|16||Monday (11 May) Lec||Final project presentations|
- 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
- 30 March 2015
- 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
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.
|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|
All the required software for this course is listed below. Most are free and available for Mac and Windows.
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.
Here are a few typeface alternatives to the banal, stock issue, fixed width fonts included with Windows and Mac:
- Fira Mono (SIL OFL license) by Mozilla Foundation
- Anonymous Pro (SIL OFL license) by Mark Simonson
- Inconsolata (SIL OFL license) by Ralph Levien
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.
Your grade for this course will be computed entirely on the following formula:
- Attendance/participation/caring (25%)
- Final project proposal (25%)
- 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.
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.
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.
- Sitepoint’s CSS Reference
- Chris Coyier’s CSS-Tricks
- A CSS3 gradient generator
- A CSS specificity calculator
- Try jQuery in your browser
- 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.
You have four options for help:
- The Google Group
- The Internet (including Stack Overflow and the like)
- Your TA
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.
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.
Joanne has been hired by Columbia specifically to help you. Make use of her.
There will be myriad opportunities for you to ask me questions: during, before, or after class, during breaks, and during 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.