I made a colophon.

What is a colophon? In book publishing terms it's the page that has information on author, title, publisher and dates published/reprinted. In web terms it gives information on the systems and resources used to create and maintain a website, like what software, hardware, scripts, servers and other "interesting" tidbits.

Basically, it's the long winded and really-boring-unless-you-get-the-inside-jokes credits page. The type to sit through to the end of a film to see who was second second second unit director? The type who would understand.

It's really more self-congratulatory than informative. It's cute, if you're into that sort of thing.

How does it sit with the faq? Kinda side by side but with a fair bit of overlap. The faq has a more edgy tone, the about page is more dry.

I re-did the homepage. Again.

Same stylesheet as before, ie left sidebar and main content area.

I rewrote the preamble, still not happy with it. People coming to the homepage for the first time isn't likely to know what the hell's happening by reading it, but it's the best I can do. The body text follows the blogbody style instead of the more obvious bodystyle, so links actually show up. I've tried to incorporate links to the rest of the site in the write-up.

Didn't want to make the weblog the front page, because the question is, which weblog? Quiet thoughts? Shiny parts? Or the semi-static pages?

I did want to highlight recently updated weblog content though, so the most recent entry shows up on the homepage. So I used the php include trick I just learnt.

Step 1: In each of the weblogs I want to hightlight, I created a new index template and called it highlight.inc.

Step 2: I used the code on the main index that relate to the entries as basis, adding the attibute lastn="1" to the MTEntries tag, so I'm only capturing the last entry made in that weblog. I wanted to also keep the information about when the post was made and into which category. I ended up with a text file:

<MTEntries lastn="1">

<h3 class="title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>

<$MTEntryBody$> </$MTEntryBody$><br />

<div class="posted">
Posted at <a href="<$MTEntryPermalink$>"> <$MTEntryDate format="%x"$></a>
in <MTEntryCategories glue=" , "> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
</a>
</MTEntryCategories>
</div>

</MTEntries>

Step 3: In the homepage I used a simple code to include the highlight, so for quiet thoughts:

<? include "/home/invisibl/www/www/quiet/highlight.inc"; ?>

Step 4: Repeat for shiny parts.

I'm basically going to use MT to power the semi-static pages like the writing pages, the gallery and travels section.

First thing after creating the new weblog is to delete the date-based archives. I can set "posts" to display according to alphabetical rather than chronological order. In the main index template where entries are displayed set the rules:

<MTEntries sort_by="title" sort_order="ascend">

For innermost room I have:

Categories = sections
Entries = pieces

I don't have long pieces that need to be split up, so it's ok to stop at that level. Displaying category archive pages end up showing all the entries, but that's no big.

For hidden doors I have:

Categories = stories, category descriptions is where the rating, summary info is held
Entries = chapters, summary of each chapter in the excerpt

I set the category archive so the excerpt is displayed with each chapter rather than the entire chapter. Where MTEntries normall go, replace with:

<$MTEntryExcerpt$>
</$MTEntryExcerpt$><br />
(<MTWordCount> words)

Oh yeah, I downloaded this nifty plugin that counts words in each entry.

For gull's way I have:

Categories = country
Entries = trips

I don't even need subcategories. Well, not yet anyway.

I learnt how to do php include today. I created a new index template to hold the code for the sidebar so I don't have to change it on every template.

Think of the includes as building blocks for the website. An include is just a text file that has whatever I want in that block. I have different includes for the main sidebar, section sidebars, admin, buttons and menu bar. The sitewide includes are all in one folder.

For instance where I want to put the main sidebar I put:

<?
include "/home/invisibl/www/www/includes/sidebarmain.inc";
?>

And it shows the rotating image, about links and the main page links.

The biggest advantage is if something changes all I need to do is change one file rather than every page that it appears on.

I'm getting a real kick outta this.

Useful resources for a fledgling web designer learning css.

w3c - lays down the law

