1. MASHUP : THE WEB APPLICATION INTEGRATION (OVERVIEW)
Sarah A. Alabdullatif
Information Technology department - King Saud University
Riyadh, Saudi Arabia
sal-abdullatif@student.ksu.edu.sa
ABSTRACT
This paper is talking about the mashup in web development word, which is integration of web application.
Simply, mashup use different web 2.0 technology to create a new web page that brings together information or
functions from multiple sources .Mashup have various of type and categories, the most common mashups
involve maps, but there are also video mashups, photo mashups, and others.
Keywords
Mushup, API, Web2.0, web application hybrid.
1. INTRODUCTION
The term “mashup“ Started running and used in web development world after the emergence of the term
“web2.0” in a conference brainstorming session between O'Reilly and MediaLive International in 2004, which
referred to a change of thinking about how the applications of the future should be developed. A muashup is a
Web-based applications created by clever programmers, who use a several of techniques to create new useful
services that are derived from existing ones. These sites typically feature a high level of interactivity, Content
used in mashups is typically sourced from a third party via a public interface or so called API. Next, I will talk in
detailed in what is a mashup, types of mashups, how it is work, also you will see example and application of
[2][6]
different mashup, and finally, steps help you to create your own mashups.
2. WHAT IS A MASHUP?
The origin of the "mashup" term was introduced in the music industry, where it's a new music song that is
made up from the vocal and instrumental tracks of other different songs already released, usually by other
[1][7]
artists.
However, Like these mixed songs, a Mashup in web development world is a web page or site that combines
content or functionality from a variety of sources in a unique way, that brings value to the web user, using Web
[1][2][11]
2.0 technologies including RSS, JavaScript, AJAX (Asynchronous JavaScript And XML) and others.
Any mashup site must access third party data using an API, and process that data to add value for the site's
users. Therefore, a mashup Web application is architecturally consist of three different elements: API or
[6][7]
content providers, a Web page, and the client's Web browser.
The content provider(API) is the provider of the content being mashed.To facilitate data retrieval, providers
[6][7]
often expose their content through Web-protocols such as REST, Web Services, and RSS/Atom.
The mashup is hosted in the web page that provides a new service using its own data and data from other
[6][7]
sources (from additional content providers).
The client's Web browser is the user of the mashup. Also where the application is rendered graphically and
where user interaction takes place. Various mashup platforms support the emission of RSS, Web Services,
instant messages or email messages, which are consumed by feed readers, rich applications, IM clients or
[6][7]
email clients respectively.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

2. 3. TYPES OF MASHUP
Mashups currently come in three general types: consumer mashups, data mashups, and business mashups.
[6]
The most common type is the consumer mashup, which are aimed at the general public.
Consumer mashups combine data elements from multiple sources, hiding this behind a simple unified
[6]
graphical interface.
Another common mashup is a data mashup. A data mashup mixes data of similar types of media and
information from different sources a single graphical representation as for example combining the data from
[6]
multiple RSS feeds into a single feed with a graphical front end.
Another type is an enterprise mashup, it‟s usually integrates data from internal and external sources. For
example, it could create a market share report by combining an external list of all houses sold in the last week
[6]
with internal data about which houses one agency sold.
A business mashup is a combination of all the above, focusing on both data aggregation and presentation, and
additionally adding collaborative functionality, making the end result suitable for use as a business application.
[6]
Also, a Telecom mashup is a telecommunications service where service elements come from more than one
source and are combined into an integrated experience. For example, one could get the base service from
[6]
company A, a ringback tone from company B, a voicemail service from company C, etc.
However, there are Mashups within mashups and they are known as „monster mashups‟.
4. HOW IT IS WORK?
A mashup is generally characterized by presenting specific information without forcing the user to click through
various screens and URLs. The mashup - not the user - performs the compilation of the data, so everything is
[2] [3] [8]
presented at once.
We Know that there are many companies that provide Application programming interface or (API) in the
Internet, which it‟s the basic element in mashups, like Google, eBay and others. That API services and data
are shared (sometimes not freely) so developers can extend functionality rather than spending time
[2] [3][8]
duplicating what is already available.
However, as I said that mashup use web 2.0 technologies to combine data from more than one source, these
technologies enable developer to pull widgets and feeds together in the mashup site. Widget is the building
block of a mashup. Quite simply, a widget is a small program or piece of dynamic content that can be easily
placed on a Web site. The applicability of mashups is as broad as the array of widgets available to create
[2][3] [8]
them.
These widgets and feeds with helps of web 2.0 technology could quickly create a mashup such as that grabs
the regional weather forecast from a reputable national news agency for departure and arrival cities, a
calendar widget populated with a filtered feed from the destination city with local events, a local news station
feed for news that may impact the client's visit, and data points in a Google Map that represent where the client
[2] [3] [8]
has purchased goods using
5. EXAMPLE AND APPLICATION OF DIFFERENT MASHUP
Because of the frequent use of mashup as wide and varied as the web now days, there were several types and
categories. But we can divide it into four main categories, which are mapping (which involve the most common
[2][6][7][10][11]
mashups), video & photo, search & shopping and news.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

3. There are another categories such as food, sport science, travel and other. But in my paper I will talk just
about the main categories. The figure1 shows Statistical of the number of mashup in each category in the
[2][6][7][10][11]
World Wide Web.
Figure1: Statistical of mashup in each category. [7]
5.1 Mapping
Maps Mashups rank among the most popular mashups that are available on the World Wide Web (as shown
in Figure1). Mapping mashups requires a mapping source which could provide a visual presentation of the area
or location that is involved in the process. When the very popular Google Maps released an API it allowed web
developers to easily integrate mapping into their own sites. APIs for Yahoo Maps, MapQuest and Microsoft's
Virtual Earth shortly followed, making it almost trivial to plug a rich source of geographical, topological, street-
[2][6][7][10][11]
level and satellite image data into existing websites. Here are some examples of mapping mashups:
 Places.ae is a web application to find (almost) anything in Dubai and the UAE. It uses mashups with
Google maps, and twitter.
 The gis.chicagopolice.org Chicago Police Department have a Mashup which integrate their
department‟s database of reported crimes with the Google Maps in order to help stop crime in areas
and warn the citizens of where crimes are highly committed.
 IamCaltrain.com uses Yahoo Maps, Caltrain schedules and Flickr Photos to help the user plan his rail
travel in California. Find out which train stops have amenities like bike lockers and parking as well as
when the next train will arrive.
5.2 Video and photo
Video and photo mashups rely on photo and video content providers together with another data source that
could provide any information that could be related to such multimedia content. This content could include the
places or locations of photos and videos taken. Which could these locations or addresses be used for
geographical plotting for visual reference. There are many photo and video API .such as Flickr, Yahoo Photos
[2][6][7][10][11]
and Youtube. Here are some video and photo mashup site to check out:
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

4.  ReelzReview.com is simply a one stop Movie mashup. The goal of it is to bring movie related data
together that would eventually help the user to decide on whether to watch, buy or rent. This is a place
for movie lovers to hangout when they want to find the right movie. It‟s use Open API‟s from Amazon,
Yahoo, Ebay, Google, YouTube and other online resources to get movie related data, new releases,
movie ratings, reviews, price comparisons, best deals, Rental Offers, all in one simple, easy to view
mash up page.

[3]
FlickrMaps is a mashup of Yahoo Maps and Flickr that turns you into a virtual tourist. Select a city in
the USA, and then view relevant photos from Flickr.
5.3 Search and Shopping
Shopping Mashups have come into existence since a very long time before the term mashup was coined.
instead of the Web APIs now days, there were a few comparative shopping tools like BizRate, PriceGrabber ,
Google‟s Froogle,and others, which used combinations of business-to-business (B2B) technologies or other
[2][6][7][10][11]
technologies in order to aggregate comparative price data.
Also Shopping and search mashups works on the idea of comparing product prices and specifications using a
search method. The search results from various online sources could then be compiled or mashed-up for the
[2][6][7][10][11]
surfer's convenience. Let‟s see an example:
 iPodRadar.com is a Shopping Mashup that would help the users to find iPods and accessories. At the
same time, it would also provide the users with some latest news of iPods, blogs, links, software and
many more. iPod Rader, often can be found integrating other sites like Google news feeds with some
interesting news or announcements ,etc. it‟s used Amazon eCommerce, Backpack, del.icio.us, eBay,
Google AdWords and Technorati APIs
5.4 News
News mashups work on the concept of putting up a specific collection of news that a certain user or client
wants or usually prefers and then presents them in one collective method simply,.It look like creating a
personalized newspaper that caters to the reader's particular interests. The developers of news mashups are
[2][6][7][10][11]
quite popular in using RSS Feeds, and atoms. here are an examples:
 Doggdot.us combines tech news from Digg, Slashdot and del.icio.us into a unified format, eliminate
duplicate stories and adds some extra features.
 aggreget.com Indexes many Web 2.0 news sites like Digg, Stumble, delicious, etc. and displays the
top 10 overlapping popular links, providing an instant zeitgeist snapshot of super popular links.
6. HOW TO CREATE YOUR OWN WEB MASHUP
If you are interesting in mashup and want to create one, there are a few steps helps you to build a new
mashup.
6.1 Come up with an idea
The first thing you‟ll need, of course, is an idea. Answer the question: a mashup of what? However, simple
idea is good, useful is better. While you could go for something more complex with multiple data source such
as: maps + photos + bookmarks + more, but you may keep it simple to start. This helps you to define what
[2][9]
APIs and tools you'll be use and looking at. For example, maps, news, auctions, products, etc.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

5. 6.2 Decide data sources
What is the source of your data? This will drive the APIs you'll use. For example, if you want to do something
with your photos on Flickr or sale items on eBay, then those vendors APIs are the likely candidates. Or, you
[2][9]
may be inputting the data yourself.
6.3 Sign-up for an API
Most, but not all, API providers require you to have a developer or application ID, a user account with their
service, or both. Some services give you one ID for as many applications as you write while others require you
to get an ID for each application that you create. However, this signup may sound complicated, but for a few
[2][9]
services, and most of them takes only a minute or two to complete.
6.4 Start coding
This is the final and most important step. For mashups (and, indeed, for all Web pages), whatever is done to
gather data and format information in response to a user query or request for a URL culminates in an HTML
page. The HTML page is displayed by the client browser. Developers can use various technologies when
assembling their own mashups, such as XML, RSS/Atom, AJAX and other technologies. For example, if you
are using the Google Maps API, you will probably use it with simple JavaScript function calls. The backbone of
most mashup sites is XML (extensible Markup Language). Data is often retrieved via XML feeds and
incorporated in the application by manipulating the XML the language used to describe data in many mashups
and other Web applications today pages. The basic idea is to use these technologies to interact with Web
services or APIs and content providers. You can use any technologies you want—and as many of them as
[2][3][9]
you want—but, somehow or other, a Web page for a browser must be the result.
8. Conclusion
Mashups are certainly an exciting new genre of Web applications.Thousands of mashups you can find today
on the Web, which developing fast now days. Mashups are an excellent way of presenting information from
one or more sources. They often provide visualization of information, and, frequently, that visualization is in the
form of interactive maps. In conjunction with APIs such as Google mapping, eBay, Yahoo!, Flickr, and others,
you will be able to build a mashups.
7. REFERENCES
[1]Bloch, Michel.” Web 2.0, Mashups and Social Networking - What is it All About?” .Taming the Beast
.Located on the Internet at http://www.tamingthebeast.net/articles6/web2-mashups-social-network.htm .Last
visited: 7 December 2008.
[2] Feiler, Jesse .How to do everything with web 2.0 mashup, 2008.
[3] Gruber, Chris and Paul Zikopoulos .” IBM Mashup Center Puts Mashups on the Menu” IBM database
Magazine 3,2008. Located on the Internet at http://www.ibmdatabasemag.com/showArticle.
jhtml;jsessionid=FYZBZG0S40LJAQSNDLOSKHSCJUNN2JVN?articleID=209900029&pgno=1 . Last visited:
12 December 2008.
[4]Located on the Internet at http://www.sodascope.com/FlickrMapsExt/ . Last visited: 7 December 2008.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

6. [5] Mashupshub .Located on the Internet at http://www.mashupshub.com/.Last visited: 9 December 2008.
[6]”Mashup (web application hybrid)” . Wikipedia. Located on the Internet at
http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid).Last visited: 7 December 2008.
[7]Merrill, Duane.”Mashups: The new breed of Web app”. IBM .Located on the Internet at
http://www.ibm.com/developerworks/xml/library/x-mashups.html . Last visited: 7 December 2008.
[8] Patton, Tony. “Mashups put a new face on the Web”. Techrepublic .Located on the Internet at
http://content.techrepublic.com.com/5100-10878_11-6156271.html. Last visited: 9 December 2008.
[9] Programmableweb .Located on the Internet at http://www.programmableweb.com/ .Last visited: 9
December 2008.
[10] Tech-faq .Located on the Internet at http://www.tech-faq.com/mashup.shtml. Last visited: 9 December
2008.
[11] ” What is Mashup for Web 2.0?” .Aimedias .Located on the Internet at http://www.aimedias.com/?p=5.Last
visited: 7 December 2008.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that
copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first
page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission.
The First Mini-Conference in Web Technologies and Trends (WTT)
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia