Web Art
Instructor: Margarita Benitez
T_TH 6-9

Course Description

This course will provide an introduction to coding and creating art for the web. While realizing individual and collaborative projects, the class will also be focused on developing clean coding practices with special attention to new and emerging standards. Through presentations and outside readings and viewings, we will work to cultivate a critical discourse around emerging web art forms. Topics examined will include net.art, electronic literature, and data mapping and visualization.

Emphasis will be placed upon the concept of encoding: how do we encode our selves, our memories, and our responses to the real and virtual spaces that we inhabit? We will consider code as a language through which we translate our ideas into works and begin to develop literacy in the grammars and syntaxes of our networked culture.

Course Requirements

assignments: Students are required to complete all weekly exercises and to present substantial work for critique at mid-semester and at the end of the term. Assignments are due at the beginning of the class following the one in which they are assigned. You will upload homework to your personal directory on the artic.edu server and make a link to each assignment from the index.html page of your directory. If you want to put your homework on another server that's fine but I will still need you to make a link from your index.html page.

research and practice: Students will be asked to give at least one presentation during the semester. Presentations will focus on an articulation of the student's own developing creative and technical practice in relationship to other web artists, works, concepts, or internet phenomena. The goal will be for the student to define an area of research and artistic and technical concern as the semster progresses and the student begins to formulate a final project.

skills checks: Because of the technical demand of the course in terms of web-based tools and especially languages covered, students will be given occassional skills checks to insure that everyone is learning at a satisfactory level.

individual meetings: Periodically, I will schedule time for each student to address project specific questions and gauge progress. In general, I will often work one-on-one with students during lab sessions.

It is very important to attend every class. Most topics build on previous lessons and discussions, and missing a session will reduce your ability to successfully complete assigned projects. We will begin promptly at 6pm, as we will have a lot to cover each week. If you arrive later than 6:30, you will be marked as absent. If you accumulate three absences, an automatic No-Credit will be given. Please also keep in mind that it is expected that no absences will be unexcused, that is, if you cannot make a session, it is your basic responsibility to contact the instructor in advance unless this is absolutely not possible.

Presentation and participation in midterm and final critiques:
* For both critiques, I expect that your scripting practice will be compliant with the latest XHTML standards whenever possible.
* Presence and participation in critiques is mandatory and failure to attend will result in a failing grade.
* For the final critique you will need to hand in a stand-alone versions of your project(s) burned to a data cd. I will be keeping this disc so please make additional copies for yourself.

Syllabus: Please note that the syllabus is updated weekly and, while it provides an overall framework, it is by no means a static document and should be referred to often.

A hard copy text is NOT required for the class as the latest information on the *evolving* XHTML1.0 standard and browser support is available online. Plus you can cut, paste and repurpose the example code when working online. If you do opt to purchase a a text I recommend spending some time at a bookstore browsing what's available to find one that is written and organized in a style that will be helpful to you. Some use tutorial style teaching while others assume a deeper understanding of the underlying technology.

Weekly Schedule

week 01

session one (t)
topic: introductions through creative use of data
mark-up language anatomy
file transfer: ftp to webspaces

instructor-led group exercise: hybrid introductions

Part I (30 minutes): Students are grouped in pairs and asked to interview one another and take notes. Assign a role for the interviewer to consider for collecting data: journalist, biographer, fiction writer, marketing strategist,etc.. Interviews are 30 minutes with the interviewer/interviewed exchanging roles at 15 minutes.
Part II (30 minutes): Students creatively structure the data (on paper or in text file) organizing their notes in the following structures: a narrative paragraph, a list of objects, a table of data.
Part III (1 hour): Introduction to bbedit. Instructor leads creation of 3 html pages, one with a paragraph, one with a list, one with a table while discussing structure of xhtml, symmetry of mark-up languages, relationship to XML. Using a word from the collected material that seems emblematic of the person interviewed, each student finds and integrates an image with one of the pages. The three pages are linked together.
part IV (15 minutes): hybridize and exchange: partners edit their pages by interweaving the sentences of their paragraphs and the objects in their lists (partner 1: ABABAB*, partner 2: BABABA, etc.) to create hybrid data-(auto)biographies.
where A = partner 1, sentence 1; B=partner 2, sentence 2; A=partner 1, sentence 3; etc.

Self Portrait(s) [as Other(s)]

Interview with Talan Memmott

technical links:
w3 schools XHTML tutorial
html/xhml elements
deprecated tags
file and directory structure

introductory resources:
Vannevar Bush: As We May Think
How the Internet Works
An Internet Timeline
Alternate Visions: Way Out of the Box

assignment: data-diaries
Keep a data-diary over the following week by translating some element of daily experience into an html data-structure (p, table, ul, ol, etc.)

- use one data-diary entry to contemplate what web art is, its nature and what this in turn lends itself to. ie. visualization of data, etc.

session two (th)
Topic: overview: history of the web + web art
Tech: XHTML, XML, mark-up languages
review of xhtml, general discussion of data-organization and semantics: taxonomies, folksonomies, rss feeds
sharing of data-diary excerpts (students show 1 entry)

discussion links:
Tagwebs, Flickr, and the Human Brain (currently file-not-found)
the jist of above missing link

web art links

history of internet art by Rachel Greene

week 02
session one (t)
critique data diaries
introduction to cascading style sheets
using external css, work visually with hybrid pages from day 1

screenings of net.art:
potatoland (specifically, look at "shred")
World Report

assignment: Hacked Web Site
Work with a web site as a found object. Use firebug and/or 'view source' to study the site. Copy the code into bbedit and invent a new version of the site, for example, by replacing the text or images, or creating a 'shredded version of the site. You may choose to fully understand the code and make deliberate alterations, or you may choose to break the site using the code as material and exploiting your errors for aesthetic results (or to play with both of these approaches).

session two (th)
topic: code and language
walk-around screening of "hacked web sites"
tutorial: cascading style sheets text properties, span tag
creative formatting of material from data-diaries

UBU: Concrete Poetry
The Unknown, hypertext road novel
Shelley Jackson, "My Body"
Electronic Literature Collection

Borges, The Garden of Forking Paths

CSS Resources:
CSS Property Reference
W3C Property Examples
week 03

session one (t)
topic: code and language, pt.2

Alan Sondheim
jodi: view the source
code / language as virus
xhtml character codes
Hiding in DNA

assignment: Code and Language
Considering the examples of hypertext narratives, visual poetry, and code-as-language experiments presented and discussed this week, created an experimental digital text mini-project using xhtml with css for formatting.

session two (th)
topic: encoding space, pt. 1: architectural space
tutorial: introduction to css box model
block and inline elements, div tag, margins and padding, grouping elements in containing divs, background images
brief presentations of assignment #2


week 04
session one (t)
topic: encoding space, pt.2: architectural, networked, hierarchical, semantic space
tutorial: css box model continued: positioning with float and clear

Taxonomy of My Room
Amazon concordance of 'The Production of Space'
Internet Mapping Project
ip to location #1
ip geo-mapping
carnivore projects

assignment: encoding space
Create a sketch working creatively with architectural space. Consider, for example, a window, a room, a building, a city block, some kind of network. How are areas delineated within the overall space? What are its components? Using css for layout create an architectural diagram and populate the various areas with text, image, and/or video.

session two (th)
tutorial: advanced css layouts
recreation of page from William S. Burroughs' APO-33

css layout resources:
the noodle incident

week 05

session one (t)
topic: art as archive
layout skills check

Borges, The Library of Babel
Babel: Reverse Engineering the Library
The File Room
data diaries
Digital Landfill

assignment: mid-term project proposal presentation
Formulate a 15 minute presentation discussing the direction of your mid-term project. Consider the examples of net.art, electronic literature, experimental and concrete archives, and formulate an approach to a substantial project. The work should consider the above categories, but need not belong entirely to one or another (although it is fine if it does), and may borrow from multiple historical or emerging approaches. You may decide to use one or more of your weekly sketches in the project, considering an approach to cohesively weaving these together.
Support or enhance your presentation with a short screening and analysis of one work from Rhizome or elsewhere.

week 06

session one (t)
student presentations of mid-term proposals

session two (th)
finish proposal presentations
topic: collaging and mapping
tutorial: multi-layered cut-up layout using absolute positioning, z-index, background images, interactivity with css hovers


week 07

session one (t)
mandatory lab with individual meetings

session two (th)
mandatory lab with individual meetings

week 08

session one (t)

session two (th)

week 09

session one (t)
topic: code-driven composition
tutorial: core components of javascript: strings, numbers, variables, arrays, basic math, concatenation

session two (th)
tutorial: conditionals and for-loops

assignment with lab-time: Code-driven composition:
construct a mini-project that uses scripting to create random or otherwise variable combinations of text and/or image

Loss Glazier's Baila

week 10

session one (t)
tutorial: advanced interactivity: javascript for css manipulation

session two (th)
tutorial: advanced interactivity and dynamic content
introduction to basic javascript functions
discussion of web 2.0, ajax and dynamic content

code + language revisited (see week 03 for earlier examples)
Ted Warnell
Ted Warnell #2
jodi altered Quake-code
John Cayley, "The Code is not the Text unless it is the Text

week 11

session one
topic: code and temporality
composing over time with setTimeout and setInterval

Young-Hae Chang Heavy Industries presents "Dakota"

session two (th)
tutorial: DOM scripting

group exercise:
Students in groups of 3 or 4 are asked to create a sketch that works by programmatically manipulating an object such as scrollbar, window, location bar, status bar, or title bar

Mary Walling-Blackburn's (with tech. collaboration of Judd Morrissey) "Bonfire Bitumin" (composing with windows)

week 12

session one
topic: scripting and web 2.0
introduction to jQuery: simple and robust animations

session two (th)
tutorial: flash overview

Joshua Davis
Once Upon A Forest
Praystation 2004 archive

group exercise:
Students in groups of 3 or 4 are asked to create dynamic time-based projects mixing material from each individual's final work-in-progress and using jQuery library

week 13

session one
advanced special topic: data-driven work, pt.1
web 2.0 definition, protocols, and available open-source frameworks
wordpress, drupal, twitter, rss

individual meetings

session two (th)
advanced special topic: data-driven work, pt. 2 discussion: data mapping, analysis, and visualization
tutorial: Hacked Web Site revisited: basic programmatic manipulation of web site using MAMP php environment

Amazon.com concordance feature
Lisa Jevbrat, "The Infome Imager"
W. Bradford Paley, Textarc

week 14

session one
lab with individual meetings*

session two (th)
lab with individual meetings*

time permitting: processing overview or more flash goodness
Ben Fry sketches and projects

week 15

session one (t)

session two (th)





concrete & digital poetry

language/code/identity: http://netwurkerz.de/mez/datableed/complete/
trade centers: http://vv.arts.ucla.edu/teaching/classes/honors98_f01/frames.htm
referencing games: http://www.jodi.org -- download a game
generated text: http://directory.wordcircuits.com/browse.php?t=5
artbyte net picks: http://www.artbyte.com/web/net_pick/np_050101.html
blogging (push-button publishing for the people): http://www.blogger.com/

Net Art Collections and Shows
www.rhizome.org Collection of net.art, history of net.art, reviews, interviews, articles, criticism. Weekly updates also distributed via e-mail as 'rhizome digest' mailing list.
010101.sfmoma.org '010101 - Art in Technological Times'. Recent gallery/online show at SFMOMA.
www.file.org.br FILE 2001 Electronic Language Festival. Gallery/online festival in Sao Paulo.
www.walkerart.org/gallery9 Walker Art Center's Gallery 9 - online gallery sponsors net.art projects.
www.eliterature.org The Electronic Literature Organization, a collection of hypertext works and related material.
www.aec.at/festival2001/ Ars Electronica, venerable Austrian tech-art organization sponsors annual festival.

A few popular works
potatoland.org Mark Napier's web-reconfigurations, including Digital Landfill and Web Shredder.
worldofawe.net World of Awe, poetic travel postcards inside a found laptop.
jodi.org creators of the popular style of formalist web chaos.
rtmark.com net.art business model, brokerage house for hacktivist projects
airworld.net corporate site reconfiguration
www.0100101110101101.org Life Sharing
entropy8zuper.org collaborative art projects
www.unknownhypertext.com The Unknown, hypertext road novel.

Online References and Useful Sites
example code used in class
Electronic Frontier Foundation
CSS properties Reference

BBEdit Lite: Free version of BBEdit, popular Mac text editor.
MMKEdit: A free Mac text editor with HTML extensions. Also comes in Japanese.
EditPlus: An excellent text-editor for Windows
macromedia.com: 30-day trial downloads of Dreamweaver, Flash, Fireworks, Director, etc.
Savitar: Mac MUD/MOO/MUSH Client