Oct 31, 1999
November 1, 1999
When you look at a page on any major web site, chances are that the page was put together at the last moment, right before you viewed it.
Modern web site design has moved away from the idea that each page is a static entity, and toward the idea that each page is a dynamic entity pieced together on the fly by the web server.
The idea behind this is that one piece of the page - say, a banner or a table of contents - can be created once and used over and over again. Each time a web page is requested by a user, the banner or the table of contents is added to the page right then and there.
Web designers use this modular structure because it makes large sites (and even small sites) easier to design. If the site adopts a new logo, for example, the change needs to be made to only one file - the one defining the banner. The change is then reflected across the entire site.
So while the vast majority of municipal websites enploy a page-by-page static design, municipal websites of the future will need to adopt a modular style.
In this article I first discuss the concept of modular website design, then I outline different means of creating them. Finally, I talk about where modular website design will lead in the future.
The Concept
To visualize how this works, you need to visualize your web page, not as a single entity, but rather, as a complex entity composed of a number of distinct parts.
Consider for example, the page illustrated below, broken into four parts:
Each of the four areas bordered by the yellow boxes is defined in a separate file. In this case, the four ares are:
- The Banner at the top of the page
- The Contents at the left side of the page
- The content at the right of the page
- The Footer at the bottom of the page
In order to create a modular page, each of these four elements is read by the web server and combined into a single page. Some of the elements - like the Banner and the Footer - are used over and over by different pages.
As the diagram illustrates, each piece of the final page is maintained in a separate file, and the four files are brought together to form the final page.
How to Do It
Fortunately or unfortunately (depending on your point of view), there are many ways to create a modular web site. I will briefly list some of them, identifying the major advantages and disadvantages.
- Frames
Frames are a way of creating many windows in a single web page. A frame page defines each of the four frames, and tells the server where to find the file to put into each frame. More information on frames is available at http://www.w3.org/TR/REC-html40/present/frames.html.
Advantages: Frames are defined completely within HTML, which means that anyone with a text editor can create them. They are widely used and understood by readers.
Disadvantages: Frames are not easily bookmarked or referenced by search engines. Framed sites do not display properly in text-only browsers (a special
tag is required). - DHTML
DHTML stands for Dynamic HTML and is a combination of Cascading Style Sheets (CSS) and Javascript. Using DHTML, you can define a 'block' on a web page and then import text from another file to fill the block. Information on how to do this is available at http://www.dansteinman.com/dynduo/en/source.html
Advantages: Because it's a combination of CSS and Javascript, DHTML can be created by anybody with a text editor.
Disadvantages: DHTML only works on higher level browsers (Netscape 4 and up, Internet Explorer 4 and up). Also, Netscape is very unstable when running DHTML. And finally, DHTML is tricky - it takes a lot of practise to learn how to do it right.
- Server Side Includes (SSI)
A server side include is an HTML tag which asks the web server to run a program and insert the results of the progrom on the web page. Thus, you could use an SSI to read an external file and print that file on your page.
Advantages: SSIs give you a lot of control over the contents of your page. You can read external files or use your program to read a database, process some information, and more. More information about SSIs is available at http://www.irt.org/articles/js166/ .
Disadvantages: SSIs are written in a programming language like PERL or C, so they are difficult for the average page designers. They must be loaded onto the server, which means you have to have direct access to the web server.
- Cold Fusion
Cold fusion is a program which works alongside your web server to input information into your web pages. Cold fusion can read the contents of an external file or it can extract information from a database. You can recognize when a site is using cold fusion by the .cfm extension on page URLs. More information about Cold Fusion is available at http://www.coldfusion.com/Products/ColdFusion/
Advantages: because it works directly with the web server, Cold Fusion is faster than server side includes. Also, because Cold Fusion commands are just like HTML tags, anybody can create Cold Fusion pages with just a text editor.
Disadvantages: you have to buy and install the Cold Fusion software (or convince your internet service provider to do it). Cold Fusion is not available for all server platforms (for example, support for Linux will be available only with the upcoming release).
- Active Server Pages (ASP)
Active Server Pages are Microsoft's answer to Cold Fusion. Like Cold Fusion, ASP servers can extract information from a database and display it on your web page. You can recognize when a site is using active server pages by the .asp extension on page URLs. More information on active server pages is available at http://www.asp-zone.com/.
Advantages: ASP is integrated into Microsoft web servers and as a consequence are widely used. Many tools and resources are available.
Disadvantages: ASP requires that you adopt Microsoft as your platform and web server. ASP can be quite difficult to program, and if you make a mistake, you are able to crash your entire server, not just your web page.
- DHTML
Many sites build their pages using databases, and not merely external files. A discussion of database driven websites goes beyond the scope of this article, though.
That said, the fact that more and more websites are being driven by databases is all the more reason to adopt a modular web site design now. Even if you can only use frames, adopting the modular approach will make it a lot easier when you want to add database elements to your site.
Websites of the Future
It is also worthwhile to take a few moments to talk about where websites are headed in the future.
By using modular website design, websites are able to combine a number of files to create a single page. Today, these files are generally located at the same site as the main page.
But in the future, web pages will be compiled using information from a variety of sources. The web page you see when you go to the Town of Athabasca home page at http://www.lle.ab.ca/athabasca/ may dynamically include weather information from environment Canada, calendar contributions from the university, and traffic reports from the AMA.
This has already started to happen on the world wide web. Most of the banner advertisements that you see are actually delivered from a central site. A web designer adding a banner usually uses a server side include to load the banner and report that a person has viewed the banner (because these external sites support so many web pages, banner loads are often slow).
The problem with extracting data from another site and loading it onto your page is that your page has no idea which data to display. For example, using DHTML, I could load the Yahoo page in a box right below, but I would get the entire page when I only want the links and descriptions.
Another problem - of course - is that Yahoo might object!
In the future, sites which wish to provide content to other sites will store that content in specially defined eXtensible Markup Language (XML) files. So, for example, your site would gather the XML data from Yahoo, process it, then display the results on your page (I will have more to say about XML in future columns).
This has already started to some degree. If you create a My Netscape page, you see boxes containing headlines from a variety of sources. The Netscape server creates these web pages by contacting each external site and downloading a specially defined RSS file (RSS is a type of XML).
I use RSS files to make my personal website available to My netscape subscribers. My RSS file is stored at http://www.fallacies.org/downes.rdf and is retrieved by Netscape every hour. RSS files are very easy to create and can be registered with the Network Directory. Another example of the same technology in use is found in sites subscribing to iSyndicate. This company will provide news, photos or headlines for your web page. Parts of the service (such as news items) are by (paid) subscription only, but other parts are free. I create my daily news page ( http://www.fallacies.org/downes/iSyndicate.htm) using iSyndicate.
