This article will show you how to display thumbnails of your newest Flickr photos on your site. The HTML output and each thumbnail image is cached on your site to improve performance.

Flickr.com is one of my favourite websites. It allows me to upload all of my digital photos, tag them, categorise them, and share them with my contacts. After using Flickr for a short while you will notice that almost every page has an RSS feed associated with it. This means that you can subscribe to anyone's photo gallery, photo comments, group discussions, photos tagged with a certain keyword, and so on.

This article will show you how to use the RSS feed of your own photostream, and display thumbnails of your latest photos on your own website.

Finding the RSS feed
The feed itself is linked at the foot of your main photos page. It follows the following format:

http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200

The full code
The full code is quite long (78 lines, including comments). I'm not going to break the whole code down into chunks and explain it, since it has been stripped back into several functions and is fairly difficult to explain linearly. I have added comments where necessary.

<%
'URL of your RSS feed (copy from the "Feed" link of your Flickr gallery
Dim strXMLURL : strXMLURL = "http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200"
'The name of the file to which the HTML is cached
Dim strCacheHTML : strCacheHTML = "flickr.htm"
'The local path to the folder you will cache photos to, e.g.
Dim strCachePath : strCachePath = "d:\webs\mydomain.com\wwwroot\cache\"
'The public URL to the above cache directory, e.g.
Dim strCacheURL : strCacheURL = "http://www.mydomain.com/cache/"
'This function takes the URL of the RSS feed, and the XML node name of each photo
Function getXMLNode(strURL, strNode)
	Dim objXML : Set objXML = Server.CreateObject("MSXML2.FreeThreadedDOMDocument")
	objXML.Async = False
	objXML.setProperty "ServerHTTPRequest", True
	objXML.Load(strURL)
	'Returns a collection of nodes to be looped through
	Set getXMLNode = objXML.getElementsByTagName(strNode)
	Set objXML = Nothing
End Function
'This function pulls the thumbnail images frm Flickr and saves them to the local web server
Function cacheImage(imageURL)
	Dim cacheFSO : Set cacheFSO = CreateObject("Scripting.FileSystemObject")
	Dim aFileName : aFileName = Split(imageURL,"/")
	Dim strFileName : strFileName = aFileName(UBound(aFileName))
	'Check to see if the photo has been cached already
	If Not cacheFSO.FileExists(strCachePath & strFileName) Then
		Dim objXMLHTTP : Set objXMLHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
		Dim objJpeg : Set objJpeg = Server.CreateObject("Persits.Jpeg")
		objXMLHTTP.Open "GET", imageURL
		objXMLHTTP.Send
		'Reads the image from Flickr.com
		objJpeg.OpenBinary(objXMLHTTP.ResponseBody)		
		'And saves it to the local web server
		objJpeg.Save strCachePath & strFileName
		Set objXMLHTTP = Nothing
		Set objJpeg = Nothing
	End If
	Set cacheFSO = Nothing
	Set aFileName = Nothing
	'Returns the filename, e.g. "myphoto.jpg"
	cacheImage = strFileName
	Set strFileName = Nothing
End Function
'Checks to see whether the cached HTML has expired
If cacheFileIsExpired(strCacheHTML, 12, "hours") Then
	'Creates a collection of XML nodes. The getXMLNode function is passed the URL
	'of the Flickr RSS feed, and the node name for each photo record ("item")
	Dim objItemList : Set objItemList = getXMLNode(strXMLURL, "item")
	Dim objItem, strHTML
	'Loops through each photo
	For Each objItem In objItemList
		strHTML = strHTML & "<div class=""flickr-tn"">" & vbCrLf
		'Writes the photo title. The safeHTML function converts some possibly dodgy characters
		'that might be in your title, into valid XHTML (ampersands, accents etc.)
		strHTML = strHTML & vbTab & "<span>" & safeHTML(objItem.childNodes(0).Text) & "</span>" & vbCrLf
		'Writes a link pointing to the photo page on Flickr.com, and writes the URL of the newly cached photo
		strHTML = strHTML & vbTab & "<a href=""" & objItem.childNodes(1).Text & """><img src=""" & strCacheURL & cacheImage(objItem.selectSingleNode("media:thumbnail").getAttribute("url")) & """ alt=""" & safeHTML(Replace(objItem.childNodes(0).Text & "","""","")) & """ title=""" & safeHTML(Replace(objItem.childNodes(0).Text,"""","")) & """/></a>" & vbCrLf
		strHTML = strHTML & "</div>" & vbCrLf
	Next	
	Set objItemList = Nothing
	Set objItem = Nothing
	'Update the HTML cache, and write output to the page
	Response.Write(writeCachedFile(strCacheHTML, strHTML))
	Set strHTML = Nothing
Else
	'If cache is not out of date, server up the cached HTML file
	Response.Write(getCachedFile(strCacheHTML))
End If
Set strURL = Nothing
Set strCacheHTML = Nothing
%>

Something's missing!
If you read that carefully, then you will realise that three functions are missing from the code. These three functions perform the HTML output caching, and can be found in my Data Caching Using Text Files in ASP article. From this page, copy the first three functions into a new ASP file, and include it with the above code.

Configuring the script
The code will not work straight away. You will need to edit the first four variables:

Dim strXMLURL : strXMLURL = "http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200"

Dim strCacheHTML : strCacheHTML = "flickr.htm"

Dim strCachePath : strCachePath = "d:\webs\mydomain.com\wwwroot\cache\"

Dim strCacheURL : strCacheURL = "http://www.mydomain.com/cache/"

How long until the cache refreshes?
The default is 12 hours. If you do not upload photos very often, then you can increase this value (found on this line):

If cacheFileIsExpired(strCacheHTML, 12, "hours") Then

Caching photo thumbnails
I've found Flickr to be very slow sometimes. For this reason, this script actually downloads the thumbnails from Flickr and stores them on your own site. This means that if Flickr is suffering from downtime or slow speeds, your photos will still load with the lightning speed of your own web page. Hurray!

Thumbnails are only ever downloaded once, and are stored in the cache folder. To refresh a thumbnail image, simply delete it from the cache folder, and the script will download it again when it runs next.

Adding the script to your own site
I have found that this script works well for showing the thumbnails on a sidebar on my sites. To use it in your own pages, save all of the code as an ASP page named "flickr.asp". You can then include it in your site as follows:

<h2>My latest Flickr uploads</h2>
<div id="flickr-photos">
<!--#include file="flickr.asp" -->
</div>

Questions or comments?
Head over to the article page in the friendly support forums, and post away

Using AJAX, it is possible to regularly auto-refresh a section of a webpage containing dynamic content without reloading the whole page.

The script uses an XMLHTTPRequest to retrieve a dynamic page which is then inserted into the output page.
This content is then refreshed automatically using the Javascript setTimeout() function.

First of all you need a dynamic content page.
I've used a simple ASP date & time script as an example and named the page time.asp:

<% Response.CacheControl = "no-cache" %>
<%= Date %> @ <%= Time %>

<% Response.CacheControl = "no-cache" %>

Next, place the following script in the head of the output page:

<script type="text/javascript">
var page = "time.asp";
function ajax(url,target)
 {
    // native XMLHttpRequest object
   document.getElementById(target).innerHTML = 'sending...';
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("GET", url, true);
       req.send(null);
   // IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
       if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("GET", url, true);
           req.send();
       }
   }
		   setTimeout("ajax(page,'scriptoutput')", 10000);
}
function ajaxDone(target) {
   // only if req is "loaded"
   if (req.readyState == 4) {
       // only if "OK"
       if (req.status == 200 || req.status == 304) {
           results = req.responseText;
           document.getElementById(target).innerHTML = results;
       } else {
           document.getElementById(target).innerHTML="ajax error:\n" +
               req.statusText;
       }
   }
}
</script>

var page = "time.asp";

setTimeout("ajax(page,'scriptoutput')", 10000);

<body onload="ajax(page,'scriptoutput')">

<p>Current Server date & time (updated every 10 seconds):<br />
<span id="scriptoutput"></span></p>

Finally, save the page and upload it along with time.asp to the same folder in your webspace.

Learn how to use JavaScript events and triggers without using inline scripting, therefore allowing visitors to use your site even with JavaScript disabled.

Introduction
In this new regenerated world of web development there is a desire to use advanced features on sites, yet maintain usability, accessibility and backwards compatability. Many "advanced" features, such as image galleries, form validation and pop-up windows require JavaScript to function properly. This means that users with JavaScript disabled (they do exist!) are unable to use your site. And when these advanced features make up critical paths for your visitors, you're destroying usability and accessibility.

A quick and dirty JavaScript example
Let's look at the JavaScript we so often use to create pop-up windows. Love 'em or hate 'em, they do have their place in our arsenal if used meaningfully to enhance the browsing experience. The following example is how a developer might code a pop-up window event.

<a href="#" onclick="javascript:window.open('page.html','popup','width=400,height=200');">View new page</a>

What's wrong with that?
The only good thing about the example above is that it works. However, there are a number of problems with this code:

a) Maintainability of inline JavaScript
The raw JavaScript code is inserted "inline" to an element in the page HTML. If you want to update the widths of your pop-ups, or change the way your window opens, you are going to have to edit this code in every page of your site. Moving the JavaScript code to an external .js file will improve maintainability.

b) If JavaScript is disabled...
The "onclick" event will not be triggered, and the link reference has been set effectively to nowhere ("#"). To a browser with JavaScript disabled (whether it be a visitor or a search engine robot) this link is now useless. It goes nowhere.

Improving the markup
Problems are solved most easily when the (X)HTML markup is simple and clean. Keep It Simple, Stupid. Here is a suggested simplified link. Notice I have added a class attribute to the anchor element. You'll see why later.

<a href="page.html" class="popup">View new page</a>

Using JavaScript to add the pop-up event

The following JavaScript function will create our popup actions once the page has been loaded. The script looks through our document (Document Object Model) for all link (anchor) elements. For each link, the script checks to see whether this link is to be opened as a pop-up (i.e. whether it has been assigned a class of "popup"). If so, an onclick event is added to the link element which triggers a new function containing our original pop-up code (from the inline example at the top of the article).

window.onload = function() {
	// check to see that the browser supports the getElementsByTagName method
	// if not, exit the loop 
	if (!document.getElementsByTagName) {
		return false; 
	} 
	// create an array of objects of each link in the document 
	var popuplinks = document.getElementsByTagName("a");
	// loop through each of these links (anchor tags) 	
	for (var i=0; i < popuplinks.length; i++) {	
		// if the link has a class of "popup"...	
		if (popuplinks[i].getAttribute("class") == "popup") {	
			// add an onclick event on the fly to pass the href attribute	
			// of the link to our second function, openPopUp 	
			popuplinks[i].onclick = function() {	
			openPopUp(this.getAttribute("href"));	
			return false; 	
			} 	
		}
	} 
} 
function openPopUp(linkURL) {
	window.open(linkURL,'popup','width=400,height=200')
}

<script type="text/javascript" src="popup.js"></script>

Conclusion
Using the DOM (Document Object Model) we have successfully read the page for anchor tags. If the link needs to be opened in a popup, the we have added an event to the link. If JavaScript is disabled, then the link tag will act as a normal hyperlink, allowing our visitors to continue browsing the new page in the main browser window. This implements the concept of 'progressive enhancement' using unobtrusive JavaScript techniques - functionality that adds value to pages, but isn't a requirement.

Further reading
This article was inspired by examples in Jeremy Keith's fantastic DOM Scripting book. The book offers a brief history and introduction of JavaScript and begins with simple examples to teach best practices and unobtrusive scripting. I would recommend it to anyone.

An introduction to what Ajax is and a basic "Hello World" example. Includes a downloadable example and suggests areas for further examples.

What is Ajax?
There's a growing momentum behind newly-launched websites at the moment. Part of the rise of the Web 2.0 concept has been the mainstream adoption of AJAX (Asynchronous JavaScript And XML). Ajax isn't anything new, nor are the technologies behind the name, but they've found a new lease of life on trendy new sites. So what is Ajax exactly? Put very simply, it's a combination of XHTML, CSS and most importantly JavaScript and XMLHttpRequest that allows you to update your web page content without refreshing the page.

Of course, this is an over-simplified example and the funtionality of the Ajax technologies has a far wider scope. But this article will show you the bare structure of an Ajax-type request, and will show you how to use it on your own site.

The Code
The XMLHttpRequest object effectively allows you to GET or POST to a remote script using JavaScript. In our example we will use this object to open a text file and read back its contents. The code that follows creates an XMLHttpRequest object ready for us to use. We check for Internet Explorer since IE uses its own XMLHttpRequest object that is different from other browsers. When the page loads, the createRequestObject function is called and an instance of the XMLHttpRequest object is stored in the variable "http".

<script type="text/javascript">
var http = createRequestObject();
function createRequestObject() {
	var objAjax;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		objAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		objAjax = new XMLHttpRequest();
	}
	return objAjax;
}
function getNewContent(){
	http.open('get','newcontent.txt');
	http.onreadystatechange = updateNewContent;
	http.send(null);
	return false;
}
function updateNewContent(){
	if(http.readyState == 4){
		document.getElementById('mySentence').innerHTML = http.responseText;
	}
}
</script>

The second function should be called from a page element, such as a hyperlink or a button. This element will trigger the Ajax event (getNewContent), which reads the content text file. The third and final function (updateNewContent) checks the result of the XMLHttpRequest and updates the page accordingly.

A Hello World example
The JavaScript above should be placed within your HTML page, or included as an external .js file. You should create a text file named "newcontent.txt" containing the words "Hello World" and save it in the same folder as your HTML page. Your event trigger element should call the second function, like this:

<p id="mySentence">
<a href="#" onclick="javascript:getNewContent();">Click here to update the page</a>.
When you click the link, this content will be replaced.</p>

When the link is clicked, the getNewContent function is triggered. It calls a text file named "newcontent.txt". The function updateNewContent monitors the progress of the request, and when it is complete, the HTML element with an id of "mySentence" is updated with the text file contents.

Try out a live example!

Download all files as a Zip file
To make things a bit easier, you can also download the live example and all code referenced in this article as a Zip file.

Further applications
This is the simplest Ajax example I could think of. If you want to make the "Hello World" content dynamic, you can use the code to request an ASP or PHP page rather than a text file. With some simple modification you could pass some parameters to this request and start to interface with a database. In its most complex form, Ajax has been used to build entire interfaces. Gmail and Google Maps for example, use Ajax heavily to create navigation and page content without refreshing the entire browser page. On your own sites it is likely that you will find Ajax useful for the following common features:

• Validating form fields
  
• Auto-complete form fields
  
• Updating content based on timers (e.g. an auction)
  
• Performing real-time spell checking of form fields
  
• Dynamically loading list/select boxes based on other form choices

Benefits of using Ajax

• Just a small section of a page can be updated without having to reload the entire page. This saves on bandwidth and loading times, and reduces server load.
  
• The code is lightweight and not very complex.
  
• JavaScript and the XMLHttpRequest object are supported in all modern browsers
  
• It's got the geeky cool factor ;-)

Potential disadvantages of using Ajax

• Not everybody has JavaScript enabled in their browser (by choice, or otherwise). You should make sure that your site functionality does not require Ajax and that the site is usable without the Ajax fanciness
  
• Breaks the back button. Try the example above and click the back button. The original content isn't replaced, as a normal page in your History is. Therefore you should make plans for a function to also reverse any content replacement if necessary
  
• If content is embedded within JavaScript code then this can reduce the effective accessibility of your site.

ASPJpeg is a fantastic way of manipulating images on the server. But what if the image is on another server completely?

Introduction
This problem reared its ugly head when developing the OpenHosting website. On the new Status page we wanted to have a graph of the current network throughput. The only problem was that the software generating this graph sits on a separate web server to the OpenHosting website. We wanted to be able to grab this image and use ASPJpeg to clean it, resize it, and most importantly, cache it.

How it's done...
Thankfully there's a simple solution to grabbing an image from a remote server. Using the XMLHTTP object (commonly used to request remote documents such as XML files) we request the PNG image file, and use ASPJpeg's OpenBinary method to read the incoming byte stream. The image is then saved as a JPEG on the web server. A simple ASP script works out whether the cached image needs updating. If so, the above routine is executed. If not, the page simply returns the cached JPEG image. Here's the (modified) code.

<%
If cacheFileIsExpired("statusgraph.jpg", 4,"hours") Then
   Response.Write("<img src=""getRemoteImage.asp"" alt=""Updated image"" />")
Else
  Response.Write("<img src=""cachedImage.jpg"" alt=""Image loaded from cache"" />")
End If
%>

And the getRemoteImage page that works the XMLHTTP magic:

<%
Dim objXMLHTTP : Set objXMLHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
Dim objJpeg : Set objJpeg = Server.CreateObject("Persits.Jpeg")
objXMLHTTP.Open "GET", "http://www.domain2.com/theImage.jpg"
objXMLHTTP.Send
objJpeg.OpenBinary(objXMLHTTP.ResponseBody)
objJpeg.Save "d:\webs\domain1.com\wwwroot\cachedImage.jpg"
objJpeg.SendBinary
Set objXMLHTTP = Nothing
Response.End
%>

Note that the "cacheFileIsExpired" function in the first code example is the same that is used in my Data caching using text files article.

If your web application regularly performs complex database queries, you might be able to improve performance by caching the results.

Introduction
There are numerous ways of speeding up your web applications, and improving data access efficiency is one of them. A method of increasing data access efficiency is to cache frequently accessed data. This would be a list of forum posts, populating a drop down menu with country names, or performing complex cross-table queries in large databases. There are three main ways of caching data. In this article I document the third method.

