VPRO Digitaal

Met het online gaan van de nieuwe VPRO.nl voorpagina is ook onofficieel het VPRO Weblogs Overzicht meegegaan. Bij deze ben je van harte uitgenodigd het mee te testen op http://www.vpro.nl/weblogs/. We need feedback!

Weblogs hebben we genoeg bij de VPRO. Het VPRO Weblogs Overzicht is een verzameling van al deze weblogs, onderverdeeld in categorieën en getoond op afbeelding, op abc of per categorie. Naast informatie en een doorlink per weblog is er een overzicht van de laaste 25 berichten uit de geselecteerde categorieën. De berichten kunnen in het weblog overzicht gelezen worden of men kan doorklikken naar het item op het weblog zelf.

Lees je de berichten liever in je eigen RSS-reader, klik dan op de oranje RSS knop in het menu en je kunt je abonneren op de RSS-feed van de geselecteerde categorieën.

Feedback vragen die we zoal hebben:

• Is het weblogs overzicht een duidelijk overzicht geworden?
• Werkt de categorieselectie naar verwachting?
• Is het duidelijk hoe je de laatste 25 berichten in het overzicht kunt lezen?
• Of gebruik je liever je eigen RSS-reader en zo ja, hoe bevalt de RSS knop van het overzicht?
• Ontbreekt er functionaliteit?

Wat vind jij? We horen het graag in de comments! Alvast bedankt.

Voor de technisch geïnteresseerde
Het is mooi dat de VPRO nu een overzicht heeft van al z’n weblogs, maar voor Digitaal zelf lag de uitdaging hem vooral in het creëren van de RSS-reader. Van de weblogs in de geselecteerde categorieën worden de RSS-feeds samengevoegd tot één über RSS-feed en de laatste 25 berichten hieruit worden in een lijst op de site getoond. Hoe gaan we al die weblog RSS-feeds bijhouden? Hoe voegen we ze samen? Hoe koppelen we die feeds aan categorieën? Wat nou als er uiteindelijk 1000 weblogs zijn? Gaan we dat allemaal zelf bouwen? Is er niet al een handige oplossing? De redding vonden we bij Google Reader en Yahoo Pipes.

Google Reader…
…is een bekende en betrouwbare RSS-reader. Toegevoegde RSS-feeds zijn zelfs te ordenen in mappen en een RSS-feed kan in meerdere mappen voorkomen. Deze mappen leveren precies de categorie functionaliteit die we nodig hebben voor het weblogs overzicht.

Een mooie functie van Google Reader en van doorslaggevend belang voor de keuze is dat deze mappen een eigen RSS-feed hebben die de berichten van alle onder die map hangende weblogs bundelt. Het maakt daarom voor ons weblogs overzicht niet uit hoeveel weblogs er uiteindelijk gaan komen, de veelheid wordt door Google Reader afgehandeld middels de individuele mappen RSS. Je moet deze overigens nog wel even publiekelijk beschikbaar maken in de Google Reader instellingen onder ‘Mappen en tags’ (zie plaatje). Voor de categorie ‘Journalistiek’ hebben we nu bv een publieke feed met berichten uit meerdere VPRO weblogs over journalistiek samengevoegd:

http://www.google.com/reader/public/atom/user/05770703458860361334/label/Journalistiek

Yahoo Pipes
Dat is allemaal mooi, maar in het weblog overzicht kunnen meerdere categorieën worden geselecteerd, wat betekent dat ook de feeds van meerdere Google Reader mappen samengevoegd op te roepen moeten zijn. Google Reader voorziet hier zelf niet in en daarom gebruiken we Yahoo Pipes als versterking. Yahoo Pipes, gelanceerd in februari 2007 en nog steeds in beta fase, is een gratis web service van Yahoo om data mee te mashuppen. Het wordt voornamelijk gebruikt om RSS/ATOM-feeds te aggregeren, combineren en filteren tot een nieuwe datastroom, maar het kan veel meer.

Middels een eenvoudige interface sleep je functionele blokken op een canvas. Elk blok heeft een ingang/invoer en een uitgang en door die met elkaar te verbinden krijg je uiteindelijk 1 grote pijplijn. Je stopt er data in en de laatste halte, de ‘Pipe Output’, is het resultaat van je mashup. Dat resultaat is niet alleen als RSS-feed op te vragen, maar ook als JSON-feed, PHP object, badge voor o.a. iGoogle of NetVibes, als Yahoo Alert voor in je mailbox of op je mobiel en zelfs als KML voor o.a. Google Earth en Google Maps. Er is eveneens een speciale iPhone versie om je Pipes te bekijken.

Je hoeft daarnaast niet altijd zelf het wiel uit te vinden, je kan zoeken naar bestaande Pipes die doen wat jij wil, om ze vervolgens te klonen en aan te passen.

Op de Yahoo Pipes homepage staat een goede videotutorial, maar ook YouTube is een bron van goede screencasts.

Weblogs overzicht pijplijn
Ok, we willen Yahoo Pipes gebruiken om de Google Reader data in ons weblogs overzicht te krijgen. Stappen:

A. Maak een Yahoo Pipe die een dynamisch aantal Google Reader mappen feeds ophaalt en samenvoegt
B. Verwerk de Yahoo Pipe data in het weblogs overzicht

A. Maak een Yahoo Pipe

Hierboven een screenshot van onze Yahoo Pipe. Bekijk dit screenshot voor de volgende uitleg. De pijplijn is best logisch. In het weblogs overzicht kun je categorieën aanvinken. De namen van deze categorieën komen overeen met de namen van de Google Reader mappen. Diezelfde namen zitten ook in de RSS-feeds van deze mappen. Onze Yahoo Pipe moet daarom meerdere categorie namen als input kunnen hebben. Om de berichten van de weblogs overzicht categorieën ‘Binnenland’, ‘Buitenland’ en ‘Muziek’ te verkrijgen roepen we onze Yahoo Pipe op de volgende manier aan:

http://pipes.yahoo.com/pipes/pipe.run?_id=6f7972df87fe4aec55838aaa62a50a25&_render=rss&delimiter=~&categories=Binnenland~Buitenland~Muziek

1. Je ziet dat er ‘delimiter’ en ‘categories’ variabelen worden meegegeven. Deze komen overeen met de 2 blokjes ‘Delimiter’ en ‘Categories’ van onze Pipe.
2. Deze input gaat door een ‘String tokenizer’ die ‘categories’ opsplitst in een aantal losse namen op basis van de ‘delimeter’ waarde.
3. Vervolgens gaat deze lijst met namen door een loopje waarbij van elke naam een Google Reader RSS-feed URL wordt gemaakt die maximaal 25 items teruggeeft.
4. De URL’s gaan door naar een volgende loop waarbij elke RSS-feed wordt geïmporteerd en alle items op één grote hoop worden gegooid.
5. Eén RSS-feed kan bij meerdere categorieën horen en dus worden alle items ook nog gefilterd op basis van unieke URL. Zo krijgen we geen dubbele berichten.
6. De laatste twee stappen zijn ordenen op datum aflopend
7. en het totaal aantal items inkorten tot 25. Et voila!

B. Verwerk de Yahoo Pipe data
Ok, we hebben nu data voor de RSS-reader in het weblogs overzicht. De website moet deze data echter nog wel ophalen en verwerken tot een mooi lijstje. Dit is het snelst en makkelijkst beheerbaar te doen middels JavaScript (AJAX), met name door het gebruik van jQuery, de ‘write less, do more’ JavaScript library.

Ceci n’est pas seulement une Yahoo Pipe
Een nadeel echter van JavaScript is dat het niet rechtstreeks mag communiceren met data op een andere server, dat zou namelijk een hoop hackers ten goede komen (denk aan Cross-site Scripting). Onze Yahoo Pipe en Google Reader data staat op een andere server dan het weblogs overzicht, dus wat te doen? Google redt ons wederom, dit keer middels hun AJAX Feed API, een library waarmee iedere publieke ATOM of RSS-feed wel met JavaScript op te halen is. De library maakt gebruik van JSON(P) om cross-site data uit te kunnen wisselen.

De AJAX Feed API is makkelijk te implementeren:

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR_KEY_HERE”></script>
<script type=”text/javascript”>

google.load(”feeds”, “1″);

</script>

De API-key is niet persé nodig, maar mochten er in de toekomst drastische aanpassingen komen dan kan Google contact met je opnemen om je te waarschuwen je code aan te passen.

Haal de feed op onLoad:

var feed = new google.feeds.Feed(”http://pipes.yahoo.com/jouwfeed”);
feed.setNumEntries(25);
feed.load(function(result){
/** doe iets met het JSON resultaat */
});

Een belangrijk stukje hier is het ‘feed.setNumEntries(25);’ Standaard haalt de Feed API namelijk maar 4 items op.
In JavaScript heb ik nu de RSS data in JSON formaat ter beschikking en ik kan een mooi vormgegeven lijstje genereren.

Dit was althans de bedoeling, maar na wat getest bleek dat de AJAX Feed API nogal hardnekkig cached als er niet veel mensen zijn die de feed via deze API oproepen. Ik heb voor de zekerheid daarom gekozen om de Yahoo Pipes data toch maar via Yahoo Pipes eigen JSONP manier op te halen icm jQuery’s getScript methode.

Wat zijn jouw ervaringen met Yahoo Pipes, maar zeker ook de Google AJAX Feed API?

Ik ben in ieder geval erg blij met de resultaten voor het weblogs overzicht door de combi Google Reader en Yahoo Pipes. Zonder al te veel gedoe is met beide web services snel een goed CMS neer te zetten. Je maakt jezelf wel afhankelijk van beide services, maar levert dat een probleem op bij deze grote spelers denk je?