About This Website

The Computer Image website was designed as more than just a simple 'brochure' style website. One of our primary goals was to provide dynamic and useful content to our customers and potential customers. Another goal was to showcase some of our web design and programming techniques, showing how modern programming environments and server platforms can be used to rapidly build active, database-driven websites.

This section of the site details some of these techniques and technologies used in creating the site, and how they can be used to turn a regular 'static' website (i.e. one with content that does not change regularly) into one that is both dynamic and easy to update.

The criteria for this latest revision of the website were as follows:

• Separate all code from content to provide better control over source code used across the site.
• Implement an easy-to-use Template system so that all pages have a consistent look and feel.
• Provide 'non programmers' with easy access to update page contents without breaking any of the underlying code.
• Improve page load times over the previous version of the site.
• Revise the look and feel of the site to be in line with our new corporate image and stationery.

Incredibly, all these goals were met over a period of two days by a team of just four people; one graphic designer, two programmers, and one content updater.

The Toolkit

Firstly, let's look at the software used to create, host and maintain the site. In no particular order, they are:

• Internet Information Services 5.0 (part of Windows 2000 Server)
• Microsoft .NET 1.1 Framework - in particular, ASP.NET
• SQL Server 2000
• Microsoft FrontPage 2003
• Visual Studio .NET 2003

ASP.NET provides the framework on which to build dynamic content into our website. Using ASP.NET, we can quickly and easily retrieve data from a SQL database or XML file and present it on a web page - this data could be in the form of text such as the 'Did You Know' message, hyperlinks, or even images. There is virtually no limit to the type of information that can be stored, and by having it in a database it makes the process of filtering and sorting data simple and very fast. Information can be tailored to suit whatever requirements we have, such as sorting articles by age, or randomly choosing a Did You Know message.

FrontPage 2003 is the tool used to build the individual web pages that make up the site. We use it for constructing the static parts of the website because of its ease of use, and ability to use template files to provide a consistent look and feel across the whole website with very little effort.

Visual Studio .NET 2003 is used to build the data-driven parts of the website. Visual Studio is not the only way of creating ASP.NET web pages, however it does make the process of creating and debugging code simpler, and therefore quicker. Why waste time doing things the hard way when there is a smarter and more efficient way?

By using all of these tools, development time for a data-driven website can be significantly less than that of other technologies. The end result is that the customer can get the benefits of having a dynamically updated website without having to pay thousands of dollars in programming costs.

The Techniques

This section goes into more detail about specific ways we have enhanced the site. These are just some of the techniques that can be used to improve the manageability and performance of a dynamic website, but have been presented here because they will in most cases provide the most improvement for least amount of effort.

1. ASP.NET User Controls

User Controls provide a clean and simple way of separating general website content and dynamic elements, such as the News Articles groups, and the 'Did You Know' information nugget. By implementing User Controls instead of writing code against specific web pages, it makes it possible to re-use code across many pages, as well as make it easy for non-programmers to update any static text or graphics that may be on the page along with active content.

An example of this is the News Articles section. The front page of our site contains three user controls; News Articles, Security Articles, and 'In Focus' Articles. These provide a quick overview of the latest articles that we have placed on the site. The exact same User Controls are used elsewhere on the site to provide an archive of all posted articles, meaning that code is not duplicated, therefore reducing development time and maintenance time.

2. FrontPage Templates

FrontPage 2003 provides a simple but effective Template system, which makes creating a consistent page layout across the website a breeze. One page template is created that contains the basic page layout, including the title graphic, side menus and footer. These regions can be 'locked out', so that when someone is editing the page, they cannot accidentally put information in the wrong place, or worse still, break the website because they have deleted part of the header or footer.

Once all pages are converted to using a template, it is a straightforward process to later update the template and propagate these changes to the rest of the site, instantly updating the look and feel of the entire website. FrontPage templates also work well in conjunction with ASP.NET User Controls - in our case, this was a critical requirement for a useful template system.

Whilst not being a FrontPage specific technology, it is also worth mentioning the use of Cascading Style Sheets across the site. A Cascading Style Sheet (or CSS) file defines the visual representation of various elements across the site, for example how a Table should be formatted, what colours are used, and what fonts and sizes should be used for paragraph text.

Part of the template file contains a link to this CSS file, meaning that all content in the site is presented in a consistent manner.

3. Data Caching

Caching is a technique used to speed up access to commonly referenced pieces of information. Caching has been implemented on the 'Did You Know' message and the site-map file used to build the hyperlinks in the left-hand menu bar. These normally pull data from a SQL database and an XML file respectively, however without caching, this causes the database to be accessed every time someone visits a different page on the site (which can be quite often if many people are accessing the site simultaneously).

The 'Did You Know' information is now cached for a period of 5 minutes, meaning that the database is only accessed once every 5 minutes for this information, no matter how many people access the site and navigate their way through it. The site-map XML file is also cached in a similar manner, however it is only ever re-read when the file is modified.

By implementing caching on these items, and in a few other specific areas, page load times are reduced. This helps to provide a more pleasant and engaging experience for visitors to the site.