Diese auf impress.js (HTML5) basierende Präsentation sollte in einem Browser betrachtet werden, der HTML5 beherrscht. Ihrer tut es nicht oder nicht vollständig.

Zum Anfang Präsentation herunterladen (ZIP-Datei)

Präsentationen mit impress.js

Eine praktische Anleitung von Sebastian Wolf

Über impress.js

  • Entwickelt von Bartek Szopka
  • Download der Basis-Dateien unter https://github.com/bartaz/impress.js/
    (Open Source, MIT/GPL-Lizenz)
  • Die Erstellung erfolgt entweder direkt im Quelltext oder mit speziellen Editoren, wie z.B. Strut http://strut.io/
  • Plugins mit Erweiterungen verfügbar

Die Basis

  • Für die korrekte Darstellung einer Präsentation mit impress.js ist ein HTML5-fähiger Browser nötig
  • Optimal ist eine aktuelle Version von Google Chrome, geeignet sind auch die neuesten Versionen von Firefox und Safari
  • Man sollte sich vorher vergewissern, dass sich ein entsprechender Browser auf dem Vorführ-PC befindet (am besten verwendet man den eigenen Laptop oder eine portable Version auf USB)

Die Dateien (1)

  • Der Inhalt der gesamten Präsentation steht in der Datei index.html. Hier ändert man die Inhalte
  • Die CSS-Datei liegt im Unterordner css. Hier ändert man die Darstellung und Effekte
  • Die Javascript-Datei liegt im Unterordner js. Änderungen hieran sind i.d.R. nicht nötig
  • Auch für Schriftarten (fonts) und Grafiken (images) gibt es eigene Unterverzeichnisse

Die Dateien (2)

  • Anders als bei Powerpoint besteht die Präsentation also nicht nur aus einer Datei, sondern aus vielen Dateien (mind. 1 HTML-, 1 CSS- und 1 Javascript-Datei, ggf. viele Grafik- und Font-Dateien)
  • Zum Vorführen der Präsentation ist es unabdingbar, dass alle Dateien vorhanden sind
  • Daher erstellt man für jede Präsentation einen eigenen Ordner und lädt diesen am Ende ins Web oder auf USB-Stick

Der Quelltext

Der Quelltext für eine "Folie" sieht im Prinzip so aus:

<section class="step slide" data-x="-500" data-y="-1500">
  <header>
  </header>
  <main>
    <h2>Der Quelltext</h2>
    <p>Der Quelltext sieht im Prinzip so aus</p>
  </main>
</section>

Was das bedeutet, schauen wir uns nun im Detail an

Die Leinwand

<section class="step slide" data-x="-500" data-y="-1500">
  • Das <section>-Tag steht für einen beliebigen Bereich (in diesem Fall eine Folie)
  • Die (CSS-)Klasse step regelt das Ein- und Ausblenden der Inhalte
  • Die Klasse slide erzeugt einen weißen Bereich mit runden Ecken (also das "Powerpoint-Folien-Äquivalent")

Das Raster

<section class="step slide" data-x="500" data-y="-1500">
  • Die Präsentation befindet sich auf einem virtuellen Raster
  • Die Position der Folie auf dem Raster gibt man mit data-x (waagerecht) und data-y (senkrecht) an
  • Die Größe einer Folie passt sich automatisch an Bildschirmauflösung und Fenstergröße an

Folien wandern lassen

Um die Folie nach rechts weiterwandern zu lassen (so wie es hier gerade passiert), erhöht man den data-x-Wert um 1000 (Pixel). Der data-y-Wert bleibt gleich.

Folie 1

<section class="step slide" data-x="1500" data-y="-1500">

Folie 2 (rechts von Folie 1)

<section class="step slide" data-x="2500" data-y="-1500">

Mehrteilige Folien (1)

<section class="step slide multi" data-x="2500" data-y="-1500">
  • Soll beim Folienwechsel die Folie nicht "wandern" ergänzt man die CSS-Klasse multi. Die nicht-aktive Folie wird dann automatisch komplett ausgeblendet, damit sich die Inhalte nicht überlappen
  • Die data-x und data-y-Werte dürfen dann natürlich nicht verändert werden

Mehrteilige Folien (2)

<section class="step slide multi" data-x="2500" data-y="-1500">
  • Das ist nützlich bei Inhalten zu einem Thema, die nicht auf eine Folie passen

Mehrteilige Folien (2)

<section class="step slide multi" data-x="2500" data-y="-1500">
  • Das ist nützlich bei Inhalten zu einem Thema, die nicht auf eine Folie passen
  • Man kann so auch Inhalte Absatz für Absatz - wie bei Powerpoint - einblenden (schaut in den Quelltext, um zu sehen, wie das gemacht wurde)

Folien benennen

<section id="name" class="step slide" data-x="3500" data-y="-1500">
  • Jede Folie kann unter einer eigenen URL direkt abgerufen oder verlinkt werden
  • Standardmäßig ist der Name step-nr, wobei nr die Foliennummer ist (z.B. step-13 für Folie 13)
  • Mittels des Attributs id kann man feste Namen vergeben, die unabhängig von der Foliennnumer sind

Schwung…

in die Präsentation bringt man mit data-rotate. Außerdem kommt auf dieser "Folie" noch blank und data-scale zum Einsatz. Was man damit macht, schauen wir uns jetzt mal an.

Zwischentitel - so geht's

<section class="step blank" data-x="-500" data-y="0" 
  data-rotate="90" data-scale="2.5">
  • Mit der Klasse blank erzeugt man eine blanke "Folie" ohne Header, Hintergrund oder Ecken
  • data-rotate legt die Rotation fest - und zwar erst nach links und bei der nächsten Folie in gleichem Winkel wieder zurück nach rechts
  • data-scale ist die Skalierung der Folie im Vergleich zu den anderen Folien
  • data-x und data-y kennen wir ja schon (oder?)

Nun geht's bergab

Für diesen "Wander"-Effekt erhöht man den data-y-Wert um 750. Der data-x-Wert bleibt unverändert.

Folie 1

<section class="step slide" data-x="1500" data-y="250">

Folie 2 (unter Folie 1)

<section class="step slide" data-x="1500" data-y="1000">

Kopfbereich (1)

Der Kopfbereich wird über das <header>-Tag definiert. Das Logo in der Kopfzeile wird direkt per CSS eingefügt. Die grüne Linie wird ebenfalls über CSS eingefügt (main:before).

<section … >
  <header>
  </header>
  <main>
    Inhalt …
  </main>
</section>

Kopfbereich (2)

Soll oben ein weiteres Logo zu sehen sein, fügt man einfach ein <img> in den <header> ein.

<header>
 <img src="images/pub.jpg" alt="">
</header>

Grafiken im <header> werden per CSS rechts positioniert und ggf. automatisch verkleinert, damit sie optimal in den Kopfbereich passen. Gut, oder?

CC-Lizenz

Kopfbereich (3)

Grafiken im <header> sind immer etwas abgeblasst. Um eine Grafik noch stärker abzublassen (so wie auf dieser Folie oben rechts zu sehen), ergänzt man die Klasse blass

<img src="images/cc_by-sa.png" class="icon blass" alt="">

Tipp: Mit der Klasse blass kann man natürlich auch Text abblassen.

<p class="blass">Blasser Text</p>

Überschrift statt Logo

Kopfbereich (4)

Soll das Standard-Logo oben links einmal nicht zu sehen sein (sondern gar nichts oder ein Text), ergänzt man die Klasse blank im <header>.

<header class="blank">
  <h1>Überschrift statt Logo</h1>
</header>

Grafiken

Grafiken legt man im Unterordner images ab und kann sie natürlich überall einfügen (und verlinken).

<img src="images/vbf.jpg" alt="Virtuelle Bibliotheksführung">

Virtuelle Bibliotheksführung

Grafiken im Vollbild

Soll die Grafik die gesamte Breite der Folie einnehmen ergänzt man die Klasse vollbild.

<img src="images/pub.jpg" class="vollbild" alt="">

Die Grafik wird dann automatisch auf Folienbreite angepasst (also vergrößert oder verkleinert). Das Ergebnis ist auf der nächsten Folie zu sehen.

Bei (zu) kleinen Grafiken kann es dann natürlich zu unschönen "Unschärfe"-Effekten führen, daher sollte man vollbild nur bei (zu) großen Grafiken einsetzen.

Beispiel

Diese Grafik in Originalgröße.

Es geht rund…

wenn man (so wie auf dieser Folie)
data-rotate="270" verwendet.

Textgröße und -laufweite

  • Wenn großer oder sehr großer Text gewünscht ist, verwendet man die Klasse gross oder sehrgross
  • Soll der Text klein oder sehr klein werden, dann sind die Klasse klein und sehrklein Freund und Helfer
  • Zum Ändern der Laufweite gibt es die Klassen sehrschmal, schmal, breit und sehrbreit
<p class="gross">Großer Text</p>

Textgröße und -laufweite

Das lässt sich auch kombinieren.

<p class="sehrgross breit">Sehr großer und breiter Text</p>

Das lässt sich auch kombinieren.

<p class="sehrklein sehrschmal">Sehr kleiner und sehr schmaler Text</p>

Es geht wieder aufwärts

Für diesen Effekt reduziert man den data-y-Wert einfach um 750. Der data-x-Wert bleibt wieder gleich

Folie 1

<section class="step slide" data-x="1500" data-y="1000">

Folie 2 (über Folie 1)

<section class="step slide" data-x="1500" data-y="250">

Quizfrage

Welchen Wert muss ich - im Vergleich zu dieser Folie - um wie viel verändern, damit die Präsentation links weiterwandert (denn genau das tut sie gleich)?

  1. data-y um 750 reduzieren
  2. data-x um 750 erhöhen
  3. data-y um 1000 erhöhen
  4. data-x um 1000 reduzieren
  5. data-scale um 1 erhöhen
  6. data-rotate um 180 erhöhen

Antwort

d. data-x-Wert um 1000 reduzieren

data-x legt - wie auf dieser Folie erklärt - die waagerechte Positionierung fest. Der Wert muss um 1000 (Pixel) geändert werden, damit sich die Folien nicht überlappen. Soll übrigens eine Folie (wie diese) erst beim Wechsel eingeblendet werden (also nicht rechts oder links neben dieser Folie erscheinen), ergänzt man die Klasse hide.

<section class="step slide hide" data-x="-2000" data-y="2000">

Verlinkung

Links können ganz normal mit dem <a>-Tag gesetzt werden. Will man eine andere Folie innerhalb dieser Präsentation verlinken, gibt man die ID (Nummer oder Name) der Folie an.

<a href="#step-19">Folie 19</a>

Folie 19

<a href="#name">Folien benennen</a>

Folien benennen

Tabellen (1)

Die Grundstruktur für eine Tabelle (thead und tfoot sind fakultativ)

<table>
  <thead> … Kopf  … <thead>
  <tfoot> … Fuß … <tbody>
  <tbody> … Inhalt … <tbody>
</table>
Kopfspalte 1 Kopfspalte 2 Kopfspalte 3
Fußspalte 1 Fußspalte 2 Fußspalte 3
Textspalte 1 Textspalte 2 Textspalte 3

Tabellen (2)

Tabellen lassen sich mit den Klassen zebrastreifen, zebraspalten und erstespalte gestalten.

<table class="zebrastreifen">
Spalte 1 Spalte 2 Spalte 3
Text Text Text
Text Text Text
Text Text Text

Tabellen (3)

Tabellen lassen sich mit den Klassen zebrastreifen, zebraspalten und erstespalte gestalten.

<table class="zebraspalten">
Spalte 1 Spalte 2 Spalte 3
Text Text Text
Text Text Text
Text Text Text

Tabellen (4)

Tabellen lassen sich mit den Klassen zebrastreifen, zebraspalten und erstespalte gestalten.

<table class="erstespalte">
Spalte 1 Spalte 2 Spalte 3
Text Text Text
Text Text Text
Text Text Text

Mehrere Spalten

<p class="mehrspaltig">…</p>

Die Klasse mehrspaltig erzeugt - man ahnt es vielleicht schon - mehrspaltigen Text. In der CSS-Datei legt man fest, wie viele Spalten es sein sollen. In der Voreinstellung sind es zwei, wie es ja auch hier zu sehen ist. Die gleichmäßige Textaufteilung nimmt der Browser automatisch selbst vor.

Listen (1)

Listen (egal ob unnummerierte oder nummerierte) fügt man ganz einfach über die entsprechenden Tags <ul> und <ol> ein.

<ul>
  • Ich bin
  • eine
  • unnummerierte
  • Liste
<ol>
  1. Ich bin
  2. eine
  3. nummerierte
  4. Liste

Listen (2)

Für längere Listen ergänzt man die Klasse kompakt im <ul> oder <ol>-Tag. Dann passt mehr auf eine Seite.

<ul class="kompakt">
  • Ich
  • bin
  • eine
  • kompakte
  • unnummerierte
  • Liste
<ol class="kompakt">
  1. Ich
  2. bin
  3. eine
  4. kompakte
  5. nummerierte
  6. Liste

3D-Effekt

Mit data-rotate-x und data-rotate-y legt man die Sicht auf die x- und y-Achse fest. Beim Wert 90 (90°) ist nichts zu sehen, da man die Folien dann sozusagen genau im Querschnitt sieht. Mit data-z legt man fest, um wie viel der Anzeigebereich verschoben werden soll. Zusammen mit einem hohen data-scale-Wert erzeugt man so einen 3D-Effekt des Textes zur gesamten Präsentation (siehe nächste Folie).

<section class="step hide" data-x="-3000" data-y="1000" data-z="2000" 
 data-rotate-x="30" data-rotate-y="-30" data-scale="6">

Und hier kommt

der 3D-Effekt

Text-Animationen

Soll sich der Text bewegen, ergänzt man in <section> class="animation". Durch die Klassen scaling, positioning und rotating kann man Text dann skalieren, positionieren und drehen. Zusammen mit data-rotate und data-scale erzeugt man schöne Effekte. Die nächste "Folie" demonstriert dies.

<section class="step animation" data-x="1500" data-y="500" 
  data-rotate="300" data-scale="0.5">
  <p><span class="scaling">Skalierung</span><br>
  <span class="positioning">Positionierung</span><br>
  <span class="rotating">Rotation</span></p>
</section>

Skalierung
Positionierung

Rotation

Kopf- und Fuß

Möchte man eine feste Kopf- und Fußzeile außerhalb der Präsentationsfläche einfügen (so wie in dieser Präsentation oben und unten links zu sehen) fügt man den Text in die ID-Bereiche kopf oder fuss ein, die sich im Quelltext ganz am Ende befinden.

<div id="kopf">Zur Übersicht</div>
<div id="fuss">Universitätsbibliothek Bielefeld</div>

Schlusswort

Alles am Design kann man über die CSS-Datei anpassen. Wer sich damit auskennt, kann sich dort austoben (zur Sicherheit sollte man aber das Original als Referenz behalten, falls etwas schief geht).

Wem eine "Standard"-Präsentation genügt, kann den HTML-Quelltext dieser Präsentation problemlos als Steinbruch verwenden. Diese Präsentation hat dafür alle notwendigen Kenntnisse vermittelt.

Websites / Literatur

Und nun heißt es: Loslegen und ausprobieren.

Viel Spaß dabei!

Verwenden Sie die Pfeiltasten zum Navigieren