HTML-Befehl zum automatischen Sortieren

[Player X]

Hi, ich habe mal eine Frage.

Und zwar sammle ich mit ein paar anderen zusammen lauter Haustiere von einem Spiel auf Steam, und wir tauschen uns immer untereinander aus, falls einer etwas doppelt hat, was dem anderen noch fehlt, und auch um zu wissen, was von einer Sorte schon verkauft werden kann, wenn schon genug davon vorhanden ist. Allerdings ist das Inventar auf Steam nur in der standartmäßigen Steam-Kategorie gut geordnet, aber wenn man die Kategorie eines Spiels auswählt, sind die ganzen Gegenstände nur nach dem Zeitpunkt geordnet, wann sie dazugekommen sind. Deshalb hatte ich vor einiger Zeit mal damit angefangen, alles in einer Textdatei zu notieren, um einen besseren Überblick zu haben.

Vorgestern hatte ich mal angefangen, das Ganze in eine HTML-Datei umzusetzen, um das Ganze etwas übersichtlicher zu gestalten, was auch wunderbar funktioniert hat. Allerdings stört mich dabei immer noch, wenn ich mir die Inventare auf Steam anschaue, dass das Suchen immer sehr zeitaufwendig ist, weil die Gegenstände nicht alphabetisch geordnet sind.

Gibt es für HTML vielleicht auch Befehle, mit denen die Gegenstände aus dem Inventar alphabetisch geordnet werden, damit mir das Suchen leichter fällt, oder auch sowas wie beim Programmieren, wenn beim Laden der eigenen Seite zuerst die Werte von der Steam-Seite abgerufen und in lauter Variablen gespeichert werden, um die richtigen Zahlen auf der eigenen HTML-Datei anzuzeigen? Im Internet hatte ich leider auch nichts passendes gefunden.

Ich bin für jede Hilfe sehr dankbar, weil ich irgendwie nicht mehr weiterkomme.

[Matthias Scharwies]

Servus!

Gibt es für HTML vielleicht auch Befehle, mit denen die Gegenstände aus dem Inventar alphabetisch geordnet werden, damit mir das Suchen leichter fällt, oder auch sowas wie beim Programmieren, wenn beim Laden der eigenen Seite zuerst die Werte von der Steam-Seite abgerufen und in lauter Variablen gespeichert werden, um die richtigen Zahlen auf der eigenen HTML-Datei anzuzeigen?

Im SELF-Wiki: Tabellen dynamisch sortieren

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Player X

