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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16.
<ul><li>institution provides the data (exhibit date, description, etc) </li></ul><ul><li>timeline service provides a way to display these dates </li></ul><ul><li>data and service is mashed and displayed on your site </li></ul>timeline data service your site

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

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

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

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

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

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

23.
<ul><li>Yahoo! Pipes </li></ul><ul><li>drag and drop </li></ul><ul><li>“ patchbay”-like </li></ul><ul><li>RSS-focus </li></ul>techniques and tools

24.
<ul><li>Google Mashup Editor </li></ul><ul><li>code, pseudo-code, html </li></ul><ul><li>google gadget output </li></ul>techniques and tools

25.
<ul><li>MS PopFly </li></ul><ul><li>nice but confusing interface </li></ul><ul><li>requires Silverlight </li></ul><ul><li>webpages, too </li></ul>techniques and tools

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

27.
solutions! <ul><li>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? </li></ul><ul><li>work out contingencies: alternative services or ways of displaying your stuff </li></ul><ul><li>never, ever use a service that swallows your data! </li></ul><ul><li>look at www.programmableweb.com for ideas, sources of data and services. Or just google it. </li></ul><ul><li>encourage everyone to produce machine-readable data as a matter of course. It isn’t hard, really! </li></ul>

28.
build? <ul><li>is there time...? </li></ul><ul><li>if so, let’s build! </li></ul>

29.
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/