IML 400 - Creative Coding for the Web

  • Spring 2015
  • 4 units
  • Mondays 1:00pm - 3:50pm
  • Location SCI L105
  • Professor Raphael Arar
  • Email provided in class
  • Office Hours Mondays: 12:00pm-1:00pm

Course Description

IML 400 is a practical course focused on the World Wide Web as a medium. Using a hands-on approach, students will explore and analyze key concepts and techniques powering the Web today. This class assumes familiarity with HTML5, CSS3, and Javascript, as well as an interest in User Experience and Interaction Design.

The practical section of IML 400 will focus 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 nuances encountered during the implementation of assignments will be explored during workshop time.

Grading

  • Attendance, Discussion / Workshop Participation and Performance 20%
  • Assignments (including reading reports) 40%
  • Final Project 40%

Assignments

Assignment delivery is every Monday unless a different deadline is specified. The inability to meet deadlines will have a negative impact on grades. For team assignments each member of the team should have a page with the assignment in their storm accounts.

Workshop

Students should upload the result of each workshop session to their storm accounts every time.

Readings

Readings will be required sometimes. Students are expected to create a webpage with a brief essay about each reading in their storm accounts. Here is a basic Reading Report template.

Reference Material

Pointers to books and online links will be provided in the class website.

Uploading Work

Students are expected to follow this organization schema for their online projects:

  1. IML 400 home directory:
    • http://storm.usc.edu/~username/IML-400/
  2. Index file (Cover page):
    • http://storm.usc.edu/~username/IML-400/index.html - This file should feature a list of links to all work produced by the student
  3. Image directory:
    • http://storm.usc.edu/~username/IML-400/img/ - All images used by webpages located in the class root directory should be located there.
  4. Stylesheet directory:
    • http://storm.usc.edu/~username/IML-400/css/ - All CSS files should be located there.
  5. Javascript directory:
    • http://storm.usc.edu/~username/IML-400/js/ - All Javascript files should be located there.
  6. Assignment websites and subdirectories:
    • http://storm.usc.edu/~username/IML-400/assignment-x/ - Each assignment should have it’s own index.html, as well it’s own css, img, and js subdirectories.
  7. Reading report files:
    • http://storm.usc.edu/~username/IML-400/reading-x.html - Feel free to style these pages in whichever way you please.
  8. Final project directory and files:
    • http://storm.usc.edu/~username/IML-400/final/

Policies

Fair Use and Citation Guidelines

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 academically appropriate citations in the form of a Works Cited section, which covers all sources, in order to receive a passing grade. The Works Cited is either included in the project or as a separate document, as appropriate to your project. The style we use is APA 5th edition and you may refer to these guidelines: http://owl.english.purdue.edu/owl/resource/560/01/.

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: http://www.usc.edu/dept/publications/SCAMPUS/gov/. 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: http://www.usc.edu/student-affairs/SJACS/.

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.

Weekly Schedule

The following weekly schedule is subject to change. Please consult the class website for the most current information, assignments and due dates. Details about assignments and readings will be provided in the class website.

Week 1: January 12, 2015

Discussion

  1. Introductions
  2. Syllabus review. Grading. Class mechanics. Office hours
  3. Overview of the WWW. What this class is about. What’s expected
  4. Technical Basics. Sublime text editor. Chrome developer tools. File directory structure. Assignment and reading report delivery. Storm, Github, Unix
  5. Research Methods. Reference books and online resources (intro)

Workshop

  1. Evaluation. Build a simple webpage about your favorite animal

Assignments

  1. Code Academy HTML & CSS

Readings

  1. Vannevar Bush: As we may think

Week 2: January 19, 2015 - HOLIDAY NO CLASS

Week 3: January 26, 2015

Discussion (Development Practices)

  1. Previous assignment and reading discussion
  2. HTML5, CSS3, Javascript recap (Content, presentation, interaction)
  3. The advantages of a declarative programming layer
  4. Web architecture basics. Back end and Front end (Server versus client). Http requests. The browser. Directories and urls
  5. Git, Github and unix
  6. Debugging and Chrome developer tools. How to test your code

Workshop

  1. Create class Github repo. Clone to storm. Add main directories and files. Commit

Assignments

  1. Code Academy Javascript Track (Stop after Array lesson)
  2. Design and implement simple Storm class page
  3. Review git with try.github.io
  4. Deploy Storm class page using git

Readings

  1. Tim Berners Lee et al: The world-wide web
  2. Dive into HTML 5: Intro to Semantics
    • <!DOCTYPE>
    • <html lang="en">
    • <head>
    • <meta charset="utf-8">

Week 4: February 2, 2015

Discussion (UI/UX Fundamentals)

  1. Previous assignment and reading discussion
  2. Intro to UX design: principles, methods and patterns
  3. Intro to Front-end design and development for the web
  4. Design for multiple screens
  5. Javascript recap (basic)

Workshop

  1. Pimping the class cover page with interactivity and dynamic content

Assignments

  1. History of the web
    • Research and 6 minute Presentation
    • Make a simple web page for the presentation content, and use it to present your content. For this assignment it is only required that you use HTML. CSS and/or Javascript are optional
    • Group 1: The web in 1992-1996
    • Group 2: The web in 1996-2000
    • Group 3: The web in 2000-2004
    • Group 4: The web in 2004-2007
    • Group 5: The web in 2007-2014
  2. Update class cover page
    • Add interactivity and dynamic content
    • Based on considerations about your potential audience/users, apply UI/UX Design reasoning to justify your update

Readings

  1. Andrew Maier - Complete Beginner’s Guide to Interaction Design
  2. Ben Shneiderman - Eight Golden Rules of Interface Design
  3. Charles L. Mauro - Why Angry Birds is so successful and popular
  4. Apple OS X Human Interface Guidelines - Design Principles
  5. Apple OS X Human Interface Guidelines - User-Centered Design
  6. Jakob Nielsen - How Users Read on the Web

Week 5: February 9, 2015

Discussion (Dive into Javascript)

  1. Previous assignment and reading discussion
  2. Front-end design and development. User Agents, Events, Timing and Javascript
  3. Intro to object oriented programming. What is the Document Object Model?
  4. Front-end design patterns for the web. MVC, etc
  5. Overview of external libraries and frameworks (purely for UI/UX)

Workshop

  1. Build simple examples exploring interactivity, binding, event handling, and timing.

Assignments

  1. Create an interactive story that requires user input.

Readings

  1. Eloquent Javascript, Chapter 2: Basic Javascript
  2. Eloquent Javascript, Chapter 3: Functions
  3. Eloquent Javascript, Chapter 11: Web Programming Crash Course
  4. Eloquent Javascript, Chapter 12: Document Object Model (DOM)
  5. Javscript Objects in Detail

Week 6: February 16, 2015 - HOLIDAY NO CLASS

Week 7: February 23, 2015

Discussion (Advanced Javascript)

  1. Previous assignment and reading discussion
  2. Object Oriented Architectures and Object Serialization (XML, HTML, SVG, JSON, etc)
  3. Web 2.0 behind the scenes: Ajax and Restful APIs
  4. Public API examples (Google maps, google search, twitter, instagram, youtube, etc)
  5. The open web in peril

Workshop

  1. Connecting APIs using Visual Interfaces
    • Developer oriented tool and ecosystem: Yahoo pipes
    • Comsumer oriented tool and ecosystem:If this then that (ifttt.com)
  2. Requesting and consuming Data from public APIs. Designing custom interactions. Choose a public API from the list provided:
    • Tiny Icon Factory minimalistic search API and an explanation
    • Flickr public API
    • Tumblr public API
    • Twitter public API
    • Instagram public API
    • Delicious public API
    • Soundcloud public API
    • Youtube public API
    • Google maps public API
    • Google search public API
    • Google search public API overview

Assignments

  1. Build a simple and ingenious client using a public API from the previous list

Readings - The open web

  1. Clay Shirky - Defend our freedom to share (or why SOPA is a bad idea)
  2. Khan academy - SOPA/PIPA explained
  3. Cory Doctorow - 28c3: The coming war on general computation
  4. Last Week Tonight with John Oliver - Net Neutrality
  5. Explore this (battleforthenet.com)

