About my PRIOR XSLT site
<—— NOTE: this all refers to my prior site and uses some archived “Wayback Machine” page links so you can still see the code ——>
[ I used XSLT until Sep 2008, when I converted my site to client-side/browser JS ]
I’m using 100% XML, XSL, and (client side) XSLT for my superneato new look. HTML is output by XSL (a language for transforming XML documents into other XML or HTML documents). I have a single HTML file for the “redirect” page here. There is just a skôtch of javascript for “mouseover” events on my time-lapses video page. But other than that, it’s just XML and XSL (and of course, CSS 8-).
How this site works
Each XML page simply contains the page-specific data as normal HTML elements inside the XML declaration. The declaration establishes to a web browser that it is XML, and then loads my styles.xsl XSL stylesheet. The XSL stylesheet outputs the top header and the left-hand navigation. Next, it “copies” all HTML from the XML as the page-specific content. Finally, the XSL stylesheet outputs the footer.
For example, this is what the source of hunter.xml looks like:
<?xml version="1.0">
<?xml-stylesheet rel="stylesheet" href="styles.xsl" type="text/xsl">
<tracey tfile="$RCSfile: xslt.php,v $"
lastmod="$Date: 2015/05/10 05:27:34 $"
title="chez Tracey Jaquith">
<div style="margin-top:30px; text-align: center;">
<a href="https://hunterleebrown.com">Hunter's Website</a>
(he's Super!)
<img src="images/superman.jpg"
title="Hunter is Superman"
alt="Hunter is Superman"
width="640px" height="480px">
</div>
</tracey>
That’s it!
My XSL, styles.xsl, will tell the browser how to output HTML.
(NOTE: MSIEv7 requires the rel="stylesheet" in the stylesheet declaration
or else it will assume your XSL is really an RSS feed and not display!)
My XSL will start with the <html> tag and output the <head> and start the <body>.
The body contains a main table which will:
- output an overall site “header” row
- output an overall site “left hand navigation column” in the next row
- copy the XML “content” into the next column
- make a final 3rd row and put an overall site “footer” in it
There are some other special things I do like:
- Have styles.xsl “load”(!) an XML file. For example, I load quotes.xml because a random quote is used in index.xml
- Generate a random number in XSL (a pseudorandom). See the top of styles.xsl to see how I finally figured a sneaky way to make a random number (to pick a random quote in index.xml, to pick a random picture in pictures.xml).
- Use CVS checkin special variables like
$Date: 2015/05/10 05:27:34 $and$RCSfile: xslt.php,v $, which get automatically updated on checkin, to allow for page-specific information in the footer (like what page you are looking at and when it was most recently updated).
But other than that, it’s pretty straightforward.
You crackhead, why XML?
Some benefits:
- My prior website provider gave me no access to CGI (so PERL, PHP, and such were out of the question).
- By putting all my HTML in XML, the HTML is forced to be validated as SGML. This allows me to stay on my toes and forces me to have to output well-formed SGML/HTML.
- Similar to the first point, since I could not do much dynamically on the server side, I can have the client’s browser (which must understand XML and XSL, which fortunately all modern browsers do and have for awhile) do the “XML + XSL” transforming for me.
- Viewing the source by browsing the XSL page itself with a browser is supernice as the browser does all the XML prettying, formatting, and coloring.
- You can avoid most Javascript in lieu of the pretty sophisticated XSL language builtins and rules once you get the hang of it.
- You can test and develop without a webserver running (like needed for executed CGI) – you can just drag files to a webbrowser.
It took me about a week of “moonlighting” to learn all this and convert my site.
So please use any technique(s) you like from my site from what I’ve learned!
