So erstellen Sie Impress.js-Präsentationen unter Linux

Es gibt viele verschiedene Möglichkeiten, Folien für eine Präsentation unter Linux zu erstellen. Sie können OpenOffice, LibreOffice oder sogar Microsoft Office (über Wine) verwenden. Ihre fertige Präsentation ist entweder eine .odp- (OpenDocument-Format) oder .ppt-Datei (Powerpoint-Format), die Sie über die oben genannten Suiten (oder eine Viewer-App) verwenden, um Ihre Präsentation zu halten. Ohne die richtige installierte Software kann die Präsentation nicht angezeigt werden. Wäre es nicht toll, wenn Sie eine Präsentation erstellen könnten, die in einem Webbrowser läuft, eine Präsentation, die mit HTML, Javascript und CSS erstellt wurde? Dank impress.js ist das möglich!

impress.js ist ein leistungsstarkes CSS- und Javascript-Präsentationsframework. Es bietet alle Bibliotheken und CSS-Dateien, die zum Erstellen komplexer und visuell ansprechender Präsentationen mit HTML erforderlich sind. Aber eine Warnung, bevor wir fortfahren: Bei der Verwendung von impress.js in seiner Rohform geht es nur darum, Dateien mit Texteditoren zu erstellen und das HTML manuell zu schreiben. Es gibt hier keine schicke GUI, kein WYSIWYG.

Notiz: Obwohl das hier gezeigte Tutorial auf einer Linux-Plattform durchgeführt wird, sind die Schritte unabhängig von der von Ihnen verwendeten Betriebssystemplattform dieselben. Impress.js ist ein webbasiertes Skript und plattformübergreifend kompatibel.

Laden Sie zunächst herunter impress.js von github. Am einfachsten geht das, indem Sie den folgenden Befehl von der Kommandozeile aus ausführen:

wget https://github.com/bartaz/impress.js/archive/master.zip
Und entpacken Sie es:
Im Ordner „impress.js-master“ gibt es zwei Unterordner – CSS und JS, die die CSS- bzw. Javascript-Dateien von impress.js enthalten. Sie müssen sich nicht wirklich in den Javascript-Ordner vertiefen, der CSS-Ordner enthält jedoch die Demo-CSS-Datei, die Sie möglicherweise für Ihre eigenen Präsentationen ändern möchten. Sie finden auch eine Beispielpräsentation von impress.js in der Datei index.html. Öffnen Sie mit Nautilus den Ordner „impress.js-master“ und doppelklicken Sie auf index.html. Dadurch wird Ihr Standard-Webbrowser (hoffentlich entweder Firefox oder Chrome) geöffnet und die Präsentation gestartet.

So erstellen Sie eine einfache Präsentation auf Grundlage der Beispiel-CSS-Datei („css/impress-demo.css“), die mit impress.js bereitgestellt wird. Erstellen Sie eine HTML-Datei mit einem Texteditor. Sie können einen Texteditor wie gEdit verwenden oder die Datei mit nano auf der Befehlszeile wie folgt erstellen:
Fügen Sie den folgenden Code in die Datei ein, speichern und beenden Sie die Datei (STRG-X).
    Alles über impress.js

Alles über impress.js

impress.js ist ein leistungsstarkes CSS- und Javascript-Präsentationsframework.

Alles über impress.js

Es bietet alle Bibliotheken und CSS-Dateien, die zum Erstellen komplexer und visuell ansprechender Präsentationen mit HTML erforderlich sind

Alles über impress.js

Weitere Informationen finden Sie unter http://bartaz.github.io/impress.js.
Alle HTML-Dateien sind in Abschnitte unterteilt, die mit einem öffnenden Tag beginnen (z. B.
) und schließen Sie mit demselben Tag, aber mit einem zusätzlichen Schrägstrich (z. B. ). Innerhalb des Abschnitts „“ definiert das Tag „“, welche CSS-Datei verwendet werden soll (z. B. css/impress-demo.css). Wenn Sie mit impress.js fortgeschrittener sind, müssen Sie Ihre eigene CSS-Datei erstellen.
Im
 Abschnitt gibt es einen Abschnitt mit der ID „impress“. Hier erwartet impress.js die Folien. Jede Folie wird als „Schritt“ bezeichnet und muss die Klasse „Schritt“ verwenden. Im obigen Beispiel gibt es drei Folien, jede davon ist mit einem mit der Klasse „Schrittfolie“ gekennzeichnet.
Jede Folie hat ein data-x- und data-y-Attribut, das die Position der Folie definiert. Der y-Wert bleibt für alle drei Folien gleich, aber der x-Wert ändert sich. Er beginnt bei -1000, geht dann zu 0 und schließlich zu 1000. Das Ergebnis ist, dass sich die Folien im Verlauf der Präsentation von links nach rechts bewegen. Durch Ändern der x- und y-Werte können Sie die Folien in jede beliebige Richtung verschieben.
Am Ende der HTML-Datei stehen zwei Zeilen, die das Skript impress.js laden und anschließend die Bibliothek impress.js initialisieren (zB impress().init).
Um die Datei zu testen, doppelklicken Sie in Nautilus auf demo1.html.
Übergänge in impress.js können auch Rotationen enthalten. Fügen Sie Ihrer Präsentation diese Folie hinzu:

Alles über impress.js

Drehung!
Das Attribut data-rotate weist impress.js an, den Ansichtsbereich während des Übergangs um 90 Grad zu drehen. Der Wert ist absolut, sodass eine weitere Folie mit dem Wert 90 nicht gedreht wird, wenn die vorherige Folie einen data-rotate-Wert von 90 hatte. Testen Sie die neue Präsentation in Ihrem Webbrowser.
Ein weiteres interessantes Attribut ist die Datenskalierung (also der Zoom). Damit können Sie Ihrer Präsentation einen 3D-Stil verleihen, indem Sie im Verlauf der Präsentation die Leinwand vergrößern und verkleinern.
Um den Zoomeffekt zu sehen, fügen Sie Ihrer Präsentation die folgende Folie hinzu:
  Zoom, außerdem sieht das nicht wie eine Folie aus
An dieser letzten Folie sind einige Dinge bemerkenswert. Erstens fehlt die Klasse „slide“. Das bedeutet, dass die Folie ohne den weißen Hintergrund präsentiert wird, wie in der Beispiel-CSS-Datei definiert. Zweitens sind die Werte von data-rotate und data-scale zu beachten. Das data-rotate-Attribut bringt die Leinwand wieder auf 0 Grad (von der 90-Grad-Drehung in der vorherigen Folie). Das data-scale-Attribut veranlasst impress.js, während des Übergangs zu zoomen. Um zu sehen, wie das aussieht, testen Sie die Präsentation in Ihrem Browser.
Nachdem Sie nun einige einfache Folien gemeistert haben, lesen Sie index.html und „css/impress-demo.css“ durch, um zu sehen, wie die Demo aufgebaut ist. Die Datei index.html enthält zahlreiche Kommentare, die Sie durch die verschiedenen Elemente und Klassen führen.
Wenn Sie Fragen zu den oben aufgeführten Beispielen haben, verwenden Sie bitte den Kommentarbereich weiter unten und wir werden sehen, ob wir helfen können.