I remember looking for, and finding a solution to embed a quicktime movie to the website. So today I was playing around with ringtones, found some and wanted to post on the website, I needed to find a way to embed mp3s. Of course the quicktime method works too, all I’ll have is audio but not video.

There are many ways and many online players. This from, of all places, the google blog, is a 10 second cut and paste. All I needed to do was replace [mp3 file address] with the url of my uploaded mp3.

<embed src= “http://www.odeo.com/flash/audio_player_standard_black.swf” quality=”high” width=”300” height=”52” allowScriptAccess=”always” wmode=”transparent”  type=”application/x-shockwave-flash” flashvars= “valid_sample_rate=true&external_url=[mp3 file address]” pluginspage=”http://www.macromedia.com/go/getflashplayer”> </embed>

There are several styles of players — they’re not fabulous, but get the job done. Supposedly we have to sign up and go to our profile page to select the player, but I found that by going to studio.odeo.com, selecting one of the featured people and clicking the link that says “embeddable player” will bring me to the page with a selection of players. It’s just a matter of changing the mp3 url and twiddling with bits of the code if necessary.

I’ve been working on implementing tabbed navigation. Using the sliding doors method gave really elegant results, but I had problems with the placement fo the tabs. First I put it underneath the header, but somehow their position ended up being absolute, and didn’t move when the window is resized. Placing it inside the header beneath the title description looked nice in firefox but I ran into problems with stupid IE. For a brief moment I thought about ignoring the IE anomaly but since I’ll have to look at the website at work, I know I’d be unhappy if I didn’t improve on the design.

The simplest solution, as of today, was: 1) not to use fancy rounded edge tabs and 2) place the tabs immediately above the content container rather than near the header. While I was at it, I put a light blue dotted border around the content container.

The html for the tabs is easy, all the items in an unordered list. I had to do a different list for each section, to distinguish between the current tab and the others.

<div id=”tabs”>
<ul>
<li><a href=”http://invisiblecompany.com/”><span>home</span></a></li>
<li><a href=”http://invisiblecompany.com/hidden%20doors”><span>words</span></a></li>
<li><a href=”http://invisiblecompany.com/gallery/simpleviewer”><span>pictures</span></a></li>
<li><a href=”http://invisiblecompany.com/gullsway”><span>places</span></a></li>
<li><a href=”http://invisiblecompany.com/taste”><span>taste</span></a></li>
<li id=”current”><a href=”http://invisiblecompany.com/shiny%20parts” id=”active”><span>technical</span></a></li>
<li><a href=”http://invisiblecompany.com/about.php”><span>about</span></a></li>
</ul>
</div>

The css turned out to be straight-forward too, though I spent a lot of time fiddling about and reading all sorts of different approaches. First, take out the list style and define the method of display as block. This puts the text in a nice block so I can add colours and borders.

#tabs {
float: left;
width: 100%;
margin-left: 5px;
}

#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}

Then define the li elements — colours, text-decoration.

#tabs ul li {
display: block;
float: left;
padding: 0;
}

#tabs ul li a {
background: #85d6ff;
color: #fff;
text-decoration: none;
display: block;
margin-left: 1px;
margin-right: 1px;
padding: 0 20px 0px 20px;
}

Finally, define different behaviours for hover and for the current tab.

#tabs ul li a:hover {
color: #006699;
}

#tabs a:active {
background: #008fd6;
color: #fff;
}

#tabs li#current a {
background: #008fd6;
color: #fff;
}

We were talking about these quizzes where you enter your name and it displays silly, sometimes downright rude names. For instance prison bitch name.

I found a lot of scripts around, but this one from Generate your wu-name uses php and is the neatest.

I put it in under delicacies, I think I need some more entries there. Since even delicacies contents are in MT, I created a post that had this code:

<form action="<?=$SCRIPT_NAME?>" method="POST">
<p><b>Enter your Name: </b><br>
<input type="text" name="realname" size=35> &nbsp; &nbsp;
<input type="submit" value="submit">
</p>
</form><br />

<?
if ($REQUEST_METHOD == "POST")
{
$displayname = $realname;
$realname = strtolower($realname);

/*== generate seed number from name submitted ==*/
$len = strlen($realname);
$seed = 0; $s = 0;

for ($e=1; $e<=$len; $e++)
{
$chr = substr($realname,$s,$e);
$seed = $seed + ord($chr)*$e;

$s=$e;
}

/*== read in the two files into the arrays ==*/
$adj_array = file("list_one");
$noun_array = file("list_two");

/*== set random seed ==*/
srand($seed);

/*== get the random numbers for each name first/last or adj/noun ==*/
$arnd = rand(0,sizeof($adj_array)-1);
$nrnd = rand(0,sizeof($noun_array)-1);

/*== create name from random numbers ==*/
$wuname = "$adj_array[$arnd] $noun_array[$nrnd]";

print "<p>You are ";
print "<strong> $wuname</strong></p>";
}

?>

list_one and list_two are two text files placed in the same place as the generator page (ie in the archives under the same category) and are lists of adjectives, like: silly, amazing, beautiful, short and nouns like: cow-girl, dancer, slayer, watcher. Make sure to change the file names to take out the .txt extension.

This can be extended to more than 2 descriptors of course. And I can add to the list. It's cute.

This started off as an exercise to password protect a section of the bullko website. Lots of scripts and software available, but either they cost money, or is too advanced for me.

Most recommend protection using .htaccess and .htpasswd.

I already know how to use .htaccess to prevent directory listing and hotlinking. Here's what to do.

htaccess
Place .htaccess in the same directory that needs a password. If the entire site needs to be protected, place in root directory. Use this code:

AuthUserFile directory/path/to/.htpasswd AuthGroupFile /dev/null AuthType Basic AuthName "Please enter username and password"

<LIMIT GET POST>
require valid-user
</LIMIT>

In the case of directory path, for all my sites it's the same except for the username, so for invisiblecompany it is:

home/invisibl/www/www/.htpasswd

htpasswd

The .htpasswd file can be located anywhere, the more secure the better. The password must be encrypted and there are a lot of sites where it can be done, just google it, for instance here or here or here.

Generate as many usernames and passwords as necessary and put them all in the .htpasswd file. Don't forget the hard return at the end of the file. It should look a little like this:

user1:sdDHLKJ1asg
user2:FD3lkjdf24fGh
user3:3Tgvpo5VQgd

One of the requirements on bullko.com is to display future dated entries. Say you're planning an event that's spread over 2 weeks and you want people to see what events are on which day, even in the future, so people can plan. That's how.

As more and more people use the likes of MT and WP as cms this is becoming important. MT does it, I tried on quiet thoughts with no problem. WP initially didn't, until I searched for it in the support forums.

First, show the entry in the main body.

In wp-blog-header.php find:

if ($pagenow != 'post.php' && $pagenow != 'edit.php') { if ((empty($poststart)) || (empty($postend)) || !($postend > $poststart)) { $where .= ' AND post_date <= \''.$now.'\''; }

Add // before the $where:

if ($pagenow != 'post.php' && $pagenow != 'edit.php') { if ((empty($poststart)) || (empty($postend)) || !($postend > $poststart)) { //$where .= ' AND post_date <= \''.$now.'\''; }

Then, make sure it shows in the calendar. In templates-function-general.php in the wp-includes folder, find:

AND post_date < '" . current_time('mysql') . '\'', ARRAY_N);

change to:

AND post_date <> '" . current_time('mysql') . '\'', ARRAY_N);

A bit further down, find:

."AND post_date < '".current_time('mysql')."' "

change to:

."AND post_date <> '".current_time('mysql')."' "

Nifty.

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 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 started using the cleanup tools on Dreamweaver to clean up extra code, check the markup and to convert to xhtml. I never realized how much extra code Dreamweaver added, no wonder I've been finding formatting a minor nightmare. Like there's tags all together like </br></br></p></br> when one </p> will do. So I went through the code view and tried to clean up.

Fixed the width of tables. Page tables are 800px in width. Widths of columns are also fixed. Plus any cell that doesn't need formatting will have the css removed. This means going through all the tr and td code line by line. It's very.pain.ful. But everything looks a bit cleaner now.

I know the direction is to move to php. Don't have the knowledge yet. One of these days.

I already took out mailto links to prevent harvesting. The public email address is displayed using [at] instead of @. A human can understand but not a bot.

For further security, I added a couple of .htaccess files. These are strange beasts, initially when I tried I get 404 errors on every page, so I quickly took that out. This time round I started simple.

A reminder to myself, there must always be a "." at the start of the file name, and it's always in plain text format. The trick I find is saving and loading it as htaccess.txt, then changing the name to .htaccess (no suffix) in control panel.

1. Disable hotlinking
Hotlinking is when someone links to an image directly on the source website. So when other people view the page or click on the image, the source server has to send the image over. This is bandwidth stealing. The person who wants to show that image should save the file on their own server and use their own bandwidth.

Place the .htaccess in the same folder as the images that should not be hotlinked. Code:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?invisiblecompany.com(/)?.*$ [NC]
RewriteRule .*\.(gif|jpg|jpeg|bmp)$ - [F,NC]

This will deal with gif, jpg, bmp files. If other file formats need to be blocked, like png, just add "png" to the list.

I've created a public images folder on the website so if I ever need to make an image available that's where it will go. Like putting avatars or images on some forums, or for whatever reason.

2. Directory listing
Sometimes people enter urls like http://domain.com/folder/ to get a listing of the files in that folder. Most of the time it's harmless but why let them know so much? To prevent directory listing, place the .htaccess file in the applicable directory, or in root for the entire site. Very simple code for the file:

IndexIgnore *

.htaccess can also be used to impose a password for particular folders. This seems pretty neat. I'll get round to it eventually.