Design und Code bewerten (EDITOR)

[Memphis291]

Hallo liebe html.de Community

ich bin relativ neu hier und würde ganz gerne meine Seite mal richtig bewerten/beurteilen lassen.

Ich habe hier alles selber gecodet, das einzige was man unter Template fallen lassen kann, ist das Navigationsmenu. Das aber auch nur bedingt, da ich den Code aus einer Div basierenden Seite herausisoliert und in mein Frameset eingebunden habe. Es befindet sich eine Anmerkung des eigentlichen Coders dieses Scriptes im Navigationsseiten Quelltext, von daher ist das in Ordnung und auch so vom Coder gewollt.

Was ist das für eine Seite?

Die Seite gehört in die Kategorie Gamerwebseite. Genauere Lokalisation ist Flugsimulation/virtueller Kunstflug. Es ist kein typisches php template, die mag ich nicht, weil die irgendwie alle gleich aussehen. Es ist eine Seite basierend auf HTML und CSS. Die meisten grafischen Darstellungen sind imagmaps bzw. mit Rollovereffekten versehen.

Ich arbeite dort viel mit Grafiken, die meiner Seite und unserem Geschwader ausdruck verleihen sollen. Da ich z.Zt noch daran bin, einige Bilder zu verkleinern ist mir bewusst, das es zu Verzögerungen kommen kann, was auch Bestandteil des Testes ein soll...

also:

-wie sieht die Seite aus?
-evtl. Quelltext bewerten
-wie lange betragen die durchschnittlichen Übetragungszeiten für die Grafiken.

Danke

Gruß

Memphis

EDIT: Bitte für die Seite nur Firefox verwenden, der Internet Explorer hat grosse Schwierigkeiten damit, bestimmte Inhalte vernünftig darzustellen bzw. auszuführen. Wie z.B. das Navigationsmenu
/EDIT
Virtual Falcons

 

[Icy]

Als ich mir die Seite zuerst angeschaut habe, wollte ich sie ehrlich gesagt direkt wieder wegklicken.
Die Intro-Seite ist ja wohl unnötig, du solltest deine Seite so ausrichten, dass sie mit jeder Ansicht (ohne sie vorher auswählen zu müssen) läuft. Außerdem sollte sie für jeden Browser fehlerfrei darstellbar sein.

Das Design der Seite gefällt mir leider überhaupt nicht; das Design ist langweilig und abschreckend.
Die Frames sind, wie mittlerweile jeder wissen sollte, suchmaschinen- und benutzerunfreundlich.

Der Code ist Horror! Mir scheint, als hätte da ein HTML-Neuling in der ersten Stunde versucht, eine komplette Seite zu erstellen.
Beispiele:
- kein Doctype
- der title-Tag befindet sich außerhalb des head-Bereichs
- Fames
- nach abgeschlossenem html-Tag noch ein div mit Bildern (?!)
- Vermischung von HTML und Design (CSS)
- [Invalid] Markup Validation of http://www.virtual-falcons.com/big.html - W3C Markup Validator

Zudem ist die Seite extrem schwerfällig bei mir, sie lädt lang.
Besonders auf den Seiten mit Bildern/Screenshots, da du dort die Originalbilder (in voller Größer) einfach verkleinert darstellst, anstatt mit Thumbnails zu arbeiten. Damit schließt du DSL-Light-User und alles darunter (ISDN und Modem) völlig aus.

Da musst du unbedingt noch dran arbeiten!

MfG Icy

 

[FoXMorayn]

hab mir dein menü mal kurz angeschaut. so geht das nicht!
hab dieses menü eben zusammengeschustert (funktioniert soweit in jedem browser ;-) ):

<style>
div {
    height:50px;
    width:200px;
    overflow:hidden;
}
</style>

<script>
function resize(element)
{
    var divs = document.getElementsByTagName("div");
    for(var i=0; i<divs.length; i++)
    {
        if(divs[i]!=element)
            divs[i].style.height = "50px";
        else
            divs[i].style.height = "auto";
    }
    return;
}
</script>

