Archive for May, 2010|Monthly archive page

Adventures in XML land: combining Excel, XML, HTML and JavaScript

the process

using Excel to generate XML, jQuery and Ajax for animations

In a past long ago I ventured into this barren land, where bugs crept up my sleeves and pants. In most cases after a short scary trip I’d be happy to be back home in PHP or plain JavaScript land.

What am I talking about? Client side “apps”, by which I mean browser based, server-less HTML pages, where everything is done on the client. Examples of such applications are CD Rom viewers, Touch Screen Console applications, and Information Display (like the train station screens).

Recently I got a request to make an Information Display. I started happily to look at how this would work using modern browser based techniques. After a couple of days of experimentation I must say that it was a wonderful journey, and I am convinced this technology will have a great future.

Ten years ago CD Roms with an HTML viewer were simple pages with little interactivity, or they came with a web server to do interesting stuff. Now, with the advent of powerful JavaScript libraries and Office 2007 we can now integrate these into a cool looking almost server-centric interactive display.

I have used the following technologies, and will explain hereafter how:

Excel 2007 and XML

Excel serves as my database. It consists of worksheets of tabular data. The data is exported to an XML file using the XMLTOOLS addin, which you can find on the microsoft site. It is very loosely designed: when I need an extra column, I insert it and start typing. I will have to re-generate an XML mapping then, and export the contents to an XML file. The advantage: the person working with this ‘database’ only needs to know Excel, and how to click on a few buttons.

jQuery and Cycle

I added jQuery most and for all for the Cycle plugin. It allowed me to create stunning visual transitions for ‘slides’. The slides are actually simple divs in an HTML page.

CSS3

I used CSS3 for creating nice looking gradients. Also I used CSS3 for zebra tables and drop shadows on images. Overall it means there is no need whatsoever for images to enhance the visuals. I think that’s how future web development will and should occur.

SVG and/or Canvas

In fact you hardly ever need both, given that these technologies mostly overlap in capability. An advantage of Canvas is that it is actually a program (javascript) instead of a declarative markup. Of course the same argument makes SVG more attractive for its simplicity.

Ultimately I decided to use SVG for both my static vector based images (floor plan) and my animation (a clock). The SVG animation actually looked better than the canvas one and I wasn’t very interested in modifying the default look.

For the floor plan I hunted for a good SVG or Canvas editor. What I found was Google Docs (!). Recently they added a diagram editor, that can export to SVG. The resulting code unfortunately looks like hexadecimal soup, but the good thing is you can easily modify the diagram on Google Docs and export again.

Right now my app only works in FireFox 3.6, and that’s just fine, baby!!

Note: I cannot share the application since it’s made for our organization, but if you need help in setting up one yourself just add to the comments…

Follow

Get every new post delivered to your Inbox.