Need Add Your Sitemap?

Sunday, 7 October 2007

1.4.3. Separating Content from Design

When you create content web sites, it's imperative to use mechanisms that separate web page content from design. The purpose of separating content from design is to let you:

· Easily change the look and feel of a site without the change in overall site design having any impact on the content

· Tweak positioning and other ad-related variables to maximize revenue without having any effect on site content

The simplest way to achieve these goals is to use includes server-side includes to position site graphics such as navigation bars. A server-side include is a file that the server includes within another file (the inclusion is specified by a special directive). When you view the HTML source code in a browser, you have no way of telling whether the main file was generated using includes or not.

Includes can also be used for advertisement code, such as that provided by Google's AdSense. By changing the code in a single include, you can change the navigation bar or advertising parameters across all the content pages on an entire site.

I explain the mechanics of using includes to separate content from design in "Content Architecture," later in this chapter.

Sitewide Changes to Styles

It's somewhat less important than the ability to easily do sitewide changes of advertisements and site graphics such as navigation bars, but it's still nice to be able to perform sitewide changes of text styles. It is less important because leaving everything as reasonably sized black text on a white background is usually just fine.

Style attributes can be set using a server-side include. Each content page then includes the include file, which contains the styles for the content. Text styles can be changed on a global basis simply by changing the definitions of the styles within the include file.

Another simple mechanism for doing sitewide font and font-size changes is to use an external style sheet to define the fonts and sizes to use with various types of text (each content page references the style sheet). To effect a global change, simply change the style definitions in the external style sheet.

Server-side includes work well to separate key design elements (and advertisements) from content, provided your content site doesn't have too many pages and assuming that each page doesn't have a great many repetitive elements.

If many of your content pages are essentially the same meaning they have the same elements but the value of the element differs from page to page you should probably be using a templating system. Templates use special tags for the common elements, with the actual content for each page that replaces the special tag specified, often using content stored in a database table. This means that an appropriately written template file and one or more database tables can populate and create a whole raft of web pages, one for each row in the table.

PHP is one of the most popular server-side programming languages available on the Web (most inexpensive Linux/Apache web host services let you program in PHP without any additional configuration effort). You can find out more about PHP at http://www.php.net or by picking up a copy of O'Reilly's Programming PHP: Creating Dynamic Web Pages by Rasmus Lerdorf and Kevin Tatroe.

If you are a programmer, or have access to programming talent, you can create your own templating system using PHP or some other language. But why reinvent the wheel? A popular PHP templating system, available for free download, is Smarty , http://smarty.php.net. One of the great features about Smarty is that it caches a web page the first time it is generated from a template. Subsequent calls to the page, unless the template or data have changed, open the cached page meaning the web site isn't slowed down by page generation each time the templated page is opened.

A server-side include mechanism is a great start for creating a manageable content site andfrom a technology stand point within the grasp of almost anyone. (I explain the server-side include mechanism and how to use it to lay out a content site to receive advertising in "Content Architecture," later in this chapter.)

Templating is a good next step if you (or an associate) have the technologic sophistication and expect to be managing content sites with thousands of pages. It's particularly important to use a system of templates if you expect to generate pages using data from a database.

Suppose you are managing a site with not thousands, but hundreds of thousands of pages. You have multiple authors, a team of editors, and a work flow process to make sure that work is fact-checked, copyedited, and approved before it is published. In this case, you'll want to use Web Content Management software (WCM) to provide content and design separation, template features, workflow management, and more. Commercial WCM packages are available from vendors including IBM, FileNet, Interwoven, Microsoft, Stellent, and Vignette.

"Not everyone recognizes that, in fact, blogging software such as Movable Type and WordPress in effect manages web content using special tags and a template system. You can use WordPress, in particular, to manage pages that are not part of a blog. So if it's appropriate for your particular project, consider creating a "Blogosite"a content web site managed by blogging software such as WordPress."

No matter what mechanism you use, it is vitally important to separate form from content so that you can easily keep your site design fresh and tweak advertising positions.


0 Comments: