• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

alex-haala.de Blog

A

ale200sx

Neues Mitglied
Hi zusammen.
Wollte mal meine Website checken lassen.
Alex Haala | Home
Das ist meine erste Seite und ich bin noch nicht so erfahren darum kann ich nicht direkt alle Standarts was berriere freiheit und so betrifft einhalten.
Ich hab grad gemerkt das die Site probleme im IE versursacht. Kann mir da jemand ne hilfestellung geben.
Werde auf der Seite nur Blogen und meine Shootings posten. Würde aber noch gerne das jeder Topic erstmal nur mit ein paar Zeilen angezeigt wird damit die Index nicht so lange zum laden braucht.
Es sind noch so viele Dinge offen die ich noch ändern will....aber ich komme nicht dazu und dann fehlt mir das wissen dies umzusetzen.
Naja, bin offen für Kritik und Meinungen.

Greetz Alex
 
Werbung:
ach du sch****
Ich glaub da muss einiges geändert werden. :oops:
Das Problem ist das ich mir alles selber beigebracht habe....das macht es um einiges schwerer und keiner kann helfen.

Ja das mit der Startseite stimmt. Hatte ich ja schon geschrieben das ich das kürzen will. Muss nur erstmal alles Datenbank basiert machen und dann nur ein paar Zeilen auslesen lassen. Noch steht alles in php Seiten.

Oje. Ich weiß nicht wo ich anfangen soll.

Ich verstehe die fehler nicht. Warum sagt er das </> zum schließen falsch ist oder <h2> nicht erlaubt ist?
 
Zuletzt bearbeitet:
Werbung:
Beginn am besten beim ersten Fehler, dann neu validieren und Du hast nur noch 1/4 so viele Fehler, denn es sind meistens Folgefehler.

Design finde ich sehr hübsch. Ich würde den Abstand von der Navigation zum Inhalt noch etwas vergrößern, auch damit am Rand nicht so viel grau ist.

Zum Code sage ich nichts... außer: UNTERIRDISCHE DIV-SUPPE!
 
DerMitSkill schrieb:
Zum Code sage ich nichts... außer: UNTERIRDISCHE DIV-SUPPE!
Zum Vergrößern anklicken....

und nicht nur das ...
leider hast du bis dato den sinn und weck von html noch nicht verstanden.
diese auszeichnungssprache dient lediglich dazu, wie der name schon sagt, den inhalt auszuzeichen. und zwar immer mit den entsprechenden tags. das nennt sich dann semantik. deine semantik ist grausam.
bsp.
der tag <p> hat die semantische bedeutung "textabsatz", will heißen, dass man mit ihm textabsätze auszeichnest. du verwendest ihn allerdings dazu, <a> und <img ../> tags (vermutlich ein menü) darin unterzubringen.
und das ist völlig falsch.
davon gibt es übrigens zahlreiche beispiele.
also überprüfe einmal deinen code auf semantische richtigkeit. das hat nichts mit informatik, sondern viel mehr etwas mit deutsch zu tun. und das beherrscht wohl zu einem gewissen grad jeder ^^

das design finde ich gelungen und recht passend für dieses thema.
allerdings ist die startseite, wie schon erwähnt viel zu lang.
das liegt einerseits an den vielen großen bildern und andererseits an den zu langen artikeln.
folgender vorschlag:
anstelle der großen bilder würde ich thumbnails verwenden, also kleine vorschau bilder. mit js ließe sich dann eine hübsche slideshow erstellen (muss aber nicht sein). es reicht auch, dass bei klick auf die vorschau, das originalbild einzeln in großer form gezeigt wird.

vorteil: durch diese thumbnails hat der nutzer eine viel größere übersicht und kann nach belieben unter den bildern auswählen.

zum text. den würde ich ebenfals wie oben schon angesprochen nach 2 vorschausätzen abkürzen und dann ein "mehr..." link setzen, über den man dann zum restlichen text kommt.

ganz andere frage. ich habe mir jetzt nicht alles durchgelesen, aber meinst du diese infos gehören auf eine startseite?
ich meine du hast ja durch deine navigation viele möglichkeiten.
ich halte meine startseiten immer recht übersichtlich und kompackt, vll. mit nem lustigen satz, einem bild von mir, etc.
alles andere kommt dann in kategorien. z.B. "Neuigkeiten", "über mich", "fotogallerie" ... dementsprechend solltest du dir evtl. auch überlegen, den inhalt von deiner startseite auf deine komplette homepage zu verteilen, oder wenigstens zu minimieren ;-P

grüße hokage
 
Danke für die Kritik. Also zum Code wirrwarr muss ich wirklich sagen das ich mir wirklich alles selber bei gebracht habe daher kann halt keiner außer wie hier im Forum sagen was ich falsch mache. Das erschwert mir die ganze Programmierung (wenn man das hier in dem fall noch so nennen darf) ungemein.
Da ich keine Ausbildung im IT bereich gemacht habe und auch keine Vorkenntnisse hatte musste ich mir alles aus den Fingern saugen.
Ich weiß das da verdammt viele fehler drin sind. Aber wenn ich das nicht Poste wird mir keine sagen was ich falsch mache. Hoffe ihr versteht das.

Mal was zu der semantik. Ich habe mal den Quelltext mehrerer Seiten gecheckt und muss sagen, dass in <p> images sowie links enthalten sind. Also bin ich entweder nicht der einzige der die fehler macht....oder der fehler kann nicht so schwerwiegend sein das ihn jeder einfach ignoriert.
Ich wenn überhaupt den fehler gemacht den kompletten Text in ein paragraph zu setzen anstatt ihn bei jedem absatz wieder zu schließen und ein neuen zu beginnen. Ist zwar blöd aber meiner meinung nach kein schwer wiegender fehler in der Codierung.
Was ich nicht verstehe ist, dass der Validator immer den </head> falsch markiert. Er sagt das ich den falsch schließe. Oder versteh ich da was falsch?
Jetzt zu den divs? Wie kann man das anders realisieren. Mit Tabellen finde ich es noch unübersichtlicher und doppelt so viel code ist es auch. Ich kenne keine andere weise das zu realisieren. Ein Box in der sich ein Text/Fotos und mehrere untergeordnerte Boxen befindet wird meines wissens als div deklariert, oder liege ich da falsch. Oder sollte ich alles mit <p> deklarieren. Klärt mich auf.

Validator schrieb:
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Zum Vergrößern anklicken....

Was ist denn daran falsch. <head> bla bla bla </head> ist doch nicht falsch oder.

Also verbessern werd ich folgendes

-fehler beseitigen

-preview der topics
-per link text vergrößern

die Fotos werde ich so lassen. Gefällt mir so. Die werden beim klicken auf ..weiterlesen.. dann aber erst gezeigt.

-ich will die Topics in Themen gliedern wie man am Rand schon sehen kann.
Würde gerne die Anzahl der Topics in den Bereichen am Rand anzeigen lassen.

-evtl die NAVI überarbeiten/erweitern
 
Zuletzt bearbeitet:
Werbung:
So, dann will ich dir mal ein bisschen helfen:

Du verwendest - laut dem Dokumenttyp - XHTML. Also solltest du den Code auch entsprechend schreiben.
Als erstes solltest du alle leeren Elemente (also die, die nicht ein schließendes Tag haben) nach den Regeln von XHTML schließen.

HTML: 
<img src="" alt="">
<br>
wird also z.B. zu:

HTML: 
<img src="" alt="" />
<br />
Wichtig: Das Leerzeichen vor dem Schrägstrich ist gewollt!

Wenn du dir nun mal nur einen kleinen Teil deines Quellcodes ansiehst, wirst du schnell erkennen, wie so viele Fehler beim Validieren entstehen konnten:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META NAME="DISTRIBUTION" CONTENT="GLOBAL">
<META NAME="author" CONTENT="Alex Haala">
<META NAME="copyright" CONTENT="Copyright (c) 2009 Alex Haala">
<META NAME="language" CONTENT="de">
<META NAME="description" CONTENT="Alex Haala, Web, Photografy, Video, Skate, Snow, Surf, Blog, Nissan, 200sx, S13, ">
<META NAME="keywords" CONTENT="Alex Haala, Web, Photografy, Video, Skate, Snow, Surf, Blog, Nissan, 200sx, S13, ">
<META NAME="robots" CONTENT="INDEX, FOLLOW">
<META NAME="revisit-after" CONTENT="1 DAYS">
<META NAME="rating" CONTENT="GENERAL">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="icon.ico" type="text/css" media="screen">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Alex Haala | Home</title>
</head>
<body>
Im <head>-Bereich hast du so gut wie nie die leeren Elemente geschlossen - das soltest du schnell nachholen.

Im selben Code-Abschnitt sind noch einige weitere Fehler zu entdecken, die leicht zu vermeiden sind:
In XHTML musst du alle Element-Namen und deren Attribute klein schreiben, also:

Nicht so:

HTML: 
<P CLASS="test"> ... </P>
<TABLE>
...
</TABLE>
Sondern so:

HTML: 
<p class="test"> ... </p>
<table>
...
</table>
Wenn du dir nun deinen Code im <head>-Bereich ansiehst, wirst du feststellen, dass du diese Regel hier nicht beachtet hast.

Von deiner Startseite würde der korigierte Code des <head>-Bereiches so aussehen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="DISTRIBUTION" content="GLOBAL" />
<meta name="author" content="Alex Haala" />
<meta name="copyright" content="Copyright (c) 2009 Alex Haala" />
<meta name="language" content="de" />
<meta name="description" content="Alex Haala, Web, Photografy, Video, Skate, Snow, Surf, Blog, Nissan, 200sx, S13, " />
<meta name="keywords" content="Alex Haala, Web, Photografy, Video, Skate, Snow, Surf, Blog, Nissan, 200sx, S13, " />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="revisit-after" content="1 DAYS" />
<meta name="rating" content="GENERAL" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="icon.ico" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Alex Haala | Home</title>
</head>
<body>
Ändere das einfach einmal in deinem Code und schau dir dann noch einmal die Seite mit den Fehlern an:

[Invalid] Markup Validation of http://www.alex-haala.de/ - W3C Markup Validator

Die Fehleranzahl wird merklich zurück gegangen sein.

Und so musst du nun mit deiner ganzen Seite umgehen:
Schritt für Schritt alle Fehler entfernen und dann - wenn dein Code fehlerfrei ist - die Semantik überarbeiten.
Das ist sicher ein langer Weg - aber er lohnt sich!
Und wenn du mal Probleme hast, weißst du ja, wo du Hilfe bekommen kannst ;)
 
super danke. Genau das hab ich nämlich nicht verstanden. Konnte den fehler nicht sehen weil ich nicht wusste das alles klein geschrieben und sofort geschlossen werden muss.

DANKE:razz:
 
kommen wir nochmal zur semantik zurück ;-)

nein, prinzipiell ist es natürlich nicht falsch links und grsfiken in einen fließtext zu integrieren, beides sind inlineelemente und p ist ein blockelement. aber validität hat nichts mit semantik zu tun. denn ich frage mich, ob du da überhaupt einen fließtext hast ;-)

sieht mir nicht danach aus.
also überleg dir, was du da darstellen willst. das kannst nur du wissen ;-)
wenn es ein menu ist dann nimm ul. ist es ein textabsatz, dann nimm p. sind es mehrere elemente die du gruppieren willst, dann nimm div.

und nochmal sauberer code ist nur die eine seite. semantische richtigkeit ist die andere, und diese wird leider sehr häufig vernachlässigt ;-)

grüße hokage
 
Werbung:
Der erste Fehler hat die Ursache, dass du in Zeile 27 das <link>-Element zwischen den beiden <body>-Tags verwendet hast. Das gehört jedoch in den <head>-Bereich! Der gleiche Fehler kommt in Zeile 60 und 111 vor.
 
Oh ich seh jetzt auch den fehler. Den konnte ich im Editor nicht erkennen da ich ja php´s include. Ich habe in jeder php die css verlinkt damit ich den style erkenne.
Jetzt fügt der natürlich bei jedem Topic die CSS mit ein. Aber hab es schon behoben.

Also was sagt ihr zum Design. Ich finde es passend. Sollte richtung Surf style gehen da ich ja auch in der richtung blogge. Abgesehen von fotografie und meinem Auto.
Aber ich finde es passt sehr gut zu mir!
 
Werbung:
ich glaube ich hab dazu schonmal was gesagt, aber ich wiederhole mich gerne nochmal :p

ich finde das design wirklich sehr gelungen und auch sehr ansprechend ;-)
du hast recht. das thema dieses blogs ist damit gut dargestellt.

allerdings muss ich sagen, dass deine semantik immer noch nicht das wahre ist ;-)

jegliche art von navigation zeichnet mn als liste aus. weil du listest da ja mehrere links auf.
also schreibst du deine navi so:

Code: 
<ul id="navi">
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   ...
</ul>

das war vll. etwas widersprüchlich, aber du kannst dir merken, dass du bei allen arten von navigationen <ul> verwendest.

dann verwendest du <br/> um deine links untereinander zu bekommen. das ist allerdings design und somit geschieht das mit css. allerdings ist das hier schon automatisch der fall, da li bekanntlich blockelemente sind, die von alleine einen zeilenumbruch erzeugen ;-)

div verwendest du z.B. um deine komlette seite zu gruppieren und anschließend zu positionieren. oder um bestimmte inhalte, zu gruppieren. häufig ist div allerdings überflüssig, weil du eben ein ul auch formatieren kannst und somit kein div mehr brauchst ;-)

grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben