Strukturreferenz

Hinweis: Diese Seite wird gerade auf Version 1.1 umgestellt.

Dieses Dokument stellt eine Referenz für das Dateiformat von S5-Präsentationen zur Verfügung. Beachte folgende Vereinbarungen:

S5 1.1 ist kompatibel zum Opera Show Format 1.0 (im Folgenden OSF 1.0).

Ein vollständiges Beispiel findst du am Ende des Dokuments gefunden werden.

Skelett des Dokuments

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head> </head>
  5. <body>
  6.  
  7. <div class="layout"> </div>
  8. <div class="presentation"> </div>
  9.  
  10. </body>
  11. </html>
  12. Diesen Quelltext herunterladen.

Dies ist das grundlegende Skelett auf erster Ebene in einer Präsentationsdatei. Die meisten dieser Dokumente haben untergeordnete Elemente, die im Folgenden beschrieben werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Der Dokumenten-Typ, der für S5- Präsentationen benutzt wird. XHTML 1.0 Strict wurde gewählt um die Kompatibilität zu OSF 1.0 zu ermöglichen.
<html xmlns="http://www.w3.org/1999/xhtml"> </html>
Das Wurzel-Element des Dokuments, das so ziemlich alles andere enthält. Durch den DOCTYPE vorgeschrieben.
<head> </head>
Dieses Element enthält die Kopf-Daten für die Präsentation, wie den Titel, Metadaten über den Autor, Links zu Style Sheets und Scripten usw.
<body> </body>
Dieser Abschnitt enthält allen Inhalt und die Komponenten, die dem Zuschauer gezeigt werden. Nicht vom DOCTYPE vorgeschrieben aber für S5- Kompatibilität benötigt.
<div class="layout"> </div>
Dieses Element enthält alle Teile des Layouts, die auf jeder Seite erscheinen, etwa Kopf- und Fußleiste und die Steuerung.
<div class="presentation"> </div>
Dieser Container enthält die einzelnen Seiten.

<head> — Metadaten des Dokuments

  1. <head>
  2. <title>[Präsentationstitel]</title>
  3. <!-- metadata -->
  4. <meta name="generator" content="[Programm, das das Dokument erstellt hat]" />
  5. <meta name="version" content="S5 1.1" />
  6. <meta name="presdate" content="[Datum der Präsentation]" />
  7. <meta name="author" content="[Name des Autors]" />
  8. <meta name="company" content="[Arbeitgeber des Autors]" />
  9. <!-- Einstellungen -->
  10. <meta name="defaultView" content="slideshow" />
  11. <meta name="controlVis" content="hidden" />
  12. <!-- CSS-Links -->
  13. <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
  14. <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
  15. <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
  16. <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
  17. <!-- S5 JavaScript -->
  18. <script src="ui/default/slides.js" type="text/javascript"></script>
  19. <meta http-equiv="Content-Type" content="[Inhalts-Typ]" />
  20. </head>
  21. Diesen Quelltext herunterladen.
<title>[Präsentationstitel]</title>
Enthält den Präsentationstitel.
<meta name="version" content="S5 1.1" />
Stellt das exakte Markup-Format zur Verfügung. Von OSF 1.0 kopiert.
<meta name="generator" content="[Programm, das das Dokument erstellt hat]" />
Weist auf das Programm hin, welches zur Erstellung der Präsentation benutzt wurde. Falls ein Programm genutzt wurde ist die Verwendung dieses Elements Pflicht. Falls die Präsentation von Hand geschrieben wurde kann dieser Wert auf den Namen des Autors oder den des verwendeten Texteditors gesetzt werden. Ansonsten kann dieser Wert ausgelassen werden. Von OSF 1.0 kopiert.
<meta name="presdate" content="[Datum der Präsentation]" />
Das Datum an welchem die Präsentation gehalten wird/gehalten wurde. Von OSF 1.0 kopiert.
<meta name="author" content="[Name des Autors]" />

