Vitaly Friedman 17. August 2006

Einen Feed-Aggregator entwickeln

Kein Beitragsbild

Ein Feed-Aggregator verspricht rasche Übersicht über ein gewähltes Themengebiet oder populäre Quellen. Das können Sie Ihren Lesern oder Kunden auch bieten.

Um was geht es? Schauen Sie sich diese Beispiele an. Wir bauen es nach:

  • Feed Aggregator Live von Vitaly Friedman
  • Feed Aggregator Popurls von Thomas Marban

In der Ära des allgegenwärtigen Web 2.0 wird fleißig gesammelt, getaggt und in Listen zusammengestellt. Egal, ob es sich um Links zu lesenswerten Beiträgen, beeindruckenden Bildern oder einmaligen Videos – oder gar MP3s – handelt: eine Linksammlung ist ein potenzieller Buzz-Verursacher und das wissen gescheite Blog-Betreiber zu schätzen. Dementsprechend entstehen jeden Tag zahlreiche „Top“, „Most“, „Best“ und „Round-Up“-Beiträge, die von trägen Benutzern nur zu gerne aufgenommen und bookmarked werden.

Doch in der Regel sind solche Linkssammlungen statisch. Sie verändern sich nicht oder werden manuell aktualisiert, was mit viel Aufwand verbunden sein kann. Möchte man sich diese Arbeit sparen und von fleißigen Crawlern die passenden Inhalte aus dem Netz automatisch beziehen, wird man eine dynamische Alternative suchen müssen.

Dabei wird man schnell fündig. Einen interessanten Lösungsansatz bietet ein Phänomen des Web 2.0 – der so genannte Feed-Aggregator.

Was ist ein Feed-Aggregator?
Ein Aggregator – sprich Datensammler – soll dem Besucher dazu verhelfen, sich besser in der unüberschaubaren Fülle der Daten zu orientieren und so die interessierenden Informationen schneller und leichter zu finden. Zu diesem Zwecke werden bei Feed-Aggregatoren RSS-Feeds einer oder mehreren Quellen automatisch und regelmäßig gescannt und auf die Aktualisierungen hin überprüft. Sollte sich ein Feed verändert haben, so werden die neuen Beiträge abgelesen, gegebenenfalls verkürzt, in die gewünschte Form gebracht und dem Besucher zusammen mit Dutzenden weiterer Beiträge zur Auswahl gestellt.

Werden Linkssammlungen vom Autor manuell zusammengestellt, muss man sich bei Feed-Aggregatoren auf vertrauenswürdige Quellen verlassen können. Damit ein Aggregator qualitativ wird und bleibt, soll er lesenswerten Inhalt in regelmäßigen Zeitabständen liefern.

Hat man nun die passenden Quellen gesammelt, stellt sich die Frage, wie das Konzept vernünftig umgesetzt werden soll. Wie realisiert man die automatische Aktualisierung von Daten? Und wie erstellt man einen automatisch generiertes RSS-Feed?

Live: ein aggregator deutschsprachiger web-dev-ressourcen

Um diese Fragen zu beantworten, werfen wir einen Blick auf das Projekt Live, das ich vor wenigen Monaten ins Leben gerufen habe – mit dem Ziel, die wesentlichen deutschsprachigen Ressourcen, die der Webentwicklung und dem barrierefreiem Webdesign gewidmet sind, unter einem Dach und Fach zu sammeln.

1. Problemstellung und Erstellung des Layouts
Jede Idee braucht Zeit. Fängt man an, ein neues Konzept ohne grundlegende Vorüberlegung zu realisieren, so stößt man früher oder später auf unerwartete Probleme, die die Entwicklung des Projekts verlangsamen und die Motivation untergehen lassen. Um dies zu verhindern, überlegt man sich zuerst, was genau man der Öffentlichkeit anbieten möchte und welche Funktionalität vom Projekt erwartet wird.

„Live“ sollte ganz bestimmte Informationen in ganz bestimmter Form liefern und mit möglichst wenig Aufwand realisiert werden. Ganz im Geiste der so genannten Pareto-Verteilung erhoffte ich, mit wenigen ausgewählten Feeds ein optimales Ergebnis – eine Presseschau der lesenswerten Beiträge zum Thema „Webdesign“ im deutschsprachigen Raum – zu erzielen.

Zu diesem Zweck sollten 12 exquisite RSS-„Boten“ mit ihren Botschaften für regelmäßige Aktualisierung des Aggregators sorgen; die Daten sollten auf dem Server im Cache gespeichert und beim Bedarf (falls die Seite geladen wird) alle 15 Minuten aktualisiert werden.

