Site Change Pending – Welcome to 2011

I managed to break this site the other day when the theme I’m using (Freshy 2) decided to use a different set of options. I obviously triggered it somehow, but I’ve no idea how – and then it all got confused about which options and CSS adjunct to use, and didn’t want to work with the customize plugin and… yeah, it all went a bit Pete Tong. Given that the Freshy 2 theme is unsupported and doesn’t really work that well past WordPress 2.7 (which is pretty legacy), it’s no wonder strange things have been just waiting to occur, but I’ve got it back to a semblance on sanity (as you might be able to tell since you’re reading this, and noticing it doesn’t look a million miles different from before – apart from comment threading, promise me you won’t look!). I even backed up the entire www folder three days before it all went to hell, but when I restored the backup it’s still shafted, so the Freshy options must be stored elsewhere (like in the database somewhere)… but anyway, I digress; it’s time to shake things up.

Kicking and Screaming

I started reading about CSS3 the other day, and began knocking up examples of all the cool things you can do with opacity and 2D transitions and stuff – and it’s awesome. I had absolutely no idea you could do such cool stuff without JavaScript or Flash, and if you apply it to the experience layer (as opposed to the core functionality layer), then even if people are viewing your site in older browsers it can gracefully degrade and leave those running some archaic IE variant none the wiser that should they be seeing the site in Chrome or FF5 or such it’s got a lot more swish. I might even try some HTML5 shenanigans…

This isn’t going to change the core content for the better (sadly), but if the medium is truly the message, then perhaps by giving the medium an overhaul and a good lick of paint I can emphasize the message to a certain extent.

I don’t want to even think about how much time I could waste on 3D transitions… the sky’s the limit, ya know?

Stepping Up

So, to get the site all sorted, I have a (not especially cunning) plan:

  1. Get an offline version of the site running locally so I can twiddle the hell out of it. [COMPLETE]
  2. Rip the Freshy theme to bits, and combine all the CSS and CSS adjucts (which get pulled in and override the core styles) into a single CSS file. [COMPLETE – 2011-08-08]
  3. Remove all the cruft from the Freshy CSS and PHP. And there’s a lot of it. Tons. [96% COMPLETE 2011-08-10]
  4. Rewrite the core layout utilising CSS3 and perhaps HTML5 elements to make it look beautiful. [60% COMPLETE 2011-08-09]
  5. Bask in the radiant glory of a modern, dynamic website. [PENDING]
  6. Write good articles =P [ARGUABLE]

Speaking of which, I’ll write an article on getting an offline version of a site running soon – it actually took me a couple of hours to get everything installed, configured, database suitably modified (to keep me on the local copy at all times) & imported into MySQL etc. But now I have, I don’t have to do surgery on a live site, and can thus afford to break the hell out of my local copy, because things tend to get a lot worse before they get a lot better, and this version will still be up and running in 99% “good enough” mode.

Honestly though, CSS3 is amazing – check it out. I can’t wait to see what I can come up with =D

HTML: Image Maps Are Easy!

I hadn’t made an image map in a long time, and had to revisit them for a class I’m teaching – and they’re well easy! An image map, if you didn’t know, is a method of defining regions of an image which can be used to link to things i.e. you create a series of “hot-spots” on an image. Here’s a simple example of how it works using circle, rectangle and polygon definitions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
	<title>Image Map Exercise</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<map name="MyImageMap">
		<area shape="circle" coords="84,100,63"	href="javascript:alert('You clicked on Earth!');" title="Earth!" alt="Earth" />
		<area shape="rect" coords="197,33, 366,167" href="javascript:alert('You clicked on Space Invaders!');" title="Space Invaders!" alt="Invaders" />
		<area shape="poly" coords="468,10, 421,70, 457,122, 450,171, 510,171, 513,125, 524,107, 527,80, 535,65" href="javascript:alert('You clicked on the mighty Gaming Fist!');" title="Gaming Fist!" alt="Fist" />
		<!-- You can omit this one if you want the default behaviour for the mouse on the rest of the image to do nothing.. --> 
		<area shape="default"	nohref="nohref" title="Nothing to see here..." alt="Default" />
	<div align="center">
		<img src="ImageMap.jpg" alt="An example image map" usemap="#MyImageMap" />

Which gives you this:

Earth Invaders Fist

An example image map

The different area type parameters break down like this:

  • circle area type: centre x coordinate, centre y coordinate, radius
  • rectangle area type: top-left x coordinate, top-left y coordinate, bottom-right x coordinate, bottom-right y coordinate
  • polygon area type: just a series of x and y coordinates

To find out the co-ordinates you want to use, it’s easiest to just open the image up in a paint package like the GIMP, and put the mouse cursor over where you want to get the mouse coordinates of – in the GIMP they’re displayed in the status bar at the bottom on the left, in Photoshop you need to open the Info window (shortcut: F8). Note that in Photoshop you might need to change the units from cm or inches or whatnot to pixels via Edit | Preferences | Units & Rulers.

Photoshop Units And Rulers

If you want more information, there’s a great tutorial on the topic here.