Der Name des Haupt-Autors. Es gibt derzeit noch keine möglichkeiten Zweit- und Drittautoren anzugeben. Von OSF 1.0 kopiert.
<meta name="company" content="[Arbeitgeber des Autors]" />
Die Firma für die der Präsentator arbeitet. Dies kann so ausgelegt werden, dass man das Hauptbeschäftigungsgebiet des Autors angibt, ob es eine Firma ist oder nicht. Von OSF 1.0 kopiert.
<meta http-equiv="Content-Type" content="[Inhalts-Typ]" />
Weist den Inhalts-Typ der Datei aus. Ein möglicher Wert ist text/html;charset=utf-8.
<meta name="defaultView" content="[Wert]" />
Setzt die grundsätzliche Ansicht für die Präsentation fest. Diese Angabe kann zwei Werte haben: slideshow und outline. Der Standardwert ist slideshow.
<meta name="controlVis" content="[Wert]" />
Setzt die standardmäßige Präsentation für die Kontrollelemente fest. Der Wert kann entweder visible (sichtbar) oder hidden (unsichtbar) annehmen. Der Standardwert ist visible.
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
Diese Anweisung verknüpft die Datei mit dem CSS, welches die visuellen Aspekte der Präsentation steuert. Die referenzierte Datei besteht aus drei @import-Anweisungen, die auf andere Style Sheets verweisen. Beachte die Datei-Referenz für weitere Informationen.
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="projection" id="outlineStyle" />
Verknüpft die Datei mit dem Style Sheet, das für die Gliederungsansicht zuständig ist.
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
Verknüpft die Datei mit dem Style Sheet, das Opera erlaubt die Präsentation via OperaShow abzuspielen.
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
Verknüpft die Datei mit dem Drucker-Style Sheet, das Anweisungen enthält, wie die Präsentation für den Druck zu formatieren ist.
<script src="ui/slides.js" type="text/javascript"></script>
Diese Anweisung ruft das JavaScript auf, das die ganze Sache zum Laufen bringt.

Layout Informationen

  1. <div class="layout">
  2. <div id="controls"></div>
  3. <div id="currentSlide"></div>
  4. <div id="header">[Kopfzeile]</div>
  5. <div id="footer">[Fußzeile]</div>
  6. <div class="topleft">[Layout-Container oben links]</div>
  7. <div class="topright">[Layout-Container oben rechts]</div>
  8. <div class="bottomleft">[Layout-Container unten links]</div>
  9. <div class="bottomright">[Layout-Container unten right]</div>
  10. </div>
  11. Diesen Quelltext herunterladen.
<div id="controls"></div>
Hier ist der strukturelle Platzhalter für die Steuerung. Diese enthält die Popup-Navigation, Vor-/Zurück-Links und den Style-Wechseln-Link. Falls keine Steuerungs gewünscht wird solte der Abschnitt stehen gelassen und die Anzeige via CSS unterdrückt werden. Dies wird nicht empfohlen. Es wird aber empfohlen dieses Element leer zu lassen, da jeglicher Inhalt vom Javascript überschrieben wird.
Hinweis: In früheren Versionen stand dieser Abschnitt innerhalb der Fußzeile, das änderte sich mit Version S5 1.1.
Folgende Elemente werden per Javascript erstellt:

<form id="controlForm"> </form>

Innerhalb dieses Elements befinden sich alle Kontrollelemente. Diese befinden sich in zwei weiteren div-Containern:
<div id="navLinks"> </div>
<a id="toggle">Ø</a>
Der Link, der benutzt wird um zwischen Präsentations- und Gliederungsmodus umzuschalten.
<a id="prev">«</a>
Der Link, der benutzt wird um zur vorherigen Folie zu wechseln.
<a id="next">»</a>
Der Link, der benutzt wird um zur nächsten Folie zu springen.

<div id="navList"> </div>
<select id="jumplist"></select>
Das Fundament der Navigationsliste. In diesem select werden entsprechende object-Elemente erstellt.


<div id="currentSlide"></div>
Das ist der Abschnitt, der die Fortschritts-Anzeige enthält, z.B. „5 / 21“, und wird über das JavaScript gefüllt. Wenn keine Fortschrittsanzeige gewünscht ist sollte der Abschnitt stehen gelassen werden und unterbinde die Anzeige via CSS unterbunden werden. Es wird dringend empfohlen dieses Element leer zu lassen, da jeglicher Inhalt vom JavaScript überschrieben wird. Folgende Elemente werden per JavaScript erstellt:
<span id="csHere">[Aktuelle Foliennummer]</span>
Die Nummer der Folie, die gerade angeschaut wird.
<span id="csSep">/</span>
Das Trennzeichen zwischen der aktuellen Folienangabe und der Geasamtzahl. Momentan ist dieses Zeichen ein einfacher Slash (/), in zukünftigen Versionen con S5 kann dieser Wert eventuell auch ohne Änderungen am JavaScript geändert werden.

<span id="csTotal">[Gesamtzahl der Folien]</span>
Die Anzahl der Folien in der Präsentation. Diese Zählung enthält die erste Seite nicht. Diese Wird als Seite “Null” definiert.


