Location: indexwebsite

About this Website

More self-indulgent pap but this time self-referential too.
I'm a bit old fashioned in some ways. This is all written in handcrafted html. I've cobbled together a template for how a generic web page should look to give the site a consistent look and feel. The basic principle is KISS (keep it simple stupid).

Contact Details

By convention you can always reach the webmaster for a site via webmaster@<sitename>. Currently I haven't put my normal contact details here. The simple way with a mail to link and X@Y.com is prone to abuse by spammers. Its typical practice these days to mask the email to the spammers harvesting bots using a bit a javascript. Another scheme just replaces the text by character codes (see http://www.wbwip.com/wbw/emailencoder.html). Both methods are programmatically defeatable but its better than nothing. I also put an unprotected address in somewhere so I can detect spammers, black list them and send them to spammer hell. This is an ordinary mailto tag hidden using the following:

<div style="position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;" > mailto tag here <div>

I learned this from an accessibility website. This technique is used to hide text from sited readers. Strictly styles should be in a style sheet. Gurus will rightly frown at the use styles in the body of the document rather than in a style sheet where they belong.

Browsers

I currently check opera and IE5 for proper display and formating. I plan to check things display properly on lynx (the text only browser) and firefox some time in the near future. HTML Gurus and users of other browsers may point out any glaring issues. Actually I've introduced firefox as of 6th-Sept-2005, though I'm still testing only on doze, which is a bad thing.

Plans

Frames

I'm not using frames yet despite the fact that there probably aren't any browsers around anymore that don't handle them. At some point I plan to create a navigation frame. I quite like the way papalazarou has done it a www.pandamoniumcarnival.com. You click to enter a framed version of the site rather than being greated with an ugly (and probably old-fashioned now) "Your browers doesn't support frames" message.

Text boxes

Rather poorly for a mark up language text boxes are most easily constructed using tables. Anyway, I find breaking things up with a few of these and the odd horizonal rule works quite well. Apparently using tables to align things is a bit of a no-no but I cant see how else you can do it and get good results.

Apparently the answer is again style sheets. Once again attempting to validate my pages as XHTML leads me to discover something new. I got away with it until I used a nested table on the games page. Fixing this is on my to do list.

Sounds

I like the idea of a bit of sound introducing each page. I've tried to keep it to a minimum so it doesn't get too annoying. If you want to know details about any of the sound clips I've put the name and text in the "alt" portion of the embed tags. Which you can see using view source. Unfortunately, the embed tag is not kosher XHTML but the object tag that replaces it is not supported on half the browsers currently in use. After fiddling around for a few hours trying to come up with a neat solution (strictly someone elses neat solution) via google I almost gave up. Its hardly worth the effort. Apparently you can do some magic in XHTML 1.1 but I havent found that yet. The most reliable course seems to be to use javascript to determine which browser is being used and "document.write" to write the appropriate tag. This in itself is a no-no in XML. Everybody does it but that doesn't make it right. The W3C validator is clever enough to look at raw text put in a "document.write" so you have to make the javascript external or mask it with variables. Also javascript should be CDATA in XML so its better off being external anyway. My solution is the embed.js script followed by a bit of script like this:

< script type="text/javascript" >
<!-- hide script
//<![CDATA[
EmbedSoundHidden("sound/Excellent.mp3","Monty Burns: Excellent");
// ]]>
// -->
</script>

A more advanced version of this script would generate the modern object tag HTML as well. However, I have yet to find a browser that supports object and not embed rather than the other way around. Similar but more involved magic is required for flash animations. A good place to look seems to be here. When I get around to adding some flash I'll probably use that myself.

A disadvantage with this scheme is that the link is not checked by normal link verification software like linklint. A way around this is to write a script that extract all the embed commands and generates a list of sound files to download - a useful thing in itself - and have the links on this page verified. A page listing sound files to download would want better categorisation than just extracting the links. Since I'm already in the habit of indicating the source in the alt text I can use this to my advantage.

Forum

The forum is now up and running. I'm using the highly popular phpBB2. I had a very quick go at hacking my own template about to go for a look and feel consistent with the rest of the site. All I succeeded in doing was making the text shrink to near invisibility and the graphics to go all fadey and weird too. Not very successful. I downloaded a few templates from the phpbb site and found I rather liked the 'sky' template. I've customised it only slightly so far with my logo and a dna helix. As the forum is a special area it probably doesn't matter so much that its style is inconsistent with the rest of the site. Even so I ought to have a go at creating a consistent template if only for the practice. The great thing about this is you can switch between styles at the flick of a button or two and users can choose how they prefer to view the site as well.

I'd also like for there to be a small space for comments (i.e and individual forum) at the bottom of each page. I'm not sure how this would work out layout wise. Probably quite well if its a switch-on-and-offable frame. The question is will PhpBB be up to the job?

Journal

The journal is a blog proper and needs a calender widget. I didn't intend to create one by hand so some scripting was in order. I had a very brief search and straight away found bBlog. Which is along the lines of the phpBB2 forum. Open source and very straight forward to install. The only hiccup was that the tarball extracted to the current directory. First time around I didn't noticed and uploaded enough to the site to login and create blog entries but not to actually view them. Like PhpBB2, bBlog is written in php and customisable by downloading or editing your own styles. Once again I have the task of trying to make it fit in with the look and feel of the rest of the site.

Wiki

A wiki is a webpage (or site) that users can edit online. It makes an online shared resource. I like the idea and reckon there are a few places where it would be appropriate on a small scale even on a puny home site like this. The odd annotation or so. There is the issue of getting around to setting one up though.
To see the idea of wiki writ large visit wikipedia.

Last updated & verified

One thing I find quite annoying when surfing the net is not knowing whether the facts I stumble across are up to date or not. The simple addition of a line saying when each page was last modified is really used. Being a bit pedantic I am aware that modification and verification are not the same thing. For example when I added all the background textures I didn't review the content. Its probably overkill to put both fields in but that's the control freak in me coming out again. Of course even with both fields you still cant actually tell what has changed without being able to see the original page somewhere. This brings me back to version control and a time gadget. Something for the future.

Interestingly the wiki software has this kind of change tracking ability built into it.

Misc advice

Navigation

I've gone with the 'breadcrumbs' pattern for navigation. So you can easily see where you are and go back up the hierachy to the home page.

For more website design patterns www.welie.com/patterns is worth a visit.

Hit Counters & other magic

I really ought to have a hit counter somewhere. This can wait until the site is live as it may be server dependent. Ideally I'd like a seperate counter for the website as a whole and each individual page stashed in the cyan area at the bottom of each page. Better yet I'd like total visitor counts and visit counts since the site has changed. If things get too cluttered I'll just stick the basic counter at the bottom with a link to more detailed stats. Searching for info on webcounters on google you will find the top hits are all selling them rather than explaining them. Adding "how it works" to the search is useful here. I found a reasonably good explanation here. I'd also like to welcome returning & registered users. Some simple magic with cookies and remembering IPs should suffice.

Registrations

I'd like to use a single registration system to cover the forum and everything else on the site. Not sure is this will be possible. Currently only the forum requires registration but it would be nice to borrow information such as gender to inform messages such as the entry to the s.e.x. page.

Error 404 message

The site isn't up and running so I haven't been able to customise this yet. There are several good ones of these to use for inspiration.

Validation & XHTML

I believe in supporting the W3 consortium's new standards. All my hand crafted html should be XHTML complient from now on. I'm proud to say I always closed my tags before it became part of the standard, though naturally I still had to change a few things. I have two ways of checking it. One is to use the tidy program and the other is to use the W3's referal page (from whence the XHTML tick box at the bottom of each page comes). This requires the site to be live however so there may be a few errors to start with. That said this site is live from my home PC via my router so I can start checking things. Something more autonomous that checked links and spelling too would be great. I'm sure proper web authoring packages do that for you.

I'm not exactly sure what I get from being XHTML compliant other than a warm fuzzy feeling. I don't know of any XML based browsers out there yet (not widely used ones anyway) and content is still delivered primarily as text/html rather than XML anyway. I guess I can get kudos from the guru community and kid myself that I'm futureproofing my site.

Acessibility

Using the 'alt' text for images is start but it goes much further. The w3 consortium has some detailed standards for making sites accessible to people with various kinds of disability. This is a good thing but some of the things you need to do to make a site fully accessible and compliant with the w3 standard are quite excessive. It takes quite an effort to meet them. I'm afriad slightly more effort than I have time to put in whilst hand coding my XHTML. On the other hand if there is anything simple I can do to improve things I will do it.

Style sheets

I'm finally using a very simple style sheet. This was forced by the change to XHTML. So it was a good thing after all. Gone are the font tags and 'color' attribute and in is the div tag and the class attribute. Its getting neater. That said the CSS syntax seems very divorced from HTML XML in format. The history of how that come about may be quite informative.

XHTML pedantry

I believe strictly speaking you aren't supposed to mess around with fonts directly. Using the <b> bold tag for example is frowned upon in favour of using <em> for emphasis. This leaves it up to the browser to decide how to render emphasis for the display (it also helps with accessibility). Its just so much easier to use them sometimes. If I'm doing something really wrong give me a suggestion.

Links

Ideally I'd like to display external and internal links differently. I haven't bother to mess around with this manually yet. I hope the new XLINK format is able to do this automagically. Really its something the browser should do for you. I'd also like to have external links cached in case they break due to the site changing or a network problem. It would also be good to cache both the version when it was linked to and the most recent version if there have been any changes. All that extra info might make each link a bit to cluttered. Its also a bit control freaky and largely unnecessary but I'd like my site to be self containable. Then I could stash it on a CD without requiring the rest of the net to be available.

Check this site for broken links

Backgrounds

I found an excellent source for free clip-art and stuff www.grsites.com from whence I got all the marble textures I'm currently using.

Icon

I first noticed webpages with icons in the URL with a new version of Opera (I think it was version 5) and I thought it was a pretty neat idea. I knew my icon would have to be my logo. This is basically a modified Blake's 7 federation logo with Bruce written on it instead. I used to use a larger version on my CV which got compliments from some reviewers and disdain from others. I still prefer the version with pictures myself but each employer and employment agency is fickle in its own way. Anyway, in painful the transition from Amiga to PC I lost the image and haven't gotten around to recreating a high resolution one yet. It only took a matter of minutes to make the icon, though at this size the text is scarcely readable. For those of you wondering how to add icons to your web pages the relevant html is:

< link rel="shortcut icon" href="http://www.tortoise74.me.uk/images/bruce.ico" >

I want to add a flash animation of a large logo coming into being on the index page but I don't know when I'll get around to it with everything else I have to do.

Now that the sites online I can see that my shortcut icon doesnt work properly (yet). It works when accessing pages locally but not online except when added to bookmarks. I'm guessing its because I've only provided one size. However having just changed it to a multi-format icon it still doesnt show up. It seems IE only displays icons if you add the page to your favourites then refresh it. Go figure. Actually firefox likes it now, but Opera's still unhappy. This is probably something to do with the page not being fully loaded (i.e. you have to press stop before you can press refresh) There's nothing obviously missing so I'm not quite sure what's going on.

Flash

Flash animations and sounds sound like fun. Some people worry that they clutter up sites or break them. This may be true in some cases but I reckon its worth a go if you can be bothered to make the effort. It is a bit of a concern though that the format is proprietary and you can only author it using Macromedia's products.

Pre-processiong

I've just switched from hand hacked templates to preprocessing headers, footers & the breadcrumbs offline in PHP. This has saved me time & reduced the size of each file. I've also got the modification date via the CVS date tag but retaining my affectation for the correct super-positioned "th". Also I've forced myself to use at least minimal meta tags for the description & keywords which is a good thing.

Meta-tags

Meta tags are important. They tell search engines how to categories your site and the pages on it. They are also a source of various hack designed to get peoples sites unscrupulously listed higher than they deserve in the rankings. It doesn't help that few web authors bother to make sure their meta tags correctly reflect their content. I've only made a token gesture as all my pages currently think they are my home page. More work is required in this area.

Javascript

Somewhat suprisingly for a raw html hacker I'm not currently using any magic javascript. This is expected to change in the very near future. Not least with the addition of something to display my email address without allowing spammers to harvest it as easily as they did with my cybernetics site.

Censorship

In general censorship is a bad thing but some filters make sense. You don't want the kiddies looking at anything rude before you've had a chance to explain the facts of life to them after all. The w3 consortium has a way of dealing with this called PICS (there are some others too). Basically you put meta-information in the page so the rude stuff is invisible. Nanny software can then prevent and filter out the dodgey sites. Unfortunately most dodgey sites aren't this considerate. Its up to us civilised folk to give it the old college try. I haven't got round to it yet here not that there is anything dodgey here yet. On the other hand my maiden aunt uses the web occasionally and it would be nice to be able to hide the very existence of an s.e.x. page from her. Probably more scripting required to make that work. I doubt PICS is sophisticated enough to let you make certain links invisible. PICS is also slightly out of date now I forget what the new mechanism is (mainly 'cos I don't need to know right now).

Version Control

I'm a bit of a control freak. I believe that everything should be under version control. I'm stretching CVS a bit to use it to manage a website but at least I'll have the option of going back to be beginning and seeing how the site developed over time. It would be nice to have a time gadget so that visitors could do the same. Something else for the future...

Criticisms

Please post me your criticisms and constructive comments. Let me know about broken links and stuff like that too. Even more so as my publication process should not permit any. That said it doesnt check spelling or grammar yet.