Tuesday, May 22, 2007

A few weeks ago I developed a website for my sister to help promote her mobile beauty therapist business.

Originally, I designed the website as a series of static html pages so we had the greatest amount of freedom in choosing a web host which helps keep her hosting costs down (There are loads of webhosts that will host basic websites for free with the hope that once you're with them you'll purchase extra features. In the end we settled for http://www.easyinternetsolutions.co.uk and so far we've had no problems) 

Yesterday, I needed to make a small change to the website that would affect all five pages and because I had manually created each of the pages it would be tedious to make the change on each page. Also, in the back of my mind I knew the price list would need updating on a regular basis to adjust the prices and to allow new treatments to be added. These requirements led me to revisit the way I produce the static HTML.

My idea was to extract all the dynamic portions of the website into an XML file then apply an XSLT transformation to produce the static HTML pages.
The XML contains:

  • The intra-site navigation
  • Full price list
  • Links to other websites

<links>
  <link>
    <text>Guild of Professional Beauty Therapists</text>
    <description>The UKs biggest professional beauty trade body. The Guild has over 5,000 members who are all fully qualified beauty and holistic therapists</description>
    <url>http://www.beautyguild.com/</url>
  </link>
</links>
<priceList>
  <section name="Waxing">
    <item text="Lip" duration="10 mins" price="£4.50"/>
    <item text="Chin" duration="10 mins" price="£4.50"/>

I created one XSLT document per output page and use nant's style task to apply the XSLT to the XML producing the HTML

e.g.

<?xml version="1.0"?>
<project default="BuildWebSite" basedir=".">
    
    <target name="BuildWebSite">

        <style style="index.xslt" in="website.xml" out="..\WebSite\index.htm" />
        <style style="treatments.xslt" in="website.xml" out="..\WebSite\treatments.htm" />
        <style style="prices.xslt" in="website.xml" out="..\WebSite\prices.htm" />
        <style style="contact.xslt" in="website.xml" out="..\WebSite\contact.htm" />
        <style style="links.xslt" in="website.xml" out="..\WebSite\links.htm" />
        
    </target>
            
</project>

 

Now, changes can be made to the XML data and the whole site rebuilt with the click of a button

Tuesday, May 22, 2007 7:33:17 PM (GMT Daylight Time, UTC+01:00)
Name
E-mail
Home page