Habt ihr noch Vorschläge für diese Webseite?

3 Antworten

Alter Schwede... hast du das teil selbst geschrieben?!
Wieso? (Schulprojekt? Interesse? Learning?)

Objektiv:
..wie dem auch sei. Schau dir mal getbootstrap.com (grid layout und designvorlagen) und jQuery UI (diverse user interface komponenten) an. Mit ein paar Copy und Paste hast du ein ansehnlicheres Design, gleich große Eingabefelder / Buttons etc.

Subjektiv:
Da ist zuviel Gelaber.. du schmückst zuviel aus. Das ist zwar Deine persönliche Note, aber macht es schwierig dem eigentlich Ziel der Seite zu folgen... "spielen". Das Gelaber kannst du auf eine gesonderte Seite "Hilfe" oder sowas packen, dann kann es sich der User antun, wenn ihm danach ist, denn wie du selbst erwähnst: Wer auf diese Seite kommt, weiß schon wie das Spiel funktioniert...

Solltest du konkrete Fragen zu HTML, Javascript, CSS haben, kann ich dir helfen.
Und hör auf mit diesem hacking - macking - Mist. Bist du 12 ? Wenn ja, verzeihe ich dir. Niemand denkt, dass man mit html und JS gehackt werden kann, wenn er sich in diese Rubrik der Beiträge verirrt hat.
Wir sind Nerds unter uns

Woher ich das weiß: Berufserfahrung
Alter Schwede... hast du das teil selbst geschrieben?!

Ja, jede Zeile.

hör auf mit diesem hacking - macking - Mist. Bist du 12 ? Wenn ja, verzeihe ich dir. Niemand denkt, dass man mit html und JS gehackt werden kann, wenn er sich in diese Rubrik der Beiträge verirrt hat.
Wir sind Nerds unter uns

Nein, ich bin nicht 12.

Ich habe nie gesagt, dass man mit HTML und JS gehackt werden könnte. Aber wer auch immer hat es vorher scheinbar gedacht und die Frage gemeldet, dass sie gelöscht wurde, weil die GF Moderatoren es selbst nicht besser wissen.

Ich bin gerade noch dabei die Sachen von @regex9 umzusetzen, die Vertikale Navigation mit Icons, einheitliche Dialoge usw. Dannach lade ich es noch einmal hoch ... vielleich bekommst du dann auch nicht mehr so schnell Augenkrebs davon ^^

Subjektiv:
Da ist zuviel Gelaber.. [...]

Okay, dass wird ganz sicher auch noch kürzer gemacht xD
Ich denke ich mache es echt einfach so, wie du geschrieben hast, mit einem Hilfe-Teil, in dem man sich den Changelog und den anderen Quatsch durchlesen kann, falls man Lust dazu hat.

0

Ein erster Anfang wäre es, den Quellcode mit einem Validator zu prüfen sowie CSS und JavaScript in externe Dateien auszulagern.

Beim Drüberscrollen (mehr werde ich an dieser Stelle auch nicht tun) ist mir auch aufgefallen, dass du öfter JavaScript-Code direkt in die Attribute schreibst.

<button onclick="
  var tw = document.querySelector('.themeWindow');
  
  if (!tw.className.match(/show/))
    tw.className += 'show'"
>Farben ändern</button>

So etwas macht deinen Quellcode ziemlich unübersichtlich. Wie gesagt sollte eine strikte Trennung erfolgen.

Dem Button fehlt im Übrigen noch ein type-Attribut, welches ihn als einfachen Button kennzeichnet (nicht als submit-Button).

Der Quellcode funktioniert genau wie er soll. Ich habe auch für alles externe Dateien. Die hatte ich vorher in einer Zip-Datei hochgeladen, die Frage wurde (wahrscheinlich) aus diesem Grund aber wegen 'Hacking-Versuch' gelöscht. Jetzt habe ich es (leider) so unübersichtlich machen müssen, dass die Frage nicht in 5 Minuten wieder weg ist.

Die Inline-Events benutze ich nur für Testzwecke. Die werden alle noch ersetzt.

Das mit den Buttons habe ich echt vergessen. Das werde ich noch ändern.

Aber mit meiner Frage habe ich den Teil gemeint, den sich der Nutzer ansieht und weniger den Quellcode. Der ist sowiso nicht suchmaschinenoptimiert.

Falls du den Code als Dateien lieber hast und nicht glaubst, dass ich Hacking-Versuche mache oder was auch immer, kannst du dir auch das ZIP von https://1fichier.com/?s9cx4ubwnawvijfemm1u herunterladen oder mir schreiben, wo/wie ich sie sonst hochladen kann (7 Dateien, falls du schon einen PHP-Server hast).

0
@Win7User
Der Quellcode funktioniert genau wie er soll.

Das er nicht funktionieren würde, wurde nicht behauptet.

Aber mit meiner Frage habe ich den Teil gemeint, den sich der Nutzer ansieht (...)

Ich habe mir nun deine Seite kurz angeschaut.

  • An welche Zielgruppe richtet sich die Anwendung? Ich frage, weil du im Text über JavaScript und PHP schreibst. Damit kann nicht jeder etwas anfangen bzw. du könntest da an Informationen einsparen / abstrahieren.
  • Du solltest das Layout nochmal anders anordnen, sodass die Buttons einfacher erreichbar sind und somit nicht hoch- und runtergescrollt werden muss. Eine vertikale Navigation mit Icons (und vielleicht einem Ausklappmenü, wenn notwendig?) könnte da brauchbar sein.
  • Statt dem Doppelklick auf den Hintergrund zum Wechseln des Theme würde ich entweder einen Tastendruck (z.B. L - light on/off) nutzen oder ein Glühbirnen-Icon. Vor allem letzteres ist intuitiver, einer großen Beschreibung braucht es dann nicht mehr.
  • Für das Dark Theme würde ich auch das Sudoku-Feld mit einbeziehen. Es sollte zwar nicht auch schwarz werden, doch ein dunkler Grauton wäre passend. Der Farbauswahldialog wäre davon ebenfalls betroffen.
  • Der Dialog zum Setzen der Farben erfordert es, zu Scrollen, bevor man die Bestätigungsbuttons sieht.
  • Mache doch alle Dialoge einheitlich. Der Farbauswahldialog stellt einen anderen Look bereit, als es der Browser tut.
1
@Win7User

Mach die Icons ruhig viel kleiner (so passt alles in den Viewport) und setze sie einheitlich um (vgl. mit den Icons hier auf GF). Im Optimalfall findest du sogar eine passende Icon Font. Die Animation auf den Icons ist zudem eher unnötige Spielerei, über eine Änderung des Mauszeichners (pointer) wäre es schon getan. Das wirkt dann ruhiger und passt sich mehr dem Sudokufeld an.

Die eingesetzten Tooltips finde ich gut. In deinem Farbdialog müsstest du noch die alte Beschreibung (dunkles Theme) entfernen.

1

Kannst Du nicht einfach die Website irgendwo zugänglich machen?!

habe ich das nicht schon mit pastebin gemacht? Das wird wenigstens nicht als Hackerversuch gewertet!

geh auf https://www.onlinehtmleditor.net/ (oder irgendeinen anderen HTML-Editor) und füge den Quellcode ein oder speichere ihn in irgendeiner textdatei mit Endung .html ab.

0
@Win7User

Ich meine als aufrufbare Website. Wozu der Umweg? Einfach irgendwo bereitstellen und den Link posten.

0

Was möchtest Du wissen?