HTML5/CSS3: Die 10+ besten Präsentations – Frameworks
Die Tage von Powerpoint und Co sind gezählt. Mit dem Einzug von HTML5 und CSS3 sind in letzter Zeit einige wirklich beeindruckende Presentation Frameworks entstanden. Diese Frameworks bilden für euch ein Template, so dass ihr lediglich Design, wenn überhaupt, und Inhalt angepasst werden müssen. Welche Frameworks bietet also die Webwelt?
Impress.js
Das wohl verspielteste Präsentations-Framework ist aus meiner Sicht impress.js. Angelehnt an das kostenpflichtige und ebenfalls sehr innovative prezi bietet impress.js eine vollkommen neue Variante der Präsentationskunst. Ihr solltet auf jeden Fall mal einen Blick riskieren.
Google HTML5 Slides
Bei Präsentationen aus dem Hause Google kommt in letzter Zeit vermehrt ihr eigens entwickeltes Presentation Framework zum Einsatz. Die auf der Projektpage vorhandenen Designs sind in üblicher Google-Manier schlicht und zeitgleich elegant, was natürlich nur meine subjekte Meinung widerspiegelt.
Die Demo bietet für fast alle Anwendungsfälle passende Beispiele, so dass sich eigentlich jeder schnell zu recht finden sollte.
reveal.js – A CSS 3D Slideshow
Ähnlich wie impress.js wirkt sehr modern und zeitgemäß. Das Zeitalter der schlichten Slides, die einfach von links nach rechts einfliegen, ist vorbei. Ich persönliche finde reveal.js noch ein bisschen besser als prezi/impress.js, da es nicht mit ganz so vielen Drehungen daher kommt.
Das verfolgen der Slides bzw. der logische Aufbau einer Präsentation lässt sich mit diesem Framework, und dem damit verbundenem 3D Effekt, einfacher verfolgen.
HTML5 Presentation
Die Google HTML5 Slides und die HTML5 Presentation sind sehr ähnlich. Die große Funktionsvielfalt von HTML5 macht sich dieses Framework zu nutzen und stellt die Möglichkeiten in der Demo sehr gut dar.
Die Slides werden von dem Projekt HTML5rocks bereitgestellt. Ebenfalls eine gute Adresse, um die neue Funktionsvielfalt von HTML5 kennen zu lernen.
HTML Slide Presentation
Sehr minimal und schlicht kommt die HTML Slide Presentation von Brian Cavalier daher. Aber gerade dieses einfache Design finde ich persönlich sehr beeindruckend, so kann man sich als Zuhörer auf die Inhalte der Präsentation konzentrieren.
Shower Presentation
Der Opera Entwickler Vadim Makeev hat eine wirklich großartige Arbeit mit seinem Shower Presentation Framework abgeliefert. Zunächst einmal werden die Slides als kleine Thumbnails auf einer Übersichtsseite dargestellt, die dann durch Klicken im Vollbildmodus geöffnet werden können.
CSSS – CSS based SlideShow System
Der Großteil dieses Framework ist auf Basis von CSS umgesetzt worden, um die HTML-Datei, die den Content beinhaltet, so schlank wie möglich zu gestalten. Dadurch lässt sich das Design der Präsentation schnell ändern, da lediglich eine CSS-Datei durchgetauscht werden muss.
Das Design in der Demo ist wie bereits bei einigen anderen Beispielen sehr gut gelungen.
deck.js
Ebenfalls ein Präsentations-Framework, das sich in der Struktur den Google HTML5 Slides und der HTML Slide Presentation ähnelt. Das besondere an diesem Framework ist der modulare Aufbau. Der deck.js-Kern stellt eine API zur Verfügung an die die individuellen Plugins andocken können.
Last, but not least
Ebenfalls einen Blick wert:
- S5: Projektseite | Demo
- Jquery Presentation Plugin: Projektseite | Demo
- Pik6: Projektseite | Demo
- Pure CSS Slideshow: Demo
- Prezi: Projektseite | Demo
Viel Spaß beim Ausprobieren und Testen der neuen Presentation Frameworks. Für weitere Hinweise auf beeindruckende Präsentations-Frameworks bin ich natürlich sehr dankbar.








Hi, (sorry for the comment in english)
Thanks for this list. I used to develop my own system (not listed above).
I wanted to point out that deck.js now has an awesome feature: animation of SVG images. You can try a very simple demo here:
http://home.heeere.com/data/deck-js-svg-demo/examples/svg-animations.html
Cheers,
Rémi
Hey Rémi,
thanks for your comment and your tip about “animation of SVG images”. It looks great!
Best regards,
Dennis
Interessanter post! Werde mir demnaechst mal einige der frameworks angucken, viele klingen auf jeden fall interessant!
Eine echt tolle Zusammenstellung. Werde ich mir mal im Hinterkopf behalten. Damit kann man sicher tolle Präsentations-Seiten oder Micro-Sites erstellen.
Super Sammlung. Reveal.js und Deck.js sind gut für das iPad geeignet.
Vielen Dank für die nette Zusammenstellung!