Web 2.0 Mashups

Dr. Harry Chen

CMSC 491S/691S

March 3, 2008

Agenda

What’s Web Mashup?How is it different from Web Portals and

Web Information Aggregators?Popular Mashup architectureKey enabling technologies of MashupsLegal and business issues

Mashup (web application hybrid)

“In technology, a mashup is a web application that combines data from more than one source into a single integrated tool; 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.”

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

Mashups and Mashups

Music Mashups

Web 2.0 Mashups

Good ideas behind Mashups

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 Zillow data)

These ideas are not new!

Web Portals: Yahoo! provide information of different kinds under a single unified theme.

Web Information Aggregators: CNET, Pricewatch.com, MySimon etc. provide price comparison services for many products.

RSS Readers: collect feeds from different news sites to create a news channel.

Mashup, old idea repolished?

Is Mashup an innovative new idea?Are there any difference among Mashups,

Web Portals and Web Information Aggregators?

Similar, but distinct

Web Portals & Web Information Aggregators vs. Mashups

Similarity Difference

Pull information from different sourcesProvide a unified view

Only Mashups creates something new from the existing information

Restaurants Example

Consider a Restaurant Review web siteA typical Web Portal or Aggregator

Collect reviews from multiple sources Combine reviews into a single database Build a new Web site for review search and

recommendation

An example from: http://webtrends.about.com/od/webmashups/a/web_mashup.htm

Restaurant Mashup App

Collect reviews from difference sites (including Web Portals)

Use Google Maps to locate the restaurant address and place their reviews on the map

New UI experience – browse restaurant reviews on a map.

Mashup Genres

Mapping mashupsVideo and audio mashupsSearch and shopping mashupsNews mashupsEnterprise mashupsMashups of Mashups (monster mashups)

Mashup Architecture

What’s involved

Content Provider

API Provider

Mashup Site

Client Web Browser

Content ProviderContent Provider

API Provider API Provider

Content Provider

Provides dataMay be the authority in these data (e.g.,

US government agency)May ask for money to use the dataMay invite the Web to contribute to and

edit the dataMay not provide open API for reading data

Can you name a Content Provider?

API Provider

Provides API to access and modify the data

May the same organization that publishes the data (API Provider == Content Provider)

API are usually Web-based (HTTP)May ask for money to use the API,

usually its free.

Can you name an API Provider who is not a Content Provider?

Mashup Site

Hosts the mashup application Actual “mashup” may not occurred on the

server – depending on the implementation Server-side process Client-side process

May license the use of data or API from the Content Provider or API Provider

May acquire data by scrapping Web pages

Do you see any problems with mashups that rely on content scrapping?

Client Web Browser

Displays mashup pages to the userMay perform client-side “mashup” logicJavaScript and ActiveX are usually

requiredHeavy use of JavaScript and ActiveX can

cause cross-browser compatibility issue.

What’s the role Flash technology in Web 2.0 Mashups?

Key Enabling Technologies

Technical issues to consider…

Mashup Site

Client Web Browser

Content Provider

API Provider

Interface for read/write data

Light-weight data format representation

Rich content & dynamic user interaction

Programming language neutrality

Cross-browser and multiple device platforms

Key technologies

HTTPAjaxXHTML and CSSRESTRSS

Not a complete list. But, a majority of mashup webapps use these technologies.

An overview for now. We will revisit them in more detail in the next few classes.

HTTP

Without HTTP, the Web won’t exist.The protocol for communicating

information on the WebIt defines 8 methods indicating the desired

actions to be performed on a resource

Web Browser Web Serverrequest

response

Can you name those methods?

Key HTTP Methods

Some methods are key to enable REST programming (more on REST later)

HTTP in Mashups

Mashup applications usually read/write data via HTTP

Because HTTP is stateless, building mashup applications is not as intuitive as building desktop applications.

Sending data via HTTP has many advantageous. Can you name a few? What if you are building an enterprise app

Ajax

Asynchronous JavaScript And XMLThe idea is to enable interactive Web

pages without requiring the browser to refresh.

Browser

JavaScriptcode

Web Server

“Give me some data”

“Here, data in XML”

Modify the page content, without refreshing the page

Ajax vs. tradition HTTP paradigm

In the tradition HTTP world Every request results in a new page loading Dynamic pages are created on the server-side Data, format and styling are done on the server

In the Ajax world The result of an Ajax call may only change a small parts

of an existing HTML page Server sets up the page structure, JavaScript code

performs the content creation Data, format and styling are done via JavaScript (CSS

and XHTML)

Ajax in Mashups

The idea of Ajax plays an important role in the mashup culture – not the JavaScript part or the XML part of Ajax.

Ajax encouraged Web innovations Goolge Maps Porting desktop applications to the Web

Ajax make the Web more “useable” for the everyday people

XHTML and CSS

HTML tells your browser the structure of a Web page

CSS tells your browser about the format and styling of the page content

XHTML is an XML version of the HTML language

Why do we need XHTML?

What’s wrong with HTML?

XHTML and CSS in JavaScript

JavaScript is powerful Web programming language because it can exploit XHTML and CSS

JavaScript is support by all major Web browsers and it provides the API to parse XHTML pages and use CSS

You don’t use JavaScript to change page styles. You change page styles by using JavaScript to manipulate XHTML and CSS

XHTML and CSS in Mashups

XHTML provides the mechanism to “id” objects in a Web page and change their structural position in the page Without XHTML, you won’t be able to move

things around in the page without doing a “refresh”

CSS makes Mashup “pretty” and “usable”. Diaglog box vs. a browser pop-up Overlay HTML objects on the top of each

REST

Representational State TransferThe goal is to allow web resources to be

created, updated, deleted and retrieved using the existing HTTP methods.

REST is the enemy of RPC (Remote Procedure Calls)

Resources are identified by unique URL

http://example.com/user/johnsmith

The CRUD model

e.g., REST operation:

http://example.com/user/johnsmith

REST in Mashups

REST simplifies the reading of data for Mashup applications.

You can build Mashups without using REST

IMHO. I like the idea of using URL to identify resources. But it’s unnecessary to take REST as the holistic approach to web development.

RSS

Really Simple SyndicationAllows frequently updated contents to be

published in a common format

RSS in Mashups

RSS can be used a standard formation representation to share information between the Content Provider and Mashup Sites.

Provides key vocabularies to describe common data types on the Web Use RSS to describe blog entries, news,

podcasts, email messages etc.

Mashup Legal and Business Issues

Legal Issues

Should Mashup artists have the right to use any data published on the Web?

I’m breaking any copyright laws if I feature you flickr photos on my mashup page? Assuming that I’m don’t profit from the page.

Trespassing in Cyberspace: your mashup is overloading my server!

See also: http://web.mit.edu/sloan-msa/Papers/4.5.pdf

Business Issues

Is it a good idea to build your start-up based on the Mashup idea? What if your Content Provider pull the plug from

you? What kind of control do you have over the data? What kind of legal liabilities do you have when

“mashup” data from other sites?

Summary

A mashup is a web application that combines data from more than one source into a single integrated tool

It’s a unique technology because it creates something new from the data already exists.

Mashups are only possible because of the recently advancement in Web technology – Ajax, REST, XHTML, CSS and RSS.