LivePipe: Javascript Controls für Prototype

David — Tue, 28 Oct 2008 15:29:11 +0000

Wie kommt es, dass ich noch nie von LivePipe gehört habe? Ich muss eindeutig wieder ein bißchen mehr Developer Blogs lesen. LivePipe, das sind Controls die auf Prototype basieren und dem “unobtrousive Javascript” Prinzip folgen. Das bedeutet:

Besucher, die kein JavaScript aktiviert haben können die Webseite trotzdem nutzen
Suchmaschinen können die Inhalte problemlos indizieren

Ich war auf der Suche nach einer einfachen Lösung um Inhalte in CSS Tabs per Javascript anzuzeigen.Dadurch bin ich auf die Komponentensammlung gestoßen. Darunter befinden sich sehr nützliche Controls von denen ich mittlerweile mehrere im Einsatz habe:

CSS Tabs

Der Klassiker: Einfach zu gestaltende CSS-Tabs um zwischen Inhalten umzuschalten. Mittlerweile gibt es schon mehrere Ansätze, auch auf Basis von Prototype. Die Tabs lohnen sich daher nur, wenn man weitere LivePipe Controls einsetzen möchte.

Javascript Windows

Einfache und leicht anpassbare JavaScript Overlay-Fenster, u.a. Hoverboxen und Tooltips. Es lassen sich auch verschiebbbarre Fenster oder Modalfenster (der Rest der Seite wird ausgegraut) erzeugen.

Javascript Scrollbars

Eine meiner Lieblingscontrols von LivePipe. Wenn man nur eine begrenzte Fläche zur Verfügung hat und nicht weiß, ob der Inhalt vielleicht darüber hinaus gehen könnte sind die JavaScript Scrollbars genau richtig. Nicht so hässlich wie die Standard-Scrollbars aber trotzdem voll funktionsfähig. Super…

Markdown Texteditor

Die Markdown Syntax ist eine einfache Möglichkeit um seinen Benutzern die Eingabe von formatierten Texten zu ermöglichen und daraus HTML zu generieren. Der Markdown Editor unterstütz die Formatierungsregeln und bietet eine automatische JavaScript Vorschau.

Javascript Rating Widget

Einfaches Widget um Bewertungen anzuzeigen und dem Benutzer die Möglichkeit zu geben per Ajax ein Rating abzugeben. Die mitgelieferten Standardgrafiken überzeugen mich nicht wirklich, ich bleibe lieber bei den bekannten Sternchen. Aber das Widget ist sehr einfach anzupassen und funktioniert tadellos.

Fortschrittsbalken

Ajax Indikatoren zeigen bekanntlich an, dass gerade Daten übertragen werden. Wie lange der Vorgang noch dauert lässt sich für den Besucher daraus nicht ableiten – dafür ist die ProgressBar genau richtig.

Gerade bei Dateiuploads oder Stapelverarbeitung ein sinnvolles Widget

Kontextmenü

In komplexen Webanwendungen vielleicht sinnvoll – da Standardbesucher aber im Web nicht mit einem angepassten Kontextmenü rechnen, sollte man Funktionen nicht ausschließlich über ein Kontextmenü zur Verfügung stellen

Erweiterte Combobox (“Select Multiple”)

Wenn es darum geht, mehrere Elemente auszuwählen hat man als Entwickler folgende Möglichkeiten: Man erstellt eine mehrzeilige Selectbox in welcher der Benutzer mit Strg + Click mehrere Einträge auswählen kann. Das überfordert aber viele Anwender. Eine andere Möglichkeit ist es, jede Auswahlmöglichkeit als Checkbox aufzuführen. Das wird aber schnell unübersichtlich – Select Multiple geht ist eine weitere, benutzerfreundliche Alternative.

Weitere Bestandteile von LivePipe sind Bibliotheken mit denen die Behandlung von Cookies, Events und Hotkeys extrem vereinfacht werden.

Die Online-Dokumentation von LivePipe ist schon sehr hilfreich auch wenn sie noch einige Lücken hat. Das Framework ist meiner Meinung nach ausgereift und bereit für den produktiven Einsatz. Allerdings sollte man nicht vergessen die JavaScript Dateien zu komprimieren (unnötige Zeichen entfernen) und kombinieren (mehrere Dateien zu einer einzigen zusammenfassen) um das Laden der Seite zu beschleunigen… bei mehreren eingesetzten Widgets kommen sonst schnell recht viele HTTP-Requests zusammen.

Attractive Numbers – Seitentitel optimieren

David — Tue, 07 Oct 2008 06:13:41 +0000

Von den Social Media Portalen sind wir es ja schon gewöhnt, sehr viele populäre Artikel beinhaltendie Aufzählung von irgendetwas. Das spiegelt sich dann natürlich auch im Titel wieder. Einige derzeit prominente Beispiele auf digg sehen etwa so aus:

Das Schreiben von attraktiven Titel die zum Klicken einladen ist eine schwierige Angelegenheit. 2006 hat Michael Gray dafür versucht die Bezeichnung “Titlebait” einzuführen. Hat sich aber nicht so wirklich durchgesetzt… Dennoch wird ein ansprechender Titel als Grundvorraussetzung für erfolgreiche Linkbaits angesehen.

Listen sind eine der erfolgreichsten Strategien um einen Linkbait zu starten überhaupt, ich könnte mich an keinen Tag erinnern nicht mindestens über einen solchen Artikel gestolpert zu sein. Bemerkenswert finde ich, wie sich die Formatierung der Zahlen entwickelt hat:

Anstatt “32 Most Wanted Wordpress Tips” schreibt man “30+ Most Wanted Wordpress Tips”. Diese Schreibweise übt eine höhere Anziehungskraft auf den Leser aus als eine prezise, aber “unauffällige” Zahl. Dadurch erhält der Autor mehr Clicks, mehr Leser, mehr Erfolg.

Warum hat sich diese Schreibweise sonst nirgends durchgesetzt?

Die meisten Linkbaits werden für Blogs geschrieben (und vll. irgendwann später mal per 301 umgeleitet), und wie schlecht diese sich (zumindest hierzulande) monetarisieren lassen sollte ja bekannt sein.

Dabei könnte man dieses Schema doch auch auf fast jeder anderen Webseite einsetzen. Beispielsweise in den Google-Suchergebnissen sollte die Clickrate bei ansprechend gestalteten Titeln deutlich höher sein. Auflistungen gibt es fast in jedem Projekt – Seien es Downloads in einem Archiv, Artikel in einem Weblog oder Produkte in einem Onlineshop.

So könnten aus “Software Downloads“ “666+ Software Downloads” werden, aus “Archiv für SEM” macht man “50+ Artikel zu SEM” und “Gartenstühle – Gartenmöbel, Stühle …” werden zu “200+ Gartenstühle – Gartenmöbel, Stühle…”

Damit man nicht immer alles manuell überarbeiten muss (was zeitlich irgendwann einfach nicht mehr machbar ist) habe ich mir unter Berücksichtung vieler erfolgreicher Linkbait-Titel ein Schema zusammengestellt, das als Grundlage für eine Funktion zur Zahlenformatierung dienen kann:

Unter 10: Top 5, 7, Top 10
Zwischen 10 und 100:
- Vielfache von 11 (11, 22, 33, …)
- Vielfache von 25 (25, 50, 75)
Über 100
- 50er Abstufungen (150, 200, 250, …)
- Vielfache von 111 (111, 222, 333)

Natürlich kann man diese Zahlenformatierung nicht nur in Seitentitel verwenden, auch in der Metadescription, in AdWords Anzeigen oder als Überschriften is das ganze einsetzbar.

Webworking Blog » Webentwicklung