Assignments

Please make sure to follow submission directions outlined in the syllabus (i.e., assignment-x.html, reading-x.html).

All assignments are due no later than 9am the day of class. Upload all assignments to your Storm server using the naming convention outlined above. If you do not use this convention, I will not be able to find your submission and it will be marked as incomplete.

Studio Assignment

Complete the HTML & CSS Code Academy lessons. Upload your results to your Storm server.

Reading

Please read the following article, and write a short response (3-4 paragraphs). Use the template below as a guide for the design of your submission, but feel free to modify it as you see fit.

Vannevar Bush, As We May Think

Reading Report Template Page

Studio Assignment

  1. 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

Reading Assignment

  1. Tim Berners Lee et al: The world-wide web
  2. <!DOCTYPE>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">

Studio Assignment

  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

Reading Assignment

  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

Assignment 4: Dive into Javascript

Studio Assignment

Create an interactive story that requires user input. Examples include:

  1. Mad Lib using text inputs to store and display user input
  2. Exquisite corpse that takes user input and shuffles it

Reading Assignment

  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. Javascript Objects in Detail

Please prepare a report where you compare and combine insight from all this readings to explain the following concepts: Function, object, event, and Document Object Model.

Assignment 5: Advanced Javascript (Web APIs)

Studio Assignment

Build a simple and ingenious client using a public API from the list below:

  1. Flickr public API
  2. Tumblr public API
  3. Twitter public API
  4. Instagram public API
  5. Delicious public API
  6. Soundcloud public API
  7. Youtube public API
  8. Google maps public API
  9. Google search public API
  10. Google search public API overview

Reading Assignment

  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

Assignment 6: Alternative Web Content

Studio Assignment

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

Reading Assignment

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

Resources - Alternative Web Content

Assignment 7: Welcome to the Metaverse

Studio Assignment

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.

Reading Assignment

  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

Resources

    Web VR

  1. Chrome Experiments for VR - Google Chrome Web VR tools for Google Cardboard
  2. MozVR - Mozilla / Firefox Web VR tools for Oculus Rift
  3. Vizor - Building VR in the browser
  4. eleVR - Virtual Reality research group
  5. eleVR VR video player - Web based 360° spherical video player
  6. List of open source software for VR development - a lot if it web based, via WeVR

    Videos

  1. Sight Short Film
  2. Microsoft Hololens

Assignment 8: Net Art

Studio Assignment

Conceive and implement a Net Art Piece using a combination of javascript, gifs, and interactive text.

Reading Assignment

  1. The Internet as Art by Goran Mijuk

Additional Resources

    Selected Net Art readings

  1. Internet Art on Wikipedia
  2. net.art on Wikipedia
  3. What is net art
  4. Rhizome - Rhizome Artbase
  5. The 10 best twitterbots that are also net art

    Selected Net Art sites and artists

  1. dan.nea.me
  2. Jung Lake at tumblr
  3. Jung Lake e.m-bed.de/d/ - requires pop-ups
  4. mPosada at tumblr
  5. gooooooooooooooooooooooooooooooooooooooooooooooooooooogle
  6. Staggering Beauty - Shake Vigorously
  7. Kim Asendorf
  8. w-a-l-l-p-a-p-e-r-s
  9. Hypergeography by Joe Hamilton
  10. How To / Why Leave Facebook by Nick Briz
  11. Emilio Gomariz
  12. LA Turbo Avedon
  13. club rothko builder
  14. Technologies for the People
  15. Vince Mckelvie - at tumblr - emoji.ink - Pulse

Assignment 9: Putting It All Together

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.

Reading Assignment

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

Instead of a Reading Report, please make use and cite at least three concepts from each reading to explain and/or justify a few aspects of your Project Proposal.

Assignment 10: Proposal Critique and Approval

Final Project Pre-Production Draft

The pre-production draft should be presented as a simple illustrated HTML webpage covering the following sections:

  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

Reading Assignment

No more readings! :)

Assignment 11: Final Project Landing Page

Final Project Landing Page

At this point you have clarity on design and scope and you should have all your tech resources and assets available, so you're ready to start testing the waters and build a prototype for your landing page. This is a list of things you should deliver next week:

  1. Landing page visual design in place
    • CSS
    • Fonts
    • Icons
    • etc
  2. Landing page final assets in place
    • Images
    • Videos
    • Sounds
    • etc
  3. First user experience functionality working (landing page only)
  4. Active links to placeholder locations and/or other sections

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.

Reading Assignment

No more readings! :)