Stellt eure Homepage vor!

[C64]

Kann dich leider nicht positiv bewerten...
Daher ein großes Dankeschön
Hab schon mal einiges auf der Startseite angepasst...

 

[Gokoana]

Kann dich leider nicht positiv bewerten...

Kein Problem!

… Daher ein großes Dankeschön

Aber bitte sehr!

… Hab schon mal einiges auf der Startseite angepasst...

Na, das wirkt doch gleich ganz anders. Wenn Du nun noch eine Textur findest, um das Wurzelholz zu ersetzen, könnte ich mich in Schweigen hüllen.

 

[drp]

Ich hab dich aber mal gut bewertet
Haben auch mir geholfen die Links!

 

[pinguSTAR]

so hier mal das letzte Projekt von mir: Klick

ist ein Blog und Info-Seite über meine Anstehende Reise. Inhaltlich noch sehr schwach (bin ja auch noch nicht unterwegs aber über Kritik zur technischen und grafischen Umsetzung würde ich mich freuen.

Grüße
pingu

 

[Thaddäus]

Hier mal der Apftelk-App Blog:

http://apfeltalkapp.wordpress.com

 

[Fischwaage]

Möchte euch auch mal mein neues Projekt vorstellen, von der Gestaltung usw. ist alles relativ final - an Content mangelt es natürlich noch aber mein Ziel ist es jeden Tag einen neuen Beitrag (Leitfaden) zu erstellen.

Nun ja, schaut mal rein und über eure Meinung würd ich mich sehr freuen.

Link: http://www.gamerscores.de

 

[Jol]

Ich stelle euch hier mal den Blog von meinem Kumpel und mir vor, in dem wir Tipps, Tricks zur Fotografie und natürlich auch eigene Fotos posten.

http://einfach-foto.de/

Danke!

 

[drp]

Okay, dann stell ich auch mal wieder mein neuestes Projekt vor^^
Dabei handelt es sich um die Seite für einen MineCraft-Game-Server: http://craft.drp-seiten.de/

Wie findet ihr das Design?

 

[laurids]

Okay, dann stell ich auch mal wieder mein neuestes Projekt vor^^
Dabei handelt es sich um die Seite für einen MineCraft-Game-Server: http://craft.drp-seiten.de/


Wie findet ihr das Design?

Um ehrlich zu sein genauso unschön wie deine Seiten zuvor. (Seitenaufbau, verwendete Farben, Embosseffekt, weißer Schatten, Schriftgröße, graue Balken, rote Schrift, Werbung, nicht skalierendes Backgroundimage)

 

[drp]

@Jol Das Design gefällt mir sehr, es sieht sehr gut aus! Eigentlich habe ich (fast) keine Verbesserungsvorschläge, nur würde ich eventuell den "title" beim drüberfahren der Menüeinträge entfernen, bzw. anders lösen. Falls die Beschreibung sehr wichtig ist, würde ich das vielleicht mit einem leeren DIV, machen wo die Beschreibung beim herüberfahren eingeblendet wird.

 

[drp]

Um ehrlich zu sein genauso unschön wie deine Seiten zuvor.

-edit: hat sich erledigt -

 

[drp]

Hm, das Backgroundimage sollte eigentlich skalierend sein. Ich weiß nicht, mit welchem Browser du die Seite besucht hast, aber bei mir funktioniert es (Chrome, Firefox getestet)
Ansonsten vielen dank für die anderen Tipps

 

[drp]

So. Ein paar Sachen habe ich - hoffe ich - jetzt verbessert. Anderer Hintergrund (scroll), anderer Schatten, neues Header-Bild...

 

[naich]

@drp:
- hässlicher Abstand zwischen 1. und 2. Zeile
- mach endlich deine (Haupt)Texte linksbündig statt zentriert, das wurde dir doch schon dutzendemal gesagt
- das rot und grün sticht mir zu sehr hervor. Ich würde hier was dezenteres (dunklerer Ton) probieren.

Soweit in kürze von mir.

 

[drp]

So, hab es jetzt noch etwas verbessert. Vielen Dank für die Tipps! Ich denke jetzt sollte es etwas besser sein.

 

[hokage]

@Jol: Zum Design brauche ich nicht viele Worte zu verlieren. Alles sehr ansprechend, elegant und stimmig. Es gefällt! Der Quellcode ist im Vergleich zu einigen anderen Seiten, die ich hier in der Vergangenheit gesehen habe ebenfalls deutlich aufgeräumter und ein Hauch Semantik ist auch zu erkennen. Allerdings nur ein Hauch


Folgendes kann man unter der Haube besser machen:


1. Du hast allen Überschriften der Themen in deinem Blog ein <h1> gegeben. Ein <h2> wäre hier richtiger. Überschriften werden in HTML nach Wertigkeit ausgezeichnet. Die Hauptüberschrift der Seite erhällt <h1>. Es kann auch nur eine Hauptüberschrift geben. In deinem Fall wäre das "Einfach Foto - Alles rund um die Fotografie". Ja, dies ist eine Bilddatei, nichtsdestotrotz kannst du das Bild mit einem <h1> auszeichnen!
<h1><img src="" alt="" title="" width="" height=""/></h1>
Überschriften zweiter Ordnung erhalten dann ein <h2> und so weiter bis <h6>. Überschriften zweiter-sechster Ordnung kann es natürlich mehrere geben.


2. Die Schlagworte am Ende der Seite sind eine Auflistung von Links. Also genau wie bei einem Menü <ul><li><a></a></li> </ul>. Du hast einfach nur alle Links unter einander geschrieben, was semantisch falsch ist.


3. Das größte Manke was man heute leider auf so gut wie jeder Website sehen kann ist die nicht korrekte Verwendung des -div- Elementes. Die semantische Bedeutung lautet "Gruppe" und nur dazu sollte man es verwenden. Ausnahmen bestätigen die Regel. Hier ein paar Beispiele wo div überflüssig ist.

<div id="left_arrow"><a href="[URL="http://einfach-foto.de/#"]#[/URL]" id="previous"><img src="[URL]http://einfach-foto.de/wp-content/themes/Polished/images/fleft_arrow.png[/URL]" width="32" height="70" alt="Featured Previous"/></a></div>

Die id "left_arrow kannst du auch dem a Element geben. Quasi <a id="left_arrow"...></a>.

<div class="clear"></div>

In Ausnahmefällen ok, aber hier unnötig, da du die Klasse auch dem nächsten unteren Element geben kannst. Gecleart wird dann trotzdem.


--> Bei genauem Suchen gibt es mit Sicherheit noch zahlreiche weitere divs die einfach unnötig sind und den Quellcode sinnlos größer machen. Diese divs zu finden liegt jetzt an dir! Semantik ist das Stichwort!


4. Auch bei der Vergebung der Id und class Namen spielt Semantik eine Rolle. Eine Klasse wie "arrow_left" hat keine inhaltliche Aussagekraft. Bei einem Redesign der Seite müsste der Klassenname also neu gewählt werden, weil der Pfeil vll. nach rechts zeigt. HTML hat nichts mit Design zu tun. Inhalt und Design von einander trennen! Inhalt = HTML und Design = CSS. Demnach alle style-Attribute entfernen. Die haben im HTML Code nichts zu suchen. Einfach ins Stylesheet auslagern.


5. Bei einigen wenigen Bildern fehlt das Titelattribut, welches in Sachen Barrierefreiheit enorm wichtig ist. Zu meiner Überraschung ist das alt Attribut immer vorhanden (soweit ich nichts übersehen habe), denn meistens wird mit diesem geschludert. Sehr Gut!


Ich weiß das ist einiges an Kritik, aber bei dir habe ich mir die Mühe mal gemacht, weil ich glaube, dass sie hier nicht umsonst war, denn einiges hast du in Sachen Quellcode bereits sehr richtig gemacht. Es wird relativ viel Arbeit sein alles umzusetzen, aber glaub mir, es wird sich rentieren und mit deinen 16 Jahren wirst du sicherlich die nötige Zeit finden.


@drp:


Dein "Verbesserungsvorschlag", der das Weglassen des title-Attributs impliziert ist kompletter Blödsinn. In Sachen Barrierefreiheit ist das title genau wie das alt-Attribut bei Bildern unabdingbar und gehört zu jedem <img /> Tag dazu. Jol hat alles richtig gemacht, außer bei einigen wenigen Bildern eben dieses Attribut zu vergessen.


Zu deiner Seite: Das Design haut mich wirklich nicht vom Hocker. In meinen Augen ist es einfach nur hässlich. Die Farbwahl ist sehr unglücklich gewählt. Die Kachelung des Hintergrundes und des Headers wirkt altmodisch und sieht ebenfalls nicht berauschend aus. Verpixelte Grafiken und Werbung geben der Seite den Rest.


Zum Code sage ich nichts... Der ist einfach nur grausam. Keine Semantik vorhanden (Validierung habe ich nicht überprüft), Tabellenkonstrukte missbraucht zum Design, div missbraucht zum Design, keine Trennung von Design und Inhalt, Style-Angaben nicht in Stylesheet ausgelagert, Inhalt nicht richtig ausgezeichnet...

*Edit: Hier noch die Validierung: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0


grüße

 

[lowpixel]

Ich stelle euch hier mal den Blog von meinem Kumpel und mir vor, in dem wir Tipps, Tricks zur Fotografie und natürlich auch eigene Fotos posten.

http://einfach-foto.de/

Danke!

handelt es sich bei der Seite nicht um ein fertigtemplate von http://www.elegantthemes.com/ oder steckt Ihr hinter http://www.elegantthemes.com/?Das würde das bewerten von Design und Quelltext eher überflüssig machen oder?

 

[Slashwalker]

2. Die Schlagworte am Ende der Seite sind eine Auflistung von Links. Also genau wie bei einem Menü <ul><li><a></a></li> </ul>. Du hast einfach nur alle Links unter einander geschrieben, was semantisch falsch ist.

Naja, hier streiten sich die Gelehrten. UL, OL oder doch DL? Ein definitives "richtig" gibt's hier IMHO nicht.

3. Das größte Manke was man heute leider auf so gut wie jeder Website sehen kann ist die nicht korrekte Verwendung des -div- Elementes. Die semantische Bedeutung lautet "Gruppe" und nur dazu sollte man es verwenden. Ausnahmen bestätigen die Regel. Hier ein paar Beispiele wo div überflüssig ist.

Quark mit Soße! Divs haben KEINE semantische Bedeutung.

<div class="clear"></div>

In Ausnahmefällen ok, aber hier unnötig, da du die Klasse auch dem nächsten unteren Element geben kannst. Gecleart wird dann trotzdem.

Hab mir den aktuellen Fall nicht angesehen, aber es kann schon einen gewaltigen Unterschied machen ob vor oder nach dem nächsten Element gecleared wird.

5. Bei einigen wenigen Bildern fehlt das Titelattribut, welches in Sachen Barrierefreiheit enorm wichtig ist. Zu meiner Überraschung ist das alt Attribut immer vorhanden (soweit ich nichts übersehen habe), denn meistens wird mit diesem geschludert. Sehr Gut!

Nope, für die Barrierfreiheit ist nur das ALT-Attribut wichtig, denn dort gehört eine kurze Beschreibung dessen rein, was auf dem Bild zu sehen ist. Was soll man dann im Title noch zusätzlich angeben? Eben, nix.

 

[hokage]

Naja, hier streiten sich die Gelehrten. UL, OL oder doch DL? Ein definitives "richtig" gibt's hier IMHO nicht.

Warum sollten sich die Gelehrten hier streiten? <ul> zeichnet eine ungeordnete Liste aus, <ol> eine geordnete Liste und <dl> eine Definitionsliste. Die einfache Auflistung der Schlagworte ist weder geordnet (d.h. die Reihenfolge ist wichtig), noch werden irgendwelche Begriffe definiert, die eine Erklärung benötigen. Demnach ist semantisch einzig und allein der <ul> Tag in diesem speziellen Fall korrekt.

Quark mit Soße! Divs haben KEINE semantische Bedeutung.

Quark mit Soße? Wohl kaum und ich kann mich wage erinnern, dass wir diese Diskussion auch schon einmal geführt haben. Zweifelsohne ist die semantische Bedeutung des Div-Elementes nicht so detailgenau, wie z.B. die des ul-Elementes, denn im Prinzip gruppiert letzteres auch andere Elemente. Nichtsdestotrotz hat das div-Element den Sinn mehrere Elemente zu gruppieren um diese mit CSS zu formatieren. Oft ist div aber unnötig, denn um ein <ul></ul> brauch kein div mehr rum. Mit css kann ich auch das ul direkt über Ids oder Klassen ansprechen. In Ausnahmefällen muss man bis dato auch in anderen Situationen, die nichts mit "Gruppierung" zu tun haben, auf div zugreifen, z.B. wenn man ein Bild, welches nur zur Zierde gedacht ist, einbinden möchte. Dies geschieht über CSS und wird dem leeren div als Backgroundimage zugefügt.
Hier noch mal die offizielle Definition und der offizielle Verwendungszweck von w3c:

Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with styles.

http://www.w3schools.com/tags/tag_div.asp

Hab mir den aktuellen Fall nicht angesehen, aber es kann schon einen gewaltigen Unterschied machen ob vor oder nach dem nächsten Element gecleared wird.

Vielleicht hast du mich nicht verstanden. Folgender Beispielcode:


HTML:

<ul id="navigation">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
...
</ul>


<div id="content">
<h2></h2>
<p></p>
<h3></h3>
<p></p>
...
</div>


<div class="clear"></div>


<ul id="footer">
<li>Copyright xy</li>
<li><a>impressum</a></li>
<li><a>kontakt</a></li>
...
</ul>

CSS:

#navigation{
float:left;
...
}


#content{
float:right;
}


.clear{
clear:both;
}


#footer{
...
}

Das hier verwendete div zum clearen ist komplett überflüssig, weil man die Styleangabe clear:both; auch dem nachfolgenden Element geben kann. In diesem Fall dem <ul> des footers mit der id "footer".
Jetzt klar, was ich gemeint habe?
Gibt es kein nachfolgendes Element (weggen z.B. Seitenende), so muss natürlich auf ein leeres Div zugegriffen werden (ich weiß es gibt da auch Alternativen, wo kein Markup anfällt.). Aber das ist die Ausnahme und war bei Jol nicht der Fall

Nope, für die Barrierfreiheit ist nur das ALT-Attribut wichtig, denn dort gehört eine kurze Beschreibung dessen rein, was auf dem Bild zu sehen ist. Was soll man dann im Title noch zusätzlich angeben? Eben, nix.

Auch so nicht ganz richtig! Ja, das Alt-Attribut ist enorm wichtig, da es bei ausgeschalteten Bildern oder der Verwendung eines Vorlesebrowsers dennoch den Inhalt des Bildes vermittelt, was z.B. für Blinde äußerst wichtig ist. Allerdings beinhaltet das Alt-Attribut nicht mehr als eine inhaltsbeschreibende Überschrift. Weiterführende Erklärungen des Bildes kommen in das title-Attribut, was sowohl in Sachen Usability, als auch in Sachen Barrierefreiheit demnach eine Rolle spielt.
Nachzulesen hier: http://www.die-barrierefreie-website.de/umsetzung/grafiken.html
Weglassen könnte man das title Attribut nur, wenn man den erklärenden Text direkt unter das jeweilige Bild schreibt, entsprechende Tags gibt es meines Wissens nach auch in html5.

