Using XML and XSLT to Personalize a Web Site Part 2: XSL Transformation Stylesheet BasicsCreating XHTML from XML
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The first article in this series on Web site personalization gave you a view of the overall project. We will be using XSL Transformations to provide customization and personalization for a Web site, allowing the user to choose what content he or she sees, and how he or she sees it to an even greater extent than is practical with Cascading Style Sheets. Now we're ready to start implementing those plans.
Before we can do any of that, however, you have to know the basics of XSLT style sheets. It's impossible to cover the entire topic in one article, of course, but we'll discuss the basic techniques you will need for any transformation project. This article assumes that you don't know XSL, but that you're familiar with the basic structures of XML files, such as elements and attributes.
In this article, we will take the home page for a fictional science fiction news magazine, Primary Outpost, and demonstrate how to convert it from XML to several different looks of HTML using style sheets. In the third article, we'll allow users to choose which look they prefer for their pages.
NOTE
For a different look at the process of building the entire Primary Outpost site, including news, auctions, and a storefront, check out Active Server Pages 3.0 from Scratch by Nicholas Chase and Jesse Liberty (Que, 1999, ISBN: 0789722615).
Ultimately, users will choose the information included on their home page, but for now we assume that the page contains the following:
- Logo
- Blurb
- Navigation
- Gossip
- Copyright
We could go on and add advertising and so on, but we'll start simply with a basic page, as shown in Figure 1.
){kind=link}
Figure 1 The completed home page.
The HTML that makes up this page is fairly simple, with a single table used for layout and Cascading Style Sheets used to tweak its appearance a bit, as simulated in figure1.html. You can, of course, improve on this design, and build your "new and improved" layout the same way we'll build this one.
Getting Ready
This article deals solely with the creation of XSL style sheets to transform static XML documents into static HTML documents, so all you really for this article is an XSLT-capable browser. At the time of this writing, that means Microsoft Internet Explorer 5.x.
If you want to follow along, create a directory and place the source files (XSLTPersSource2.zip) in it. This download includes the images used on the site, as well as any XML documents needed, and the final XSL style sheets.
You should be able to use your browser to open the index.xml file and view its structure to start with, as shown in Figure 2.
){kind=link}
Figure 2 The untransformed index.xml file, viewed in Internet Explorer 5.5.
Determining the Namespace
The first item of business in using an XSL Transformation style sheet is determining which implementation of XSL you're using. (If you already know which implementation of XSLT your browser uses, feel free to skip ahead to the next section.)
Older versions of IE used the "working draft" version, rather than the full recommendation. The version is indicated in the style sheet by the namespace, discussed in the next section. To determine which namespace you need to use, do the following:
-
Use your browser to open rec.xml.
-
If the page looks like Figure 1, stop. You will use the recommendation namespace, http://www.w3.org/1999/XSL/Transform. If most of the page is missing or your page looks more like Figure 3, continue to step 3.
Figure 3 When good style sheets go bad: The results of a transformation with the wrong namespace.
-
Use your browser to open wd.xml.
-
If the page looks like Figure 1, stop. Your browser is set to use XSL, but is using the working draft namespace: http://www.w3.org/TR/WD-xsl. Otherwise, continue to step 5.
Your browser isn't configured to use XSL transformations. Visit http://www.microsoft.com/windows/ie/default.asp, and update your browser.
){kind=link}
Now that it's settled, we're ready to start working on the files.