Nun, ja und nein. Player existieren im Internet wie Sand am Meer, aber gamenoise – so der Name der neusten Entwicklung auf diesem Gebiet – ist anders.

Zum einen bietet gamenoise einige Funktionen die kein oder kaum ein Music-Player bestitzt. Zu nennen wäre zum Beispiel eine Ingame-Oberfläche. Das heißt, es kann ein Overlay in Videospielen eingeblendet werden, welches den aktuell abspielenden Titel und einige weiteren Informationen anzeigt. Weiterhin gibt es globale Hotkeys – Tastenbefehle lassen sich von jeder Anwendung im System aus nutzen -; ein System, mit dem man die grafische Oberfläche des Players ändern kann; ein modernes Standarddesign und vieles mehr.

Zum anderen ist gamenoise komplett mit der Programmiersprache C# und dem Framework WPF entwickelt worden. Ein Player auf dieser Basis ist annähernd eine Innovation, da bis jetzt kaum ein anderer Music-Player existiert, welcher Microsofts neuste Oberflächentechnologie verwendet.

Diese Tatsachen macht gamenoise nicht nur für Design-Freaks attraktiv. Auch alle Anwender, die eine Abwechslung unter den üblichen Music-Playern suchen, werden ihre Freude damit haben.

Als kleinen Bonus wird ein kostenloses Lied gleich mitgeliefert. Hier gehts zur gamenoise-website

Im Grunde genommen, gibt es nur eine mögliche Art von Inhalt, die dafür sorgt, dass die Seite Aufmerksamkeit erregt. Die Sprache ist hier von Texten. Nur diese werden dafür sorgen, dass wissbegierige Menschen auf die von ihnen erstellte Seite stoßen, wenn sie in das Textfeld einer Suchmaschine Stichwörter eingeben, die Wörtern auf ihrer Seite ähneln. Auch Bilder können dazu führen, aber der prozentuale Anteil dessen ist nahezu vernachlässigbar klein. Man muss jedoch beachten, dass das nicht unbedingt für alle Arten von Internetseiten gilt, denn ein Grafiker wird wohl kaum nach Texten suchen, wenn er Designs oder Vorlagen benötigt. Nachfolgend gehe ich auf die unterschiedlichen Typen von Inhalt ein.

Wie ich bereits zuvor sagte, ist viel Text meistens von Vorteil, da dies auch ein wichtiges Kriterium für Suchmaschinen ist. Je mehr Wörter und je öfter diese auf einer Seite auftauchen, desto höher ist die Chance, dass ihre Seite gefunden wird, wobei da noch sehr viele weitere Aspekte eine Rolle spielen, die aber nichts mit diesem Thema gemein haben. Es gilt der Zielgruppe gerecht zu schreiben. Fremdwörter und Fachausdrücke mögen vielleicht seriös und gebildet klingen, führen aber dazu, dass der Text für den Großteil der Besucher unleserlich wird. Außerdem werden Fremdwörter in Suchmaschinen wesentlich seltener eingegeben, als alltägliche Wörter, was zu beachten ist, sofern man kein Fremdwörterbuch erstellen möchte. Sätze sollten möglichst kurz gehalten werden, denn das fördert ebenfalls die Leserlichkeit, genauso wie eine für die Augen angenehme Schriftart und -farbe. Dunkle Schrift auf hellem Hintergrund ist zu bevorzugen und Typographie ist das Stichwort.

Außerdem kommt es sehr stark darauf an, wie man den Text aufbaut, was weniger ausschlaggebend für Suchmaschinen ist, sondern der Übersichtlichkeit und leichten Informationsbeschaffung eines Besuchers dienen soll. Hierbei sollte man sich an seine Schulzeit zurück erinnern, in der man gelernt haben sollte, dass man sich im Voraus Gedanken zur Gliederung bzw. dem äußerlichen und inhaltlichen Aufbau eines Textes macht. „Was ist der Hauptinformationsgehalt der Seite? Erstelle ich daraus eine allgemeine Einleitung?“ Dies ist in jedem Fall förderlich, da der Besucher sofort weiß, worauf er sich einlässt, wenn er einen langen Text vor sich sieht. Einzelne Abschnitte sollten bestimmte Segmente des Textes kennzeichnen. Bestenfalls verlinkt man diese in einer kleinen Inhaltsverzeichnis, um lästiges Suchen in einem Text zu verhindern. Danach sollte man sich überlegen in welcher Reihenfolge man den Text aufbaut. Ein Besucher der Seite, der nach einer einzigen kleinen Information sucht, wird kaum begeistert sein, dass er diese erst ganz am Ende eines langen Textes finden wird, obwohl ihn der Rest des Textes überhaupt nicht interessiert. Dieses System könnte man auch gewollt einsetzen, um den Leser somit zu „zwingen“ den gesamten Text zu lesen oder aus andere Elemente der Seite aufmerksam zu werden. Der Schuss könnte aber auch nach hinten losgehen. Man sollte einen “gesundes” Maß finden, um die Nutzer zu halten, sie aber nicht zu langweilen.

