Category: Computers & Technology - Page 85

Are you a web geek? Can a 404 error page excite you?

If the former is true, it proves the latter. I’ll confess “yes” to both.

Today at work I was doing some miscellaneous web-related research (aimless surfing? no, no, never), and I came across a page of creative 404 error pages that inspired me to finally do something interesting with my own 404 error message.

Having lived in Atlanta (area code 404), I initially set out to do something that played off that. (I know, very original. I just wanted to make sure not to settle for “Tha 404.”) But it wasn’t long before my roadgeek tendencies kicked in and I thought of something even better.

Here’s my 404 page. (The image at right is a spoiler, of course.)

The sign image is (mostly) my own creation in Photoshop: I swiped the shield images for I-16 and Georgia 404 as SVGs from their respective Wikipedia pages, and the font is courtesy of another roadgeek. Whenever I start to question myself, I am reassured that there are others out there even sicker than I am.

Incidentally, there really is a Georgia 404, although the only place you’ll see a sign for it is on a small spur route near Savannah. Georgia’s Department of Transportation has a funny little quirk in that it has given all freeway-grade roads a state highway designation in the 400 range. (I suppose the “4” indicates 4 or more lanes.) As far as I know (and as this PDF from the GDOT website seems to confirm), there’s only one road in the system for which this is the main designation, however: Georgia 400, which is a main commuter artery running north (well, northish) from Buckhead out to the north-central suburbs and beyond into Deliverance country, since both I-75 and I-85 veer off diagonally out of the city (into the northwest and northeast suburbs and beyond into Deliverance country).

All of the other freeways in the state have a “4xx” designation too, but there are generally no signs indicating such, because they all also have a familiar designation, usually an Interstate number.

As it happens, Georgia 404 is better known as I-16 (hence the double shields on my sign image), which, interestingly enough, is not really “interstate” even though it’s an “Interstate”; it starts in Macon and ends in Savannah.

The incredible ever-changing page background

Here’s more stuff that web designers might find interesting and everyone else will find either irrelevant or won’t even notice.

I kind of liked the abstract image I had as the background of the pages in this new site design (which, if you’re interested, can still be found on my IE6 users’ “welcome” page), but I was never completely satisfied with how it was just shoved into the upper left corner of the window. So I took a horizontal cross-section from a very colorful portion of that design, stretched it out into blurry vertical stripes, and made it the new background.

But, you may notice, there’s a bit more to the background than that. Once again it’s the magic of PNG alpha channel transparency at work.

The background of this page is actually the product of 3 separate images (a JPEG at the “back” and two transparent PNGs over it) overlaid on top of each other. In the bottom layer is the aforementioned blurry multi-colored vertical stripe image (JPEG). It’s 1600 pixels wide by 20 pixels high, tiled.

Next above that is my “Close to the Edge” image, a gradient from the teal of my color palette (at the bottom) to transparent (at the top). For a while I toyed with simply using this as a teal-to-black gradient, and I have to say it looked quite nice, but there’s not enough else going on visually with the design of the page, so a solid black band at the top of the page came off a bit boring. So, the gradient as an overlay on the stripes. This image is 50 pixels wide by 600 pixels high, and it’s fixed to the bottom of the window and tiled horizontally.

Above that is the (probably overused) “NTSC scanline effect” image, which produces the horizontal stripes. Unnecessary and as I said, probably overused, but it’s still kind of cool looking. Or would have been in 1998 at least. Call me old fashioned, if you think 1998 is old. (OK, in the web world, it’s ancient history.) This is a 20×20 image, also tiled.

So, how does this all fit together? Well, the way I do it is by applying the JPEG to the <body> tag, which is immediately followed by a pair of nested <div> tags that fill the window and exist for the sole purpose of overlaying the other background layers. Then inside of that, the rest of the page’s HTML appears as normally.

Looking at it precisely, the CSS file contains the following:

body {
  background: #000 url(“images/body_bg_stripes.jpg”) top left repeat fixed;
  margin: 0;
  padding: 0;
}
#body_overlay {
  background: url(“images/body_overlay_bg_ctte.png”) bottom left repeat-x fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#body_overlay_2 {
  background: url(“images/scanlines_25_black.png”) top left repeat fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

And the HTML for the pages follows this basic structure (with lots of stuff cut out in this example, of course):

