RSS-Feed der Tagesschau auf einer WebSite anzeigen

[BotschafterSarek]

Hallo zusammen,

ich möchte auf einer WebSite (genaugenommen läuft die lokal auf einem Schaufenster-PC) am unteren Bildschirmrand die News von tagesschau.de einbinden. Dafür steht auf der HTML-Seite ein Fenster mit etwa 650x100 Pixeln Größe zur Verfügung. Daher sollen die News nicht alle untereinanderweg wie auf der verlinkten Seite, sondern so, daß dort etwa 10 Sekunden lang die erste Nachricht angezeigt wird, dann 10 Sekunden lang die zweite und so weiter ... und nach der letzten soll der Feed aktualisiert werden und wieder die erste Nachricht angezeigt werden.

Kann mir jemand erklären, ob das geht und wenn ja, wie ich da vorgehen muß? Über RSS-Feeds weiß ich bisher nur, daß es sie gibt. Und mit XML kenne ich mich auch nicht aus.

Danke im Voraus!

[Gunnar Bittersmann]

@@BotschafterSarek:

nuqneH

ich möchte auf einer WebSite (genaugenommen läuft die lokal auf einem Schaufenster-PC) am unteren Bildschirmrand die News von tagesschau.de einbinden.

Die erste Frage, dir du dir stellen musst: Darfst du das? Recherchiere, ob die ARD es gestattet, dass du dir ihre Inhalte zueigen machst.

Dafür steht auf der HTML-Seite ein Fenster mit etwa 650x100 Pixeln Größe zur Verfügung.

Nein, viele Anzeigebereiche sind schmaler als 650 Pixel.

Daher sollen die News nicht alle untereinanderweg wie auf der verlinkten Seite, sondern so, daß dort etwa 10 Sekunden lang die erste Nachricht angezeigt wird, dann 10 Sekunden lang die zweite und so weiter ...

Ah, ein Ticker. Unpassend fürs Medium Web.

Qapla'

[BotschafterSarek]

Hallo Klingone :)

Die erste Frage, dir du dir stellen musst: Darfst du das? Recherchiere, ob die ARD es gestattet, dass du dir ihre Inhalte zueigen machst.

Ja, tagesschau.de läßt das zu!

Dafür steht auf der HTML-Seite ein Fenster mit etwa 650x100 Pixeln Größe zur Verfügung.

Nein, viele Anzeigebereiche sind schmaler als 650 Pixel.

Was soll mir das jetzt sagen?

Ah, ein Ticker. Unpassend fürs Medium Web.

Mag sein, aber wie gesagt: Das ganze soll auf einem Schaufenster-PC laufen. Die "Oberseite" wird mehrere iFrames enthalten, in denen Informationen aus verschiedenen Quellen dargestellt werden, größtenteils aus unserer eigenen Datenbank, aber eben auch dieser Tagesschau-Ticker. Daher ist nicht die Frage, ob das passend, sinnvoll oder was auch immer ist: Es soll so sein, und es geht nur um die technische Umsetzung.

[just for a short one]

Gunnar,

Nein, viele Anzeigebereiche sind schmaler als 650 Pixel.

Mit dieser Info bist du für einmal am falschen Platz, weil, wie du selbst ja zitiert hast:

(genaugenommen läuft die lokal auf einem Schaufenster-PC)

Ah, ein Ticker. Unpassend fürs Medium Web.

Der Autor hat zwar mit dem meisten durchaus recht, aber was mir persönlich auch auf den Keks geht: Irgend ein Medium in irgendeinen Rahmen quetschen zu wollen nur weils so üblich ist. Genause wie das generelle Missbilligen eines Gestaltungselements
Nur weil mir persönlich kein sinnvoller Verwendungszweck einfällt und ich auch nach Recherche keinen finden kann, heisst noch lange nicht dass es keine gibt. Die im Beitrag zitierten Ticker zu missbilligen, das ist natürlich ok.

Gruss

[Jeena Paradies]

Hallo,

Ah, ein Ticker. Unpassend fürs Medium Web.

Er schrieb ja dass das Medium nicht Web sondern ein (Digitales) Schaufenser ist.

Jeena

[Jeena Paradies]

Hallo,

ich möchte auf einer WebSite (genaugenommen läuft die lokal auf einem Schaufenster-PC) am unteren Bildschirmrand die News von tagesschau.de einbinden. Dafür steht auf der HTML-Seite ein Fenster mit etwa 650x100 Pixeln Größe zur Verfügung. Daher sollen die News nicht alle untereinanderweg wie auf der verlinkten Seite, sondern so, daß dort etwa 10 Sekunden lang die erste Nachricht angezeigt wird, dann 10 Sekunden lang die zweite und so weiter ... und nach der letzten soll der Feed aktualisiert werden und wieder die erste Nachricht angezeigt werden.

Ich habe mal so ein Script geschrieben und kommentiert. Das ganze nutzt nicht den umständlichen XML-Parser sondern einen Yahoo service der das XML automatisch in JSON umwandelt. Damit lässt es sich viel einfacher Hantieren.

Das Script nutzt auch die Bibliothek jQuery vor allem für die fading-Effekte. Diese wird auch von einem externen Server geladen, genauer gesagt von Google. Somit müssen wir serverseitig nichts selbst hosten.

  
<!doctype html>  
<html>  
<head>  
	<title>Tagesschau Ticker</title>  
	<!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. -->  
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
	<script>[code lang=javascript]  
		var DELAY = 1; // 10 Sekunden delay  
  
		// Yahoo bietet einen coolen Service an mit dem man feeds nach JSON umwandeln lassen kann  
		// und das sogar mit einer Callbackfunktion, ich habe sie hier mal 'callbackf' genannt.  
		// Ich habe mal eine URL gebastelt die die daten vom Tageschau-Server holt.  
		// Mehr dazu gibt es unter: http://developer.yahoo.com/yql/  
		var URL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D'http%3A%2F%2Fwww.tagesschau.de%2Fxml%2Frss2'&format=json&callback=callbackf";  
  
		// Um einen extra server zum holen der Daten zu umgehen nutzen wir Yahoos YQL service mit einer  
		// callback funktion. Dazu machen wir uns einen neuen script-tag und fügen ihn in den Body ein.  
		// Dieser läd die daten von Yahoo und ruft gleichzeitig die callbackf-Funktion auf.  
		function reload() {  
			var s = document.createElement("script");  
			s.src = URL;  
			s.id = "datascript";  
			document.body.appendChild(s);  
		}  
  
		// Wenn das HTML geladen ist dann können wir die funktion reload() zum ersten mal aufrufen  
		$(document).ready(reload);  
		  
		// Wird vom Script aufgerufen das von Yahoo kommt. Es werden die Daten des Feeds im JSON  
		// Format übergeben.  
		function callbackf(data)  
		{  
			// Damit der Speicher nicht voll läuft wenn das den ganzen Tag im Schaufenster läuft  
			// machen wir das script-tag mal weg, brauchen wir ja nicht mehr  
			$("#datascript").remove();  
  
			// Die items sind ja etwas tiefer im JSON drinn, die speichern wir mal in einer neuen Variable  
			var items = data.query.results.item;  
  
			// Ich mache es mir hier einfach und baue den Inhalt komplett in einen String den ich dann mit  
			// innerHTML() einfüge, das ist so weit erst mal übersichtlicher und geht geht fast  
			// genauso schnell.  
			var content = "";  
			for (var i = 0; i < items.length; i++)  
			{  
				content += "<li>";  
				content += "<h1>" + items[i].title + "</h1>";  
				content += "<p>" + items[i].description + "</p>";  
				content += "</li>";  
			}  
  
			// Hier setzen wir den content ins <ul> rein  
			$("#list").html(content);  
  
			// Hier verstecken wir jedes <li> damit alle erst mal unsichtbar sind  
			$("#list li").each(function (i, elem)  
			{  
				$(elem).hide();  
			});  
  
			// Hier zeigen wir das erste <li> mit einem fade-effekt an. Wenn dieser effekt fertig  
			// ist rufen wir die Funktion showNext() als callback auf (siehe dazu die jQuery doku für fadeIn())  
			$("#list li:first-child").fadeIn("slow", showNext);  
		}  
  
		// Diese funktion fadet das sichtbare <li> aus, entfernt es aus dem dom und fadet das nächste  
		// element ein.  
		function showNext()  
		{  
			var first_child = $("#list li:first-child");  
  
			// Die jQuery-delay() funktion wartet mit der ausführung des nächsten so lange wie  
			// in DELAY angegeben. Danach fird fadeOut() aufgerufen, sobald das fertig ist  
			// wird die hier angegebene namenlose callback-funktion aufgerufen  
			first_child.delay(DELAY).fadeOut('slow', function() {  
  
				// Erst entfernen wir das erste <li>  
				first_child.remove();  
  
				// dann holen wir uns das jetzt neue erste element (weil das andere ja weg ist)  
				var next_child = $("#list li:first-child");  
  
				if (next_child.length > 0)  
				{  
					// Wenn es noch ein Element in der <ul> gibt dann wird das reingefadet und  
					// wenn fertig die funktion showNext() wieder aufgerufen.  
					next_child.fadeIn('slow', showNext);				  
				}  
				else  
				{  
					// Falls keine <li>s mehr zur Verfügung stehen starten wir das Script wieder von vorne  
					reload();				  
				}  
			});  
		}

