CSS 3: Rotating Image Gallery

I've played a little bit with WebKit's new CSS 3 features such as CSS transform and CSS transition and I came up with a funny Rotating Image Gallery.

You need the latest nightly build of WebKit to see the effects in action. But you can also watch it as a video on YouTube:

Go to the original Rotating Image Gallery to try for yourself and look at the source code to see how it was made.

I'll give you a more detailed description of those new CSS effects in an upcoming post, so check back later.

Ist display=“none“ jetzt irrelevant?

Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

HTML 5 Draft Recommendation Screenshot

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Weiterlesen →

Firefox3 kann jetzt auch schüchtern

Der Internet Explorer konnte ja schon seit Längerem schüchtern, doch nun ist auch der Firefox nachgezogen und kann jetzt ebenfalls schüchtern.

Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt... Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch Sollumbrüche in Wörtern. Und zwar solche, bei denen der Trennstrich nur dann angezeigt wird, wenn der Umbruch wirklich benötigt wird. Diese "bedingten Trennstriche", oder im Englischen auch "soft hyphen" genannt, werden durch das Zeilenumbruch-Entity ­ im HTML Text definiert.

Firefox Homepage Screenshot

Im folgenden Beispiel wird das vielleicht deutlich:

Soll­um­brü­che können in Wörtern eingefügt werden, welche ohne bedingte Zei­len­um­brü­che nicht richtig umbrechen

Soft Hyphen = ­ = schüchtern

Gut, damit hätten wir das Rätsel auch geklärt. Aber "schüchtern" finde ich in diesem Zusammenhang gar nicht mal so unangebracht. Denn was auf dem ersten Blick vielleicht verlockend erscheint, nämlich den bedingten Trennstrich in jedem Wort eines Textes unterzubringen, ist natürlich auf dem zweiten Blick mehr als bedenklich.

Damit würde man den HTML Code erheblich aufblähen und die Leserlichkeit von Text im HTML deutlich erschweren. Wer solch einen Text später nach bearbeiten muss, wird sicherlich nicht viel Freude an dieser Arbeit haben.

Darum sollte man den bedingten Trennstrich nur "sehr schüchtern" anwenden, also nur an Stellen, bei denen es sonst zu Problemen in der Darstellung kommen könnte. Ich könnte mir z.B. Label Elemente in einem Formular vorstellen, welche nur eine bestimmte Breite haben sollen und wo man damit zu lange Wörter zum Umbruch zwingen kann, ohne dass das Layout des Formulars zerschossen wird. Hier findet Ihr ein Beispiel dafür, wie man ansprechende Formulare erstellt. Das Gleiche könnte auch auf Spaltenüberschriften einer Tabelle zutreffen, welche nur eine bestimmte Breite haben sollen.

Fazit

Ich finde es gut, dass Firefox 3 nun auch bedingte Trennstriche unterstützt, zumal der IE dies schon seit einigen Jahren kann. Weise und sparsam angewendet, können sie sicherlich sehr hilfreich sein. Doch im Netzt gibt es auch Bedenken darüber, was die Verwendung von bedingten Trennstrichen angeht. Was haltet Ihr davon?

Wie man wirklich ansprechende Formulare erstellt

Eines der wichtigsten Elemente in Webseiten sind Formulare. Ohne Formulare wäre es nicht möglich Informationen vom Anwender auf den Server zu übertragen. Es könnten keine Gästebucheinträge gemacht oder Mails über ein Kontaktformular versendet werden.

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulardesign Screenshot

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben. Weiterlesen →

WordPress 125×125 Pixel Banner Plugin

Wie ich vor einigen Tagen bereits angemerkt habe, ist das 125x125 Pixel Banner Format auch in Deutschland auf dem Vormarsch. Blogs wie Selbständig im Netz, Freetagger, Bloggonaut und der Netgestalter haben damit begonnen, dieses Werbeformat einzubinden und heute möchte ich euch ein kleines WordPress Plugin vorstellen, mit dem sich diese Banner noch einfacher in eure Blogs integrieren lassen.

Das UBD Block Ad Plugin

Uniqueblogdesigns.com, eigentlich mehr für deren WordPress Themes bekannt, hat das UBD Block Ad Plugin für WordPress veröffentlicht. Mit diesem Plugin lassen sich auf einfache Weise die 125x125 Pixel großen Werbebanner in jedes WordPress Blog einbinden.

UBD Block Ad Plugin

Das Plugin ist schnell konfiguriert. Man kann zwischen mehreren Layoutvarianten wählen. So lassen sich Werbeblöcke mit ein oder zwei Spalten erstellen, in denen sich dann bis zu zehn Werbebanner anzeigen lassen.

Besonders interessant finde ich auch, dass sich die Banner automatisch Rotieren lassen. So wird die Reihenfolge der Banner bei jedem Seitenaufruf automatisch geändert und kein Werbepartner benachteiligt, weil dieser sonst nicht an erster Stelle erscheinen würde. Außerdem lassen sich so auf beschränktem Raum mehr Banner anzeigen, da einfach immer wieder Andere eingeblendet werden.

Fazit

Ich habe mich selbst noch nicht entschieden, ob ich in meinem Blog auch 125x125 Pixel Banner einblenden werde. Doch wer dies vor hat, der sollte sich das Plugin auf jeden Fall mal näher ansehen.

Hinweis: Leider funktioniert das Plugin momentan noch nicht mit der aktuellen WordPress 2.6 Version, aber ein Update wird sicher in den nächsten Tagen folgen.

Das Plugin läßt sich hier herunterladen: Download UBD Block Ad Plugin

Update (31.07.2008)

Jetzt gibt es das Plugin auch für die aktuelle WordPress Version 2.6 zum Download!

Posterous – Per Email Bloggen

Ich bin heute auf eine interessante neue Blog-Anwendung gestoßen. Posterous verspricht, eine der einfachsten Anwendungen zu sein, um ein eigenes Blog zu erstellen und mit Inhalten zu füllen. Der Clou dabei ist, dass man alles über Email steuern kann.

Es lässt sich komplett ohne Administrationsoberfläche bedienen. Wenn man ein neues Blog eröffnen möchte, braucht man einfach nur eine Email an eine spezielle Email-Adresse senden. Die Betreffzeile der Email wird dabei als Überschrift veröffentlicht und der Inhalt der Email als Text.

Posterous Screenshot

Für jede Email die man schickt, wird ein neue Blog-Eintrag erstellt. Doch hier fängt es erst an interessant zu werden, denn Posterous hat einige Automatismen eingebaut, welche das Bloggen mit dieser Anwendung wirklich vereinfachen.

Nehmen wir zum Beispiel Bilder. Möchte man ein Bild in den neuen Blogeintrag einbinden, braucht man dieses nur als Anhang an die Mail hängen, und schon erscheint es im neuen Eintrag. Sendet man mehrere Bilder, werden diese als interaktive Bildergallerie dargestellt. Genauso gut kann man aber auch MP3 Dateien mitschicken, welche dann als Flash MP3 Player eingebunden werden. Es werden aber noch eine Vielzahl weiterer Formate unterstützt.

URLs werden ebenfalls automatisch in einen klickbaren Link umgewandelt. Und auch hier haben die Macher weitergedacht. Bindet man z.B. eine URL auf ein YouTube Video ein, so wird für dieses automatisch der Videoplayer von YouTube eingebunden.

Ich finde, dass Posterous wirklich das Potenzial hat um erfolgreich zu werden. Bereits jetzt gibt es unzählige Einträge von tausenden Nutzern. Ähnlich wie auch mit Tumblr lassen sich so sehr schnell kleine Blogs erstellen, ohne erst viele Einrichtungsschritte zu durchlaufen oder gar eigenen Webspace bereitstellen zu müssen.