Du bist nicht angemeldet.

1

Dienstag, 10. Dezember 2002, 15:14

Meine Page - Planetdemon.de

So, dann werde ich euch meine Page mal zum Fraß/Kritisieren vorwerfen.

Ein paar kleinere Anmerkungen zu Beginn:

a) Der Domainname ist doof.
b) Probiert doch bitte die Skin-Funktion aus, beim Aufrufen der Seite wird ein zufälliges Design gewählt (/zufälliges Stylesheet geladen)
c) wusste ich vorhin auch noch. Mal schauen ob's mir wieder einfällt ;-)

MfG
marvin

Edit: Ich wusste doch dass ich etwas vergessen habe. Die URL lautet http://www.planetdemon.de

Edit²: Zu den einzelnen Skins/Themes/Designs wollte ich dann noch schnell was sagen:
Dark-Grey: Erstes und lange Zeit einzigstes Design, online seit Frühjahr 2001. Im Prinzip nur noch aus Nostalgie online, wenngleich es soo hässlich eigentlich auch nicht ist.
Light-Red: Zeitgleich mit der Themewechsel-Funktion eingebaut, April 2002
Light-Blue: Entstanden Ende Mai 2002
Solid-Blue: Entstanden Ende November 2002, eingebaut zeitgleich mit der Zufalls-Themewechsel-Funktion.
Funky-Green: Anfang Dezember 2002 eingebaut.
CSS ist schon was feines :)

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »marvin« (10. Dezember 2002, 15:35)


2

Dienstag, 10. Dezember 2002, 17:19

Ja ... sieht doch schonmal ganz gut aus ;)

Das Design - bzw. die Designs gefallen mir fast alle... die Seite ist gut aufgebaut. Erinnert an ein Portal-Design - ist dabei aber trotzdem gut ;). Der Vorteil davon ist, dass die Informationen schnell gesichtet werden können...

Tja ansonsten - eigentlich nich viel zu sagen...
Die Farbwahl ist in allen Schemes recht gut ... am besten gefällt mir ja noch das Light-Red Scheme ... grau und rot macht sich imo immer recht gut. Dazu kommt, dass es optisch sehr aufgeräumt wirkt - nicht grafisch überladen - aber auch nicht stinkenlangweilig. Also so in etwa würde ich mir eine gute grafisch schlichte Seite vorstellen ;)

Die Schriftart sollte evtl. doch etwas mehr als nur Verdana sein (also Font-Family: Verdana, Helvetica, Sans-Serif z.B.)... der Memo hatte da gleich gemeggert - unter Linux siehts dann doof aus.

Der Quellcode sieht ansonsten auch schon ziemlich sauber aus ... zwar kann man da noch optimieren an manchen Stellen - aber das ist eher von theoretischer, denn praktischer Relevanz ;)

Also insg. imho wirklich gelungen!
Signatur von »Snoop« The use of COBOL cripples the mind; its teaching should, therefore, be
regarded as a criminal offence.
-- Edsger W. Dijkstra, SIGPLAN Notices, Volume 17, Number 5 (11.05.1930 - 07.08.2002)

3

Dienstag, 10. Dezember 2002, 18:54

ich kann mich nur anschließen, gut gemacht!!!

P.S.: Hast ein guten Musikgeschmack! ;-)) *NIRVANA*

4

Dienstag, 10. Dezember 2002, 18:57

Dann danke erstmal für das Lob, Stylesheets wurden soeben geändert und die Seite dürfte inzwischen auch bei Memowe gut aussehen :)

5

Dienstag, 10. Dezember 2002, 21:03

mmh, ich finde der schwarze style ist zu dunkel, ich kann da jeedenfalls den text und die links nicht mehr lesen!
Signatur von »fraggle« #include <signature.h>

6

Dienstag, 10. Dezember 2002, 21:06

darf ich fragen wie man das mit den zufälligen Stylesheets macht?

7

Dienstag, 10. Dezember 2002, 21:55

Ich würde sagen er included einfach per Zufall,
indem er PHP benützt. ;)

Gaheris

8

Dienstag, 10. Dezember 2002, 22:38

Echt klasse Seite - die Skins sind zwar ein wenig überflüssig, aber irgendwie auch was besonderes.

... besonders ist übrigens auch, dass ich endlich wieder ins WSB komme, mir hat jetzt fast eine Woche ein kapottes Cookie die Anmeldung vereitelt.

9

Dienstag, 10. Dezember 2002, 23:20

Ja, mit PHP hab ich das gemacht. Die Variable $skin zufällig (aus einer Textdatei mit den Namen der Skins) definiert, und dann als stylesheet einfach styles_$skin.css festgelegt.

10

Mittwoch, 11. Dezember 2002, 10:40

RE: Meine Page - Planetdemon.de

Zitat

Original von marvin
So, dann werde ich euch meine Page mal zum Fraß/Kritisieren vorwerfen.
*lechz* ;)

Zitat

Der Domainname ist doof.
Dann kaufe eine Domain, die Dir und Deinen Besuchern gefällt.

Zitat

CSS ist schon was feines :)
Zustimmung.

Mal sehen, was mir auffällt:

Testplattform
Mozilla 1.2.1, etwa 1Mpx.
DSL
Linux (keine WinDOS Standardfonts!)
Seite wird im Quirks mode (Fehlerkorrektur) gerendert. Das liegt daran, dass Du keinen system identifier angegeben hast. Verwende statt

Quellcode

1
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
dieses:

Quellcode

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
um zumindest in Mozilla den standards compliance mode zu "triggern": Mozilla's DOCTYPE sniffing

  • Was dahinter steckt
    Der Quelltext der Seite ist relativ sauber und aufgeräumt. Du hast Präsentation weitgehend aus dem Markup ausgelagert und im Stylesheet vorgeschlagen. Das ist gut. Einiges anzumerken habe ich aber noch, wobei ich mich mal auf die Startseite beschränken will:

    Du hast für einige Tabellenzellen Klassen wie thead oder tbody angegeben, um diese im Stylesheet gesondert zu behandeln. Das kann man optimieren. Es gibt die HTML-Elemente THEAD, TBODY und TFOOT, mit denen man Tabellenzeilen gruppieren kann. Das hätte bei Dir den Vorteil, dass Du direkt mit dem Selektor

    Quellcode

    1
    
    thead td { ... }
    arbeiten kannst, statt über die Klasse zu selektieren. Das wäre sauberer.

    Ferner hast Du den Navigationslinks allen eine Klasse menulink zugeordnet. Auch das lässt sich effizienter machen. Verwende stattdessen class="menu" in der Vater-Tabellenzelle, dann kannst Du in CSS die Selektoren

    Quellcode

    1
    2
    3
    4
    
    .menu a:link { ... }
    .menu a:visited { ... }
    .menu a:hover { ... }
    .menu a:active { ... }
    verwenden. Dadurch wird dein HTML aufgeräumter und das Stylesheet logischer.

    Der Link

    Quellcode

    1
    
    <a class="menulink" href="#" onclick="window.open('tg/tailgun.htm','Tailgunner','width=700,height=500')">TG-Fungame</a>
    ist ohne JavaScript nicht erreichbar. Verwende stattdessen dieses:

    Quellcode

    1
    2
    
    <a [class entfällt, siehe oben] href="tg/tailgun.htm" target="_blank"
    onclick="window.open(this.href,'Tailgunner','width=700,height=500'); return false;">TG-Fungame</a>
    Dann hast Du einen einfachen Fallback-Mechanismus. Wenn JavaScript nicht aktiviert ist, wird der Link in einem neuen Fenster geöffnet und die Seite bleibt benutzbar. Ist JavaScript aktiviert, wird mit window.open() ein neues Fenster geöffnet, "return false;" verhindert, dass zusätzlich noch ein "_blank"-Fenster geöffnet wird.

    Die Überschriften der Tabellen in der Mitte solltest Du korrekt als h1 bzw. h2 auszeichnen. Ein weiterführender Vorschlag dazu steht weiter unten. Das ist einfach besserer Stil und da Du ansonsten keine großen Fehler gemacht hast, kann ich ja darauf eingehen. ;) Die Tabellen in der Mitte brauchst Du übrigens nicht in P einzufassen, ich weiß nicht, warum Du das tun solltest. Wenn Du Abstand brauchst, arbeite mit der CSS-Eigenschaft margin. Stattdessen solltest Du im Fließtext P statt BR für Abschnitte verwenden.

    Auch wenn das schließende Tag des P-Elements in HTML 4.01 als optional markiert wurde, solltest Du es trotzdem setzen. Das ist übersichtlicher, eindeutiger, besserer Stil und erleichtert den Umstieg zu XHTML.

    So, wie Du Tabellen einsetzt, sind sie teilweise unnötig. Ich wüsste zwar im Moment nicht, wie man das Gesamtlayout komplett ohne Layouttabellen, die ja schlechter Stil sind, kompatibel realisieren sollte, aber zumindest einiges ist redundant. Du verwendest ganz oft etwa diese Konstruktion:

    Quellcode

    1
    2
    3
    4
    
    <table>
    <tr><td>Titel</td></tr>
    <tr><td>Text</td></tr>
    </table>
    Dafür gibt es mit dem CSS-Selektor

    Quellcode

    1
    
    Element1 + Element2 { ... }
    (http://www.w3.org/TR/REC-CSS2/selector.html#q1eine mächtige Alternative, die aber leider noch nicht gut unterstützt wird. Bis dahin wäre eine solche Konstruktion wesentlich einfacher:

    Quellcode

    1
    2
    3
    4
    
    <div class="kasten">
    <h*>Titel</h*>
    <p>Text</p>
    </div>
    CSS dazu:

    Quellcode

    1
    2
    
    .kasten h1, .kasten h2, .kasten h3, .kasten h4 [...] { ... }
    .kasten p { ... }


    Dann hast Du da ja diesen hypschen Skin-(gibt es auch ein deutsches Wort, das passt? ;)) Wexler:

    Quellcode

    1
    2
    3
    4
    5
    6
    7
    8
    
    <form action="none" style="text-align: center;"><select name="newLoc" onchange="jumpPage(this.form.newLoc)">
    <option>Skin wählen</option>
    <option value="/index.php?skin=red&action=news">Light Red</option>
    <option value="/index.php?skin=blue&action=news">Light Blue</option>
    <option value="/index.php?skin=solidblue&action=news">Solid Blue</option>
    <option value="/index.php?skin=green&action=news">Funky Green</option>
    <option value="/index.php?skin=dark&action=news">Dark Grey</option>
    </select></form>
    Das ist sehr schlechter Stil und funktioniert nur mit JavaScript. Ich hätte eine Alternative, ist ungetestet, sollte aber funktionieren:

    Quellcode

    1
    2
    3
    4
    5
    6
    
    <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="get" [...]>
    <select name="skin" size="1">
      <option value="red">Light Red</option>
      [...]
    </select>
    </form>
    Wenn Du noch ein bisschen trickst, kannst Du dann den jeweiligen Skin ausgewählt haben.

    Die Seite validiert nur teilweise. Ich habe stichprobenartig auf den Unterseiten den demonstrativen Link zum Validator geprüft. Teilweise stimmen die Entities nicht, Alt-Texte fehlen oder anderes ist kaputt. Du möchtest das "valid HTML 4.01!"-Logo nur auf Seiten einbinden, die auch validieren, auch wenn das dynamisch unter jede Seite gepappt wird. Zumal der HTML 4.01 Transitional-Standard nicht wirklich streng ist, oder?

    Zumindest das Red-Stylesheet sieht auch gut aufgräumt aus. Die anderen habe ich mir nicht angeschaut. Es validiert auch. Gut.

  • Präsentation
    Die Optik der Seiten ist sehr aufgeräumt, bei jedem Skin und das trotz des (sich zum Glück nur auf die Startseite beschränkenden) Dreispaltenlayout. Einklich Gips da nicht viel zu sagen, ich tue es trotzdem ;)

    "Light Red": gefällt mir am besten. Sehr klar und gut lesbar.
    "Light Blue": auch sehr gut lesbar, aber das Bild oben ist IMHO zu groß und nimmt zu viel Platz ein.
    "Solid Blue": gefällt mir nicht so gut. IMHO sehr düster. Die Links sind fast nicht lesbar.
    "Funky Green": gefällt mir auch sehr gut, schön, dass es sich dem Brauserfenster anpasst. Auch der Hovereffekt bei der Navigation ist hypsch.
    "Dark Grey": gefällt mir garnicht. Zu düster, aber das ist garnicht das Problem. Sowohl Fließtext als auch Navigation sind bei mir nur sehr schlecht lesbar. Die Links werden beim Hovern noch schwerer lesbar.

    Generell solltest Du auch darauf achten, einen Link klar auszuzeichnen: er sollte immer etwas deutlicher sein als Fließtext und unterstrichen. Dagegen sollte normaler Text wie etwa in den News NIE unterstrichen sein.

Ansonsten: gut gemacht! :) Daher:

RfD: Vorschlag für eine Auszeichnung mit WS "gut"

Technische Anforderungen für WS "gut"
  • Individueller, gut strukturierter Inhalt - IMHO klar erfüllt
  • Validiertes HTML 4.01 Transitional (XHTML 1.0 und/oder Strict bevorzugt), validiertes CSS 2 - muss noch gemacht werden
  • Klare Trennung von Markup und Präsentation bevorzugt - erfüllt
  • Die Seite muss in den gängigen grafischen Browsern (Mozilla/Netscape, Opera und IE) ohne clientseitige Scripts/PlugIns (JavaScript, Flash, Java Applets, etc.) hervorragend benutzbar sein. Textbrowserfähigkeit, auch wegen Suchmaschinen, wird bevorzugt und mit dem Lynx Viewer überprüft.
In Mozilla ist die Seite gut benutzbar. Opera und IE (hier gehe ich auch mal von Kompatibilität aus) sind noch zu prüfen. Ohne JavaScript ist im Moment ein Teil der Seite nicht verfügbar. Auch der Skinwechsler funktioniert nicht. Letzteres ist nur ein Mangel, wenn einer der dunkeln Skins gewählt wurde, die nicht wirklich gut bis schlecht lesbare Schrift haben. Der Lynxemulator kommt mit der Seite gut klar. Noch zu ändern: einige alt-Texte fehlen!

