Introducing AJAX-S

The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).

A nice image

The reason I decided to create this right now is that I have a couple of upcoming presentations, and I want to display the beauty and simplicity of using open formats, and how to create a presentation without the need for any particular program or provider when doing it.

The different components

HTML
Mainly as a container for the other components
CSS
All layout is controlled through CSS
JavaScript
Interaction and loading of content
XML
The data layer with the content
XSLT
Transforms the data and returns it as HTML to the JavaScript

The main advantages of this approach

These are the advantages of using this separation of functionality, presentation and content:

  • No HTML knowledge needed at all, if you choose the custom XML formatting elements (easily designed by you)
  • Only one page loaded a time, so there should be no flash of unstyled content
  • Easy to customize by adding your own CSS file/-s
  • You can have the same HTML, CSS and JavaScript file, and only change the XML and/or the XSLT file to create a brand new presentation
  • You can change the entire design by only altering the CSS file/-s

How to format the content

You can either use custom formatting nodes in the XML, or you can use plain HTML for formatting. Remember to set the variable bUseHTMLContent in the JavaScript depending on what you choose.

In the zip file you can find examples of XML formatting in the files ajax-s.xml and ajax-s.xslt, and examples of HTML formatting in the files ajax-s-html.xml and ajax-s-html.xslt.

Incremental rendering

If you want to have incremental rendering without creating several pages, i.e. higlighting bullet after bullet without leaving the same page, you can now accomplish that by adding a class name to your list items, like this:

<li class="incremental">Increment 1</li>

Choose to move forward now, and that will happen to the list below. There are three different CSS classes for formatting increments: incremental, incremental-active and incremental-past.

  • Increment 1
  • Increment 2
  • Increment 3
  • Increment 4
  • Increment 5

Files needed

These are all the files needed to make it work, but naturally, you can add as many files and functionality as you feel like. The images folder is optional for your design.

  • index.htm
  • css/ajax-s.css
  • css/fonts.css
  • css/print.css
  • js/ajax-s.js
  • xml/ajax-s-html.xml
  • xslt/ajax-s-html.xml
  • xslt/ajax-s-paging-html.xml

Settings in the JavaScript file

In the JavaScript file, you can set the path to the XML file, the XSLT content file and the XSLT paging file. You can also set a boolean if the font should scale or not according to the current window size, if you want to use the XML formatting mode or the HTML mode and if you want to select the first increment when backing to the page from an upcoming page. It looks like this:

  • var strXMLURL = "xml/ajax-s.xml";
  • var strPagingXSLTURL = "xslt/ajax-s-paging.xslt";
  • var strXSLTURL = "xslt/ajax-s.xslt";
  • var bUseFontScaling = true;
  • var bUseHTMLContent = true;
  • var bSelectFirstIncrementWhenBacking = true;

Settings for the printable version

Make sure to link your XML file with your different pages to the XSLT file that will handle the presentation. The URL shall be the same as the JavaScript variable strXSLTURL. Like this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../xslt/ajax-s-html.xml"?>

Settings for non-JavaScript users

Non-JavaScript users will get the option to go straight to the print page to read all the pages at the same time. Remember to point to your XML file in the index.htm file within the noscript tags. The URL shall be the same as the JavaScript variable strXMLURL

<noscript>
	<a href="xml/ajax-s-html.xml">Go to the printable version.</a>
</noscript>

Navigating

A drop down menu is automatically created listing the headings of each page while providing a quick way to navigate to a certain page. You can also click anywhere in the document to navigate to the next page.

Another way of navigating is using the keyboard. The available keyboard shortcuts are:

To move forward
Space bar, Enter, right-arrow and alt + right-arrow
To move back
Backspace, left-arrow and alt + left-arrow

In Mozilla web browsers, when the drop down is selected, you can navigate to chosen alternative by pressing the space bar or the enter key. In Internet Explorer, it automatically changes page when you change alternative using the arrow keys.

Formatting nodes (XML formatting mode)

These are the different nodes in the XML that you can use for formatting as of now. However, adding node types and logic to that is really a small feat, if necessary. The heading element is only used once for the page and then the rest of the content is wrapped within a node named content. The nodes below only works as direct children of the content node.

  • heading, for the page heading
  • paragraph
  • image, with the attributes source, alternativetext and layout
  • list
  • orderedlist
  • definitionlist
  • subheading

Link, bold and italic (XML formatting mode)

In the XML formatting mode, if you want to insert links in the middle of a text, or make it bold or italic (or other inline formatting), you need to resort to HTML tags and then escape them. You can do this either by including the tags in a CDATA section, or by replacing with &lt; and ]]> with &gt;.

Since escaping escaped text is no child's play to present here, I recommend looking in the ajax-s.xml XML file how to do it.

Using images (XML formatting mode)

When using images in XML formatting mode, you have three layouts to choose from:

  • left
  • center
  • right

Left and right will let the following p> texts flow next to it while center centers the image and uses a line for the image only. Remember that the layout you specify is case sensitive compared to the corresponding class name in the CSS.

Requirements

First of all, you need to have JavaScript turned on. Second, it only works in IE 6 and Mozilla-based web browsers as of now. This is because of the need to do on the fly transformations on the client, which means the necessary support for ActiveXObject or XSLTProcessor has to be there. I think Opera 9 will support XSLTProcessor and probably some upcoming version of Safari too, so more widespread support in the future is very likely.

Rounding up

Download AJAX-S now! Play around with it, tweak it and customize it. And let me know what you think!

Robert Nyman, http://www.robertnyman.com