Bitte alles bewerten - Meine erste Homepage (editor)

[Die Zahl]

Hallo liebe Forumgemeinde,

nach 5 Jahren habe ich mich dazu entschlossen, eine eigene, private Homepage zu erstellen.

Das ganze CMS ist komplett selber geschrieben.
Das "Logo" habe ich nach 3 Stunden im GIMP auch fertig bekommen ;).

Bitte bewertet jede Kriterien(Design, Code, Benutzbarkeit z.b.).

Eins vorweck: Ich weis, das es diese Art im Web schon im Überfluss gibt.

Die Seite lautet: http://studio-y.de/

Es ist ein News/Blog/Script/Download CMS in einem.
Da ich mich sehr viel mit PHP&CO beschäfftige und das "bloggen" heutzutage ja "inn" ist, habe ich dieses kombiniert.
So kann ich fröhlich rumbloggen und nebenbei auch Scripte etc.. veröffenlichen.

Das Hauptaugenmerk ist das Zusammenspiel mit dem mod_rewrite. Durch eine ausgeklügelte Funktion kann man, theoritisch, auf Knopfdruck mod_rewrite deaktivieren und das CMS würde weiterhin voll funktionsfähig bleiben.

In Zukunft werde ich in meinem Blog einige Scripte und Downloads posten. U.a. das dort verwendete CMS veröffenlichen.

Freue mich auf jegliche Art von Kritik und Lob.

Mfg,
Die Zahl

 

[Efchen]

Moin,

also im HTML-Code ist noch einiges im Argen:

1. Du mischst Inhalt und Layout. Versuche, das strikt zu trennen. Keine style-Attribute mehr.
Außerdem auch keine id/Klassennamen wie "right". Damit neutralisierst Du einen großen Vorteil von CSS: Schnelles Redesign. Willst Du das Element mal von rechts nach links setzen, geht das in CSS ganz einfach. Aber dann heißen Deine Klassen trotzdem noch "right", obwohl das Element links liegt. Also hast Du entweder sinnfreien Code oder großen Änderungsaufwand.
Auch id/Klassennamen kann man semantisch vergeben, wie einfach alles im HTML-Code. Vergib die Namen, indem Du die Bedeutung des Elements bezeichnest.

2. Mir gefällt das nicht, dass das Menü in mehrere Menüs aufgeteilt ist und dazwischen Textabsätze liegen sollen. Mal davon abgesehen, dass das eigentlich keine Textabsätze sind, sondern ja offensichtlich Überschriften, ist es doch eigentlich ein Menü - aber eine schnelle Lösung hab ich jetzt nicht. Aber Du solltest in jedem Fall aus den Textabsätzen Überschriften machen.

3. Du wendest <label> falsch an. Zum einen steht <input> nicht innerhalb von <label>, in <label> steht nur der Labentext. Zum anderen hast Du den eigentlichen Grund, warum man <label> benutzt, nicht umgesetzt: Das for-Attribut! Darin verweist Du über eine ID auf das Eingabefeld, zu dem das Label gehört. Klickt man dann auf das Label, wird der Cursor ins Eingabefeld gesetzt. Das erleichtert Formulare ungemein für Leute, die nicht so treffsicher sind.
Also musst Du bei der Suche dem <input> noch eine ID zuweisen und diese dann als Wert für das for-Attribut übernehmen.
z.B.:

<label for="suche">Suche:</label> <input id="suche" name="suche" type="text" size="6" />

4. Dein <p class="newseintrag"> ist nicht richtig. Das ist kein Textabsatz, das ist eine Gruppe von Textabsätzen. Das, was Du als <p> ausgezeichnet hast, ist eigentlich ein <div> (Ja, hier ist das richtig!) und Deine Textabsätze darin sind als <p> auszuzeichnen. Dabei fliegen dann alle <br> raus, die braucht man für gewöhnlich nicht.

5. Du verwendest "px" als Einheit für die Schriftgröße. Der IE6 hat einen Bug - solche Schrift kann man dort nicht skalieren. Das ist also nicht barrierefrei. Verwende lieber "em" oder "%".

6. Seitennamen wie "Seitegehtonline!.html" würde ich gefühlsmäßig vermeiden.

7. Deine Adresse im Impressum zeichnest Du fälschlicherweise als Programmcode aus. Für Adressen gibt es <address>. Hier ist übrigens die Nutzung des <br> angebracht (eine von sehr wenigen Stellen).

8. div#container-footer ist überflüssig, da er nur ein Element enthält. <div> gruppiert aber mehrere Elemente.

9. Copyright gibt es in Deutschland nicht.

10. "HTML-Scripte" missfällt mir. Scriptsprachen sind eine Teilmenge von Programmiersprachen. Auf HTML trifft das nicht zu. Das vermittelt den Eindruck, dass man mit HTML programmieren könne. Das selbe für CSS. "CSS/HTML Code" würde wohl besser passen.

11. "div#title img" hat eine seltsame Alternativbeschreibung. Damit kann jemand, der keine Images angezeigt bekommt, nichts anfangen. Schalte Deine Images ab und betrachte die Seite. Schreibe einen Text rein, der Dich nicht verwirren würde. Prinzipiell enthält das Image ja Text, den man dann normalerweise auch als alt-Text angibt. Da Du den Namen Deiner Site aber schon in der Überschrift hast, bin ich versucht, zu empfehlen, das Bild als Hintergrundbild einzubauen. In dem Falle würde das <img> wegfallen und dann das <div> außen rum auch.
Alternativ könnte ich mir vorstellen, dass Du den Text im <h1> weglässt, stattdessen das <img> in <h1> integrierst (und damit fällt auch das <div> weg) und dann "studio-y.de" als alt-Text reinschreibst.

So, das sollte erstmal reichen.

Rein optisch spricht mich das Design nicht an, es wirkt sehr unsauber und durch die vielen Link etwas überladen. Und die Farben sind kalt. Im Winter nichts für mich ;-)

Liebe Grüße,
-Efchen

 

[Die Zahl]

Hallo Efchen!

Danke dass du dir die Zeit genommen hast.

Ich acker mal deine Punkte ab:

1. Du mischst Inhalt und Layout. Versuche, das strikt zu trennen. Keine style-Attribute mehr.
Außerdem auch keine id/Klassennamen wie "right". Damit neutralisierst Du einen großen Vorteil von CSS: Schnelles Redesign

Das sehe ich ein. Ich habe alles in die CSS verlagert und die Elemente entsprechend gekennzeichnet. Mal nebenbei: Sollte ich wirklich jede HTML Auszeichnung mit einer Klasse/ID versehen? Das interpretiere ich aus, Zitat:

Auch id/Klassennamen kann man semantisch vergeben, wie einfach alles im HTML-Code. Vergib die Namen, indem Du die Bedeutung des Elements bezeichnest.

2. Mir gefällt das nicht, dass das Menü in mehrere Menüs aufgeteilt ist und dazwischen Textabsätze liegen sollen. Mal davon abgesehen, dass das eigentlich keine Textabsätze sind, sondern ja offensichtlich Überschriften, ist es doch eigentlich ein Menü - aber eine schnelle Lösung hab ich jetzt nicht. Aber Du solltest in jedem Fall aus den Textabsätzen Überschriften machen.

Ich habe dies in die nächst liegende Überschrift ausgezeichnet. H2 in dem Fall. Richtig?

3. Du wendest <label> falsch an.

Ob du es mir glaubst oder nicht, ich habe früher NUR mit <label for= ausgezeichnet. Aber nach den Antworten auf meinem Beitrag in: http://www.html.de/html-und-xhtml/29342-w3-validator-frage.html
habe ich <label im Input/text gemacht.... War wohl falsch. Geändert.

4. Dein <p class="newseintrag"> ist nicht richtig.

Das ist eine Stelle, die ich nicht einsehen kann. Jeder Eintrag ist schon in einem DIV der Klasse "news". Im <p newseintrag ist auch der Inhalt des Beitrages. Wo währe da ein DIV angebracht?

5. Du verwendest "px" als Einheit für die Schriftgröße. Der IE6 hat einen Bug - solche Schrift kann man dort nicht skalieren. Das ist also nicht barrierefrei. Verwende lieber "em" oder "%".

Ich habe die Einheit auf em geändert/angepasst. So richtig? Ich traue den Kommaangaben nicht ganz.

6. Seitennamen wie "Seitegehtonline!.html" würde ich gefühlsmäßig vermeiden.

Meinst du das Ausrufezeichen?

7. Deine Adresse im Impressum zeichnest Du fälschlicherweise als Programmcode aus. Für Adressen gibt es <address>.

Dieser HTML Tag war mir nicht bekannt. Geändert.

8. div#container-footer ist überflüssig, da er nur ein Element enthält. <div> gruppiert aber mehrere Elemente.

In der Tat. Geändert.

9. Copyright gibt es in Deutschland nicht.

Ich weiss. Aber schadet auch nicht, oder?

10. "HTML-Scripte" missfällt mir. Scriptsprachen sind eine Teilmenge von Programmiersprachen. Auf HTML trifft das nicht zu. Das vermittelt den Eindruck, dass man mit HTML programmieren könne. Das selbe für CSS. "CSS/HTML Code" würde wohl besser passen.

Ja, da hast du recht. Was würdest du von "Schnipsel" halten?

11. "div#title img" hat eine seltsame Alternativbeschreibung.[...]Alternativ könnte ich mir vorstellen, dass Du den Text im <h1> weglässt, stattdessen das <img> in <h1> integrierst (und damit fällt auch das <div> weg) und dann "studio-y.de" als alt-Text reinschreibst.

Ja, da ist was drann. Ich habe nun den Text und das Bild als Überschrifft genommen. Ist das vertretbar?

Rein optisch spricht mich das Design nicht an, es wirkt sehr unsauber und durch die vielen Link etwas überladen.

Ja. 10er Blocks sind ein wenig viel. Hab es auf 5 reduziert.

Und die Farben sind kalt. Im Winter nichts für mich

Ich persönlich verbinde die Farbe mit "SKiddys, Hacker, Programmierer". Also eine kalte, rauhe Programmierfarbe. Deshalb habe ich die gewählt.

Danke für die Arbeit und Zeit, die du dir für mich genommen hast.

Mfg

 

[Efchen]

Ich habe alles in die CSS verlagert und die Elemente entsprechend gekennzeichnet.

Das span bei "Euer Marvin" hat noch ein Inline-Style.

Sollte ich wirklich jede HTML Auszeichnung mit einer Klasse/ID versehen?

Nein.
Was ich mit der semantischen Bezeichnung bei IDs/Klassen meinte ist, dass man solche Namen, wenn man sie vergibt, auch nur semantisch vergibt. Also niemals etwas wie "rot", "links" oder "untereZeile", weil das Layoutangaben sind, und wir ja Inhalt und Layout strikt voneinander trennen und Layoutangaben nicht ins HTML gehören. Besser wäre "wichtig", "Sidebar" oder auch evtl. "Fusszeile".

Im <p newseintrag ist auch der Inhalt des Beitrages. Wo währe da ein DIV angebracht?

Das <p> ist eigentlich ein <div> und die darin nicht ausgezeichneten Absätze müssten jeder ein eigenes <p> bekommen.

Ich habe die Einheit auf em geändert/angepasst. So richtig? Ich traue den Kommaangaben nicht ganz.

Du hast Vorurteile gegenüber Kommas? ;-)

Meinst du das Ausrufezeichen?

Ja.

Ich weiss. Aber schadet auch nicht, oder?

Sieht halt beknackt aus. :-)
Sowas hab ich früher gemacht, als ich Computerspiele programmieren wollte. Das erste war immer das Titelbild, da drin musste ein großes Copyright stehen, und danach hat mich die Lust verlassen ;-)

Ja, da hast du recht. Was würdest du von "Schnipsel" halten?

Code-Schnipsel?

Ich habe nun den Text und das Bild als Überschrifft genommen. Ist das vertretbar?

Ich denke schon.

Danke für die Arbeit und Zeit, die du dir für mich genommen hast.

Es macht doch Spaß, Websites und Webmaster auseinander zu nehmen, bis nichts mehr von ihnen übrig ist >;-)

Noch mehr Spaß machts allerdings, wenn die Kritik auch ankommt und nicht als böswillig interpretiert wird.

 

[Die Zahl]

Hallo Efchen,

Das <p> ist eigentlich ein <div> und die darin nicht ausgezeichneten Absätze müssten jeder ein eigenes <p> bekommen.

Ja, also ich sehe ein, das ich <br für Absätze benutzte habe. Ich habe die Funktion so umgeschrieben, das mehrere <br's durch <p's ersetzt werden. Allerdings werde ich <br für einen einmaligen Zeilenbruch drinne lassen.

Das span bei "Euer Marvin" hat noch ein Inline-Style.

Nun, mit der Funktion BB-Code will ich im CMS eine Option bieten, eingegebene Texte zu gestallten. Das Style-Attribut habe ich aber entnommen und jeder BBCode Funktion eine Klasse zugewiesen.
Ich hoffe, das ist vertretbar.

Was ich mit der semantischen Bezeichnung bei IDs/Klassen meinte ist,[...]

Diese Antwort hatte ich erwartet. Wollte nur mal "falsch" nachfragen ;)

Du hast Vorurteile gegenüber Kommas?

Beim IE gibt es doch solche Fehler, das z.b. 355.77px falsch interpretiert wird. Darum habe ich bis dato Kommaangaben gemieden.

6. Seitennamen wie "Seitegehtonline!.html" würde ich gefühlsmäßig vermeiden.

Ich habe Regex \w eingebaut, damit sollten alle Sonderzeichen verschwinden.


Habe ich es nun richtig gemacht?

Mfg

 

[Witschi262]

Hallo Zahl,
ich muss sagen, das Design finde ich jetzt nicht sehr Anspruchsvoll.
Du hast laut W3C einen Error ;)
Weiter so
[Invalid] Markup Validation of http://studio-y.de/news.html - W3C Markup Validator

 

[Palla92]

Hallo Die Zahl!

Ganz ehrlich? Das Design haut mich jetzt nicht um. Die Farben sind viel zu kalt und monoton. Vielleicht kannst du ein paar farbliche Akzente oder so etwas reinbringen?

Außerdem ist die Seite bei mir ziemlich auseinander gezogen (hab nen breiten Bildschirm), was das Lesen anstrengend macht.

Das Logo finde ich jetzt ehrlich gesagt auch nicht so gelungen zumal du es auch ganz rechts positionierst (recht ungewöhnlich).

Das Favicon gefällt mir aber :)

Ich hoffe, ich konnte dir ein bisschen helfen ;)
Lieben Gruß
Diana

 

[Die Zahl]

Du hast laut W3C einen Error ;)

Ups, da war regex zu gierig ;) Behoben.

ich muss sagen, das Design finde ich jetzt nicht sehr Anspruchsvoll

Ganz ehrlich? Das Design haut mich jetzt nicht um. Die Farben sind viel zu kalt und monoton.

Ich bin leider künstlerisch so begabt, wie ich Fahrad fahren kann: Garnicht. Mein erster Hamster hiess damals nur "Hamster". Ja, das künstlerische Feeling fehlt mir stark.

Das Logo finde ich jetzt ehrlich gesagt auch nicht so gelungen

Nach 3 Stunden Gimp-Filter-werfen hab ichs einfach so gelassen, wie es raus kam und habe es mit gelber Farbe überzogen. Zumindest kann ich sagen: Ist selbst gemacht! ;)

Mein Hauptaugenmerk liegt inmoment in der HTML Semantik. Also die Kombination in einem CMS vollkommen dynamische Seitenerzeugung und gleichzeitig semantisch richtige HTML Auszeichnung zu erzeugen. Denn die meissten CMS benutzen entweder Tabellen oder DIV-Suppen Layout(PHPKIT, CMPRO etc.).

Danke für die Antworten!

Mfg

 

[Efchen]

Beim IE gibt es doch solche Fehler, das z.b. 355.77px falsch interpretiert wird. Darum habe ich bis dato Kommaangaben gemieden.

Eh hallo? Lies nochmal nach, was Du geschrieben hast.
Dann klatsch Dir kräftig vor den Kopf, wenn Du erkennst, wie doof das war ;-)

Nicht nur der IE, jeder Browser denkt sich, was Du für ein komischer Entwickler bist, wenn Du sie dazu zwingst, Pixel noch zu teilen!

Oder wie glaubst Du, stellt ein Monitor 77/100 Pixel dar? :-)

 

[struppi]

Außerdem ist die Seite bei mir ziemlich auseinander gezogen (hab nen breiten Bildschirm), was das Lesen anstrengend macht.

Hast du kein Windows? Damit lassen sich Fenster auf jede gewünschte Größe ziehen.

 

[Efchen]

1. Kann man in jedem Windowing-System die Fenstergröße ändern (was anscheinend mehr als die Hälfte der Bevölkerung gar nicht weiß).
2. Mancheiner mag seine fenster aus gutem Grund breit ziehen. Das sollte man ihm nicht verbieten. Eine gute Website macht Texte trotzdem nicht so breit.

Das ist wieder eine gute Stelle, sich darüber aufzuregen, dass die Filmindustrie jetzt schon die Computer fest im Griff hat, sonst würden Monitore nicht immer breiter werden. Denn jeder vernünftige Entwickler, jeder Texter, jeder WWW-Nutzer hat mehr davon, wenn ein Bildschirm höher statt breiter ist, 1024x1600 wäre ein viel angenehmeres Format...aber ich schweife vom Thema ab... ;-)

 

[struppi]

2. Mancheiner mag seine fenster aus gutem Grund breit ziehen. Das sollte man ihm nicht verbieten. Eine gute Website macht Texte trotzdem nicht so breit.

Ich verbiete niemanden etwas. Im gegenteil ich wundere mich nur warum man sich dann beschwert, wenn man sein Fenster so breit macht. Und warum soll ich jemanden vorschreiben welche Zeilenlänge jemand bevorzugt? Ich verzichte auf max-width

 

[Palla92]

Hast du kein Windows? Damit lassen sich Fenster auf jede gewünschte Größe ziehen.

Was soll mir das sagen?
Natürlich bin ich dazu in der Lage die Fenstergröße zu ändern. Da ich aber (und ich bin sicherlich nicht die Einzige) normalerweise im Vollbildmodus surfe, ist mir einfach aufgefallen, dass die Seite sehr langgezogen aussieht.

Wenn das mit meiner Seite so wäre, würde ich auch wollen, dass man mir sowas sagt, wenn ich sie hier zur Bewertung frei gebe.

 

[Die Zahl]

Wenn das mit meiner Seite so wäre, würde ich auch wollen, dass man mir sowas sagt, wenn ich sie hier zur Bewertung frei gebe.

Ja, dieses Aspekt habe ich noch nicht beachtet.
Leider habe ich nicht die Möglichkeit, die Auflösung höher als 1280x1024 zu stellen um das zu testen.
Schau dir mal bitte: http://studio-y.de/htmldump.html an und sag, ob das eine annehmbare max-Breite währe.

Und warum soll ich jemanden vorschreiben welche Zeilenlänge jemand bevorzugt? Ich verzichte auf max-width

Und warum, wenn ich fragen darf?

Mfg

 

[Prasedonym]

das logo und das Favicon ist verzogen und zu verpixelt
Ich finde die Website zu altmodisch schau mal die neuen an die sehen ganz anders aus!

aber zum Aufbau der Seite find ich es noch recht gut muss ich sagen :-D

 

[struppi]

Und warum, wenn ich fragen darf?

Wegen der Freiheit für den Besucher.

 

[Palla92]

Hallo Die Zahl!

Ich hab mir den Link angeschaut und es ist auf jeden Fall schon um einiges besser, obwohl die Seite auch noch ein bisschen enger sein könnte.
Ist aber so in Ordnung wie du es in dem Link gemacht hast.

Lieben Gruß
Diana