Tonight was as good a night as any to learn a little bit, and so I reinvented John Blyberg's virtual catalog card using XSLT and CSS. It's very rough right now, but the results are good enough to show.
The URL that shows everything is this uber-long monstrosity:
http://www.w3.org/2000/06/webdata/xslt?xslfile=http%3A%2F%2Fwww.superpatron.com%2Faadlexample.xsl&xmlfile=http%3A%2F%2Fwww.aadl.org%2Fcat%2Frest%2Frecord%2F1249810&transform=Submit
Go ahead, click, it won't bite. See?
In real life you would not use that - in real life the XML from the catalog would have a style sheet with it of some kind. But just to play along, here's how you parse that.
The first bit from w3.org is the public xslt translator they run. Be gentle, and don't expect it to be a production service.
The second part is the XSL file, http://www.superpatron.com/aadlexample.xsl . It's a programming language written in XML that takes an XML file and turns it into anything, very typically another XML (or HTML) file. Your web browser has that programming language built into it. If you look at the page it's not actually all that complicated - you're essentially grabbing elements from one page and plunking them into a template. I'm at about the edge of my knowledge with this file right now, but it does work....
This xsl file in turn includes a CSS file, http://www.superpatron.com/aadlexample.css . The CSS is a style sheet that makes the page look pretty - it selects things like fonts, background images, spacing, and other layout elements for a page. The CSS here is very minimal. You'll see that it includes a background image from John's card catalog collection on Flickr.
Finally, there's an XML file, http://www.aadl.org/cat/rest/record/1249810 , which has the raw catalog information from the AADL's site. It is marked up in such a way that all of the fields in it are readily accessable. (The only thing I noticed missing from it was subject headings.) The XML could, if it wanted to, specify an external XSL file to be interpreted by the browser.
String all of this stuff together, and you get this:
but this is now data, not just an image, and you could (though i stopped before I did) have some of the elements be live links.
Technorati Tags: css, xslt, xsl, annarbor, library, cardcatalog, library2.0
Recent Comments