|title||art 750: writing as metadata|
|location||yale university, 107 green hall|
|instructor||laurel schwulst, firstname.lastname@example.org|
kang ma, email@example.com
steven rodriguez, firstname.lastname@example.org
let’s expand what we consider writing to be, and where and how it can live.
at first, when we think of “writing,” we might recall primary literary objects like essays, articles, poems, novels, books, etc. but technology has changed writing (and reading) forever. the surfaces and contexts have grown exponentially. one such surface is “metadata.” the word “metadata” was created by combining "data" with “meta-,” which means “transcending.” so “metadata” is literally “data about data.”
p1 ... 25 variations on a profile
p1a ... html (due 09.17) (+)
* only use html
* in the body section of your page, only use the following html:
Display the profile data in different ways. What happens when you shift the order of metadata? Or what happens when you break the metadata up, place them more condensed or more expanded and distant? How do these small changes affect your reading or vibe of the profile?
* only use html
* in the body section of your page, use any html element
* make sure to try links and tables specifically:
Try displaying the profile in conventional and unconventional ways. Or try a conventional way unconventionally. Try any html element you're curious about. Try the elements specific to html5. Try using alt text.
p1b ... css part 1 (due 09.24) (+)
* use html and css
* only use the following css properties:
Focus on positioning elements using CSS. Experiment with space and possibly try a very tall page or a very wide page.
* use html and css
* in addition to the previous css properties, use the following css properties:
Focus on typography using CSS. Experiment with hierarchy and scale.
p1c ... css part 2 (due 10.08) (+)
* use html and css
* in addition to the previous css properties, you can use (and should focus on) the following css properties:
experiment with the modern ways of doing css layout — "flexbox" and "css grid." consider the whole page's layout. what can a profile look like if it takes up the whole page? are there different sections? tabs? areas?
p1d ... php, putting it all together (due 10.22) (+)
Now that you’ve made at least a first pass on the 25 variations, create a navigation system for viewing them. Your navigation system should be both a landing page (index.html) and some sort of consistent device on each page.
The landing page should...
* Contain links to all 25 variations
The consistent page device should...
* Contain next and previous links to the next and previous variation
* Be relatively subtle; not interfere with the visual priority of the profile
* Be relatively the same on each page
* Possibly visually relate or resonate with your landing page
* Contain random link to a chance variation (optional)
p1a ... html (levels 1 and 2)
p2 ... 51 images
bring in 3 images that are as dissimilar to each other as possible. then using all images brought in by the class together (3*17 = 51), create your own image taxonomy. decide on which metadata you’d like to store for each image. consider writing and presenting image descriptions. place the images into at least 5 or more categories, tags, folders—your own filtering system. present this as a physical map or however you can best convey your system. then present your system in two more different forms: a publication and a video (maximum 2 minutes long). ask yourself... what can a collection of images be? images as exhibition, as illustrations, as artworks, as creatures, as objects, as trading cards, etc.
bring in 3 images (due 09.17)
sort your images and show your taxonomy as a physical map (due 09.24)
publication & video sketch 1 (due 10.08)
publication & video sketch 2 (due 10.15)
final (due 10.22)
p3 ... writer's notebook
poet judy malloy explains, “a writer's notebook is not a final paper but rather reflects the development of a work or series of works. in the informal, recursive, yet productive practice of creating notebooks online, ideas and sources are developed and slowly emerge.” in a similar spirit, create and maintain a web writing notebook where you regularly note the evolution of your projects and/or thinking for this class. you might also consider this as "publishing as side effect." (in medicine, a side effect is a secondary, typically undesirable, effect of a drug or medical treatment. but what if a side effect could be therapeutic, or beneficial to your practice?) maybe you'll log something you're regularly doing as part of this class (reading, highlighting, writing, typing, etc.)... maybe logging it helps you keep track of it, and only at the end will you notice useful patterns you could only see in looking back. for this blog, technically keep it simple—try using one single html page, for example. or you can use a web product or service you’re curious about. host (or at least link to) from your class website.
share first version with content (due 10.29)
share evolution (due 11.12)
share evolution (due 12.10 via email)
p4 ... screensaver and score
show & tell existing screensaver (due 10.29)
event & screensaver sketches (due 11.05)
screensaver prototype 1 (due 11.12)
screensaver prototype 2 (due 11.19)
final exhibition of screensavers / performances (due 12.03)
p4: ... php — "schedules" (in-class 11.05) (+)
p4* ... js 1 — "text over time" (in-class 11.05) (+)
p4~ ... js 2 — "breathing, swimming, bouncing, dancing" (in-class 11.12) (+)
this course that has been generously shaped and supported by many, including melanie hoff, rosa mcelheny, dan michaelson, mindy seu, dan taeyoung, and harm van den dorpel. special thanks to john provencher for design inspiration on this year’s class website. and thanks to ayham ghraowi and sheila levrant de bretteville for helping start this class last year in its prior form, “programming as writing.”