Mit freundlicher Genehmigung von tagesschau.de möchte ich Ihnen zeigen, wie Sie bspw. mit XSL einen topaktuellen Newsticker in Ihre Site einbauen können, ohne irgendwelche Anmeldungen oder Spam über sich ergehen lassen zu müssen.
Punkt eins den wir auf jeden Fall brauchen sind zunächst die News selber. Welches Format bietet sich hier am besten an? Natürlich XML Daten. Diese News bekommen wir über die URL
Alles was wir nun noch brauchen ist das XSL Dokument, das uns den Ticker erzeugt.
Die News sind in den Elementen Items untergrbracht, die folgende Struktur haben:
<item rdf:about="..."> <dc:format>...</dc:format> <dc:language>...</dc:language> <dc:publisher>...</dc:publisher> <dc:rights>...</dc:rights> |
Also... alles was wir noch tun müssen ist:
Ein XSL File zu erstellen, das uns die gewünschten Infos ausgibt, sowie unserere eigentliche HTML Seite, in der wir per JavaScript das Ergebnis des XSL Files holen.
Das könnte beispielsweise so aussehen:
<table width="100%" bgcolor="orange" >
<tr>
<td>
<marquee><font size="1pt" face="Tahoma,Arial"> '
<xsl:for-each select="//*[name()='item']">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="child::*[name()='link']"/>
</xsl:attribute>
<xsl:value-of select="child::*[name()='title']"/>
</xsl:element> + + + +
</xsl:for-each></font></marquee>
</td>
</tr><br/></table> |
Die Laufschrift erzeuge ich hier der Einfachheit halber mit dem <marquee> Tag - man möge mir verzeihen. Im "for-each" Tag suche ich anschliessend alle Items -sprich alle News - und lasse mir für jede gefundene News den Titel ausgeben. Damit wir nicht nur die Nachrichtenheader sehen, baue ich aus den <link> Tags noch einen Link zu den Originalseiten der Tagesschau.de.
Voila... und schon haben wir den Newsticker.
Alternativ liessen sich die News auch als "statische" Übersicht darstellen.
<xsl:for-each select="//*[name()='item']">
<font size="1pt" face="Tahoma,Arial">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="child::*[name()='link']"/>
</xsl:attribute>[<xsl:value-of select="substring(child::*[name()='dc:date'],12,5)"/>]_<xsl:value-of select="child::*[name()='title']"/> <br/>
</xsl:element></font>
</xsl:for-each> |
Wie Sie sehen können, habe ich das Datum ein bisschen gekürzt. Da die Infos immer sehr aktuell sind, habe ich mit der Funktion substring nur noch die Uhrzeit ausgeben lassen.
Die Html Seite ist relativ einfach gestrickt:
<html>
<style>
a:hover {color: #000000;font-weight:bold;}</style>
<script language="javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("http://www.tagesschau.de/xml/tagesschau-meldungen/0,,,00.xml "); // Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("tagesschau.xsl"); function news()
{
document.all.ticker.innerHTML =(xml.transformNode(xsl));
} </script>
<body onload="news()">
<div id="ticker" name="ticker"/>
</body>
</html> |
Bitte beachten sie aber beim "Einbau" auf den Hinweise von tagesschau.de, dass die Nutzung ausschliesslich nicht kommerziell erfolgen soll, sowie die Angabe der Quelle angeben werden sollte.
Viel Spass damit!