CSS Contextual Selectors and Colors

At the end of class yesterday a few of us were talking about ways to specify different styles for different parts of a web page. I put together a very simple (and very ugly) example page on "contextual selectors" in CSS. Compare the source code (which you can find by following any of the hyperlinks on the page) with the HTML source to see how various "class" assignments and nesting techniques can give you more flexibility with your styles. There are a few different approaches to this issue, each with its own problems depending upon the structure of the particular page. Experiment and find what works for you.

I've also added the contextual selector example to the Web Resources page for our class, along with a link to the Visibone Web Safe Color Table, a handy way to look up the hexidecimal (six-character) code for colors.

Examples of what not to do

][ad][dressed in a Skin C.ode repeatedly hung-up on my computer all weekend. As this it the first piece that I have had problems with, I'm guessing it has something to do with the way it was constructed or written. That being said, the little that I was able to see before Explorer stopped responding had too much code looking stuff for my taste. I disliked dealing with code in 1980 when I had a vic-20 and that hasn’t changed in 26 years. Like other forms of art, it’s not my bag so I’m tempted to skip trying to make some sense of this work on another machine.

I thought V: Vniverse was the most interesting of these three pieces. The star chart reminded me of Myst. At first I randomly selected a star but then I started entering the numbers and reading it in order. I noticed that some of the pages/paragraphs/sections could be read with the title and/or number included which gave an added dimension to the text. Other times, one or the other or both needed to be skipped because they made the sentence nonsensical. I didn’t recognize the stars (not that I have much knowledge about astronomy!) or the “constellations” that appeared when a star was selected. Nor was I able to notice any type of image that had anything to do with the written part. If I haven’t explored/read some of the essays that are linked to this piece, I’m not sure I would have grasped the link between the nomads reading the stars and my reading text by selecting a star. This one needs to be added to my places to explore page!

Errand was a rather annoying piece to me. The soundtrack was short and repetitious. The background images made the text hard to read. Thankfully, it was very short! Or maybe I intentionally overlooked some links that would have made it longer. The links I did follow looped back into each other quickly so getting lost wasn’t an issue. The text - both as objects and as words with meaning - and the images appeared to be working together - possibly there is a pseudo-subliminal eco-message in the piece. But the basic design flaws (intentional?) I noticed negated any interest I had in going through it more than twice - once in order and once using the links. Maybe it would be less annoying with the sound turned off.

Mez generates "code"

public class Mez extends CodePoet {

  protected Text generate(Text orig) {

    orig.insertInitial(this.getNextEmailHeader());

    while (orig.isCoherent()) {
      orig.insertRandom("][");
      orig.insertRandom(Dictionary.COMPSCI);
      orig.insertRandom(Dictionary.BIOLOGY);
      orig = this.obfuscate(orig);
    }

   return orig;
  }
}

Traces

These pieces of digital literature reminded me of previous works that I’ve experienced. Each one seemed to use a devise that was used in my earlier reading. The advantage to this was that I needed to spend less time learning how to interact with the pieces and could spend more time reading, interacting with them and reacting to them.

The Dreamlife of Letters is a fun piece even though I’m not sure I completely understand it. After reading the introduction and following the links to read DePlessis’ submission and Stefans response, I understood how he constructed the piece but, I’m still in the dark about the project, its purpose, and its meaning. In spite of this I like the poem. In some ways the kinetic text and mimetics reminded me of Faith. For example, when chimneysweep swirled on the screen like I picture a sweep’s broom in a chimney and when steep and split appeared together, steeply angled down the page and then splitting into two distinct words.

The title of Young-hae Chang Heavy Industries Artist’s Statement No. 45,730,944 told me about the piece and gave a hint about what to expect. Naturally, the work employed their trademark big, black, bold text flashing on a white background. But the message in the work is one I think anyone who is involved in creating art goes through, questioning the whys and the purpose of creating art. However, I also thought there was a deeper meaning to it - what is the purpose of our life? Why are we here? Questions I think most people ask themselves at some point during their life. So in a sense, the age old questions haven’t changed, just the way they’re asked has.

"Interrogating the inscription technology"

A common theme of this week's works seems to be that they highlight their own "inscription technology", the medium in which they are conceived.

"Artist's Statement No. 45,730,944" does this the best. For me, it achieved what "Lexia to Perplexia" failed to do--effectively questioning the effects of technology, and the Web in particular, on our existence. It reveals how we are defined by people looking at us (our work); it explores how we understand and interface with the world (our neighbors) through the Web. And the entire work is a prolonged self-reference--another Web denizen's work calling for attention, just another cycle of uploading, waiting, and playing. (I imagine the sock-tasting is also a interesting reference, though not apparently one to the inscription technology!)

"Hollowbound Book" highlights the materiality of Hayles' book--particular it's bound nature. It expands this metaphor into the conceptual realm, holding that Hayles ties her various arguments into a single whole in a very similar way. Yet, interestingly, all of this reflection is done through interactive, electronic examples. It's a nice return--Hayles reviews such digital works in a physical book, only to be reviewed in turn by the digital.

I did not find "The Dreamlife of Letters" to be particularly enriching. Indeed, it is little more interesting than its original source material "poem(s)". However, what effect it does achieve beyond simply being a list of words, it achieves entirely through interesting animations and combinations made possible by the animation medium.

Experience Counts

[I apologize for this being late. I guess I was busy reading my classmates reactions and forgot to post my own. I realized when looking for feedback that I hadn't posted yet.]

Experience helps when viewing digital literature. After several weeks of looking at and exploring a variety of digital literature, I’m starting to develop an understanding of how to view the sites. Like printed literature, digital literature makes use of earlier works. For example, I realized (probably because I took ENG-253 last semester and we read parts of it) the painting of the bull and women in Miss DMZ was connected to Greek mythology. However, I didn’t pursue it beyond that recognition.

While reading Dakota, the use of Americana in the beginning made an instant connection with me. It seemed to draw on or reminded me of early Springsteen, specifically “Born to Run”. I also connected with the images because my friends and I used to cruise with the top down and a case of beer. Having looked at other pieces by Young-hae Chang Heavy Industries, the blinking black text on a white background wasn’t as distracting as it was earlier in the semester. This probably allowed me to connect to the imagry more easily.

I thought the frames in These Waves of Girls - while distracting and not something I would use - reflected the segmented aspect of the story. Each section seemed to start with an age statement or a defined block of time which the frames reflected and forces the reader to move though them as though they were going though that block of time. I thought this idea of moving though the story was picked-up in the chapter of First Person that we read. I was intrigued by the idea of Card Shark and look forward to experiencing a piece written using it.

Screen Captures

Oddly, I had to write up something for my ICS students about how to do a screen capture today. During that, I found out that Paint on Windows XP will now save GIF, JPG, and PNG formats! In the past, it could only handle BMP (bitmaps), which are huge files that you don't want to put on any website.

Anyway, Paint is found under Start -> Programs -> Accessories. Just hit Prnt Scrn or "Alt + Prnt Scrn" to copy the image (as demo-ed in class). Then open Paint, and hit Ctrl-V (or go up to Edit->Paste). And save!

Now you don't need to mess with downloading, installing, and using the GIMP, which is rather troublesome. Paint doesn't do much more beyond what I just described though, so if you need to do any thing fancier than just saving, I still think the GIMP is still worth learning (since it's free!). Also, Paint seemed to produce a rather crappy GIF image. PNG turned out okay though.

Anyway, just thought I'd share my discovery of an easier way to do it!

Enjoyment in spite of structure

I liked These Waves of Girls in spite of its hypertext structure, largely due to the grace of the writing and the power of the underlying "story" (or rather, the "narrative images"). The hierarchial overview found on some of the pages, with short linear stories from there, were the easiest to comprehend. I found the mix of images and sound to be somewhat discordant, since the text and formatting was so different between pages (and the sound wouldn't play through my plugin). However, some of them were enjoyable. The trip though the glass window of the security door was memorable.

I enjoyed the jumble of memories--short and interweaving. Many of them continue to haunt me this morning. However, I felt this experience was due more to reading them together and having them refer to each other, than due to the actual hyperlinks themselves. I felt the links were too numerous, and the relationship between their source and destination texts was often obscure. This may have been the intent--as if modeling a stream-of-consciousness recollection. But I question its use as an interface. The user is not making a real choice if they have no idea of the consequences of their actions. And each time they make a choice, they have to give up on the thread (often unfinished) that they're currently reading. The user is going to take a single (albiet, perhaps branching and looping) path through the work. The author of a hypertext work does not provide a coherent path, favoring instead a user-constructed experience of naviagation. But fumbling around blindly through a work is frustrating, not enriching. The connections should be evident in content of the work itself, not only in its technical structure.

Jew's Daughter was a very neat trick, playing with the notion of a page. Also a sort of stream-of-consciousness, the page seems to model a current moment of thought. But the writing did not keep me interested. After about 15 to 20 morphs, I bailed.

Miss DMZ was wonderful, my favorite Young-hae Chang work yet. A great story, great music, nice use of *, all brought together into a single piece. Here, I didn't feel I had to overcome the structure to enjoy the content.

CSS and HTML Examples

Michael has been asking about how to set the margins around images for word wrap in HTML. One solution is to create an element in the CSS for the image and then assign that element a specific margin value.

I've slung together an HTML page that has an internal CSS specification illustrating this approach. The text and the image are totally arbitraty--the image has been cropped along the colored edge so you can tell that the margins are not in the image file.

The file shows you how to do other useful HTML things, too:

1. The CSS shows you how to "float" an image inside a chunk of text with "float" and how to set the alignment (right or left side of the text).

2. The style includes a simple approach to setting up, over, down, and visited specifications for your hyperlinks. You can also turn off the automatic underlining of links.

3. The link itself includes the "target" attribute with the "_blank" value that opens a new browser window for the linked file. This is a simpler approach than the JavaScript one on the syllabus page for the class, but you can't specify the size (or other features) of the new window.

4. The "../default.html" in the link is a relative path (as opposed to the full URL, which would be the absolute path) out of the "Resources" directory (where the "brat_css.html" file is located) and into the "394" directory (which contains the "Resources" directory). You can use these relative paths to link files nested within your own directory structure.

Please write me with any questions or problems you're encountering. We'll spend some time in class on basic stuff next week to make sure you're ready to put together the "beta" releases of your first paper.

Web page access

Is anyone else having problems with their web page setting getting changed back to the restricted setting?

I enable mine. Save the changes and log-out. Then it works, however, when I return to it later, I need to go through the process again.

michael