Transcript Mashups

Mashups
Dr. Mohammad Ahmad
Mashups
Agenda

Introduction

What are Mashups

Why Mashups

Types of Mashups

Architecture

Mashup Tools & Editors

Mashups Vs Portlets

Creating Your Own Mashups

Conclusion
2
Introduction


Mashups are an exciting genre of interactive Web applications that
draw upon content retrieved from external data sources to create
entirely new and innovative services.
They are a hallmark of the second generation of Web applications
informally known as Web 2.0.
3
What are Mashups





In technology, a mashup is a web application that combines data
from more than one source into a single integrated tool
Mashup is the web application that combines data from various
sources to form a completely new integrated application with a
different use.
A Mashup is a new service, that combines functionality or content
from existing sources.
These existing sources can be Web Services (through the use of
API's), RSS feeds or even just other Websites (by screen-scraping).
Content used in mashups is typically sourced from a third party via a
public interface or API
4
© Mediasurface 2008
5
Why Mashups?





Second generation of Web applications informally known as Web 2.0
Creating a new and distinct web service that was not originally
provided by either source.
The contents used in Mashup typically comes from the third party via
a public interface or the Application Programming Interface (API)
Mashups produce some amazing results, especially when it comes to
trend analysis or getting the best content you can from various
sources.
An example is the use of cartographic data from Google Maps to add
location information to real-estate data from Craigslist, thereby
creating a new and distinct web service that was not originally
provided by either source.
6
Types Of Mashups
Prominent Mashup types are

Mapping Mashups

Video and Photo Mashups

Search and Shopping Mashups

News Mashups
7
Mapping Mashups


In this age of information technology, humans are collecting a
prodigious amount of data about things and activities, both of which
are wont to be annotated with locations. All of these diverse data sets
that contain location data are just screaming to be presented
graphically using maps. One of the big catalysts for the advent of
mashups was Google's introduction of its Google Maps API. This
opened the floodgates, allowing Web developers to mash all sorts of
data onto maps.
APIs from Microsoft (Virtual Earth), Yahoo (Yahoo Maps), and AOL
(MapQuest) shortly followed.
8
9
Video and Photo Mashups


The emergence of photo hosting and social networking sites like
Flickr with APIs that expose photo sharing has led to a variety of
interesting mashups.
These content providers have metadata associated with the images
they host





such as who took the picture
what it is a picture of,
where and when it was taken, and more)
Mashup designers can mash photos with other information that can
be associated with the metadata.
For example, a mashup might analyse song or poetry lyrics and
create a mosaic or collage of relevant photos, or display social
networking graphs based upon common photo metadata.
10
11
Search and Shopping Mashups



Search and shopping mashups have existed long before the term
mashup was coined.
Before the days of Web APIs, comparative shopping tools such as
BizRate, PriceGrabber, MySimon, and Google's Froogle used
combinations of business-to-business (b2b) technologies or screenscraping to aggregate comparative price data.
To facilitate mashups and other interesting Web applications,
consumer marketplaces such as eBay and Amazon have released
APIs for programmatically accessing their content.
12
13
News Mashups




News sources (such as the New York Times, the BBC, or Reuters)
have used syndication technologies like RSS and Atom since 2002 to
disseminate news feeds related to various topics.
Syndication feed mashups can aggregate a user's feeds and present
them over the Web
Creating a personalized newspaper that caters to the reader's
particular interests.
An example is Diggdot.us, which combines feeds from the techieoriented news sources Digg.com, Slashdot.org, and Del.icio.us.
14
15
Architecture
A mashup application is architecturally comprised of three different
participants that are logically and physically disjoint (they are likely
separated by both network and organizational boundaries):

API/Content Providers

The Mashup Site

The Client's Web Browser
16
API/Content Providers




These are the providers of the content being mashed.
To facilitate data retrieval, providers often expose their content
through Web-protocols such as REST, Web Services, and
RSS/Atom.
However, many interesting potential data-sources do not (yet)
conveniently expose APIs.
Mashups that extract content from sites like Wikipedia, TV Guide, and
virtually all government and public domain Web sites do so by a
technique known as screen scraping.
17
The Mashup Site

This is where the mashup is hosted.

This is where the mashup logic resides

Not necessarily where it is executed.


Mashups can be implemented similarly to traditional Web applications
using server-side dynamic content generation technologies like
Java servlets, CGI, PHP or ASP.
18
The Client's Web Browser

This is where the application is rendered graphically

This is the place where user interaction takes place.

Mashups often use client-side logic to assemble and compose the
mashed content.
19
Ajax

Ajax is a Web application model rather than a specific technology. It
comprises several technologies focused around the asynchronous
loading and presentation of content:
1)XHTML and CSS for style presentation
2)The Document Object Model (DOM) API exposed by the browser
for dynamic display and interaction
3)Asynchronous data exchange, typically of XML data
4)Browser-side scripting, primarily JavaScript

When used together, the goal of these technologies is to create a
smooth, cohesive Web experience for the user by exchanging small
amounts of data with the content servers rather than reload and rerender the entire page after some user action.
20
Web Protocols




Web Protocols: SOAP and REST
Both SOAP and REST are platform neutral protocols for
communicating with remote services.
As part of the service-oriented architecture paradigm, clients can use
SOAP and REST to interact with remote services without knowledge
of their underlying platform implementation.
The functionality of a service is completely conveyed by the
description of the messages that it requests and responds with.
21
SOAP

SOAP is a fundamental technology of the Web Services paradigm.

Originally an acronym for Simple Object Access Protocol.



