StartseiteLink zurück zur Hauptseite,... >> - sie sind jetzt hier:  Webdesign, Usability, Layout und Grafiken

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

Um die Codes, die in php sind 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! Bei den hier vorgestellten Codes handelt es sich um Bilder, auf die wenn man draufklickt, sich ein neues Fenster öffnet, aus diesen sich die erforderlichen Codes entnehmen lassen.

Das neue Benutzermenü

WARUM?... Auf meiner Homepage ist nun das neue Benutzermenü zu sehen, mit welchem einem jedem Besucher möglich gemacht werden soll, diese Webseite nach seinen bestimmten Bedürfnissen zu individualisieren.... einerseits. Andererseits war es für mich schon eine gewisse Herausforderung zu sehen, WAS mit modernen Techniken - die aktuelle Browser darstellen können, so alles machbar ist. Die Menü-flipperei ist sicherlich auch etwas Spielerei, könnte jedoch durchaus auch für Linkshänder eine gute Hilfe sein. Der sogenannte "Special-Effekt" ist aber tatsächlich doch nur Spielerei, mit der - wie auch schon bei der Weihnachtsdeko verwendet, mit einem kleinen Javascript Dinge ein und ausgeblendet werden können. Das entsprechende Script gibt es hier auf der Seite weiter unten. Um meine Homepage auf den meisten modernen Browsern gleich aussehen zu lassen, (zum Beispiel der Audioplayer wird von fast jedem Browser anders dargestellt) habe ich eben auf die Einbindung des html5 Audio-Tags verzichtet, und per Javascript und CSS einen ganz eigenen Player meinem Homepagedesign angepasst. Die kompette Benutzersteuerung ist in einem ganz eigenem Abschnitt zusammen gefasst und muß auch nicht unbedingt genutzt werden. Beim Aufruf der Seite wird lediglich das Grundkonstrukt gezeigt - was den durch Zusatzeffektgenervte Besucher sicherlich hoch erfreuen wird. Tatsächlich barriereorientiert sind die Schriftgrößenänderung und zwei weitere Designs zu denen man per Buttonklick wechseln kann. Die Farb-gebungen sind nicht zufällig gewählt nur um zu zeigen, wie Kaheti.de auch "anders" aussehen kann, sondern stellen einen nach Anforderungen des BiTV besonderen Farbkontrast für Menschen mit Sehschwächen dar.

Neu hinzugekommen ist nun die Sprachausgabe für meine Homepage. Hiermit können Sie sich die inhaltlichen Haupttexte vorlesen lassen. Eine entsprechende Steuerung hierfür finden Sie ebenfalls im Benutzermenü.

Scripte - Datum und Welttage

In Webseiten das aktuelle Datum anzuzeigen, ist sicherlich kein großes Problem mehr. Da braucht man das "Rad" nicht mehr neu erfinden. Hierfür gibt es Scripte im Internet wie Sand am Meer. Das von mir hierfür verwendete Script stelle ich aber dennoch mal als Download zur Verfügung. Etwas seltener ... ich möchte behaupten, fast noch einzigartig, ist allerdings meine umgesetzte Idee, auf Webseiten anzuzeigen, welcher aktuelle Welttag grade ist. Hierfür habe ich mit sehr viel zeitlichem Aufwand für sämtliche 365 Tage im Jahr eine Liste zusammen gestellt aus der für jeden einzelnen Tag der jeweilige "Welttag für ...irgendwas" angezeigt wird. Ich bin also der Urheber dieser umgesetzten Idee. Positionierung und Textaussehen muß man halt noch über CSS realisieren. Wenn man grundsätzlich php-seiten betreibt, dann sind die Scripte einfach über <?php include ("dateiname.php"); ?> einzubinden.

Download des Scripts:  aktuelles Datum
Download des Scripts:  aktuelle Welttage

Scripte: Ladezeiten einer Webseite anzeigen

Die Ladezeit Deiner Webseite anzeigen .... eben auch nur eine Spielerei die außer "Dir" selbst ansonsten eigentlich nicht wirklich jemanden interessiert. Für den Nutzer ist wichtig, wie flott Deine Seite ihm erscheint... wie viele Millisekunden, Sekunden, Minuten oder Stunden sie in gemessener Zeit tatsächlich braucht, ist höchstens für Webdesigner von Bedeutung.

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

php-scripte: Inhalte ein- und ausschaltbar machen

Eine nette Javascript Spielerei: Webseiteninhalte verstecken und per Klick anzeigen lassen. Hiermit kann man also beliebige Webseiteninhalte ein- und ausschaltbar machen... Texte, Bilder, Navigation...

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

php-scripte: einfacher Besucherzähler

Hier jetzt mal ein Hit-Counter, der zählt, wie oft die Seite aufgerufen wurde. Die Hits werden in einer Text-Datei (hits.txt sollte die heißen und muß noch extra erstellt werden) notiert und wieder angezeigt. Natürlich aber ließe sich der Hits-Stand leider von Hand auch manipulieren.

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

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

Den Einbinduungs Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

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

Download:  Counter

php-codes: Datum der letzten Änderung an der Webseite

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

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

Eine einfache Breadcrumb-Navigation

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.

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

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

Download des Scripts:  Breadcrumb

Datumsangabe der letzten Änderung für z.B. den Footerbereich

Datumsangabe der letzten Änderung für den Footerbereich. Hier: für den verwendeten Doctype XHTML 5. 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.

Den Code hierfür finden Sie, wenn Sie auf das Bild draufklicken

Eines der besten Suchscript's die es wohl gibt

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ü

Css-Tricks

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.

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.

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.

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

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.

Aber! ...es geht auch einfacher.

Obwohl auch diese Methode der IE8 leider nicht hinkriegt und auch der Ie9 und viele andere Browser ebenfalls viele neue CSS-Regeln nicht beherrschen, ist sie doch ansonsten mit jedem modernen Browser eine recht einfache Möglichkeit, um drei Boxen - selbst respektive - altbrowserkompatiblel nebeneinander zu platzieren. Der html-code hierfür:

Das Css hierfür:

Die Beschreibung des Ganzen: man richtet einen Grundcontainer ein der außer der Funktion das er einen Table darstellen soll ansonsten keine andere Funktion hat. Dieser Container soll dann im html dahin positioniert werden, wo man ihn hinhaben will. Für diesen Container nehmen wir an, das er uns im Inneren 100% Platz bietet.
Nun die Boxen: jeder Box hat eine Breite von 32% ...bei drei solcher Boxen bleiben 4% über die auf zwei Span-elemente verteilt sind und somit kommen wir auf einen Gesamtinhalt für den Table-Container von 100%. Die zwei Spans machen einen bestimmten Abstand zwischen den Boxen (könnte man auch weg lassen, hat eben nur optische Gründe).

Hier sehen wir drei nebeneinander platzierte Container, die sich proportional des Browserfensters zusammenschieben lassen OHNE irgendwie zu springen. Würde man - wie jetzt hier im Beispiel die Schrift (in VW) die Inhalte zum Beispiel Bilder ebenfalls scalieren, würden die natürlich auch proportional ihrer Box größer oder kleiner. Mit der CSS Regel: max-width kann man solchen Boxen dann natürlich Grenzen des Wachstums aufzeigen.. genauso wie per cSS Regel min-width bestimmt werden kann, wie klein solche Boxen werden dürfen. Das Ganze geht mit 3 Boxen genauso wie auch mit 6 oder 8 Boxen, man muß eben nur die 100% des Hauptcontainers exakt auf alle Boxen und Zwischenräume aufteilen.
Dies wäre die Möglichkeit mit den Css-Regeln "Table" und "table-cell" - der Vorteil hier: Texte werden mit der Regel: "vertical-align:middle" vertical auch tatsächlich mittig ausgerichtet. Das Ganze dann auch mal mit dem IE8 probiert, ... funktioniert nicht. Bei ihm gings dann, wenn man dem Hauptcontainer die Position "relative" (als sog. Elternelement") zuweist und die Boxen dann mit "absolute" positioniert.

begrüssen Sie Ihre Besucher doch mal individuell

php-script: Begrüßungstext individuell im Script gestaltbar

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:

Möglichkeiten für die Texte gibt es unzählige, das Script eignet sich im übrigen auch um zum Beispiel 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 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

Hier ist erstmal Ende

Wenn Ihnen diese Webseite gefällt,
....sagen sie's bitte jemandem. Danke dafür

nach oben ▲