Allerdings ist das [url=https://steamcommunity.com/id/discoplayerx/inventory/]Inventar auf Steam[/url] nur in der standartmäßigen Steam-Kategorie gut geordnet

Nö, hier im Forum gilt nicht BBCode, sondern Markdown. Ich korrigier das gleich mal.

Gibt es für HTML vielleicht auch Befehle, mit denen die Gegenstände aus dem Inventar alphabetisch geordnet werden

Nö. Das müsstest du mit JavaScript machen. Kannst du in dieser Umgebung eigenes JavaScript einbinden?

Ich hab mich letztens mal an die Implementierung einer sortierbaren Tabelle als Web component gemacht. Ist aber noch nicht fertig: die Möglichkeit der Abwärtssortierung gibt’s noch nicht (braucht man das?) und bei den 1.1-Dingern gibt’s bislang nur zwei Ebenen.

🖖 Live long and prosper

[Player X]

Servus!

Im SELF-Wiki: Tabellen dynamisch sortieren

Herzliche Grüße
Matthias Scharwies

Oh, diesen Abschnitt hatte ich irgendwie nicht gefunden. Dann schau ich mal, was man damit alles machen kann.
Vielen Dank erstmal! Möglicherweise könnte ich mich später nochmal melden.

Nö, hier im Forum gilt nicht BBCode, sondern Markdown. Ich korrigier das gleich mal.

Ach so, das wusste ich nicht. Dankeschön, dass du mich darauf hingewiesen hast.

Nö. Das müsstest du mit JavaScript machen. Kannst du in dieser Umgebung eigenes JavaScript einbinden?

Ich hab mich letztens mal an die Implementierung einer sortierbaren Tabelle als Web component gemacht. Ist aber noch nicht fertig: die Möglichkeit der Abwärtssortierung gibt’s noch nicht (braucht man das?) und bei den 1.1-Dingern gibt’s bislang nur zwei Ebenen.

🖖 Live long and prosper

Hm... Na gut, dann versuche ich mal, ob ich es hinbekomme, Java mit einzubinden, aber irgendwie sieht das ganz schön kompliziert aus. Darum hatte ich vorher versucht, ob ich erstmal nur mit HTML und CSS klarkomme.
Muss man dafür noch weitere Dateien erstellen, die dann mit eingebunden werden müssen? Allerdings sah das mit dem Einbinden auch ein bisschen kompliziert aus.

Es ist nur so, mit HTML hatte ich schon lange nichts mehr zu tun und musste mich erstmal wieder reinfinden.

[Auge]

Hallo

Hm... Na gut, dann versuche ich mal, ob ich es hinbekomme, Java mit einzubinden …

JavaScript, nicht Java. Das sind zwei verschiedene Programmiersprachen.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

JavaScript, nicht Java. Das sind zwei verschiedene Programmiersprachen.

Matthias fehlt. 🙁

🖖 Live long and prosper

[Auge]

Hallo

JavaScript, nicht Java. Das sind zwei verschiedene Programmiersprachen.

Matthias fehlt. 🙁

Ja, tuta. 😧

Tschö, Auge

[MudGuard]

Hi,

JavaScript, nicht Java. Das sind zwei verschiedene Programmiersprachen.

Matthias fehlt. 🙁

Ja, tuta. 😧

Ja, er fehlt.

Aber die Seite ist noch abrufbar ...

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Player X,

JavaScript kannst Du in einem <script>-Element direkt in die HTML-Datei einbinden.

Allerdings ist HTML nicht das ideale Werkzeug für eine solche Sammlung. Man kann es mit Hilfe von JS hinbekommen, aber es ist durchaus Arbeit.

Hast Du nicht Excel (oder Libreoffice Calc, oder Google Sheets)? Die bringen die Sortierung einer Tabelle ab Werk mit.

Rolf

[Player X]

Naja, da ich Microsoft Office sonst nie brauche, habe ich das leider nicht installiert, und normalerweise reicht auch immer der normalen Texteditor schon aus.

Eigentlich habe ich das meiste schon erledigt. Ich mache mir nur Sorgen, falls es mal vorkommen sollte, dass ich mich mal längere Zeit nicht darum kümmere und ein bisschen mehr Haustiere auf einmal dazugekommen sind, oder wenn ich mal irgendwie durcheinander kommen sollte, dann müsste ich wieder die kompletten Inventare davon überprüfen, um die Tabelle wieder auf den aktuellen Stand zu bringen, und weil das ganze Gesuche dabei immer so aufwendig ist, hatte ich erst die Idee gehabt, den Quellcode so zu schreiben, dass die HTML-Datei schon selber den Quellcode der Steam-Seite durchsucht.

Aber so, wie das Ganze aussieht, scheine ich mir dabei wohl doch ein bisschen zu viel vorgenommen zu haben. Auf der Inventarseite habe ich auch grade herausgefunden, dass 1. die Namen der Gegenstände nur für den Text daneben erscheinen (also wenn man das Bild anklickt). Ansonsten sind in der Tabelle höchstens die URLs der Bilder zum Erkennen da, und wenn mal 2 gleiche Haustiere nicht auf einem Haufen, sondern einzeln getrennt sind, haben die auch noch verschiedene IDs, die mir nichts bringen, und der Rest von allen Gegenständen ist gleich.
Und 2. werden im Quellcode nur die grade sichtbare Seite und die Seite danach geladen. Für die restlichen Seiten muss man zuerst weiterblättern, damit auch diese im Quellcode auftauchen (auch wenn die im Quellcode nicht mehr verschwinden). 😶

Naja, ich glaube, dass es wohl doch einfacher ist, die Inventare einfach nur abzutippen. Es muss ja auch nur im Notfall gemacht werden. 😉
Jedenfalls vielen Dank für eure Ratschläge! 😊

[Player X]

Hi, ich bin's nochmal. ✋
In der Zwischenzeit habe ich meine HTML-Datei immer weiter optimiert bzw. übersichtlicher gestaltet, und auch Fehler korrigiert, sodass ich damit jetzt eigentlich voll zufrieden bin. 😉

Die Idee, die entsprechenden Inventare auf Steam auszulesen, um die ganzen Werte in der Tabelle automatisch zu setzen, hatte ich zwar wieder verworfen, weil mir das dann doch zu kompliziert war, aber bei den Avatarbildern, die ich später noch hinzugefügt habe, hatte ich mir gedacht, dass ich dort vielleicht noch eine Funktion einbauen könnte, die auf den Profilseiten ausliest, wie die URLs der Bilder heißen.
Allerdings habe ich nirgendwo im Internet eine solche Funktion gefunden. Könnt ihr mir vielleicht nochmal helfen, was ich eingeben muss, damit beim Laden der HTML-Datei zuerst auf den Profilseiten nach den entsprechenden URLs der Profilbilder gesucht wird, um danach automatisch die richtigen Bilder zu laden (falls jemand sein Profilbild geändert hat)? 🤔

Und zwar fangen die URLs immer bei Avataren mit https://avatars.akamai.steamstatic.com/ oder https://avatars.fastly.steamstatic.com/ und bei Profilrahmen mit https://shared.akamai.steamstatic.com/community_assets/images/items/ oder https://shared.fastly.steamstatic.com/community_assets/images/items/ an.
Beispielsweise sind meine aktuellen URLs https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_medium.jpg, https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_full.jpg und https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png, und der entsprechende Teil im Quellcode, den ich auf meiner Profilseite rausgesucht habe, lautet wie folgt:

<div class="playerAvatar profile_header_size offline" data-miniprofile="387078408"> (mit JavaScript)
	<div class="playerAvatarAutoSizeInner">
		<div class="profile_avatar_frame">
			<picture>
				<source media="(prefers-reduced-motion: reduce)" srcset="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/c447714efa9703c4c0007a8316127c12ea0d32f4.png">
				<source srcset="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png">
				<img src="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png">
			</picture>
		</div>
		<picture>
			<source media="(prefers-reduced-motion: reduce)" srcset="https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_full.jpg">
			<img srcset="https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_full.jpg">
		</picture>
	</div>
</div>

bzw. beim Inventar:

<div class="playerAvatar medium online">
	<div class="profile_avatar_frame">
		<picture>
			<source media="(prefers-reduced-motion: reduce)" srcset="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/c447714efa9703c4c0007a8316127c12ea0d32f4.png">
			<source srcset="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png">
			<img src="https://shared.fastly.steamstatic.com/community_assets/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png">
		</picture>
	</div>
	<picture>
		<source media="(prefers-reduced-motion: reduce)" srcset="https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_medium.jpg">
		<img srcset="https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_medium.jpg">
	</picture>
</div>

bzw. in den Einstellungen:

<div class="_38rbzqVaeYFSog5HY2wIfA">
	<div class="_2Oe26ilBQ7C8rjQMvDsmgp">
	</div>
	<div class="_3ySvFQWUuRAY6Vx1d5Efkw">
		<img src="https://cdn.fastly.steamstatic.com/steamcommunity/public/images/items/2021850/74db9b3016da48265273308d8242062501589a75.png">
	</div>
	<img src="https://avatars.fastly.steamstatic.com/52d654b0bbe769284b3f0e32d86ce029cef7bdcf_full.jpg">
</div>

Leider weiß ich weder, wo im Quellcode die entsprechenden Elemente liegen bzw. wie diese heißen, noch ob es HTML, CSS oder JavaScript ist.

Weiß vielleicht jemand von euch, was für Befehle ich dafür benutzen könnte?
Vielen Dank! 🙂

[Rolf B]

Hallo Player X,

Ich nehme an, deine HTML Datei liegt direkt auf deinem Computer oder auf deinem privaten Webspace.

Damit hast du erstmal eine Mauer aus Browsersecurity vor dir, wenn du aus dieser Seite auf die Steamseite zugreifen willst. Steam muss dich ja überhaupt erstmal in deinem Userkontext ranlassen, womit die Pandoraschachtel der Third Party Cookies zu öffnen ist.

Als nächstes kommt, dass deine Problemstellung nicht mit HTML lösbar ist. Du musst etwas programmieren, d.h. Javascript. Oder, um das Problem der Cross-Origin Security im Browser zu umgehen, musst du diesen Teil der Seite anderswo generieren. Dann bist du bei PHP, wenn es auf deinem Webspace laufen soll, oder beliebigen anderen Sprachen, wenn du es auf deinem PC machst, und wieder bei der Frage, wie du Steam klarmachst, dass du Player X bist. Entweder musst du ihren Login per Programm bedienen, oder brauchst einen gültigen Session-Cookie. Oder es gibt ein API und du kannst dir in Steam einen API-Key generieren - keine Ahnung ob Steam das vorsieht; es ist jedenfalls nicht trivial und nichts, was man eben mal so aus dem Ärmel schüttelt. Oder dir in einem Forum vorkaut.

Du könntest im Browser die entsprechende Seite als HTML speichern und diese Seite dann durch ein Analyseprogramm laufen lassen. Das ist kein schöner Ablauf, aber zumindest beißt du dir dann nicht an Security-Themen die Zähne aus.

Du schriebst, du wolltest erstmal ohne Javascript auskommen und bist prompt in die Java vs Javascript Falle getappt. Kannst du programmieren? HTML/CSS gilt nicht.

Rolf

[Player X]

Hallo Rolf,
keine Sorge! Dass das mit der Abfrage der Bilddateien wahrscheinlich auch nichts wird, hatte ich mir auch schon fast gedacht. Ich dachte nur, dass es vielleicht mal einen Versuch wert wäre, wenn ich das mal probiere.
Aber ich kann mich auch weiterhin manuell darum kümmern, und ich denke mal, dass das hier auch schon ausreicht. 😉

Du schriebst, du wolltest erstmal ohne Javascript auskommen und bist prompt in die Java vs Javascript Falle getappt. Kannst du programmieren? HTML/CSS gilt nicht.

Naja, programmieren kann ich zwar, aber sonst hatte ich mich eher um kleine Programme mit Basic, C/C++ und Lua beschäftigt und hatte dank dieser Seite auch mal kleine Gameboy-Programme geschrieben, aber Webseiten hatte ich vorher noch nie selber erstellt.
Ich hatte zwar mal eine Ausbildung gehabt, bei der auch HTML und PHP erklärt wurde, aber das ist jetzt schon über 15 Jahre her. Darum musste ich mich auch bei HTML erstmal wieder reinfinden, aber lange hatte das zum Glück nicht gedauert, und weil CSS so ähnlich ist, war das auch kein Problem.

JavaScript dagegen ist für mich schwieriger, weil mir das wie ein Mix aus Web- und Programmprogrammierung vorkommt, denn da ist auch viel mit Gleichungen, Variablen und Bedingungen dabei. Normalerweise beschäftige ich mich auch viel mit Mathematik, aber in Verbindung mit Webprogrammierung, wo man so viele Variablennamen auf einmal im Kopf haben muss, komme ich irgendwie ein bisschen durcheinander. 😶
Und tut mir leid, dass ich am Anfang Java statt JavaScript gesagt habe. Ich hatte nur eine Zeit lang mal ganz oft das Wort Java gelesen und kannte bis vor Kurzem auch nicht CSS und JavaScript. 😔