SOAP has been re-termed Services-Oriented Access Protocol (or just
SOAP)
Because its focus has shifted from object-based systems towards the
interoperability of message exchange.
There are two key components of the SOAP specification.
1) The first is the use of an XML message format for platformagnostic encoding
2) Second is the message structure, which consists of a header
and a body.
22
SOAP



The header is used to exchange contextual information that is not
specific to the application payload (the body), such as authentication
information.
The SOAP message body encapsulates the application-specific
payload.
SOAP APIs for Web services are described by WSDL documents,
which themselves describe
1) What operations a service exposes
2) The format for the messages that it accepts (using XML
Schema),
3) And how to address it.

SOAP messages are typically conveyed over HTTP transport,
although other transports (such as JMS or e-mail) are equally viable.
23
REST

REST is an acronym for Representational State Transfer.

A technique of Web-based communication using just HTTP and XML.




Its simplicity and lack of rigorous profiles set it apart from SOAP and lend
to its attractiveness.
Unlike the typical verb-based interfaces that you find in modern
programming languages (which are composed of diverse methods such as
getEmployee(), addEmployee(), listEmployees(), and more), REST
fundamentally supports only a few operations (that is POST, GET, PUT,
DELETE) that are applicable to all pieces of information.
The emphasis in REST is on the pieces of information themselves, called
resources. For example, a resource record for an employee is identified by
a URI, retrieved through a GET operation, updated by a PUT operation,
and so on.
24
In this way, REST is similar to the document-literal style of SOAP services.
REST







With a ‘RESTful Web Service, each service is easily identified by a
unique URL.
Essentially, when the server receives the request, it knows what to do
based on the URL path.
http://www.myonlineshop.com/product/12345 (the Restful way of
doing things)
In essence the URL now is a noun not a traditional verb:
http://www.myonlineshop.com/getProduct?productID=12345 (this is
the traditional way we did things)
REST becomes an architecture style applicable to systems that
would want operate with a Resource view.
SOAP, on the flip-side, has a different view of the web. It uses the
web as a application infrastructure between service providers and
consumers otherwise known as the Service view.
25
Screen Scrapping



Lack of APIs from content providers often force mashup developers
to resort to screen scraping in order to retrieve the information they
seek to mash.
Scraping is the process of using software tools to parse and analyze
content that was originally written for human consumption in order to
extract semantic data structures representative of that information
that can be used and manipulated programmatically.
A handful of mashups use screen scraping technology for data
acquisition, especially when pulling data from the public sectors.
26
RSS





RSS is a family of XML-based syndication formats.
Syndication implies that a Web site that wants to distribute content,
creates an RSS document and registers the document with an RSS
publisher.
An RSS-enabled client can then check the publisher's feed for new
content and react to it in an appropriate manner.
RSS has been adopted to syndicate a wide variety of content,
ranging from news articles and headlines, changelogs for CVS
checkins or wiki pages, project updates, and even audiovisual data
such as radio programs.
Version 1.0 is RDF-based (Resource Description Framework), but the
most recent, version 2.0, is not.
27
ATOM





Atom is a newer, but similar, syndication protocol.
It is a proposed standard at the Internet Engineering Task Force
(IETF) and seeks to maintain better metadata than RSS.
Provide better and more rigorous documentation
Incorporates the notion of constructs for common data
representation.
These syndication technologies are great for mashups that aggregate
event-based or update-driven content, such as news and weblog
aggregators.
28
Mashup Tools



Microsoft Popfly: Microsoft Popfly is Microsoft's Mashup Editor. Its
very useful to an end-user and requires little technical understanding.
Popfly is built on Microsoft Silverlight.
Yahoo Pipes: Yahoo Pipes is Yahoo's flash-based tool to aggregate,
manipulate, and mashup content from around the web. Yahoo Pipes
was one of the first mashup editing tools to come out. It appears to be
targeted to the slightly more technical people. However it has a dragdrop interface. Its quite easy to use.
Google Mashup Editor: The Google Mashup Editor (GME), is
defiantly the most advanced out of all the ones. Most powerful, and
It's basically got a tag based markup language, that lets you also
embed HTML into your results.
29
Mashups Vs Portlets



Classifications: Portal is the older technology and an extension to
the traditional web server model. On the other hand, Mashup is
relatively the newer Web 2.0 technology.
Philosophy/Approach: The approach of the porter is the
aggregation by splitting the role of the web server into two phases.
The first phase is the markup generation and the second phase is the
aggregation of markup fragments. On the other hand, Mashup has a
more fundamental approach to content aggregation without regard to
markup.
Content Dependencies: Portals aggregate presentation oriented
markup fragments like HTML, WML, VoiceXML, etc., whereas,
mashup can operate on pure XML conent as well as on the
presentation oriented content like HTML.
30
Mashups Vs Portals


Location Dependencies: In case of Portal, content aggregation
takes place on the server, while in case of mashup, the content
aggregation takes place either on server or on the client.
Aggregation Style: Portal has the ”Salad bar” style of aggregation
where the aggregated content is presented in ”side-by-side” manner
without any overlaps. On the other hand, Mashup has the ”Melting
Pot” aggregation style where individual content may be combined in
any manner.
31
Creating Your Own Mashups

Pick a subject

Decide where your data is coming from

Weigh your coding skills

Sign-up for an API

Start coding
32
Summary


Mashups are certainly an exciting new genre of Web applications.
The combination of data modelling technologies stemming from the
Semantic Web domain and the maturation of loosely-coupled,
service-oriented, platform-agnostic communication protocols is finally
providing the infrastructure needed to start developing applications
that can leverage and integrate the massive amount of information
that is available on the Web.
33