<div onmouseover="resize(this)">
<img src="http://www.virtual-falcons.com/contents/images/nav_airbase1.png" width="200" height="50" />
menü1<br />
menü1<br />
menü1<br />
</div>

<div onmouseover="resize(this)">
<img src="http://www.virtual-falcons.com/contents/images/nav_airbase1.png" width="200" height="50" />
menü2<br />
menü2<br />
</div>

<div onmouseover="resize(this)">
<img src="http://www.virtual-falcons.com/contents/images/nav_airbase1.png" width="200" height="50" />
menü3<br />
menü3<br />
menü3<br />
</div>

<div onmouseover="resize(this)">
<img src="http://www.virtual-falcons.com/contents/images/nav_airbase1.png" width="200" height="50" />
menü4<br />
menü4<br />
menü4<br />
</div>

WICHTIG: in dieser navigation ist der <div> tag als menü definiert!
jedem div tag in dieser datei wird beim aufruf der funktion resize(element) eine höhe von 50px zugewiesen! (außer dem div, von dem sie per event aufgerufen wird)

bei dem rest ist icy mir zuvor gekommen ;-)

 

[Memphis291]

Da musst du unbedingt noch dran arbeiten!

Danke für das feedback....das ist genau der Grund, warum ich die mal begutachten lassen wollte. Dann werde ich mich da mal dran setzen und versuchen die angesprochenen Fehler zu beseitigen.

Das Design der Seite gefällt mir leider überhaupt nicht; das Design ist langweilig und abschreckend.
Die Frames sind, wie mittlerweile jeder wissen sollte, suchmaschinen- und benutzerunfreundlich.

Der Style der Seite mag wirklich etwas befremdlich wirken. Allerdings ist ein etwas extravaganter Style im großen und ganzen innerhalb der virt. Aerobatic Community fast nahezu üblich (in allenmöglichen Formen). Du musst Dich mal durch so einige Sites klicken. Ich denke Du hättest Da Deine helle Freude dran. Daher werde (kann) ich, was den Style angeht, nur wenig ändern.

Die Intro-Seite ist ja wohl unnötig, du solltest deine Seite so ausrichten, dass sie mit jeder Ansicht (ohne sie vorher auswählen zu müssen) läuft. Außerdem sollte sie für jeden Browser fehlerfrei darstellbar sein.

Es ist nunmal eine etwas sonderbare Form der Freizeitbeschäftigung. Dafür kommt man dabei viel herum und lernt viele Leute kennen (Weltweit). Fast alle Webauftritte sind innerhalb der Com etwas sonderbar und keineswegs mit den Webauftritten anderer Communities zu vergleichen. Von daher war es warscheinlich auch falsch von mir nach dem äusseren zu fragen, denn ich weiss, das HTML und CSS Profis auf ganz andere Sachen wert legen, z.B. den Aufbau des Codes.

@FoXMorayn

hab mir dein menü mal kurz angeschaut. so geht das nicht!
hab dieses menü eben zusammengeschustert (funktioniert soweit in jedem browser ):

Ich muss mich da wohl mal ganz kräftig bedanken. Nur durch Fehler kann man lernen, das schliest auch das definieren eines Quelltextes nicht aus..Den werde ich mir dann mal zu gemühte führen und versuchen mein Menu umzubasteln.

 

[FoXMorayn]

noch ne kleine anmerkung zum menü: du kannst noch das pseudoelement :hover dazu nehmen. das ist dann zwar doppelt gemoppelt, aber es geht dann auch, wenn javascript deaktiviert ist. nur der IE6 mag das genau so wenig, wie transparente png bilder. man benötig leider immernoch gif bilder, oder ein javascript, welches das problem behebt (google "ie png fix"). hier die css ergänzung:

 div:hover { height:auto; }

 

[tarik02]

Vorab: Vieles wurde zwar schon erwähnt eräwnänhe ich trotzdem nochmal:
1. Schlimmes Layout
2.FRAMES!!! ;ugl
3. Nervige auswahl
4. jemanden darauf hinzuweisen das man doch mit FF auf die Seite gehen soll ist ja wohl ne frechtheit?
5. LAAAAAAAAAAAAAAAAGE Ladezeiten
6. wegen Startseiten klick ich eigentlich sofort Seiten weg
7. (m.M.) Jedenfallls mich interessiert es gleich 0 ob die Grafiken mit PPS oder mit GIMP oder meinetwegen auch mit Paint erstellt worden ist
8. das Inhalt Fenster ist viiiieeeel zu klein (mal davon abgeshen das Frames soweiso ***** ist) Nach links und rechts scrollen zu müssen ist einfach nur nervig:sad:

So, nicht böse sein aber hier ist nur MEINE Meinung wiedergespiegelt :)

 

[Memphis291]

So, nicht böse sein aber hier ist nur MEINE Meinung wiedergespiegelt :)

Ich bin nicht böse...keine Sorge. Ich habe damit gerechnet, das das Layout zerissen wird, aber jede Com. hat nun mal ihren eigenen Stil. Und das Framesets nicht mehr up to day ist ist mir bewusst....Aber für meine bzw. die Zwecke meiner Com. genau das was ich brauche. Nach dem ersten Post habe ich mal einige Com sites Quelltexte angeschaut und da sind tatsächlich noch mehrere Framesets vorhanden...sobald sich das ändert versuche ich das auch anzupassen. Dafür müsste ich aber dann die gesamte Seite umschreiben. Zur Zeit jedoch erhalte ich durchweg positives Feedback aus der Com.

Mir kam es darauf an mal das wesentliche begutachten zu lassen und das ist nicht das layout sondern nun mal alles was Codebasiert ist. Von daher habe ich hier schon sehr viel "positives" (im Sinne von nützliches) Feedback erhalten.

 

[Memphis291]

So, dann beginne ich mal so allmählich mit dem Fixreport. Das wird natürlich alles dauern und ich bitte Euch weiterhin mir so viele Sachen zu sagen, wie Euch auffallen. Ich filtere dann das notwendige aus (was ich kurzfristig ändern kann).

Erst mal vieln Dank an alle bisher.

1. Fix. Screenshots Vorschau Bilder in thumbnails verwandelt. --> gefixt
2. Fix. beginnende Quellcode Korrektur (das wird ein laaaaanger Prozess...) --> In Arbeit
3. Fix. Screenshots Hauptbilder auf anzuzeigende Größe mit Grafikprogramm reduzieren, kein width/height. --> gefixt
4. Fix. Navigationsmenu optimieren --> gefixt Dank der Hilfe von FoxMorayn

 

[francesco]

Aber für meine bzw. die Zwecke meiner Com. genau das was ich brauche.

Wieso ist es genau das, was du brauchst? Eine Seite ohne Frames aufzuziehen hat im Endeffekt nur Vorteile.

sobald sich das ändert versuche ich das auch anzupassen.

Wieso nicht mit gutem Beispiel vorangehen und die Anderen von dem Irrweg abkommen lassen, alles mit Frames machen zu müssen.

Zur Zeit jedoch erhalte ich durchweg positives Feedback aus der Com.

Bezogen auf das Design? Bezogen auf den Code? Irgendwie kann ich mir beides nicht vorstellen.

Mir kam es darauf an mal das wesentliche begutachten zu lassen und das ist nicht das layout sondern nun mal alles was Codebasiert ist.

Erster Tipp: Frames raushauen.

 

[Memphis291]

Wieso ist es genau das, was du brauchst? Eine Seite ohne Frames aufzuziehen hat im Endeffekt nur Vorteile.



Wieso nicht mit gutem Beispiel vorangehen und die Anderen von dem Irrweg abkommen lassen, alles mit Frames machen zu müssen.



Bezogen auf das Design? Bezogen auf den Code? Irgendwie kann ich mir beides nicht vorstellen.



Erster Tipp: Frames raushauen.

Ich zitiere jetzt mal einfach alles.

ich kann es nicht oft genug sagen. IHR HABT JA ALLE RECHT...DAS STIMMT ALLES WAS IHR SAGT!!! Da will und kann ich gar nichts gegen halten. Doch innerhalb von bestimmten Kreisen, haben Internetseiten nunmal ein bestimmtes Aussehen.

Ich hatte mich gestern Abend im Teamspeak mit meinem Team und anderen Leuten über den Aufbau unserer Seite auseinandergesetzt. Es waren auch andere Leute dabei, die wir innerhalb der verschiedenen Teams kennen (Gäste). Als ich denen Beispiele aufgezeigt habe, wie man Seiten bauen Kann, oder Eurer Meinung nach bauen sollte, haben sie alle dagegengehalten.

Kunstflug oder Aerobatic oder wie immer Ihr das nennen wollt, ob nun in Wirklichkeit oder virtuell ist immer damit verbunden, das sie auffällig ist.
das gilt auch für die Webpräsenz. Da gibt es Intro seiten, schnick schnack hier und da und sounds und Bilder und und und. Das ist nunmal so. Viele Seiten beruhen auf cms systemen viele auf Frames, einige auch schon auf Divisions und irgendwann werde auch ich auf Divisions wechseln. Aber im Moment habe ich da nicht die Zeit zu, denn das würde bedeuten, das ich nahezu alle Seiten umschreiben muss und mir ein völlig neues Layout einfallen lassen muss.

Es wird passieren, das verspreche ich. Nun eben noch nicht gleich... Einverstanden?

 

[francesco]

Gibt ja keinen Grund gleich zu schreien. :-)

Divisions

Sowas gibt es nicht. Du meinst wohl die div-Elemente in HTML?

Alles das, was du ansprichst (Introseiten, Audio, Bilder, Auffälligkeit, etc.), hat überhaupt nichts (wirklich gaaar nichts) damit zu tun, ob du Frames benutzt oder keine Frames benutzt. Ich weiß wirklich nicht, wie ihr in eurer Community darauf kommt.

Aber du hast deinen Punkt klar gemacht und wir warten alle (mit Spannung) auf dein frameloses Ergebnis. :-)

 

[tarik02]

Einverstanden?

Einverstanden? natürlich Ist ja deine Seite!
Und DU hast ja gesagt das wir die Seite bewerten sollen :-D
Es kann uns ja eigenlich egal sein wie die Seite aussieht solange sie dir und deiner Com. gefällt^^ Aber wie gesagt du hast ja gesagt das wir sie bewerten sollen :mrgreen:

 

[Memphis291]

Gibt ja keinen Grund gleich zu schreien. :-)


Sowas gibt es nicht. Du meinst wohl die div-Elemente in HTML?

Alles das, was du ansprichst (Introseiten, Audio, Bilder, Auffälligkeit, etc.), hat überhaupt nichts (wirklich gaaar nichts) damit zu tun, ob du Frames benutzt oder keine Frames benutzt. Ich weiß wirklich nicht, wie ihr in eurer Community darauf kommt.

Aber du hast deinen Punkt klar gemacht und wir warten alle (mit Spannung) auf dein frameloses Ergebnis. :-)

hehe...glaub ich.

ich will mich ja gar nicht quer stellen, es gibt auch gute Seiten innerhalb der Com. Gut im Sinne von "den Anforderungen entsprechend". Aber halt alle mit viel gedöns drumherum.

Aber mal was anderes

Sowas gibt es nicht. Du meinst wohl die div-Elemente in HTML?

Da muss ich Dich leider enttäuschen:

Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.

zu finden hier: http://de.selfhtml.org/html/text/bereiche.htm#block

ich werde aber schon mal Anfangen, mir ein neues Layout einfallen zu lassen...jetzt habt Ihr mich soweit...toll....Danke...

 

[francesco]

Da muss ich Dich leider enttäuschen

Tatsächlich. Danke für die Berichtigung!

Hab ich so noch nie gehört. Man redet ja auch nicht ständig von unordered lists, sondern von ul-Elementen und nicht von paragraphs sondern von p-Elementen. Aber das div für division steht wusste ich wirklich nicht. Das ist der Beweis: Man lernt nie aus.

 

[Memphis291]

Bitte nicht falsch verstehen...mir fällt gerade auf, das das nicht der richtige Ort war..PN wäre besser gewesen...sorry...

Eine Frage.

Sind Tabellen noch eine gültige ressource um Content darzustellen, oder wird das so auch nicht mehr verwendet...

Gruß

Memphis

 

[_Thor_]

Tabellen werden nur für das Auszeichnen von tabellarischen Daten verwendet. Inhalt wird je nach seiner Bedeutung ausgezeichnet. Listen als <ul>, <ol> oder <dl>, Text als <p>, Menüs als <ul>, Adressen als <address>, wichtiges als <em>, sehr wichtiges als <strong>...

 

[FoXMorayn]

wie ist "tabellarischer inhalt" definiert ?

texte oder andere elemente mit alternativem text (für nicht visuelle browser), die einander zugeordnet sind ?

drüfen bilder, videos oder sogar formulare in eine tabelle ?
vom der reinen syntax her dürfen alle bock- und inline-elemente in ein <td> element!
so steht es auf selfhtml. #pcdata (normaler text) wurde dort wohl vergessen ;-)

aufjedenfall ist eine tabelle keine methode um elemente NUR visuel zu positionieren!

wann die zuordung von elementen mit einer tabelle, im sinne von barrierefreiheit, angebracht ist, kann wohl nur ein praktischer individueller test zeigen. am ende hängt es davon ab, wie gut alternative browser tabellen darstellen können.

 

[Memphis291]

Also ich habe mich da jetzt bei selfhtml und anderen ressourcen noch mal selber schlau gemacht. Dort heisst es (wie ich hier auch schon mal gelesen habe), das Tabellen nicht zum layouten genutzt werden sollen, was nicht bedeutet, das es grundlegen falsch ist. Es ist wohl halt nur besser, da mit boxen zu arbeiten. Aber da das Internet noch mit zu vielen Seiten (einschlieslich meiner) mit dieser Variante gelayoutet wurden, ist die Korrektur nur ein langsamer Prozess.

Ich versuche mich z.Zt. übrigens wirklich an einer Framelosen und div basierten Seite...mal sehen wo das endet....

 

[Icy]

Ich versuche mich z.Zt. übrigens wirklich an einer Framelosen und div basierten Seite...mal sehen wo das endet....

Es ist noch kein Meister vom Himmel gefallen. Ich finde es auf jeden Fall schonmal positiv, dass du dir Gedanken darüber machst und dich auch selbstständig über moderne Praktiken informierst.
Wenn du irgendwo hängen bleibst oder etwas nicht verstehst, helfen wir dir hier natürlich weiter ;)

MfG Icy

 

[francesco]

wie ist "tabellarischer inhalt" definiert ?

Für mich sind tabellarische Daten Dinge, die ich auch in eine Excel-Tabelle schreiben würde, also Daten, die eine logische Beziehung zueinander haben. Das können theoretisch auch Bilder sein, aber in eine Excel-Tabelle füge ich persönlich kein Bild und kein Video ein. Ein Beispiel für die richtige Verwendung einer Tabelle gibt's hier.

vom der reinen syntax her dürfen alle bock- und inline-elemente in ein <td> element!

Es geht nicht um die reine Syntax, sondern darum, was tabellarische Daten sind und was nicht.