A mashup is a Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services. The term implies easy, fast integration, frequently using open API (Application Programming Interface) and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.

1. Cloud Technology
Mashup
By: Mustafa Salam

2. Mashup
A mashup is a Web page or application that uses and combines data, presentation or
functionality from two or more sources to create new services. The term implies easy, fast
integration, frequently using open API (Application Programming Interface) and data sources to
produce enriched results that were not necessarily the original reason for producing the
raw source data.

3. Good ideas behind Mashup
 Allow information to be viewed from different perspectives (e.g., view real estate data on a
map)
 Combine data from multiple sources into a single unified view (e.g., compare gas prices in the
neighborhood).
 Enrich raw data with new information (e.g., view eBay real estate auction along with Amazon)

4. Mashups have recently exploded on the web, for two main reasons.
• First, many of the major internet companies, such as Yahoo! , Google , and Amazon ,have
opened up their data to be used with other data sources without a lengthy licensing
negotiation. In just a minute or two, you can set up and use the data resources they make
available.
• The other reason for this rapid growth is the advent of new tools that make creating mashups
easy for anyone, regardless of their technical know-how.

5. Recent Common Services! (Similar to mashup)
a) Web Portals: Yahoo! provide information of different kinds under a single unified theme.

6. Recent Common Services! (Similar to mashup)
b) Web Information Aggregators: (MySimon) etc. provide price comparison services for many
products.
c) RSS (Really Simple Syndication): collect feeds from
different news sites to create a news channel.

8. Mashup Types
Mashups have several different colloquial interpretations, which has resulted in some confusion
regarding the term and its use.

9. 1. Mapping mashups
Mapping mashup allow users to navigate most of the globe through a Web interface, viewing
varying levels of resolution through maps, satellite imagery, or a combination. 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.

10. 2. 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. Because 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.

11. 3. Search and Shopping mashups
To facilitate mashups and other interesting Web applications, consumer marketplaces such as eBay and
Amazon have released APIs for programmatically accessing their content. Hundreds of shopping mashups
exist ranging from commercial desktop applications to comparison shopping web sites to whimsical hacks.

12. 4. News mashups
News sources (such as the New York Times, the BBC, or Reuters) have used syndication technologies like
RSS 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.

13. Mashup 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, and the client's Web browser.

14.  The API/content providers. These are the providers of the content being mashed. It denotes the process
by which a tool attempts to extract information from the content provider by attempting to parse the
provider's Web pages.
 The mashup site. This is where the mashup is hosted. Interestingly enough, just because this is where
the mashup logic resides, it is not necessarily where it is executed. On one hand, mashups can be
implemented similarly to traditional Web applications using server-side dynamic content generation
technologies like Java servlets, PHP or ASP. The benefits of client-side mashing include less overhead
on behalf of the mashup server (data can be retrieved directly from the content provider).
 The client's Web browser. This is where the application is rendered graphically and where user
interaction takes place.

15. 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.

16. Mashup tools
 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 drag-drop interface. Its quite easy to
use.

17. Mashup tools
 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.

18. Pros and Cons
• Innovation potential: fusion of multiple services. More services at a low cost with reusable
components.
• Use of Open APIs: allow to diffuse content of service adapted to the needs of users.
• Security problems: aggregation of own site with application coming from unknown source
using APIs not fully understood by “developer”.

19. Ajax (Asynchronous JavaScript + XML)
AJAX stands for Asynchronous JavaScript and XML. It is a Web programming technique that
exchanges small amounts of information behind the scenes to speed up applications that run on
the Web. It is the use of the XMLHttpRequest object to communicate with server-side scripts. It can
send as well as receive information in a variety of formats, including XML, HTML, and even text
files. AJAX’s most appealing characteristic, however, is its "asynchronous" nature, which means it
can do all of this without having to refresh the page. This lets you update portions of a page
based upon user events.

20. Itinerary Planner: A Mashup Case Study
Itinerary Planner Mashup (IPM). IPM is a Single-page application that allows users to create an
itinerary of the destinations (cities) that they plan to visit and display these destinations on a
map. Users can display additional information about each destination including weather data
(derived from Yahoo Weather RSS feeds) and other local information (derived using the Google
Ajax Search API).

21. Itinerary Planner: A Mashup Case Study
1. User Interface Design
The Trip Planner floating pane allows users to type the country name into a combo box widget; the Trip
Planner then populates the list-box with the list of major cities and charts the route on the map as illustrated
in the Figure below. When users select (click on) a place marker on the map, the application displays the
current weather information using the Yahoo weather RSS feeds.

22. Itinerary Planner: A Mashup Case Study
Selecting a destination from the list-box and clicking the “Google” icon causes the application to
launch a new floating pane containing the search results that relate to the selected destination.
The search floating pane includes Video, Blog, News, Book, Local and Web results as shown in
the Figure below. The place markers on the map are numbered according to the order specified in
the Trip Planner list and the colors indicate the start (green) and end (red) of the trip.

23. Itinerary Planner: A Mashup Case Study
2. Data Integration Design
The Google Maps API retrieves Google Maps, the Google Ajax Search API allows customized display of
Google Search results and the Yahoo RSS Weather feeds provide the current weather and forecast
information. While the Google Maps API and the Google Ajax Search API are accessed directly by the
client-side Javascripts, the Yahoo RSS feeds are retrieved by a server-side PHP script. The PHP
XML_RSS Parser was used to process the RSS feeds

24. Itinerary Planner: A Mashup Case Study

25. Thank You