NeSC Web 2.0 Workshop, March 2009, Edinburgh Overview Practical Web 2.0 – Workshop 1 A Hands On Journey Into Mashups ` Introduction ` Architecture ` Examples ` Workshop 1 Mark Borkum - m.i.borkum@soton.ac.uk Jiten Bhagat - jits@cs.man.ac.uk 23rd March 2009 2 23rd March 2009 What is a Mashup? An interpretation? ` A presentation? ` A new service? ` An application? ` A “blending” of data from multiple sources ` Added value 3 Location (coordinates) 23rd March 2009 “Mashup” View Controller World Climate http://www.climate-charts.com 4 Model No entities! Just raw data. ` ` 23rd March 2009 Mashups are not meshups! The model is an interpretation of the data ` 5 e ogl Go ps Ma NOAA Weather Station Index ` Me teo ro Da logic ta al 6 23rd March 2009 Model Where does the data come from? ` ; Public ` ` ` ` ; Screen scraping Web services Syndication The Long Tail (your users) Protected ` ProgrammableWeb.com lists over 1000 APIs Authentication may be required (HTTP-Basic, OAuth, PKI…) Fair usage restrictions Private ` ` Publish and reuse your data! Database Institutional Repository 7 23rd March 2009 View 23rd March 2009 View User Interface ` 8 ` Provide a Machine Interface (when you can) Web browser ` Content Type Negotiation Perpetual Beta ` Syndication (RSS, ATOM) REST Web Services (SOAP) XML-XPC ` ` ` ` ` Open Standards ` ` ` ` ` ` ` Mark-up (XHTML) Presentation (CSS, XSLT) Manipulation (DOM) Communication (XMLHttpRequest) Scripting Languages (ECMAScript) 9 23rd March 2009 Controller ` ` ` ` Interacts with the model Responds to events triggered by the view ` 9 9 9 11 ` Application Logic is smaller Glue Logic is configured as a façade to Data Sources Adapters are reusable software components Data sources are secured with dependable wrappers ` Use open standards Provide a machine interface Controller: ` 23rd March 2009 No entities! Just raw data. View: ` Advantages: 9 23rd March 2009 Model: ` Delegate work to the “Glue” Logic ` 10 Summary Application Logic ` Clients specify the response format 12 Delegate work to reusable components 23rd March 2009 TwitterVision ` Data Sources ` Twitter user profiles Twitter “Public Timeline” feed ` Google Maps API ` ` ` New Services ` ` Geographical view of new “tweets” TwitterVision REST API ` ` ` 13 TwitterVision http://www.twittervision.com 23rd March 2009 http://twitter.com/statuses/public_timeline.atom http://twittervision.com/api.html Get user location (public) Update user location (protected, uses HTTP-Basic authentication) 14 23rd March 2009 NYU School of Medicine Virtual Microscope ` Data Sources ` ` Database of slides from 2 microscopes Glue Logic ` Delegates work to the Google Maps API ` ` ` ` New Services ` ` ` 15 17 NYU School of Medicine Virtual Microscope http://informatics.med.nyu.edu/virtualmicroscop 23rd March 2009 e/ Programmable Web http://www.programmableweb.com 23rd March 2009 Display (stitching together multiple tiles into a complete image) Navigation (zooming in and out) Annotation Virtual gallery of high-resolution slides (with annotations) Collaborative filtering Tag Cloud ` http://informatics.med.nyu.edu/virtualmicroscope/tagcloud 16 19 23rd March 2009 iGoogle http://www.google.com/ig 23rd March 2009 Feed URL nt me ed i r Fe pe Ex ows y m rkfl Wo Workshop I ` Google Gadgets API “Latest Workflows Feed Reader” Workshop 1: “myExperiment Latest Workflows Feed Reader” 22 http://xkcd.com/221 Architecture http://icanhascheezburger.com/2009/03/1 5/ funny-pictures-i-dont-give-a-meow/ Workshop 1 WORKSHOP II on Friday 23 23rd March 2009 http://upload.wikimedia.org/wikipedia/en/ 7/70/Bob_at_Easel.jpg http://www.imdb.com/media/rm110467328/tt0079817