Resources - RESTful APIs and AJAX

  1. Wikipedia - Application Programming Interface (API)
  2. Wikipedia - Web APIs
  3. Wikipedia - Representational State Transfer (REST)
  4. Roy Thomas Fielding Doctoral Dissertation - Representational State Transfer (REST)
  5. Wikipedia - Asynchronous JavaScript and XML (AJAX)
  6. JQuery - AJAX
  7. Mozilla - AJAX

Week 8: March 2, 2015

Discussion (Alternative web content)

  1. Previous assignment and reading discussion
  2. Intro. Live data and alternative modes of representation/interaction
  3. Information visualization and location based applications
  4. Games and interactive narratives
  5. Video and Net Art
  6. The <canvas> HTML tag
  7. Other markup languages: SVG and GLAM. The importance of a declarative programming layer
  8. Platform and Framework overview. Webgl+3js, p5js, paper.js, two.js, etc

Workshop

  1. WebGL/Three.js/GLSL, Paper.js/Raphael/Two.js, P5js, D3js

Assignments

  1. Add a dynamic and/or interactive background or component to your cover page

Readings

  1. An Essay on the New Aesthetic, by Bruce Sterling - http://www.wired.com/2012/04/an-essay-on-the-new-aesthetic/

Resources

    WebGl and GLSL
  1. Threejs - examples and more examples
  2. Pixel Shaders - An Interactive Introduction to Graphics Programming - Includes an interactive Shader Editor
  3. Introduction to Shaders by Aerotwist
  4. GLSL Shader Sandbox
  5. Making Audio Reactive Visuals by Airtight Interactive
  6. GLAM - documentation - examples
    HTML5 <canvas> tag
  1. Dive into HTML5 - The <canvas> tag
  2. P5js - learning center
    Scalable Vector Graphics (SVG)
  1. Learn SVG and SVG basics tutorial
  2. D3js - examples - docs
  3. Twojs - example: mouse events with SVG

Week 9: March 9, 2015

Discussion (Welcome to the Metaverse)

  1. Previous assignment and reading discussion
  2. The immersive web: beyond the page and the screen. Virtual Reality, the Internet of Things and Augmented Reality
  3. Virtual Reality and Science Fiction. Gibson, Stephenson, etc
  4. The Rise and Fall of Virtual Reality in the 1990s
  5. Virtual Reality today. Oculus Rift, Google Cardboard, Samsung Gear VR, HTC/Valve Vive - Mobile, desktop and room-scale
  6. The 3D web and Virtual Reality
  7. Web VR, Chromium, MozVR and GLAM

Workshop

  1. VR Chrome experiments and MozVR

Assignments

  1. Choose an online social media or entertainment service (facebook, twitter, youtube, netflix, etc), and develop a concept for a virtual reality experience using it’s content and data. Use writing, sketches, mockups and/or visual references from science fiction to illustrate your ideas

Readings

  1. The Verge - The Rise and Fall and Rise of Virtual Reality
  2. Mozilla, Virtual Reality, and the Dawn of the Metaverse? - Interview with Josh Carpenter on WeVR
  3. Google Chrome and the future of Virtual Reality - Interview with Brandon Jones on WeVR
  4. Leading the Way to a Virtual Reality Web - Interview with Tony Parisi on WeVR

Web VR Resources

  1. Quick VR mockups with Adobe Illustrator, by Josh Carpenter
  2. Chrome Experiments for VR - Google Chrome Web VR tools for Google Cardboard
  3. MozVR - Mozilla / Firefox Web VR tools for Oculus Rift
  4. Vizor - Building VR in the browser

Week 10: March 16, 2015 - SPRING BREAK NO CLASS

Week 11: March 23, 2015

Discussion (Net Art: Case studies)

  1. Previous assignment and reading discussion
  2. Digital art lecture. An art about interaction and communication
  3. Network culture
  4. The new scene. Tumblr, Gifs, Three.js, etc

