xmlSlides

xmlSlides was a prototype for an application that can create html/javascript based presentation slides. It takes an xml document as input and transforms it with XSLT into one of many HTML based slide formats. This project was the topic of the theses of my bachelors degree in computer science in 2010.

The starting point for this project was the dissatisfaction with existing presentation slide applications. When the idea was born in 2009 there were only WYSIWYG editors for slides like PowerPoint or OpenOffice Impress or things like Latex Beamer.

There were some HTML/JavaScript based presentation systems like S5, Slideous or DOMSlides which can be used to produce nice slides that can be viewed in every web browser. The problem was that there was no usable editor avialable and you had to write the html code by hand.

The idea of this project was to define the content of your slide in a domain specific and descriptive format and transform it into the respective html format.

One goal was to not only support one of these html presentation systems but to be flexible about the desired framework. For every framework there was a XSLT transformation file that could be exchanged.

The whole process of the transformation was itself described by XML: There was a XProc XML pipeline that defines how the transformation should be done.

The prototype was implemented as Firefox AddOn with XUL and JavaScript.

Related Articles:

  • xmlSlides - Aktueller Stand

    | tagged as
    Summary:

    Vor einiger Zeit hatte ich ja bereits ein paar Ideen und Entwürfe für meine Präsentations-Software für Browser vorgestellt. Mittlerweile hat sich einiges getan bzw. geändert. Zunächst einmal: Ich bearbeite dieses Projekt nun im Rahmen meines Praktikums und meiner Abschlussarbeit an der Hochschule. Das heisst vor allem, dass das Projekt nun nicht mehr nur ein kleines Hobby-Projekt für zwischendurch ist, das ich vieleicht irgendwann einmal fertig stelle, sondern dass ich aktuell in Vollzeit daran arbeite und es in jedem Fall in absehbarer Zeit vorzeigbare Ergebnisse geben wird. Ich möchte ja schließlich mein Studium und die Abschlussarbeit vernünftig abschließen. Eine weitere Konsequenz daraus ist, dass ich viele Sachen nicht mehr "einfach so" programmieren kann, wie es mir grade passt, sondern ich tiefgreifendere Untersuchungen anstellen muss, damit wirklich ein vernünftiges Ergebniss herauskommt. Eine erste Konsequenz daraus ist, dass ich einen Großteil der bisherigen Arbeit über Bord geworfen habe und das ganze von Grund auf neu plane. Die Anforderungen bleiben jedoch weitestgehend gleich, nur der Lösungsweg verändert sich etwas. Im ersten Schritt verzichte ich nun auf eine selbstentwickelte XML-Sprache und werde stattdessen eine bereits bestehende XML-Sprache zurückgreifen. Welche konkret steht aber aktuell noch nicht ganz fest. Auf der einen Seite ist das DocBook-Format für Technische Dokumentationen eine etablierte Technologie und bietet auch eine Art Spezialisierung für die Beschreibung von Präsentationen. Der Nachteil dieser Variante ist jedoch, dass das Format unglaublich komplex ist und sehr sehr viele Elemente enthält, die ich in meiner Software nicht benötige. Die hohe Komplexität spricht auch gegen eine der Hauptanforderungen nach Einfachheit und Nutzerfreundlichkeit. Man könnte jedoch auch nur einen Teil des DocBook-Slides-Formates implementieren und auf den Rest verzichten. Diese Lösung hat allerdings auch ihre Schattenseiten. Eine andere recht vielversprechende Technologie ist das Slide-Format von MulberryTech. Dieses Format bietet nicht so viele Elemente wie das DocBook-Format und ist damit nicht so komplex. Aus meiner Sicht sind die vorhandenen Elemente teilweise auch sinnvoller bezeichnet, was verständlich ist da es speziell für Folienpräsentationen entwickelt ist. Die Dokumentation der Elemente innerhalb der Dokument-Typ-Definition ist auch sehr vorbildlich. Einziger Wehrmutstropfen ist bei diesem Format jedoch, dass es letzlich auch eine Eigenentwicklung eines Unternehmens ist und kein Etablierter Standard wie DocBook.

    Die Plattform

    Was vermutlich gleich bleiben wird im Vergleich zu den alten Konzepten, ist die Plattform. Ich werde das Programm mit großer Wahrscheinlichkeit als Firefox-Plugin entwickeln. Hierfür habe ich bereits an einem Entwurf für die Oberfläche gearbeitet. Es wäre jedoch auch eine Webbasierte Lösung denkbar, bei der der Nutzer auf einer Webseite einen Editor vorfindet und seine Präsentationen erstellen kann. Dies könnte dann auch direkt mit einem Hosting-Angebot verknüpft werden, bei der die erstellten Präsentationen auf dem Server verbleiben und der Nutzer eine URL zu seiner Präsentation zur Verfügung gestellt bekommt, über die er die Präsentation jederzeit direkt ansehen kann. Wie genau die Lösung aussehen wird, muss ich noch genau entscheiden. Wie gesagt: Da es sich hierbei nun um ein Projekt im Wissenschaftlichen Rahmen handelt, müssen solche Entscheidungen natürlich sehr viel Detailierter behandelt und die Abwägung zwischen Technologien mit Bedacht getroffen werden.
    ...

  • xmlSlides: Erster Entwurf der XML-Sprache und erstes XSL-Stylesheet

    | tagged as
    Summary:

    Ich habe einen ersten Entwurf der zugrunde liegenden XML-Sprache für mein Programm "xmlSlides" entwickelt. Damit wird noch lange nicht der volle Funktionsumfang von HTML-Präsentationen abgedeckt, jedoch lassen sich simple Präsentationen bereits erstellen. In meinem Programm sollen Präsentationen, genauer gesagt nur der Inhalt der Präsentation in einer XML-Datei abgelegt werden. Diese XML-Datei beschreibt in möglichst abstrakter Form den reinen Content der Folien. Im Anschluss wird mit Hilfe von XML Transformationen aus der XML-Datei die eigentliche XHTML-Präsentation erstellt. Diese Vorgehensweise hat den Vorteil, dass das eigentliche Ausgabeformat nur durch das verwendete XSL-Stylesheet festgelegt wird. Es können also auch verschiedene XLS-Stylesheets für verschiedene Ausgabeformen angeboten werden. In erster Linie sollen damit die verschiedenen HTML-Präsentations-Technologien, wie S5, DOMSlides oder Slideous abgedeckt werden. Jedoch sind auch Exporte nach PDF und sogar OpenOffice-Impress und MS-Powerpoint 2007 (beide sind ebenfalls XML-Formate) denkbar - wobei die beiden letztgenannten und insbesondere MS-Powerpoint ziemlich unwahrscheinlich sind. Für das XML-Format habe ich ein entsprechendes XML-Schema entwickelt, wechels wie bereits erwähnt, noch unvollständig ist.

    Das XML-Dokument

    Ein Beispielhaftes XML-Dokument könnte so aussehen:
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/xsl" href="xmlslides.xsl" ?>
    <slides xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="xmlslides.xsd">
     <head>
       <title>Vortrag</title>
       <author>Manuel</author>
     </head>
     <body>
       <slide>
         <headline>Folie 1</headline>
         <contentBox>
           <text>Hallo Welt</text>
           <text>Das ist die erste Folie</text>
         </contentBox>
       </slide>
       <slide>
         <headline>Folie 2</headline>
         <contentBox>
           <text>Servus zur zweiten Folie</text>
         </contentBox>
       </slide>
      </body>
    </slides>
    
    Darin gibt es einen head und einen body ähnlich wie in HTML. Im head wird der Titel und der Autor der Präsentation definiert. Hier werde ich in Zukunft noch weitere Angaben hinzufügen. Im Body-Bereich werden die eigentlichen Folien beschrieben. Jede Folie wird von einem <slide>-Element umschlossen. Als erstes kann jede Folie eine Überschrift mit dem Element <headline> enthalten. Im Anschluss folgt der eigentliche Inhalt der Folie in einem <contentBox>-Element. Dieses Element soll in Zukunft ein Attribut align bekommen, welches die Werte horizontal oder vertical annehmen kann. Damit soll bestimmt werden, ob die innerhalb der ContentBox definierten Elemente Horizontal oder Vertikal angeordnet werden sollen. Innerhalb der ContentBox folgen die eigentlichen Elemente zur Anzeige auf der Folie. Aktuell ist hier nur das Element <text> zur Anzeige von normalen Text definiert. Hier folgen in Zukunft aber noch weitere Elemente für Listen, Bilder, Tabellen oder Code-Abschnitte. Jedes dieser Elemente soll von dem align-Attribut der Umschließenden ContentBox beeinflusst werden. So werden entweder alle Elemente untereinander oder Nebeneinander angezeigt.

    XSL-Transformation

    Wenn das XML-Dokument mit der Abstrakten Beschreibung der Folien fertig ist, muss es mit Hilfe eines XSL-Stylesheet in die entsprechende Anzeigefähige Form gebracht werden. Aktuell benutze ich als Anzeige-Technologie Slideous mit minimalen Erweiterungen und einem von mir erstellten Template. Später sollen aber natürlich ncoh weitere Technologien wie S5 unterstützt werden. Das XSL-Stylesheet sieht folgender Maßen aus:
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0"
                    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
     <xsl:template match="/">
       <html>
        <head>
         <title>
          <xsl:value-of select="slides/head/title"/>
         </title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <meta name="author"><xsl:attribute name="content"><xsl:value-of select="slides/head/author"/></xsl:attribute></meta>
         <meta name="date" content="19.12.2009" />
         <meta name="autoincrement" content="false" />
    
         <link rel="stylesheet" type="text/css" href="slideous/slideous.css" />
         <script src="slideous/slideous.js" type="text/javascript" />
    
        </head>
        <body>                   
         <div id="statusbar">
          <span style="float:right;">
           <span style="margin-right:4em;font-weight:bold;">
            <span id="slideidx">
            </span> of {$slidecount}</span>
            <button id="prevslidebutton" title="previous slide">&#171;</button>
            <button id="nextslidebutton" title="next slide">&#187;</button>
            <button id="incfontbutton" title="content">A+</button>
            <button id="decfontbutton" title="first slide">A-</button>
            <select id="tocbox" size="1"><option></option></select>
           </span>
    
           <span id="eos">&#189;</span>
             <span><xsl:attribute name="title">{$location},{$date}</xsl:attribute>{$title}, {$author}</span>
         </div>
         <xsl:for-each select="slides/body/slide">
           <div>
             <h1><xsl:value-of select="headline" /></h1>
             <div>
               <xsl:for-each select="contentBox/text">
                 <p><xsl:value-of select="."/></p>
               </xsl:for-each>
            </div>
           </div>                    
         </xsl:for-each>
       </body>        
     </html>
    </xsl:template>    
    </xsl:stylesheet>
    
    Als Ergebnis kommt dann folgende Präsentation heraus:
    • xml-Transformation (benötigt XSLT-Fähigen Browser z.B. Firefox oder moderne IE): test.xml
    • fertiges HTML-Dokument: test.html
    Zum testen kann man in modernen Browsern mit XSLT-Unterstützung (IE ab version 6?, Firefox,...) das entsprechende XML-Dokument direkt im Browser laden. Sofern das XSL-Stylesheet im selben Verzeichnis liegt, sollte als Ergebnis direkt das transformierte XHTML-Dokument, sprich die Präsentation im Browser erscheinen. Natürlich müssen dafür auch die Dateien (CSS, JS, Grafiken) von Slideous vorhanden sein. Alles zusammen habe ich als ZIP-Archiv hier zum Download bereit gestellt: xmlslides_01.zip Wie eingangs erwähnt, ist der Funktionsumfang noch äusserst rudimentär. Jedoch als prinzipielle Machbarkeitsstudie ist es für mich der erste Schritt in die richtige Richtung. Für Kritik und Hinweise bin ich wie immer Dankbar, vor allem was das XML-Schema und allgemein meine Vorstellung des XML-Dokuments angeht.
    ...