Sunday, October 10, 2004

Keyboard navigation on Original, CSS rant

I finally managed to fix the remaining issues in my modified original, and as a bonus I added keyboard navigation on the preview screen.

Keyboard navigation makes it soooo much handy to skip to the next/previous photos, but I wondered for a while about how to inform the user that she can use the keyboard, as right now, keyboard navigation on the web is so underused, that it even feels weird to just press the right arrow to skip to the next picture.

I decided to add little explicit hint on the webpage saying that you can use the arrow keys, and to make it disappear when the user starts using the keyboard. All that coupled with a little bit of javascript magic to store if we should show the hint in a cookie, and we're done.

While I was at it, I also removed the alternative stylesheets, because it made the code that managed the cookies a bit harder, and I wanted to remove them anyway, as I didn't know how well they played with the new html.

I will call it a day.

Oh, I almost forgot...

I am, as anybody, jumping in the CSS bandwagon. Pages are smaller and presentation is much more separated from HTML than when you layout with tables.

But it certainly is not the best thing since sliced bread.

The whole goal of CSS is to be a language where you can specify the layout and the look of HTML elements. It fails short on the look part, and it's a disaster on the layout part.

While you can certainly work out alternative layouts to a web page (Zen Garden probably being the famoust example), the language is certainly not stellar at doing it.

I will bet that, without reading in Internet how to do it, and with a good knowledge of CSS, you will not be able to layout a simple page, with just a header, footer and a left band. In fact, the best you can do is something that looks like this layout, carefully using a background image on certain areas to give the impression of this layout to the user.

Thing are so bad, that you will even have to change the logical HTML, adding some spurious div's to make it work on all browsers. If I find something like this in a computer program, I will call it on a blink of an eye a hack.

These layouts (2 columns, 3 columns, etc.) are so hard to discover, that when you come with a way to do it, you're internationally aclaimmed, articles are written and much (virtual) ink flows about it. And that's the thing CSS was supposed to do so well.

It is embarrassingly easy to do the same layout using (horror!) tables.

On the look side, things definitively look better. You can change
much easily than before the look of your page using HTML, but it also makes it ring a bell in my head when I see the proliferation of ad-hoc'ist pseudo-classes in CSS, to specify the dynamic look of some elements to get a pale imitation of what we can do right now with JavaScript (and I will be complaining much harder if cross browser JavaScript was less painful).

Friday, October 08, 2004

More fun with Original

In the comments of a history(link?) on slashdot about google, somebody explained how gmail manages to change its contents without reloading its page.

The trick is to do http requests with JavaScript, using the XmlHttpRequest object.

That got me thinking about the possibility of speeding a little bit my photo album.

When you click a photo in one of my galleries, you end on a page with the selected photo centered, and with two thumbnails in the two sides of the photo, to navigate to the next/previous photos.

A typical behaviour would be to see one photo (and that takes a few seconds), and click on the “next” thumbnail to see the next photo. When you click, you are not anymore interested in the current photo, and you have to wait until the page with the next photo loads in your navigator. Surely enough, this time will be dominated by the time to load the next, big, central image (plus any fixed delay determinated by your ping).

My idea is to preload the next and previous images just after the page is loaded, that is, in the few seconds the user needs anyway to appreciate the current image. When the user will click on the next thumbnail (or the previous one), a little bit of javascript will change the central image by the next (previous) image, that has already been downloaded. This operation is very fast compared with the time that takes to download the image.

The end result is that the user can navigate to the next/previous photos without any appreciable delay (at least, if they really look at the central photo), making it a snappier experience.

Needless to say, that makes the code a bit trickier, and I had to remove some hardcoded (read calculated by php) widths and heights, and that breaks the havoc of FireFox (there was a remaining bug in my page, FireFox was just doing what I said him to do, not what I wanted him to do).

In the TODO list, fix some remaining javascript errors, remove the previous and next thumbnails if there is no previous or next thumbnail to show and make it play better with FireFox.

Wednesday, October 06, 2004

Old photos

I've published a few of my old photos. It's quite rewarding to look at these photos that you have the habit to see only on paper on a web page, and it's cool to be able to show them to peers just when they want to see them.

For the record, they are available at:

In case you're wondering, I've done the galleries of photos with Original, but as these days I seem to be trapped in a windows box, I've redone the scripts that resize the photos with a little C program using GDI+.

While I was tweaking it, I also changed a little bit the server side of original.

I changed the CSS to correctly center the images when you're viewing them in IE. The original CSS only managed to center the image on IE if it was 640 pixels wide (due, of course, to an IE bug).

I also did gray version of the thumbnails, to use the same effect that was only available on IE browsers through a filter (ie. color thumbnail on mouse over, gray on mouse out).

That reminds me that I should get my act together and send jimmac my changes. Who knows, he may even be interested :-)