Pareto-Verteilung
Die Pareto-Verteilung beschreibt das statistische Phänomen, wenn eine kleine Anzahl von hohen Werten einer Wertemenge mehr zu deren Gesamtwert beiträgt, als die hohe Anzahl der kleinen Werte dieser Menge.Pareto untersuchte die Verteilung des Volksvermögens in Italien und fand, dass ca. 80% des Vermögens bei ca. 20% der Familien konzentriert war. Banken sollten sich also vornehmlich um diese 20% der Menschen kümmern und ein Großteil ihrer Auftragslage wäre gesichert. Daraus leitet sich das Pareto-Prinzip ab, auch „80-zu-20-Regel“, „80-20-Verteilung“ oder „Pareto-Effekt“ genannt. Es besagt, dass sich viele Aufgaben mit einem Mitteleinsatz von ca. 20% zu 80% erledigen lassen. Quelle: Wikipedia

Im Gegensatz zu den üblichen Datensammlern, die sich in der Regel auf die Anzeige der Links beschränken, ohne sich um die begleitende Information zu kümmern, wollte ich dem Besucher eine detaillierte Vorschau anbieten. Dafür sollten neben Einleitungen zu Beiträgen auch „floating tooltips“ mit erweiterter Einleitung angezeigt werden. Als Vorlage diente der von Thomas Marban zur Verfügung gestellte Javascript, der auch bei Popurls zum Einsatz kommt.

Und wie sieht’s in Praxis aus?
ie Theorie schien keine wesentlichen Probleme bereiten zu haben, doch in der Praxis müsste man ein klar strukturiertes und benutzerfreundliches Design Interface entwerfen, das dem Benutzer einfach und zugänglich erschien. Man hatte also – wie öfters – einen vernünftigen Kompromiss zwischen Qualität und Quantität zu suchen, der zugunsten Lesbarkeit der zu präsentierenden Daten ausfallen würde.

Da eine Fülle von Informationen im Spiel war, musste man dafür sorgen, dass die Schriftgröße nicht zu klein gewählt wird, aber auch nicht zu groß ist: das Scrollen gehörte nie zu den Lieblingsbeschäftigungen der Besucher, die dadurch nur ungeduldiger und skeptischer werden.

Schriftgröße im Vergleich: heller Hintergrund | dunkler Hintergrund (neues Fenster)

Nach Herumspielen mit dem Typetester habe ich Lucida Sans Unicode und Verdana genauer unter die Lupe genommen und mich anschließend für die erstere der beiden Schriftarten entschieden – obwohl Verdana mittlerweile als „Standard-Internet-Font“ gilt und extra für das Web entwickelt wurde.

Neben Schriftgröße spielt auch der hohe Kontrast zwischen Hintergrundfarben und Textfarben der Seite eine wesentliche Rolle. Dieser trägt entscheidend dazu bei, dass der Inhalt klar zum Ausdruck gebracht wird. Um die Links von Einleitungen leicht unterscheiden zu können, wurde ein Kontrast zwischen dem passiv dunklen Hintergrund und ausgeprägten, lebhaften Farben der Links beziehungsweise des Textes gewählt. Damit aber auch verschiedene Quellen leicht auseinander zu halten sind, wurden Links in verschiedenen Blöcken mit verschiedenen Farben verliehen. Das Ergebnis ließ sich mit GrayBit überprüfen und entsprechend anpassen.

Live: Text-Block

Weiterhin sollten aggregierte Beiträge kompakt auf der Seite verteilt werden, den Besucher also sich nicht überwältigt oder irritiert fühlen lassen und ihm genug „emptyspace“ zum bequemen Lesen einräumen. Aus diesem Grunde wurden Beiträge auf drei vertikale Blöcke verteilt, wobei nur die letzten 4-5 Meldungen von jeder Quelle angezeigt werden sollten.

Live: Text-Bloecke

Da man aber im Laufe der Zeit mit wachsender Anzahl der „Boten“ zu rechnen hatte, war die Flexibilität des Codes mehr als angebracht. So wollte ich die Menge der angezeigten Beiträge, ihre Länge sowie die „teilnehmenden“ RSS-Feeds leicht verwalten können. Ohne das Rad neu erfinden zu wollen, habe ich CaRP: Caching RSS Parser (die kostenlose Version CaRP Free hat vollkommen gereicht; Voraussetzungen: PHP-Unterstützung, MySQL-Datenbank) zu Rate gezogen, einen der wenigen Skripte, der durch seine Einfachheit und Funktionalität zu überzeugen wusste.

