zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Allgemeine Eindrücke

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 26.08.2013, 22:05
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Nabend,

ein Blick hinter die Kulissen macht schnell deutlich: hier herrscht viel wildwuchs. Du sollest dich dringend mit dem Thema "Semantik" beschäftigen und die inflationäre Verwendung von Klassen und IDs nochmal überdenken. Die meisten kann man sich sparen, wenn man auf eine saubere Struktur setzt. Auch sollte man im Zuge der Trennung von Darstellung und Logik seine Scripts in eigene Dateien auslagern und nicht irgendwo im Markup platzieren. Wenn man sie im Markup behalten möchte, dann gehören sie entweder in's head-Element oder an das Ende des body-Elements.

Optisch ist das natürlich immer Geschmackssache - ich weiß nicht wie euer "Spiel" mal aussehen solll - aber mir gefällt's nicht. Ich weiß nicht so recht was das aktuelle "Design" vermitteln möchte.

Beste Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Geändert von lottikarotti (26.08.2013 um 22:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 27.08.2013, 00:29
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Hmm danke erstmal fuer die antwort ^^

Also die scripts werden selbstverständlich irgendwann ausgelagert. So ist das im moment nur zu testzwecken. Aber wieso sollte ich auf klassen und ids verzichten, wenn ich bestimmte elemente einzeln ansprechen moechte? Wie genau meinst du das?

"Spiel" - du kannst die anfuehrungszeichen ja auch weglassen

Nun ja... design. Was genau gefaellt dir nicht? Liegt es der farbe, an der schriftart, oder generell an dem layout? (Was uebrigens das erste ist bei dem ich denke es ist mir gelungen xD) ich denke auch das da noch seehr viel geändert werden muss, aber die struktur ist doch okay - oder nicht? Nun ja die seite soll duester wirken, aber eben auch einladend.
Ach und bevor ichs vergesse: was da steht ist im moment voellig egal, das habe ich einfach mal hingekritzelt.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 27.08.2013, 09:03
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Du hast immer noch ein fehlerhafter Attribut in deinem Code, „open“ ist nicht valide (auch wenn der Validator es nicht finden kann, da es erst mit Javascript gesetzt wird).

Dein Dokument hat keine Struktur, nicht mal eine einzige Überschrift. So sieht die Outline deiner Seite aus: Outline

Die Plus- und Minus-Symbole gehören nicht ins Markup, das ist nur Optik, daher würde ich sie als Hintergrundbild setzen. Gleiches gilt für die hr-Elemente im Menü, dort wird kein Trenner gebraucht, gib einem der Elemente eine Border.

Die Sprachen sind auch eine Liste. Warum hast du hier darauf verzichtet?

title- und alt-Attribut sollten nicht den gleichen Inhalt haben.
Mit Zitat antworten
  #14 (permalink)  
Alt 27.08.2013, 10:11
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Morgen,

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Also die scripts werden selbstverständlich irgendwann ausgelagert. So ist das im moment nur zu testzwecken.
Wenn du noch am "Testen" bist, verstehe ich ehrlich gesagt nicht, wieso wir das Ganze bereits bewerten sollen.

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Aber wieso sollte ich auf klassen und ids verzichten, wenn ich bestimmte elemente einzeln ansprechen moechte? Wie genau meinst du das?
Du kannst Elemente, dank des sehr umfangreichen Angebots an CSS-Selektoren (in den meisten Fällen) ohne spezielle Klassennamen und IDs ansprechen. Nehmen wir also mal an auf deiner Seite befinden sich mehrfach Artikel (<article>) welche Linklisten (<ul>) beinhalten. Diese lassen sich nun im passenden Kontext gestalten:
Code:
article ul { /* ... */ }
Dazu muss die Struktur der Seite allerdings stimmig sein. Mit einer <div>-Suppe lässt sich sowas nicht abbilden. Um dir das Ganze mal ein wenig zu demonstrieren, habe ich ein Beispiel gebastelt, welches sich bzgl. der Struktur an deiner Seite orientiert:

- Strukturierung von Inhalt durch semantische Elemente

Dieses Beispiel zeigt zwei Dinge sehr deutlich: einerseits werden Elemente abhängig von ihrem Kontext gestaltet (section ul/ nav ul). Andererseits wird ein konkreter Fall dargestellt, bei dem der Einsatz von IDs zwingend notwendig ist (aufklappbare Navigation ohne JavaScript). Wichtig ist es zu verstehen, wann Klassennamen und IDs wirklich notwendig sind und wann nicht.

Zitat:
Zitat von mymaksimus Beitrag anzeigen
"Spiel" - du kannst die anfuehrungszeichen ja auch weglassen
Na ja, das Wort "Spiel" ist schneller geschrieben als dasselbige entwickelt ist.

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Nun ja... design. Was genau gefaellt dir nicht? Liegt es der farbe, an der schriftart, oder generell an dem layout?
Die Seite besteht derzeit aus einem Hintergrundbild, einer weißen Schrift und eigenartigen Schattierungen. Ein bunter Mauszeiger und ein aufklappbares Menü ergeben meiner Meinung nach noch lange kein "Design". Um dem Spiel schon durch die Website einen Charakter zu verleihen, muss hier optisch noch sehr viel getan werden. Ein Paradebeispiel dafür wie es richtig geht, ist in meinen Augen Blizzard.

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Ach und bevor ichs vergesse: was da steht ist im moment voellig egal, das habe ich einfach mal hingekritzelt.
Dann solltest du dir erstmal ein wenig Zeit nehmen, das Ganze gründlich überarbeiten und uns erneut nach unserer Meinung fragen, wenn du etwas ordentliches zu präsentieren hast

PS: Noch ein Lesetipp: Wieso sich Flaggen nicht als Sprachsymbole eignen

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #15 (permalink)  
Alt 27.08.2013, 11:02
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.379
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Hier auch noch mal Saft von mir, ohne mir Lottis Post wirklich durchgelesen zu haben (tl;dr )

HTML
- <div id="title"> --> Überschrift!
- Im Title: <u> ist falsch. (deprecated) Das span würde vollkommen ausreichen. mit CSS (und ohne den inline-style)
- die "..." sind eher ein &hellip;

- Dein Menü ist kein Menü sondern etwas merkwürdiges -> Mach eine vernünftige Liste daraus
- Schmuckgrafik rausschmeißen (das "+/-"-Teil)
- Das Javascript auslagern
- Auch ein durch JavaScript hinzugefügtes "onclick"-Attribut sieht nicht gut aus

- Keine Semantik im Inhalt. Das "Hello!" ist eine Überschrift. Der Rest Absätze.
- <br /> ist ein Zeilenumbruch und KEIN Absatz.


CSS
- Leg deine beiden CSS-Dateien zusammen. Bei den kleinen Dateien macht es keinen Sinn diese in zwei zu splitten.
- Benutze er keine PT als Einheit, die sind Print und Print ist der Feind!
- Definiere Farben anstelle durch ein Wort lieber mit HEX, RGB, RGBA, HSL etc.

DESIGN
- Schlagschatten gibt Schläge. Und hier passt er nicht und ist schwer sichtbar
- Die Typo braucht ein word-spacing im css, damit sie lesbarer wird.
- Ich sehe Rechtschreibfehler im Text.. "CstleNightmare"? :P
- Gib der Seite Abstand nach oben. Wirkt freier.
- Wieso ein blauer Cursor? Sonst ist diese Farbe nirgends vorhanden. (außer im Schlagschatten, aber der gibt Schläge)
- Wieso grüne Text-Markierung? (siehe Cursor)
- Eine #content-width von 60% reicht vollkommen aus.
- Der Typo fehlt Kerning, weshalb sie generell ziemlich schlecht ausschaut.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #16 (permalink)  
Alt 27.08.2013, 14:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Okay danke führ die zahlreichen Vorschläge!
Ich werde mir jeden beitrag noch einmal einzeln durchlesen und versuchen einzubeziehen.

Hier trozdem ein paar rückfragen / antworten:

Zitat:
Zitat von inta
Du hast immer noch ein fehlerhafter Attribut in deinem Code, „open“ ist nicht valide (auch wenn der Validator es nicht finden kann, da es erst mit Javascript gesetzt wird).
Stimmt, das muss ich noch zu data-open ändern.

Zitat:
Zitat von inta
Die Plus- und Minus-Symbole gehören nicht ins Markup, das ist nur Optik, daher würde ich sie als Hintergrundbild setzen. Gleiches gilt für die hr-Elemente im Menü, dort wird kein Trenner gebraucht, gib einem der Elemente eine Border.
Das stimmt, plus und minus mach ich als bild, und <hr> werde ich durch border ersetzen.

Zitat:
Zitat von inta
Die Sprachen sind auch eine Liste. Warum hast du hier darauf verzichtet?
Nun ich war etwas unschlüssig, weil die 3 "viel zu nicht breiten" Flaggen untereinander komisch aussehen würden. Vielleicht mache ich das aber schreibe den Sprachen Namen dahinter?

Zitat:
Zitat von inta
title- und alt-Attribut sollten nicht den gleichen Inhalt haben.
Merke ich mir, aber wieso?

Zitat:
Zitat von lottikarotti
Wenn du noch am "Testen" bist, verstehe ich ehrlich gesagt nicht, wieso wir das Ganze bereits bewerten sollen.
Ach immer diese falsche ausdrucksweise Ich habe ein "Layout" gebastelt, und wollte mal ein paar Rückmeldungen haben um zu sehen wie ich weitermache ^^ Okay ich werde sobad ich wieder dran Arbeite die Scripte auslagern

Zitat:
Zitat von lottikarotti
Du kannst Elemente, dank des sehr umfangreichen Angebots an CSS-Selektoren (in den meisten Fällen) ohne spezielle Klassennamen und IDs ansprechen.[...]
Ja das leuchtet ein. Werde versuchen das umzusetzen.

Zitat:
Zitat von lottikarotti
Dazu muss die Struktur der Seite allerdings stimmig sein. Mit einer <div>-Suppe lässt sich sowas nicht abbilden.
Siehe unten.

Zitat:
Zitat von lottikarotti
Dann solltest du dir erstmal ein wenig Zeit nehmen, das Ganze gründlich überarbeiten und uns erneut nach unserer Meinung fragen, wenn du etwas ordentliches zu präsentieren hast
Das werde ich tun

Zitat:
Zitat von thielo
<div id="title"> --> Überschrift!
Siehe unten.

Zitat:
Zitat von thielo
Im Title: <u> ist falsch. (deprecated) Das span würde vollkommen ausreichen. mit CSS (und ohne den inline-style)
Wusste ich garnicht o.O Danke für die Info

Zitat:
Zitat von thielo
die "..." sind eher ein &hellip;
Ist es denn "falsch" einfach ... hinzuschreiben?

Zitat:
Zitat von thielo
Dein Menü ist kein Menü sondern etwas merkwürdiges -> Mach eine vernünftige Liste daraus.
heisst genau...?

Zitat:
Zitat von thielo
Schmuckgrafik rausschmeißen (das "+/-"-Teil).
Ist das nicht geschmacksache?

Zitat:
Zitat von thielo
Das Javascript auslagern
Hatten wir schon oben...

Zitat:
Zitat von thielo
Auch ein durch JavaScript hinzugefügtes "onclick"-Attribut sieht nicht gut aus
Was hast du gegen onclick???

Zitat:
Zitat von thielo
Keine Semantik im Inhalt. Das "Hello!" ist eine Überschrift. Der Rest Absätze.[...]<br /> ist ein Zeilenumbruch und KEIN Absatz.
Siehe unten, und ich benutze viel lieber ein <br> als einen Absatz. Ist das "falsch" ?

Zitat:
Zitat von thielo
Leg deine beiden CSS-Dateien zusammen. Bei den kleinen Dateien macht es keinen Sinn diese in zwei zu splitten.
Jop, hast recht.

Zitat:
Zitat von thielo
Benutze er keine PT als Einheit, die sind Print und Print ist der Feind!
Und auf Deutsch?

Zitat:
Zitat von thielo
Definiere Farben anstelle durch ein Wort lieber mit HEX, RGB, RGBA, HSL etc.
Da versuche ich mich schon sehr lange dran zu gewöhnen, aber manchmal rutsch einfach immer noch ein "red" oder "blue" raus ^^

Zitat:
Zitat von thielo
Schlagschatten gibt Schläge. Und hier passt er nicht und ist schwer sichtbar.
Schwer sichtbar.... ich wechsele die Farbe. Aber wieso passt er nicht? Hier scheint es mir eine sinnvolle "Bereich trennung" zu sein.

Zitat:
Zitat von thielo
Die Typo braucht ein word-spacing im css, damit sie lesbarer wird.
Was genau ist nochmal Typo?

Zitat:
Zitat von thielo
Ich sehe Rechtschreibfehler im Text.. "CstleNightmare"? :P
Text bezogen... Wie gesagt ^^ Ausserdem ist er nicht von mir XD ne spass aber ist er wirklich nicht ^^

Zitat:
Zitat von thielo
Gib der Seite Abstand nach oben. Wirkt freier.
ok!

Zitat:
Zitat von thielo
Wieso ein blauer Cursor? Sonst ist diese Farbe nirgends vorhanden. (außer im Schlagschatten, aber der gibt Schläge)
Okay hast recht, passt nicht wirklich.

Zitat:
Zitat von thielo
Wieso grüne Text-Markierung? (siehe Cursor)
Ebenfalls siehe cursor ^^

Zitat:
Zitat von thielo
Eine #content-width von 60% reicht vollkommen aus.
Werd ich überdenken.

Zitat:
Zitat von thielo
Der Typo fehlt Kerning, weshalb sie generell ziemlich schlecht ausschaut.
Typo... Kerning...? Sry


Zu allen die etwas zu meiner Semantik sagen:

Ich finde, und ich habe mich daran gewöhnt, verschiedene Sinntragende Objekte durch allgemeine Platzhalter zu ersetzen und mit css anzupassen. Zum Beispiel verzichte ich gerne auf <h1></h1>, und benutze lieber ein <span> welchen ich dann mit Css umgestalte. Ich sehe auch keinen Grund mich davon abzgewöhnen. Deshalb entsteht auch schonmal ein "<div> - Salat", aber durch entsprechende Klassen ist da normalerweise sehr leicht durchzublicken.

Also - Lieg ich da falsch?


Vielen Dank für die Investierte Zeit ^^
Mit Zitat antworten
  #17 (permalink)  
Alt 27.08.2013, 15:06
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Also - Lieg ich da falsch?
Ganz klares ja.

Dazu empfehle ich mal folgenden Artikel:
Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

EDIT: Typo = Kurzform von Typographie, meint in etwa Schriftgestaltung
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Geändert von explanator (27.08.2013 um 15:09 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 27.08.2013, 15:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Okay danke. Ich lese es mir durch.
Mit Zitat antworten
  #19 (permalink)  
Alt 27.08.2013, 15:20
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 748
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Suchtipps:

- „html img element alt title difference“
- „typo bedeutung“
- „kerning bedeutung“
- „html semantik“

Zitat:
Ist es denn "falsch" einfach ... hinzuschreiben?
Was heißt „falsch“? Es ist technisch gesehen ein eigenes Satzzeichen.

- https://de.wikipedia.org/wiki/Auslassungspunkte

Das ist ungefähr so, als würdest du doppelte Anführungszeichen durch zwei einzelne „nachbauen“.

Zitat:
Was hast du gegen onclick???
Es ist unnötig, über das HTML-Attribut zu gehen, wenn du das Event direkt an den Event-Handler des DOM-Elements binden kannst.

- https://developer.mozilla.org/en-US/.../click#Example

Zitat:
und ich benutze viel lieber ein <br> als einen Absatz. Ist das "falsch" ?
Wenn du damit Absätze machen willst: Ja, ist falsch.

Zitat:
Ich finde, und ich habe mich daran gewöhnt, verschiedene Sinntragende Objekte durch allgemeine Platzhalter zu ersetzen und mit css anzupassen. Zum Beispiel verzichte ich gerne auf <h1></h1>, und benutze lieber ein <span> […]
Da habe ich aufgehört zu lesen. Puh.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 27.08.2013, 15:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Tja so machte ich das halt bisher. Und glaub mir wuesdtest du was mein info lehrer mir versucht hatte beizubringen wuerdest du sagen fang mal bitte ganz vonn neu an ^^ und ich weiss was der unterschied zwischen alt und title ist, aber warum ist es falscj den gleichen wert zu benutzen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Noch ein paar Allgemeine Fragen FranzderFranke Offtopic 5 17.03.2008 21:03
Allgemeine Fragen zu freundlichen URLs Sodie Serveradministration und serverseitige Scripte 10 15.10.2007 21:16
Allgemeine Frage zu Option-Tag duessu CSS 1 15.07.2006 14:18
Allgemeine Listenfrage Retrax CSS 6 03.12.2004 14:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:41 Uhr.