IML400

Creative Coding For The Web 💻

University of Southern California Media Arts and Practice

Fall 2016

4 units Thursdays, 6:00 - 8:50 PM SCI L105
Professor: Lee Tusman
Email: tusman {at} usc {dot} edu
Office Hours: TBA

Introduction

IML 400 is a practical course focused on the World Wide Web as a medium. Students will develop technical, design and critical skills for creating modern web applications . Using a hands-on approach, students will explore and analyze key concepts and techniques powering the Web today. The exploration will be motivated by a more nuanced consideration of the web’s function in society gained through readings and discussion.

This class assumes familiarity with HTML, CSS, and Javascript, as well as an interest in User Experience and Interaction Design. The practical section of IML 400 will cover front-end (user facing) and back-end (web server) technologies. The emphasis, however, will be on front-end design and development, emphasizing content presentation, interactivity and user experience. Each class will be divided in two sections: lecture/discussion and workshop.

Lecture/Discussion time will serve to study the web as a medium from historical, comparative, design, and experimental angles. Introduction of new techniques, and the technical details encountered during the implementation of assignments will be explored during workshop time.


Goals

At the end of this course you should:

• Have developed project planning and execution skills
• Have more familiarity with contemporary web development practices
• Be able to conceptualize and implement a web based design intervention ( from concept to information presentation, interactive experience)
• Have a deeper understanding of network media as a platform for expression, intervention and social agency, critical engagement

Objectives

You will accomplish these goals through lectures and exercises covering the following objectives:

• Be able to configure and run a web server
• Implement web pages with good technical architecture
• Use project planning to plan and execute a moderately complex design project
• Use Design Research principles to formulate a strong project concept

Grading

Attendance (10%)

Attendance in the class is mandatory. If you are unable to attend class please notify the professor in advance and we can make alternative arrangements if necessary. This is an interactive class, not a lecture! As such it is important that you be present (physically and mentally) in class. You will get much more from the class by coming to class prepared and ready to contribute to the discussion by asking questions, posing solutions and providing insightful critiques.

Participation and community building ( 20% )

You will have to present one report and informal presentation during the semester. In addition you will be reading and posing questions from the reading assignments. This work will be documented on a personal class webpage and assessed. 

Homework ( 30% )

Most weeks of the semester there will be a homework assignment. The homework will either extend work that we have begun in the class workshop or will build off of concepts covered in the lecture and workshop. The homework are your opportunity to expand your skills and practice new techniques. In general, you will be assessed on your level of effort more than the fit and finish of the final product except where noted.

Projects (40%)

There are several projects due for this course. They are open-ended and designed to allow you to exercise your creative muscles while using your technical skills. More information on these projects and their requirements will be presented in class.

Project 1, Class website

This is meant to be a quick, first project. You will build a simple site to hold the assignments for this course.

Project 2, False Institution

The purpose of this project is to build a website for an invented institution. Working in groups of two, create a design proposal for the website of an art or design related organization, institution or company of your choosing (museum, art school, gallery, collection, archive, design shop, font foundry, community center, fab lab, etc.). You will develop concepts for a core structure that suits the different needs of the organization, and find ways to visually implement this structure, helping the organization represent itself appropriately online.

Project 3, Portfolio.

Your portfolio is your shop window. It doesn’t matter whether it is a printed portfolio or a laptop presentation [or viewed online], the same rules apply: make it as compelling and as revealing as possible. A portfolio of eight to ten interesting pieces of work is ideal. Your portfolio pages should exhibit a degree of uniformity. Create a grid, and make sure every project adheres to the grid. This will be difficult because you might be showing a variety of projects (2D and 3D) but it’s worth trying to get this right because you will be judged on how your work is presented as much as by the work itself. A portfolio that has an underlying unity and structure will score more points (and be more enjoyable to view) than one that has no structure or cohesion.

Final Project, Open-ended

Your final project is an open-ended project to create an online work of your choice. We will talk more about potential options to pursue.

Policies

Late Handins

Late assignments are not acceptable without prior consent from the instructor. Late assignments will be docked one letter grade per day. Assignments that are more than 3 days late will not be accepted and will not receive credit.

Sketch Pad

I recommend using a sketch pad and pen/pencil and bringing it to every class.

Fair Use and Citation Guidelines

The Professor encourages students to participate in open source culture and the free sharing of knowledge. However, we assert that all of our course work is covered under the Doctrine of Fair Use. In order to make this claim, however, all projects will need to include citations as appropriate to your project when citing and using resources found online. We will discuss contemporary issues relating to software, rights, sharing culture and related issues in class.

Statement on Academic Integrity

USC seeks to maintain an optimal learning environment. General principles of academic honesty include the concept of respect for the intellectual property of others, the expectation that individual work will be submitted unless otherwise allowed by an instructor, and the obligations both to protect one’s own academic work from misuse by others as well as to avoid using another’s work as one’s own. All students are expected to understand and abide by these principles. SCampus, the Student Guidebook, contains the Student Conduct Code in Section 11.00, while the recommended sanctions are located in Appendix A: Student Conduct Code. Students will be referred to the Office of Student Judicial Affairs and Community Standards for further review, should there be any suspicion of academic dishonesty. The Review process can be found at: Student Judicial Affairs and Community Standards

Note from Professor: Students in my classes are encouraged to share knowledge and teach each other. Discussing and sharing projects inside and outside of class is welcome but students may not code for each other. Students must always present their own work and projects in class and hand in their own work. Should students wish to collaborate on one of the course assignments they should check in with the professor.

Statement for Students with Disabilities

Any student requesting academic accommodations based on a disability is required to register with Disability Services and Programs (DSP) each semester. A letter of verification for approved accommodations can be obtained from DSP. Please be sure the letter is delivered to me (or to TA) as early in the semester as possible. DSP is located in STU 301 and is open 8:30 a.m.–5:00 p.m., Monday through Friday.

Emergency Plan

In the event that classes cannot convene at the university, all IML courses will continue via distance education. Specifically, the IML portal and course wikis will be deployed to enable faculty-student interaction (asynchronously and also via virtual office hours), complete syllabi, course readings and assignments, software tutorials, project assets, parameters and upload instructions, peer review processes and open source alternatives to professional-level software used in the IML curriculum. Further details are available on the course wiki.

Schedule

Overview

The course will be divided into 3, approximately 5 week, modules. Module 1, Introduction to HTML and CSS and Module 2, Introduction to Procedural Thinking through Javascript build on one another for the final module in which you will be building a mini-website.

Each class session will consist of a lecture and a workshop. Lectures will typically discuss the previous reading assignment (when applicable) and introduce new theory and techniques. The workshop will typically give you hands-on experience with the new ideas presented in the lecture. Typically the workshops will either directly dove-tail into the homework assignment or provide you with basic skills that will be expanded through the homework assignment. Given the limited amount of class face-time you will be required to spend time outside of class supplementing your in class training.

Weekly Schedule

Note I may make changes to the content of the class during the semester to improve your learning experience. Therefore, you should always reference the most recent schedule details on the course wiki for assignment expectations and lecture subjects.

MODULE - DOM / Programming

Week 1 (8/24): Introduction and Setup

• Course introduction
• Course setup
• Skills Assessment
• HTML/CSS review

Week 2: (8/31) Programming 101

• Introduction to logic
• Program flow Variables
• Functions

Week 3: (9/7) Programming 102

• Arrays
• DOM
• CSS Shapes Styling

Week 4: (9/14) Programming 103

• Javascript Objects
• jQuery and the DOM

Week 5: (9/21) Programming 103.2

• jQuery
• jQuery plugins

MODULE - APIs and Networking

Week 6: (9/28) Objects & APIs

• Review Javascript
• Objects
• JSON
• API introduction

Week 7: (10/5) APIs

• Curating web APIs

MODULE - Graphics

Week 8: (10/12) Graphics and SVG

• Introducing SVG
• Intro to P5JS

Week 9: (10/19) Graphics and the Canvas

• Introducing the Canvas
• Native canvas drawing
• P5js drawing

MODULE - Net Art

Week 10: (10/26) Net Art

• Aesthetics of Net Art
• Criticality and Net Art
• Structural critique
• Social critique
• Introduce Final Project

MODULE - UX

Week 11: (11/2) User Experience

* Introduction to User Experience

• Design principles of effective user interface

Week 12: (11/9) User Experience

• UX Design principles continued
• UI Frameworks (Bootstrap, React)

MODULE - Final Projects

Week 13: (11/16) Studio time

• In class critiques 1-on-1
• Studio time
• WIP review and presentation ( 5 minutes present; 5 minutes critique)

Week 14: (11/23)

NO CLASS November 23: Thanksgiving Holiday

Week 15: (12/1)

Last class. Final presentations group 1.

Finals Week, Date TBD

Finals week: Thursday December 7, 7-9pm. Final presentations group 2.

Tools

The tools that we will be using in class are notated below. Alternative tools are also listed by type if you would like to use something different.

Editors

• Brackets (used in class)
• Atom
• Sublime
• Vim/Neovim/Emacs

Browsers

• Chrome used in class
• Safari
• Firefox

File Transfer

• Cyberduck
• Filezilla
• Transmit

Thanks to friends and mentors Rhazes Spell, Lauren McCarthy, Chandler McWilliams, Hsinyu Lin and Paolo Pedercini for ongoing syllabus and teaching ideas, slides, and community.