html-slides ist eine Vorlage zum Erstellen von Präsentationsfolien, die direkt in einem Webbrowser ausgeführt werden. Schauen Sie sich die Demo-Diashow an, um solche Folien in Aktion zu sehen.
Präsentationsfunktionen
Folienfunktionen
Um die Präsentation aus Ihren Folien zu erstellen, muss Node.js auf dem Computer installiert sein.
Die Präsentation kann mit allen gängigen Webbrowsern (Firefox, Chrome, Edge, Safari, Opera, ...) angezeigt werden und erfordert keine zusätzliche Software.
Laden Sie das HTML-Folien-Repository herunter oder klonen Sie es und beginnen Sie mit der Erstellung Ihrer Präsentation im template . Sie benötigen nichts außerhalb dieses Ordners und können ihn umbenennen oder verschieben.
Der template enthält die folgenden Dateien und Ordner:
slides enthält Ihre Folien und die zugehörigen Medienressourcen.index.build.html enthält die Liste der Folien.deploy fügt Ihre Folien in einer einzigen index.html Datei zusammen.index.html ist die generierte Präsentation.style enthält die CSS-Stildatei ( style.inc.css ) und Schriftarten. Hier können Sie die Standardschriftarten und -farben anpassen.skeleton enthält den HTML-, CSS- und JavaScript-Code, um Ihre Folien in eine Präsentation umzuwandeln. Sie müssen hier nichts ändern. Eine Folie ist normalerweise eine Datei mit einigen Zeilen HTML-Code oder eine SVG-Datei. Für Nur-Video- oder Nur-Bild-Folien stellt das Skelett vordefinierten HTML-Code bereit.
Die Datei index.build.html enthält den Titel und die Foliensequenz der Präsentation:
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Die erste und letzte Zeile importieren das Präsentationsgerüst und müssen unverändert bleiben. Jede Folie übernimmt die folgenden Parameter:
Die Dateierweiterung bestimmt den Folientyp:
.inc.html sind HTML-Folien (siehe unten)..inc.svg sind SVG-Folien (siehe unten)..mp4 , .webm oder .ogg sind reine Videofolien. Sie führen zu einem Videoplayer, der auf der Folie angezeigt wird. Am besten sehen sie mit dem „schwarzen“ Stil aus..png , .jpg oder .jpeg sind reine Bildfolien. Geeignete Stile sind „schwarz“ (um das Bild auf einem schwarzen Hintergrund zu platzieren) und „cover“ (um die gesamte Folie abzudecken).Die Folien sind für eine Größe von 1000 x 600 Pixel vorbereitet. Im Präsentationsmodus werden sie auf die Größe des Displays skaliert.
Eine einfache HTML-Folie ( slides/slide-name.inc.html ) mit Aufzählungspunkten sieht wie folgt aus:
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >Die Folie zeigt auf der rechten Seite ein Bild (img-Tag) (400 Pixel) und verwendet die restlichen 600 Pixel auf der linken Seite für den Folientitel (h1-Tag) und die Aufzählungspunkte (ul-Tag, ol-Tag, li-Tag).
Die Vorlage enthält Beispiele für die Positionierung von Text und Bildern sowie das Einfügen von Tabellen.
Das SVG-Format ( slides/slide-name.inc.svg ) eignet sich für Folien mit Vektorgrafiken, wie Diagrammen oder Schaltplänen. Solche Folien können mit Inkscape oder einer anderen Software gezeichnet werden, die SVG-Dateien speichern oder exportieren kann.
Das SVG-Dokument (Seite) muss 1000 x 600 Pixel groß sein ( width="1000" height="600" ). Der SVG-Code wird beim Importieren etwas bereinigt. Insbesondere werden Inkscape-spezifische Informationen und Standard-IDs (z. B. rect1098 ) entfernt.
Um die Präsentation ( index.html ) neu zu erstellen, öffnen Sie ein Terminalfenster (Befehlszeile) und führen Sie den Befehl aus
./deploy/run
Das Skript sucht weiterhin nach Änderungen und erstellt bei Bedarf index.html neu. Um es zu beenden, drücken Sie Ctrl-C im Terminalfenster.
Das Bereitstellungsskript überprüft Ihren HTML-Code grob. Es warnt insbesondere, wenn Tags nicht ordnungsgemäß geschlossen werden.
Um die Präsentation zu starten, drücken Sie F11 um den Vollbildmodus zu aktivieren, und p um in den Präsentationsmodus zu wechseln. Verwenden Sie die Pfeiltasten nach links/rechts (oder Page Up / Page Down ) auf der Tastatur, um zur vorherigen/nächsten Folie zu wechseln. Auf Mobilgeräten können Sie nach links/rechts wischen.
Die Menüschaltfläche in der oberen rechten Ecke (drei Streifen) öffnet den Folienindex. Durch Klicken auf eine Folie wechseln Sie zu dieser Folie.
Wenn Sie während der Präsentation ein anderes Fenster (oder einen Iframe innerhalb der Folien) aktivieren, wird die Menüschaltfläche rot, um anzuzeigen, dass die Pfeiltasten (um zur nächsten Folie zu wechseln) nicht funktionieren. Durch Klicken auf die rote Schaltfläche wird die Präsentation wieder fokussiert und die Pfeiltasten funktionieren.
Viele Browser ermöglichen das Ausdrucken der Folien. Jede Folie passt auf eine Seite im A4-Querformat.
Wenn Sie einen Projektor als externe Leinwand anschließen, können Sie die Präsentation auf beiden Bildschirmen anzeigen.
Öffnen Sie dazu dieselbe Präsentation in zwei separaten Browserfenstern (im selben Browser). Platzieren Sie ein Fenster auf dem Hauptbildschirm und das andere Fenster auf dem externen Bildschirm (im Vollbildmodus). In beiden Fenstern wird immer die gleiche Folie angezeigt.
Beachten Sie, dass interaktive Inhalte möglicherweise nicht immer synchronisiert werden.
Eine auf einem Laptop laufende Präsentation kann über ein Mobiltelefon ferngesteuert werden. Hierfür ist eine Internetverbindung erforderlich, da die Steuermeldungen über einen Server (https://viereck.ch/remote/) gesendet werden.
So richten Sie dies ein:
Videos werden mit dem Video -Tag eingefügt:
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Webbrowser unterstützen eine Vielzahl von Videoformaten. MP4 oder das MPEG-4/H.264-Videoformat wird von fast allen Webbrowsern unterstützt. Die gängigsten Browser spielen auch WebM-Dateien (Video/WebM) oder Ogg/Theora-Dateien (Video/Ogg) ab.
Ebenso werden Audiodateien mithilfe des Audio- Tags eingefügt.
Eine Folie mit einem Vollbildvideo kann einfach aus dem Folienindex erstellt werden:
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; Der Folienindex kann nach topic und subTopic strukturiert werden:
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Themen und Unterthemen erscheinen nur im Folienindex. Sie haben keinen Einfluss auf die Folien oder den Präsentationsablauf.
JavaScript-Dateien mit dem Namen slides/slide-name.inc.js werden automatisch mit der jeweiligen Folie eingefügt. Mit JavaScript können Sie erweiterte Folien mit Simulationen, Animationen, interaktiven Elementen usw. erstellen.
Ein einfaches Folienskript könnte wie folgt aussehen:
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; Der Code wird ausgeführt, wenn die Präsentation geladen wird. slide ist ein Verweis auf die entsprechende Folie, ein <div> -Element. Wenn die Folie auf dem Bildschirm erscheint, wird die Funktion onSlideAppears aufgerufen. Umgekehrt wird onSlideDisappears aufgerufen, wenn die Folie verschwindet. Es empfiehlt sich, Animationen nur dann auszuführen, wenn die Folie sichtbar ist. Beachten Sie, dass möglicherweise mehrere Folien gleichzeitig sichtbar sind.
Um Konflikte zwischen Variablen- und Funktionsnamen zu vermeiden, wird der JavaScript-Code der Folie in eine anonyme Funktion eingefügt. Eine generierte Folie hat folgenden Aufbau:
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Folien können weiterhin über das window miteinander kommunizieren:
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Element-IDs müssen auf der gesamten HTML-Seite eindeutig sein. Den Folien sollte daher ein eindeutiger Folienname vorangestellt werden ( fancySlide im obigen Beispiel).
Interaktive Folien können ihren Zustand per Fernsteuerung mit anderen Instanzen synchronisieren (siehe oben). Beachten Sie, dass dies nur für kleine Datenmengen gedacht ist, wie zum Beispiel ein paar Zahlen, eine Element-ID oder einen kurzen Text.
Das folgende Beispiel verwendet sendState und einen Status-Listener, um den Inhalt einer Texteingabe zu synchronisieren:
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
