PowerXML

How to use SVG to create an open tool alternative to PowerPoint

Keywords: SVG, XML, XSLT, Presentation, Animation, Accessibility, Cocoon, PowerPoint

Dr Andrea Marchetti
Technologist
CNR - IIT
via G. Moruzzi, 1
Pisa
Italy
andrea.marchetti@iit.cnr.it

Biography

Graduated in Computer Science on 1987, Andrea Marchetti has been a full time staff member of National Research Council (C.N.R.) since 1996. He is now Researcher at Istituto Informatica Telematica (IIT) Pisa. His scientific interests are in the area of Web Technologies, Document Engineering and Web Applications. He participated, as consultant, into several working group of the public administration. Recently he is involved in the development of a modular document workflow management system completely based on xml technologies and open-source components.

Ing Maurizio Tesconi
Ph. D. Student
CNR - IIT
via G. Moruzzi, 1
Pisa
Italy
maurizio.tesconi@iit.cnr.it

Biography

Maurizio Tesconi graduated as an engineer, at the University of Pisa, Italy, in 2003. His degree thesis, “description and management of document workflow with an application based on XML” , concerns about Knowledge Management. At the moment he cooperates with CNR, the Italian institute of research, with projects about web and XML applications. Maurizio worked in quite different work projects, and now he spend most of his time in research work with CNR in Pisa.


Abstract


PowerXML is a web application, based on Cocoon. It generates the slides through the Cocoon pipelines of XSLT transformations, serializing as SVG, PDF, or XHTML pages, according to the browser's capabilities. SVG is the main output format; PDF is used prevalently for print output while XHTML has been thought for the browsers without SVG capabilities.

Of course the best results are obtained with SVG; in particular in this format the generated slides are full of multimedia effects like animations, sounds, images and icons. For improving the text layout some new features, introduced with SVG 1.2 version as text flow, are heavily used. The SVG format, that we used, respects the accessibility guidelines.

Every slide is generated directly from the XML source and MSS style sheet, this means that the presentation is always consistent with the source and that is always possible to change the style during the presentation.

It is also possible to generate immediately all the SVG presentation off-line as a sequence of SVG slides, compressed into a zip archive. In this way the presentation can be used without Cocoon; of course the presentation will be static, and cannot be modified on fly.


Table of Contents


1. Introduction
2. A brief overview of presentation tools
3. General Features of PowerXML
4. PowerXml In Detail
     4.1 PowerML - Yet Another Language for Presentation
     4.2 Mixed Style Sheet - Separating the rendering information
5. PowerXML Tool Architecture
     5.1 The process of slide generation
     5.2 Output formats
     5.3 Other features of PowerXML
          5.3.1 Audio-visual feedback
          5.3.2 Navigation commands
6. Conclusions and future developments
Acknowledgements
Bibliography

1. Introduction

Building a presentation entails organizing our thoughts into a logical sequence in order to present them clearly.

What does this involve?

Psychologists, communications and cognitive experts and man-machine interface researchers are still debating the best practice, but until now for millions of people the answer has been PowerPoint (Ppt).

The PowerPoint (Ppt) format is a de facto standard that is often required as the official format for presentations. However, there are several reasons to seek an alternative solution

For these and other reasons a plethora of alternative tools for creating and displaying presentations were created. These new tools have used widely spread viewers such as PDF readers and web browsers. These products are basic, allowing few multimedia effects.

The publication of the Scalable Vector Graphics (SVG) 1.0 Specification [SVG] , on September 4, 2001, renewed the possibility of realizing competitive presentation tools. Several SVG-based products have appeared (SVG Slidemaker, Jack SVG ...).

One of the main limits of these solutions has been the placement and distribution of the text in the slide.

To overcome the drawbacks of these new proposals, and with the aim of developing a more powerful open-source solution we launched the PowerXML project, which is entirely based on XML [XML] technologies and open-source components.

2. A brief overview of presentation tools

The various tools [XPT][SPT] used for producing presentations can be grouped into three categories :

  1. Ad hoc solutions
  2. Solutions based on PDF
  3. Solutions based on Web

The first category contains most of the proprietary solutions. Generally these tools are desktop applications that allow the easy creation of presentations. They are very rich in graphic effects but they require the authoring application.

The second category comprises about twenty tools that start from an xml or text source to produce static slides in PDF format. These applications are generally open source products that need programs such as Adobe Acrobat reader.

Finally, the last category includes very interesting solutions that produce HTML or SVG pages such as JackSVG [JSVG] , SVG Presentation Kit [XPreKit] and Combined Slidemaker [ComSlide] . These SVG tools take an XML document as input and produce one or more SVG files, connected by links. The creation of SVG files is usually made off-line.

fig1.png

Figure 1: Examples of slides produced with SVG presentation tools

