Sunday, 14 September 2008

Web site development

Over the last month, my primary focus has still be writing the thesis. At the end of last week, a full draft of the thesis was completed. There has also been an emphasis on finding work. This saw me having to complete a programming project using Flex as reported on 23 August. Over the weekend, I returned to building our own website (www.thompsonz.net).

The site was originally built using a template design by Andreas Viklund (http://andreasviklund.com). The difficulty was that the common items such as the menu was on every page leading to difficulties with maintenance. When I taught a course on the design of web-based information systems at the beginning of 2007, I started building an XML based version of the site to overcome this maintenance problem. With last year's trip to Finland and the pressures of the thesis, the completion of the project was delayed but this weekend, I finally managed to convert part of it to being generated from XML. The outstanding issues proved easy to resolve and now the focus can shift to putting up some content.

Not directly linked to the project to translate to XML was putting up a couple of photo galleries. This has been done using Adobe Lightroom and its Flash gallery template. Having learnt Flex programming, the next goal is to create our own Flash / Flex based galleries.

When I taught the course, I endeavoured to get the students thinking about the separations between content, structure and format. This also included separating common content from the specific content of a particular page. The diagram that I used to try and explain my objective is on the right.

It is this usage of XML and XSLT that I have used for our website. The schema (XSD) provides the rules for structuring the content (XML). I created an common content template (XSLT) that also transforms the XML to HTML. I am using XSLT version 2. The actual formatting is controlled by a base style sheet (CSS). There are a couple of subsidiary style sheets that are used to give certain groups of pages their own style. When transformed, I end up with the HTML pages that are the website.

I discovered that Microsoft's Internet Explorer will accept the XML file as input and initiate the transformation. It then displays the file as expected. Unfortunately Firefox and Google Chrome look like they do the transformation but they don't format using the style sheet (CSS). I wonder whether this is because the style sheet is inserted by the transformation. A small problem that I will explore later but since it is fairly easy to generate the pages using the Oxygen XML editor, I don't need to do the translation on the server or in the browser. This may change as the number of pages making up the website increases.

The other discovery is that Microsoft's Internet Explorer needs and DocType declaration before it will display the generated file correctly. Firefox and Google Chrome don't. However, ensuring that you have a valid DocType statement isn't that difficult.

Overall, another good learning exercise that has provided an easier to maintain website without purchasing a lot of expensive tools.

No comments: