netbeetle.com - The Making Of

Home / The Making Of

The Making Of

This page has information about how this version of the site was created. It may be interesting for web authors that demand the precision of html coded without the aid of WYSIWYG editors, but don't have the time to maintain a large site by hand.

Problems with the Old Website
The original netbeetle.com was never meant to expand into a collection of over 50 pages, but it hit that mark rather quickly. Also, while the majority of these pages were simple HTML, pages such as the OU Pictures gallery took much time to write or update by hand.

An initial solution to this problem involved the use of my SHTML to HTML program (available in the downloads/programs section). While that solution did work well to a point, there was still a large amount that had to be done manually to update the site. There had to be a better solution somewhere.

Why XML and XSLT
The solution I found was the Extensible Markup Language (XML) and Extensible Stylesheet Language Transformations (XSLT). These two W3C specifications allow for any XML document to be transformed into a new XML document with a different structure. This allows for the easy creation of an Extensible HyperText Markup Language (XHTML) based website, because XHTML is itself an XML based format. XSLT would also support the creation of HTML, but it seems like taking a step backward from the full potential of an XML and XSLT created website.

In the end this allowed this entire website to be created from just two files, where before it would have taken more than 50. Also because the template based XSLT language has conditional operators and works recursively. A website created in this way can have menus that are automatically generated from the content and change according to where in the website the user is. This can be seen in the branching and highlighting of the menu to the left.

The Conversion
It took much longer than I originally expected to go from a straight HTML to an XML based website. It is actually quite a lot to learn, and applying it to a complicated website with many different types of pages also proved difficult. But in the end, the change was well worth it. I should now be able to rapidly update my site at a moments notice.

I create all my XHTML pages on my computer using Saxon, an open source project freely available to everyone. However, it is also possible to generate pages live on a web server. But for someone that wants to create a large site without having to pay for any WYSIWYG software or a web server capable of generating dynamic pages, using XML and XSLT to build a complete website is a free way to make a site that rivals any on the web.

Source Files
Here are the full XML and XSLT documents that were used to create this entire site. Although they look very complicated at first remember that these two pages weigh in at just 75k compared to the transformed site that takes up 250k.
netbeetle.xml | netbeetle.xsl


Menu: Personal Info My Computer The Making Of Current Projects Games Papers Downloads Websites Graphic Design OU Pictures Links Link to Us Email Me	Home / The Making Of
	The Making Of This page has information about how this version of the site was created. It may be interesting for web authors that demand the precision of html coded without the aid of WYSIWYG editors, but don't have the time to maintain a large site by hand. Problems with the Old Website The original netbeetle.com was never meant to expand into a collection of over 50 pages, but it hit that mark rather quickly. Also, while the majority of these pages were simple HTML, pages such as the OU Pictures gallery took much time to write or update by hand. An initial solution to this problem involved the use of my SHTML to HTML program (available in the downloads/programs section). While that solution did work well to a point, there was still a large amount that had to be done manually to update the site. There had to be a better solution somewhere. Why XML and XSLT The solution I found was the Extensible Markup Language (XML) and Extensible Stylesheet Language Transformations (XSLT). These two W3C specifications allow for any XML document to be transformed into a new XML document with a different structure. This allows for the easy creation of an Extensible HyperText Markup Language (XHTML) based website, because XHTML is itself an XML based format. XSLT would also support the creation of HTML, but it seems like taking a step backward from the full potential of an XML and XSLT created website. In the end this allowed this entire website to be created from just two files, where before it would have taken more than 50. Also because the template based XSLT language has conditional operators and works recursively. A website created in this way can have menus that are automatically generated from the content and change according to where in the website the user is. This can be seen in the branching and highlighting of the menu to the left. The Conversion It took much longer than I originally expected to go from a straight HTML to an XML based website. It is actually quite a lot to learn, and applying it to a complicated website with many different types of pages also proved difficult. But in the end, the change was well worth it. I should now be able to rapidly update my site at a moments notice. I create all my XHTML pages on my computer using Saxon, an open source project freely available to everyone. However, it is also possible to generate pages live on a web server. But for someone that wants to create a large site without having to pay for any WYSIWYG software or a web server capable of generating dynamic pages, using XML and XSLT to build a complete website is a free way to make a site that rivals any on the web. Source Files Here are the full XML and XSLT documents that were used to create this entire site. Although they look very complicated at first remember that these two pages weigh in at just 75k compared to the transformed site that takes up 250k. netbeetle.xml \| netbeetle.xsl

Copyright © 2001-2004 Joshua Beitelspacher.