The Transfer Tavern is a pub themed blog / site about football transfer rumours. It features two different voting systems by which readers can vote on the pluasability of each rumour, deciding whether the rumour should 'Fly or Die' and also a beer rating to decide how drunk you would have to be to believe the more outlandish rumours.

The most interesting and challenging aspect of building the site was designing and implimenting the custom voting systems. I also designed the pub style logo for the site which I am quite pleased with! If you like to keep up to date with all the latest footy rumours, or want to find out what purchases your team might be making over the summer transfer window then be sure to check it out: www.footballtransfertavern.com

Using keypresses as an alternate way to to navigate through websites  is a great way to make sites more accessible. For instance pressing 'p' takes the user to the previous page, while pressing 'n' takes them to the next. The benefits of using jQuery to achieve this are:

1. Concise code
2. Easy to implement various functions on keypress
3. Works on IE, Firefox & Safari

DETECTING THE KEY CODE

To detect which key a user has pressed you need to set up a function that returns an ascii code each time a key is pressed. A full table of ascii codes is available here. The tricky part to this is that Mozilla and Safari define the value as charCode, while IE defines  it as keyCode. The following script is based on the 'n' key and 'p' key, it takes the links from the 'Previous' and 'Next' buttons on your site and changes page when the key is pressed. Also note that it is important to detect for both the lower-case and upper-case letter as the ascii codes will be different for each.

SOURCE

//process this function whenever a key is pressed
$(document).keypress(function (e) {
//Next
//if the keyCode or charCode is 110 (lower case n) or 78 (upper case N)
if (e.keyCode == 110 || e.charCode == 110 || e.keyCode == 78 || e.charCode == 78){
//grab the href attribute from the link with the id "next_link"
var next_link = $("a#next_link").attr("href");
//if the next link exists (i.e if it's not the last page)
if(next_link){
//go to the next page
window.location = next_link;
}
}
//Previous
//works exactly as the above example but for the 'p' and 'P' keys
if (e.keyCode == 112 || e.charCode == 112 || e.keyCode == 80 || e.charCode == 80){
var prev_link = $("a#prev_link").attr("href");
if(prev_link){
window.location = prev_link;
}
}

});

You must have the jQuery library installed on your site to run this script. For more info about jquery visit the site: http://jquery.com/

GETTING STARTED

1. Open a new flash document
2. Go to 'File ->Import -> Import to Stage...' (or CTRL+R) and import your logo image.
3. Move your logo to the top left corner of the stage (position 0,0)
4. Go to 'Modify -> Document' (CTRL+J) and set your document's height and width to the height and width of your logo image. Set the framerate to 12fps.

CREATING THE SHINE

1. Create a new layer above the logo layer for your shine
2. In your new layer draw a white rectangle with no outlines (about 25ph high and the width of your logo)
3. Select your rectangle and go to 'Modify -> Convert to Symbol' (F8) and choose 'Movie clip' as the symbol type, name it 'shine'.
4. Double click on your new movieclip to open it, select the rectangle again and repeat step 4, converting it into another new Movie clip, but this time name it 'rectangle'.

This Flash Sound Visualisation is based on the idea of the audio waveform becoming a rolling cityscape as viewed from a train window. It combines the computeSpectrum method with the blur and glow filters.

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: