Guten Abend zusammen, Heute möchte ich ein sehr entspanntes Thema ansprechen – Präsentationen mit impress.js.

Impress.js vs Powerpoint, OpenOffice, LaTeX etc.

Vielleicht erinnern sich nun einige unter euch an ihre Schulzeit zurück, als es hieß „Zu diesem Thema werdet ihr eine Präsentation vorbereiten (…)“. Wie gerne hätte ich damals ein Tool wie impress.js (und HTML5/CSS3 ;)) gehabt. Weg von Powerpoint, OpenOffice Impress, LaTeX und den anderen Programmen und Formaten!

Aktuelle Technik: HTML5 und CSS3

Impress.js macht von aktueller Technik Gebrauch und verbindet HTML5, CSS3 und Javascript zu einer sehr dynamischen Präsentation die komplett im Browser abgespielt wird und (auf Wunsch) mit sehr außergewöhnlichen Animationen protzt.
Die Idee ist nicht neu, so bietet der Dienst Prezi bereits seit längerem ähnlich animierte Präsentationen an, allerdings wird hier Flash benutzt und es gibt einige Begrenzungen sofern man keine Lizenz erwirbt.

Die Lösung von Bartek Szopka dagegen ist für jeden frei verfügbar und verfügt sogar über 3D Animationen (mit Hilfe von CSS Transforms) – Den Quellcode bekommt ihr auf github.

Einfache Bedienung

Was mir an impress.js besonders gefällt, ist, das es extrem einfach zu benutzen ist, sich auf das wesentliche beschränkt und dennoch einige interessante Features mitbringt – Auf diese möchte ich im Verlauf des Postings eingehen!

Zuerst möchte ich aber kurz erklären wie das Framework arbeitet: Stellt euch euer Browserfenster als unendlich großes Koordinatensystem vor – Hier könnt ihr eure Folien auf allen drei Achsen positionieren und drehen!
Impress.js wird anschließend von Folie zu Folie fahren und dabei entsprechend die Kamera drehen und wenden.

Die einzelnen „Folien“ der Präsentation können beliebige Elemente sein (DIV, SECTION, …) – Die einzelnen Schritte müssen lediglich die CSS Klasse „step“ bekommen. Die verschiedene Positionierung der Folien wird mit Hilfe von HTML5 Data-Attributen definiert:

<div>
    Dies könnte unsere "Ausgangsfolie" sein, diese stellen wir idealerweise in der "Mitte" dar.
    (Wie im Koordinatensystem am Punkt X:0, Y:0 und Z:0)
</div>
<div data-x="1000" data-y="500" data-rotate="45">
    Diese Folie wird (vom Nullpunkt aus) 1000 Pixel weit rechts, 
    500 Pixel weiter unten und um 45° gedreht dargestellt.
</div>
<div data-x="2000" data-y="1000" data-rotate-y="180">
    Diese Folie wird noch weiter versetzt dargestellt und
    auf der Y-Achste um 180° gedreht.
</div>

Solltet ihr keiner eurer Folien eine Position zugewiesen haben ist das nicht allzu schlimm – Sie werden zwar alle übereinander dargestellt, doch ihr könnt die Darstellung natürlich mit CSS steuern… Alle Folien die bereits durchlaufen wurden bekommen die CSS-Klasse „past“ und die, die noch durchlaufen werden müssen „future“. Außerdem bekommt die aktuelle Folie die CSS Klasse „present“ und, sobald die Animation „zur Folie hin“ abgeschlossen ist, „active“.

Auf ein Minimum reduziert

Wo ich grade bei CSS angelangt bin solltet ihr eines noch unbedingt beachten: Das Framework bringt nur die Technik mit um von Folie zu Folie zu gleiten – Alles andere muss von euch kommen, sprich Design (CSS). Die Demo-Präsentation sollte nur als ganz simples Beispiel angesehen werden – Diese zeigt nämlich in wenigen Schritten was (im groben) mit dem Framework (animationstechnisch) möglich ist.

Wenn ihr eure eigenen Präsentationen umsetzen wollt kann ich euch nur nahelegen den Quellcode der Demo-Präsentation genau durchzulesen – Er ist hervorragend dokumentiert und erklärt auch hier und da wie impress.js arbeitet.

Kommen wir abschließend zu ein paar weiteren Features, die man auf den ersten Blick gar nicht wahrnimmt – Impress.js ist, durch die technischen Voraussetzungen, nur für aktuelle Browser geeignet. Das bedeutet aber nicht, das ihr aufwändige Fallbacks vorbereiten müsst – Das passiert (in der Regel) durch die HTML Struktur der Präsentation von selbst:
Alte Browser müssen zwar auf sämtliche Animationen verzichten, bekommen aber stattdessen ein leserliches und strukturiertes Dokument mit dem sich arbeiten lässt. Das bedeutet der Inhalt eurer Präsentation geht nicht etwa verloren – Eher im Gegenteil.
Da freut sich nicht nur der Besucher sondern auch die Suchmaschine 😉

Wenn ihr euch durch die Demo-Präsentation geklickt habt ist euch vielleicht die URL aufgefallen. Impress.js ist nämlich in der Lage die aktuelle Folie als Ankerpunkte zu setzen – Falls ihr das ID-Attribut bei euren Folien befüllt werden diese als Anker verwendet… Bleibt das ID-Attribut leer, wird „step-1“ bis „step-n“ benutzt. Dadurch habt ihr feste Links zu euren einzelnen Folien.

Ich plane übrigens für die nächsten Wochen eine kleine Unterseite zum Blog zu erstellen (tutorials.web-developer-blog.com) wo ich, wie der Name schon sagt, kleine Tutorials sammeln möchte – unter anderem für Zepto, impress.js aber (sofern es die Freizeit erlaubt) auch etwas aufwändigere Themen wie ProcessWire.

Damit möchte ich mich für Heute verabschieden und euch einen schönen Dienstag Abend wünschen! Wie immer freue ich mich über Kommentare und Anregungen 🙂