by Ed Sawicki - January 7, 2021
upated in 2023, 2026
The IT industry has settled on fashionable ways for non-technical users to create web pages. But these tools are overly complicated and have poor quality control, reliability, and security. Break-ins are not uncommon. Users are encouraged to regularly apply patches to reduce the liklihood of security issues, but this is often beyong the capability or interest of the users.
This article is a gentle introduction to a better way. It involves creating and updating your webpage content on a separate computer that is not the web server. Additionally, keeping your content in XML format and using XSL to transform it into HTML allows ordinary users (who don't know technologies like HTML) to manage content.
Note that this is only one specific method. There are others that I may write about in future articles.
This past week, an organization that I do volunteer work for had its website hacked. It is a WordPress system that I have nothing to do with. The site was down for days. Plenty of time for the bad guys to extract whatever information was on the site. In this case, some personal information for about 200 or so people.
Many small sites that are not professionally administered get hacked. Often, when the site is repaired and running normally again, there's relief and the hack quickly fades from memory. The information that may have been harvested from the site by the bad guys is also soon forgotten.
Why do so many of these sites, like WordPress, get hacked? There are a few reasons, but the primary one is complexity. Using a website (WordPress) to create other websites is a complicated affair, and in the computer world complexity is the enemy of security.
None of the websites that I've created and managed since the mid-1990s have ever gotten hacked. What's the secret? Keeping things as simple as possible.
Simple doesn't mean you can't have sexy graphics, sound, and video on your site. You can have all that. The simplicty comes with how the site is coded and how it operates. The more you know about the underlying technologies, the simpler things can be.
That underlying technology for webpage creation includes HTML, CSS, image and video formats, sound formats and controls, and JavaScript. For sites with large or complex data requirements, knowledge of SQL is needed.
XML
Around 2006, I started using XML to create some webpage content. Recently, I expanded my use of XML to allow the creation of a large newsletter (as one large webpage) without the authors and editors knowing anything about HTML or related technologies. This week, I expanded my use of XML to build an entire website without the content creators or editors knowing HTML.
So what is XML and why is it so great?
It is called the Extensible Markup Language or simply XML. XML allows for the creation and storage of data in a format that's easily read by both humans and machines. It's an open standard not tied to a vendor in any way. You won't experience future compatibility issues due to a vendor modifying their proprietary product or specification. Your data will be retrievable and understood for years and years into the future.
This will not be a tutorial on XML. There are many tutorials on XML available and a few of them are listed in the Sources section below. Here's a simple example of a name and address stored in XML:
<record> <customer>Rabbit Chemicals</customer> <address>404 Main Street</address> <city>Salem</city> <state>Oregon</state> <zip>97301</zip> </record>
If a web browser received this, it wouldn't know what to do with it because the tags <customer>, <address>, <city>, etc. aren't HTML tags. The web browser won't know how to render them. But these tags are easily understood by people. XML allows people to markup their content using tags that are familiar to them and accurately describe the data.
At some point, that XML must be translated to HTML if a web browser is to render it. This translation is accomplished by a language called the Extensible Stylesheet Language or XSL.
XSL
Associated with XML is something called XSL, which stands for Extensible Stylesheet Language. XSL is a language that allows for the conversion of XML data into another form. When the XSL language is used to transform XML data, it is called XSLT, short for XSL Transform.
The diagram below shows examples of XML data transformed into other forms:
The XML data can be converted into HTML for your webpages. That same XML data can be converted into a PDF document, or an SVG image. It might be converted into a sound or video file. And it might be fed to some other language processor to produce a data stream for your laser printer.
The XML data may be created and modified by people who know little about how all this happens. But the XSLT must be written by someone who has a good understanding of it.
Benefits
There are several benefits to XML and the techniques presented:
- Users with low to moderate computer skills may generate content themselves without having to know HTML, CSS, and Javascript.
- Users who produce content can use their own domain-specific “language” (markup).
- The quality of the generated code is consistent and usually error-free.
- After an initial development cycle that may range from minutes to hours, sites that have reoccurring web page formats can be produced quickly with simple tools, such as a text editor.
- You're not limited to your content being destined for a web page. Your content can be output to other formats such as a printed page, PDF files, etc.
My history with XML
I came upon XML and XSL back in the late 1990s. I didn't understand the need for it at first. I remember saying, “It's so verbose!”, to a friend. I was fortunate to have this friend. He was patient with me and spent time making me realize that my impressions were prejudices and were illogical.
Google helped light a fire under me because their Google Maps API required that I pass my mapping data in XML format. I created dozens of maps. When it came time to develop a family of apps for an employer in 2008, I chose to base it on XML. I taught fellow workers, who were resistant at first, how to maintain the data.
When my employer needed a way to print forms based on data contained in a nationwide database, my program extracted that data, put it in XML format, and passed it to a engine that produced a print stream directed to a laser printer. That engine was XML-FO at the time, but it could have been any of several engines just by changing the XSLT.
That familiarity with XML encouraged me to learn about SVG and its significant benefits. SVG is a way to generate vector graphics using XML data. Now, XML, XSLT, and SVG are central to many of my projects.
You'll see the acronym XSLT used frequently. It simply refers to XSL Transform—the process of translating the XML data to the compatible format of the destination. It's not the intention of this article to teach you XSLT. There are tutorials listed in the Sources section below. However, here's an example of an XSLT that transforms the above XML into an HTML table.
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="https://www.w3.org/1999/XSL/Transform"> <xsl:template match="/record"> <table class="adr_tbl"> <tr><td><xsl:value-of select="customer"/></td></tr> <tr><td><xsl:value-of select="address"/>, <xsl:value-of select="city"/>, <xsl:value-of select="state"/></td></tr> <tr><td> <xsl:value-of select="zip"/></td></tr> </table> </xsl:template> </xsl:stylesheet>
When the transform occurs, the customer name replaces <xsl:value‑of select="customer"/>. The address replaces <xsl:value‑of select="address"/>, and so on. The result of the transform is this:
<table class="adr_tbl">
<tr><td>Rabbit Chemicals</td></tr>
<tr><td>404 Main Street, Salem, Oregon</td></tr>
<tr><td>97301</td></tr>
</table>
Web browsers certainly know what to do with this. You would, of course, provide a CSS style called adr_tbl that styles the table.
The plumbing
There are many ways to implement XSL transforms on XML data. You have the maximum choices when you use the Linux platform. How you implement this ranges from a completely manual system to full automation based on your needs. One of the easiest ways is to have your web server do the transforms. Then, you just need to move your XML files to the web server as you do now with HTML files. Of course, you'll need to configure your web server.
Popular web servers, such as Nginx, Apache, and IIS have plug-ins for XSLT.
You might not want the web server to perform the transforms, especially if the information is static and changes infrequently. Why transform data each time it's accessed when you can transform it once. The transform could be the last step in your content creation, just before you upload the resulting HTML to the web server. This is what I generally do.
I use an open-source program called xmlstarlet to do the transform.
Scalable Vector Graphics (SVG)
Scalable Vector Graphics files contain XML data. You could learn to transform your XML data directly into SVG. The significant benefit of SVG is one of the words in its name: scalable. The scalability of SVG is a huge advantage when you're dealing with adapting your web site content to the wide variety of devices and their screen sizes that users will be viewing your site with. SVG can scale from the smallest screens to the largest.
When you hear SVG, do you only think of graphics images like drawings and charts? If so, you need to know that an SVG can contain almost anything. It could be an entire web page. A good example is a complex table I created entirely in SVG. It scales to any size screen. If you view it on a computer where you can change the width of the browser window, change the width of the window and watch the table/page scale to the new size.
Note the SVG contains links to other web pages. CSS is used to style elements inside the SVG. This particular SVG is enclosed in an HTML5 wrapper so other things can be added in the HTML <head> section.
Output to PDF
Your XML data can be converted to PDF documents using a variety of software. One such program is the open-source SILE. Read the section called SILE versus Word in the linked page to understand just what SILE is. You will likely have to write a XSLT to transform your data into XML tags that have meaning to SILE but you only have to do this once if your PDF documents will be similar.
Summary
It's wise to get up-to-speed on XML and XSLT and have it in your bag of tricks for solving problems in efficient ways. This is especially sage advice if you're closer to the beginning of your IT career than the end.
Sources
w3schools.com: XSLT Introduction
Build an XML/XSLT driven Website with .NET
Stack Overflow: Is it a good idea to use XML and XSLT for websites?