Software Guide

Der Wiener Webentwickler Simon Dorner hat einen sehr guten 19-Minuten-Video-Vortrag zum Thema Barrierefreies Webdesign auf Google Video veröffentlicht:

Video-Link

Auf Simon Dorners Webseite fehlt allerdings noch ein Weblog ;-)

(via Netzspielwiese)

HTML sieht zur Darstellung von Quellcode das Inline-Element <code> vor. Will man den Quellcode als Block darstellen und z.B. auch einen Rahmen darum anzeigen oder eine andere Hintergrundfarbe für diesen Block vergeben, so kann man das <pre>-Element als Container vom <code>-Element einsetzen:

<pre><code>
function halloWelt() {
    $var = ‚Hallo, Welt!‘;
    echo $var;
}
</code></pre>

Das <pre>-Element sorgt hier dafür, dass Zeilenumbrüche und Leerzeichen 1:1 wiedergegeben werden, was ja normalerweise in HTML nicht der Fall ist. Damit kann man u.a. Code-Einrückungen schön darstellen.

Problem:

Ist eine Zeile länger als vorgesehen, so erfolgt kein automatischer Umbruch, sondern der Text läuft u.U. auch über die Sidebar hinaus:

Im Internet Explorer kann dieses Verhalten bewirken, dass die Sidebar dann unterhalb der Seite dargestellt wird.

Lösung:

Wie ich bei Lorelle gelesen habe, hat Tyler eine Lösung für diese Problematik gefunden. Mit etwas CSS-Code kann man einen Zeilenumbruch beim letzten Leerzeichen erzwingen, wenn der Text zu lang wird:

pre {
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;       /* Opera 4-6 */
   white-space: -o-pre-wrap;       /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Allerdings weiß ich nicht, wie sich das ganze mit anderen Browsern, wie etwa Safari verhält, ich habe daher mal eine Test-Datei erstellt: pre-beispiel.html. Wäre prima, wenn das mal ein Mac-User testen könnte ;-)

Seit einigen Jahren betreue ich nun schon den Webauftritt eines Ferienhauses, welches meine Eltern vermieten.

Ich habe die Seite nun von Joomla auf WordPress umgestellt, weil mich das bisher verwendete Tabellenlayout nervte und Joomla nach wie vor keine tabellenlose Ausgabe anbietet. Zudem erschien mir Joomla als CMS zu oversized für die Anforderungen. Im Rahmen der Umstellung habe ich der Seite gleich ein neues Aussehen verpasst:

WordPress ist wohl ideal für den Zweck: ich habe hier ausschließlich Pages verwendet, mit dem Home-Page Control-Plugin habe ich eine Page als Startseite festgelegt. Ansonsten nichts besonderes. Die Navigation unter Schleching und Umgebung wurde mit wenigen Zeilen PHP-Code umgesetzt um u.a. abzufragen, welche Seite aktuell geladen ist, um dementsprechend diese zu highlighten.

Folgende Plugins sind im Einsatz: Home-Page Control für statische Startseite, Exec-PHP um PHP-Code im Beitragstext einzubinden, German Permalinks für korrekte Umlaut-Übernahme in Permalinks, Google Sitemap für den gleichnamigen Google-Dienst und Link Indication, um den Pfeil neben allen externen Links automatisch erscheinen zu lassen.

Über Kritik und Verbesserungsvorschläge wäre ich dankbar.

Wie wahr, Time Breakdown of Modern Web Design:

(von poisonedminds.com)

In meiner Blog der Woche – Reihe stelle ich nun ein weiteres Blog vor: Webdesignblog.

Das Webdesignblog von Christian Strang gibt es seit etwa 11 Monaten und bietet viele interessante Themen zu Webdesign, Affiliates / Geldverdienen mit Partnerprogrammen, SEO, praktische Tipps zum Schreiben von Weblogartikeln, Aufbau von Webseiten, u.v.m.

Bekannt wurde das Blog unter anderem aufgrund des Artikels 100 Usability Tipps und des veranstalteten Blog-Karnevals.

Das Design und der Aufbau (z.B. Platzierung der Adsense-Werbung) des Blogs sagt mir persönlich allerdings weniger zu, aber da nunmal der Inhalt zählt und nicht das Design ist dies absolut zu vernachlässigen.

Insgesamt ein sehr interessantes Blog, um sich rund um die Themen Webdesign/Werbung/SEO zu informieren.

Über del.icio.us bin ich zufällig auf GotAPI gestoßen. Die Seite bietet viele verschiedene Referenzen und ist sehr schön bedienbar, links die Stichwörter, und rechts die Erklärung:

Es werden dabei viele unterschiedliche Referenzen unterstützt, u.a. HTML, CSS, Java, JavaScript, PHP, Perl, Ruby, etc.

Im Englischsprachigen Artikel Running multiple versions of Firefox wird beschrieben, wie man mehrere Firefox-Versionen parallel installieren kann.

Dies ist primär für Webentwickler interessant, die unter den verschiedensten Umgebungen die Webseiten testen möchten.

(via Aarakast)

WordPress Garden berichtet von schön designten Weblogs, die auf WordPress basieren. Interessant, um sich Inspirationen zu holen.

Da fällt mir gerade ein, dass u.a. Fahlstad sehr schöne WordPress-Themes zum Download bietet. Natürlich immer Geschmackssache, aber ich finde die Themes sehr nett, werden auch nicht von jedem eingesetzt, d.h. mit kleineren Anpassungen kann man sich damit durchaus ein individuelles Blogtheme erstellen, das nicht jeder einsetzt.

Navigationsmenü einer Webseite:

Das Beispiel zeigt sehr deutlich, wie man es nicht machen soll: Google-Adsense-Anzeigen nahezu perfekt ins Navigationsmenü integrieren, zudem läuft ein Script im Hintergrund, das die Werbung nach einer Weile an anderer Stelle im Menü platziert. Selten habe ich ein solches Negativ-Beispiel gesehen, um Besucher zu verarschen und zu Klicks auf Werbung zu verleiten. Und gemäß den Adsense-Richtlinien ist dieser Einsatz scheinbar sogar erlaubt, zumindest wird nichts gegen eine Integration wie dieser erwähnt. Wäre ja auch nicht sinnvoll, da Google bei jedem Klick kassiert.

(via betamode)

Globale Avatare, die auf gravatar.com Email-Adressen zugeordnet werden können, sind eine feine Sache:
Postet man auf einer Webseite welche das unterstützt, so wird automatisch ein kleines Bildchen angezeigt. Gerade sehr viele Weblogs nutzen diesen Service. Die Integration ist auch sehr einfach:

Man lässt via <img src="xxx"> das Gravatar anzeigen, wobei xxx wie folgt zusammengesetzt wird:

• http://www.gravatar.com/avatar.php?gravatar_id=
• + Email-Adresse des Autors, in MD5 umgewandelt
• + zusätzliche Optionen (siehe How the URL is constructed)

Beispiel-Aufruf für WordPress:

<?php
echo '<div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=' . md5($comment->comment_author_email) . '&rating=PG'
. '&size=40' . '&default=http://www.test.com/mein_leeres_avatar.com' . '" alt="Gravatar" title="Gravatar von '; comment_author(); echo '" /></div>' . "\n";
?>

Problem:

Gravatar.com ist zeitweise stark überlastet und manchmal gar nicht mehr erreichbar. Dies bedeutet, dass die Ladezeiten auf Seiten, welche die Gravatare zur Anzeige bringen, entsprechend verzögert werden.

Caching:

Unter WordPress gibt es das Plugin Gravatars (Skippy), welches mittlerweile verbessert und als Gravatars2 (ZenPax) veröffentlicht wurde.
Das Gravatars-Plugin von Skippy hatte ich längere Zeit im Einsatz, aber dann deaktiviert, da das Caching wohl nicht sauber läuft. Teilweise hatte ich damit massive Performance-Probleme, Beiträge mit mehr als 10 Kommentare brauchten etliche Sekunden, bis sie geladen waren.
Daher hatte ich gehofft, dass Gravatars2 (ZenPax) diese Probleme löst. Allerdings flogen mir beim Testen nach der Aktivierung in der WP-Administration nach dem Klick auf die Plugin-Option „Refresh“ mehrere MySQL-Fehlermeldungen um die Ohren. Auch nicht vertrauenserweckend.

Lösung?

Derzeit habe ich Gravatare abgeschaltet. Ich überlege allerdings, eine PHP-Umsetzung zu entwickeln, die nach einer vorgegebenen Zeit (z.B. 1 Sekunde) den Ladevorgang abbricht und ein Bild mit dem Inhalt à la „Gravatar.com ist zur Zt. langsam bzw. nicht erreichbar“ anzeigt.
Mittel- bis Langfristig bleibt zu hoffen, dass Gravatar endlich von Google oder Yahoo gekauft wird, die dem Dienst dann eine entsprechende Infrastruktur spendieren :-)