praegnanz.de büro für intervernetzte medien

Gerrit, 17.03.2005

S5 – Schlanke Präsentationen per Browser

Sie sind PowerPoint Leid? Sie möchten sich nicht an eine proprietäre Software binden? Sie wollen einfach nur ihre Inhalte auf elegante Weise präsentieren? Dann werfen Sie einen Blick auf das HTML-basierte Präsentationstool S5.

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«).

17 Kommentare

  1. Markus am 2. März 2005 #

    Danke für den Hinweis und den weiterführenden Link zu Eric. Vielleicht kann ich mich ja damit um PowerPoint in Informatik drücken. ;-)
  2. Markus am 2. März 2005 #

    Tatsächlich sehr interessant. Danke!
  3. Jann am 2. März 2005 #

    Super Gerrit! Dein Artikel hat Lust auf mehr gemacht. S5 werde ich mal testen.
  4. Erics Weblog am 2. März 2005 #

    Trackback von Erics Weblog:
    Gerrit über S5

    »Das JavaScript von S5 ist extrem mächtig.« Gerrit van Aaken/praegnanz.de Gerrit hat sich S5 gewidmet, dem simplen, standardbasiertem Slide Show System. Sein Artikel ist vor allem für Einsteiger interessant, die sich über ...
  5. Beate am 2. März 2005 #

    Gerrit, kannst du kurz noch was zu OperaShow sagen? Ich bin ja kein OperaFreund, und ich versteh nicht, wie man bei S5 mit Opera navigiert. Es sind keine Buttons unten rechts zu sehen und über die Tastatur klappt es auch nicht, eine Seite zurück zu springen.

    Noch was anderes: Wer im FF präsentiert, braucht die Autohide -Extension.
  6. René am 2. März 2005 #

    Ich habe schon einen Vortrag mit page-break-before erstellt. Letztendlich ist es die dafür gedachte CSS-Eigenschaft (So geht´s).

    Leider ist Opera der einzige Browser, der diese Eigenschaft überhaupt interpretiert – und funktioniert ganz ohne JavaScript. Im konkreten Fall hatte das zur Folge, daß ich meinen Laptop mit in die Hochschule schleppen mußte ;-)

    @Beate: PageUp/PageDown
  7. René am 2. März 2005 #

    hätte mir vorher Textile anschauen sollen:

    so geht´s
  8. rico am 2. März 2005 #

    hallo

    danke für den artikel.
    ich hab hier noch zwei kleine links für die präsentation per opera;
    http://www.opera.com/support/tutorials/operashow/index.dml (engl)
    http://opera-fansite.de/wiki/Tutorial:+OperaShow (deu)

    grüße

    rico
  9. Olli am 3. März 2005 #

    Ich habe S5 bei einem meiner letzten Referate eingesetzt und war zunächst auch begeistert, wie einfach eine solche Präsentation zu erstellen ist. Beispielsweise muss man sich nicht mit sinnlosen Autoformatfunktionen in Powerpoint rumschlagen, die das Layout komplett aus den Angeln heben.

    An seine Grenzen stößt S5 aber z.B., wenn man Bilder einfügen will. Diese vernünftig zu positionieren kann mitunter in ein kleines Abenteuer ausartig, besonders dann, wenn man kleinere Graphiken einfügen will und der Text diese Bilder umfließen soll. Dafür ist dann ganz schön gefriemel notwendig.

    Aber trotzdem ist S5 eine gelungene Alternative, zu den herkömmlichen Präsentationsprogrammen.
  10. five-vicodin.de am 7. März 2005 #

    Trackback von five-vicodin.de:
    Gestrichen!

    Mein erster Podcast ist bis auf Weiteres gestrichen. Entweder bin ich generell unfähig etwas sauber und fehlerfrei aufzunehmen oder ich hab mir 'n schlechten Tag dazu ausgesucht. Hier meine eigentliche Linkliste - vielleicht errät ja jemand, was i...
  11. markus am 31. März 2005 #

    Wenn es nur darum geht, um Powerpoint herumzukommen (was ja an sich schon ein lobenswertes Motiv ist), dann sollte man auch LaTeX basierte PDF-Präsentationen in Betracht ziehen. Ebenfalls nichts für technisch Unbedarfte, aber am Ende für jeden der HTML kann sicherlich keine Hürde.

    Zum Beispiel mit dem aktuellen Paket »Beamer«. Hier eine Beispielpräsentation von der extrem bescheidenen Beamer-Homepage . Zu diesem Paket gibt es auch eine 203-seitige Doku (im Paket enthalten, leider nicht online).

    Das exakte Positionieren von Bildern ist ebenfalls schwer möglich, aber dafür ist das Schriftbild in LaTeX sehr schön und die Dokumente wirken einfach sauber, konsistent und elegant. Am Ende ist es vor allem eine Einstellungsfrage: man muss die Präsentationen anders planen, um die Stärken von LaTeX anstatt die von Powerpoint auszuspielen. Sehr sinnvoll auch für jeden, der viele ungewöhnliche Sonderzeichen benötigt (z.B. für Fachpräsentationen).
  12. Jens Meiert am 19. August 2005 #

    Schoen, dass du schon darueber geschrieben hast, wie ich just feststelle. Habe vor zwei knapp zwei Wochen selbst nochmal einen Artikel ueber S5 verfasst. Ole.
  13. Heiko am 11. Oktober 2005 #

    Hi Gerrit, bei mir gibt’s jetzt die Antwort auf deine Frage: Und was ist der Vorteil von HTML Slidy gegenüber S5?
  14. Heiko am 17. Oktober 2005 #

    Zu S5 gibt’s in der neuen c’t (no.22) einen guten zweiseitigen Artikel. Auch wenn nichts neues im Artikel steht, ist er empfehlenswert!
  15. Biggi am 20. Oktober 2005 #

    Hi,
    danke für die Übersicht über Vor- und Nachteile. Was mich betrifft überwiegen die Vorteile. Endlich unabhängig von den verschiedenen Powerpoint Versionen, die alle Kompatibilitätsprobleme miteinander haben.
  16. anonymous am 4. November 2005 #

    Interessant ist auch der Einsatz von XUL für Präsentationen im Takahashi-Stil, siehe z.B. pugs.xul und haskell.xul.

    (Natürlich funzt das nur in Gecko-basierten Browsern.)
  17. S5easy am 9. November 2005 #

    S5 Slideshows online erstellen und speichern auf s5easy.com

Kommentarfunktion für diesen Artikel geschlossen.