0: OBSERVE
1: (AB)USE
2: TWEAK
3: ADD
4: ERASE
5: REPLACE
6: MASH
7: INTERACT
8: AB(USE) / TWEAK / ADD / ERASE / REPLACE / MASH / INTERACT → Portfolio Project
0: OBSERVE
For each Monday class throughout the semester, you should post a screenshot of an interface you have encountered during the previous week. Choose one of the following two options (your choice)…
Option 1: How Software Constructs You As User:
This screenshot should be a moment you found that reveals how that piece of software (app, website, etc) is driving you to think, act, or interact in a particular way. For example, perhaps a required question on a web form doesn’t contain the answer you want to provide (e.g. like the Male/Female gender radio button on the Facebook signup page). Or maybe the data that accompanies a piece of content suggests you should focus on (and thus, value) the present over the past (e.g. the second-specific age count for every post on Reddit). Whatever you find, grab a screenshot of it, and post it to your blog with some text that describes what it is you’re seeing. We’ll show a selection of these in class.
Option 2: Identify a Software-Driven Personal Obsession:
During your week, watch for moments when software systems capture your attention. What do you focus on? When? Why? For how long? Once you’ve found one, grab a screenshot that illustrates what you’re seeing/feeling. The idea here is to practice seeing/feeling/catching when you are *obsessing* over a software system. For example, are you constantly checking the “like” count on your latest Instagram post? Or maybe some software system’s notification mechanism has you glued to your phone, waiting for some new piece of data? Whatever it is, grab a screenshot, post to the blog, and add some text describing it.
Examples:
From Ben’s archive:
. duplicate status
. add friends
. on your mind
. video too short
. 26 tabs
. was live
. get more followers
. watch more
Perfect Users Facebook Group
Timeframe
every week
1: (AB)USE
Select an existing Internet-based platform, such as Facebook, Twitter, Tumblr, Gmail, etc. Briefly analyze how it works: what are its inputs and outputs, its typical uses, its intended audience(s)? Devise a plan for a multi-day (minimum 3 days) performance that will be executed using the platform. What does your set of actions (and/or the reactions it provokes) reveal about how that platform works or who it works for?
For example, Twitter is intended to enable short, 280 character messages in a public broadcast space that connects anyone anywhere in real-time. What if you instead used Twitter as your personal diary space, stringing together 10s or 100s of individual Twitter messages in order to record private thoughts? In another example, consider that Facebook status entries and its newsfeed are designed to encourage posts that get “likes” and grow friend networks. A response could be to devise a system that provokes your connections to unfriend you and/or hide your posts. In both examples, what would the performances start to reveal about how those systems are working? What questions would they provoke others to ask?
To complete this assignment, devise and enact the performance. Along the way, document it. Use screen captures, videos, take notes—whatever is appropriate to share how it worked. Remember to record any useful responses/reactions that your performance creates. Then, create a detailed blog post that names, describes, and presents the work, along with any thoughts you have on its effects and implications.
Examples
Kyle McDonald: keytweeter, Going Public
Kim Asendorf: Riding the API at the Limit
Jonas Lund: Selfsurfing (article about it)
Lauren McCarthy: Friend Crawl, Social Turkers
Hasan Elahi: Tracking Transience
Eva and Franco Mattes: For Internet Use Only, No Fun
Winnie Soon: Unerasable Images
Jeff Thompson: TCPDUMP
Guido Segni: The Artist is Typing
Jill Magid: Evidence Locker
2: TWEAK
Select four existing webpages (e.g. the front page of the NYT, the NSA’s ‘values’ page, etc.) and manipulate their HTML/CSS to change from 1-3 (or more) things for each page. You might swap out a logo with your own version (or someone else’s logo), edit a key piece of text, or insert a contrasting image. Whatever you choose, think about what your changes say about the original. Further, what is your strategy? Humor? Sarcasm? Fear?
To display this work, capture a screenshot of each page. These screenshots should demonstrate your change(s), and should also be enough of a capture to understand the changes within context. The final product, then, is as an image for distribution on the Internet. Once you have your images, post them on social media sites, such as Facebook, Twitter, Instagram, Tumblr, etc. Consider crafting accompanying text (short or long) to post with the image, designed to draw more attention on itself.
To manipulate the HTML/CSS for this project we’ll use the Chrome developer console. Using the console, you can edit the page and see the changes instantly. We’ll go over these techniques in class.
Examples:
Yes Men: New York Times (Iraq War Ends)
From Ben’s archive:
. Like button alternatives
. bigger status
. #facebooksucks
. facebook birthdays
. FB signup
. Facebook Life Events
Lifeinvader logo by Jacob van Campen
Technologies:
editing HTML/CSS
live page editing with the Chrome console
3: ADD
Select four websites and this time add at least four items to each page that weren’t there previously (these can be the same thing inserted at least four places, or different things at least four times total). In other words, this time it’s not just a tweak or editing of existing content, but an insertion of new content. This could be an image, text, a block containing multiple media, etc.
This time you’ll use Javascript and jQuery in the console to find and modify the chosen elements. That means that new options are available, such as adding content over time, fading it in, programmatically inserting content into a variable location, etc. Continue to carefully consider your strategies, and to pay attention to meanings produced by your work.
Because your additions won’t be permanent, as with the previous project the output of this project can be an image. But given the temporal possibilities, it could also be a movie that illustrates the temporal component. Whichever you produce, once again post it on social media sites, and see what kind of a response you can get. Document your work by posting images/movies on the blog (use YouTube/Vimeo for movies please), descriptions/screenshots of responses, and also, the Javascript/jQuery code you used to make the changes. (See my post on how to post code to the blog.)
Examples:
Nicolas Rubin: Greenhouse
David Tran: on the blockchain
Ben Grosser: ScareMail
Technologies:
Javascript
jQuery
Chrome developer console
Specific jQuery Functions:
Element Selector
ID Selector
Class Selector
:contains() Selector
after()
before()
prepend()
append()
css()
Resources:
For this project, you’ll need some code you can paste into the Chrome developer console that gives you access to jQuery. Go to this page, copy all of the code, and paste it into the console each time you need it.
Timeframe:
1 week
4: ERASE
Similar in concept to Project 3: ADD, but this time you will remove content from an existing website. Remove at least four items from the site (these four could be iterations of the same item, such as all names or all instances of one person’s name, or four different items). Remove them from one page on the site or across multiple/all pages on the site. Think about how that erasure changes a user’s experience. Does your erasure draw attention to the missing content? What does the erasure suggest or reveal about the original?
For this project you will use jQuery and Javascript to create what’s commonly referred to as a Userscript, a small program that runs in the browser every time a specific webpage is loaded in order to modify that page. You’ll then use that Userscript as a modification for the Chrome web browser. This means that your erasures will be continuous/permanent across the site for as long as the extension is installed. You will still need to produce images to illustrate your work, but the code should also be installable/usable by others in the class. Post the code to the blog so others can try it.
Examples:
Text Free Browsing by Rafaël Rozendaal & Jonas Lund
The Deletionist by Amaranth Borsuk, Jesper Juul, and Nick Montfort
Facebook Demetricator by Grosser
Textbook by Grosser
Technologies:
Javascript
jQuery
Userscripts
Tampermonkey
Specific jQuery Functions:
hide() (including keywords like ‘slow’ or millisecond arguments)
show()
fadeOut()
fadeIn()
css(‘display’,’none’)
css(‘opacity’,’0′)
text()
addClass()
removeClass()
not()
conditional statements (if/else)
logical operators (|| and &&)
Resources:
For this project, you’ll need some template code you edit into your own Userscript. Click this link to download a zip of the code you need, unzip it, open the file and copy all of the code, and paste it into a code-friendly text editor (e.g. Atom) and start editing.
Timeframe:
2 weeks
5: REPLACE
Select one website and create a Userscript-based Chrome extension that swaps out existing material on the site with something else. For example, you might replace all the ads on CNN.com with images from the Washington Post, or perhaps you’ll replace all profile images on Facebook with bits of text. As before, consider the implications of your choices.
In addition to creating the extension, to complete this project you’ll need to post it—and an extension version of the userscript you created for Project 4: ERASE—on the Chrome Web Store. This will require you to write descriptive text, gather screenshots, and work through the building and submission process. When done, your extension will be available to everyone in the world who uses the Chrome browser. Once it’s up, publicize your work on social media, encouraging friends to try it out. Post about their feedback on the blog along with links to the extensions on the Store.
Examples:
Add-Art by Steve Lambert
Make Trump Tweets Eight Again (Daily Show)
Dragons by James Bridle
Non Views by Dries Depoorter
Google Images Color Viewer
Technologies:
Javascript/jQuery/Userscripts/Extensions
Chrome Web Store
Specific jQuery functions:
.attr()
Links:
Chrome Developer Dashboard
Chrome extension documentation
Manifest File Format Description
Files:
basic-extension files for the Chrome extension
Timeframe:
2 weeks
6: MASH
For this project we’ll step away from webpage manipulation and focus on recontextualizing existing sites and videos via mashups. Using simple HTML (with the iframe tag) and the YouTube Multiplier, choose at least two websites/videos and present them side-by-side in a browser window as if they were one. What new site/video is created by mashing the two others together? Remember to think critically here … How does your mashup change the originals? What does it reveal about them we might not have seen previously?
Create a total of four mashups. At least two must be HTML-based (using iframe); up to two can use YouTube Multiplier. Write HTML pages to create the HTML mashups, and present those pages using an existing web site or email to Ben so he can post them for you. For YouTube Mulitplier, you can post links to the blog. Publicize your work on social media. Write about the feedback you get and post a link to the pages on the blog.
Examples:
YouTubeMultiplier by anonymous
Pro-Folio by Sures Kumar
Echo Parade by Brad Troemel & Jonathan Vingiano
Technologies:
HTML/CSS (including <iframe>)
Here’s some demo code you can build from
Warning:
You may run into some cross-origin requests being blocked. This means the website you’re trying to place in an iframe has explicitly blocked that from happening. If that happens with the idea you have, you may have to pick another site.
Timeframe:
1 week
7: INTERACT
Create a web-based system that uses online database technologies to facilitate a narrowly-defined human-computer-human interaction. For example, you could create a chat system that only allows one character messages. Or, perhaps you’ll use simple indicators of action to enable minimal networked presence, such as with Kevin Hamilton’s The Other End. Carefully consider the interaction system you’ll use. What are its inputs and outputs? It’s mechanisms of communication? Resist the desire to grow the system—focus on one single exchange. What does your system say about networked communication? How does limiting interaction to one pathway expand the potential of that pathway over its previous usefulness (e.g. as one of many mechanisms of interaction)?
To create this work we’ll dive into networked database systems. Specifically, we’ll use Firebase, a realtime data synchronization system with simple Javascript APIs. The end result will be a webpage/website that implements the single interaction you’ve devised, handled behind the scenes with Javascript reading and writing to a Firebase database.
Once you’ve created this work, share it on social media in order to get some people using it. See what they say, write about the results on the blog.
(Note: this will be a team project)
Exercises:
Codeacademy Javascript exercises 1-28
Examples:
Robotic Telegarden by Ken Goldberg
A Hole In Space by Galloway/Rabinowitz
I Got Up Postcards by On Kawara (images, description)
Silophone by [The User] (video)
Tracing You, Get More, and More Like This by Grosser
The Other End by Kevin Hamilton
Twitch Plays Pokemon
Student example: cOlOr MaDnEsS by Lauren and Iman
Student example: stayonthispageforaslongasyoucan by Sanny
Technologies:
Firebase online database system
Javascript/jQuery
Starter Code:
firebase-counter (download, unzip, open in Chrome and Atom)
Timeframe:
3 weeks
8: (AB)USE / MODIFY / ADD / ERASE / REPLACE / COMBINE / INTERACT → Portfolio Project
Use any or all of the strategies, techniques, and technologies learned in projects 1-7 to craft a work of your own. Whatever you choose, the work should illustrate your ability to focus a critical eye towards web-based software, to use basic languages that compose the web and/or wider internet, and to treat the web as a space of critique, using the internet as a medium for investigating the cultural effects of software. Further, your work should have clear stakes. Why does your project matter? Why would someone else care? You should be prepared to discuss and defend the work in critique.
To receive credit for this final project, you will have to
- Create and have approved a project proposal (discussed in class) by end of class on April 16th.
- Provide access to the final work itself (e.g. an extension on the Chrome Web Store, a link to a networked interactive application, etc.).
- Upload a zip of the code to the blog (or post in a blog post).
- Submit via the blog at least one high-quality and high-resolution image illustrating your project (screenshot, logo, etc.)
- Produce a high-quality video demonstration of the work. This video will present the work, showing what it does, and will talk about why it does it. This video should be posted on a social video sharing service such as YouTube or Vimeo. We’ll discuss these further in class.
- Present the work, video, and image(s) for critique in class on April 30th.
Video Examples:
Your video should give a quick sense of the project: what is it, what does it do, why should we care? (not necessarily in that order). The idea is that this is a video you can use on social media and your website to share the project, as a way to encourage further exploration of what you’ve made. You can use screenshots, screen recording (using QuickTime Player’s File–>New Screen Recording… feature or some other method), narrative simulation, voiceover and/or subtitles, and other techniques. Minimize music unless it’s playing a specific role. Use full HD resolution (1920×1080).
Example videos (with comments on their overall approach):
Follower (persona/scenario narrative simulation)
Pirate Cinema (subtitled demo)
iknowwhereyourcatslive (conceptual promo)
Go Rando (conceptual promo/demo)
Possible Technologies:
HTML/CSS
Javascript
Chrome extensions
Firebase
video
?
Timeframe:
3 weeks