We've been using FCKEditor for some time now, and we were very pleased to come across TinyMCE (http://tinymce.moxiecode.com/), a simple, highly-configurable and very clean editor from Moxiecode systems.

The editor is very easy to install - see the code here - http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php - and just replaces all textareas with the editor tool (or named text areas if you prefer).

Sliverlight is a relatively new tool from Microsoft, which competes with Adobe Flash.

Silverlight is already used to make games and animations on an increasing number of websites.

The good thing about Silverlight, which Flash has always lacked, is the IDE (integrated development environment) for programming it.  The environment is Visual Studio, which is a superb tool for understanding and debugging code.

To find out more you can visit the Silverlight site here: http://silverlight.net/

Also, codeproject has some Silverlight articles: www.codeproject.com

Here's a gotcha:

Why doesn't this work:

<div style="display:inline; width:100px;">

For inline divs and spans, width is ignored.  Width is used for block elements, but if you want to put a width-specific div on the same 'line' as something else, you need to float it left or right, then possibly include a div underneath with "clear:both":

<div style="width:100px;float:left">THIS GOES LEFT</div>THIS GOES RIGHT

<div style="clear:both;">THIS GOES UNDERNEATH</div>

Over at Oxford Webware, what we think Web 2.0 is all about is using collaborative ways to create content.

This is a bigger than most people think.  All sorts of websites, from brochures to ecommerce sites, will need to adapt to take advantage of new practices, or see competitors take over.

Web 2.0 can be expressed as wiki sites, forums, product reviews, interactive surveys and polls, and comments (text and video) on blogs, news, and just about any other type of content.

What happens when you get user-generated content?  Lots of things, but here are three to start with:

• Users feel they are engaging with you
• Your website becomes more interesting
• Search engines appreciate the extra content being generated

An interesting take on web 2.0 here.

What is Web 2.0?

The answer, if you look at wikipedia, is mostly about the increased function you see in this generation of websites (i.e. websites in the 2000's) - particularly functions to do with collaboration.

Many of our customers, however, see design as an integral part of web 2.0, citing the bbc's new look and feel (http://www.bbc.co.uk)

Web 2.0 for them means shading, rounded corners, and panels which slide up and down.

What does Web 2.0 mean to you?

Once you've set up with Google Analytics (see yesterday's blog), there's a wealth of information to explore.

The 'traffic sources' overview tells you how people are getting to your website.  Within this, you can see what search engines and direct links brought people there.

Within 'traffic sources', 'Google (organic)' means that people used "Google search" rather than clicking on a google ad - preferable as you don't pay for organic links.  If this statistic rises over time, your search engine optimisation is working.

Also within 'traffic sources', 'Keywords' tells you what people actually typed in to search engines to reach you.  This usually gives a mixed set of results, some surprising and others not so.  Using this may help you to brainstorm other words and phrases to work into your content in order to attract more traffic.

Google Analytics is a free tool from Google that can let you examine users' behaviour on any site.

It can be hooked up to Google Adwords, but it can also be free-standing.

Once you have signed up, Google will give you a small piece of code to place in the HTML of your website, which sends information back to Google.  Using this information, Google can give you graphs and usage statistics, including a breakdown of referring websites and search engines. 

You can also use Google Analytics to track goals - for example, downloads and forms being filled in.  Attaching separate pieces of code to these events means Google can let you see how users are being funneled into these events.

To give it a try, browse to: http://www.google.com/analytics

A static web page is a document (a file) which contains all of the information necessary to display the page content (though it may draw images and styles from other places).  These are typically named [something].html.

A dynamic web page pulls information from a database, and so may serve many different purposes.  For example a dynamic product page can be used to display different products depending on what parameters are given.

Whether or not you edit the website using a content management system, that system could potentially produce static or dynamic pages. 

Some people favour static pages for speed and for google spidering. 

Speed can be an issue if the server is being pushed to the limit, but web servers are still able to cache dynamic pages in many situations, so static pages may not have that much of an 'edge'.

Google likes web pages with names that make sense, so toaster.html rather than product.php?r=9219192.  However, tools like mod_rewrite and ISAPIRewrite can turn static-looking web addresses into calls to dynamic pages, so you really don't need static pages to impress search engines.

The big disadvantage of static pages is that they can never do clever things like saying 'welcome back, [name]', or displaying your current basket total in the corner. 

I would always recommend dynamic pages, unless there is a specific, proven speed issue and extra hardware is prohibitively expensive.

It's really easy to create a sliding panel on your website using jQuery.

You need these jQuery includes (available from the jQuery website):

<script type="text/javascript" src="/portal_lib/jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.bgiframe.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.jdMenu.js"></script>

Then, say you have a panel with id 'mmhead1' to click on, and a panel called 'mmbody1' which needs to slide up and down, you can simply write the following script in the <head>:

$(document).ready(function(){

$("#mmhead1").click(function () {
if ($("#mmbody1").is(":hidden")) {
$("#mmbody1").show("slow");
} else {
$("#mmbody1").slideUp();
}
});

Hey presto!  jQuery takes care of the click event on the head panel, and slides the body panel up and down for you.

If you're using apache as a web server and PHP as a tool for delivering web pages, you're likely to end up with a set of pages whose addresses look like this:

http://www.somedomain.com/product.php?p=1672835

However, if you've understood what Google is about, you'll know it likes your website to be as humanly-readable as possible in every aspect.

We've proved through research, and it's widely recognised, that if your web page is more like this:

http://www.somedomain.com/elephant_toy

Then the page can get a higher rank and perform better in searches for relevant keywords.

If you'd like to do this with your php pages on apache, you'll need the mod_rewrite extension (probably built into your apache installation).  If this is working, you can edit the .htaccess file to say something like:

  RewriteEngine on

  # Rewrite current-style URLs of the form 'product.php?r=x'.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ product.php?r=$1 [L,QSA]

To get the lowdown on mod_rewrite, try looking at http://www.workingwith.me.uk/articles/scripting/mod_rewrite

Meta tags are information that is hidden to the user but seen by the Google spider.

The most important hidden information is:

• The <title> tag - this appears in the top bar of the browser window - and is not strictly a meta-tag
• The <meta> description tag - this usually appears in search results where your page appears
• The <meta> keywords tag - this appears nowhere, but informs Google about the main theme of the page

The key is to keep everything:

• Simple (not too many words - 7 as a rule of thumb)
• Varied (between the tags)
• Distinct (between pages)

Also remember not to place keywords which are not used in the body of the page - search engines can see this as spamming.

A good website will create titles, etc., for you as you create new news items or menu items.  However, a better website wil give you the option of overriding this and creating your own.

Jquery (www.jquery.com) is a really useful tool for a ton of DHTML operations on web pages.

Recently I wanted to shift the location of a <div> just for the IE6 browser.  I could have detected browser version on the back end and referenced a different stylesheet, but with JQuery I just needed a few lines of code to shift the one <div>..

Here are my script includes (I got the source files from the jquery website)

 <script type="text/javascript" src="/portal_lib/jquery/jquery-1.1.3.1.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.bgiframe.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.dimensions.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.jdMenu.js"></script>

Here is my code:

function ie5layout()
 {
  if ((jQuery.browser.version=='6.0') &&
   (jQuery.browser.msie))
  {
   var cssObj = {          marginRight: 17    };
   jQuery(".newsouter").css(cssObj);
  }
 }

and here is the body tag:

<body onLoad="ie5layout();">

CSS stands for Cascading Style Sheets.  Put simply, CSS is about saving you work and making your web pages consistent.

Once you start learning about HTML, you'll quickly find that you need a way to make your website consistent without having to write lots of attributes all over the place.

For example:

instead of <p><font face="Arial" color="blue" size="3">

you can write <p class="bigblue"> and write a stylesheet that defines the class "bigblue":

<style>
p.bigblue
{   font-family:Arial; color:blue; font-size:12pt }
</style>

Your stylesheet can go inside your HTML page or it can be referenced as an external file.

Here's a great guide to stylesheets: http://www.w3.org/Style/Examples/011/firstcss

HTML stands for Hypertext Markup Language, and is a way of formatting text to display nicely in a browser - the HTML

<strong>one</strong>two

displays in a browser as:

onetwo

HTTP - Hypertext Transport Protocol - is the medium in which HTML is transmitted across the internet.  It's a stream of characters that pass in between the web server and your browser - mostly HTML, but including a few headers.  Headers can carry information such as the type of response being provided (e.g. 404 for page doesn't exist) and cookies (small nuggets of information that the web server requests your browser to store).

We surveyed a couple of our customers recently, one with 5,000 unique visitors per month and one with 10,000.

Both websites turned up a significant number of users using Internet Explorer 6, which is worrying considering that MS are now bringing out IE 8 beta, which of course we'll also need to test on, for future compatibility.

Safari figures were 1.2 and 1.4 - significant enough to test against - but most Mac users seem to prefer Firefox.

Total percentage for IE6 was 37% (!) on the 10,000 user site, and 23% on the 5,000 user site.

So that list (which in my opinion covers you for most purposes):

• IE8
• IE7
• IE6
• Firefox (latest)
• Safari (latest)
• Plus, make sure it meets w3c standards

Your website content now has to be accessible to Google's spiderbot. 

"Accessible" sometimes refers to the w3c standards on accessiblity, which are all about making sure that blind + partially sighted people (and people with other access needs) can visit your website and use it. 

It's crucial that you follow these standards, because you'll know, if you structure it as the standards dictate, that robots are going to understand the website too.

However, when I talk about accessibility in terms of Google's spiderbot, I mean in particular that all of the content must be available via plain links.  Easy ways to get this wrong are:

• creating javascript-driven menus
• creating a search box that's the only way to find some of the content

You can check your website for faults like this.  You can also, after your website has gone live, search Google for complete phrases (surrounded by double quotes) on pages you'd like to see indexed.  Give it some time, but in a well constructed website everything should be indexed.  Everything is on wikipedia, after all

Don't say I told you this, but get all those useful words and phrases you listed in steps (1) and (2), and make sure that your web site includes a variety of them, in various places.  We'll get onto meta-tags later, but by places I mean inside the text of your website.

Important: don't forget, your website must make sense.  Don't just scatter those words like sprinkling sugar.  Not just because it needs to be read by people, but because Google's spider is programmed to think more and more like a human being. And, of course, because it's the right thing to do.

Once you have a list of words people are using to search for your site (see First Steps in Search Engine Optimisation (1)), it's also useful to know how many results these search words or phrases bring up in Google.  Although this won't be a hard and fast rule, generally speaking you ought to avoid targetting search terms which pull up the most results and concentrate on the ones that pull up the least results (these are your niche markets, in effect).  I'll talk about what targetting is in part 3.

It can be a useful (though not entirely foolproof) exercise to create a 'usefulness index'  for each search term based on the number of people searching, divided by the number of results that search term gives.

Before you start making changes to your website in order to improve ranking (and of course as a consequence, traffic to your site) you need to find out what people are typing into search engines to find you.

A good tool for this is your own web stats package - and itf it's not telling you, try awstats (http://awstats.sourceforge.net/).  Of course, this only tells you what people have typed in who have then found you - so you'll also need Yahoo Overture (http://inventory.overture.com) - a tool which gives you figures on what people are typing in - based on a single word or phrase.

It's very useful also to brainstorm.  Are people searching for competing products or complimentary products, or problems and not products?  Do you want to address these people's needs?  Put these words into overture and see what it suggests/

Next: What to do with the information!

Don't miss out on "firebug" - a plug-in for firefox that lets you debug your HTML/CSS/JS in all sorts of ways, including

• viewing all css declarations linked to an element
• stepping through javascript

This is a must-have tool for web developers.  At time of writing you can get it here:

https://addons.mozilla.org/en-US/firefox/addon/1843

Accessibility is about including everyone in the set of people who can access your website - making sure it can be read by anyone, including blind or partially-sighted users.

You would probably make a lot of effort to make your business premises accessible if you were having visitors, and your website should be too.

The good news is that whe web can be very good at including these users – much better than TV or books, for example, because users can employ devices such as screen readers to give them an appropriate output using the same material.
The problem lies in that some of the material is not suitable for output in this way, and so it is essential that you check that what is being developed is appropriate.
The first step is to get to know the “Web Accessibility Initiative” (WAI) guidelines, which are available at: http://www.w3.org/TR/WAI-WEBCONTENT/.