Erstellen Sie Slider und Präsentationen mit Reveal.js

Wenn wir einen Slider oder eine Slide-Präsentation erstellen müssen, verwenden wir oft Software wie Powerpoint oder Prezi. Derzeit gibt es viele Frameworks, die es uns ermöglichen, diese Art von Präsentationen mit Html5-, Jquery- und CSS 3-Technologie zu erstellen.

Der Vorteil ist, dass es in jedem Browser, auf jedem Betriebssystem und sogar in Anwendungen für mobile Geräte angezeigt werden kann.

Reveal ist ein in Javascript entwickeltes Framework, das Funktionen zum Erstellen von Slidern und Präsentationen bereitstellt mit Funktionen zum Verwalten und Bearbeiten von Folien, PDF-Export, Möglichkeit zur Steuerung von Zeit, Navigation und Effekten jeder Folie.

Reveal ist eine kostenlose Bibliothek Und es hat den großen Vorteil, dass wir programmieren, mit Datenbanken verbinden oder in jede Anwendung einbinden können, die Html und Javascript unterstützt, was die gängigste Software nicht kann.

Die Entwicklung mit Reveal ist einfach und wir müssen nur Html und Js kennen. Um mit der Erstellung einer Präsentation zu beginnen, müssen wir die Reveal.js-Bibliothek von der offiziellen Website herunterladen.

Als nächstes entpacken wir die Zip-Dateien, um das Tutorial zu starten. Wir beginnen mit a Einfaches Beispiel zum Testen von Reveal.js.

Aus dem entpackten Verzeichnis kopieren wir die Ordner css, js, plugins und lib in unseren Ordner Example01. Diese Ordner enthalten alle notwendigen Bibliotheken, um unsere Präsentation zu erstellen.

Dann wir erstellen einen Slider mit zwei Bildern und Text, wo Sie automatisch oder per Tastatur navigieren können. Es wird wie folgt sein:

Der Quellcode lautet wie folgt:

 Reveal.js-Beispiel 01
Sportwagen


Besuche unsere Webseite
KONSULTIEREN

Das Reveal-Framework stellt uns mehrere Themes oder CSS-Designs zur Verfügung, die wir im CSS-Ordner finden und durch Ändern der Theme-Zeile können wir das Design ändern.

Wir wenden das Beige-Thema an und visualisieren mit dem Emulator für mobile Geräte in Firefox und wir können sehen, dass die Bibliothek für die Erstellung eines adaptiven Designs verantwortlich ist.

Die Bedienung des Sliders wird durch den Javascript-Code ermöglicht:

Wenn wir möchten, dass sich der Schieberegler automatisch bewegt, geben wir die Übergangszeit in Millisekunden mit dem Parameter autoSlide an, wenn er nicht verwendet wird, muss er mit den Pfeilen mit der Tastatur oder Maus verschoben werden.

Webentwickler verwenden diese Art von Bibliothek, um GIF.webp-, Flash- und andere Animationsformate beiseite zu legen. Diese Art von Framework ermöglicht sogar die Verwendung des Schiebereglers für SEO, da der Text indiziert werden kann. Wir können es auch sowohl online als auch offline verwenden, um unsere Präsentation von einem USB-Stick oder einem Handy mit jedem Browser anzuzeigen.

Das Reveal.js-Framework besteht aus einer einzelnen JavaScript-Datei und zwei Stylesheet-Dateien. Das erste Stylesheet, Reveal.css, definiert einige gängige Stile, während das zweite das Design eines Standard-Themes enthält, wir können auch ein drittes Stylesheet mit unseren eigenen Klassen hinzufügen.

Dieses Thema definiert das Aussehen der wichtigen Teile Ihrer Präsentationen, da es Text, Bilder und Links gibt.

Wir können zusammen mit Reveal.js andere Bibliotheken wie CSS 3D oder WebGL verwenden.

