made in Germany

[zum Inhalt]

stehendes K drehendes K

Barrieren ? klicken Sie für ein barrierefreies Farb/Kontrast Verhältnis oben auf das drehende K

Normalansicht ? klicken Sie für die Normalansicht oben auf das Kaheti Logo

Startseite >> sie sind hier:  Webdesign, Usability, Layout und Grafiken

grafik:Webdesign

Die Entstehungsgeschichte dieser Webseite in vielen Bildern

info zum Webdesign

Für denjenigen, den es interessiert möchte ich einmal ein paar Dinge erklären die das Design dieser Webseite betreffen. Es handelt sich hierbei um ein Webdesign, welches die Eigenschaft hat sich verschiedenen Monitorauflösungen automatisch so anzupassen , das exakt IMMER das vollständige Design der Webseite den kompletten Bildschirminhalt auffüllt. Hierfür ist die Webseite in vier Bereiche unterschiedlicher Grösse unterteilt, die sich mit Ausnahme des oberen linken Quadrats automatisch proportional an die jeweils eingestellte Bildschirmgrösse anpassen. Die Bereiche sind also in der Lage in der Höhe und Breite zu variieren. Stellen Sie Ihren Browser auf Fensterdarstellung und verändern sie durch durch das Ziehen an einer beliebigen Ecke des Browsers dessen Fenstergrösse. Bis zu gewissen Graden , wird dieses Design ganz automatisch "mitwandern"

Mit CSS3 werden die Ecken zukünftig rund...wenn gewünscht.

info zum Webdesign

Kaheti.de verwendet zur grafischen Untermalung des bestehenden Design bereits CSS3 Effekte wie z.B. wie hier zu sehen runde Ecken, aber auch Schatteneffekte für Texte und Inhaltsboxen. Solche grafischen Spielereien werden jedoch nur mit aktuellen Browsern dargestellt. Bei älteren Browsern wie z.B. der hier gezeigte Internet-Explorer 7 und auch 8 bleiben solche Effekte leider aus.

CSS Navigationsmenü mit Akkordeoneffekt

info zum Webdesign

Um bei dieser Webseite im Hinblick auf ein verwendetes Liquid-Design ebenfalls auch die Navigation automatisch anpassbar zu machen, bedurfte es einiger "spezieller" CSS-Tricks mit denen typisches Tabellenverhalten immitiert werden konnte. Mittels einer erfindungsreichen Verschachtelungstechnik ist es gelungen das sich ein vertikales Navigationsmenü automatisch komplett der Browsergrösse anpassen lässt, wenn man entweder per Hand das Browserfenster verkleinert/vergrößert oder man unterschiedliche Monitorauflösungen zugrunde legt. Die Scalierbarkeit hat natürlich dadurch bedingt das es irgendwann in den absoluten Verzerrungsbereich gelangt, seine Grenzen. Bei herkömmlichen für gewöhnlich verwendete Monitorauflösungen (1024x768 bis 1280x1024 und darüber) sollte sich dieses Menü allerdings ohne Probleme automatisch anpassen.

Bereiche unterteilt ... das Design ansich:

info zum Webdesign

Das Design ansich: ich hatte mir überlegt das man verschiedene Bereiche einer Webseite nicht immer zwingend zusammenhängend darstellen muß und das man für ganz unterschiedliche Bereiche wie beispielsweise die Navigation oder den Contentbereich Abgrenzungen schaffen kann um damit etwas zur Übersichtlichkeit der Webseite beizutragen. Dies habe ich dann auch umgesetzt. Die hier verwendete Technik ist bei Verwendung in einzelnen privaten Homepages eher selten anzutreffen und deswegen für den ein oder anderen Besucher sicherlich auch etwas "gewöhnungsbedürftig". Von Internetseiten erwartet "man" das sie sich in einer gewohnten Grundstruktur anbieten wie z.B. mit der Möglichkeit die Seite horizontal komplett scrollen zu können. Bei kaheti.de sind drei der vier sichtbaren Bereiche fixiert und können deswegen durch den Besucher nicht "weggescrollt" werden. Sie bleiben stetig sichtbar, wodurch ein Zurechtfinden auf Internetseiten deutlich vereinfacht werden sollte. Was wirklich von Wichtigkeit ist , sind die eigentlichen Inhalte einer Webseite. Mit einem eigenen insich scrollbarem Bereich soll dies focusiert werden, während dem Besucher alle anderen Bereiche (insbesondere die Navigation) jederzeit zur Verfügung stehen.

einfache , aber nützliche php-scripts die ich hier bei Kaheti.de verwende

Um die Codes verwenden zu können, muss die Webseite eine php-seite sein. Hierzu muss die Endung .htm (oder .html) in .php abgeändert werden. Eine diesbezügliche Änderung muss dann natürlich bei allen internen Verlinkungen (insbesondere Navigationen etc.) berücksichtigt werden, damit die Seite auch weiterhin aufgerufen werden kann!


Einfaches image-counterscript mit einstellbarer IP-Sperre zur Verhinderung einer Mehrfachzählung. Dem Download sind bereits eine Menge verschiedener Zahlensets beigefügt. Im Script selbst ist hinreichend beschrieben wo und wie Veränderungen und Einstellungen vorgenommen werden können.



Verschiedene Zahlensets beigefügt. Hier: einige Beispiele. Verwendung eigener Grafiken möglich (png, jpg, gif, animierte gif's)

Eingebunden wird das Script mit dem include-Befehl:...an der Stelle, wo der Counter erscheinen soll


<?php include "Pfad zu..../counter.php";?>


Keine SQL Datenbankanbindung erforderlich. Die Zählerstände werden in einer separaten Text-Datei gespeichert.
Download: Counter


Datumsangabe der letzten Änderung als Metatag. Hier: für den verwendeten Doctype XHTML 1.0 Strict. Um den Code zu kopieren, bitte im weissen Feld markieren und kopieren wählen.


<meta name="date" content="<?php $LetzteAenderung = filemtime(basename($_SERVER['PHP_SELF'])); echo"", date("Y-m-d", $LetzteAenderung), ""; ?>" />


Eine einfache Umsetzung einer sog. Breadcrumb-Navigation. Diese Navigation stellt von jeder Seite aus den Link "zurück zur Startseite" ...ein eventuelles Unterverzeichnis sowie den übernommenen Seitentitel dar. Das eigentliche Script wird mit dem include-Befehl eingebunden und aufgerufen.


<?php include("breadcrumb.php");?>

Im Script selbst ist bereits eine Klassenangabe vorhanden mit der sich per CSS der automatisch übernommene Seitentitel nochmal gesondert formatieren lässt. Hier: der Auszug aus dem Script:

echo '<strong class=\'white\'>'.$title[1].'</strong>';

Download des Scripts: Breadcrumb


Datumsangabe der letzten Änderung für den Footerbereich. Hier: für den verwendeten Doctype XHTML 1.0 Strict. Um den Code zu kopieren, bitte im weissen Feld markieren und kopieren wählen. Dieser Code wird einfach dort an der Stelle eingefügt, an der das Datum erscheinen soll.


letzte Aktualisierung dieser Webseite war am: <?php echo date( "d.m.Y", getlastmod() );?>


Das hier bei Kaheti verwendete Suchscript. Es durchsucht entweder das ganze Hauptverzeichnis, wobei sich einzelne Unterverzeichnisse ausschliessen lassen, oder aber es durchsucht nur anhand der Begriffe in den Metatags. Die Ergebnisse werden als Link's ausgegeben, wodurch man sofort auf die entsprechende Seite gelangen kann. Das Einstellen der minimalen Suchbegriffslänge ist in einer Konfigurationsdatei einstellbar. Alle verwendeten Suchbegriffe werden in einer Log-Datei aufgezeichnet.


Download des Scripts: searchscript

einfache aber wirkungsvolle CSS Tricks: vertikales Buttonmenü

Wie einfach war es doch früher als man gleich mehrere Buttons mithilfe von Tabellen fein säuberlich in EINE Reihe bekommen hatte.....da Tabellen für für reine Layoutzwecke jedoch nicht mehr verwendet werden sollen, muss man sich heute eben anderer Mittel bedienen um dies hinzukriegen. Vertikale Buttonausrichtung allein mit CSS ist schon ziemlich abenteuerlich wenn es sich denn um MEHR als EINEN Button handelt.
Da Buttons meist mit einem sog. Listenmenü in Erscheinung treten , besteht ganz automatisch der Zwang diese untereinander zu positionieren (dies wird automatisch vom Browser so interpretiert). Diesem Zwang aber kann man entgegenwirken mit der CSS-Regel "float". Float bewirkt das ein Element entweder links oder rechts ausgerichtet wird. "Float" hat zudem die Eigenschaft das sein Ausrichtungseffekt ebenfalls auch auf nachfolgende Elemente übertragen wird, solange die Wirkung des Float's nicht mit Absicht durch die CSS-Regel "clear" aufgehoben wird. Da bei einem zentriertem vertikalen Buttonmenü sich alle Buttons jedoch zentriert verhalten sollen ...nützt die CSS-Regel "float" für sich alleine genommen allerdings erstmal nicht viel.
Wer jemals versucht hat gefloatete Elemente zentriert auszurichten, wird sich sicherlich so manchesmal die alten Tabellen wieder herbei gewünscht haben. Doch genau DAS ist der Ansatzpunkt für mein Tutorial darüber, wie man mehrere Buttons allesamt zentriert in EINE Reihe bekommt. Vom Prinzip her ist es eigentlich nichts anderes als das mit CSS die früheren Tabellen eben simuliert werden.


barrierefreies Webdesign

Damit in etwa deutlich wird, wie die Simulation von Tabellen gemeint ist, habe ich versucht dies anhand einer grafischen schematischen Darstellung aufzuzeichnen und zwar MIT allen zugehörigen Containern und Menü/Listenelementen. Ausserdem sind bereits die einzig erforderliche ID und Klasse enthalten so, das man in den noch nachfolgenden Grafiken sehr einfach die Zusammenhänge nachvollziehen kann.


barrierefreies Webdesign

Ich verwende zur gesammten Einfassung des Listenmenü's ein Block-Element (Container) der anhand seiner CSS-Regeln an das bestehende Webseiten-Layout (Breite - Höhe, Hintergrund etc. z.B.) angepasst werden kann. In diesen Container kommt dann nichts anderes als das eigentliche Listenmenü. Per CSS wurden <ul> und <li> direkt "angesprochen" ...hierfür sind also keine Klassen und/oder ID's verwendet worden.

So: was passiert hier ? ....ohne jetzt erstmal in den Quelltext oder die CSS zu schauen kann man sehen das <ul> innerhalb des Containers einen weiteren (inneren) Container bildet. <ul> kann hinsichtlich seiner Breite variieren und damit auch Spielraum für die simulierten "Tablecell's" , die in diesem Fall mittels der <li> simuliert werden, zu geben.

Der Trick des Ganzen (damit es funktioniert) hängt natürlich auch sehr von der Breite und der Anzahl der verwendeten Buttons ab. Die fensterbasierten Browser haben je nach eingestellter Auflösung selbstverständlich ihre Grenzen so, das sich die Anzahl verwendeter Buttons in realistischen Mengen gestalten sollte.


barrierefreies Webdesign

Dies ist das html-Grundgerüst für das Listenmenü. Es unterscheidet sich nicht von allen anderen Listenmenüs... also erstmal nichts besonderes. Nachfolgend wird dann noch die CSS dargestellt mit welcher meine weiteren Erklärungen nachvollzogen werden können. Die Funktionsweise: Man muss davon ausgehen, obwohl <ul> möglicherweise eine geringere Breite als 100% aufweist, das der "Innenraum" von <ul> für die "Tablecell's" <li> IMMER als 100% zur Verfügung stehender Platz anzusehen ist. Um genau soviele Buttons die verwendet werden sollen wird es <li>'s geben. Diese einzelnen <li>'s erhalten per CSS und Klasse eine mathematisch errechnete Breite die sich aus der Anzahl der verwendeten <li>'s ergibt: in dem hier dargestellten Fall verwende ich 7 Buttons. Hiernach also auch 7 <li>'s die prozentual allesamt gleichbreit sein müssen. Ich teile also 100% durch 7 ...das ergibt 14,28% und ein paar Zerquetschte. Jedes Listenmenü erhält die Breite 14.28% und wird per float:left nach links ausgerichtet. Somit gibt es nun 7 gleichgrosse <li>'s-Stücke die exakt nebeneinander auf 100% aufgeteilt in EINE Reihe passen. Bei mehr oder weniger Buttons muss man die zur Verfügung stehende <ul>-Breite (100%) durch die entsprechende Anzahl benötigter <li>'s teilen so das sie sich die 100% exakt gleichermaßen teilen. (Bsp. bei 10 Button's würde jedes <li> die Breite von 10% erhalten !) Schiebt man das Browserfenster zusammen , verkleinern sich die <li>'s. Würde man jedem <li> probehalber nun eine eigene ID geben und unterschiedliche Hintergrundfarben, könnte man das Verhalten der <li>'s sehr gut auch grafisch beobachten


barrierefreies Webdesign

In diese <li>'s (siehe html-code für das Listenmenü) setzte ich Links mit den Grafik-Buttons. Anstelle von richtigen Grafiken kann man hier natürlich auch via CSS Buttons realisieren. Die Klasse "image" hebt innerhalb des <li>'s den float auf so, das die Grafik innendrin ausgerichtet werden kann. Wie hier zu sehen wird die Buttongrafik per CSS noch scalierbar gemacht (bei wenigen Buttons kann man das jedoch weglassen) ..das hat aber den Vorteil, das sich das komplette Menü bis an die Grenzen die der Buttontext natürlich setzt zusammenschieben lässt d.h. wenn man das Browserfenster zusammenschiebt wird hierdurch NICHT das Menü-Design zerschossen....wie man so schön sagt .-) Je nach tatsächlicher Breite der Buttongrafik, muss man mit der %-Angabe für die Buttonbreite in der CSS etwas variieren.

Im Ergebnis erhält man auf die hier beschriebene Weise ein vertikales Buttonmenü welches sich automatisch anpasst und sämtliche Buttons gleichermaßen auf die zur Verfügung stehende Breite verteilt. Diese Technik wurde vom IE7 aufwärts mit allen gängigen Browsern getestet ...aber auch mit solch antiquarischen Internetguckern wie Netscape und K-Meleon und stellt damit eine Alternative zur CSS-Regel "inline-block" dar, mit der sich gewöhnlich Elemente zwar gut nebeneinander positionieren lassen , dies aber leider vom immer noch in Gebrauch befindlichen IE7 und einigen "exotischen" Browsern immer wieder gerne ignoriert wird.

Eine Anwendung dieser Technik kann man sich bei www.Besucher-voting.de ansehen. Sie wird sowohl im oberen Bereich als auch im Footer verwendet. Den Abstand zwischen den einzelnen Buttons lässt sich in der ".image" (Klasse für die Grafikbuttons) mit den margin's für rechts und links einstellen. Anstelle von "margin:auto;" kann man hier %-Werte angeben die für margin-left und margin-right gleich sein müssen damit die Buttons zentriert bleiben.

begrüssen Sie Ihre Besucher doch mal individuell

Begrüssungstext

Wie bei Kaheti.de auf der Eingangsseite zu sehen, werden meine Besucher mit der augenblicklich aktuellen Tageszeit begrüsst. Damit das funktioniert braucht es ein php-script mit dem sich zu jeder vollen Stunde ein beliebiger Text darstellen lässt und die Seite in der dies dargestellt werden soll, muss ebenfalls ein php-Dokument sein. Eingebunden wird das Script mit dem include-Befehl wie nachfolgend dargestellt:

<php include("gruss.php");>

Möglichkeiten für die Texte gibt es unzählige , das Script eignet sich im übrigen auch um z.B. stündlich auf etwas spezielles hinzuweisen. Für die Verwendung einer - wie bei mir auf der Eingangsseite zu sehene - Grafik, wird direkt nach der Textpassage einfach ein <img> - Tag mit einem vorangestellten Leerzeichen leerzeichen verwendet. Mit ein bisschen Geschick lässt sich dieses Script auch als stündlicher Bildwechsler verwenden.Die Verwendungsmöglichkeiten sind also vielseitig.

Download des Scripts: Begrüssungsscript

Validierter Code für einen Facebook-like Button

Wer auf seiner Homepage gerne Wert darauf legt, das diese anständig fehlerfrei - also validiert, geschrieben ist, wird sich spätestens dann wieder ärgern, wenn die schöne Arbeit zunichte gemacht wird wenn man auch noch einen sog. Facebook Like-Button installieren möchte. Die Codes zum Einbinden solcher Like-Buttons sind nämlich leider nicht validiert und enthalten Codefraqmente, die es im herkömmlichen Html nach den Standards von W3C offiziell so nicht gibt. Kaheti.de verwendet als Quellcode die strikeste Variante möglichem html's nach W3C und ist damit an die Vorgaben für ganz spezielle html-Elemente gebunden, die zumindest die von Facebook angebotenen Codesfür solche Like-Buttons bei weitem nicht erfüllen und damit dazu führen, das diese Seite als Fehlerhaft erkannt wird. Damit man sich aber mit fehlerhaftem Fremdcode nicht gleich wieder die Seite "versaut", nachdem man sie ordentlich validiert hat, gibt es einen Trick, mit dem aus Facebooks Code schnell ein - naja, zumindest die Validatoren zufrieden stellender Code werden kann.
Zunächst benötigt und fügt man den ersten Javascriptteil in den Headbereich des Quelltextes ein. Diesen Teil könnte man auch in ein js-Archiv kopieren und dann eben anstelle des direkten Javascriptcode's diesen dann eben mittels eines Archivs laden.

Javascript 1. Teil

Code ab hier markieren und kopieren

<script type="text/javascript">
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

Durch das Einfassen dieses nicht validen Facebookscodes in maskiertes Javascript (im Code rot dargestellt), wird er vom W3C-Validator nicht ausgewertet und damit auch nicht als fehlerhaft erkannt - funktioniert aber dennoch einwandfrei! Bei den **** im Code muss man nur noch seinen Facebooknamen unter dem man seine Seite dort betreibt, einfügen
Zwischen den document.write (' und '); - also dort wo sich der eigentliche Facebookcode befindet (im Code grün dargestellt), kann man natürlich auch alle anderen von Facebook generierten Codes einfügen und damit auch andere Darstellung solcher Like-Geschichten validiert nutzen. ! Wichtig ! : zwischen document.write ('und'); muss der Code innerhalb der Klammern document.write('****'); in EINER Zeile durchweg geschrieben sein ! Will man die Codezeile dennoch unterbrechen und in zweiter Reihe fortführen, so muß man an der Unterbrechungsstelle einen Backslash \ (im Code blau dargestellt) setzen, so wie es hier im Beispielcode gezeigt ist.
Die Formatierungen (rot,blau,grün,fettschrift) werden beim Kopieren des Codes nicht mit kopiert!

Buttoncode 2. Teil

Code ab hier markieren und kopieren

<script type="text/javascript">
//<![CDATA[ document.write('<div id="fb-root"></div>\
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/****"\
data-layout="button" data-action="like" data-size="large" data-show-faces="false"\
data-share="false"></div>');//]]>
</script>

Für andere grafische Gestaltung eines solchen Facebook-Buttons - wie hier auch auf Kaheti.de zu sehen - kann man eigentlich nur die neuen Möglichkeiten von CSS3 verwenden, da die von Facebook verwendete Grafik sich ansonsten nicht ohne weiteres austauschen oder bearbeiten lässt. Im Code ist ja bereits eine Klasse verwendet (class="fb-like"), die man auch direkt mit CSS ansprechen kann. Hier bei Kaheti.de wurde der Button mit der CSS-Regel filter: invert(0.8) sepia(1); gefärbt und somit etwas ans Design angepasst.



Wenn Ihnen diese Webseite gefãllt, ....sagen sie's bitte jemandem. Danke