redesigning Low-Key pages

I've not been posting much here lately... all my train commute time and morning sipping tea time has gone towards updating the Low-Key Hillclimb pages. After using the same basic design 2006-2009 (and retroactively applied to 1998, which I regenerated), it was time for a rework.

My HTML skills are so behind the times. I'm trying to force myself to get away of such things as <font> tokens and move towards style specifications, preferably with classes. But it's always tempting to just "get it done".

The style approach is different: the old HTML approach was functionally based: you don't specify what font style or size you want, you just specify relative font sizes, and text was tagged with such functionally-inspired elements as <em> or <strong>. It was up to the user to set his browser to render these as he prefers. On different terminals, these preferences might differ.

But Microsoft basically went after this philosophy with a wrecking ball. Microsoft's preference was that everything look good on Explorer, and on everything else, the uglier the better. Microsoft wanted web designer to design to Explorer: let the competition struggle to keep up.

So now, there's more "policy" in web design. Specify particular fonts, particular point sizes. It's not just "mechanism" any more.

So I'm coming around. One thing I do like about the style/class approach is it's more hierarchical. No longer does one need to specify the specific characteristics of each element in a table, for example. That can be more generally handled by the class assigned to the table, rows, or elements. It makes the code for the table much cleaner.

For other things, it's a but puzzling, though. How is <span style="font-weight:bold">...</span> better than <b>...</b>? Help me here.

And I don't particularly like specific font specification. I wanted a "horror font" for the steep climbs. There's so many horror fonts on the web, but none are annointed as universal by Microsoft. What I really want is to be able to say "find a good horror font on the client's machine, and use that." But that doesn't seem to be possible.

So instead I had to convert the text elements I wanted rendered in a horror font into PNG files (deftly handled with ImageMagick with pngquant for color distritization). Here's my code for generating climb names:

#! /usr/bin/perl
use strict;
use data;

our %class;
our %climb;

my @weeks = grep { $class{$_} eq "steep" } keys %class;

for my $w ( @weeks ) {
  warn("processing week $w : $climb{$w}\n");

  # kluge: remove space surrounding puncturation
  (my $climb = $climb{$w}) =~ s/\s+([\-:,])\s*/$1/g;
  
  my $command =
    join("",
  (
   "convert -size 800x128 XC:transparent ",
   "-font /usr/local/share/fonts/truetype/" .
   "ttf_zombieholocaust/Zombie_Holocaust.ttf ",
   "-stroke '#00000099' -fill '#33000099' ",
   "-pointsize 80 ",
   "-gravity center ",
   "-annotate +3+3 '" . $climb . "' ",
   "-blur 8x0 ",
   "-stroke '#000000' -fill '#dd0000' ",
   "-pointsize 80 ",
   "-gravity center ",
   "-annotate +0+0 '" . $climb . "' ",
   "-scale 50%x40%  ",
   "-trim ",
   "png:- ",
   "| pngquant 64 >",
   "web/week$w/climb.png"
  )
 );
  warn("$command\n");
  system($command);
}

The font used here is from Sinister Fonts.

Anyway, more work to do: nitty gritty details and I need to integrate how to include results. But I don't need to worry about that 'til much later. First climbs is Montebello on 2 Oct.

And I still need to do an "all-time records" page. More to keep me busy on future train rides.