Weiterhin wollte ich die Beiträge teilnehmender Feeds automatisch in einen Feed bündeln, um die Leser des Aggregators über die neuen Beiträge informieren zu können. Nach langem Ausprobieren verschiedener Dienste habe ich mich letztendlich mit dem kleinsten Übel abfinden müssen. Unter zahlreichen Diensten, die persönliche RSS-Digests erstellen lassen, gab es viele, die sich mit deutschen Umlauten nicht verständigen konnten, eigene Werbung dazwischen schalteten, als Autoren der Beiträge versehentlich den eigenen Namen stehen ließen oder aber die Anzahl der Posts in einem Feed begrenzten. Am Ende blieben neben kostenpflichtigem FeedDigest zwei kostenlose Dienste übrig – Feedblender und Feedshake. Beide haben Nachteile – einerseits liefern sie fehlerhaften XML-Code, lassen sich also nicht validieren und können somit Feed-Readern Probleme bereiten. Anderseits kann man Feeds beim Feedblender nach dem Erstellen nicht mehr verändern, während die Namen der Autoren beim Feedshake zum Teil falsch abgelesen werden. Dafür verfügt Feedshake über ein einfaches Feed-Management-Tool, mit dem man beliebig viele Feeds leicht verwalten kann, was meine Entscheidung zugunsten Feedshake ausfallen ließ.

Anschließend sollten alle Komponenten des Aggregators in einem minimalistischen und schlichten Layout zusammengefügt werden, um die aggregierten Daten in Vordergrund treten zu lassen. Demzufolge wurde ein simples „fluid“ Layout erstellt und mit kleiner Prise CSS + XHTML bestreut. Nach wenigen Stunden lag also das komplette Konzept auf dem Tisch.

2. Umsetzung und Fertigstellung
Ein Webdesign mag beeindrucken und erstaunen, doch ohne ordentliche Funktionalität wird der eilige Besucher sich nicht lange auf der Seite aufhalten. Als XHTML-Markup validiert war und das Layout meine Anforderungen erfüllte, hieß es, CaRP, „floating tooltips“ und einen automatisch generierten RSS-feed in die erstellte Seite einzubinden.

CaRP konfigurieren…
Um CaRP herunterladen zu können, muss man sich einer seltsamen Registrierung unterziehen. Der Entwickler zwingt den Benutzer dazu, „freiwillig“ ein Newsletter zu abonnieren und sich über eigene E-Mail zwei mal zu authentifizieren.

Folgt man der Installationsanleitung von CaRP, so wird die Installation des Skripts zu einem Kinderspiel: die passende Version herunterladen, hochladen, Setup starten, Anweisungen folgen, fertig. Nicht viel trickreicher ist auch seine Anwendung, die durch eine Fülle von Beispielen (siehe Online-Documentation und Carp Documentation Index für weitere Information) veranschaulicht und erklärt wird.

Ist CaRP erfolgreich installiert, so genügt es, den Quellcode des Layouts mit der Zeile

 
<?php
require_once '/DER/ABSOLUTE/PFAD/ZU/carp/carp.php';
?>

zu erweitern, um die notwendigen PHP-Bibliotheken dem Skript zugänglich zu machen.

By default zeigt CaRP die Meldung „Newsfeed display by CaRP“ nach jedem bearbeiteten Feed an. Diese lässt sich deaktivieren, indem man vor der Anzeige der CarpCacheShow-Anweisung ein Stückchen Code einfügt:

       CarpConf('poweredby','');

Die Anzahl der Beiträge, ihre Länge und weitere Details lassen sich mit Hilfe der Funktion CarpConf festlegen.

Für „Live“ wollte ich ungeordnete Listen (ul) für eine bessere und klare Strukturierung der Daten verwenden. Somit wurde folgende Konfiguration gewählt:

      
CarpConf('ilinktitles',2); // fuege zu jedem Link title Attribut hinzu,
s. ilinktitles
CarpConf('bitems','<ul>'); // fügt '<ul>' vor dem
Inhalt des Blocks einer Quelle
CarpConf('aitems','</ul>'); // fügt '</ul>' nach dem
Inhalt des Blocks einer Quelle
CarpConf('bi','<li>'); // fügt '<li>' vor dem Inhalt
jedes Beitrags einer Quelle
CarpConf('ai','</li>'); // fügt '</li>' nach dem
Inhalt jedes Beitrags einer Quelle
CarpConf('iorder','link,desc');
   // lege die Ordnung fest: zuerst wird ein Link, dann
die Einleitung angezeigt
CarpConf('poweredby',''); // "Newsfeed display by CaRP" wird
ausgeschaltet
CarpConf('maxitems',5); // es dürfen höchstens 5
Beiträge eines Feeds angezeigt werden
CarpConf('maxidesc',200); // die Einleitung darf höchstens 200
Zeichen enthalten
CarpConf('atruncidesc','... &raquo; '); // der Einleitung soll
...» folgen

Liegen die Einstellungen fest, so wird die Aktualisierung, automatisches Caching und Anzeige der „frischen“ Daten durch die Zeile

       CarpCacheShow('http://www.drweb.de/rss.xml');

zum Laufen gebracht, wobei in Klammern die Adresse einer zu aggregierenden Quelle steht.

Wie erwartet, gilt dies für jede Quelle. Die Einstellungen können aber auch für jeden RSS-Boten einzeln angepasst werden, indem man vor dem Aufruf der CarpCacheShow-Funktion die gewünschte Anpassung implizit hineinschreibt. Etwa so:

       <?php
CarpConf('maxitems',4);
CarpCacheShow('http://www.drweb.de/rss.xml');
?>

Allgemein gültige Einstellungen müssen nur einmal angegeben werden.

Außerdem verfügt das Skript über eine Fülle von weiteren Funktionen, die – wie schon erwähnt – in der offiziellen Anleitung ausführlich beschrieben werden.

Floating Tooltips einbauen…
Der von Thomas Marban entwickelte Javascript „Floating Tooltips“ erzeugt beim Hovern der Links einen schwebenden Div-Block „nicetitle“, der sich durch CSS genau festlegen lässt. Der Text, den man in diesem Block anzeigen möchte, wird in dem title-Attribut des <a>-tags versteckt. So versieht das Codestück

      
<a href="http://www.drweb.de " title="Dr. Web Magazin">Dr.
Web</a> 

den Link zu www.drweb.de mit einem schwebenden Menü, das den Text „Dr. Web Magazin“ enthält.

Live: Floating Tooltips

Um den Skript tooltips.js einzubinden, genügte es also, neben der Zeile

      
<script type="text/javascript" src="tooltips.js"></script>

im Head-Tag dafür zu sorgen, dass „title“-Attribute der angezeigten Headlines eine erweiterte Einleitung zu dem entsprechenden Beitrag enthalten. Dafür musste man den Quellcode der CaRP-Bibliothek carpinc.php entsprechend anpassen. Auch, wenn die Lizenz es explizit verbietet, jegliche Hinweise zur Modifizierung des Skripts zu veröffentlichen, lässt sich anmerken, dass die Funktion FormatLink für die Ausgabe der Überschriften zuständig ist.

Quellen in einem Feed bündeln…
Nach einer kurzen Registrierung bei Feedshake lassen sich beliebige RSS-Digests automatisch erstellen. Die Feeds werden über Leerzeichen eingegeben, auf dem Feedshake-Server abgelegt und permanent aktualisiert.

Feedshake

Fazit
Nach zwei Tagen intensiver Arbeit erschien „Live“ im Netz und wurde bei mehreren thematisch verwandten Blogs erwähnt. Erfreulicherweise stieß die erste Version sowohl auf positive als auch konstruktive negative Kritik, wobei an der ersten Stelle die Lesbarkeit bemängelt wurde. Entsprechend wurde das Layout im Laufe der weiteren Wochen ständig angepasst. Auch an der aktuellen Version des Projekts wird sorgfältig gearbeitet. Vernünftige Vorschläge und Hinweise auf interessante Quellen werden gerne entgegengenommen.

Es hat sich also gezeigt, dass ein tüchtiger Feed-Aggregator mit wenigen Mitteln und minimalem Zeitaufwand realisiert werden kann. Mit CaRP ließen sich RSS Caching und Präsentation der Daten leicht festlegen und anpassen; mit den „floating tooltips“ konnte man mehr Information über den Inhalt des Beitrags verraten lassen und Feedshake erledigte die Zusammenstellung der Beiträge in einem Feed.

Ob „Live“ erfolgreich wird, bleibt den Besuchern der Seite zu entscheiden, doch die gewünschte Funktionalität wird durch das zusammengestellte Gefüge zweifellos geliefert. Und sie wird man in der Ära des Web 2.0 mit Sicherheit gebrauchen können – mindestens für eigene Zwecke. (tm)

Eine letzte Anmerkung: Nicht jede Nachrichtenquelle oder jeder Blogbetreiber schätzt es Lieferant eines Aggregators zu sein. Insbesondere Blogger sind teils recht empfindlich. Man sollte vorher eine Erlaubnis einholen, um späteren Streitereien – die nicht selten öffentlich ausgetragen werden – aus dem Wege zu gehen.

Erstveröffentlichung 17.08.2006

Vitaly Friedman

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.