[Gelöst] "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

buhtz · Beitrag von **buhtz** » 22.03.2022 10:34:42

Mein Wissen dazu ist in den 90ern hängengeblieben. Aktuell kann ich gerade noch so HTML und CSS basteln, in dem ich mir die passenden Schnipsel aus dem Netz zusammenkopiere.

Nun versuche ich ein bisschen besser die Grundlagen zu verstehen.

Was kann HTML5 eigentlich? Kann ich mit HTML5 JavaScript ersetzen?

Vielleicht sehe ich da etwas falsch?
JavaScript ist ja häufig und zu Recht deaktiviert. Möchte das nicht nutzen. Ich möchte möglichst nah am Kern der Sache bleiben (HTML) ohne separate Elemente (wie JavaScript) hinzubasteln zu müssen. Also im Idealfall mit einem Browser ohne AddOns und mit maximalen Sicherheitseinstellungen (d.h. ohne JS etc); sozusagen ein Firefox im SafeMode oder eben ein Lynx.

Ein konkretes Beispiel:
Ich möchte einen Random-Link haben. In einem Ordner liegen ~100 HTML Dateien. In der index.html möchte ich einen Link haben, der zufällig eine der existierenden 100 Dateien auswählt. Jedes Mal, wenn ich die index.html lade/öffne muss der Link sich ändern. Und natürlich sind die Namen der ~100 Dateien nicht fix und müssen bei jedem Lauf neu bestimmt werden.

curt123 · Beitrag von **curt123** » 22.03.2022 16:05:00

Bei HTML5 sehe ich eher die Möglichkeit, Medien direkt per HTML abspielen zu können. Auf JavaScript ist man hinsichtlich der Usability durch die zunehmenden Fähigkeiten von CSS inzwischen etwas weniger angewiesen als früher. JavaScript ist ansonsten m.E. nicht häufig deaktiviert und ist häufig sogar die Grundlage für den ausgegeben HTML-Code.

Vielleicht kannst du die gewünschte Dynamik serverseitig realisieren. Mit CSS ginge vielleicht ein wenig über die Unterscheidung bereits besuchter Links, wäre aber wohl nicht empfehlenswert.

buhtz · Beitrag von **buhtz** » 22.03.2022 17:15:38

Einen Server gibt es nicht und soll es in der besagten Anwendung auch ganz ausdrücklich nicht geben; auch keinen lokalen. Es sind HTML Dateien für "local and server less use only".

Ich nehme mal mit, dass das mit HTLM5 nicht geht.

Für so einen Radom-Link könnte ich aber eigenes JS einbetten und müsste somit nix von Extern nachladen. Gibt es zu JS eine Alternative? Ich kann das nicht und fand die Syntax schon immer hässlich.

WebAssembly scheint mir jetzt aber auch nicht so mein Ding zu sein.

Und wie bekomme ich JS dazu von meiner Festplatte eine Dateiliste abzufragen? Naiv, wie ich bin, gehe ich davon aus, dass das aus Sicherheitsgründen nicht gehen sollte. Aber ick hör die Nachtigall schon trippeln...

Aber da fällt mir ein, dass ich dem JS auch die Dateinamensliste bzw. die Linkliste auch direkt in den Code einbetten könnte, da ich die HTML Dateien selbst generiere und dabei eben auch ihre Dateinamen kenne. Dann müsste man da gar nicht auf die Festplatte zugreifen. Oh Mann, jetzt muss ich auch noch JS lernen.

Vielleicht mache ich dazu dann mal einen neuen Thread mit einem Prototypen auf.

thoerb · Beitrag von **thoerb** » 22.03.2022 18:02:41

buhtz hat geschrieben:
22.03.2022 17:15:38
Aber da fällt mir ein, dass ich dem JS auch die Dateinamensliste bzw. die Linkliste auch direkt in den Code einbetten könnte, da ich die HTML Dateien selbst generiere und dabei eben auch ihre Dateinamen kenne. Dann müsste man da gar nicht auf die Festplatte zugreifen. Oh Mann, jetzt muss ich auch noch JS lernen. Vielleicht mache ich dazu dann mal einen neuen Thread mit einem Prototypen auf.

Alle Dateinamen in ein Array schreiben. Und dann brauchst du noch eine Funktion die dir aus dem Array einen zufälligen Link generiert. Das dürfte mit Vanilla-JavaScript eigentlich kein großes Problem sein.

thoerb · Beitrag von **thoerb** » 22.03.2022 18:36:01

So hier vielleicht:

Code: Alles auswählen

<!DOCTYPE html>

