Technote - XSLide: XSLt kit for XML-based presentations
Netscape Communications Corp.
Revision: October 22, 2002 - Give Feedback
Introduction
XSLide is a web-based Presentation Toolkit based on XML, XSLt and JavaScript. This kit was primarily made to work in client side specifically with browsers supporting XML and XSLt. There is one section in the end with notes on how to use this project to generate the HTML content via server side. It allows you to create web presentations simply using a text editor and directly entering your content in the XML content. Your presentation will have rich presentation layout and you will have control to add interesting effects like transictions between slides. This technote is basically an overview about the architecture of XSLide and how it was made using web standards and JavaScript. At same time, feel free to reuse the XSLide toolkit in your production environment.
For additional information on XSLt, XML or other XML extras support in Mozilla, please visit the XML Central.
A Blend of Standards
The project is a blends of many web standards such as XML, XSLt, HTML, DOM, CSS and also JavaScript. There are benefits for the authoring process and also benefits for the presentation and delivery process.
Input: Simple XML content
Creating slides is simple because XML was used to define a simple markup language for the presentation slides. It's possible to create the slides contents and some controls with a simple text editor. Additionally, the language is human-readable and easy to understand. The following picture illustrates a simple presentation with two slides:
Structure of a simple slides presentation containing 2 slides:
<slides>
<slide id="1" title="Title of my Slide">
<thetext>
<t1>Hello World!, this is my first slide</t1>
</thetext>
</slide>
<slide id="2" title="second">
<thetext>
<t1>Thanks everybody!</t1>
</thetext>
</div>
</slides>
Output structure: Rich Media DHTML: HTML4, CSS, DOM and JavaScript
XSLt makes possible to transform the contents written in XML, generating the final output content that represents the visual presentation. Basically when the browser fetchs the XML file, it will process it via transformations rules defined by the XSLt file. This processing will produce an HTML document that represents the final presentation content.
Structure of the output content: HTML, CSS, JavaScript and DOM
<html>
<body>
<script>
. . . JavaScript code able to play the slides . . .
</script>
<div id="slideContent1" class="slideCSS" >
. . .
<span class="title">Hello World!, this is my first slide</span>
. . .
</div>
<div id="slideContent2" class="slideCSS">
. . .
<span class="title">Thanks everybody!</span>
. . .
</slide>
</body>
</html>
The transformation process will be transparent for users. The user will simply load the XML content and the browser will then display the presentation that is basically rich media content using HTML 4, CSS, DOM ana JavaScript. Note that the result document will have the original contents from the XML file already transformed to HTML and additional data to make the presentation and layout possible. Using this approach is interesting because all the details of the DHTML code can be transparent to your customers. You can simply teach them how to code the slides using the simple XML (figure 1) and they will be able to run it and enjoy the visual presentation.
What is in the middle?
The transformation can be made in client side or server side. If you fetch the Xslides XML file with your web browser, the processing will occur in client side and the transformed output will be displayed in the browser's window. The processing happens because the XML file includes the style sheet declaration:
Binding with the XSLt file
<?xml version="1.0" ?>
<?xml-stylesheet href="xslides.xsl" type="text/xsl"?>
Matching XML elements, producing HTML elements
This section is an overview of how XSLt works. The following picture illustrates the time-based view of the transformation process.
XSLIDEs Markup Language
Now is time to dig more and learn about the simple MARKUP language for slides. The following picture illustrates one complete slide and its many different ways of formatting content.
