XML, XSL-T, HTML, CSS, XSL-FO, FOP, and PDFs !!!

[smoseley]

Whew!!!! What a mouthful!

Ok, well I've been playing around with a lot of new technologies for the newest BitTime site. I thought I'd take this opportunity to showcase them to you guys so you can see some cool stuff and hopefully be inspired to go try them out yourself !!!

Stylesheets

We all probably know what CSS is. Well, I'm using a pretty new technology here that allows for dynamic CSS application. You've probably seen it elsewhere before, but here it is again!

Here's a page from the new BitTime site:

http://www.stg.bittime.com/index.jsp...ons&style=base

Ok, nothing special, right? Ok, well here it is with a different stylesheet applied:

http://www.stg.bittime.com/index.jsp...ns&style=clean

Same HTML, but different CSS changes the whole look!

Here it is with no stylesheet applied:

http://www.stg.bittime.com/index.jsp...motions&style=

Since most of the look of the site is created with CSS, it's very easily changed.

Cool stuff! This could allow you to customize the look & feel of the site based upon user preference or technology.

Templates

What I call "Templates" are data-organizing structures created with XSL-T (XML Stylesheet Language - Transformation subset). I use them in this CMS tool to organize the data into coherent HTML structures, varying based upon how the data is to be presented.

Because I'm using XML as the data source, I can apply different templates to the different data sets. For example, the "Clients" page. The default template is the "clients" template, which lays out all of the logos of the clients in a pretty page:

http://www.stg.bittime.com/index.jsp...ts&style=clean

But let's say I want to use a different template! Well, I could apply the "section" template which is the default for sections (identified by the links at the top of the site):

http://www.stg.bittime.com/index.jsp...ts&style=clean

Notice now there are links to client "pages" at left? Clicking them will take you further into the dataset (into undeveloped terriroty!)

This is a nice technology, because you could eventually allow people to customize their experience with layout templates that fit their needs.

FOP it Baby!

The ultimate reason for all these tools was simplicity. We wanted to have ONE data source for all of our marketing materials. This means we wanted our PDFs and HTML generated from the same source. That's where XSL-FO (XML Stylesheet Langage - Formatting Objects subset) and FOP came in. FO is like the HTML of print - it's a markup language that defines how something gets printed. It's very explicit and powerful.

If you go to this page and scroll to the bottom, you'll see a link that says "download pdf":

http://www.stg.bittime.com/index.jsp...mer_promotions

Clicking that link should prompt you to download an acrobat file.

FOP is an Apache product that allows transformation of XSL-FO into PDF or other printable file format (Post Script, for instance).

I'm still working on the FO transformer (an XSL-T stylesheet that generates XSL-FO from XML), but the functionality is there.

Fun stuff !!!! :-)

Now to package it and sell it :-P

[Wired]

Same HTML, but different CSS changes the whole look!

Cool stuff! This could allow you to customize the look & feel of the site based upon user preference or technology.

www.csszengarden.com

Welcome to the 21st century

[smoseley]

You've probably seen it elsewhere before, but here it is again!

Now find me examples of dynamic XSL templating and FOP PDF generators! (Hint: start at apache.org!)

[smoseley]

Too much too soon, I guess?

[Brak]

Well, I've been using XSL extensively with my work... and I can say it's a great tool - the best thing I've used to separate Engineering work from Web Production - let the engineers do their thing, let web production do theirs.

As far as FOP.. haven't played around with it. Stylesheets... well, you know my stance there

[smoseley]

Kyle,

Doesn't XSL Rock?! The best thing (I think) is the ability to create an XML editor that allows content providers to create XML constructs that represent an HTML (or whatever) construct. No need to have HTML guys creating content anymore. If someone wants to add a feature window, they add <featureWindow>This is my feature!</featureWindow> - and if you use a WYSIWYG XML editor, they don't even have to type in the code, just drag and drop a feature window into the content!

Man, you have to look into FOP, it's the natural connector between the web and print. Also look into Batik and SVG when you get a chance.