Horizontal Lists Redux

I’ve updated the CSS used to generate horizontal navigational elements from unordered lists.

You can skip all the fanfare and check out the updated CSS (with new comments) here.

You’ll see this sort of thing in just about every one of my layouts. I like horizontal lists, they require very little vertical space. In layouts, I like to focus more on vertical space (one-dimensional thinking?) because I find myself not scrolling on web sites I’m visiting at random.

If I’m visiting a web site specifically looking for something, I’ll go through the whole process, scan the whole page, to find what I’m after.

But if I just get a link from a friend in an e-mail, or off a blog, I’m more prone to just load the page up, take in my first impression, and that’s about it. If I don’t see anything of real interest, I’m off. This usually means I don’t scroll down.

So a horizontal menu up at the top of your page can help bring some key links that are really important to getting at the information on your site to an area the user is most likely to see.

Now I talked a lot about my own browsing habits there and not about “general” browsing habits or what I might have seen in some usability study.

Thing is, I find one of the best sources for immediate information on browsing behavior is yourself. Not in very specific terms, such as a “find information about xxx on yyy website”. That sort of exercise is best suited for a good usability study where you pull people off the street and put them in front of a computer, with your website loaded up.

I’m talking in more general terms. What’s the first thing that catches my eye? How far into a page do I read before I go on. What parts of a page do I scan? Stuff like this can be taken from analyzing your own habits.

And I don’t mean while looking at the site you’re currently developing. That’s getting too specific (site specific). I’m talking about habits when you’re browsing the web at your leisure. Next time you’re just surfing the net for fun and not for work, try to take notice of how you handle pages you’re use to and comfortable with versus pages you’ve never seen before. Or try to simply recall your own experiences up to now. See if you can discover certain habits.

I find that a lot of these general habits tend to be shared and you can apply what you find to your own work in developing a website.

Now that’s not to say usability studies, peer reviews, etc.. are garbage. They are key tools in refining the shape of a layout or structure of a website. But you can get a little further in the process if, when developing your a site, you look at your design and examine how you treat other sites with similar layouts or elements within.

Just a thought.

Hurricane Relief: Please Donate

The American Red Cross is able to take donations online via credit card. So if you have a few bucks you can spare, please consider donating. The people hit by the hurricane are really going to need help.

Things are getting really bad, especially in New Orleans. There are some very horrific stories we won’t hear about for weeks because things are so chaotic, communications poor, and it’s very difficult to get into the neighborhoods now under water.

The water is expected to keep rising for several days. Literally, New Orleans will be under water, it’s only a matter of time. You can’t even imagine the things floating in that water. Disease is going to become a very real problem in the weeks to come. I’m not even thinking about what it will take to rebuild the area, I’m thinking about the immediate issues. Clean clothes, food, and water, and shelter are going to become very very difficult to find.

Any support you can give would make a world of difference. And the sooner the better. I don’t think the reality of just how bad things are and are going to be have sunk in to the public.

Thanks.

Oracle Portal Stylesheet

As promised in a previous post, I’m making available a stylesheet I put together that contains all of the stock classes used for pages generated by Oracle Portal.

You can grab the stylesheet here.

The selectors listed come from this document that lists the selectors and their purpose, along with taking an actual stylesheet generated by Oracle Portal, in case there were any ‘undocumented’ selectors. I found 2.

I haven’t crafted any kind of compressed version of this stylesheet yet. It seems that more than a few of these selectors could be grouped together so that, rather than continually replacing every instance of the text color with what you want to use throughout the page, you can just change one line.

Get Me An Eraser!

<rant>

I’ve been a bit busy working with our Blackboard system. It’s been upgraded to 6.3.1 (Blackboard 6, Application Pack 3, Service Pack 1).

My frustration with Blackboard continues to grow. On top of a long list of gripes I’ve added a few more that I’ll share.

Blackboard 6.3 no longer allows full control of what they call the “gateway” page. I typically call it the homepage, but others will call it the index page, default page, and so on. Prior to 6.3 you could craft the entire page in HTML and Blackboard would serve it up without any changes. Now you are forced to design within a content area inside a stock page layout defined by Blackboard. White background with black text, a masthead, left-side column, and footer all wrap the content you design. There’s no way out of this either. It seems like a small matter, but if you’re especially focused on branding, this is a huge outrage.

