RSS, ein standardisiertes Format zur Verbreitung von Nachrichten, ist dafür da um von RSS-Readern gelesen und aufbereitet zu werden. Dementsprechend unlesbar sehen RSS-Feeds auch aus, wenn ein Benutzer sich ohne entsprechendem Plugin oder Software auf den Feed verirrt. XSLT, eine Teilfunktion der Extensible Stylesheet Language zur Transformtion von XML, kann helfen RSS-Feeds auch für Menschen leicht lesbar zu machen.

Das XML eines RSS-Feeds beinhaltet keinerlei Informationen wie der Feed dargestellt werden soll, sondern nur strukturierte Daten.

Dementsprechend verwirrend kann es für einen Benutzer sein, wenn er sich irrtümlich auf einen RSS-Feed „verirrt“ keine Plugins zur Aufbereitung der Feeds installiert hat und auch sonst nicht mit RSS vertraut ist.

Ein unformatierter RSS2-Feed sieht im Browser ungefähr so aus:

Der Screenshot wurde auf Basis dieses Beispiel-Feeds erstellt. Wer keine Software für das Handling des Feeds installiert hat wird ein ähnliches Ergebnis bekommen wie im Screenshot. Für einen User also nicht gerade einladend. Natürlich kann man dem entgegenhalten, dass RSS-Feeds an sich dafür gedacht sind von Software gelesen und formatiert zu werden, nicht von Menschen. Aber nicht jeder User hat entsprechende Software installiert oder ist mit RSS vertraut.

Unformatierte RSS Feeds haben also folgende Nachteile:

• Nur schwer lesbar

• Keine Möglichkeit einen Link zu einem Artikel per Mouse-Klick zu öffnen

• Corporate Design wird unterbrochen und die Website sieht für einen nicht mit RSS vertrauten Besucher „fehlerhaft“ aus.

RSS-Feeds müssen aber nicht so aussehen. Ein Beispiel für einen formatierten und aufbereiteten Feed ist der RSS2-Feed von Typo3.org. Dies wird mit XSL Transformations (XSLT) erreicht. XSLT ist eine Programmiersprache zur Transformation von XML-Dokumenten. Es baut auf der logischen Sturktur eines XML-Dokumentes auf und erlaubt die Definition von Umwandlungs-Regeln.

Grundsätzlich hat ein RSS2-Feed folgende Struktur:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="beispiel-rss-2-html.xsl" media="screen" ?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Feed-Titel</title>
    <link>www.meine-seite.net</link>
    <description>Beschreibung des Feeds</description>
    <language>de</language>
    <image>
      <title>Feed-Titel</title>
      <url>http://www.meine-seite.net/mein-feed-icon.gif</url>
      <link>www.meine-seite.net</link>
      <width>254</width>
      <height>39</height>
      <description>Beschreibung des Feeds</description>
    </image>
    <lastBuildDate>Zeitpunkt des letzten Updates</lastBuildDate>
    <item>
      <title>Titel des Artikels</title>
      <link>Link zum Artikel</link>
      <description>Artikel-Teaser (Zusammenfassung)</description>
      <content:encoded>Artikel-Text</content:encoded>
      <category>Artikel-Keyword</category>
      <category>Artikel-Keyword</category>
      <author>Autor</author>
      <pubDate>Erstellungsdatum des Artikels</pubDate>
    </item>
  </channel>
</rss>

Eine Beschreibung der Elemente von RSS2-Feeds ist hier zu finden: http://www.rssboard.org/rss-specification.

Diese Struktur gilt es per XSLT so zu transformieren, dass aus dem XML leicht lesbares, formatiertes HTML wird.

Aus XML wird HTML

Mit XSLT ist es möglich Regeln zu definieren, die den XML-basierenden RSS-Feed mit HTML-Tags aufbereiten. Die meisten modernen Browser verfügen über einen integrierten XSLT-Prozessor. Die Beispiele in dem Artikel beziehen sich auf RSS2, können aber nach geringfügiger Anpassung für andere Feed-Strukturen verwendet werden.

Grundsätzlich passiert bei der Transformation folgendes:

1. Der Browser bekommt vom Server den RSS-Feed
2. Anhand der im Feed angeführten XSL-Datei wird der Feed transformiert (in diesem Fall mit HTML-Tags formatiert)
3. Der formatierte Feed wird im Browser lesbar dargestellt.

XSL-File in den RSS-Feed einbinden

Damit der Browser weiss, welche Transformations-Regeln er anwenden muss, muss das XSL-File in den RSS2-Feed eingebunden werden. Die zweite Zeile verweist auf die Datei mit den Transformations-Regeln:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="beispiel-rss-2-html.xsl" media="screen" ?>

Um dies in Typo3 zu erreichen ist es am einfachsten das tt_news template für die RSS-Feeds entsprechend anzupassen.

Mehr ist am RSS-Feed selbst nicht zu ändern. Alle Regeln für die Aufbereitung und Formatierung des Feeds stehen im XSL-File, das in diesem Beispiel beispiel-rss-2-html.xsl heisst.

Transformationsregeln im XSL-File

Mit XSLT sieht der Beispiel-RSS-Feed schon aufgeräumter auf:

Die Formatierung des Feeds wurde mit folgender Transformation erreicht (Erklärung weiter unten):

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
>
	<xsl:template match="rss">
		<html>
			<!-- ===Template des HTML-Head-Parts=== -->
			<head>
				<title>
					<xsl:value-of select="/rss/channel/title"/>
				</title>
				<!-- ===Stylesheet einbinden. Gegebenenfalls muss absoluter Pfad verwendet werden === -->
				<link rel="stylesheet" href="rss-xsl-styles.css"/>
			</head>
			<!-- ===Template des HTML-body-Parts=== -->
			<body>
				<div class="full-feed">
					<!-- Hier werden die anderen Templates hinein genierert. Siehe weiter unten -->
					<xsl:apply-templates/>
				</div>
			</body>
		</html>
	</xsl:template>
	
	<!-- ===TEMPLATE FUER DAS CHANNEL-ELEMENT -->
	
	<xsl:template match="channel">
	<div id="header">
		<h1>
		<xsl:element name="a">
			<xsl:attribute name="href">
				<xsl:value-of select="link" />
			</xsl:attribute>
			<xsl:element name="img">
				<xsl:attribute name="src">
					<xsl:value-of select="image/url"/>
				</xsl:attribute>
				<xsl:attribute name="alt">
					<xsl:value-of select="title"/>
				</xsl:attribute>
			</xsl:element>
		</xsl:element>
		</h1>
		<p><strong>Dies ist ein per XSL in HTML transformierter Beispiel-RSS2-Feed. Die Beschreibung wie das geht finden sie <a href="http://www.webkontext.net/">hier</a>. Weitere Artikel von <a href="http://www.webkontext.net/">WEBKONTEXT.net hier</a></strong></p>
		<xsl:value-of select="description"/><br />
		Letzte &#196;nderung: <xsl:value-of select="substring(pubDate,5,18)"/><br />
	</div>
	
	<!-- ===TEMPLATE FUER DIE ITEM-ELEMENTE -->

	<xsl:apply-templates select="item"/>
	</xsl:template>
	<xsl:template match="item">
		<div class="feed-item">
			<h2>
			<xsl:element name="a">
				<xsl:attribute name="href">
					<xsl:value-of select="link" />

				</xsl:attribute>
				<xsl:value-of select="title" />
			</xsl:element>
			</h2>
			<p>
			<xsl:value-of select="description"/>
			<span class="morelink">
				&#160;
				<xsl:element name="a">
					<xsl:attribute name="href">
						<xsl:value-of select="link" />
					</xsl:attribute>[mehr...]
				</xsl:element>
			</span>
			</p>
			<xsl:if test="pubDate">
				<span class="itempubDate">Datum: <xsl:value-of select="substring(pubDate,5,18)"/></span>
			</xsl:if>

		</div>
	</xsl:template>
</xsl:stylesheet>

Das für die Formatierung des RSS-Feeds verwendete XSLT sieht auf den ersten Blick etwas kompliziert aus, allerdings brauchen wir für die Transformation des RSS-Feeds nur einige wenige Regeln. Eine vollständige Beschreibung von XSLT findet sich hier. Auch die Wikipedia bietet einen kurzen Überblick über die XSLT.

Im Wesentlichen brauchen wir für die Transformation von RSS nach HTML nur eine Hand voll Regeln im XSLT:

xsl:template: Das Template wird immer angewendet, wenn der Name eines Elements dem angegebenen entspricht: <xsl:template match="channel"> im XSLT bedeutet also, dass das eingeschlossene Element auf Elemente namens „Channel“ angewendet wird.

xsl:apply-templates: Wendet an dieser Stelle die Templates an. Das Attribut select spezifiziert, welche Elemente verarbeitet werden sollen: <xsl:apply-templates select="item"> bedeutet also, dass an dieser Stelle Item-Elemente eingefügt werden sollen.

xsl:value-of: Fügt an dieser Stelle den Wert des per Attribut select spezifizierten Elements ein. Beispielsweise fügt <xsl:value-of select="/rss/channel/title"/>.den Wert des Elements Title des Elements Channel ein. Da XML als Baum strukturiert ist, kann im select-Attribut der komplette Pfad zu einem Element angegeben werden.

xsl:element und xsl:attribute: Diese setzen bei der Transformation Tags zusammen. Vollständige Tags können auch direkt im XSLT angeführt werden, sobald jedoch Attribute des Tags anhand von Werten im XML gesetzt werden müssen, kommen diese Regeln zur Anwendung.

Diese Zeilen markieren das XML-File als XSLT:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
>

Da ein RSS2-Feed mit einem Element Namens RSS umschlossen ist, wird als erstes ein Template für dieses Element deklariert. Dies geschieht mit

	<xsl:template match="rss">
		<html>
			<!-- ===Template des HTML-Head-Parts=== -->
			<head>
				<title>
					<xsl:value-of select="/rss/channel/title"/>
				</title>
				<!-- ===Stylesheet einbinden. Gegebenenfalls muss absoluter Pfad verwendet werden === -->
				<link rel="stylesheet" href="rss-xsl-styles.css"/>
			</head>
			<!-- ===Template des HTML-body-Parts=== -->
			<body>
				<div class="full-feed">
					<!-- Hier werden die anderen Templates hinein genierert. Siehe weiter unten -->
					<xsl:apply-templates/>
				</div>
			</body>
		</html>
	</xsl:template>

Die innerhalb des Templates angeführten Elemente werden 1:1 ins generierte HTML übertragen, in diesem Fall also das Head und Body.

Das XSLT-Element <xsl:value-of select="/rss/channel/title"/> zwischen den HTML-Title-Tags übernimmt den Wert des RSS-Titels und fügt ihn als HTML-Title ein. Als nächstes wird das externe CSS-File eingebunden.

Im HTML-Body-Element wird ein div, also ein Container, mit der Klasse full-feed generiert. Das <xsl:apply-templates/> innerhalb des body-tags weist den XSLT-Prozessor an dort die Templates für den header und die Items des RSS-Feeds anzuwenden.

	<xsl:template match="channel">
	<div id="header">
		<h1>
		<xsl:element name="a">
			<xsl:attribute name="href">
				<xsl:value-of select="link" />
			</xsl:attribute>
			<xsl:element name="img">
				<xsl:attribute name="src">
					<xsl:value-of select="image/url"/>
				</xsl:attribute>
				<xsl:attribute name="alt">
					<xsl:value-of select="title"/>
				</xsl:attribute>
			</xsl:element>
		</xsl:element>
		</h1>
		<p><strong>Dies ist ein per XSL in HTML transformierter Beispiel-RSS2-Feed. Die Beschreibung wie das geht finden sie <a href="http://www.webkontext.net/">hier</a>. Weitere Artikel von <a href="http://www.webkontext.net/">WEBKONTEXT.net hier</a></strong></p>
		<xsl:value-of select="description"/><br />
		Letzte &#196;nderung: <xsl:value-of select="substring(pubDate,5,18)"/><br />
	</div>

Dieses Template transformiert den Header, (also Titel, Beschreibung, Logo usw.) des RSS-Feeds. Der Header wird mit einem div mit der Klasse header umschlossen. Der Kopfbereich wird so formatiert, dass in der Überschrift das Logo des Feeds erscheint. Wer dem RSS-Feed kein Icon zugewiesen hat, kann das Element zur Generierung der img-Tags einfach löschen und durch ein <xsl:value-of select="title"/> ersetzen.

Zum Schluss werden noch die einzelnen Artikel-Einträge formatiert. Diese befinden sich im RSS-Feed in Tags mit dem Namen <Item> eingeschlossen. Dafür ist folgender Bereich im XSL-File zuständig:

	<!-- ===TEMPLATE FUER DIE ITEM-ELEMENTE -->

	<xsl:apply-templates select="item"/>
	</xsl:template>
	<xsl:template match="item">
		<div class="feed-item">
			<h2>
			<xsl:element name="a">
				<xsl:attribute name="href">
					<xsl:value-of select="link" />

				</xsl:attribute>
				<xsl:value-of select="title" />
			</xsl:element>
			</h2>
			<p>
			<xsl:value-of select="description"/>
			<span class="morelink">
				&#160;
				<xsl:element name="a">
					<xsl:attribute name="href">
						<xsl:value-of select="link" />
					</xsl:attribute>[mehr...]
				</xsl:element>
			</span>
			</p>
			<xsl:if test="pubDate">
				<span class="itempubDate">Datum: <xsl:value-of select="substring(pubDate,5,18)"/></span>
			</xsl:if>

		</div>
	</xsl:template>

Jeder Artikel-Eintrag wird für die Ausgabe so formatiert, dass er von einem div mit der Klasse feed-Item umschlossen ist. Darin wird der Titel des Artikels als h2-Überschrift formatiert. Weiters wird der Teaser-Text (also die description des Artikel-Items ausgegeben und mit einem Link zum eigentlichen Artikel versehen. Das ist auch einer der wesentlichen Vorteile einer per XSLT-transformierten und HTML-Formatierten Ausgabe eines RSS-Feeds: Die URLs der Artikel werden als Link dargestellt und sind damit auch ohne RSS-Reader leicht öffenbar.