<html>
…HEAD TAGS HERE…
<body>
<div id=”body_overlay”>
<div id=”body_overlay_2″>
…PAGE BODY HERE…
</div>
</div>
</body>
</html>

What’s really cool about this is that it results in a background pattern that, as a single image, would need to be at least 1600 pixels by 600 pixels (in other words, very large in both dimensions and file size), and even then it would not be able to achieve exactly what you see here because the gradient is fixed against the bottom of the window. In fact there’s absolutely no way to produce the background of this page without transparent PNGs. The 1600×600 image would easily be a few hundred kilobytes at a fairly low-quality compression level — far too big to justify, especially since it would still end up looking like crap. But as it is, the three images are 6857, 135, and 714 bytes respectively — less than 8 kilobytes combined. Sweet! (OK, it’s pathetic that I think something like this is “sweet,” but there it is.)

Microsoft does well by their customers… and even better by their non-customers

I was curious to read today about Microsoft’s new Windows Genuine Advantage changes coming in Windows Vista Service Pack 1.

The current draconian system of locking down machines that appear to be running pirated versions of Windows has not been well received, apparently, especially a few weeks back when a buggy update was released prematurely and left thousands of “genuine” customers without working copies of Windows. So Microsoft is softening the approach, as described in the article linked above.

In the new version, PC users found to have a pirated copy of Vista will continue to be able to use their computers, but with unmistakable signs their operating system is a fake. The desktop wallpaper will turn black, and a white notice will appear alerting users to the problem. Each time they log in, they will be prompted to buy legitimate software, and every hour, a reminder bubble will appear on the screen.

Users with a high tolerance for irritation can put off switching to genuine software indefinitely, but those who relent and buy a real copy of Windows can do so at reduced prices — $119 for Windows Vista Home Premium, half the regular retail price.

OK, well that does seem to be an improvement, but… wait a minute! Read that second paragraph closely. Surely it can’t mean what I think it means, but it sounds like what they’re saying is that if you pirate Windows first, and then after enduring the automated nagging for an indefinite period of time, you’re entitled to buy Windows for half the regular price paid by loyal customers who purchase a legitimate copy up front.

Well, at least it’s consistent with Vista’s backwards approach to system security. (Throw up excessive warnings to the user about nearly everything they’re about to do, but don’t actually restrict their access to those things based on permissions.)

Still wish you were using Internet Explorer 6?

If you’ve never visited this site using Internet Explorer 6, you probably are unaware that up until now doing so would load a big ugly alert box explaining how foolish you were being to do so — being that I am an arrogant Mac and Firefox user, not to mention that IE6 is dangerously insecure (besides not supporting alpha channel transparency in PNG images, which are the building blocks of this site’s design).

Today I had the chance for the first time to see just how horrible the new design looks in IE6, and as much as I don’t want to support that browser, I also couldn’t handle thrusting visitors into the hideous mess of this site in IE6 without at least giving them a taste of what it’s supposed to look like first. To that end, I’ve created a more friendly “welcome” page for IE6 users, giving them one last chance to upgrade before proceeding, and in the process showing them a hint of the site’s actual design as it’s intended to appear.

But of course, since you’re not using IE6 (are you?), you have no idea what that page looks like. So, I thought I’d show it off a bit. Here it is. Enjoy. Or not. Actually, it’s not really intended to be enjoyed, so don’t. (I’m really only posting this link so I can test the HTTP_REFERER link functionality I embedded in it. [And yes, I know the correct spelling is “referrer.” Tell that to whoever created the names of the HTTP host headers. I mean whomever. So there.])

This proves my theory!

Further knocking Apple down from its pedestal (not that I’m not still a rabid fanboy as mentioned in the previous post), we have this further proof of my theory that although Steve Jobs usually has impeccable instincts, once he gets something stuck in his craw, no matter how outlandish it is, Apple simply must go through with it.

I’ve been thinking this a lot in regards to the grand trilogy of Leopard GUI design decisions that have been widely criticized by the world of Mac users (including myself): the translucent menu bar, the 3-D Dock, and the Stacks icons. But now here’s some proof that this really does go on (if you accept it as proof, which I do in this case), from the hardware side. The left side, to be specific, of the current MacBook line. I happen to be sitting in front of one right now, and I can vouch for this. The left side is “squishy,” right where those two screws are. They’re clearly not attached to anything! Therefore, they must be purely cosmetic.

Which is pretty ridiculous, when you think about it.