Graphiken sind ein Element, was gerne verwendet wird. Hier gilt jedoch: So wenig wie möglich, so viel wie notwendig. Zu viele Graphiken lenken vom essentiellen Bestandteil einer Seite ab und können beim Leser den Eindruck erwecken, dass mit visuellen Mitteln von Defiziten im inhaltlichen Bereich abgelenkt werden soll. Ein ansprechendes Design, ist jedoch schon fast Pflicht. Es dient aber lediglich als Blickfang. Daraufhin sollte der Interessent ohne Probleme seine Aufmerksamkeit auf den Inhalt lenken können.

Es kann wieder nach belieben erweitert und verändert werden.
Das Layout ist aufgeteilt in eine HTML-, und eine CSS-Datei. Die CSS-Datei ist kommentiert, damit man sich zurecht findet.

Das Layout kann man sich unter Weblayouts anschauen und herunterladen.

Sobald man aber weiter gehen möchte und seine Seite darauf auslegt auch fremde Nutzer anzulocken, wird es kompliziert und sehr zeitintensiv. Man hat dann nicht nur darauf zu achten, dass sich die Leute wohl fühlen und die Seite erreichbar ist, sondern, dass jegliche Inhalte “funktionieren”, was bedeutet, dass sie gesetzmäßig und informativ sein müssen.

Auch Suchmaschinen bewerten Webseiten nach deren Inhalten. Dabei gibt es drei einfache Faktoren, die man beachten sollte: “viel”, “übersichtlich” und “gut”. Selbstverständlich sollten diese auch zielgruppengerecht sein. Das bedeutet, dass man sich, bevor man die Seite erstellt, Gedanken machen muss, welche Personen man ansprechen möchte und welche Eigenschaften diese haben, denn schließlich will der Nutzer möglichst schnell und komfortabel an sein Ziel gelangen. Dies setzt natürlich Vorkenntnisse zum Nutzer voraus.

Wie zuvor bereits angesprochen, muss man den Inhalt übersichtlich strukturieren. Dabei spielt auch das Design eine Rolle, da dieses darüber entscheidet, wie man die Seite aufbaut. Jedes Element muss nach reiflicher Überlegung dort positioniert werden, wo es am meisten Sinn macht und der Nutzer auch darauf aufmerksam wird. So gilt es hier in gewisser Weise auch Psychologie anzuwenden. Es gibt hier zwei mögliche Varianten:

1. Man kann die Seite so aufbauen, dass der Nutzer ganz oben einige informative Inhalte findet, auf die erst einmal einige weniger interessante Themen folgen, die aber auch beachtet werden sollen, um die Seite und den Informationsgehalt derer in ihrem Gesamtbild darzustellen. Das könnte zur Folge haben, dass der Besucher enttäuscht die Seite verlässt oder weiter unten nach weiteren Infos sucht und dabei einige andere, für ihn weniger interessante Details, mitnimmt, was auch unser Ziel wäre.

2. Die zweite Möglichkeit besteht aus dem Bestreben, möglichst viel sehr guten und für den Nutzer lohnenswerten Inhalt auf den ersten Blick, also an oberster Position der Webseite, abzulegen. Die Möglichkeiten, die sich daraus ergeben, sind wieder zwei an der Zahl. In erstem Fall verlässt der Nutzer bereits nach kurzer Zeit die Seite (eventuell mit positivem Eindruck darüber), da er alle Infos, die er will, gleich zu Beginn findet. Andererseits wäre es auch möglich, dass er enthusiastisch nach weiteren solchen guten Inhalten auf der Seite sucht und somit die ganze Vielfalt erlebt.

Welche der beiden Varianten man nun wählt, sollte man davon abhängig machen, welche eher für die angestrebte Zielgruppe geeignet ist. Man kann auch eine Mischung aus beiden Varianten umsetzen. Allerdings gibt es auch hier kein Patentrezept. Auf jeden Fall sollte man vorher ein “Gerüst bauen”, das die wichtigsten Punkte der Seite markiert, denn darauf wird das Design aufgebaut. Der Rest der Seite kann dann immer noch im Nachhinein integriert werden.

Abschließend kann man sagen, dass fast jede Seite ihre Existenzberechtigung besitzt, auch wenn sie nicht dermaßen den Komfort bietet, den sie bieten könnte. Letztendlich muss die Seite nicht nur dem Nutzer, sondern auch den Zuständigen gefallen, denn Enthusiasmus bei den Beschäftigten wirkt sich auch auf deren Arbeitsweise aus.

Mit CSS ist es relativ einfach einen Hover-Effekt mit Buttons wie dem Oberen zu erzeugen. Alles was man braucht ist ein Bild, welches aus den beiden Grafiken des Buttons besteht. Also einmal die Grafik des Buttons wenn er nicht gehovert ist und einmal die Grafik des Buttons beim drüberfahren mit der Maus (hovern).

Bei dem Oberen Beispiel würde das wie folgt aussehen:

Da der Button ja ein Link sein soll, müssen wir erst mal ein Link definieren, und am besten geben wir ihm gleich schon eine CSS-Klasse.

<a class="buttonhover" href="DaWoManHinSoll"></a>

Der Rest ist jetzt reines CSS. Da wir ja nur die Hälfte der Grafik für den Button anzeigen wollen, geben wir dem Link eine feste Höhe und Breite. Das ganze geht natürlich nur in Verbindung mit display:block;. Als Breite geben wir die Breite der Grafik an und als Höhe die halbe Höhe der Grafik. Das ganze sollte wie folgt aussehen:

a.buttonhover {
  display:block;
  width:80px;
  height:30px;
}

Zu einem funktionstüchtigen Button fehlt dem Link jetzt noch die Grafik. Deshalb geben wir dem Link eine Hintergrundgrafik (unsere Grafikdatei mit den zwei Buttons), welche am oberen linken Rand positioniert ist:

a.buttonhover {
  display:block;
  width:80px;
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat top left;
}

Dadurch, dass die Grafik am oberen Rand positioniert ist und der Link nur die halbe Höhe der Grafik besitzt, wird auch nur die obere Hälfte der Grafik angezeigt. Nun fehlt nur noch der Hover-Effekt. Dazu bedienen wir uns einfach der Hover-Eigenschaft des Links. Und zwar brauchen wir nur die Position der Hintergrundgrafik zu ändern:

a.buttonhover:hover {
  display:block;
  width:80px;
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat bottom left;
}

Die Änderung der Position von top zu bottom bewirkt, dass die Grafik nun nicht mehr am oberen Rand des Links positioniert wird, sondern am unteren Rand. Damit wird nun der untere Teil der Grafik angezeigt und wir haben einen schönen Hover-Effekt.

Natürlich lassen sich die Buttons in der Grafik auch nebeneinander anordnen. Beim Hover-Effekt ist dann lediglich die Grafik vom linkeren Rand zum rechten Rand zu verschieben. Also:

a.buttonhover {
  display:block;
  width:80px;
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat top left;
}

a.buttonhover:hover {
  display:block;
  width:80px;
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat bottom right;
}

Wieso ohne Nachladen?

Dadurch das die Grafik des Buttons schon komplett im Speicher des Browser liegt, muss diese beim Hover-Effekt nicht neu geladen werden. Es genügt lediglich eine Verschiebung der Grafik, und dies benötigt keine Ladezeit.

Hier die finale Version als zip-Archiv

Hier handelt es sich um ein 2 Spalten Layout mit Header und 2 Footern, es kann jedoch nach belieben erweitert und verändert werden.
Das Layout ist aufgeteilt in eine HTML-, und eine CSS-Datei. Die CSS-Datei ist kommentiert, damit man sich zurecht findet.

Das Layout kann man sich unter Weblayouts anschauen und herunterladen.

Hier zunächst ein Beispiel von dem was wir erreichen wollen:

So soll es aussehen

Erst mal die html-Datei. Diese sieht folgendermaßen aus:

<html>
  <head>
    <title>Webseite horizontal und vertikal zentrieren</title>
    <style type="text/css">
      ...
    </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

Horizontale Zentrierung

Beginnen wir zunächst mit der horzintalen Zentrierung. Um eine Ebene oder auch div horizontal zu zentrieren reicht schon ein einfaches

code:

margin:0 auto;

Beispiel 1

In diesem Beispiel sieht man einfaches div mit festen Breite und Höhe, welches horizontal zentriert ist.

Das sieht schon sehr schön aus, wäre da nicht der Internet Explorer 6. Dieser interpretiert den Befehl margin:0 auto; nicht. Abhilfe schafft hier

text-align:center;

Dieser Befehl wird einfach dem body-Element mitgegeben. Obwohl dieser Befehl nicht zur Ausrichtung von divs gedacht ist, funktioniert dieser beim IE6.

Damit der Text im div nicht zentriert bleibt (Eigentlich die Funktion von text-align), müssen wir dem div noch ein

text-align:left;

mitgeben.

Beispiel 2 klappt jetzt auch im IE6.

Zusammengefasst sieht der CSS Style jetzt so aus:

body {
  text-align:center;
}

div {
  margin:0 auto;
  text-align:left;
  width:400px;
  height:300px;
  background-color:red;
}

Vertikale und horizontale Zentrierung

Als nächstes wollen wir uns mit der vertikalen Zentrierung beschäftigen.

Dies ist nicht ganz so einfach wie die horizontale Zentrierung. Als Erstes müssen wir das div absolut Positionieren:

position:absolute;

Diese Eigenschaft positioniert das div relativ zu seinem Elternelement, welches ebenfalls positioniert sein muss. In unserem Fall ist das Elternelement das body-Element.

Beispiel 3

Durch die die Eigenschaften

left:50%;
top:50%;

verschieben wir das div um 50% des Browserfensters nach unten und nach rechts.

hier anschauen.