Part of Blackboard is a collaboration tool. Essentially an over-hyped chat room. The client is a JAVA applet that your users load in their browser. The server is maintained on your own hardware.

Now Blackboard has a thing for ingoring problems with or the support of SSL. It’s something of an afterthought with these guys. One time, a few months ago, a Blackboard support rep told me they don’t use SSL on their own systems because “it causes too many problems”. So rather than fix this, they ignore it.

One problem (a small one, compared to the others) is getting SSL to work with the collaboration tool. The collaboration tool is accessed through a separate port than the standard port 80 (443 when talking about SSL). Now I’m not talking about the actual chat data going between client and server, I’m talking about the web page inside which the chat client is embedded. Why this how they designed it I have no idea, but it simply is. And because it’s on a separate port, it’s handled not by your front-end web server, but rather an instance of tomcat that handles the JSP bits used in Blackboard.

So to get SSL working, you need to take your existing web server cert, break it apart, and import it into a JAVA keystore. Blackboard provides documentation on this, except they only show how to create a self-signed certificate and not how to use an existing SSL cert.

I figured that part out on my own.

After pushing the need for documentation on this process, Blackboard updated their 6.3 documentation with a link to documentation on Sun’s keytool application. And that’s about it.

Those who do some digging will find that in this document on data integration, the steps required to import an existing SSL cert do exist within Blackboard’s documentation library. Why this bit of information (found on page 53 (56 in a PDF viewer)) is not copied and pasted into Blackboards setup document I will never know. It’s that kind of disorganization that kills me when it comes to Blackboard.

So anyways, I get the SSL stuff working.

I boot up the client, connect, and it works. Just to make sure all is well, I packet sniff the session to make sure I’m connecting over SSL.

Guess what? I’m not.

The tomcat instance used to serve up the JAVA client is the only thing now being sent over SSL after making a bunch of configuration changes. The actual content of the chat room itself remains in plaintext.

All that work just to serve a JAVA applet that could just as easily be served through the regular web server over SSL. Leaving the most important information, the user’s information, in cleartext.

Unbelievable.

It’s this kind of disregard for user privacy and security of user information that has completely turned me off of Blackboard.

When Blackboard 6 came out they changed their licensing from Blackboard 5 so that clients who license the basic edition could no longer use SSL. Yes, SSL does not work on Blackboard 6, basic edition. So what if you want to use SSL? Buy the enterprise edition, which costs a lot more than basic. It seems like extortion. Buy the more expensive product or we make your user data vulnerable to packet sniffing.

Unbelievable.

I developed a kind of proxy server with Apache to act as the middle-man between Blackboard and the client. Apache would serve an SSL connection to the user, and then forward requests on to the Blackboard server outside SSL. Keeping the Apache instance on the same machine as the Blackboard server means I can keep user data secure. No user information is transfered in cleartext. It works well, but I shouldn’t have had to do that.

Earlier this year I contacted Blackboard about a double-login issue. Users would bookmark the login page, but whenever they used the bookmark they’d be prompted at a second login screen after completing the first login screen. Blackboard told me this is a result of how sessions are created. It required users to visit the gateway page first to initialize the session before moving onto the login screen.

Unbelievable.

But now… now they have this portal product that can operate on top of the learning system. And those who purchase the portal product now have an option to bypass the gateway page so those bookmarks do work. Great! Except you’ll have to pay yet more money just to get that single feature.

Un-freaking-believable.

Before 6.3, whenever you enabled SSL support for only specific sections of Blackboard, you would get constant pop-up messages in IE telling you that some parts of the page were being transmitted over an insecure channel. This is because, whenever anything at all had SSL enabled, the parent HTML frame (yes, they use frames in Blackboard….unbelievable) was transmitted over SSL. But the child frames were not.

So to fix this, in 6.3, Blackboard has the parent frame no longer being transmitted over SSL. If a child-frame is being sent over SSL, you don’t get the pop-ups because there is no data inside the SSL frame being transmitted outside of SSL. Dig? It’s a cute hack, but by far not the correct solution.

The correct solution is to do away with frames alltogether, but that won’t happen.

</rant>

Eraser In Hand

So we’re looking at Sakai. It looks very promising.

Gargoyles, Season 2, Volume 1

A release date and some initial tidbits of info has been released for the Gargoyles, Volume 2, Season 1 DVD. Greg Weisman, series creator, announced the following details:

• First half (26 episodes) of Season 2
• 3-disc DVD set
• Available on DVD December 6, 2005
• US$39.99 MSRP

With some nice bonus features, including:

• Episode Introductions by Greg Weisman
• Audio Commentaries on “City of Stone” Four-Parter
• The Gathering of the Cast and Crew (featurette)

The audio commentary will be done by Greg Weisman (this is his show), Frank Paur (producer, instrumental in directing the show’s look and feel), and Michael Reeves, who wrote City of Stone along with many other episodes.

Amazon already has a page up where you can pre-order the DVD.

This is excellent! If you saw the first season and thought it was at least okay, you’re going to love season 2. This is where the show really comes into its own. Five episodes into season 2 you’ll see an episode titled “The Mirror” which is probably the best single-episode of the entire series. Greg Weisman has often said that if he had to show only one episode (rather than say this is his favorite episode) that “The Mirror” is it. It’s got great animation, great writing, and some really really great voice acting from both the regular cast and the guest cast, including Brent Spiner whom you all know as Data from Star Trek: The Next Generation.

One of the great things about this show is the multi-part episodes. Multi-parts have some of the best writing in the whole series and City of Stone stands out among all. The DVD is worth getting just to see this four-part episode. I easily understand why this was given audio commentary. (They don’t have commentaries on all the episodes because of budget constraints.)

You’re also going to get the excellent 3-part Avalon on this DVD as well. Avalon kicks off what is known as “The World Tour”, where the main characters Goliath, Elisa, Angela and Bronx travel around the world. This gave the writers some great chances to include myths and legends from cultures all over the world. From Arizona to Austrailia with stops in England, France, Scandinavia, Japan, and many more. Avalon introduces Oberon (voiced by Terrence Mann, the guy was in Critters!!) and Titania (voiced by Kate Mulgrew), the King and Queen of the third race (fae, “Oberon’s Children”).

This is very, very exciting news. I can’t stress enough how good this series is. It isn’t just a kid’s cartoon. Not at all. No matter how old you are, you will enjoy it.

So keep an eye out and start planning your holiday gifts. I bet there’s a few on your list who would really enjoy this.

Wide Images in CSS Layouts

Here’s a little piece I’ve written discussing a technique for including wide images inside fluid CSS layouts.

At the heart of the issue is the effect of images that become too wide to fit inside their containing element when the user’s browser window is sized too small.

The trick is to simply apply the image as a background image to a DIV element. The DIV will take up whatever width is available and the background image will be cropped to fit whatever space is available.

I kind of lost my energy towards the end of writing this. I’m by no means a professional writer (surely by now you’ve found more than a few grammatical and spelling errors in the things I’ve written) and I never proof-read enough. I’m more stream-of-consciousness when I write and that leads to some crazy mistakes. But I also like that approach. Sometimes I’ll talk myself into a solution or new idea while typing up these write-ups on CSS-related topics. So it’s great for me because it’s not just writing, it’s something of an exploration. But you guys just get stuck with my crappy writing, spelling and grammar. Those of you who do not have English as your primary language must have an especially difficult time.

Oh well. No worries.

Flaky Box

Just a heads up that you may discover this site (this server) going down for periods of time in the coming days.

weblog.bridgew.edu is something of test server. It’s running on an old Dell PowerEdge 2400 that’s been recycled several times before it finally became weblog.bridgew.edu. It was, at one point, the hardware for www.bridgew.edu, but that was at least 5 years ago.

Today the amber warning light on the case has begun to blink. That means something “bad” has happened, but I can’t seem to find out what it is. The drives all check out fine. The power supplies both have green “we’re a-okay” lights lit up, and it’s operating normally.

Right now my gut says the CMOS battery is dying, but I’ve yet to actually research what can trigger the warning light and how to find out the exact cause. All the Windows-based tools Dell provided for the server are useless because it’s running Linux.

Speaking of Linux, the box is running Gentoo Linux. However I don’t regularly update the portage tree and so some of the software currently on the box is a bit old. I think the kernel is almost 2 years old (Oct 14, 2004).

A little while back I ran the update tool and updated all the system-related applications. During the process I appear to have overwritten the file that tells the kernel what modules to autoload on boot. Oops.

That’s why the server was down today. The light started blinking, the server was rebooted, but … oops, no network driver was being loaded.

And when I finally got the NIC module up, I see apache failing to load. Why? Because the system update included the zlib library which the php modules links to. But the php module expects the old zlib module and so Apache fails because it can’t load the php module because the php modules much needed zlib library isn’t there.

*sigh*

So I really need to spend some time cleaning this thing up.

So guys and gals, you might see this server go down from time to time. Don’t worry, it’s just me working on the thing and (hopefully) not me blowing it up. :)

So that’s how I spent my last couple hours.

—

On a side note, I’m working with Oracle Portal a bit. I’ll be getting into it up to my neck in the coming months and I plan on sharing a few bits of that work on here. For example, Oracle Portal’s styles are handled by CSS. But they’ve got very wierd selectors in their CSS and us Oracle Portal users are married to those selectors. The thing is, Oracle is generating a bunch of HTML (tables and such) to layout the portal page. This includes these pre-defined CSS selectors.

So what I’m currently working on is creating a template stylesheet that has all of Oracle Portal’s selectors and will include descriptions on the purpose of each, etc…

It’s a tedious (but not difficult) task and rather than have that work go to waste, I’ll share that stylesheet template as soon as it’s done (maybe tomorrow?).

Cool?

—

And thanks for the comments you guys are posting to the articles on here. I definitely read them. It’s an odd thing.. do I reply to them in the thread (many of which are off the index page with no means to indicate new comments are available) and risk nobody seeing them, or do I reply here or what?

Oh well.

I’ve had my chance to ramble for the week.

Thanks.

mt-perm-fix.cgi

mt-perm-fix.cgi

This is a script I hacked together this morning that presents a form with two drop-down lists. One list showing all available authors in your MT system, the other is a list of all the blogs on your MT system.

The purpose of this script is to set full-control permissions for a given author on a given blog.

The reason I wrote this is because someone lost the rights to their blog and there was no obvious way to set them back. There is no superadmin account with MT, just a flag that tells MT whether or not a given account is allowed to create blogs on the system.

I thought this might come in handy for you fellow MT users out there who are on 2.661.

I do not run MT 3 (due to license changes) so if you’re on MT 3 or later, this probably won’t work.

Now there could be some way to do this through the normal MT interface. I didn’t get a lot of sleep last night so I may have missed something obvious. But, if nothing else, this was a fun little exercise to get wet with the MT API.

Especially useful was this MT API reference I found via Google.

If any MT guys out there know of the “correct” way to set permissions on a blog with no authors applied to it, please let me know. I’m dying to find out what the real way to do this is.

Where Am I?

I’m in the middle of a trip around the US for work and pleasure. I’ve been away from any sort of ‘net access since last Wednesday. So if you’re waiting to hear back from me on some e-mail, that’s why I have yet to respond.

I’ll try to start picking through my inbox this afternoon and hopefully get some help out to people.

In other news. there will be a Gargoyles comic book that will begin its run sometime in early next year. So with the DVD coming out in December and the Comic next year, I’ll be working out 2 new layouts to help promote each.

The book will be published by Slave Labor Graphics. Disney will then combine issues and publish their own line of graphic novels from the Gargoyles comic. Very cool. The SLG issues will be available via Amazon.com once its released, as well as your local comic book shop. So start getting the word out and talk to your local comic book shop. Get them to keep an eye out for the Gargoyles book, coming in 2006!