w3c validator - and checks you've done it right

reference sheet - easy one page guide

panic guide - additional resources

glish - examples of tableless page layouts

bluerobot - more layouts

a list apart - regularly published articles on web design

css zen garden - fixed html, variable css, watch the masters at work

If there are standards it's worth following them. Consistency and compatibility are the buzzwords here.

I deleted the stylesheets for the individual sections, created during the Create New Weblog process. All pages link to the site stylesheet now.

Which has been validated. I got a big grin on my face when the validator came back with "Congratulations! This document validates as CSS!"

There's even an icon to go with it, it's like receiving a certificate after going through an obstacle course.

From everything I read about web design, tables as layout has become a dirty word. It was the thing to do a few years ago, to use tables for formatting because, yes, they gave some degree of control. And it's easy to visualize on the page.

I knew enough to put formatting in css, like font properties, color, background. But I didn't know how to use css to define positioning. Until now.

And hence begin the conversion exercise.

A simple display page

My gallery pictures used to sit in a grid with 3 columns and 3 rows, with all the tr and td tags well defined by width and height attributes. The top row contained the title of the page, the middle row with picture itself plus the description, and the bottom row for navigation. Logical when I first did it.

Step 1: I removed the table elements completely. The main content area is defined by #content and .body tags in css that specify the container's position on the page. The left margin of the image container is set so it sits near the middle of the browser window.

Step 2: I added a .floatcenter property in css and applied it to the image.

Step 3: The text also gets floated.

A 5x5 grid

So now I've discovered how useful the float tag is, I'm can tackle the 5x5 grid on the personal page. Originally it was a nested table, 5 rows by 5 columns, with dimension for each cell at 100px. It was done using loads (and I mean loads) of tr and td tags, each fixed by width, height, alignment and class definitions. A nightamare to maintain and as I found out, not as fixed as I thought.

I debated keeping it as a table but I want to see if I can use css. And I can!

Step 1: I set a new class that defines a box 100x100 with 2-color borders which floats to the left.

.box100 { float:left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #999999; margin:1px; padding: 4px; width:100px; height:100px; border-width: thin; border-style: solid; border-color: #CCCCCC #999999 #999999 #CCCCCC; }

I know according to strict css rules I shouldn't be using height but for because it works I'll leave it for the time being.

Step 2: I like to have the title in bold, but on the same line as the text. So I used the smalltitle class.

.smalltitle { font-family:verdana, arial, geneva, helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #666666; }

Step 3: In the html each cell is defined by a <div> class:

<div class="box100"> <span class="smalltitle">to do list</span> pay bills, put pictures up on walls, plants </div>

Step 4: Finally to separate the rows I used a <br clear="all" /> tag.

Probably not the most elegant, and I dread any proper web designer reading through this. But it seems to work. So I'm kinda happy.

I've been reading obsessively on web design and realized one thing: the site has been designed wrong. Not all wrong, but a lot of wrongs. Things I seemed to have done right, mostly by accident:

• used css, albeit on a limited basis
• planned the site structure before starting
• only one frame in over 140+ pages and that's because it's necessary
• white background, simple color scheme
• emphasis on content, even if it means a page full of words

Things I haven't done right:

• there are tables everywhere
• css not extensive enough, and why have 3 different stylesheets?
• too many design elements still in the html
• fixed widths, heights, font sizes
• not tested enough on all platform and browsers
• tables.tables.tables

The message I've been getting is, get rid of the tables and separate design from presentation. Which boils down to go learn css and do it NOW. I spent the past 2 months cleaning up the code and fixing the tables, and now I've got to start all over again.

I knew enough to use css for formatting, like defining different types of text attributes (font, size, color, bold/italic etc), background and even a little table layout. Well, it's not that I knew, these were the default css styles that came with Dreamweaver. By looking through other people's codes (my how useful that View Page Source command is) I figured out how to format links. But that's about it. So how?

Luckily, I had help. The MT application came with its css, and although it wasn't what I wanted, it gave me a good place to start from, I mean it's way easier to change what other people had done rather than start from scratch. I ended up adapting Elise's stylesheet at Learning Movable Type.

I also borrowed Eric Meyer's book from the library and surfed around for resources. I'll list out the resources at a later post.

I took the stylesheet I came up with for quiet thoughts and used it on the homepage. Et voila! Instantly better looking. No longer looking like something hacked together by typing monkeys. Everything in their place. I know exactly where the content area is, where the sidebar goes, how far away from the top margin the banner is. Such control.

Instead of using tables for layout, I use <div> and <span> tags. Every time there is a change in element, put in a new <div> class.

So now the html can concentrate on page structure. The html looks prettier too, I'm listing out block element by block element, remembring that container comes before sidebar in the markup, but that's the only thing.

So much so that I tend to use the code view more now, leaving design view for checking how the page looks.

Like that new McDonald's ad says, I'm lovin' it.

I don't have enough images on the website. Coming from someone who has 330 files in their images folder and only 140 pages that may sound a wee bit strange. Cos you figured, that's averaging over 2 images per page. Not a lot by web standards, but not to shabby either.

Let me rephrase. My images aren't distributed evenly over the website. That kinda makes sense, after all, pages like the gallery and travels need pictures, and the writing pages don't need many.

Nevertheless, it'd be nice to have some color on the pages.

On most level 1 pages (that's the first level down from homepage) plus all of the weblog-powered pages I have this 120x120 image at the top left. Back in html days, I used one image as signature to each section:

homepage

faq

personal

innermost

hidden doors

delicacies

I don't take a lot of photos, and most of them aren't any good, so as I was creating new sections I began to run out of nice photos to use. Plus they get a boring after a while.

With conversion to php comes the first advantage. I'm now able to generate a random image. There are lots of free scripts for this, I googled and found more than 10 at first pass. The one I'm using comes from Dan Benjamin. It's simplicity in itself.

Step 1: I saved the images I want to rotate in a separate folder in my images folder. I chose 12 images (hence "the random dozen"), my only criteria was that they were all square, which excluded a couple of favorites, but I'm happy with the selection. I noted the path of this folder: "/images/rotate".

Step 2: I downloaded the script and saved the php file in the same folder as the 12 images.

Step 3: Since the script and images are in the same folder, and I don't forsee displaying images other than jpg, gif or png, I didn't need to make any changes. Had I so wished, the instructions in the script are clear enough.

Stap 4: Where I want the random to appear, I put in this html:

<img src="/images/rotate/rotate.php" alt="the random dozen" width="120" height="120" />

To see the effect, refresh the page a few times and the image below will change.

I kept the changing Macs here on shiny parts but the randomizer is on most of the other pages.

So I made a banner that sit on the homepage, a simple animated gif.

Step 1: Create a photoshop document size 750 x 100px, background blue #003399, logo font Frutiger 55 Roman in white.

Step 2: Duplicate that layer.

Step 3: Create a new layer that is pure blue background. Put this layer in between the 2 logo layers, so it goes:

• Layer 1: with logo
• Layer 2: background only
• Layer 3: with logo

Step 4: Open in ImageReady. Use the Tween command and add 20 frames between layers. Set the initial frame at 2sec and the intervening frame at 0sec. Set repeat at Once.

Step 5: Save as gif. The end result is an animated gif of 43 frames with text that fades into the plain background and fades back to view.

The same approach for the other banners on level 1 pages, except instead of fading to pure background, I have the section heading constant throughout the layers.

I'm using MT to power shiny parts, so updates are in weblog format. I created a new weblog in the MT edit menu and copied the templates over from quiet thoughts. I'll also be moving the technical entries over from quiet thoughs to shiny parts. While I'm at it I'm switching the pages to php.

There will be a few pages within shiny parts that are not inside MT, like the sitemap, siteplan and old homepages. They'll just sit in the folder.

Yet another page converted to php and, look, no tables!

I've been reading up a lot on MT, CSS, php and learnt a great deal. Some people power their entire website on MT. I've decided not to do that 100%, because some of it doesn't sit in a weblog interface environment. Also I have Dreamweaver, and I'm beginning to handcode some pages, so I don't need to rely solely on MT. Even though I think the people who do use MT all through their sites do so because they are so good at it.

The biggest advantages are: consistency, structure and the ability to update using a web interface. I like it.

But as usual, once I discover something it changes and something which may be perceived to be better comes along. Just after I get properly started on MT, and I'm on MT 2.661, they announce MT3D, a developers edition of version 3. Lots more new stuff, but at a price. They've just today announced they are revising the pricing structure, still it's $70 for a personal license, that provides support and is limited to 5 authors. It's a better deal than the first pricing proposal, which limits the number of weblogs also. If the no. of logs are limited, people like me won't then have the luxury of using one log per section.

Then after reading up more, I discover WordPress. Sigh. Just great.

I made some changes to the templates today, cos I learnt a bit more about plug-ins. All of this with much help from Learning Movable Type.

My god I have to much to learn.

As a reminder to myself, here's what I did.

1. category archive

To put a menu at the top of the category archive that points the readers to the previous and next category, I got a plug-in from bradchoate.

After installation, add this to the category archive template:

<div id="menu"> <MTCategoryPrevious> <a href="<$MTCategoryArchiveLink$>"> « <$MTCategoryLabel$></a> | </MTCategoryPrevious> < a href="<$MTBlogURL$>">Main</a> <MTCategoryNext> | <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> »</a> </MTCategoryNext> </div>

2. blacklist

Then I got the mt-blacklist plug-in from jayallen. It's dead easy to install and configure.

To maintain, execute from here:

http://invisiblecompany.com/cgi-bin/mt/mt-blacklist.cgi

3. comments & trackback files

Renamed mt-comments.cgi to mt-cmts.cgi, similarly mt-tb.cgi to mt-tbk.cgi and changed mt-cfg.

Replaced:

# CommentScript mt-comments.pl
# TrackbackScript mt-tb.pl
# SearchScript mt-search.pl
# XMLRPCScript mt-xmlrpc.pl
# ViewScript mt-view.pl

with (don't forget delete the #):

CommentScript mt-cmts.cgi
TrackbackScript mt-tbk.cgi
# SearchScript mt-search.pl
# XMLRPCScript mt-xmlrpc.pl
# ViewScript mt-view.pl

4. close comments

This plug-in from rayners that closes comments and pings for entries x days old.

To maintain, execute here

http://invisiblecompany.com/cgi-bin/mt/mt-close.cgi

Hey it's fun to be a beginner.

I moved all the tripod weblog entries over here, painstakingly, manually. So now I'm on Movable Type. Cool.

For the website, conversion to xhtml is complete, but there's a whole lot more work to be done on formats and stuff. Next project is to convert to php, of course.

Content-wise, I'm adding to recipes, and need to start working on the food & drink pages. Writing on both innermost room and hidden doors continue.

One step at a time, right.

I submitted a couple of entries to the mirror project which is a community of people who take pictures of themselves in reflective surfaces. The idea was started by Heather Champ in 1999 and there are now over 23,000 entries.

As for my meagre two, I added those entries to stained glass window. On the mirror project they are 23167 and 23364 respectively.

Criteria for mirror project:

• jpg only
• less than 30k
• max 300px on any one side
• min 120x90 / 90x120
• minimum touch up

My added criteria - that although I'm in the picture, I have to be unrecognisable. Hee.

Added a sitemap. List of every page on the website by section. With links. Not to be confused with the siteplan, which is the hand drawn design.

140+ pages. And I made them all myself. Wow.