grüße

 

[Slashwalker]

Warum sollten sich die Gelehrten hier streiten? <ul> zeichnet eine ungeordnete Liste aus, <ol> eine geordnete Liste und <dl> eine Definitionsliste. Die einfache Auflistung der Schlagworte ist weder geordnet (d.h. die Reihenfolge ist wichtig), noch werden irgendwelche Begriffe definiert, die eine Erklärung benötigen. Demnach ist semantisch einzig und allein der <ul> Tag in diesem speziellen Fall korrekt.

Hatte die BEiträge nur überflogen und bin von eine Navigation ausgegangen. Und bei einer Navigation streiten sich die Gelehrten.
Ich bevorzuge für eine Navigation die OL.

Quark mit Soße? Wohl kaum und ich kann mich wage erinnern, dass wir diese Diskussion auch schon einmal geführt haben. Zweifelsohne ist die semantische Bedeutung des Div-Elementes nicht so detailgenau, wie z.B. die des ul-Elementes, denn im Prinzip gruppiert letzteres auch andere Elemente. Nichtsdestotrotz hat das div-Element den Sinn mehrere Elemente zu gruppieren um diese mit CSS zu formatieren. Oft ist div aber unnötig, denn um ein <ul></ul> brauch kein div mehr rum. Mit css kann ich auch das ul direkt über Ids oder Klassen ansprechen. In Ausnahmefällen muss man bis dato auch in anderen Situationen, die nichts mit "Gruppierung" zu tun haben, auf div zugreifen, z.B. wenn man ein Bild, welches nur zur Zierde gedacht ist, einbinden möchte. Dies geschieht über CSS und wird dem leeren div als Backgroundimage zugefügt.
Hier noch mal die offizielle Definition und der offizielle Verwendungszweck von w3c:


Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with styles.


http://www.w3schools.com/tags/tag_div.asp

Na steht doch da, es definiert einen Bereich der Website und wird zum stylen dieses Bereichs verwendet. Wo liegt da nun die Semanktik?
Anders sieht es bei den neuen HTML5 section aus.

Vielleicht hast du mich nicht verstanden. Folgender Beispielcode:


HTML:

<ul id="navigation">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
...
</ul>


<div id="content">
<h2></h2>
<p></p>
<h3></h3>
<p></p>
...
</div>


<div class="clear"></div>


<ul id="footer">
<li>Copyright xy</li>
<li><a>impressum</a></li>
<li><a>kontakt</a></li>
...
</ul>

CSS:

#navigation{
float:left;
...
}


#content{
float:right;
}


.clear{
clear:both;
}


#footer{
...
}

Das hier verwendete div zum clearen ist komplett überflüssig, weil man die Styleangabe clear:both; auch dem nachfolgenden Element geben kann. In diesem Fall dem <ul> des footers mit der id "footer".
Jetzt klar, was ich gemeint habe?
Gibt es kein nachfolgendes Element (weggen z.B. Seitenende), so muss natürlich auf ein leeres Div zugegriffen werden (ich weiß es gibt da auch Alternativen, wo kein Markup anfällt.). Aber das ist die Ausnahme und war bei Jol nicht der Fall

Ich sagte doch, es kommt auf den Fall an. Du kannst nämlich einem Element nicht clear und float gleichzeitig zuweisen.
Also gibt es zwei Möglichkeiten 1) Ein leeres Element zu clearen nutzen 2) mit :after clearen, was aber nicht browserübergreifend einheitlich funzt.

Auch so nicht ganz richtig! Ja, das Alt-Attribut ist enorm wichtig, da es bei ausgeschalteten Bildern oder der Verwendung eines Vorlesebrowsers dennoch den Inhalt des Bildes vermittelt, was z.B. für Blinde äußerst wichtig ist. Allerdings beinhaltet das Alt-Attribut nicht mehr als eine inhaltsbeschreibende Überschrift. Weiterführende Erklärungen des Bildes kommen in das title-Attribut, was sowohl in Sachen Usability, als auch in Sachen Barrierefreiheit demnach eine Rolle spielt.
Nachzulesen hier: http://www.die-barrierefreie-website.de/umsetzung/grafiken.html
Weglassen könnte man das title Attribut nur, wenn man den erklärenden Text direkt unter das jeweilige Bild schreibt, entsprechende Tags gibt es meines Wissens nach auch in html5.

grüße

Naja, eigentlich sollte es in longdesc stehen, was aber kein Browser vernünftig unterstützt. Aber mal ehrlich, bei einem Foto von einem Porsche reicht es wenn ich in den alt schreib "Porsche GT4 Turbo", ich muss net noch in title schreiben das der weiß der Geier wieviel PS hat und 19" BBS Felgen.

Barrierefreiheit in allen Ehren, aber da wird auch viel Unfug erzählt/umgesetzt. Siehe accesskey und tabindex, beides in der Praxis für'n Arsch.