I have recently been working on my first project on the MediaWiki platform, a football wiki site for FootballFanCast.com. The Football Fans Wiki is a wiki written from the fans perspective, with information about each team's stadium, transport info, where to eat & drink locally, songs, programmes, merchandise store, links,video clips & more.

Key features that I added as MediaWiki extensions:

• Register and login from the FFC site instead of through MediaWiki itself
• News & blog feeds on the wiki homepage

Check it out now: Fans Wiki

As a web designer one of the most frequent questions I get asked is : who shall I host my site with? With so many potential  web hosts out there the answer is not always that simple.

If I am building them a site through my web design company 76 Creative, I would always recommend that they use our fully managed hosting service, as it requires no work or knowledge on their part. However, the 76 Creative managed service is reserved for clients of 76 Creative only. You can only get it if 76 are designing and building your site for you.

For many private clients, and friends who are looking to get started with creating their own site or hosting a WordPress blog, I have recommended 1 and 1 hosting. I myself host with 1 and 1 and find that their prices, customer service and the range of web services available through their hosting control panel make them a good choice.

The main factors that people seem to be attracted to in a web host are price and amount of server space allocated. These 2 factors are often used as a means by which to compare different offers and packages available. I guess this makes sense in a way, as they are both very tangible factors that can easily be compared. However, most websites take up less than 100MB of space on the server, so is server space really the most important factor?

Other factors that are often compared are the server's uptime and connection speed.

Two factors I find most important which seem to get less attention are the quality of customer service, and the quality of the hosts control panel. If a host doesn't offer any kind of control panel for you to manage your websites, email accounts etc. then I wouldn't reccomend them.

Many hosts offer the cPanel control panel which is packed with features and easy to use. Other hosts offer more bespoke control panels which range from extremely good to absoluteley useless. I won't name any names, but I have seen control panels from some hosts that offer absolutely nothing, you have to email them every time you want to create a new email address or anything.

Here is my list of factors to consider when chosing your web host in order of importance:

1. Hosting Platform (Microsoft or Linux / Apache)
2. Server uptime
3. Monthly traffic permitted
4. Firewall
5. FTP Access
6. Other software (PHP version etc.)
7. Amount of server space allocated
8. Quality of control panel
9. Quality of customer support by phone
10. SSI  (Server Side Includes)  supported?
11. Password protected directories  supported?
12. Number of IMAP/POP3 email accounts
13. Spam filtering
14. Number of mySQL databases

Notice that I didn't include price in my list. The reason for this is that I would compare price against all these factors together. Price is obviously the most important factor in getting a good deal, but you also need a web hosting package that will suit your needs.

1&1 Hosting and Domains. 99.9% Uptime Guarantee, 25 GBit Connectivity & 24/7 Support! www.1and1.co.uk

When starting a fresh HTML site it is very useful to have a basic HTML template to use. This template should include:

• Doctype declaration
• Head and body tags
• Title tags
• Most commonly used meta tags
• Include for a CSS style-sheet

Having an empty template document will save you time, and will ensure that you don't forget to include any of the most important features of the html page structure. This template should serve as a 'blank canvas' as it were, rather than starting with a completely blank document every time. Here is an example of my template for XHTML 1.0, which can also be downloaded from the link at the bottom of this article:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
@import url(style.css );
</style>
 
</head>
 
<body>
 
</body>
</html>

DOCTYPE:

The doctype declaration (DTD) is important as it tells the browser what type of HTML you are using, and therefore which conventions you will need to follow when coding the site's content. For more information on this check out this Recommended  list of DTDs to use in your Web document.

TITLE:

This is the title that appears at the top of the browser window, it is also the title that appears in the google listing for your page. It is good practice to have a different title for each page of your site. The title can be split into two parts:

1. The name of your site
2. A description of the page

resulting in something like:  UK Diving - The worlds largest internet resource for divers (Site name - Site description) or:  UK Diving - Contact Us (Site name - Page description).

STYLE-SHEET:

The stylesheet provides all the colour, layout and text-formatting styles for your html page, it is written in CSS (Cascading Style Sheet).  Please refer to this document on Cascading Style Sheets for more info about CSS. The style-sheet can actually be written entirely between the two style tags, but I prefer to include it as a separate document, as this can be easily included in every page of the site, and once it is stored in the users cache it will also save on page loading time. The style-sheet in my example template is called 'style.css'.

META TAGS:

I use three basic meta tags in my HTML template:

1. Content type — This tells the browser which character set you are using. In my template I use UTF-8.
2. Description — This is the description of your page that appears in search engine listings.
3. Keywords — A list of key words and phrases that relate to your page,  seperated by commas. This is for search engine purposes too.

ABOUT WRITING XHTML 1.0:

Here are some of the rules of XHTML 1.0.

All nested tags must be closed in the reverse order in which they are opened:

<div><span>Hello</span></div> = Correct
<div><span>Hello</div></span> = Incorrect

All tags that don't have a closing tag must be treated as self-closing with a backslash:

<img src="test.jpg" /> = Correct
<img src="test.jpg"> = Incorrect
<br /> = Correct
<br> = Incorrect

All special characters must be encoded correctly:

& = incorrect
&amp; = correct

Please feel free to use my template as a basis for your HTML pages. You can also test your HTML markup for errors using the online W3 markup validator, or the Web Developer Toolbar for Firefox.

DOWNLOAD TEMPLATE:

It is important to protect email addresses on websites from being harvested by spambots.

"Email spambots collect e-mail addresses from the Internet in order to build mailing lists for sending unsolicited e-mail, also known as spam. Such spambots are web crawlers that can gather e-mail addresses from Web sites, newsgroups, special-interest group (SIG) postings, and chat-room conversations. Because e-mail addresses have a distinctive format, spambots are easy to write. A number of legislators in the U.S. are reported to be devising laws that would outlaw the spambot." – Wikipedia

This is my method for automatically detecting email addresses and replacing them with a javascript that will disguise them from spambots. The script works in two stages one in javascript and the other in php.

First the javascript function that outputs the mailto link:

function sb_email(user,site){
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
document.write(user + '@' + site + '<\/a>');
}

The function has 2 parameters "user" and "site", which are the two parts of the email address either side of the "@". This function can be called like so:

sb_email('joe','bloggs.com');

The second part is the php functions that recognise email addresses and replace them with the javascript function to disguise them:

//function to output the js
function create_js ($matches){
$parts = explode ('@', substr ($matches[0], 1));
if(substr($parts[1],-1)=='.'){$parts[1]=substr($parts[1],0,-1); $parts[2]='.';}
$str = $matches[1].'<script language="JavaScript" type="text/javascript">';
$str .= 'sb_email("'.$parts[0].'", "'.$parts[1].'");';
$str .= '</script>'.$parts[2];
return $str;
}
$js_callback = "create_js ";
 
//function to recognise emails
function email_protect($text){
global $js_callback;
$replace = '/([> ])[A-Z0-9._-]+@[A-Z0-9][A-Z0-9.-]{0,61}[A-Z0-9]\.[A-Z.]{2,6}/i';
$output = preg_replace_callback($replace, $js_callback, $text);
return $output;
}

The email_protect php function can be called on any text string like so:

echo email_protect($text);

It will automatically replace any email addresses in the text with the javascript, therefore hiding them from spambots.

This is one of my all time favourite animated films, Food by Jan Svankmajer. Here it is split into three parts - breakfast, lunch and dinner. Very surreal!

BREAKFAST

LUNCH

DINNER

About Jan Svankmajer: Wikipedia, IMDB