These SVG tools cannot be customized easily and do not include many multimedia effects (animations, sounds, icons, etc.) but the main limit of these solutions regards the placement and distribution of text in the slide.

The tool we are introducing belongs in the last category, and attempts to overcome the limits of existing solutions.

3. General Features of PowerXML

This web application, completely based on XML technologies, presents many interesting features:

4. PowerXml In Detail

4.1 PowerML - Yet Another Language for Presentation

Nearly every presentation tool has its own language. This has not be considered a problem, since these languages present compatible structures, and it is easy to translate a presentation from one language to another.

All the syntaxes generally include a part devoted to metadata relating to the whole presentation, and a part containing the slide sequence sometimes organized in hierarchies. Each slide is organized as lists of items.

Let us examine some of these languages.

SlideML [SlideML] derives its elements from three different Namespaces. It uses the elements of XHtml for the content of the slides, some Dublin Core elements for the meta-data, and defines a set of elements used as “adhesive” between the various pieces.

JackSVG uses a very simple language. In one slide we can have a combination of points, paragraphs and images.

SVG Presentation Kit mixes the content of the presentation with graphic aspects such as backgrounds and bullet lists.

In the last two solutions the links are managed by XLink [XLink] attributes.

The solution proposed by Ivan Herman with the Combined Slidemaker uses a subset of XHtml where each slide is defined with the element “div” having the type attribute equal to “slide” . This solution has the advantage of allowing the direct visualization of the source content of the presentation with any browser.

The Figure 3 shows the schema of the solution adopted by PowerXML and called PowerML.

In PowerML the optional meta-section contains some meta-information concerning the presentation, for example the authors, date and location of the event.

The presentation is organized into chapters, sections and slides

fig3.png

Figure 3: PowerML Schema

Each slide is divided into list of items that can be nested; a series of other elements can be inserted within the items:

With the “type” attribute, it is possible to assign each item a predefined semantic value which clarifies the meaning of the item itself. For example an item can be classified as a definition, a warning statement, or a potential target and so on; these semantic values are interpreted by the application and rendered with different styles. The type contains that information of meta-communication that normally we cannot introduce in the text but which constitutes a fundamental part of the communication.

It is possible to assign an “id” to each element of the presentation (chapter, section, slide, and item) in order to refer to it. This mechanism can be extended to the presentation level. In this way, it is possible to include a presentation or a part of it in another presentation; it is also possible to create links between presentations.

An example of PowerML slide follows.

                    <slide dur="100"> 
                    <title>PowerXML</title> 
                    <list>
                    <item type="idea">Separation of content from style</item> 
                    <image xlink:href="images/separation.png" width="300" height="225"/>
                    <item>Generation of multiple output formats</item> 
                    <item>Real time generation of presentation</item> 
                    <item>Based on open technologies</item> 
                    <item type="accessible">Accessible SVG</item> 
                    </list>
                    </slide>
                

Example 1: PowerML slide

The following chart compares the various languages before presented with PowerML.

Comparative chart of the solutions examined
ElementSlideML(without schema)JackSVG SVG Presentation Kit W3C Slidemaker (subset of Xhtml) PowerML

Root

slideset

presentation

outline

html

presentation

General metadata

metadata = (title, subtitle?,author, confgroup?,dates, rights?,subject, abstract?)

metadata = (repeatable element with an attribute "name")

dates, author

meta = (repeatable element with an attribute "name")

meta = (title, author*, date?, location?, event?)

Structure of presentation

two levels group, section nestable

an element section nestable

two only levels chapter section

Slide element

slide

slide

slide

<div class="slide">

slide

Slide content

title, content, notes

title,(para|point|image)*

(o | img | svg)

h1, (ol | ul | )

title, list, comment?

Slide metadata

notes

notes

note

comment

Item

li

point

o

li

item

Elements at item level

tails, pre, p, img, object

para, image

img

p, img, tails, object

image, sample

Elements within item

a, em, strong, br, blockquote

<span class="">

a, em, strong

a, em

Table 1

4.2 Mixed Style Sheet - Separating the rendering information

An XML document which we have called Mixed Style Sheet (a combination of CSS and SVG proprieties) has been defined, which contains all the rendering information of the presentation. The organization of an MSS file is similar to a CSS document where a set of properties is defined for each object such as position in the slide, background, animation, associated icon, sound and so on.

The following figure is an example of the slide's layout.

fig4.jpg

Figure 4: Layout of a slide

In a slide layout there are some graphic objects such as content, countdown, numSlide, title, item{level}, buttons, clock, meta, breadcrumbs, etc...

These generic graphic objects are illustrated in Figure 4 .

An example of MSS fragments for the style of “title” object follows:

                    <style name="title">
                    <property name="fill"        type="css">red</property>
                    <property name="font-size"   type="css">30px</property>
                    <property name="font-weight" type="css">bold</property>
                    <property name="text-anchor" type="css">middle</property>
                    <property name="x"           type="svg">420</property>
                    <property name="y"           type="svg">100</property>
                    </style>
                

Example 2: The definition of “title” style with MSS

One can observe that within the definition of style there are both CSS and SVG properties. Some CSS properties ( type = "css" ) are shared with CSS2 and XSL (font-weight) while others derive from a CSS standard expressly defined for SVG [StyleSVG] (fill).

The SVG properties ( type = "svg" ) can define the placement and the dimensions of an object within the slides or they can specify certain multimedia contents such as icons, sounds or animations.

Another example of MSS fragments for the style of “item1” object is as follows:

                    <style name ="item1">
                    <property name="anim"        type="svg">FadeIn</property>
                    <property name="audio"       type="svg">suono.wav</property>
                    <property name="icon"        type="svg">icona.png</property>
                    <property name="fill"        type="css">blue</property>
                    <property name="font-size"   type="css">20px</property>
                    <property name="font-style"  type="css">normal</property>
                    <property name="font-weight" type="css">bold</property>
                    </style>
                

Example 3: The definition of “item1” style with MSS

In this example no information on the position of the item has been inserted because distribution of the item within the content is automatically managed by the tool.

More style information can be associated with the items by using the “type” attribute.

                    ...
                    <item type="idea">Separation of content from style</item> 
                    ...
                

Example 4: An “item” element from PowerML source

For instance if the source contains items with an type attribute equal to “idea” and in MSS file you have a style with the name “idea” , one can define specific properties for this type of item.

                    <style name ="idea">
                    <property name="icon" type="svg">idea.svg</property>
                    </style>
                

Example 5: The definition of an item with type “idea” style with MSS

In this way one associates the “light bulb” icon with the items with this type (see Figure 5 ).

The Figure 5 shows how the example 1 is rendered on PowerXML by using a specific MSS stylesheet.

fig5.jpg

Figure 5: Example of a PowerML slide rendered with PowerXML

5. PowerXML Tool Architecture

PowerXML is a web application based on Cocoon. It generates the slides through the Cocoon pipelines of XSLT transformations, serializing them as SVG, PDF, or XHTML pages, according to the browser's capabilities. SVG is the main output format; PDF is used prevalently for print output while XHTML was created for browsers without SVG capabilities.

Of course the best results are obtained with SVG; in this format the generated slides are full of multimedia effects such as animations, sound, images and icons. For improving the text layout some new features introduced with the SVG 1.2 version, such as text flow, are frequently used. The SVG format, which we used, respects the accessibility guidelines.

Every slide is generated directly from the XML source and MSS style sheet; this means that the presentation is always consistent with the source and that it is always possible to change the style during the presentation.

5.1 The process of slide generation

The files of PowerXML system and those related to the various presentations are organized in directories according to the scheme shown in Figure 6. The main directory, called PowerXML, contains some Xslt stylesheets used by cocoon, and the directory Presentations containing all the presentations loaded on the application PowerXML (see Figure 6 ). Within each presentation folder there is the source called slide.xml, the style information and every multimedia object. The slides are produced by cocoon in a dynamic way; all the information for generating a slide is contained in the URL having the following structure

http://{site}/PowerXML/Presentations/{presentation name}/{mss name}-slide{num}.svg

The information inside {} is variable.

fig6.png

Figure 6: Scheme of generation of a slide

This URL causes the invocation of a Cocoon pipeline that locates the slide.xml file and works on it with two transformations, preprocessing.xsl and slideGenerator.xsl.

The first transformation extracts the slide to be elaborated, performs some preliminary calculations and creates a structure hosting the index of the presentation.

The result of this first transformation is passed to a second stylesheet that produces the SVG page that will be displayed by the browser.

The two stylesheets take the parameters “presentation name” , “style” and “slide number” from the URL.

In this way the same presentation (with the single source slide.xml) can be displayed in various ways simply by defining many MSS styles and changing the URL of the slide.

All these operations are realized with the following pipeline of cocoon:

                    <map:match        pattern="Presentations/*/*-slide*.svg">
                    <map:generate     src ="Presentations/{1}/slide.xml"/>
                    <map:transform    src ="preprocessing.xsl">
                    <map:parameter name="presentation" value="{1}"   />
                    <map:parameter name="style" value="{2}"          />
                    <map:parameter name="numslide" value="{3}"       />
                    </map:transform>
                    <map:transform    src ="slideGenerator.xsl"          >
                    <map:parameter name="offline" value="no"         />
                    </map:transform>
                    <map:serialize    type="svgxml"                     />
                    </map:match>
                

Example 6: Example 6 - Cocoon pipeline

5.2 Output formats

In Figure 7 we have all the possible output formats that PowerXML can generate.

In order they are: SVG 1.2, PDF, XSL-FO, XML (the source slide.xml), XHtml, the ZIP archive of all SVG slides.

fig7.png

Figure 7: PowerXML outputs

The printable version of all the slides is produced by creating a document XSL-FO [XSL] (XSL Formatting Object) and converting it to PDF by using a cocoon component based on Apache FOP [FOP] .

An XHtml version that respects the Accessibility Guidelines [WAI] has been introduced for users who have a particular disability or for browsers without the SVG plug-in [ASV6] .

The Xhtml version of the slides is intentionally very simple in order to favor its accessibility to the widest number of users. Many PowerXml features are not available in XHtml output.

It is also possible to generate the entire SVG presentation off-line immediately as a sequence of SVG files, compressed into a zip file. In this way the presentation can be used without Cocoon; of course the presentation will be static, and cannot be modified on fly.

5.3 Other features of PowerXML

5.3.1 Audio-visual feedback

It is very important to provide some feedback about the current state of the presentation; thus with this feature it is possible to insert multimedia objects such as icons, timers, counters and breadcrumbs into the slide. Examples:

5.3.2 Navigation commands

It is possible to navigate among the slides of the presentation by using the keyboard. For example:

6. Conclusions and future developments

The project PowerXML has started in 2004 with the aim of developing a more powerful open-source solution to manage multimedia presentations. The implemented prototype allows real time generation of presentations, separation of content from style, automatic placement of presentation items, and multiple output formats.

PowerXML is totally based on XML technologies and open-source components. This fact allows an easy integration with other interesting technologies developed by W3C such as SMIL to synchronize multimedia objects or VoiceXML to insert speech features.

It is in phase of development an editor WYSIWYG (What You See Is What You Get) for the driven creation of the slides and the layouts. In addition we are building a web site where will be possible to see PowerXML at work.

Acknowledgements

Thanks to Marco Rosella who made significant contributions.

Bibliography

[AccSVG]
Accessibility Features of SVG W3C Note 7 Augusts 2000 http://www.w3.org/TR/SVG-access/
[ACP]
The Apache Cocoon Project http://cocoon.apache.org/
[ASV6]
Adobe's ASV6 plugin (beta version) http://www.adobe.com/svg/viewer/install/beta.html
[AWPW]
Accessible Web Publishing Wizard for Microsoft Office http://cita.disability.uiuc.edu/software/office/
[ComSlide]
A Combined Slidemaker Ivan Herman http://www.w3.org/Consortium/Offices/Presentations/xsltSlidemaker/
[CSS]
Cascading Style Sheet Bert Bos http://www.w3.org/Style/CSS/
[FOP]
Formatting Objects Processor http://xml.apache.org/fop/
[HTML]
HTML -HyperText Markup Language http ://www.w3.org/MarkUp
[JSVG]
JackSVG “ Power without Powerpoint. ” http://titanium.dstc.edu.au/xml/jacksvg/
[SlideML]
SlideML XML for Presentations http://www.slideml.org/
[SPT]
Tools for Creating Screen or Online Presentations Michael Wiedmann http://www.miwie.org/presentations/presentations.html
[StyleSVG]
Styling SVG 1.1 W3C Recommendation 14 January 2003 http://www.w3.org/TR/SVG11/styling.html
[SVG]
Scalable Vector Graphics (SVG) 1.2 - W3C Working Draft 27 October 2004 http://www.w3.org/TR/SVG12/
[WAI]
Web Accessibility Initiative (WAI) http://www.w3.org/WAI/
[XCSS]
An XML syntax for CSS - TR IAT-B4-017 Andrea MarchettiGiuseppe Fresta 01 Agosto 2000
[XHTML]
XHTML - The Extensible HyperText Markup Language 1.0 W3C Recommendation 26 January 2000 http ://www.w3.org/TR/xhtml1/
Xlink - XML Linking Language 1.0 W3C Recommendation 27 June 2001 http ://www.w3.org/TR/xlink/
[XML]
Extensible Markup Language (XML) 1.1 W3C Recommendation 4 February 2004 http://www.w3.org/TR/2004/REC-xml11-20040204/
[XPreKit]
Schemasoft - XML Presentation Kits http://www.schemasoft.com/tools/xmlpresentations/
[XPT]
Mulberry XML-based Presentation Tools http://www.mulberrytech.com/walkthewalk.html
[XSL]
Extensible Stylesheet Language (XSL) Version 1.0 W3C Recommendation 15 October 2001 http://www.w3.org/TR/xsl/
[XSLT]
XSL Transformations (XSLT) Version 1.0 W3C Recommendation 15 November 1999 http ://www.w3.org/TR/xslt
[XInclude]
XML Inclusions (Xinclude) Version 1.0 W3C Recommendation 20 December 2004 http://www.w3c.org/TR/2004/REC-xinclude-20041220/

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.