kloeschen.com >> » XHTML

new design for 9rules

Administrator — Sat, 05 Nov 2005 09:14:39 +0000

Blog network 9rules has a new design. Very colorful and nice. Best feature is the network snapshot which shows random or recent posts or you favorite blogs from the 9rules network. Go, have a look.

Präsentation von douglas bowman im netz

Administrator — Fri, 29 Jul 2005 21:27:27 +0000

Der Webmaster von stopdesign.com zeigt uns seine Folien zum Thema Tabellen rauswerfen

Valide Formulare per Knopfdruck

Administrator — Mon, 18 Jul 2005 18:23:58 +0000

Mit dem FormBuilder baut man sich recht schnell ein Formular zusammen und vergisst mit Sicherheit nicht, den Inhalt zu validieren, die entsprechenden Felder als notwendig zu markieren oder eine Feldbeschreibung hinzuzufügen.
Das Ganze wird dann noch durch eine Vorschau vervollständigt.

Selbst unobtrusive DOM Javascript kann man per Knopfdruck hinzufügen. Ich bin begeistert. Meine nächsten Formulare werde ich damit erstellen.
Hier ein Screenshot dazu:

Ruhig mal ausprobieren

Webseiten Tipps bei BloggingPro

Administrator — Tue, 12 Jul 2005 21:58:54 +0000

Gleich 2 Beiträge zum Thema Website Tipps hat Jacob (neuer Besitzer von Bloggingpro.com) veröffentlicht. Im Grunde natürlich nichts neues, aber schön auf den Punkt gebracht und mit netten Beispielen versehen.

Die Tipps reichen von dem richtigen DomainNamen, bis hin zum richtigen Verlinken.
So kommen wir evtl. auch mal höher in den Suchmaschinen.
Jacob sollte es eigentlich wissen, schließlich hat er mehrere bekannte Seiten wie cssvault.com oder auch blogcatalog.com.

windows desktop mit XHTML und CSS

Administrator — Mon, 11 Jul 2005 22:14:06 +0000

Ein Windowsdesktop als Webseite. Designed natürlich mit XHTML und CSS! Und das nicht nur im aktuellen XP Stil, nein auch Classic oder Longhorn sind dabei: Multiple-Themed Windows XP CSS Desktop v1.0

yDSF Drop Shadow

Administrator — Thu, 07 Jul 2005 09:00:29 +0000

Mal wieder eine Anleitung, um schöne Schatten zu erzeugen. Das Ganze nur mit CSS und leider etwas unnützen Markup. Aber nett anzusehen.

schöne Bilder Gallerie mit CSS

Administrator — Mon, 04 Jul 2005 08:27:52 +0000

Mal eine schöne Variante, um viele Bilder auf einer Seite darzustellen. Natürlich pure CSS!
CSS sliding photo-galleries

Mouseover DOM Inspector Favelet

Administrator — Sat, 02 Jul 2005 07:48:40 +0000

Ein Bookmarklet oder Favelet, welches bei der Analyse einer Webseite hilft. Es zeigt alle Informationen eines Elements an, wenn man mit der Maus darüber fährt. MouseOver DOM Inspector Favelet

standard konforme links in ein neues fenster (wordpress plugin)

Administrator — Sat, 02 Jul 2005 07:30:10 +0000

Ich weiss, dass es auch mit wordpress nur schwer gelingt, validen XHTML Code rauszuschmeissen, aber man sollte sich doch bemühen, so nah daran zu sein, wie nur irgend möglich. Das Tutorial geht davon aus, das externe Links mit rel="external" gekennzeichnet sind. Um dies zu erreichen, kann man das natürlich in seinem Post selbst erledigen, oder aber man nimmt sich das bereits vorhandene Plugin Identify External Links.
Dort gibt es eine Funktion, die man leicht für diese Zwecke editieren kann:

function parse_external_links($matches){
if ( wp_get_domain_name_from_uri($matches[3]) != wp_get_domain_name_from_uri($_SERVER["HTTP_HOST"]) ){
return '‘ . $matches[5] . ‘‘;
} else {
return ‘‘ . $matches[5] . ‘‘;
}
}
?>

man tausche einfach das class="extlink" mit rel="external" und schon sind die Links richtig markiert.

Nun gilt es noch das Javascript richtig einzubinden und mit dem Onload Event zu verbinden. Das Einbinden nimmt man entweder per Hand im header seines Themes vor, oder benutzt eine kleine WordPress Action:

function insert_externallinks_script(){
echo '';
}
add_action('wp_head','insert_externallinks_script');
?>

Natürlich muss die Datei externallinks.js dann im Stammverzeichnis des Webservers liegen. Jetzt muss in dieser Datei unter Umständen der Onload Event verbessert werden. Je nachdem, ob schon weitere Javascripts eingebunden wurden, überschreibt man sonst so den OnloadHandler.

var oldonload = window.onload;

if (typeof window.onload != 'function') {
window.onload = function() {
externalLinks();
liveSearchInit();
}
} else {
window.onload = function() {
oldonload();
liveSearchInit();
externalLinks();
}
}

Es wird erst ausgelesen, ob schon eine Funktion mit dem OnloadHandler verknüpft wurde. Wenn nein, wird die neue Funktion damit verbunden, sonst wird eine neue Funktion erstellt, welche die alte aufruft und anschliessend die externalLinks(). Der Autor des livesearch-plugins wollte z.B. dass die livesearchInit per onload geladen wird:

Da dies aber jede vorher konfigurierte OnLoad Funktion überschreiben würde, habe ich sie kurzerhand hierhin verlagert. Und was soll ich sagen, externe Links öffnen sich in einem neuen Fenster und die LiveSuche funktioniert auch noch.

Mit Hilfe von CSS (Ja, auch CSS unterstützt Attribute Selektoren) kann man die externen Links dann auch noch gesondert stylen.

Bildunterschriften semantisch korrekt?

Administrator — Thu, 30 Jun 2005 10:15:42 +0000

Wichtig ist, dass das Ganze semantisch korrekt bleibt und mit möglichst wenig zusätzlichen Tags auskommt. Hier nun der Ansatz von Ulrike Häßler:
Wir benutzen eine Definitions-Liste, die ja bekanntlich dazu dient, einen Begriff mit entsprechenden Definitionen oder Erklärungen in Verbindung zu bringen. Wenn man nun das Bild als Begriff sieht, kann man eine Definitionsliste benutzen, um die Definition als Bildunterschrift zu setzen. Mit ein Wenig Style sieht das Ganze auch aus wie gewollt und floated sogar…
(Beispiel von der Entdeckerin!)

: Bildlegende

Passendes CSS:

dl.meImgLeft { float: left; margin-right: 1em; }
dl.meImgLeft dt { margin-bottom: 0; }
dl.meImgLeft dd { margin: 0; } // verhindert das Einrücken und den Abstand nach oben

So und der gewagte DOM Hacker könnte das Ganze dann noch automagisch regeln, indem er den TitleTag ausliest und dann das entsprechende XHTML um das Bild herum erstellt. Aber diese Arbeit soll denen überlassen sein, die es können.