<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div>
            <a id="randomLink" href="#">Generierter Link</a>
        </div>
    <script>
        
        let files = ["file_a.html", "file_b.html", "file_c.html", "file_d.html"];
        
        function getRandomLink(max) {
            
            return files[Math.floor(Math.random() * max)];
        }
        
        window.onload = function(){
            
            document.getElementById("randomLink").href=getRandomLink(files.length);
        };
        
    </script>
    </body>
</html>

GregorS · Beitrag von **GregorS** » 23.03.2022 03:35:09

buhtz hat geschrieben:
22.03.2022 10:34:42
Ich möchte einen Random-Link haben. In einem Ordner liegen ~100 HTML Dateien. In der index.html möchte ich einen Link haben, der zufällig eine der existierenden 100 Dateien auswählt. Jedes Mal, wenn ich die index.html lade/öffne muss der Link sich ändern. Und natürlich sind die Namen der ~100 Dateien nicht fix und müssen bei jedem Lauf neu bestimmt werden.

Wie wäre es, wenn Du die index-Datei als eine sofortige Weiterleitung auf ein CGI-Script programmierst? Das CGI-Script kann dann ein frei programmierbares Shellscript sein.

Ich habe mir mal ein solches Skriptchen geschrieben, das bei jedem Aufruf eine andere Zeile einer Textdatei auswählt und diese zurückgibt. Zusammen mit einem anderen, von cron aufgerufenem Scriptchen lasse ich mir damit jede Minute eine neue E-Mail-Signatur erzeugen.

Mit HTML 5, Javascript und derlei überflüssigem Zeug müsstest Du Dich dann gar nicht beschäftigen.

Gruß

Gregor

buhtz · Beitrag von **buhtz** » 23.03.2022 09:23:17

thoerb hat geschrieben:
22.03.2022 18:36:01
So hier vielleicht:

Ich hab es noch nicht probiert, aber sieht für mich ideal aus.
Du kannst dir hier Reputation abholen: https://stackoverflow.com/q/37751759/4865723

Ich melde mich hier noch mal, wenn ich es implementiert habe.

GregorS hat geschrieben:
23.03.2022 03:35:09
Wie wäre es, wenn Du die index-Datei als eine sofortige Weiterleitung auf ein CGI-Script programmierst?

CGI läuft doch auf dem Server, oder? In dem Fall geht es nicht, weil kein Server existiert.

GregorS · Beitrag von **GregorS** » 24.03.2022 00:33:10

buhtz hat geschrieben:
23.03.2022 09:23:17
GregorS hat geschrieben:
23.03.2022 03:35:09
Wie wäre es, wenn Du die index-Datei als eine sofortige Weiterleitung auf ein CGI-Script programmierst?
CGI läuft doch auf dem Server, oder? In dem Fall geht es nicht, weil kein Server existiert.

Dann schreib' doch mal was zum Hintergrund/zur Umgebung, in der das stattfinden soll. Bei HTML und JavaScript fällt mir zuerst Apache u. dgl. ein.

Gruß

Gregor

curt123 · Beitrag von **curt123** » 24.03.2022 07:58:27

GregorS hat geschrieben:
24.03.2022 00:33:10
Bei HTML und JavaScript fällt mir zuerst Apache u. dgl. ein.

Eigentlich könnte man nur mit HTML (CSS) und JacaScript sehr leistungsfähige Anwendungen für den eigenen PC realisieren. Leider beschränken moderne Browser die Möglichkeit, ohne Netzverbindung Daten auf dem eigenen PC zu speichern.

buhtz · Beitrag von **buhtz** » 24.03.2022 12:35:57

GregorS hat geschrieben:
24.03.2022 00:33:10
Dann schreib' doch mal was zum Hintergrund/zur Umgebung, in der das stattfinden soll.

Das Dateisystem und ein Browser. serverless local files

Der User klickt im Dateimanager seiner Wahl auf die index.html oder eine der anderen html Dateien und flux geht die Datei per file:// im Browser auf. Fertig.

thoerb · Beitrag von **thoerb** » 24.03.2022 12:49:14

buhtz hat geschrieben:
24.03.2022 12:35:57
Das Dateisystem und ein Browser. serverless local files

Nur so eine Idee, wenn sich die HTML-Dateien im Verzeichnis regelmäßig ändern, könntest du dir deine index.html auch per Script (Shell, Python, etc) über einen Cron-Job generieren. Dann kannst du auch auf JavaScript verzichten.

curt123 · Beitrag von **curt123** » 24.03.2022 12:57:06

buhtz hat geschrieben:
24.03.2022 12:35:57
Der User klickt im Dateimanager seiner Wahl auf die index.html oder eine der anderen html Dateien und flux geht die Datei per file:// im Browser auf. Fertig.

Also im Prinzip die index.html:

Code: Alles auswählen

<html>
  <script>
    this.location.href='./next.html'
  </script>
</html>

Nachtrag:
das sollte dann natürlich mit der weiter oben ausgeführten Zufallsfunktion (Beitrag von thoerb) mit dem Array (statt hier next.html) nutzbar sein, nur dass bei location der Wechsel bzw. die Weiterleitung direkt erfolgt.

uname · Beitrag von **uname** » 24.03.2022 13:14:55

Leider habe ich die Anforderungen noch nicht verstanden.

Kann mann dann nicht gleich im Mozilla Firefox und Edge folgendes natürlich bezogen auf den Ordner nutzen.
Und dann klickt man einfach selbst irgendwo hin.

Code: Alles auswählen

file:///c:/

Bei Edge geht sogar zusätzlich:

Code: Alles auswählen

c:

thoerb · Beitrag von **thoerb** » 24.03.2022 13:20:12

uname hat geschrieben:
24.03.2022 13:14:55
Leider habe ich die Anforderungen noch nicht verstanden.

buhtz hat geschrieben:
22.03.2022 10:34:42
Ich möchte einen Random-Link haben. In einem Ordner liegen ~100 HTML Dateien. In der index.html möchte ich einen Link haben, der zufällig eine der existierenden 100 Dateien auswählt. Jedes Mal, wenn ich die index.html lade/öffne muss der Link sich ändern. Und natürlich sind die Namen der ~100 Dateien nicht fix und müssen bei jedem Lauf neu bestimmt werden.

Das Ganze lokal ohne Webserver, wenn ich das richtig verstanden habe.

Beitrag von **JTH** » 24.03.2022 13:39:47

buhtz hat geschrieben:
22.03.2022 10:34:42
Und natürlich sind die Namen der ~100 Dateien nicht fix und müssen bei jedem Lauf neu bestimmt werden.

Ich denke, das wird nicht möglich sein. Wenn sich nicht etwas grundlegend geändert hat, was ich dann verpasst hab, kannst du per JavaScript aus dem Browser heraus nicht beliebig Dateien/Order auf dem lokalen System des Benutzers durchgehen/auflisten/etc. (Und das ist aus Sicherheitsaspekten auch gut so.) Es bräuchte dafür mindestens eine Interaktion des Benutzers, z.B. mit einem <input>-Element mit type=file.

Die Variante von thoerb oben, mit einer vorgegebenen Liste aus der zufällig ausgewählt wird, würde funktionieren, weil keine lokalen Ordnerinhalte aufgelistet werden müssten, sondern du die möglichen Dateinamen schon vorab kennst.

buhtz · Beitrag von **buhtz** » 24.03.2022 14:03:32

uname hat geschrieben:
24.03.2022 13:14:55
Leider habe ich die Anforderungen noch nicht verstanden.

Tut mir leid, es war auch sehr vage am Anfang. Und den use-case habe ich ganz weggelassen, weil ich nicht so weit ausholen wollte. Es geht um hyperorg. Das ist ein Python-Script mit dem man Emacs Org und insbesondere Org roam v2 (mit sog. ID-Links) Dateien in HTML konvertieren kann.

"Random" wiederum ist im Kontext von Zettelkasten (wofür sich orgroam sehr gut eignet) ein häufiger Vorgang. Du wählst zufällig aus deinem Zettelkasten (ob der nun digital ist oder in Karteikartenschränken steckt) eine Karte/Notiz/Note/Zettel aus und schaust wohin dein Kopf und dein Kasten dich bringen.

Ein Zettelkasten ist kein privates Wiki oder eine Wissensablage, sondern eine Art Werkzeug zum Denken, mit dem du mit der selbst in den Dialog treten kannst. Eine Wiki-Artige Wissensablage lässt sich aber mit orgroam auch umsetzen und mit einem Zettelkasten, IMHO sogar sinnvoll, kombinieren.

JTH hat geschrieben:
24.03.2022 13:39:47
Die Variante von thoerb oben, mit einer vorgegebenen Liste aus der zufällig ausgewählt wird, würde funktionieren, weil keine lokalen Ordnerinhalte aufgelistet werden müssten, sondern du die möglichen Dateinamen schon vorab kennst.

Die Variante ist perfekt und werde ich wohl auch umsetzen. Da hyperorg ein gesamtes Verzeichnis an org-Dateien auf einmal konvertiert, kennt es alle Dateien und kann entsprechend die Liste im Java-Script Teil hart einkodieren.

debianforum.de

[Gelöst] "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

[Gelöst] "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co

Re: "Dynamische" Website Elemente mit HTML5 ohne JavaScript & Co