Moin.


Mich reizt es, ein HTML-Dokument für eine Präsentation (Slides) zu verwenden.

Es gibt massenhaft Tools für diesen Zweck.

Gerne würde ich mal beginnen mit dem kleinstmöglichen JS für den Zweck.

Die einzige Funktion die es bereitstellen muss:

Zeige das nächste/vorherige Slide beim Druck der Taste Pfeil rechts/links.


Ganz ohne JS, nur mit CSS und HTML5 kann man ja vermutlich die Aufgabe

Die Rahmenbedingung:

Eine einzige HTML5-Datei, welches alle Slides enthält.

Ich kann selber nicht programmieren. Über eure Empfehlung für ein minimales JS freue ich mich daher : ) Danke.

__________________

Weniger JS geht nicht:

https://www.google.de/search?q=css+only+slider

Das wußte ich bisher gar nicht, dass man Slides auch ohne JS hinbekommen kann.

Habe mal was gebastelt:
https://codepen.io/fermion/pen/GRYXvvL

Aber ich neige dazu, die Slider-Funktionalität doch lieber einem JS überlassen zu wollen.

Damit man sich beim CSS allein auf die Gestaltung der Slides konzentrieren kann.

Und ob man mit "CSS only Slides" auch Header und Footer realisieren könnte, weiß ich nicht. Ich habe das im Codepen auskommentiert.

Was wären meine Wunscheigenschaften für HTML-Slides?

* echter Fullscreen in Firefox und Chrome mit einem einzigen Tastendruck, wie bei eingebetteten Videos. Sowohl FF als auch CH zeigen ja im "Fullscreen" noch Symbolleisten.

* Identische Footer und Header auf jedem Slide

* Schalter im Footer für die Anzeigemodi "Slides", "Screen", "Print"

Nice to Have:

Diese Techniken, mit denen ein einzelnes Slide um Inhaltsteile schrittweise erweitert wird, während der zuvor schon verhandene Inhalt des Slides gestalterisch zurückgenommen wird (ausgrauen). Das lenkt den Fokus auf die neu hinzugekommene Aussage.
Nennt man das im Jargon "vertikale" Erweiterung?

Welche HTML-Slides mögt ihr, was nutzt ihr?

__________________

Wenn ich F11 drücke, sehe ich keine Symbolleisten. Welches Betriebssystem nutzt du?

Zum Fullscreenmodus:
Ich verwende macOS.

Hast Du oder andere Mitlesende noch einen Rat für mich, wo man ein JS finden könnte, was die erwähnten Merkmale hinbekommt?


Hier nochmal ein Update der Kernmerkmale eines JS aus meiner Sicht:

1. Wechsel zw. Slides per Pfeiltaste rechts/links
2. im JS kann das Element Section (es passt semantisch) für den inhalt eines Slides gewählt werden
3. horizontaler Scrollbalken und/oder Slidenummernanzeige "n/m"
4. echter Fullscreenmodus in Firefox und Chrome (auch auf macOS), mit einem einzigen Tastendruck, analog zu eingebetteten Videos
5. wiederkehrende Header und Footer mit den gleichnamigen HTML Elementen
6. Schalter zum Wechseln zw. presentation, screen, print im Footer

__________________

https://revealjs.com das kann eigentlich alles. Klicke auf "Demo" und dann kannst du entweder scrollen um die restliche Seite zu lesen oder die Präsentation abspielen. Das unterstützt sogar "unterpunkte", also Slides wo du wie gewohnt weiter und auch nach unten ins Detail gehen kannst. Muss man natürlich nicht verwenden.

HTML musst du natürlich selber schreiben. Deinen Header + Footer kannst du dann natürlich mit einem HTML build tool erstellen, das ist nicht Aufgabe eines Präsentationstools.

Mit F11 hast du eine Taste um zwischen Fullscreen und nicht Fullscreen zu wechseln.
Du kannst natürlich auch in deine HTML Files deine benötigten buttons für die Präsentationsmodi einbauen, es ist auch nicht Aufgabe des Präsentationstools so etwas zur Verfügung zu stellen. Diese buttons sind 2-3 Zeilen JS, die kann man ohne Aufwand selber hinzufügen sofern benötigt.