Hypercompendia

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.

Something…Dark

This was another big change in planning for hypertext story–as well as a new map that allows me to see what the spaces hold, and that’s a big help in this process.

What inspired this story was a change in point of view, making it a two-sided story that gave me a feel for the enemy. I also wanted to keep it short so there are minimal spaces and yet for the easily aggravated, this one can go on for quite a while with repetitious reading that hopefully sheds some moonlight on the characters.

As an aside, while I haven’t done much of the ‘horror’ genre lately, it’s the only thing I wrote when I started writing many years ago. This was a fun attempt to rekindle that dark side of soul.

Downloaded Aptana Studio as was suggested in the For Dummys‘ book to coordinate and doublecheck code of all sort. I’ve been using just my little Mac Textedit program but figured that maybe it would behoove me and my code to go a bit more fancy.

Haven’t opened and installed it yet because I also have the Adobe Suite with Dreamweaver and such so it would seem that I may as well make use of what I already have and something that is more compatible with the the other suite programs that I more consistently use. Besides, that’s another 139 mb on the hard drive.

Starting a new category because it sure looks like I’m into it up to my eyebrows anyway. First html and css stylesheets, now Javascript and that’s only because I wandered onto a new section of the book and within minutes created one of those annoying pop-ups. I won’t put it into the site code cause that’d be really annoying so I’ll see if I can just put it here:

Dopey Javascript Greeting

Guess it opens up another web page also but that’s still better than embedding it into the website forever, right?

After a quick look at the stylesheet for the basic golden grid, I think it would answer some of my questions about setting up a cleaner css for what I want. It may point out the obvious way to apply attributes and values such as border style, text color, etc. that are uniform to the wider designation of positions without each having this list of properties.

Even though I’m not currently thinking along the line of the visual reasoning of the golden grid, I’ve already got nine positions that I think are pretty basic: left, center, right, top and bottom for each–not allowing for three positions vertically since most screens are still pretty short and wide–and a wider (400 px) version of each of the three main positions which will obviously not be used at the same time unless I want overlap.

It’s nice to look through the stylesheet, even (and maybe especially) in its overwritten condition and understand what all that stuff means.

Course I couldn’t go to bed wondering if all my work in the last two days was wasted so I Filezilla’ed the test story over here and was happy to see that despite the lousy structuring and story, everything works properly. Even in Internet Explorer which I’m on now.

So I’m happy ’bout that and all…but…I’m not so sure I really like the boxes moving around so much. It’s sort of distracting. Of course I’m not reading them but just link-hopping and this is just a dozen or thirteen writing spaces, whatever I needed to try out all the different attributes, but still…

Well that was easy. Just added a middle position vertically for each of the three (left, center, right) horizontal positions by making a “leftm” etc. though I’m sure it would be better to make it obvious with a “leftmiddle” designation. And of course, new questions come from this move.

First, with a Mac Book I’m not sure I want a lower or third level position. Now with my husband’s monitor which is 19 x 19 approximately, it’d be fine. So that’s a stop and thinker.

The other thing of course is that while it’s easy enough to copy and paste the whole rigamorole including borders and widths and paddings and just change the position throughout the stylesheet, I’m sure I missed an easier way–or rather simply a cleaner way of coding it. Probably under an umbrella of some sort. That’s what you get for skimming the textbooks or not listening. Then again, I am learning more about how things act and it’s not like I’m expecting to get a job out of this.

Then it happens; I remember that I should be testing all this in IE or other browsers as well.

Who’da thunk that I’d ever have gotten into the underlying structure of composing and presenting hypertext narrative? I loved Storyspace because it didn’t require much of me aside from twiddling a few dials to set up a very elegant looking hypertext so that I could concentrate on writing story. The drive to present that story online, however, led me into the whole code thing. It meant setting up a weblog that could allow for offering the pieces online, and that meant moving from Typepad to WordPress and setting up two new homes. Then learning css and html to export from Storyspace into the sites. From there, the imagination goes wild but it’s a fun learning process and each baby step I make (or elderly shuffle) is both an accomplishment as well as a treat.

Obviously, when one adds another element into the equation there naturally comes a need for variables.  With the major step of background image comes consideration of text color. On the last image, while I Photoshopped to make a dark text readable, there are other things to consider such as the links.

So I grabbed another image out of my garden files, one that in reality was hot coral California poppies and sun-drenched green leaves. I was going for composition knowing that the color was a big no-no. Ended up with this (below) and still, the original link color of cream is not going to work. But that’s fine. All I have to do is work out how to change that in a working narrative for the future.

In most projects you come to a point where the trail of thought diverges and there are several ways of doing the same thing as well as several directions in which to branch out. This is truly a hypertext moment.

With some ideas in mind of what I’d like to be able to do (positioning of lexias), even without getting into the golden grid method yet I may have other options of accomplishing what I want to do. This is when the old “a little knowledge is dangerous” becomes a possibility.

I’ve already likely gone the long way around to manage the postions already: left, leftlarge, leftlargea, center, centerlarge, centerlargea, right, rightlarge (no rightlargea). The left and leftlarge are 285 and 400 px wide, or roughly allowing for a 3 column position versus a single fixed. The addition of “a” on the leftlargea is the designation for the image background rather than the designated color. All work; all are, I’m sure, more elaborated and sloppy css than necessary but remember, I’m not classroom-taught here and my own mind works in “next step” and “try it and see” ways. All time-consuming, yet more fully understood because they come from logic rather than instruction or rote.

Now as I ponder my next move, I’m guessing that a placement of “top: 150 px;” code would likely give me the vertical positioning. But then, I’m going to have a css that’s going to cover every possibile combination of positions and colors and text and sizes and then, only then, will I be smart enough to go back to the books and find out a shorthand method of coding it all in.