Storyteller's Night

Wyqer · #1 (**permalink**) 13.03.2009, 15:08

Hallo XHTML Community,

da ich quasi vor 2 Wochen mit HTML und CSS angefangen habe, da ich eine Website bauen wollte für unsere Rollenspielgruppe, wäre ich über Feedback der Profis natürlich sehr dankbar.

Der Link ist in der Signatur

Ich habe zum Eigenstudium der Grundlagen SelfHTML genommen und seit Mitte letzter Woche lese ich das Buch "Webseiten programmieren und gestalten" von Mark Lubkowitz um mich auch in javascript, perl, php, mySQL etc. anzulesen. Darauf kann man dann ja sicher sehr gut mit weiterführenden Büchern zu den einzelnen Themen aufbauen.

Geschrieben ist die Seite in HTML 4.01 transitional mit dem Editor phase 5.6.
Grafiken mit Corel Draw X4 erstellt.
Die Farbgebung ist gewollt so "düster" gewählt, leider ein wenig auf Kosten der Lesbarkeit.

Bin über konstruktive Kritik sehr sehr dankbar, da ich mich natürlich weiter verbessern möchte und die Seite bald mit neuen Technologien etc. erneuern möchte.

Danke für eure Mithilfe.

Wyqer

David · #2 (**permalink**) 13.03.2009, 15:39

Ich nutze SelfHTML nur um mich über spezielle Themen zu informieren und nachzuschlagen. Daher weis ich nicht, wie dort grundlegend an das Thema Webdeisgn herangeführt wird.
Eins vornweg: Tabellenlayout ist aus vielerlei Hinsicht ungünstig und auch nicht mehr Zeitgemäß.

Die grundlegende Herangehensweise sollte so sein, dass du erst den Inhalt in HTML schreibst (unter Verwendung der vorgesehenen Elemente h,p,ul usw).
Dannach wird das Design der Seite mit CSS umgesetzt.

isellsoap · #3 (**permalink**) 13.03.2009, 18:41

Hallo Wyqer!

Wenn du HTML benutzt, anstatt

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

einfach nur

Code:

<!DOCTYPE html>

angeben. Ist kürzer, einprägsamer, moderner und übrigens HTML 5.

Code:

<meta name="keywords" content="P&amp;P, Rollenspiel, Fantasy, Elfen, Zwerge, Trolle, Mittelalter, RP, Charakter, Abenteuer, Storyteller's Night, W&uuml;rfel, W10, Improvisationstheater, Krieger, Nekromant, Schurke, Pirscher, Wogenwolf, Runenmeister, Schamane, Hexer, Magie, M&ouml;nch, Skalde, Druide, Seefahrer">

Kannst du löschen, denn wenn diese ganzen Wörter sowieso auf deiner Website auftauchen, finden Suchmaschinen sie auch so.

Code:

<meta name="author" content="Wyqer">
<meta name="editor" content="html-editor phase 5">

Kannst du löschen, weil das niemanden interessiert und nur unnötig zwei Zeilen Code produziert.

Code:

<meta name="robots" content="index">
<meta name="robots" content="follow">

Besser: <meta name="robots" content="index,follow">
Noch besser: Einfach löschen, denn das machen Suchmaschinen von vornherein so.

Nächster Tipp: Wenn keine tabellarischen Daten auf deiner Website vorhanden sind, haben Elemente wie <table>, <tr> und <td> auch nichts drin zu suchen. Seit 1996 kann/soll/muss man das Design einer Website mit CSS realisieren. D. h. konkret für deinen Fall Dinge wie

Code:

text="#000000" bgcolor="#111111" link="#222222" alink="#222222" vlink="#222222"

Code:

width="1200" background="img/logo3.jpg" align="center" style="height: 200px;"

Code:

<font size="+1">

Code:

 width="1200" background="img/fuss.jpg" align="center" style="height: 25px;"

unbedingt aus dem HTML-Code entfernen und das alles in eine CSS-Datei stecken. Nächster Tipp: Für Fließtext das p-Element verwenden. Bei deiner Einstiegsseite beispielsweise ist es vom Code her 100 mal sauberer wenn du das so ausdrückst:

Code:

<p>Es war kalt an jenem frühen Morgen im Julmond, mein Freund, als ich die Hügel von Chelmarch erreichte und im Licht der feurigen Dämmerung Trollbrycken erblickte.</p>
<p>Am Farin Fluss gelegen, der in den ersten Strahlen der Sonne glitzerte wie die Schuppen einer Forelle, sah ich die Wehrmauern der wohl berühmtesten Schänke des Landes, zu derer Rechten ein gutes Dutzend Häuser auszumachen waren. Ich war also angekommen.</p> 
<p>Die Brücke, die dem Handelsposten am Rand der Salzstrasse einst seinen Namen gegeben hatte, war von den Wassern des Farin zerstört und ich konnte erkennen, dass sich weiter nördlich eine Furt gebildet hatte. Ich schritt die sanften Hügel hinab und näherte mich dem Platz aus aufgeweichter Erde vor den Toren der Schänke.</p>
<p>Als ich den Morgengruß entbat, liessen mich zwei Wachmänner ein.</p>
<p>Noch ahnte ich nicht, dass das Unheil, welches mich alten Wanderer seit einiger Zeit zu verfolgen schien und aufgrund dessen ich diese Reise unternommen, längst den Weg nach Trollbrycken gefunden hatte.</p>

Also anstatt jeden (gedachten) Paragraphen mit einem <br> oder sogar zwei <br> zu trennen, einfach den Paragraphen auch als solchen bezeichnen und ein <p> hernehmen. Per CSS kannst du dann den Abstand zwischen zwei Paragraphen definieren. Mit

Code:

p { margin: 15px 0; }

erhält jedes p-Element oben und unten einen Abstand von 15 Pixel.

Nächster Tipp: Hinweise wie "Diese Website ist optimiert für Auflösungen von blablabla" entfernen. Es interessiert niemanden. Wenn man das Design einer Seite macht, dann sollte der minimalste Anspruch an sich selbst sein, dass diese Seite auch bei den meisten Bildschirmen korrekt angezeigt wird. Das findet man z. B. mit ausgiebigen Tests auf verschiedenen PC's mit verschiedenen Bildschirmen heraus.

Nächster (und letzter) Tipp: Besucher-Zähler entfernen. Was ist der Sinn solcher Zähler? Sollen Besucher auf deiner Website dahin starren und dann voll Bewunderung und mit aufgeklappten Mund dich beglückwünschen, dass der Zähler jetzt auf 100 gesprungen ist. Besucher-Zähler auf der Website sind komplett unnütz und erzeugen nur unnötigen Code.

Abschließend habe ich mal einen kleinen codemäßigen Vergleich deiner Startseite angestellt und zwar vor und nach Befolgung dieser Tipps:

Vorher: 75 Zeilen Code, Semantik gleich null
Nachher: 21 Zeilen Code, Semantik gleich 100%

Gut, oder?

Wyqer · #4 (**permalink**) 13.03.2009, 19:13

Super, danke für die hilfreiche Kritik.

Werde dann sehen, dass ich das sehr bald umsetze.

Der Hintergrund, dass ich Tabellen benutz habe ist halt, dass ich mich mit css erst jetzt richtig eingehend befasse und vorher eben nur reines html "gelernt" habe, wenn man das so nennen kann

.

Aber ich bin bereits dabei ein neues Layout für die Seite zu erstellen in der ich halt entsprechende Techniken wie ausgelagerte css styles, javascript, php und mysql umsetzen möchte.
Und gerade dabei helfen mir derartige Hinweise und Tipps weiter, hoffe dass noch welche folgen werden.

inta · #5 (**permalink**) 13.03.2009, 19:35

Es wurde ja schon sehr viel gesagt. Ich schließe mich dem an, du solltest dich vom Tabellendesign verabschieden und auf validen und semantischen HTML-Code setzen.

Deine Seite ist viel zu breit, ich kann sie nicht ohne horizontal scrollen zu müssen ansehen.

Zitat:

Zitat von ccisco

Wenn du HTML benutzt, anstatt

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

einfach nur

Code:

<!DOCTYPE html>

angeben. Ist kürzer, einprägsamer, moderner und übrigens HTML 5.

Den HTML 5 Doctype zu empfehlen halte ich für sehr fragwürdig. Erstens ist HTML 5 bisher immer noch ein Entwurf und nicht endgültig (auch wenn sich am Doctype höchst wahrscheinlich nichts mehr tun wird). Zweitens schreibt er kein HTML 5, warum sollte er dann den entsprechenden Doctype dafür nutzen? Das ergibt keinen Sinn.

Wyqer · #6 (**permalink**) 13.03.2009, 19:42

Achja, wie sieht es aus mit dem Bild "Folge dem Wanderer..." als Link zur eigentlichen Page?
Bilder als Link in Ordnung oder eher zu übersehbar?

isellsoap · #7 (**permalink**) 13.03.2009, 21:10

Zitat:

Zitat von inta

Den HTML 5 Doctype zu empfehlen halte ich für sehr fragwürdig. Erstens ist HTML 5 bisher immer noch ein Entwurf und nicht endgültig (auch wenn sich am Doctype höchst wahrscheinlich nichts mehr tun wird). Zweitens schreibt er kein HTML 5, warum sollte er dann den entsprechenden Doctype dafür nutzen? Das ergibt keinen Sinn.

Wegen dem Doctype zitiere ich mal Peter Kröner:

Zitat:

Da HTML 5 in weiten Teilen abwärtskompatibel ist, ist jedes valide (X)HTML-Dokument auch ein gültiges HTML 5-Dokument – man muss nur den Doctype austauschen und minimal aufräumen (z.B. alle acronym rauswerfen). Der neue Doctype hat auch keine negativen Folgen auf das Handling der Dokumente durch heutige Browser.

Dass er nicht HTML 5 schreibt ist richtig, aber außer, dass einige wenige überflüssige Elemente von HTML 4 wegfallen, bleibt ja alles gleich.

Eigentlich wäre es für Anfänger sowieso besser gleich HTML 5 zu erlernen. Beispielsweise sind so tolle Elemente wie font, frame und frameset dort nicht enthalten. Dann kommt man erst gar nicht in Versuchung schlechten HTML-Code zu produzieren.

inta · #8 (**permalink**) 13.03.2009, 21:29

Zitat:

Zitat von Wyqer

Achja, wie sieht es aus mit dem Bild "Folge dem Wanderer..." als Link zur eigentlichen Page?
Bilder als Link in Ordnung oder eher zu übersehbar?

Mich hat deine Einstiegsseite verwirrt. Wenn möglich würde ich sie an deiner Stelle komplett weglassen.

Zitat:

Zitat von ccisco

Wegen dem Doctype zitiere ich mal Peter Kröner:

Der Artikel ist mir bekannt.

Zitat:

Zitat von ccisco

Dass er nicht HTML 5 schreibt ist richtig, aber außer, dass einige wenige überflüssige Elemente von HTML 4 wegfallen, bleibt ja alles gleich.

Wenn er eines davon benutzt? Acronym ist dank des IE nicht so selten im Gebrauch.

Zitat:

Zitat von ccisco

Eigentlich wäre es für Anfänger sowieso besser gleich HTML 5 zu erlernen. Beispielsweise sind so tolle Elemente wie font, frame und frameset dort nicht enthalten. Dann kommt man erst gar nicht in Versuchung schlechten HTML-Code zu produzieren.

Wie ist schon sagte, HTML 5 ist nicht fertig - es sollte überhaupt noch nicht empfohlen werden, als aller letztes einem Anfänger. Wenn es jemandem um den Rauswurf dieser Elemente geht, dann kann er auch einen strict-Doctype verwenden. Welchen Sinn soll es denn machen über ein bestehendes Dokument nachträglich einen nicht unbedingt passenden Doctype zu setzen? Das ist keine gute Idee.

Wenn du weiter darüber diskutieren möchtest, dann schlage ich dafür ein neues Thema vor (das hat hier eigentlich nichts verloren). Ich sehe in HTML 5 nur einen schlechten Kompromiss, den Ansatz von XHTML 2 halte ich für deutlich besser, auch wenn selbst dieser noch nicht konsequent genug ist.

isellsoap · #9 (**permalink**) 13.03.2009, 23:33

Ok. Hier geht's weiter mit der Diskussion rund um HTML 5.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln