Ein Unding, dass ich da noch nichts drüber geschrieben habe. Aber spät ist definitiv besser als nie. Also, was zur Hölle ist nun schon wieder S5? Computerfreaks und Web-Designer lieben Abkürzungen. Eric Meyer ist beides und daher liebt er extreme Abkürzungen. S5 steht für »Simple Standards-Based Slide Show System«. Man kann also Beamerpräsentationen verfassen und gestalten, ohne Powerpoint oder Keynote zu verwenden. Präsentiert per Browser. Und für Leute, die ein wenig HTML beherrschen, auch ganz einfach zu erstellen.

Wie wird das gemacht?

Folgende Merkmale zeichen S5 aus:

• Die eigentlichen Inhalte der Präsentation bestehen aus einer einzelnen XHTML-Datei.
• Gestylt wird das Ganze über eine Handvoll von externen CSS-Dateien.
• Die Aufteilung in mehrere Folien und die gesamte Navigation (inkl. Weiterschalten, Direktzugriff auf alle Folien und Tastaturkommandos) erledigt eine externe JavaScript-Datei.

Wie kann ich das nutzen?

Jeder mit ein wenig HTML-Quellcode-Erfahrung kann S5 nutzen. Die Vorgehensweise ist folgende:

1. Ich lade mir kostenlos das kleine S5-Paket herunter. Dies enthält eine leere Beispielpräsentation mit zwei Beispielseiten.
2. Ich schaue mir das Paket an. Es ist eine HTML-Datei und ein Ordner ui.
3. Ich kann nun in dieser HTML-Datei meine Präsentation einfügen. Es werden die bekannten Basis-Tags von HTML verwendet. h1 bis h6, Bullet-Listen, Aufzählungslisten, usw. Der Quellcode ist superschlank und enthält lediglich einige div-Container zur Gliederung. Ich erkenne an der Struktur sofort, wie der Quellcode aufgebaut ist, und kann ganz einfach neue Folien hinzufügen.
4. Natürlich können auch Bilder verwendet werden. Es empfiehlt sich, dafür einen externen Bilderordner anzulegen.
5. Wenn ich das Standard-Layout gut finde (eher unwahrscheinlich), bin ich jetzt schon fertig.
6. Wenn ich umstylen möchte, gehe ich in die CSS-Dateien, die sich im Ordner ui befinden. (Zum Live-Manipulieren von CSS empfiehlt sich natürlich Firefox mit der Developer-Toolbar)
7. Das war’s schon!

Magie!? Wie kommt die Navigation zustande?

Ganz einfach: Das JavaScript von S5 ist extrem mächtig. Bei Aufruf der Seite im Browser wird das gesamte HTML-Dokument gescannt und in Häppchen zerteilt. Eine Navigation wird aus den Abschnitts-Überschriften automatisch generiert. Hier wird deutlich, wie sinnvoll ein semantisch gegliederter HTML-Quellcode sein kann. Er macht aus einem Einzeldokument durch skriptgesteuerte Manipulation eine komplette, benutzerfreundliche Präsentations-Website, die man mit beliebigen Inhalten füttern kann. Auch die Steuerung per Tastatur (wie man das bei Beamer-Vorträgen gewohnt ist), wird über JavaScript realisiert.

Was sind generell die Vorteile?

Es gibt einige Gründe, die für den Einsatz von S5 sprechen. Es gibt auch Gründe dagegen. Doch wir wollen hier mal nicht so negativ sein :-)

• S5 ist kostenlos: Eine Präsentation kann mit einem simplen Texteditor erstellt werden. Mehr braucht man nicht. Es gilt lediglich eine CreativeCommons-Lizenz zu beachten.
• S5 ist flexibel: Die Beamer-Präsentation kann mit einem entsprechenden Stylesheet exzellent für den Ausdruck auf Papier optimiert werden. Und wer eine Präsentation in verschiedenen Gewändern benötigt, um sie verschiedenen Zielgruppen zu zeigen, kann das auch problemlos tun.
• S5 ist webbasiert: Man stellt seine Präsentation, so wie sie ist, ins Web. Und schickt den Link per Mail.
• S5 ist barrierefrei: Wer sich die Präsentation am eigenen Rechner ansieht, kann Schriftgrößen und Kontrast per Browsereinstellungen oder eigenen CSS-Regeln so verändern, wie er es braucht.
• S5 ist schlank: Die Datenmengen für den Text sind vernachlässigbar. Allein die Bilder sind potenzielle Datenfresser.

Für wen ist S5 eine Option?

Mit Sicherheit nicht für Computer-Laien! S5 ist nicht angetreten, um die Kernzielgruppe von Powerpoint oder Keynote abzuwerben. Beide Programme bieten umfangreiche Methoden, Grafiken und Texte per WYSIWYG zu verbinden und somit umfangreiche und gutaussehende Präsentationen zu basteln.

S5 ist für Leute, die die Vorteile von Websites mit den Vorteilen einer folienbasierten Präsentation verbinden wollen. Quasi ein Hybrid aus einer Website und einer Beamerpräsentation. Die man auch noch exzellent drucken kann. Und die für HTML-Coder extrem einfach herzustellen ist. Und die im Übrigen auch Eindruck schinden kann.

Wer als Webdesigner seine gesamte Kundenpräsentation bereits mitten im richtigen Medium (also im Browser) präsentiert, sammelt schon mal Kompetenzpunkte. Der Kunde muss ja nicht wissen, dass der Herr Designer keineswegs 35 Folien per Hand angelegt und verlinkt hat, sondern einfach alles in eine Datei reingehackt und später global gestylt hat.

Natürlich ist das ein bisschen nerdig. Und ideologisch sowieso. Aber es ist elegant und kompatibel. Und nicht zuletzt sollte erwähnt werden, dass der Opera-Browser bei S5-Präsentationen sein schon lange eingebautes Opera Show System anwirft, welches die Präsentation noch komfortabler und hübscher macht. Na? Neugierig geworden?

Noch viel mehr Info auf deutsch gibt es beim geschätzten Kollegen Eric Eggert auf yatil.de/s5. Hier kann man sich auch eine aktuelle, eingedeutschte beta-Version ansehen: Sehr hübsch!

Ach übrigens: Templates für S5 zu gestalten könnte fast so cool sein wie ein ZenGarden-Layout zu entwerfen. Kommt gleich mal auf die FSM-Liste (»Für Später Mal«).