IBIS - Intelligent Band Information

SystemMatthias Tylkowski

Roland Kölbel

IBIS Main Page

Overview

– Wikipedia /DBpedia

– Eventful– Twitter

– Youtube– Google Maps– Amazon

• Mashup of different services to display useful information about bands – all in one page

• Integration of the following services:

Idea

• Distribution in one single HTML page• HTML page itself is functional from every

client machine• User can easily customize the content

Implementation

• wikipedia/dbpedia for information about bands

• Youtube for showing videos of the bands• Google Maps for marking locations for the

next Events• Eventful for information about future events• Amazon for offering related articles like t-

shirts, cds, dvds…• Twitter – for retrieving current messages

about the band

Implementations issues

• Using mashup engines like Yahoo pipes and Deri Pipes– Not stable– Not yet fully developed– Partly hard to understand because not

well documented– Not enough possibilities to customize

• The choice: Implementing the mashup from the scratch

Request Example

IB IS

requests A jax

Am azonYoutube

G oogle M apsTwitterD BPedia

PH PProxy

Request Example

• Include a new <script> element with the proxy and the desired url as „src“ attribute value

• Callback is initiated by the returned contentvar callbackId = this.setCallback(callback);$('head').insert(new Element('script',

{'type': 'text/javascript', 'src': 'http://proxy.3wep.de/url.php?callbackId='

+ callbackId + '&url=' + encodeURIComponent(url)}));

$client = new Zend_Http_Client($_GET['url']);$output = $client->request()->getBody();echo 'callCallback(\'' . $_GET['callbackId'] . '\',\'' . $output . '\');';

Client side Mashup

• Client and server side Mashup• Nearly all data aggregation on client side• Server side part is just proxy, some XSLT

processing for specific services and signature generation for Amazon

User Interaction

• Service orchestration through user interaction.

• The user can choose which services he wants to see (choice of services) and how they should look like (look and feel: position, size)

Service Orchestration

• Data transport through global variable and formal parameter

• Global variable for geo-position: position is only asked once when entering the page and can be used by all services

Clones

• Every visit to the page creates a new instance, changes are locally and can be saved persistent

Users

• IBIS was designed to be used by everyone• There is a help for those who have

problems• All services can be created via drag and

drop

IBIS Help

Software Requirements

• The IBIS Mashup works without any browser add-ons

• It is best working with Mozilla Firefox 3.5 and higher, other browsers might work as well except Microsoft Internet Explorer

• Mozilla Firefox 3.5 or higher is also recommended for the usage of the geo-location feature

Widgets

• The Mashup runs on the IBIS Server, but can be integrated into any other Webpage via <iframe>.

• A copy can also be created and executed locally

Concluding remarks

• Services as windows on a canvas/dashboard

• Each service is draggable, resizable and can be closed

• Design can be changed on-the-fly• Page can be saved local or on the server

with access through a generated link• Search of band related events in a radius

of 400km around the user position

Concluding remarks

• Automatical refresh of changing sources (Twitter)

• Error Message if services does not answer in between 30 seconds

Questions?