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