• Entwickelt von Bartek Szopka
• Download der Basis-Dateien unter https://github.com/bartaz/impress.js/
• Die Erstellung erfolgt entweder direkt im Quelltext oder mit speziellen Editoren, wie z.B. Strut http://strut.io/

• HTML5-fähiger Browser notwendig
• Optimal ist eine aktuelle Version von Google Chrome, 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)

Der Quelltext sieht im Prinzip so aus:

<section class="step slide" data-x="-500" data-y="-1500">
  <header>
    <h2>Der Quelltext</h2>
  </header>
  <main>
    <p>Der Quelltext sieht im Prinzip so aus</p>
  </main>
  <footer>
    <p>Was das bedeutet, schauen wir uns nun im Detail an</p>
  </footer>
</section>

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

• Das <section>-Tag steht für einen beliebigen Bereich - eine Folie (HTML5 Element)
• 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")

<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

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">

<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

<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?)

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">

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">

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

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">

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>

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>

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.