Das Rahmen aufdecken Ermöglicht Ihnen die Verwendung verschiedener Plugin- und Konfigurationsparameter, um die Benutzererfahrung zu verbessern. Die Konfigurationsparameter, die uns am meisten interessieren werden, sind:

KontrollenDieser Parameter zeigt an, dass die Richtungspfeile angezeigt werden, um durch unsere Folien zu navigieren. Wenn wir nichts angeben, wird es standardmäßig angezeigt. Es kann den Wert true oder false annehmen.

FortschrittZeigt im Verlauf der Präsentation einen Fortschrittsbalken an. Es kann den Wert true oder false annehmen.

FoliennummerZeigt die aktuelle Foliennummer an. Es kann den Wert true oder false annehmen.

KlaviaturAktivieren oder deaktivieren Sie die Tastaturinteraktion. Es kann den Wert true oder false annehmen.

berührenaktiviert oder deaktiviert die Verwendung von Touchscreens, falls vorhanden. Es kann den Wert true oder false annehmen.

Schleifezeigt an, dass es beim Erreichen des Endes zum Anfang zurückkehrt und ohne Unterbrechung fortfährt. Wenn wir false setzen, wird es am Ende stoppen.

Es kann den Wert true oder false annehmen.

AutoSlideist die Zeit in Millisekunden, um automatisch von einer Folie zur anderen zu wechseln.

ÜberleitungArt des Übergangs zwischen den Folien. Es kann auf Standard, Keine, Fade, Slide, Konvex, Konkav oder Zoom eingestellt werden.

Ein sehr interessantes Beispiel ist die offizielle Demo, die zum Üben verwendet und auch von der offiziellen Reveal.js-Seite heruntergeladen werden kann.

Wenn wir hinzufügen möchten Vertikaler Schieberegler Wir müssen verschachtelte Abschnitte wie folgt erstellen:

 Vertikalschlitten 1 Vertikaler Unterschlitten 1.1 Vertikaler Nebenschlitten 1.2 

Als nächstes werden wir ein Beispiel02 machen, in dem wir andere Merkmale einschließen, wie zum Beispiel die Fragmente, die Listen in HTML sind, die angezeigt werden, wenn eine Taste gedrückt wird, die Präsentation schreitet voran

Die Präsentation wird ein Hacking-Kurs mit Computerfolien sein.

Der Quellcode wird wie folgt aussehen:

 Ethischer Hacking-Kurs
Defensive Computersicherheit lernen

Erkennung und Kontrolle von Schwachstellen
Penetrationstests: Methoden.

Netzwerksicherheit Linux Server Administration Windows Server Administration / Abschnitt>

Die Fragmente zeigen an, dass jedes Element in der Liste im Verlauf der Präsentation angezeigt wird. Wenn die Fragmentklasse nicht angegeben ist, wird die Liste vollständig und nicht einzeln angezeigt.

Wir haben auch vertikale Abschnitte angegeben, bei denen es sich um Unterfolien handelt, um andere Folien innerhalb eines bestimmten Abschnitts anzuzeigen.

Das Framework Reveal.js Es ist eine der beliebtesten Optionen zum Erstellen von Präsentationen mit HTML, da es auf jedem Gerät verwendet werden kann und keine Installation von Design- oder Programmiersoftware erforderlich ist.

In diesem Artikel sehen wir uns einige der grundlegenden Funktionen an, aber es sind noch viele weitere verfügbar.

Google experimentiert mit der WebRtc-Technologie, einer Technologie, die wir im WebRTC-Tutorial Audio- und Videokommunikation über einen Browser und Reveal.js gesehen haben, damit Diabewegungen mit Handgesten über eine Webcam ausgeführt werden können. Kalibrieren der Webcam über WebRtc und mit einer einfachen Handbewegung in der Luft können wir das Dia wechseln.

Wir können das Google-Projekt sehen, das sich in der Betaphase Google Chrome mit Gestures + Reveal.JS befindet, wo Sie einige Demonstrationsvideos sehen können, die die Technologie testen.

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben