Hypercompendia

Just finished moving all of A Bottle of Beer into the Tinderbox format, and here’s the different views between the Storyspace version (left) and the Tinderbox version (right), both in Map View:

While the color and Note format is obvious, I’ve changed the layout of the sidenotes for a reason. The black Notes are the main linear story. The colored Notes–red, green, and blue–each represent a theme of this piece. Red represents the men in the main character’s, Yolanda’s, life; green represents past events; blue represents nature’s alliance with mankind. The themes do not have any linearity and so would not be connected to each other. They are random thoughts that are sparked by the slowly unfolding linear narrative. In the completed hypertext version to date, they are read by clicking on colored text links, and lead back to the Note from which they emerged. What I’d like to do instead, is have them appear on the page, fading in but not covering the main text. That is why I’ve put the piece into Tinderbox, and why the Notes are lined up with the main linear Note they belong with.

Now all I have to do is figure out how to do that. And that’s where my learning jQuery and the new HTML5 and CSS3 comes in.

Can’t seem to easily drag a Storyspace piece, A Bottle of Beer, into Tinderbox, so I’ve been moving it a couple boxes at a time then reconnecting them. I’ve always liked this story, originally written using Hypertextopia (I’ve since taken it off the site), then put it into Storyspace. I’m moving it into Tinderbox because I think it’s the perfect piece to use some jQuery tricks to present it in a much neater way. Since the story is pretty linear with some sidenotes, I’d like those sidenotes to be set apart rather than construed as a part of the linear narrative.

Getting into the jQuery learning to a point where I kind of get what it does, where it belongs in the html page, and how it works together with the html to fine tune or call out a particular action. I think I’m seeking what would be called an “event,” something that will result in a change in the page when an action is performed by the reader of the web page.

Haven’t gotten into the HTML5 or CSS3 yet; I think that just refamiliarizing myself with coding right now and practicing that will put me in better shape to move on into those areas and the changes that have made these what they’ve become.

Never was, I suppose, but remember, I came into this late in the game. What I’m referring to is my own personal experience with fairly simple looking hypertext narrative, or with minimal colored background and text, to its more current integration with graphics, moving visuals, and audio. This is my ultimate goal as far as creative projects are concerned, though I’m sure as a writer, I’ll be more likely to focus on or emphasize the text and keep the rest as secondary sensory titillation. I’m not impressed (though technically, I most certainly am!) with reading story that’s blasting, pulsing, fading in and out, or zipping around before you can do more than taste the words.

I’m being directed in a more interactive path. Flash media, hypermedia and towards something called Interactive Conversation Interface that I’d not heard of before. It’s a confusing trail that’s unfurling that I feel I must catch up on, even as the trails branch off like, well, hypertext.

I was very good about reading and following step by step directions all the way through Chapter 1 (jQuery for Dummies). As soon as I go that down pat, I flipped through the pages before going on to Chapter 2. Chapter 7 caught my eye: Slidng and adding Web Page Elements.

I made another new test.html and while I had a small bit of trouble making it work right away, got an image to fade in (well it sort of came on rather quickly) like I was supposed to. And, I still understand what I’m doing. I had missed a closing tag }); which I didn’t realize I’d be duplicating and was supposed to do so. The instructions went on to get the image to fade in more quickly by adding the attribute (‘fast’), but since I thought it went too fast already, I tried adding in (‘slow’). Well it either worked and I should’ve given it another five minutes, or (‘slow’) isn’t accepted jQuery-talk.

Now I need to go back through Chapters 2 through 5 to see what I missed. Oh, and I’ve learned to save all the separate html templates and am clever enough to name them after the effect produced.

I’ve been working in Tinderbox and Storyspace for literary purposes for a few years now. I’ve had a hypertext story published in The New River Review and my 100 Days Project of 100 Hypertext stories has been listed in the Electronic Literature Organization Directory. It’s not much, but it’s a start. Towards what goal? Well, to spread the word, to gain audience, to prove that hypertext is coming of age in a world where reading is done to a great degree online, and where hypertext literature is not only perfect for the times, it is ahead of them yet oddly it remains largely unacknowledged by both academia and the general reading population.

What then, to do? Make it lovable. So that’s the project. Here’s the start:

From personal experience, including my own baptism into hypertext waters, and here, years later, reading the reaction of students being exposed to the medium, I’ve got to admit that the initial reaction is generally either “Yuck, I don’t see its purpose, it’s confusing” or “Wow, that’s great (but I’ll never read another one after this course is over).” So then the problem appears to be primarily in its introductory phase.

There are two problems here that I see. First, not all university courses include a new media course or even much of an inclusion in their literary courses. Secondly, since hypertext is supposedly a break from traditional reading (how is that, when links are clicked to read online so often that there’s a perceptible new “white noise” hum in the atmosphere?) it’s bound to hit resistance. Folks like ease and speed these days. Hypertext is not necessarily meant to be read fast and easy. Reading literature itself should be tough, unless we’re seeking mindless, non-demanding entertainment. And escapism for its own sake is fine; I do it all the time, only not in hypertext literature.

This is an undertaking that I’m hot on, have been for years, yet never had time to kick off. Now, I’m going to make it a part of my daily writing. It will of necessity include some team effort, people who are more skilled with the medium and have the technological know-how to produce what I clearly cannot. That’s all a part of the plan.

Then again, am I being too pushy in my attempts to be helpful? Maybe. So what?

Would that it could mean what it sounds like, but not so.

In my pile of “Learn How To Do” has been the element of using stretchtext in a piece, and while I’ve got several places to learn it from, my mind unfortunately hasn’t quite grasped the concept of how it is actually accomplished. It’s a string of code that goes…someplace. Surely in the CSS itself, but also with references within the templates themselves in the particular spot where it’s needed (or wanted; stretchtext is no more needed than much else in life besides food and water and sex).

What I’m going to do then, is quit fiddling around and draw it from the back of my head to the forefront, somewhere just behind my third eye (why–don’t you have one?) and set up the project today to start seriously working on it. Easier then, to start with a piece already written and the perfect one for this is A Bottle of Beer, one of my longtime favorites that I’d written a few years ago, first at Hypertextopia, then into Storyspace which I much prefer of course because of its potential. I don’t have it in Tinderbox, but that may be the first move I make just because I’m more familiar now with this incredible program.

Noticed the ivy on the back patio this morning and thought of how it mimicked hypertext threads of narrative. Clockwise, from top left, the vines run parallel to each other, all streaming towards a goal. In the top right, there is the obvious split-off of story trail by this group into three different directions. Bottom right is the recalcitrant loner who, perhaps allergic to stone, prefers to employ the woody stems of the evergreen where he, and he alone, climbs up to the top and surveys the arena as if, by magical realism, he is the most normal of ivy. In the bottom left, we have a group that’s energetic and on the prowl. A story that by choice may climb, crawl, split steps in its advance towards a conclusion.

Then of course it dawned on me; ivy is not following hypertextual narrative process, but rather, hypertext is an example of a process that is naturally occurring in nature.

Okay, so maybe this is merely one of those “susan” moments.

I’m always thrilled when literary hypertext is published, particularly by a magazine that isn’t driven by new media. What I mean is that by including hypertext pieces among their static text offerings, the magazine not only displays an open-minded attitude towards alternative presentation, it widens the potential audience  by exposing literary enthusiasts of traditional story and poetry to a different form.

Dorothee Lang, writer, photographer, artist, and editor of the Blue Print Review, teamed with Karyn Eisler, another multi-talented artist in many mediums, and Karyn’s brother Lawrence Eisler, an illustrator and designer in new media, for  a hypertext poem that’s visually exciting  and well planned out.

Published in the current issue of Wheelhouse, (R)Evolution is a journey that allows the reader to choose the narrative path. As Dorothee explains it,in comparing it to a piece called Poptagon which was published at Locus Novus:

Poptagon had a linear structure: every page leads to a defined next page.
(R)Evolution, in contrast, has “crossing”-pages that come with a choice, with options for the way to take. the curious thing is that there in fact is only 1 main “crossing”, and 2 sub-“crossings” – it’s really a simple hypertext form. yet when working on it, it took a sketch to be able to keep track of the structure, even though the whole thing consists of “only” 7 pages, plus title and ending pages.

The piece begins in a garden which the speaker compares to a shopping mall, where the flowers are selected by occasion, where she stands at the ready with shears prepared to clip blooms. This notion of choice is mimicked by the concept of hypertext where a choice can be given, a decision can be made, but an interaction with the piece is required of the reader.

The question of choices brings questions, the gardening bringing to mind the relationships with others. The metaphors in the piece extending flowers into words, manipulated again in the same manner as this hypertext piece.

The different pages of the poem are painted in visuals that are bold and contemporary. Here the text is designed into the image, enhancing and reinforcing the movement of the piece. Circular, forcing the reader to adopt an entirely new pattern of reading than the norm, sideways, mimicking stems or offshouts of the main stem–another shout-out to hypertext form. This piece takes readers out of the comfort zone into a more interesting and easy enough to negotiate concept.

A really beautiful collaborative effort by these talented folk that I thoroughly enjoyed reading, and I’m so pleased to spread the word.

I recently started editing some of the hypertext stories I’d written last summer as part of the 100 Days Project. One of the things that I’ve done is add in an image of the mapping of the story to help guide those who are new to hypertext reading and may become frustrated. It’s also sort of a learning tool, I suppose. And yes, I’m also driven by that evil gene within some writers and artists that wants the reader to read all of the words so lovingly placed there; wants him to appreciate the perfect symmetry of the design. So what?

Well in doing so, it occurred to me that it would be nice to allow the reader to select the point at which he wishes to return to the story, to see the path not taken and plunk himself down on it. With the old Storyspace reader, one may do so, follow the trail and go back–though I don’t believe the map image is shown. But we’re talking html on a website here. I have placed the map at the end of the stories (those I’ve gotten to so far), and while I’ve used a couple different ways of presenting it, the options at that point are usually to a) go back to the beginning of the piece, b) go back to the last page, or c) exit the piece. Wouldn’t it be great to offer d) a specific point within the plot?

Which brings me to, how would one do it?

Yes, I can link from an image to another lexia, but from points within the image? It seems that it should be easy enough with a map that shows boxes and words–just make a text link. (Though I work in Tinderbox now, rather than Storyspace, and so far, images aren’t a part of the plan.) But it doesn’t work that way; that’s not what shows up in html. It’s been done on the web of course, but I believe that’s done in Flash or some other manner. I’ve been told that much can be achieved by jQuery, HTML5, and CSS3. Guess it’s time to start checking that out, perhaps find a class somewhere so it doesn’t take me quite so long to learn it all.

Like everything else in my personal experience, the answer is out there and sought, once the question comes to mind.

On the 100 Days Project, Steve Ersinghaus is writing a fiction a day to match John Timmons’ videos. His pieces aren’t all necessarily stories but rather concepts and scenes and characters that pop in and out. Today’s piece is a visual map of a hypertext and it really is cool: the generic path protocol