mashups: more than maps mike ellis, solutions architect, Eduserv http://channels.ourmedia.org/files/bill-hillary-mashup.jpg http://flickr.com/photos/psd/492139935/

so.. here’s what we’ll be doing: Introductions Mashup overview The “mashup pattern” Deconstructing some examples Techniques and tools Problems Solutions Build?

here’s what we’ll be doing:

Introductions

Mashup overview

The “mashup pattern”

Deconstructing some examples

Techniques and tools

Problems

Solutions

Build?

today people have a variety of backgrounds, skills and requirements the entire point is that you go away with what you need from today... ...so please ask questions at any time or (preferably) talk to me over a pint... ...or do it online - details at the end.

people have a variety of backgrounds, skills and requirements

the entire point is that you go away with what you need from today...

...so please ask questions at any time

or (preferably) talk to me over a pint...

...or do it online - details at the end.

me, me, me I am..Mike Ellis I was Head of Web for NMSI for 7 years ..and now work in the “Professional Services Group” for Eduserv (I am a consultant who helps people realise their content vision using appropriate technologies) I’m fascinated with the real use of technology: I’m a geek but hopefully a “real-world” one... ...in other words, the things I’m going to talk about should be useful (!)

I am..Mike Ellis

I was Head of Web for NMSI for 7 years

..and now work in the “Professional Services Group” for Eduserv (I am a consultant who helps people realise their content vision using appropriate technologies)

I’m fascinated with the real use of technology: I’m a geek but hopefully a “real-world” one...

...in other words, the things I’m going to talk about should be useful (!)

about Eduserv Eduserv are a not for profit IT company We work to “realise the benefits of ICT for learners and researchers” We provide web dev, hosting, consultancy, ATHENS, CHEST, and have a Foundation who plough money back into the HE community

Eduserv are a not for profit IT company

We work to “realise the benefits of ICT for learners and researchers”

We provide web dev, hosting, consultancy, ATHENS, CHEST, and have a Foundation who plough money back into the HE community

you... 85% of you are “web coders” or more technical than this... 42% of you have built at least one mashup before... 85% of you want to have the technical knowhow to build mashups ..but let’s have a quick round the room

85% of you are “web coders” or more technical than this...

42% of you have built at least one mashup before...

85% of you want to have the technical knowhow to build mashups

..but let’s have a quick round the room

mashup overview “ more than one source” consumption of data and services mashup environment = paradigm shift: the “web of data” machines talking to each other RSS this is (or can be) a black-box environment

“ more than one source”

consumption of data and services

mashup environment = paradigm shift:

the “web of data”

machines talking to each other

RSS

this is (or can be) a black-box environment

mashup overview more importantly, this is about approach services are “out there” and available data is out there and available (or should be) (and when it’s not, we can still hack)  in general: “ we are smarter than me ”

more importantly, this is about approach

services are “out there” and available

data is out there and available (or should be)

(and when it’s not, we can still hack) 

in general: “ we are smarter than me ”

in one sentence “ mashups let you do more with less” (because other people have done a lot of the work already)

identify the need from your users find data and service sources look to see who/what else is out there – and see if you can borrow or copy. View source! decide on an acceptable SLA, and work on contingencies determine how you’re actually going to do it based on these decisions project pattern

identify the need from your users

find data and service sources

look to see who/what else is out there – and see if you can borrow or copy. View source!

decide on an acceptable SLA, and work on contingencies

determine how you’re actually going to do it based on these decisions

deconstruction as with much tech, you can identify patterns and because of the “black box” approach, these can be generalised so let’s have a look at a couple of examples

as with much tech, you can identify patterns

and because of the “black box” approach, these can be generalised

so let’s have a look at a couple of examples

mapping “ Museums in Paris with free admission” http://www.archi-nova.net/paris/tips.html

institution provides the data (museum name, location, review, description, etc) mapping service provides a way to display these locations on a map (plus some additional stuff) data and service is mashed and displayed on your site mapping data service your site

institution provides the data (museum name, location, review, description, etc)

mapping service provides a way to display these locations on a map (plus some additional stuff)

data and service is mashed and displayed on your site

mapping 1. Page loads the API 2. Call includes your key 3. Initialize() is called 4. Your data is included here

timeline From UK Natural History Museum “dinosaur directory” http://simile.mit.edu/timeline/examples/

institution provides the data (exhibit date, description, etc) timeline service provides a way to display these dates data and service is mashed and displayed on your site timeline data service your site

institution provides the data (exhibit date, description, etc)

timeline service provides a way to display these dates

data and service is mashed and displayed on your site

timeline 1. Page loads the API 2. Options for display 3. Your data 4. Display it

“ RSS to Image” From me (!)  http://electronicmuseum.org.uk/experiments/rss-to-image/

services provide data RSS (title, description, link..) service provides means to analyse this content my code provides a way to mash data and display RSS (news) Flickr search API display Term Extractor data service your site “ RSS to Image”

services provide data RSS (title, description, link..)

service provides means to analyse this content

my code provides a way to mash data and display

why mashup? developing these things from scratch would be: expensive complicated bespoke ...and therefore silly... it’s a quick way to prototype and hack you get a shared resource pool for any problems

developing these things from scratch would be:

expensive

complicated

bespoke

...and therefore silly...

it’s a quick way to prototype and hack

you get a shared resource pool for any problems

case study “design pattern” determine what you want to do identify service ( www.programmableweb.com ) sign up for API key (specific to URL root) identify your data source(s) identify any data services shape data sources to fit requirement drop these into the code shape the prototype

determine what you want to do

identify service ( www.programmableweb.com )

sign up for API key (specific to URL root)

identify your data source(s)

identify any data services

shape data sources to fit requirement

drop these into the code

shape the prototype

techniques and tools there are three major “mashup building” tools: Yahoo! Pipes ( http://pipes.yahoo.com ) Google Mashup Editor ( http://editor.googlemashups.com ) Microsoft PopFly ( http://www.popfly.com ) these do similar things but are for different audiences all require you to “think flowchart” we’ll look at Y!Pipes in more detail in a moment...

there are three major “mashup building” tools:

Yahoo! Pipes ( http://pipes.yahoo.com )

Google Mashup Editor ( http://editor.googlemashups.com )

Microsoft PopFly ( http://www.popfly.com )

these do similar things but are for different audiences

all require you to “think flowchart”

we’ll look at Y!Pipes in more detail in a moment...

Yahoo! Pipes drag and drop “ patchbay”-like RSS-focus techniques and tools

Yahoo! Pipes

drag and drop

“ patchbay”-like

RSS-focus

Google Mashup Editor code, pseudo-code, html google gadget output techniques and tools

Google Mashup Editor

code, pseudo-code, html

google gadget output

MS PopFly nice but confusing interface requires Silverlight webpages, too techniques and tools

MS PopFly

nice but confusing interface

requires Silverlight

webpages, too

problems! you are relying on 3 rd parties often no SLA – is this ok for you? what if the service, system or data disappeared? accessibility: a changing landscape... how do you measure goodness...? where can you get data from, and how long will it take to clean it up? (don’t underestimate this!)

you are relying on 3 rd parties

often no SLA – is this ok for you?

what if the service, system or data disappeared?

accessibility: a changing landscape...

how do you measure goodness...?

where can you get data from, and how long will it take to clean it up? (don’t underestimate this!)

solutions! think about the true mission-critical nature of your mashup. Is it REALLY likely that google will go down more than your in-house server? work out contingencies: alternative services or ways of displaying your stuff never, ever use a service that swallows your data! look at www.programmableweb.com for ideas, sources of data and services. Or just google it. encourage everyone to produce machine-readable data as a matter of course. It isn’t hard, really!

think about the true mission-critical nature of your mashup. Is it REALLY likely that google will go down more than your in-house server?

work out contingencies: alternative services or ways of displaying your stuff

never, ever use a service that swallows your data!

look at www.programmableweb.com for ideas, sources of data and services. Or just google it.

encourage everyone to produce machine-readable data as a matter of course. It isn’t hard, really!

build? is there time...? if so, let’s build!

is there time...?

if so, let’s build!

thanks! thanks very much for coming along. I hope it helped more than baffled.. you can talk to me anytime – you should have my details by now, or go here: google talk: [email_address] twitter: http://twitter.com/dmje blog: http://electronicmuseum.org.uk or http://blog.eduserv-psg.net/