Hypercompendia

So far, Safari has been able to point out various HTML errors that Firefox automatically appears to override and fix.  I’ve used Firefox and like it, but when working on a hypertext piece that’s going to go online, it’s become obvious that you need to pick one of the pickier browsers to work with.

What worked beautifully in Firefox didn’t work with all browsers. I have FF and Safari on the Mac–which is naturally where I’m working since I use Tinderbox to start the piece out. On my PC, which I rarely use but have for backup and to hold all the years’ worth of stuff pre-Mac, I use Internet Explorer as the default browser and have since downloaded Chrome and Opera. That gives me two operating systems and five browsers to check the work. Also, I might add, different screen resolutions because of the various monitor sizes. This led to the last problem I need to deal with, the background images which looked great on my Mac, but fell a couple hundred pixels short on the PCs.

Safari’s refusal to accept font color tags unless they were posted before each paragraph of hidden or stretch text (in a group of three paragraphs, the middle one would return to the main text color) was similar to one of the other browsers that would only take the first paragraph and then return. I’m sure there’s a more professional way of doing this–which is why I wish I’d learned coding from the basics instead of jumping into the middle–but I did manage to fix by tagging each paragraph.

The problem of an uncentered image on the first page, where I inserted a 400px wide image instead of the 550px, I had used the proper code within the head:

<style type=”text/css”>

.stretchTarget {
margin: none;
margin-left: 100px;
}

</style>

It wasn’t until I studied another page where I’d done the same thing in stretchtext that I discovered I had changed a headline size from h1 to h2 but hadn’t changed the closing tag. (The image came from the linked headline) and so even though the headline was okay, it messed up what followed–the image.

So while I’ll likely still work in Firefox, I’ll know enough to doublecheck immediately each page in Safari as I work. Of course the best way would be to run the pages through the W3C Validation Service, but that shows me that my pages really have no right to be working at all and just makes me feel bad.

Have finally spent some time yesterday on finishing up A Bottle of Beer. I’ve included images I’ve taken myself and Photoshopped into more artistically (some, not all are done well–I’ve gotten some confidence since several of my graphics have now been accepted for publication!) suitable visuals and managed to get them to “hide” and “unhide” via stretchtext.

It’s likely the “flashiest” piece I’ve done, and likely that is because it was first written into Hyptertextopia and that was their basic color choice–black background and brightly colored links. But it suits this piece, and while I’m tempted to explain that the colored text that is revealed via links are the themes and separate from the main (white text) narrative, I suppose I’ll have to “Barthesize” and let the reader figure that out. And love it or hate it.

I’m still working on the problem of the hidden text not remaining consistent in color in Safari and Internet Explorer. I’ve solved it by adding the font tags to each paragraph. I’ve still to check if the stretchtext works in IE and Chrome. It works properly in Firefox (which is what I use) and in Safari so far. (UPDATE: Chrome showed up two open font tags but everything else was okay–odd that Safari and Firefox automatically closed them. Also, in working on the other PC with a larger screen, didn’t realize my background images set at 1280 x 800 weren’t sufficient. Have to work on that so that not too much relevant stuff is cut out on the right hand side. Maybe need to float or code to fit screen?) (UPDATE #2: Downloaded and tried Opera and everything works.)

Learned a lot, and am happy that this piece–aside from the tweaks and maybe some image changes–is finally displayed at its best.

I don’t have the kinks worked out yet about hidden images linked from hidden text, nor the different browser display of any images at all, but I’m giving myself a break and playing in Photoshop with some of my photos I’ve selected for A Bottle of Beer.

Still playing around with size and placement, but this is the fun part:

UPDATE: Did get the image to work, but only as the target from original text links–as opposed to stretchtext hidden text links. Haven’t checked it with IE and Chrome yet, but it works in FF and Safari. Haven’t done anything with the font color problem yet since it works in two out of four browsers and that’s likely an easier problem to fix.

Just when I thought I was hot shit getting all that stretchtext working properly I exported the piece to the site online and problems immediately came up.

While I work with Firefox to open the html pages offline, I still needed to see the flow of the narrative when sticking in the images on a more occasional basis, since once the stretchtext is in the Tinderbox form, I can’t see where they are (including them into the main text of the box from whence they emerge), and in the file exported to a desktop file, they are arranged alphabetically rather than by narrative flow. Once the pages were set with the stretchtext code and the font, sizes, etc. were pretty much decided and working, and Firefox opening the file on the hard drive worked the images open in stretchtext, then I exported the project online. And the fun began.

In Firefox, the images don’t show up. In Safari, something worse; the stretchtext seems to have lost it’s font color in the middle paragraph of three–though two paragraphs will hold the color:

Then I went over to the PC and with Windows XP and Internet Explorer, found that only the first paragraph held the font color while subsequent paragraphs returned to white, even though the closing font tag was not until after the last paragraph.

The image, in Firefox showed nothing, in IE and Safari showed the empty place-holder box:

So I downloaded Chrome on the PC. It handles the font-color code, but not the images. Chrome also didn’t display the Rockwell font very well, almost made it unreadable while it was fine in the other three browsers. So that’s four browsers and two of them have trouble with the font color changes and all four have a problem with the images. The colors, BTW, are your standard #ffffff, #000000, #ff0000, #00ff00, and #0000ff.  Looks like I’ll be doing some work on this today. But then this is one of my strong points, I love to track down problems and solve them. I’m just a bit slow.

Though it’s my preferred method of learning, that is, getting an idea then having to seek the answer, it’s proving a bit unwieldy.

I’ve gotten the templates all done, all the stretchtext in place–at least for the text–and am moving on to once more changing fonts–that’s a snap–and size of the boxes, or borders.

Then I think of putting an image into the background, outside of the bordered boxes, occasionally. But I realize that I have a new css that doesn’t include the different columns, so the background of the body is the background to all. So that’s one thing to play with.

Then I’m thinking, maybe something different, like doing away with the top and bottom borders of the boxes which indeed suits the concept of stretchtext, but of course, needs some margin refiguring.

The idea of an image in the background is not a whole one that covers the page, as in Blueberries, but rather one that may peek from an edge, or horizontally boldly cross the page like a highway.

All this is what’s bouncing around in my mind, so many ideas, so many possible ways to code them in. Yet at some point I know that what I really need to do is start back from the beginning with understanding the codes of HTML and CSS and jQuery. Otherwise, just as with my prior project for the 100 Hypertexts of 2009, I’ll end up with stylesheets that run on forever, adding in each solution for each problem posed by a whim.

So here I am, anxious to get done with this project of revamping A Bottle of Beer, and while it’d be poised to go as is, wanting as well to throw new elements into it. And another problem comes in: I’ve three books on coding and only two hands.

With any luck, I’ll post the new version of ABOB soon, before I decide I want to have Mexican music in the background as well.

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.

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.