Heute ist Sonntag der 21 April 2019
...heute ist internationaler Kindergartentag




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

Webdesign Webdesign Webdesign

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!

Welttagscreen 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

IE8-Ansicht IE8-Ansicht Auf diesen beiden Bilder (zum vergrössern bitte einmal draufklicken) sieht man deutliche Unterschiede, was damalige und heutige Anforderungen an modernen Webtechniken angeht. Damit diese Seite hier, überhaupt mal einigermaßen noch vernünftig in so einem alten Browser wie den IE8 angesehen werden kann, mussten für diesen Browser extra eigene Regeln geschrieben werden, und zwar solche, die nur für IHN gelten. Mit modernen Techniken die CSS3 bietet (z.B. runde Ecken oder auch Farbgradiente oder neue Ausrichtungsanweisungen) kann dieser, und andere ältere Browser nichts mehr anfangen. Während man Farbverläufe und auch Transparenz die moderne Browser darstellen können per CSS-Anweisung realisieren kann, musste - um an ein ähnliches Ergebnis in diesem alten IE8 zu kommen, dies mit teiltransparenten PNG-Hintergrund Bildern gemacht werden. Warum dieser Vergleich? Hätte ich nicht gemacht, wenn denn nicht aufgefallen wäre, das nach einer Installation eines Win7 Betriebssystems auf einem Laptop eben ein Internet-Explorer8 als Standardbrowser mitinstalliert ist. Ausgehend davon, das sich immer noch viele Menschen eben nicht gleich Windows 8,9 oder 10 sondern halt das beliebte Windows7 ggfs. auch mal neu installieren und somit dann auch zunächst eben diesen Browser nutzen, besteht natürlich die berechtigte Annahme, das sich diese Leute dadurch einen Großteil des inzwischen modernen Internets halt falsch und fehlerbehaftet ansehen. Wenn eine Webseite die Bedingungen alter Browser nunmal nicht erfüllen und dieser Browser so manche Homepage damit scheisse darstellt, ist man diesen Teil Besucher sicher erstmal für lange lange Zeit los. Und ich schreibe hier nicht von Nutzern, die sowas wissen und sich gleich hinterher des neuen Betriebssystems einen aktuellen Browser nachinstallieren, sondern von Menschen, die es nicht besser wissen und eben diese alten Browser nutzen. Das werden schon so einige sein, die immer noch mit zumindest dem alten IE8 rumdümpeln. Aus diesem Grunde wurde diese Homepage hier, eben auch etwas an diesen Browser angepasst.

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.

//dieser Teil am Anfang der Seite
<?php
function mymicrotime() {
list($usec, $sec) = explode(" ",microtime());
return ((float)$usec + (float)$sec);
}
$time_start = mymicrotime();
?>

Seiten Inhalt...............
............................

//dieser Teil am Ende der Seite
<?php
$time_end = mymicrotime();
$time = round($time_end - $time_start,4);
echo "Die Seite wurde in ".$time." Sekunden geladen";
?>

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

<?script>
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
<?/script?>
<a href="" onclick="javascript:show('divText'); return false">
Einblenden / Ausblenden</a>
<div style="display:none" id="divText">

Hier jetzt der Inhalt, der ein und aus geschaltet werden soll....

</div>

probieren Sie's aus: Einblenden / Ausblenden

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.

<?php
$dateiname = "hits.txt";
$datei = file($dateiname);
$hits = $datei[0] + 1;
$handle = fopen($dateiname, "w");
fwrite($handle, $hits);
fclose($handle);
echo $hits." Hits";
?>

176 Hits ...so oft wurde diese Seite bereits aufgerufen

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.

Diese Seite wurde um 00:59 Uhr in: 0.001873 Sekunden geladen.