The Logitech G7 went down the route of 2 seperate batteries that could only be used in the G7. Only one battery could be used at a time, so while that was in use the other could be recharged in the charging dock, which also had a USB port for the USB receiver. It worked well, but could be a bit annoying when the battery ran out of juice mid-way through a game or work, but it only took a couple of seconds to swap. At first the batteries lasted around 7-8 hours each between charges which was more than enough generally for 2-3 days of use. But over the years the battery life has shrunk to less than an hour on both which made the mouse more and more frustrating. Unfortunately as good as the mouse was, very comfortable and with a relatively good sensitivity (2000dpi), new batteries for the mouse would of cost around the same as what the moues is worth second hand. So for the second time since owning the G7 I went out looking for a new mouse. My first outing resulted in buying the corded Razer Lachesis. That didn’t last long though, the feel of the mouse was wrong, the mouse was too light and the shape of the buttons never felt right as well some issues with the mouse not being usable upon Windows start up which I imagine was down to drivers.

So now the Microsoft Sidewinder X8 is in, same price as both the Razer Lachesis and the Logitech G7 but is packed with a lot more features.

It comes with one standard rechargable AA battery, so the battery can be charged using a standard battery recharger or the more useful and usable charger that also acts as a receiver. In what looks like a hockey puck is a small wire wrapped around the middle with a small pad with 3 metal elements on it. This attaches magnetically to the bottom of the mouse but in such a way as not to pull off easily. This provides a charging facility over USB which is great as when the battery is running low, you can just plug the cable in and carry on as normal, then when the battery is charged up, just take the cable out and carry on, no changing batteries required here.

Another nice touch is that in the hockey puck like receiver is a set of 2 feet for the mice with different levels of slipperiness to go with the standard feet on the mice, so you have 3 sets of feet.

The mouse has different resolution settings like the G7 and Lachesis but like the Lachesis goes all the way to 4000dpi. The Lachesis and G7 have 2 buttons below the scroll wheel to go up and down the sensitivity settings, the X8 offers 3 buttons allowing 3 different settings. The X8 also features a nice LED screen next to the thumb which tells you the DPI as well as the battery charge state, I feel it would of been better to be more like the G7 and allow more than 3 settings and to be able to scroll through as you would easily be able to tell which sensitivity you are on by looking at the LED screen.

The scroll wheel on the X8 feels very solid with a textured metal finish allowing good grip which although I think it shouldn’t, actually feels better than the rubber used on both the Lachesis and G7 and gives a reassuring click sound when pressed.

So far I highly recommend the X8 at the moment I would say it is a better mouse than the G7 and definately better than the Lachesis from my experiences, but only time will tell.

The result

Tutorial

Step 1: Create new document

Open Photoshop and create a new document at whatever size you wish, I will be creating mine at 400×240.

Step 2: Set the background colour

Set your foreground colour to #b7e0ff and fill the background by either pressing Alt + Backspace or going to Edit > Fill (Shift + F5) and selecting the foreground colour.

Step 3: Create the cloud shape

Select the elliptical marquee tool and draw multiple circles on the canvas, creating the shape of the cloud. To add to the initial selection, hold Shift while drawing the additional circles.

Create a new layer and fill the cloud selection with #79b4e0. With the selection still active, create another layer and fill with #cde9ff. Move this layer up 3 or 4 pixels.

Step 4: Add some additional depth to the cloud

With the selection still active, create another layer. This time select the gradient tool and set the foreground colour to white. Then for your gradient settings, set the gradient to go from foreground to transparent.

Go to Select -> Modify -> Contract and set to 2 or 3px, press OK.

Now draw a gradient from just above the top of your cloud shape to the bottom of the cloud shape.

You cloud is now complete.

Result

Before we delve in to HTML and CSS, you need to understand the basic structure of the page to know how to write your HTML. To do this, on paper or Photoshop draw out the basic layout.

With the basic wireframe of the site you can now write out the basic HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>2 Column Layout</title>
</head>
<body>
  <div id="wrap">
    <div id="header">
    	<h1>Site name</h1>
    </div>
    <div id="navigation">
      <ul>
      	<li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div id="content_area">
      <div id="content">
        <h2>Heading</h2>
        <p>Mauris sit amet lectus at sem fringilla tincidunt. Phasellus ornare mollis egestas. Donec a sapien metus, sit amet faucibus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec tortor nec velit dapibus elementum. Fusce blandit accumsan sagittis. Suspendisse sodales gravida risus rutrum facilisis. Vestibulum at velit id arcu egestas condimentum. Aenean laoreet leo sit amet eros eleifend pretium condimentum ac arcu. Vestibulum volutpat hendrerit urna, sit amet laoreet eros volutpat et.</p>
      </div>
      <div id="sidebar">
        <div class="block">
          <h3>Block header</h3>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="footer">
    	<p>Copyright somerandomsite 2010</p>
    </div>
  </div>
</body>
</html>

This gives the bare markup needed for the layout.

For the CSS we will go through each separate HTML element.

Wrapper

We start the document off with a div with an id of wrap. This gives us a container that we can set a width to as we can’t set a width to the body tag.

#wrap {
  width: 980px;
  margin: 0 auto;
}

This sets the width of the container to 980px. Setting the margin to 0 auto means that the top and bottom margins are set to 0 and the left and right margins are set to automatically generate. The browser will then set the left and right margins to be the same which results in the container being centered in the body.

Header

For the header, we will need to style the header div itself as well as the h1 tag inside it.

#header { background: #c00; }
#header h1 {
  color: #fff;
  margin: 0;
  padding: 30px 10px 10px 30px;
  font-size: 6em;
  font-weight: normal;
}

With this CSS we are making the background color of the div with id header to #c00 which is a dark red. As divs are block level elements it will automatically fill the width of it’s parent which is our div with the id wrap. So we have a div with a red background which is 980px wide.

Within our header div we have an h1 tag. For this we change it to white by using color: #fff. We then remove any margins on the h1 tag which are applied automatically by the browser then set some padding around the text so that it doesn’t touch the edge of the div. To make it stand out we make the font-size 6x bigger than the standard font-size of the page which you can specify in the body CSS, and make the font-weight normal rather than bold.

Navigation bar

The navigation bar is made from an unordered list which allows internet robots (search engines) and screen readers (browsers for blind/hard of sight users) to navigate the site properly. You could make it using a p tag with spaces between the links but that wouldn’t be good for accessibility or SEO.

#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  background: #00c;
  width: 100%;
}
#navigation ul li {
  float: left;
  width: auto;
}
#navigation ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bold;
}
#navigation ul li a:hover {
  color: #00c;
  background: #fff;
}

The first thing we do is to reset the default styling given to unordered lists (the bullet points etc) by resetting the margin, padding and list-style (bullet points). Then we float the whole list to the left so that the ul element takes the height of the children list elements. We also set the background colour and set the width to 100% so that it takes the whole width of the container, otherwise the background colour would stop after the last list element.

Each list element within the unordered list is floated to the left so they all line up next to each other. We also define the width as auto, if you don’t do this the CSS validator will mark your code as invalid CSS.

Each anchor tag with in the list is giving some padding to give space to each link. We have to define the display of each anchor tag as block so that we can apply vertical padding to each link, this also allows better hover styling as the cursor doesn’t have to be on the text and can be anywhere within the padded area. As well as the padding the colour is changed to make the text contrast the background and we remove the default text-decoration of anchor tags which is the underline by setting it to none. I also made the font slightly bigger and bold.

As well as the default state of the anchor tags, we can also define the hover attribute using a pseudo class called :hover. When the user hovers their mouse over the HTML element defined by the selector the browser will pick up on these CSS changes and will be reverted as soon as the mouse stops hovering over the element. Here we are just changing the colour and background so that the user can see that it has a click-able action.

Content area

Our content area div is a minor container div to enclose the main content and sidebar. You don’t have to use this, but it makes it a lot easier to style and line up elements in all the browsers.

#content_area {
  clear: both;
  padding-top: 10px;
}

The clear attribute makes sure that any floating elements are cleared, so essentially the div will appear on the next free line below any floating elements and allows us to put some padding between the navigation and our content. With out the clear attribute, the padding would have no effect.

Content

#content {
  float: left;
  width: 75%;
}
#content h2, #content p {
  padding: 0 10px 0 20px;
}
#content h2 {
  font-size: 3.0em;
  margin: 0;
}
#content p {
  font-size: 1.2em;
}