<div id="header">[Kopfzeilen-Inhalt]</div>
Jeglicher Inhalt der Kopfzeile sollte in diesen Abschnitt gesetzt werden. Auch wenn die Kopfzeile keinen Inhalt hat sollte der Abschnitt als leeres Element vorhanden bleiben.
<div id="footer"> </div>
Jeglicher Inhalt der Fußzeile sollte in dieses Element gesetzt werden.
<div class="topleft">[Layout-Container oben links]</div>
<div class="topright">[Layout-Container oben rechts]</div>
<div class="bottomleft">[Layout-Container unten links]</div>
<div class="bottomright">[Layout-Container unten rechts]</div>
Diese Elemente haben ein class-Attribut, das einen Wert enthält, der ihre Layout-Position anzeigt, z.B. <div class="topleft">. Man kann ihnen ein optionales id-Attribut zuweisen, welches auf ein relevantes meta-Element verweist. Von OSF 1.0 kopiert.

Die Folien

  1. <div class="presentation">
  2. <div class="slide">
  3. <h1>[Seiten-Titel]</h1>
  4. <div class="slidecontent">
  5. [Inhalt der Seite]
  6. </div>
  7. <div class="handout">
  8. [Weiterer Inhalt, der nur auf gedruckten Handzetteln,
  9. nicht aber in der Präsentation vorkommt]
  10. </div>
  11. </div>
  12. </div>
  13. Diesen Quelltext herunterladen.
<div class="slide"> </div>
Der presentation-Anschnitt der Datei enthält eine oder mehrere Seiten. Der Inhalt der einzelnen Seiten ist – natürlich – dem Autor überlassen. Dieses Element enthält einige Unter-Elemente:
<h1>[Seiten-Titel]</h1>
Der Inhalt dieses Elements enthält den Titel der Seite. Alle Titel werden vom JavaScript gesammelt und dann als Menü eingeblendet. Falls eine Seite unbenannt ist, wird empfohlen ein leeres h1-Element stehen zu lassen.
<div class="slidecontent"> </div>
Der Inhalt der Seite kann optional in dieses div eingeschlossen werden, obwohl man auch ohne auskommt. Beachte, dass die Benutzung dieses Elements zwar optional ist, aber Inhalt selbst ist für jede Seite hochgradig empfohlen. Der Inhalt einer Seite kann valides XHTML und Text sein. Eine gewöhnliche Seite würde eine ungeordnete Liste enthalten mit fünf oder so Punkten.
<div class="handout"> </div>
Dies wird benutzt um Inhalt zu vermitteln, der nur auf den gedruckten Handzetteln erscheinen soll. Der Inhalt kann valides XHTML und Text sein. Es gibt keine Beschränkungen der Länge. Beispielsweise könnte bei einer Präsentation zum Thema „CSS“ verschiedene Beispiele für CSS-Techniken in diesem handout-Bereich angebracht werden.

Vollständiges Beispiel

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>[Präsentationstitel]</title>
  6. <!-- metadata -->
  7. <meta name="generator" content="[Programm, das das Dokument erstellt hat]" />
  8. <meta name="version" content="S5 1.1" />
  9. <meta name="presdate" content="[Datum der Präsentation]" />
  10. <meta name="author" content="[Name des Autors]" />
  11. <meta name="company" content="[Arbeitgeber des Autors]" />
  12. <!-- Einstellungen -->
  13. <meta name="defaultView" content="slideshow" />
  14. <meta name="controlVis" content="hidden" />
  15. <!-- CSS-Links -->
  16. <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
  17. <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
  18. <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
  19. <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
  20. <!-- S5 JavaScript -->
  21. <script src="ui/default/slides.js" type="text/javascript"></script>
  22. <meta http-equiv="Content-Type" content="[Inhalts-Typ]" />
  23. </head>
  24. <body>
  25.  
  26. <div class="layout">
  27. <div id="controls"></div>
  28. <div id="currentSlide"></div>
  29. <div id="header">[Kopfzeilen-Inhalt]</div>
  30. <div id="footer">[Fußzeilen-Inhalt]</div>
  31. <div class="topleft">[Layout-Container oben links]</div>
  32. <div class="topright">[Layout-Container oben rechts]</div>
  33. <div class="bottomleft">[Layout-Container unten links]</div>
  34. <div class="bottomright">[Layout-Container unten rechts]</div>
  35. </div>
  36.  
  37. <div class="presentation">
  38.  
  39. <div class="slide">
  40. <h1>[Seiten-Titel]</h1>
  41. <h2>[Seiten-Untertitel]</h2>
  42. <h3>[Name des Autors]</h3>
  43. <h4>[Arbeitgeber des Autors]</h4>
  44. </div>
  45.  
  46. <div class="slide">
  47. <h1>[Seiten-Titel]</h1>
  48. <div class="slidecontent">
  49. [Inhalt der Seite]
  50. </div>
  51. <div class="handout">
  52. [Weiterer Inhalt, der nur auf gedruckten Handzetteln,
  53. nicht aber in der Präsentation vorkommt]
  54. </div>
  55. </div>
  56.  
  57. </div>
  58. </body>
  59. </html>
  60. Diesen Quelltext herunterladen.