Workshop

  1. Net Art examples and implementation discussion TBD

Assignments

  1. Create a Net Art Piece

Readings

  1. The Internet as Art by Goran Mijuk - http://www.wsj.com/articles/SB10001424052970204619004574318373312061230

Week 12: March 30, 2015

Discussion (Putting It All Together: Making and Breaking the Web)

  1. Previous assignment and reading discussion
  2. Final project discussion. Expectations, process and delivery.
  3. Thinking through an idea. Motivation, audience, goals. The web as product.
  4. Practical design concepts (scoping, prototyping, iteration, modularity, etc)
  5. Final project class brainstorm and Q&A

Workshop

  1. Brainstorm and Mind Map of final project potential idea

Assignments

Final Project Proposal

The proposal document should be presented as a simple illustrated HTML webpage covering the following sections:
  • Letter of intent
  • Theme and Subject
  • Scope
  • Design
  • Research

Letter of intent

A simple paragraph explaining your motivation to work on your project of choice. Describe your own expectations from the finished product and explain the potential benefit you and others can have from it. In addition to this, justify your design choices based on the goal to communicate your subject in an original, optimal manner.

Theme and Subject

No personal portfolio websites are allowed. Other than that, there are no restrictions to the final project's theme or subject as long as it covers the required scope. However, a reasoned justification of your choice will be required.

Scope

The project scope should warrantee the need to use rich media (text, images, video, sound, etc), and an original, non-trivial implementation of presentation and interactivity using HTML5, CSS3, Javascript and JQuery. Viability of scope will require approval upon proposal review.

Design

Draw a detailed flow diagram with wireframe pencil thumbnails on paper to outline a tentative sitemap, including a layout proposal for all of the site's sections and interactive components. Explain your design decisions: why are they necessary? how do they benefit the presentation of your content?

Research

Based on theme, subject, scope, and design requirements, students should present research on current and state-of-the-art related websites, together with an assessment on what can be improved, incorporated or changed from all these references.

Readings

  1. Design Research and Innovation - An Interview with Don Norman
  2. Critical making - Matt Ratto

Week 13: April 6, 2015

Discussion (Proposal critique and approval)

  1. Proposal presentations and feedback
  2. Reading discussion
  3. Final project review. Expectation, process and delivery.
  4. Thinking through an idea. Motivation, audience, goals. The web as product.
  5. Practical design concepts (scoping, prototyping, iteration, modularity, etc)

Workshop

  1. One-on-one final project research and discussion

Assignments

  1. Creative Direction & Design Proposal
  2. Two different user stories based on two different personas from target userbase
  3. Comprehensive Content Outline
  4. Research analysis of technical requirements and technical scope

Week 14: April 13, 2015

Discussion (Review & Open Workshop Hours)

  1. Five min Proposal presentations

Workshop

  1. One-on-one proposal reviews and final project workshop

Assignments

  1. Final Project Landing Page first pass.
    1. Landing page visual design in place
      • CSS
      • Fonts
      • Icons
      • etc
    2. Landing page final assets in place
      • Images
      • Videos
      • Sounds
      • etc
    3. Working first user experience functionality (landing page only)
    4. Active links to placeholder locations and/or other sections
    5. Usability testing. Test your landing page design finding and using real-life approximations to the personas you developed last week. Invite a classmate, friend or family member to use your website.
      • Did they understand it?
      • Could they perform the tasks you had prepared for them?
      • Could they find what they were looking for?
      • Was it an engaging experience for them?
      Write down a brief usability report explaining how your tests informed your design.

Week 15: April 20, 2015

Discussion (Review & Open Workshop Hours)

  1. Five min landing page presentations

Workshop

  1. One-on-one reviews and final project workshop

Assignments

  1. First Draft of Final Project

Week 16: April 27, 2015

Discussion (Review & Open Workshop Hours)

  1. Five min project presentations

Workshop

  1. One-on-one reviews and final project workshop

Assignments

  1. Prep Formal Presentation

Week 17: May 5, 2015 - EXAM PERIOD NO CLASS

Exam date TBD - Final Project Deadline and Presentation due on exam date