NeSC Web 2.0 Workshop, March 2009, Edinburgh
Practical Web 2.0 – Workshop 1
A Hands On Journey Into Mashups
Mark Borkum - m.i.borkum@soton.ac.uk
Jiten Bhagat - jits@cs.man.ac.uk
23rd March 2009
Overview

Introduction

Architecture

Examples

Workshop 1
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
23rd March 2009
4
NOAA
Weather
Station Index
Location
(coordinates)
World Climate
http://www.climate-charts.com
“Mashup” View Controller
Mashups use a variation of
the Model-View-Controller
architecture

Model
Model


+
Entities and Relationships
Data and Metadata
View


+
User Interface
Machine Interface
Controller
View
Controller


5
Application Logic
23rd March 2009
Model
No entities! Just raw data.


Mashups are not meshups!
The model is an interpretation of the data

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



Private


7
Authentication may be required
(HTTP-Basic, OAuth, PKI…)
Fair usage restrictions
Database
Institutional Repository
23rd March 2009
Clients
Machine Interface
(public/protected)
Database
(private)
Publish and reuse your data!
8
23rd March 2009
View
User Interface


Web browser

Perpetual Beta

Open Standards





9
Mark-up (XHTML)
Presentation (CSS, XSLT)
Manipulation (DOM)
Communication (XMLHttpRequest)
Scripting Languages (ECMAScript)
23rd March 2009
View

Provide a Machine Interface (when you can)

Content Type Negotiation





10
Clients specify the response format
Syndication (RSS, ATOM)
REST
Web Services (SOAP)
XML-XPC
23rd March 2009
Controller

Application Logic



Interacts with the model
Responds to events triggered
by the view
Delegate work to the “Glue”
Logic

Glue Logic
Advantages:




11
Application Logic
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
Adapter
Adapter
Adapter
Data
Source
Data
Source
Data
Source
23rd March 2009
Summary

Model:


View:



No entities! Just raw data.
Use open standards
Provide a machine interface
Controller:

12
Delegate work to reusable components
23rd March 2009
13
TwitterVision
http://www.twittervision.com
23rd March 2009
TwitterVision

Data Sources


Twitter user profiles
Twitter “Public Timeline” feed



http://twitter.com/statuses/public_timeline.atom
Google Maps API
New Services


Geographical view of new “tweets”
TwitterVision REST API



14
http://twittervision.com/api.html
Get user location (public)
Update user location (protected, uses HTTP-Basic authentication)
23rd March 2009
15
NYU School of Medicine Virtual Microscope
http://informatics.med.nyu.edu/virtualmicroscope/
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




Display (stitching together multiple tiles into a complete image)
Navigation (zooming in and out)
Annotation
New Services



Virtual gallery of high-resolution slides (with annotations)
Collaborative filtering
Tag Cloud

16
http://informatics.med.nyu.edu/virtualmicroscope/tagcloud
23rd March 2009
17
Programmable Web
http://www.programmableweb.com
23rd March 2009
19
iGoogle
http://www.google.com/ig
23rd March 2009
Workshop I

“Latest Workflows Feed Reader”
Feed URL
Google
Gadgets API
Workshop 1:
“myExperiment Latest
Workflows Feed Reader”
22
Architecture
Workshop 1
init()
getFeed(url, handler)
handleMyExperimentFeed(feed)
http://www.myexperiment.org/workflows.rss
23
23rd March 2009
http://xkcd.com/221
http://icanhascheezburger.com/2009/03/15/
funny-pictures-i-dont-give-a-meow/
WORKSHOP II on Friday
http://upload.wikimedia.org/wikipedia/en/
7/70/Bob_at_Easel.jpg
http://www.imdb.com/media/rm110467328/tt0079817