Soweit von mir, alles gute und sagt mal was dazu. :)

mem
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »memowe« (27. Januar 2003, 23:32)


11

Donnerstag, 12. Dezember 2002, 11:55

RE: Meine Page - Planetdemon.de

gefällt mir, hatte das grau/rote design erwischt glaub ich - schöne graphik im Titel

diablo ist cool, auch wenn meine Zauberin grad am verrecken ist...

Y.

12

Sonntag, 15. Dezember 2002, 13:08

RE: Meine Page - Planetdemon.de

Zitat

Original von memowe
RfD: Vorschlag für eine Auszeichnung mit WS "gut"

Technische Anforderungen für WS "gut"
  • Individueller, gut strukturierter Inhalt - IMHO klar erfüllt
  • Validiertes HTML 4.01 Transitional (XHTML 1.0 und/oder Strict bevorzugt), validiertes CSS 2 - muss noch gemacht werden
  • Klare Trennung von Markup und Präsentation bevorzugt - erfüllt
  • Die Seite muss in den gängigen grafischen Browsern (Mozilla/Netscape, Opera und IE) ohne clientseitige Scripts/PlugIns (JavaScript, Flash, Java Applets, etc.) hervorragend benutzbar sein. Textbrowserfähigkeit, auch wegen Suchmaschinen, wird bevorzugt und mit dem Lynx Viewer überprüft.
In Mozilla ist die Seite gut benutzbar. Opera und IE (hier gehe ich auch mal von Kompatibilität aus) sind noch zu prüfen. Ohne JavaScript ist im Moment ein Teil der Seite nicht verfügbar. Auch der Skinwechsler funktioniert nicht. Letzteres ist nur ein Mangel, wenn einer der dunkeln Skins gewählt wurde, die nicht wirklich gut bis schlecht lesbare Schrift haben. Der Lynxemulator kommt mit der Seite gut klar. Noch zu ändern: einige alt-Texte fehlen!
Ich hätte dazu jetzt gerne mal eine Reaktion vom Autor und weitere Meinungen.

mem
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

13

Sonntag, 15. Dezember 2002, 14:19

Also meine Meinung ist, jawoll... wenn die besagten "Mängel" beseitigt sind, steht einer Auszeichnung nix mehr im Wege...

Im IE ist by the way alles bestens ;)
Signatur von »Snoop« The use of COBOL cripples the mind; its teaching should, therefore, be
regarded as a criminal offence.
-- Edsger W. Dijkstra, SIGPLAN Notices, Volume 17, Number 5 (11.05.1930 - 07.08.2002)

14

Sonntag, 22. Dezember 2002, 18:04

So, nun mal meine Reaktion dazu. Erstmal sorry dass sie so spät kommt, habe jetzt endlich Ferien und letzte Woche drei Arbeiten geschrieben.
Erstmal fühle ich mich geehrt, da ich ja auch der erste bin der für diesen Award vorgeschlagen wurde :-)
Ich werde mich in den nächsten Tagen dransetzen und die Mängel noch beseitigen. Vielen Dank nochmal für das Lob, zu dem dunklen Skin bleibt noch zu sagen, dass er (wie gesagt) nur aus Nostalgie noch drin ist, weil er der erste und lange Zeit einzige war, der diese Seite schmückte. Vielleicht sollte ich ihn einfach aus dem Zufallssystem rausnehmen :-).

Im Opera (leider nur Beta7) sieht so aus wie in den anderen Browsern, einziger unterschied ist bei dem grünen Skin ein freigelassener Rand zu den Bildschirmrändern.
Das Problem beim 6er ist, dass er die CSS-Eigenschaft display: block; nicht vernünftig interpretiert, und die Links über- und unterstrichen sind, obwohl als text-decoration eindeutig nur underline definiert ist. Das ist allerdings nur ein kleiner optischer Mangel und ändert nichts an der Funktionalität, und deswegen kann ich es ruhig so lassen.

Naja, mfg Marvin

15

Sonntag, 22. Dezember 2002, 21:23

Zitat

Original von marvin
So, nun mal meine Reaktion dazu.
Endlich, danke! ;)

Zitat

Erstmal fühle ich mich geehrt, da ich ja auch der erste bin der für diesen Award vorgeschlagen wurde :-)
Das kommt ganz automatisch, wenn man halbwegs gute Webseiten schreibt!

Zitat

Ich werde mich in den nächsten Tagen dransetzen und die Mängel noch beseitigen.
[x] Du meldest Dich dann wieder hier, damit wir mit dem offiziellen Part fortfahren können.

mem :)
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

16

Sonntag, 22. Dezember 2002, 23:21

spendierst du den Sekt? Ich bring auch Kuchen mit *g* :hupferl:
Signatur von »Snoop« The use of COBOL cripples the mind; its teaching should, therefore, be
regarded as a criminal offence.
-- Edsger W. Dijkstra, SIGPLAN Notices, Volume 17, Number 5 (11.05.1930 - 07.08.2002)

17

Sonntag, 22. Dezember 2002, 23:58

Gut, in den nächsten Tagen ist dann doch irgendwie heute abend geworden...

Ich habe versucht möglichst viele der Änderungen vorzunehmen, manche davon brachten allerdings Probleme mit sich.

  1. Die Doctype-Änderung: Bei verändertem Doctype traten verschiedene Probleme auf: Auf meinem lokalen Webserver hat Mozilla das jeweilige Stylesheet erst garnicht geladen, und Opera7 hat - sowohl offline als auch online - einfach zwischen den Tabellen die CSS Eigenschaft margin übersehen. Deshalb habe ich den alten vorerst gelassen.
  2. <thead><tbody><tfoot> : Versuche ich mich gerade noch dran.
  3. veräderte Struktur bei meinen Kasten-Tabellen: Dazu habe ich noch eine Frage. Wie kann ich es lösen, wenn ich innerhalb des <p> Elementes des Kastens Absätze machen möchte?
  4. der Skin-Wechsler : Dein Code hat so nicht funktioniert, habe ihn aus dem Sourcecode von Tutorials.de kopiert und meinen Bedürfnissen angepasst
    [/list=1]

18

Montag, 23. Dezember 2002, 10:25

Zitat

Freudenreiche Ergüsse von SnooP:
spendierst du den Sekt? Ich bring auch Kuchen mit *g* :hupferl:
Vielleicht gebe ich im Tschätt einen wirrtuellenwelchen aus. Aber dann Gips freilich meine letzte Pulle Pommery statt Sekt. ;)

Zitat

Original von marvin
veräderte Struktur bei meinen Kasten-Tabellen: Dazu habe ich noch eine Frage. Wie kann ich es lösen, wenn ich innerhalb des <p> Elementes des Kastens Absätze machen möchte?
Hm... Wenn Du das willst, vielleicht statt P ein DIV nehmen und darin dann den Text mit P gliedern. Alternativ wäre auch BR OK, aber ersteres ist freilich hypscher.

Zitat

der Skin-Wechsler : Dein Code hat so nicht funktioniert,
War auch ungetestet. Trotzdem solltest Du es vielleicht nach dem von mir beschriebenen Prinzip mit GET-Variablenübergabe probieren, das funktioniert nämlich auch ohne JavaScript.

Viel Erfolg beim Schreiben! :)
mem
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

19

Sonntag, 29. Dezember 2002, 16:17

Der Skinwechsler funktioniert nun auch ohne js, auch ohne "get".
Der letzte offene Punkt wäre dann noch die konvertierung der überflüssigen Tabellen mit hilfe von div&co, aber diesen punkt würde ich dann gern doch offen lassen, da die Seite auch mit den überflüssigen Tabellen 100%ig funktionsfähig bleibt/ist..

20

Montag, 30. Dezember 2002, 10:25

ja, also ich denke da haben wir den ersten Preisträger der Kategorie "gut".

Herr Westermeier, erheben sie Einspruch oder walten sie bitte ihres Amtes! *taatttaaaa*
Signatur von »Chris« Auch ein Bonsai träumt von Größe.