a) Caching within the database.
More advanced database servers such as MySQL and SQL Server (not Access) support indexing. Frequenty run queries are effectively cached within the database itself. However this isn't always easy to implement.

b) Caching in the web server memory.
Data can be stored in the web server session or application memory state. This is great for small, temporary pieces of data such as a username login session, but for larger datasets you may be putting the shared web server under strain.

c) Cache to a file.
Once your data is selected, you save its contents, including HTML formatting, to a text file. This can simply be written back to the browser at runtime, bypassing the database query completely.

The concept
Firstly we need to decide what type of file we are going to store our cached data in. In an ideal world we would use XML, or some type of CSV database, just storing the raw data. However this data would still require iterations and HTML formatting. My own method is to query the database once, format into HTML once, save it as a text file, and write it back to the browser when required. To do so we need three functions: to read our cached file, to check if our cached version has expired, and to create a new refreshed cached file.

The first function is used to check whether our cached data has expired or not. It would be rare to never want your cache to be updated, so this function accepts parameters to allow you to decide how often the cache should be updated (a value and a time unit). The first parameter is the name of the cache file you are checking, for example "latestPosts.txt". The other two parameters determine the cache expiry time, for example "2" and "hours".

Function cacheFileIsExpired(strFileName, cacheInterval, cacheIntervalUnit)
If cacheInterval = 0 Then
  cacheFileIsExpired = True
  Exit Function
End If
On Error Resume Next
Dim cacheFSO : Set cacheFSO = CreateObject("Scripting.FileSystemObject")
Dim cacheFile : Set cacheFile = cacheFSO.GetFile("d:\webs\mydomain.com\cache\" & strFileName)
Dim strDate : strDate = cacheFile.DateLastModified
Set objFile = Nothing
Select Case cacheIntervalUnit
  Case "minutes" : strUnit = "n" 
  Case "hours" : strUnit = "h" 
  Case "days" : strUnit = "d"
End Select
cacheFileIsExpired = (DateDiff(strUnit,CDate(strDate), Now()) > cacheInterval)
If err.Number <> 0 Then
  cacheFileIsExpired = True
End If
Set cacheFile = Nothing
Set cacheFSO = Nothing
End Function

The following function accepts two parameters. The first is the cache file we are updating ("latestPosts.txt"), and the second is the complete contents of the cache. For example, if we want to cache a list of the ten latest forum posts, we would query the database, loop through records, format with HTML and add the contents to strText. The function itself merely creates a new text file.

Function writeCachedFile(strFileName, strText)
  Dim cacheFSO : Set cacheFSO = CreateObject("Scripting.FileSystemObject")
  Dim cacheFile : Set cacheFile = cacheFSO.CreateTextFile("d:\webs\mydomain.com\cache\" & strFileName, True, True)
  cacheFile.Write(strText)
  cacheFile.Close 
  Set cacheFile = Nothing
  Set cacheFSO = Nothing
  writeCachedFile = strText
End Function

Function getCachedFile(strFileName)
  Dim cacheFSO : Set cacheFSO = CreateObject("Scripting.FileSystemObject")
  Dim cacheFile : Set cacheFile = cacheFSO.OpenTextFile("d:\webs\mydomain.com\cache\" & strFileName,1,False,-1)
  getCachedFile = cacheFile.ReadAll
  Set cacheFile = Nothing
  Set cacheFSO = Nothing
End Function

Putting it all together
Let's run through an example of how to use these functions together. Keeping with the example above of compiling a list of the top 10 forum posts, let's cache the results. This example assumes you have saved the above three functions into a new ASP file named "caching.asp", which we will call as an include file in the following example.

<!--#include file="caching.asp"-->
<%
If cacheFileIsExpired("latestPosts.txt", 2, "hours") Then
  Dim objConn : Set objConn = Server.CreateObject("ADODB.Connection")
  With objConn
    .Provider = "Microsoft.Jet.OLEDB.4.0" 
    .Open "d:\webs\mydomain.com\db\forum.mdb" 
  End With
  Dim objPosts : Set objPosts = Server.CreateObject("ADODB.Recordset")
  objPosts.Open "Select Top 10 * From tblPosts", 0, 1, objConn
  Do Until objPosts.EOF
    strPosts = strPosts & "<li>" & objPosts("PostTitle") & "</li>"
    objPosts.MoveNext
  Loop
  strPosts = "<ul>" & strPosts & "</ul>"
  objPosts.Close
  Set objPosts = Nothing
  objConn.Close
  Set objConn = Nothing
  Response.Write(writeCachedFile("latestPosts.txt", strPosts))
Else
  Response.Write(getCachedFile("latestPosts.txt"))
End If
%>

This is a relatively simple concept, and I hope these functions make it easier for you to start caching your data right away! I've found that it massively increases page speeds often by a matter of several full seconds (for particularly data-heavy applications). Give it a go :-)

A brief skip through the first things you should check when you first start to optimise your site.

Optimising your website for the search engines need not be a difficult task. If you have written some decent content, and use your HTML markup sensibly, then you've already done most of the hard work. In my view, there are three main parts of ?optimising? your pages.

1. Getting your pages into the search engines
This basically means that you need to have your web pages live on the Web where the search engines can see them. Two ways of getting your pages indexed/crawled by the engines are:

a) Using the specific submission tool for each engine (here's Google's)
b) Have other sites link to yours, so your site is picked up naturally by the search engine spiders

2. Optimising your pages for efficient performance
Your links need to be crawlable by search engine spiders (don't hide links in JavaScript or Flash), and your HTML markup should be as clean as possible. However just being in the search engine index won't generate high traffic. You need to optimise your content for specific keywords. I'm not going to go into keyword optimisation here, since it's a very broad topic covered well elsewhere:

• Choosing Keywords That Attract A Target Audience
  
• Choosing Keywords Help, Choosing Search Keywords

a) Using the <title> tag
If your site content is created from a content management system or e-commerce package, you may find that every page in your site has the same Title. You're wasting valuable real estate. Ideally your chosen keywords should be as close to the beginning of the title as possible. It's fine to include things like your company name in the title, but look at the following example and decide which is the more appropriate.

Nick & Son's Art Gallery

Rare Illustrations, Paintings and Prints from Nick & Son's Art Gallery, London

• How To Use HTML Meta Tags

d) Efficient linking techniques
Search engines can only index your pages if there are links to the pages themselves. Text links (hyperlinks) are arguably the best. However, the simple link can be a powerful SEO tool, for the actual clickable text of a link can have a bearing on the relevant of a web page. The concept is simple. Search engines (Google for one) find all of the links to a web page, and evaluate the clickable hyperlink text of each of these links. If there is a consistent keyword featuring in the links, then it will push this page higher up the results for that keyword. Conclusive evidence of this concept comes in the form of the practice known as Google Bombing. As such, when forging links from other websites to your own, you should try and get your keywords included in the links too.

3. Patience, monitoring and updating
Making changes to your pages will not have an immediate impact on your site's performance. It can take weeks, even months, for the fruits of your labour to ripen and spread through all of the search engines. Thus it is vital that you monitor your site traffic; where people come from, what links are they clicking on, what they're looking for; and update your site accordingly.

Search engines are constantly evolving and changing the way they rank our sites. Working your way to the top for a specific keyword isn't difficult, but one change in the search engine algorithm, and you can be knocked off the top spot without warning. It's a good idea to keep tabs on industry sites and resources/articles for the latest updates.

Useful further reading

• Search Engine Optimisation - Getting into the Search Engines
  
• http://www.search-this.com
  
• http://www.seobook.com
  
• http://www.seochat.com
  
• http://www.google.com/webmasters/seo.html

Using CSS (Cascading Style Sheets) you can have more than one style of link on web page. This is handy if you want, for example, the links on a menu to look one way and the links in the text to look another.

You can set the default links on a page by adding the following to the
<head> tag of your page:

<style type="text/css">
a:link       {color: red;}
a:visited    {color: red;}
a:hover      {color: green;}
a:active     {color: red;}
</style>

Next you can define alternative styles for other links, for example those in a menu. Add these to the others between the <style> tags.

.themenu a:link       {color: orange;}
.themenu a:visited    {color: blue;}
.themenu a:hover      {color: orange;}
.themenu a:active     {color: orange;}

.themenu is the class name we are going to give the links to tell them to use that style not the default one.

The html code for the link looks like this:

<span class="themenu"><a href="#">Example Link</a></span>

All the links between the span tags will have the same style.

To add another style of link add the CSS again with a different class name.

CSS can be used to add captions below (or above) your images without having to use tables.

Lets start by adding an image to the page that we want to caption.

<img src="image.jpg" width="220" height="172" alt="Rabbit">

The next step is to wrap this in a div, which will contain the caption and the image. The div is given the class 'rabbitbox' and the image the class 'rabbitimage' so we can style them seperately.

<div class="rabbitbox">
<img src="image.jpg" width="220" height="172" alt="Rabbit" class="rabbitimage">
This is a dwarf lop rabbit called Jasper. He is 6 years old and likes to eat apples.
</div>

The first thing we are going to do is tell the div how wide we want it to be, if we don't specify a width it with stretch across the full page to accomodate the text.
This code goes in the <head> section of your page or in a seperate stylesheet if you have one.

<style type="text/css">
.rabbitbox {width:220px;}
</style>

Already we have the appearance of an image with a caption. The captioned image can be aligned to the left or right with the remaining page text flowing around it or placed on the page with the body text wrapping above and below.
If the image is to have text wrapped around it we'll add a margin on the appropriate side so there is a gap between the image and the text.

To align right add:
.rabbitbox {width:220px;float:right;margin-left:10px;}
To align left add:
.rabbitbox {width:220px;float:left;margin-right:10px;}
To wrap text top and bottom:
.rabbitbox {width:220px;clear:both;}

.rabbitbox {font-style:italic;font-family:arial;font-size:smaller;text-align:right;}

Borders can be added either to the image or the div around both the image and the caption.

To add a border to the image add:
.rabbitimage {border:1px solid black;}
To add a border to the div add:
.rabbitbox {border:1px solid black;}
To add a border to one side:
.rabbitbox {border-right:1px solid black;}

Putting it all together you should end up with something like this...

<style type=text/css>
.rabbitbox {width:220px;width:220px;float:right;margin-left:10px;
font-style:italic;font-family:arial;font-size:smaller;text-align:right;}
.rabbitimage {border:1px solid green;}
</style>

A function to save dates into a generic format, regardless of database type or server localised settings.

Introduction

When you?re using dates in calculations in ASP, or saving them to Access or SQL databases, you can often encounter very bizarre and illogical results. Don?t use messy Session.LCID hacks. Here are some reusable functions which should solve all of your date problems forever...

I have found that the best way to achieve uniform results when saving and retrieving dates to and from a database, is to store a date as an integer (number) value. The obvious way is to store in the following format:

yyyymmddhhmmss

Therefore the latest date is always the largest number (useful for ordering and selecting newest records).

How it's done

Here's the function I use to create a number in the above format. Make sure you pass the full current date AND time (Now()) and not just the current date (Date()):

Function saveDate(theDate)
If isNull(theDate) or CStr(theDate) = "" Then
saveDate = ""
Else
strMonth = Month(theDate)
strDay = Day(theDate)
strHour = Hour(theDate)
strMinute = Minute(theDate)
strSecond = Second(theDate)
If Len(strMonth) = 1 Then strMonth = "0" & strMonth End If
If Len(strDay) = 1 Then strDay = "0" & strDay End If
If Len(strHour) = 1 Then strHour = "0" & strHour End If
If Len(strMinute) = 1 Then strMinute = "0" & strMinute End If
If Len(strSecond) = 1 Then strSecond = "0" & strSecond End If
If IsDate(theDate) Then
saveDate = Year(theDate) & strMonth & strDay & strHour & strMinute & strSecond
End If
End If
End Function

When it comes to display the date on a page I pass the retrieved database integer and a pre-defined format type to a "formatDate" function:

Function formatDate(theDate, displayType)
If isDate(theDate) Then
returnDate = True
strYear = Year(theDate)
strMonth = Month(theDate)
strDay = Day(theDate)
strHour = Hour(theDate)
strMinute = Minute(theDate)
strSecond = Second(theDate)
If Len(strMonth) = 1 Then strMonth = "0" & strMonth End If
If Len(strDay) = 1 Then strDay = "0" & strDay End If
If Len(strHour) = 1 Then strHour = "0" & strHour End If
If Len(strMinute) = 1 Then strMinute = "0" & strMinute End If
If Len(strSecond) = 1 Then strSecond = "0" & strSecond End If
ElseIf len(theDate) = 14 Then
returnDate = True
strYear = Left(thedate,4)
strMonth = Mid(theDate,5,2)
strDay = Mid(theDate,7,2)
strHour = Mid(theDate,9,2)
strMinute = Mid(theDate,11,2)
strSecond = Mid(theDate,13,2)
Else
returnDate = False
End If
If returnDate Then
Select Case displayType
Case 0
If Left(strDay,1) = "0" Then strDay = Right(strDay,1) End If
formatDate = WeekDayName(WeekDay(strDay)) & " " & strDay & "<sup>" & formatDateAbbrev(strDay) & "</sup> " & MonthName(strMonth) & ", " & strYear
Case 1
formatDate = strDay & "/" & strMonth & "/" & strYear
Case 2
formatDate = strDay & "/" & strMonth & "/" & strYear & " " & strHour & ":" & strMinute
Case 3
formatDate = strHour & ":" & strMinute
End select
End If
End Function

This also makes use of a "formatDateAbbrev" function which returns the "st", "nd", "rd" and "th" day abbreviations:

Function formatDateAbbrev(theDay)
If isNull(theDay) Or cstr(theDay) = "" Or Not isNumeric(theDay) Then
formatDateAbbrev = ""
Else
If theDay = 1 Or theDay = 21 Or theDay = 31 Then
formatDateAbbrev = "st"
ElseIf theDay = 2 Or theDay = 22 Then
formatDateAbbrev = "nd"
ElseIf theDay = 3 Or theDay = 23 Then
formatDateAbbrev = "rd"
Else
formatDateAbbrev ="th"
End If
End If
End Function

There is also an optional function which allows me to pull out a specific part of a date when it's needed:

Function getDatePart(theDate,thePart)
Select Case thePart
Case "year"
getDatePart = left(thedate,4)
Case "month"
getDatePart = mid(theDate,5,2)
Case "day"
getDatePart = mid(theDate,7,2)
Case "hour"
getDatePart = mid(theDate,9,2)
Case "minute"
getDatePart = mid(theDate,11,2)
Case "second"
getDatePart = mid(theDate,13,2)
End Select
End Function

On the forums Paul Creedy points out an alternative method of storing dates in a normal Date field in the format "yyyy/mm/dd" which should also achieve the same results, but I've not tried it. One slight caveat may be compatibility with different database types. When querying an Access database we must surround our dates using a hash (#), e.g.

Select * From tblData Where fldDate = #11/01/2005#

But it is entirely possible that other databases (SQL server, MySQL etc) use different characters for selecting dates in SQL. I'm fairly certain they use uniform syntax for selecing numerical values, so the method described above may be best applied in situations where you may need to change between two or more database types. The best way, of course, is to experiment for yourself ;-)

Sending a CDO email using an external SMTP server using ASP (can also be used to send using an internal SMTP email server).

Introduction

It is sometimes advantageous to use an external mail server for the following reasons:

• You want to keep your web hosting and email separate (not to have all your eggs in one basket)
• Your host doesn't allow bulk sending of emails (see your host for their definition of bulk)
• Reducing server load on the web site when the email are being sent
• If the SMTP server?s IP gets blacklisted, it won?t effect normal web site hosted email.

In the following example substitute your details as follows:
Smtp.yoursever.com = your server domain name
Yourusername = the username given to you by the host
Yourpassword = the password given to you by the host

The Code

An example of calling the function follows. The function will return and errorcode of >0 if an error was generated. This allows you to trap and deal with the error instead of throwing a server error page at your user.

<%
Dim errorcode
errorcode=SendCDOEmail("smtp.yourserver.com","yourusername","yourpassword","subject goes here","message goes here","from email address","to email address","","priority eg 1","email format")
Response.Write(errorcode)
%>

The function itself:

<%
Function SendCDOEmail(smtpserver,username,password, strSubject, strBody,strFromAddress,strToAddress,strCc, intpriority, strBodyFormat)
'smtpserver = your smtp server name
'username = the username required for smtp authorisation
'password= the password required for smtp autorisation
'strSubject= subject text
'strBody = body text / html
'strFromAddress= from whom the email will be sent
'strToAddress= who the email will be sent to
'strCc= to who the email will be Cc'd to
'intpriority= importance of email (0=low, 1=normal, 2=high)
'strBodyFormat= either HTML or text
' response.Write("<b>Debug Code:</b> subject = " & strSubject & " , Body = "& strBody & "From = " & strFromAddress & " ,To= " & strToAddress & " , cc= " & strCc & " , priority = " & intpriority & " , Body Format = " & strBodyFormat & "<br>" & vbcrlf) 'debug code
'set up connection
' send email using cdosys
dim objCDOSysCon, objCDOSysMail
'Create the e-mail server object
Set objCDOSYSMail = Server.CreateObject("CDO.Message")
Set objCDOSYSCon = Server.CreateObject ("CDO.Configuration")
'Set and update fields properties
With objCDOSYSCon
'Outgoing SMTP server
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver") = smtpserver
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername") = username
.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword") = password
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25
'CDO Port
.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
'Timeout
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 60
.Fields.Update
End With
'Update the CDOSYS Configuration
Set objCDOSYSMail.Configuration = objCDOSYSCon
'Set and update email properties
With objCDOSYSMail
'0=Low, 1=Normal, 2=High
.Fields("urn:schemas:httpmail:importance").Value = intpriority '0=low, 1=normal, 2=high
.From = strFromAddress 'who the email is from
.To = strToAddress 'who the email is sent to
.Cc = strCc 'who the email is Cc'd to
'The subject of the email
.subject = strSubject
'set the email body format
if ucase(strBodyFormat) ="HTML" then
.HTMLBody = strBody
else
.textbody = strbody
end if
.fields.update
On Error Resume Next
.send
SendCDOEmail=Err
end with
'clean up
set objCDOSysMail = nothing
set objCDOSysCon = nothing
End Function
%>