</script>  
<style type="text/css">  
	~~~css

/* Das CSS muss natürlich noch an die jeweiligen Bedürfnisse angepasst werden */
* { margin: 0; padding: 0; }
body { font-family: "Lucida Grande", Helvetica, sans-serif; }
ul { list-style-type: none; }
li { position: absolute; top: 0; left: 0; width: 650px; }

	</style>  
</head>  
<body>  
	<ul id="list">  
		<!-- Dies hier ist unser Container in den wir alle Daten reinladen werden. -->  
	</ul>  
</body>  
</html>  
[/code]  
  
   Jeena  
![](http://jeenaparadies.net/pavatar.png)

-- 
[Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)

[Jeena Paradies]

Hallo,

  var DELAY = 1; // 10 Sekunden delay  

Ach Mist, das sollte natürlich 10000 sein denn das sind Millisekunden, ich hatte es nur zu Testzwecken auf 1 ms gesetzt.

Jeena

[Botschafter Sarek]

Ich habe mal so ein Script geschrieben und kommentiert. Das ganze nutzt nicht den umständlichen XML-Parser sondern einen Yahoo service der das XML automatisch in JSON umwandelt. Damit lässt es sich viel einfacher Hantieren.

Danke, ich bin hellauf begeistert!!!

<!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Wo wäre das Problem, das selber zu hosten, zumal es ja auf einem lokalen Rechner abläuft. Ich würde gerne möglichst unabhängig von der Verfügbarkeit von Drittseiten sein. Um die Einbindung der Yahoo-Funktion werde ich wohl nicht herumkommen, aber könnte ich mir diese js-Datei nicht einfach auf die Platte legen und lokal verlinken? Oder ist es damit nicht getan?

[Jeena Paradies]

Hallo,

Wo wäre das Problem, das selber zu hosten, zumal es ja auf einem lokalen Rechner abläuft. Ich würde gerne möglichst unabhängig von der Verfügbarkeit von Drittseiten sein. Um die Einbindung der Yahoo-Funktion werde ich wohl nicht herumkommen, aber könnte ich mir diese js-Datei nicht einfach auf die Platte legen und lokal verlinken? Oder ist es damit nicht getan?

Jo klar das ist kein problem.

Jeena