The first thing we do is set the width of our content div and float it to the left, this allows the sidebar to go along side it.

We also apply some standard CSS rules to add padding and change the font size of elements within the content div.

Sidebar

#sidebar {
  margin-left: 75%;
}
#sidebar h3 {
  font-size: 1.6em;
  margin: 0;
}
#sidebar li {
  font-size: 1.2em;
}
.block {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

To get the sidebar to move up to the right of the content we need to make sure that it isn’t trying to display on top or behind it. To do this, we apply a left margin to the sidebar, the left margin should be the same or bigger (if you want to include a space between your sidebar and content) than your content width. You can also do this by setting the width and floating it to the left or right, but this can cause complications especially when you have more than 2 columns.

As with the content we apply some basic styling to the elements within the sidebar.

Footer

#footer {
  clear: both;
  background: #aaa;
}
#footer p {
  padding: 10px 20px;
  color: #fff;
  font-size: 1.3em;
}

Much like the content area we need to clear any floating elements above it. I have also change the background colour to a light grey.

A class can be applied to any HTML element to allow you to easily target it using CSS to add styling and change the way it is presented to the user. In CSS classes are selected using a full stop followed by the name of the class.

HTML

<div class="classname">
  <p>This is some text in a paragraph tag.</p>
</div>

CSS

p { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p { font-size: 14px; }

This would display like this:

The original p selector in the CSS is overwritten by .classname p, so the font size of any p tag within a parent with a class of classname will be 14px.

If you were to have two paragraph tags within the div but wanted them styled slightly differently, then you could add a class to one of the paragraph tags.

HTML

<div class="classname">
  <p class="large">This is slightly larger text.</p>
  <p>This is some text in a paragraph tag.</p>
</div>

CSS

p { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p.large { font-size: 14px; }

As you can see the first paragraph is larger than the second paragraph. This is because the second paragraph is picking up the default font-size that we specified in the CSS file. The first paragraph is using a larger font size due to the CSS rule .classname p.large.

Classes can be reused as many times as you like in an HTML document. If you have a constant style that you wish to apply on elements through the page, you can create a single CSS class and reuse it.

Id’s

Id’s can be styled in much the same way a class can, but rather than using a full stop as a selector, we use the hash tag (#). Unlike CSS classes though, an Id can only be used once per page. The benefit of using Id’s is that you can link to them with anchor tags.

HTML

<div id="tut_header"><p>Site name</p></div>
<!-- Insert random HTML -->
<p><a href="#tut_header">Back to header</a></p>

So if you had a long page of content, clicking the link will make the page move up so that the div with the id tut_header will be the top most point. Using ids can be useful for creating ‘Back to Top’ buttons.

As Open Atrium is a Drupal installation profile, it runs using PHP and MySQL, which means other than hardware cost it is free to get started and run. It features a few familar modules to any Drupal user such as Views and Organic Groups but also introduces some lesser known modules such as Features and Spaces.

It is currently in beta and is currently at beta 3.2 which can be downloaded the from Open Atrium website.

You can install it like you would any Drupal installation, but during installation you are given the choice to install Drupal standalone or Drupal with Open Atrium’s modules and configuration preinstalled.

Features include a blog for updates, a calendar for events, documents which uses the books module to produce a hierachial display of all the documents you want to store, a shoutbox and a case tracker which is ideal for development teams. Each feature can be turned on or off within each organic group which means you can easily divide internal teams in to different groups to keep the intranet a bit tidier than it would if it was all in one place.

Introducing Open Atrium from Development Seed on Vimeo.

Taken from the Zen project page:

Zen is the ultimate starting theme for Drupal. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Bluemarine. This theme has fantastic online documentation and tons of code comments for both the PHP (template.php) and HTML (page.tpl.php, node.tpl.php).

Why use Zen?

Zen gives a great framework for you to work from as a lot of the hard work in making the default Drupal CSS rules easier to customise as well as having a starter kit for you to modify giving you the basics to create your own theme without needed to mess around with the in’s and out’s of Drupals theming system.

Where do I get Zen?

You can download Zen from the project page on Drupal.org. As of writing there are 2 versions available for Drupal 6; Zen 6.x-1.1 and Zen 6.x-2.0-beta1. We will be using Zen 6.x-1.1 as it isn’t a good idea to use modules or themes that are in alpha, beta or RC on a production site.

How do I install Zen?

Once you have downloaded the file from Drupal.org you will need to extract the zen folder and place it in your /sites/all/themes directory. You will need to create a directory called themes within the /sites/all directory if it doesn’t already exist.

If you need a program to extract the file from Drupal.org, I recommend you use 7-zip which is a freeware application.

How do I start using Zen?

Within the Zen directory is a directory called STARTERKIT. Copy this folder and return to the /sites/all/themes directory. Paste the STARTERKIT directory from your clipboard into this directory. You should have a tree structure like the below:

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- STARTERKIT

Rename the STARTERKIT directory to the name you wish to give your theme. This is the machine name that is used in the backend so you have to use lowercase characters and use underscores (_) instead of spaces.

For this tutorial we will name the theme drupal_theme, which gives us the following tree structure.

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- drupal_theme

Navigate within your drupal_theme directory and rename the file STARTERKIT.info.txt to yourthemename.info, in my case it will be drupal_theme.info.

Open the file in your editing program.

Change the name from name = Zen Sub-theme Starter Kit to name = Your Theme Name and change the description to a description of your theme.

Also change the STARTERKIT.css text to yourthemename.css, in my case it will be drupal_theme.css.

Save and close the file.

You need to make a choice as to whether you would like your theme to be a liquid layout, i.e. it will stretch the width of the browser so there is no whitespace on either side of the site or a fixed layout site where the site is a fixed width dependant of the browser window.

Liquid/adaptive width

Copy the file layout-liquid.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Fixed width

Copy the file layout-fixed.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Copy over the following CSS files from /sites/all/themes/zen/zen to your /sites/all/themes/yourthemename directory.

• zen.css
• print.css
• html-elements.css

Rename the zen.css to yourthemename.css, in my case it will be drupal_theme.css.

In your theme folder, open and edit the files template.php and theme-settings.php, replacing all instanced of STARTERKIT with your theme name, so I replaced all instances of STARTERKIT with drupal_theme.

While logged in as a user with rights to the admin pages, navigate to Administer > Site building > Themes (admin/build/themes) and set your theme to default and save.

How do I customise the theme?

The structure of the page as in the way the sidebar, header, content, footer is layed out is mostly in the php files within the Zen theme and the CSS files we copied over to our theme folder allows us to change the styling of these items to make them appear the way we want.

Change the font size

The default font size is defined in the html-elements.css file.

  #page
  {
    /*
     * To use a 12px font size on the page, delete the 14px declarations.
     * to use a 14px font size on the page, delete the 12px declarations.
     */

    /* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.333em; /* 12px x 1.333 = 16px */

    /* Use a 14px base font size with a 18px line height */
    font-size: 0.875em; /* 16px x .875 = 14px */
    line-height: 1.286em; /* 14px x 1.286 = 18px */
  }

The #page rule is the wrapper that surrounds all the code. So anything we apply to this will be applied to all elements under it unless they are overwritten later on in the CSS file. By default the font size is set to 14px as it is the latter rule of the two. If you wish to reduce the font size to 12px, simply delete the last three lines (you can also delete the additional comments at the top of the rule), so you get the following:

  #page
  {
    /* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.333em; /* 12px x 1.333 = 16px */
  }

How do I change the background colour?

In the yourthemename.css file, change the body rule from:

body
  {
    margin: 0;
    padding: 10px;
  }

To:

body
  {
    margin: 0;
    padding: 10px;
    background-color: #c00;
  }

Where you change the colour to what ever you want. If you don’t know the hex value for the colour you want to use, you can use the RGB colour in the following format:

body
  {
    margin: 0;
    padding: 10px;
    background-color: rgb(204, 0, 0);
  }

Or you can find the hex colour in this hex colour reference chart.

How do I add an image to use as my background?

In the yourthemename.css file, change the body rule from:

body
  {
    margin: 0;
    padding: 10px;
  }

To:

body
  {
    margin: 0;
    padding: 10px;
    background: #fff url(background.jpg) top center repeat;
  }

Place the image in your theme folder. Alternatively if you want to keep your theme folder as tidy as possible, you can create a folder called images within your theme folder and change the CSS code to:

body
  {
    margin: 0;
    padding: 10px;
    background: #fff url(images/background.jpg) top center repeat;
  }

If you chose a background image that makes the text hard to read, you can change the background colour of the #main element, which is the wrapper of all the main content excluding the header and footer, to white.

#main
  {
    background-color: #fff;
  }

You can continue editing your theme by editing the CSS rules within the main CSS file (yourthemename.css). For more references on CSS, check out the Top HTML/CSS resources for beginners post.

Ripping the BluRay or DVD to MKV using MakeMKV

Download and install MakeMKV.

Open MakeMKV and insert the DVD or BluRay you wish to backup.

Select the drive you put the disc in to and press the button of the DVD pointing to the hard drive.

MakeMKV will then scan the disc for all the different videos on the disc. Untick any additional video or audio streams that you don’t want and select a destination folder.

MakeMKV will then start creating your MKV file.

The time the backup takes depends on the size of the data on the disc, the speed of your drive and the speed of your hard drive.

Once MakeMKV has finished you will have an MKV file that you can play on your computer.

Due to copyright restrictions on most DVD’s and BluRay’s you may not be able to rip the video off. To circumvent this, you can purchase AnyDVD.

Shrinking the MKV using HandBrake

Download and install HandBrake.

Note: The latest release as of writing (0.9.4) is unstable on Windows 7 x64 when encoding large BluRay rips. To get around this you can download the latest development snapshot of HandBrake.

Select Source at the top left of the window and select Video file.

HandBrake will the process the file, getting information about the different streams contained within the MKV file.

Double click “regular” on the right hand side to load up the profile.

Change the container to MKV.

Picture

For BluRay, set Anamorphic to Strict. For DVD, set Anamorphic to none and make sure the Keep Aspect Ratio option is ticked. Under cropping, make sure Automatic is selected. This will remove the black bars at the top and bottom of the video to reduce the filesize further.

Video

Change the Video codec to H.264 (x264).

For the quality settings you have 3 options.

Target size*

Set the size of the output you want in MB. Take in to account that the smaller this is the lower the bitrate will end up giving you poorer video quality than you would get with a larger filesize.

For a DVD, setting this between 1,400-2,500MB should give you good enough quality for a backup.

For BluRay, setting this between 8,000-15,000MB should give you a good backup with no visible loss in quality.

Average bitrate*

The default bitrate for DVD’s is around 4,500kbps. The more action in the DVD the higher you will want this. Anything from 700 to 2,000kbps should be fine for most films.

For BluRay, setting this to anything greater than 8,000kpbs should give you no visible loss although if you want slightly better quality, it may be worth upping this to 12,000kbps.

Constant quality

This will use a constant bitrate throughout the film dependant of what is going on in the video. Setting this to anything below 18 is more beneficial. The smaller the number the higher the quality.

* Average bitrate and target size allow you to select 2-pass encoding. This will produce better results but will take longer.

Audio

Select the first audio stream. Then above it select the audio format you want.

For BluRay, it is best to select either DTS Passthru or AC3 Passthru for optimum sound especially if playing through a receiver with SPDIF.

For DVD, you can either chose AC3 Passthru to keep the original audio stream pretty much intact or MP3 (lame).

Start the encode

When you have the options set how you want, click the Start button at the top. The CLI (command line interface) will popup showing you the progress of the encoding.

W3 Schools

Tizag

HTML Dog

SitePoint HTML/CSS Reference

Search engines (Google, Bing, Yahoo) all rank your site based on your content. You need to make sure your content has the keywords that you expect people to search to find you are in your content.

This text has to be in HTML. A common problem on the web especially from people using things like MrSite (or any other site builder/WYSIWYG editor) is that they find the font they want to use doesn’t work on multiple computers. To get around this, they will create images with the text in the image. As far as the search engines are concerned, there is no text there, so it has zero content to index.

Page structure

The actual HTML structure of the page is important. The search engines bots are getting more and more inteligent in finding what it thinks is the main content on your page. So rather than thinking your navigation is your content, they will generally find your first paragraph. This makes it importantant to make sure your content is wrapped properly in paragraph tags (<p> </p>), otherwise you are just hurting your SEO score.

Grammar and spelling

As well as search engines looking at your site, you also have potential customers coming to your site. Pictures will help grab their attention intially, but they will want to read what you have to say. Simple mistakes, such as brought instead of bought, can be very off putting and scare some customers away.

Accessibility

Test your site in all the major browsers. Just because you don’t like Internet Explorer, doesn’t mean everyone else has switched to Firefox. IE still accounts for around 60-70% of browsers worldwide. Do you really want to throw away a percentage that big?

Also make sure that your text is readable. Colour contrast is extremely important, not everyone will have the same vision as you. Putting white on yellow or yellow on white will be hard to read, make sure there is a clear contrast, so when using white text, the background must be dark. To test your colours, you can use this handly little tool to see if they are accessible or not. Ideally you want to pass AAA specifications.

Remove the gimmicks

What do I mean by gimmicks? That analogue clock that you have thrown in to fill up that space that you didn’t know what to do with.

Hit counters. Hit counters are beyond useless, no one really cares about how many hits your site has had, but it is useful for your competitors to know how well (or bad) you are doing. If you want analytics to see how many people are visiting your site, there are free tools available to you. Google Analytics and GetClicky are two of the most popular.

Mouse cursor trails has some blue bars chasing the mouse around the screen. Do you know something Microsoft, Google, Apple, BBC etc don’t know? You are a professional business, not a 12 year old girl telling the world about your pet cats.

Learn about your audience

The first thing to do is learn who is currently visiting your site. Get yourself set up with either Google Analytics and GetClicky which are free analytics packages that can tell you how many visits you are getting and where these visits come from. This will include keywords that are used in searches to get to your site.

Once you have the keywords you are being found on, enter them in to the Google Keywords Tool. This will produce a list of synonyms that you can use in your content to attract a wider range of clients that may not use the same search terms as you are currently using.

Background images

Background images are fine, as long as they are done properly. It may look alright on your 17″/19″ monitor, but when the image stops and you get half a white screen when looking on a 24″ monitor, it doesn’t look very good.

Have a background that blends to a solid colour, or use a repeating background, but don’t have repeated large images as they don’t look very good. Examples: 1, 2, 3

Spread yourself

Expand yourself across social media platforms. Exposure on the web is good, even if people don’t read it, the search engines will see it and think that your website is important as there are a few other websites linking to it.

Examples being Twitter, Facebook (if set to public with the new privacy settings) as well as setting up an external blog.

For the blog, although it does look better to have a built in blog for consistency with design, the links to the site back from an external blog such as Wordpress.com or Blogger.

YouTube is currently the second biggest search engine in the UK. It gets more searches than all the main search engines (Google main search excluded). Even if your video is just a simple slideshow of images of a write up with your company name. Keyword the video, add your website URL to the video description.

Images need context

It is all very well having lots of images on your site but without context the images mean nothing to a search engine and may not necessary be clear to a user. But how do you expect people to find these images on your site? You need to make sure that your images are caption or have some sort of description text with them so that they are searchable. Unfortunately the search engines aren’t at a stage where they can search within images yet, so you have to use words to describe them.

All drivers were installed correctly and the onboard sound was disabled.

But when viewing the supported formats for the playback device, it only listed 2 channels. Unfortunately I have been unable to change this, although I have got full 5.1 DTS and DD sound coming through to the receiver, by selecting S/PDIF pass-through in all the applications (even through I was using HDMI, not optical). The only problem with this is music comes through stereo only as WMP doesn’t pass-through stereo sound through as 5.1 in anyway and foobar doesn’t support pass-through, although there is a component you can download, but this wouldn’t work for my sound card as I think the DVD-A disc rips are 6 channel rather than 2.

I think the only way of getting proper 5.1 surround sound out of music, will be to buy another sound card and use another audio input in to the receiver.

Driver wise, I used the latest Catalyst package (9.6) and the Realtek ATi HDMI Audio driver (2.28). At this point I would also like to point out that the download speed from Realtek is diabolical. I ended up getting the filename of the file and searching on Google to find a mirror. Don’t be fooled by the other driver download sites, as they just directly link to the Realtek driver rather than a proper mirror.