A small simple line of code in ASP to add the real date to your site, give it that professional look!

If you wish to have the date on your site, and have not got the time to write all those complicated ASP, VB or PHP statements - then give this a try! Its a simple yet effective line of code to give you site a little professional touch where you want it.

To use this line write your normal HTML tages such as &

tages as normal and then just insert this line of code inbetween these tags:

<% Response.Write FormatDateTime(date, 1) %>

So, the finshed line should look something like this:

<font size="2" color=BLACK><b><% Response.Write FormatDateTime(date, 1) %></b></font>

Its that easy - give it a try! Just remember, for this to work - you need to save the page with the .asp file extension to make the ASP code work. If you leave it as .HTM or .HTML it will not work.

Use custom 404 error pages and ASP to create pseudo-URLs for your site, and hopefully help your visitors, and the search engines in the process.

Introduction

A lot of search engine optimisation (SEO) techniques can be frowned upon. The method I'm about to describe and develop could be considered as "spamming" if used in the wrong manner, so there is no guarantee made by this application. However, if you interpret this method as a way to make your URLs more logical, memorable and crawlable, you shouldn't have any problems.

The problem

Do you run a database-driven website? If so, you may well have ended up with page URLs with a mass of name/value pairs in the querystring.

Let's take an example of a store selling music CDs. A typical URL may look like this:

http://www.mydomain.com/product.asp?genreID=12&artistID=34&albumID=56

Fine, it works, and you may be crawled by the search engines, but the above address shows no logical structure to your online shop. Similarly, do you expect anybody to remember that address?

Search engines (SEs) *will* crawl these (although there is debate about the use of "ID" in querystrings), however, if you run a search through Google and you spot your search matches in the actual URL of the page, you may well be more likely to click through, as compared to a site linked as an address full of ID values.

mod_rewrite
Here's where Apache webservers have an advantage over Windows IIS systems. Using Apache, we can use the mod_rewrite module to powerfully manipulate URLs. This module takes the requested URL and translates it into a valid path to a page, passing the querystring data to the page. It does this according to a set of rules the webmaster writes into the .htaccess file.

ASP to the rescue
Unfortunately we can't use this on a Windows host. It just isn't supported. So, I've come up with some basic ASP logic to attempt to emulate this module. The following is only a basic example of what can be done. It can be adapted and made more powerful to fit your specific site needs.

So, back to our CD store example, how could we generate a more "friendly" URL. Wouldn't it be more user-friendly (and cooler, right?) to have something like this?

http://www.mydomain.com/products/rock/dire_straits/money_for_nothing/56

This way, people looking at the URL instantly know the content of the page, your shop's structure (products > genre > artist > album) therefore giving your URLs a real context. The extra advantage is that your URL now contains keywords, potentially increasing its chances of being picked out in the SERPs (Search Engine Results Pages). Bonus!

The above example, in literal terms, actually points to the root of a directory named "56", which sits within a directory named "money_for_nothing" which in turn is a sub-directory of "dire_straits", as a sub-directory of "rock", as a sub-directory of "products". Maintaining a structure of this kind would be a nightmare. Imagine browsing your site using FTP, having to click through all of those directories to reach the files! In reality, those directories don't exist. They never will. Here's where the fun begins.

A request of the suggested URL will flag a "404 Not Found" error, naturally. The structure doesn't exist. So, we can apply some cunning ASP code into our custom 404 page to interpret the request. Here is the code for our custom 404 error page. It needs to be saved as an ASP page.

<%
Dim strQuerystring, aParameters
strQuerystring = Mid(Request.ServerVariables("QUERY_STRING"),12)
aParameters = Split(strQuerystring,"/")
On Error Resume Next
Server.Transfer(aParameters(1) & ".asp")
If Err Then
Response.Status = "404 Not Found"
Server.Transfer("404message.htm")
End If
%>

Let's go through it line by line:

Option Explicit

Dim strQuerystring, aParameters

strQuerystring = Mid(Request.ServerVariables("QUERY_STRING"),12)

aParameters = Split(strQuerystring,"/")

On Error Resume Next

Server.Transfer(aParameters(1) & ".asp")

In this case, we attempt to load an ASP page. The path of this page is created by the second value in the aParameters array. For this reason, we pass "products" in the example URL. This way, it processes "products.asp". If your site also has an Articles section, you could pass "articles" in the URL and it will process "articles.asp".

If Err Then
Response.Status = "404 Not Found"
Server.Transfer("404message.htm")
End If

If an error is flagged, i.e. the Server.Transfer fails, load in our '404 message' HTML page. This page usually displays an apology for the page not being found.

Phew!

So, we now have a custom 404 page set up. If the first Server.Transfer works (i.e. we are using it to 'mask our URL), the corresponding ASP page is called. If it is a genuine 404 error, then the visitor is still given a 404 page by means of including 404message.htm.

What about the rest of the querystring?
So far we have only looked at the first part of the querystring. More importantly, the very first querystring value ("products") needs to be the same name as our ASP page which does all of the database processing and so on.

So how do we pass a value to this page so it can select the desired record?

For this, we need to make a slight adaptation to our products page.

Product record page
Our normal product record page would have taken the "productID" from the querystring, and selected this record from the database.

Now we're using Server.Transfer, this ID is no longer passed. If you look at our URL example again, you'll see the very last 'querystring' value is the albumID ("56").

As I said earlier, using Server.Transfer means that our "products.asp" loaded into our 404 custom error page inherits the Form and Querystring values. So by putting some code into products.asp we can grab this ID value.

It is here I need to stress this example was created as a generic handler page, designed to pass ONE value to a page. This one value must always be the LAST value in the querystring. Make sense? Here's an example.

http://www.mydomain.com/products/56

http://www.mydomain.com/products/1/2/3/4/56

http://www.mydomain.com/products/rock/dire_straits/money_for_nothing/56

In all instances, only the "products" and "56" values are important. Everything else is discarded.

Therefore our products.asp page only needs to grab this final "56". By doing so, all we have to do is ake the querystring again, create an array using each "/" as the delimeter as before, and take the final value.

<%
Option Explicit
Dim strQuerystring, aParameters
strQuerystring = Mid(Request.ServerVariables("QUERY_STRING"),12)
aParameters = Split(strQuerystring,"/")
strFinalValue = aParameters(Ubound(aParameters))
If strFinalValue = "" Then
strFinalValue = aParameters(Ubound(aParameters)-1)
End If
%>

The above should go into the top of products.asp. It selects the final value in our querystring. If a trailing "/" is found, it merely back-steps to obtain the previous, intended value.

Our SQL to select the product should now use "strFinalValue" instead of "Request.Querystring("productID")" as before.

Conclusions
Obviously there are some advantages, and indeed possible disadvantages in using this method.

• Pack your URLs full of keywords
  
• It's been suggested that .htm pages are prefered to .asp extensions. This way, links can be .htm but actually point to an ASP file.

• It can get very confusing. Almost all links won't actually point to 'real' URLs, so any off-line link checkers or WYSIWYG editors for links will be useless.
  
• Is there an extra server load using this method?
  
• Your logs will be filled with 404 errors, and may not give nice statistics for real page impressions. I've not had the time to see if this is true or not.

A point worthy of note is that because you're creating a pseudo-URL, your browser will have a hard time locating external files, for example relative paths to images. However, including the BASE tag in your HTML will mean you can keep all of your pages the same, leaving the relative links the same.

<base href="http://www.mydomain.com">

This means that although your page may look as if it is several layers deep through your structure, your paths can still be relative in the HTML. Sorted.

As you may know, it is possible in ASP to include one file within another. There are two ways to do that - one of which has potential pitfalls.

As you may know, it is possible in ASP to include one file within another. The benefit of doing this is that you can put common code routines into a single file and then include that file in any other code files that need to use it. This means that you can have a central code library and you don't have to keep replicating subs and functions all over the place (in the different files that need to use them).

Imagine I've now written all my common string handling routines into StringRoutines.asp and placed that file in a special folder (off the web root) called 'common'. I would typically do this because there are other common files I might want to write later (such as EmailRoutines.asp, and DatabaseRoutines.asp etc). But for now I just have StringRoutines.asp - so how do I make use of it from within other ASP files such as the default.asp file for example?

Very simple - you place a statement in the default.asp file that tells IIS to include StringRoutines.asp, and then later on down in default.asp, you can just call any of the subs and functions that are contained in StringRoutines.asp. Note: Although I said 'later on down', you can place the call to a sub/function either above or below the include statement. But you will help IIS compile the page faster if you make sure that subs and functions that are going to be called by other code appear in the file higher up from where they are called.

There are two different include statements that you can use. They are slightly different from one another, but one of them has potential pitfalls.

First, there is this way...

<!--#Include File ="common\StringRoutines.asp"-->

IIS will look for a folder called 'common' on the same level as the script it is about to execute (in this case default.asp) and look for StringRoutines.asp and slap the whole contents of that file right where you put the include statement (the actual physical file is not affected - just IIS's temporary copy). At this point IIS has a big text file with all the code in it, and it proceeds to compile it and send the results to the browser.

This method is OK until you come to wanting to include the file in an ASP page that is inside another folder off the root of the web. Let's say, the ListGuests.asp file in the 'guestbook' folder for example. You will have to remember to change the path to the include such that IIS will find it, otherwise you will get an error.

It would have to look like this...

<!--#Include File ="..\common\StringRoutines.asp"-->

But even if you do remember to set the path correctly, you will soon find that moving an ASP page that uses include files will stop working unless you change the path in the above statement.

Another downside is that if your scripts are executing on a host's server that has the 'no parent paths' security policy switched on (the default on IIS 6) - your include statements that use '..' to access the parent path of the current folder will not work at all.

The answer is to employ the alternative version of the statement that uses the keyword 'Virtual'...

<!--#Include Virtual ="common\routines.asp"-->

This will work no matter where your script is that contains the statement because you are instructing IIS where the common folder is relative to the web root.

It really is worth organising your code in this way, because as your site becomes bigger, the use of 'include files' will help you manage it more efficiently and with less possibility of error on your part.

Highlight occurance of a string within another string. Very useful for displaying matching keywords in database search results.

After creating a basic site search I wanted to highlight the occurance of the search keywords in the results displayed.

The normal Replace function in ASP is not sufficient because it is case sensitive and is really unsatisfactory. I've adapted some code into a reusable function that can be used on a search page.

<%
Function stringReplace(strSearchWithin,strSearchFor)
If Len(strSearchWithin) > 0 And Len(strSearchFor) > 0 Then
intStart = 1
intFound = InStr(intStart,strSearchWithin,strSearchFor,1)
Do While intFound > 0
strReplaced = strReplaced & Mid(strSearchWithin,intStart,intFound - intStart) & "<span style='background-color:yellow'>" & mid(strSearchWithin,intFound,len(strSearchFor)) & "</span>"
intStart = intFound + len(strSearchFor)
intFound = InStr(intStart,strSearchWithin,strSearchFor,1)
Loop
stringReplace = strReplaced & Mid(strSearchWithin,intStart)
Else
stringReplace = strSearchWithin
End If
End Function
%>

The matching string to be highlighted is passed to the page using a querystring parameter "search", for example:

searchPage.asp?search=word

The function is therefore called using the following syntax.

<%
Response.Write stringReplace("This is a very useful script for displaying highlighted search keywords.",Request.QueryString("search"))
%>