TagCloud

Präsentationen im Web

Oktober 22nd, 2012 von buergermeister

Nicht erst zu meinem Vortrag auf der Ubucon 2012 habe ich als Möglichkeit, nicht auf Flash, PDF oder die Präsentationsprogramme einer freien Office-Suite zurückgreifen zu müssen, Möglichkeiten aufgezeigt auch mit HTML, JavaScript oder CSS Slides zu erzeugen.
Nicht das diese Möglichkeiten für mich der letzte Schluss sind, schliesslich fehlt dem Endbenutzer jede Art von GUI und man muss den Quelltext editieren. Ausserdem fehlt mir immer die Möglichkeit Grafiken einzubinden, weshalb ich Inkscape/JessyInk bzw. Sozi bevorzuge.

Nichts desto trotz stellt diese Variante auch eine Möglichkeit dar und auch hier gibt es jede Menge Ansätze Präsentationen zu erstellen und da einige danach gefragt haben, mache ich hier nun eine kleine Übersicht über die Entsprechenden Entwicklungen und ihre Vor- und Nachteile. Generell ist bei allen zu sagen, dass man ein wenig im Auge behalten sollte, dass sich bei einigen um Zukunftstechnologien handelt und nicht alle Features von allen Browsern unterstützt werden. Das gleich Problem hat man allerdings auch mit SVG, so werden ja Filter immer noch nicht vom Internet Explorer unterstützt.

deck.js von Caleb Troughton bietet quasi nur eine seitenbasierte Präsentation und ist modular aufgebaut. Bei deck.js werden verschiedene Extensions angeboten, die man bei Bedarf mit einbinden kann. So zum Beispiel eine Übersichtsseite, dafür muss nur deck.menu eingebunden werden. Deck.js ist ansonsten simple gehalten, die Präsentationsseiten in HTML schreiben dann muss nur ein Style für die Folien und einer für die Übergänge gewählt werden und fertig. Bei Bedarf können auch weitere Module eingebunden werden und das einbetten von Bildern und Videos stellt kein Problem dar. Deck.js kann hier als Beispiel betrachtet werden und auch heruntergeladen werden.

Pik6 von Peter Kroener war eigentlich einst nur für den Eigenbedarf gedacht, hat aber so einiges an Möglichkeiten zu bieten. Es kommen WebWorkers zum Einsatz, die allerdings nicht alle Browser unterstützen. Opera und Chrome unterstützen diese und damit steht auch das herausragende Feature von Pik6 zur Verfügung. Pik6 kann dem Presenter eine eigene Ansicht bieten, auf der dann Notizen untergebracht werden können, die das Publikum nicht sieht. Dort wird ebenfalls eine Uhr angezeigt, damit man auch die Zeit verfolgen kann, beides ein sehr nützliches Feature. Auch für Pik6 gibt es noch weitere Plugins wie zum Beispiel printHandout.js zum Drucken eines Handout. Ausprobieren und herunterladen kann man Pik6 hier.

Auch CSSS wurde eigentlich für den Eigenbedarf gestartet und basiert wie der Name verrät überwiegend auf den Möglichkeiten von CSS, nur für die Komponenten, für die keine Möglichkeiten besteht wird JavaScript benutzt. Das Ergebnis kann sich trotzdem sehen lassen. Die Dateien zum Download findet man hier.

Optisch schon eindrucksvoller wird es mit reveal.js von Hakim el Hattab. Um die 3D Effekte einsetzen zu können, braucht man allerdings einen Browser der CSS 3D Transitions und Transformationen unterstützt. Allerdings können auch andere Browser die Folien darstellen, dank eines FallBack-Modus. Interessant sind für mich jedoch nicht die optischen Effekte als das ich in mehrere Richtungen in einer Präsentation fortschreiten kann.

Slides von Brian Cavalier ist eine sehr schlichte Lösung ohne viel optische Effekte. Inhalte werden einfach in HTML oder Plain Text erstellt und dann wird nur noch, ein Theming via CSS erstellt, für die Präsentation sorgen dann die JavaScripts aus Slides. Einen Vorgeschmack auf Slides kann man hier bekommen und das Projekt findet man hier zum Download.

Luke Mahé und Marcin Wichary zusammen mit anderen Google-Leuten stecken hinter HTML5Slides. Welche Technologie zum Einsatz kommt, dürfte bereits der Name verraten. Von der Optik her bleibt HTML5Slides sehr schlicht ohne viel optischen Firlefanz. Um eigene Präsentation zu erstellen kann man einfach nur das Beispiel herunterladen und mit eigenen Inhalt füllen. Wie HTML5Slides aussieht, davon kann man sich hier einen Eindruck verschaffen. Zum Download findet man das Projekt hier.

Shower stammt von Vadim Makeev/Opera und ist ebenfalls eher schlicht gehalten. Auch hier gibt es eine Übersichtsseite, bei der man allerdings scrollen muss, wenn sich einige Folien darauf befinden und nicht viel anderen optischen Schnickschnack. Wer Shower in Aktion sehen will, der findet hier eine Beispielpräsentation und herunterladen kann man Shower hier.

S5 basiert auf XHTML, CSS und JavaScript und stammt von Eric Meyer. Bleibt in seinen optischen Möglichkeiten eher schlicht ist aber einfach zu handhaben. Ein Beispielpräsentation mit S5 kann man hier sehen und herunterladen kann man sich S5 auf den Seiten von Eric Meyer.

Optisch wohl am eindrucksvollsten kommt impress.js daher, dabei orientiert man sich sehr stark an dem was der Service Prezi bietet. Im Gegensatz zu Prezi arbeitet impress.js nur mit CSS3 Transformationen und Transitions von modernen Browsern. Damit ist so einiges möglich, wie Zoomeffekte, Drehungen und 3dimensional wirkende Effekte. Das schlägt dann auch Sozi und JessyInk. Falls der Browser allerdings keine 3D Transisions unterstützt, bekommt man keine Slideshow sondern die Folien werden einfach untereinander dargestellt, damit bleibt der Inhalt darstellbar. Großes Manko von impress.js ist allerdings, dass man sehr viel im Quelltext editieren muss. Wer impress.js in Aktion sehen will, findet hier eine Beispielpräsentation. Herunterladen kann man impress.js und den man die Präsentation auf seinen Rechner kopiert und in einem Editor öffnet.

Fazit: Abgesehen von Pik6 welches eine interessante Lösung via Webworker bietet um Notizen und Zeit darzustellen bzw. verschiedene Ansichten für Presenter und Publikum und reveal.js welches durch 3dimensionale Anordnung der Folien auch Publikumsentscheidungen zulassen würde, bietet keins der Tools für mich persönlich einen Mehrwert zu JessyInk, Sozi und Inkscape. Die optischen Möglichkeiten von impress.js sind zwar toll, aber bieten nicht unbedingt Nutzen. Ich bleibe bei meiner Lösung, ausser ich benötige die Features von Pik6 oder reveal.js

Geschrieben in fedora-design, fedorapeople, Killer Application, ubuntuusers | 7 Kommentare »

ähnliche Artikel: Last day in Cambodia | FOSSASIA - day 2 | LibreGraphicsMeeting 2014 | Upcoming FOSSASIA 2014 | LibreGraphicsMeeting 2014 |

7 Kommentare

  1. Frank Sagt:

    Ich nutze Shower und bin in einigen Sessions damit sehr zufrieden; insbesondere auch an der Uni, wo das Internet als Papier gebraucht wird und die Druckversion unumgänglich ist.
    Link: https://github.com/bueltge/shower

  2. buergermeister Sagt:

    @Frank na sicher wirst du wohl shower benutzen ;) Ich mach meine Folien aber eher grafisch, das heisst ich zeichne viel und da ist für mich die JessyInk Lösung die bessere – ich schreibe halt keine Romane auf Folien

  3. Frank Sagt:

    Ja, Gerade Tools wie Shower und die anderen sind am Ende doch für Texte gemacht, Web und Indizierung eben; Grafik sind nur als Beiwerk eingebunden.
    Shower stammt nicht von mir, ich habe es nur anders weiter entwickelt, da ich besonderen Wert auf Print legen musste.

  4. buergermeister Sagt:

    @Frank sorry “Text” ist auch indizierbar innerhalb von SVG, wenn es sich um Text handelt und nicht um Pfade

  5. Frank Sagt:

    Ja, sicher; hatte ich vergessen. Wobei SVG immer noch vernachlässigt wird; ist mein Eindruck. Ansonsten nutze ich dafür Inkscape, wobei meine Fähigkeiten da so gering sind, dass ich schon deshalb mehr auf der Ebene Text bleibe ;)

  6. buergermeister Sagt:

    @Frank Ja leider, aber ich denke das wird sich in Zukunft schon etwas ändern.

    Was die Inkscape-Fähigkeiten betrifft, dem kann abgeholfen werden: http://karl-tux-stadt.de/ktuxs/?p=3933

  7. Karl-Tux-Stadt » Blog Archi » Review 2012 Sagt:

    [...] LinuxTag und FrOSCon, im Oktober folgte dann der erste Inkscape-Workshop hier in Chemnitz und die Ubucon in Berlin. Schon zum Workshop konnte ich dank vieler Freunde mit meinem neuen Laptop arbeiten, [...]

Einen Kommentar abgeben

Bitte beachte: Die Kommentare werden moderiert. Dies kann zu Verzögerungen bei Deinem Kommentar führen. Es besteht kein Grund den Kommentar erneut abzuschicken.