IWMW 2008 Mashup Workshop

1,460 views

Published on

Distributed computing - where data is consumed from external Web sites, sometimes 'mashed', or displayed in some other way on your own site, has become a powerful way of providing functionality, and requires little or no financial outlay or technical understanding.
This workshop will look at some of the services available and examine some of the ways that they can be combined or otherwise used on your site and for prototype development.

Published in: Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,460
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IWMW 2008 Mashup Workshop

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. in one sentence “ mashups let you do more with less” (because other people have done a lot of the work already)
  10. 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. 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. 12. mapping “ Museums in Paris with free admission” http://www.archi-nova.net/paris/tips.html
  13. 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. 14. mapping 1. Page loads the API 2. Call includes your key 3. Initialize() is called 4. Your data is included here
  15. 15. timeline From UK Natural History Museum “dinosaur directory” http://simile.mit.edu/timeline/examples/
  16. 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. 17. timeline 1. Page loads the API 2. Options for display 3. Your data 4. Display it
  18. 18. “ RSS to Image” From me (!)  http://electronicmuseum.org.uk/experiments/rss-to-image/
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28. build? <ul><li>is there time...? </li></ul><ul><li>if so, let’s build! </li></ul>
  29. 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/

×