Figure 1: Examples of slides produced with SVG presentation tools
Keywords: SVG, XML, XSLT, Presentation, Animation, Accessibility, Cocoon, PowerPoint
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.
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.
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.
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
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.
The various tools [XPT][SPT] used for producing presentations can be grouped into three categories :
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.
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.
This web application, completely based on XML technologies, presents many interesting features:
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
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.
| Element | SlideML(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
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.
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.
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.
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.
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
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.
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.
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:
It is possible to navigate among the slides of the presentation by using the keyboard. For example:
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.
XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.
