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 wird entweder als ODP-Datei (OpenDocument-Format) oder PPT-Datei (Powerpoint-Format) angezeigt, die Sie über die oben genannten Suites (oder eine Viewer-App) für Ihre Präsentation verwenden. 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 ausgeführt wird, einer Präsentation, die mit HTML, Javascript und CSS erstellt wurde? Dank impress.js kannst du!

impress.js ist ein leistungsfähiges CSS- und JavaScript-Präsentationsframework. Es enthält alle Bibliotheken und CSS-Dateien, die für die Erstellung komplexer und visuell inspirierender Präsentationen mithilfe von HTML erforderlich sind. Aber bevor wir fortfahren, warnen wir mit impress.js in seiner rohen Form über das Erstellen von Dateien mit Texteditoren und das manuelle Schreiben von HTML. Es gibt keine schicke GUI hier, kein WYSIWYG.

Hinweis : Während das hier gezeigte Tutorial auf einer Linux-Plattform ausgeführt wird, sind die Schritte unabhängig von der verwendeten Betriebssystemplattform gleich. Impress.js ist ein webbasiertes Skript und ist plattformübergreifend kompatibel.

Laden Sie impressum.js von github herunter. Die einfachste Möglichkeit besteht darin, den folgenden Befehl über die Befehlszeile auszuführen:

 wget https://github.com/bartaz/impress.js/archive/master.zip

Und entpacken Sie es:

 entpacken Sie master.zip

Im Ordner "impress.js-master" befinden sich zwei Unterordner - CSS und JS, die die CSS-Dateien impress.js bzw. die JavaScript-Dateien enthalten. Sie müssen sich wirklich nicht in den Javascript-Ordner vertiefen, der CSS-Ordner enthält jedoch die Demo-CSS-Datei, die Sie vielleicht für Ihre eigenen Präsentationen modifizieren möchten. In der Datei index.html finden Sie auch ein Beispiel für die impress.js-Präsentation. Öffnen Sie mit Nautilus den Ordner "impress.js-master" und doppelklicken Sie auf index.html. Dies öffnet Ihren Standard-Webbrowser (hoffentlich entweder Firefox oder Chrome) und startet die Präsentation.

So erstellen Sie eine einfache Präsentation basierend auf der Beispiel-CSS-Datei ("css / impress-demo.css"), die mit impress.js geliefert wird. Erstellen Sie eine HTML-Datei mit einem Texteditor. Vielleicht möchten Sie einen Texteditor wie gEdit verwenden oder Sie können ihn mit nano in der Befehlszeile wie folgt erstellen:

 nano demo1.html

Fügen Sie den folgenden Code in die Datei ein, und speichern Sie dann und beenden Sie (STRG-X).

 Alles über impress.js Alles über impress.js impress.js ist ein leistungsfähiges CSS- und JavaScript-Präsentationsframework. Alles über impression.js Es stellt alle Bibliotheken und CSS-Dateien zur Verfügung, die benötigt werden, um komplexe und visuell inspirierende Präsentationen mit HTML zu erstellen. Alles über impression.js Erfahren Sie mehr unter http://bartaz.github.io/impress.js impress (). Init ();

Alle HTML-Dateien sind in Abschnitte unterteilt, die mit einem öffnenden Tag (z. B.) beginnen und mit demselben Tag, aber mit einem zusätzlichen Schrägstrich (z. B.) schließen. Im Abschnitt "" definiert das Tag "", welche CSS-Datei verwendet werden soll (zB css / impress-demo.css). Wenn Sie mit impress.js weiter fortgeschritten sind, müssen Sie Ihre eigene CSS-Datei erstellen.

In der Sektion gibt es einen Abschnitt mit der ID "impress". Hier erwartet impress.js die Slides. Jede Folie wird als "Schritt" bezeichnet und muss die Klasse "Schritt" verwenden. Im obigen Beispiel gibt es drei Folien, die jeweils mit der Klasse "Schrittfolie" gekennzeichnet sind.

Jede Folie hat ein Data-X- und ein Data-Y-Attribut, das die Folienposition definiert. Der y-Wert bleibt für die drei Folien gleich, aber der x-Wert ändert sich. Es beginnt mit -1000 und bewegt sich dann zu 0 und schließlich zu 1000. Das Ergebnis ist, dass die Folien während der Präsentation von links nach rechts verschoben werden. Durch Ändern der x- und y-Werte können Sie die Folien in eine beliebige Richtung verschieben.

Am Ende der HTML-Datei befinden sich zwei Zeilen, die das Skript impress.js laden und dann die Bibliothek impress.js initialisieren (zB impress (). Init).

Um die Datei zu testen, doppelklicken Sie auf demo1.html in Nautilus.

impress.js-Übergänge können auch eine Drehung beinhalten. Fügen Sie diese Folie zu Ihrer Präsentation hinzu:

 Alles über impression.js Rotation!

Das Attribut "data-rotate" teilt impress.js mit, dass das Ansichtsfenster während des Übergangs um 90 Grad gedreht werden soll. Der Wert ist absolut, daher wird eine andere Folie mit dem Wert 90 nicht gedreht, wenn die vorherige Folie eine Datenrotation von 90 hatte. Testen Sie die neue Präsentation in Ihrem Webbrowser.

Ein weiteres interessantes Attribut ist die Datenskala (z. B. Zoom). Dies kann Ihrer Präsentation einen 3D-Stil verleihen, indem Sie im Verlauf der Präsentation in die Leinwand hinein- und herauszoomen.

Fügen Sie die folgende Folie zu Ihrer Präsentation hinzu, um den Zoom-Effekt anzuzeigen:

 Zoom, und das sieht nicht wie eine Folie aus

Es gibt ein paar Dinge, die es wert sind, diese letzte Folie zu erwähnen. Zuerst wird die Klasse "Folie" weggelassen. Dies bedeutet, dass die Folie ohne den weißen Hintergrund dargestellt wird, wie in der Beispiel-CSS-Datei definiert. Zweitens, notieren Sie sich die Werte von Daten - rotieren und Datenskala. Mit dem Attribut "data-rotate" wird die Zeichenfläche auf 0 Grad zurückgesetzt (aus der Drehung um 90 Grad in der vorherigen Folie). Das Datenskalierungsattribut bewirkt, dass impress.js während des Übergangs einen Zoom durchführt. Um zu sehen, wie es aussieht, testen Sie die Präsentation in Ihrem Browser.

Nachdem Sie nun ein paar einfache Folien gemeistert haben, lesen Sie in index.html und "css / impress-demo.css" nach, um zu sehen, wie die Demo aufgebaut ist. Die Datei index.html enthält umfangreiche Kommentare, die Sie durch die verschiedenen Elemente und Klassen führen.

Wenn Sie Fragen zu den oben genannten Beispielen haben, verwenden Sie bitte den unten stehenden Kommentarbereich und wir werden sehen, ob wir Ihnen helfen können.