zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Präsentation mit HTML (Slides): Minimales JS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.05.2023, 10:43
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard Präsentation mit HTML (Slides): Minimales JS

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.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.05.2023, 11:20
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Weniger JS geht nicht:

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

Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.05.2023, 17:28
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

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?
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 17.05.2023, 10:55
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
...

* 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.

...
Wenn ich F11 drücke, sehe ich keine Symbolleisten. Welches Betriebssystem nutzt du?
Mit Zitat antworten
  #5 (permalink)  
Alt 17.05.2023, 12:36
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

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
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2023, 09:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
# in Dateinamen in HTML Link (Excel) einbetten thml.newa (X)HTML 3 30.04.2013 18:16
html 4.01 >> XHTML tupamaro (X)HTML 9 30.09.2012 20:32
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 19.09.2012 00:16
Web Applications 1.0 / HTML 5.0 verhindern! X-User (X)HTML 54 01.02.2008 20:59
[XHTML] HTML Kompatibilitätsrichtlinen 2.0a1 gato (X)HTML 9 18.11.2007 13:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:45 Uhr.