Hypercompendia

Rolling along now, though I’ve got to go back and do some work on the piece as a whole, starting with the Tinderbox version of it, but I just found that I could “hide” an image and have it fade in via the same code I used for the text basically. Here, the “hidden” text is in blue and has been clicked to reveal, and as it included the final sentence (see previous post) the link in red “nightmare” calls up the image:

There’s still some tweaking to do, likely on the css sheet, to adjust the image size to allow some padding on the sides, but the code looks like this.

This morning everything just sort of fell into place with learning and maneuvering the stretchtext code. Even in my sleep I think I was already planning my next moves so that dark and early at 5:30 a.m., I could get right on the project and make things work as I wanted them to do.

A bit later, I was able to post the link to one of the pages  in A Bottle of Beer called “Kismet Slept.” The linear narrative is in the tan text, the links and the text color of the hidden text go according to the themes (in the examples below, green = Yolanda’s past, blue = nature). It all worked and I was thrilled. Then I noticed an error:

Original page display:

Clicking the blue link “ghosts”:

The final line “It was the nightmares that threatened her dreams.” is part of the linear story and was meant to show up on the initial display. Why didn’t it? Because of this:

Note that the <div class=”stretchTarget two”> tag was inadvertently left open. What this did was keep that last line as part of the hidden text rather than the original. The </div> tag should rightfully have been right after the </font></p> of the paragraph ending in “moon.” However…

…while this is an obvious error, it is one that creates a writing device that can be used (if I remember it!) to advantage in telling hypertext story.

One of the questions a new reader of hypertext asks is “Do I read the whole space before I click a link or should I click the link when I come upon it?”  Well, this little mistake may have just helped me out, almost acting like a Storyspace “guard field” to prevent reading something before something else is offered to the reader.

In this case, that last sentence has a much more dramatic effect being available only after the hidden text is revealed rather than being displayed on the initial screen. So while this may not be an often-used tool for the writer, it is one that can create an effect and give much more control to the writer in particular instances.

It works particularly well here since the hidden text themes have such subtle connections to the main story and this way, it brings the reader back to the main narrative by reading a new line of linear text that he hadn’t read before and may mentally block out or scan over had it been available in the opening page.

Okay, so I have all but the moving of the text which I’m not sure I can do but I think I can figure out a way.

Here’s a page from A Bottle of Beer employing stretchtext, color changes (which may still be fiddled with, as well as font for easier reading) in two events and in different colors–which for this piece, is vital.

Kismet Slept

Finally got to spend some focused time on this and managed to get my text to stretch.

I’ve had some direction from Steve Ersinghaus and his example in his wonderful poem “That Night I Saw on my Homeward Way” (Published in Drunken Boat #10) but was never able to really understand how it worked, what files I needed and what code went where. It would have been easy enough to just copy, but I really didn’t understand what I would be doing.

After reading the Dummies book on jQuery, things started to make sense. I began to comprehend how jQuery is like a special instruction to modify the set instructions for the piece, just as special instructions as to color, text, spacing, etc. changes are placed in the header section to override the css.

Using A Bottle of Beer as my project, I’ve so far put in just one of the two spots that will employ stretchtext.I’ve yet to figure out putting two in the page, change the color of the background and text–or at least just the text, and, if possible, make it come out of the side rather than straight down.

As soon as I do a bit more work on the color and style, I’ll export and link the page to a post, or figure out how to make it work within a post.

I do love the audio visual narratives that play up the graphics and motion over story, but isn’t there a place for digital text as the main vehicle of narrative? It seems that hypertext as a way of storytelling, without the added pizazz of preferably moving visuals and audio that to me at least sounds annoying when repetitiously run throughout the piece, is either a dinosaur or needs the help of much more than color and background images. And yes, sentences that sing no long mean eloquent writing.

There’s much to think about.

(Update: a relative post at HtLit here.)

This may be a model for the presentation of this project, a book called I Live in The Future by Nick Bilton.

I’ve decided that with two intense hypertext projects going on, it’d be a good idea to categorize them separately so updates make more sense.

Hypertext Project 2 is going to be a sharing experience, a website and book that will offer the reading and writing of hypertext narrative in an easy and inviting manner before it becomes all academic and technical. I’ve laid out an outline for the project in Tinderbox and have just started to write down some text, though I’m sure I’ll be gleaning much of it from previous postings over the years that follow my own journey through learning.

Hypertext Project 1 is another learning experience, that of graduating to HTML5 and CSS3 (though honestly, I learned just enough of the previous versions to be able to do what I wanted to accomplish) and jQuery.  So far, I’ve learned to Fade In and Out, and the Alert. But then, I jumped ahead a bit to the more interesting parts, which is typical in my learning pattern: I was once caught by the music teacher as playing a piece by ear since I couldn’t point to the spot on the page where I was supposed to be.

I’ve remarked any relative posts as such (or will within a few minutes)

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.