Web Mashups

Presented By:Saket GoelUni: sg2679

What is a Web Mashup

• A web application that takes information from one or more sources and presents it in a new way or with a unique layout.

• It primarily combines data content from more than one source to create a new user experience.

• Web Mashup = API [1] + API [2] + … API [N]

Mashup Genres

1) Mapping Mashups• Location details associated with data used to place on maps

• Google Maps, Yahoo Maps, Map Quest

2) Video and photo Mashups• Content providers provide metadata associated with the images

• YahooImages, YouTube

3) Search and Shopping Mashups• API’s provided by eBay, Amazon used

4) News Mashups• Technologies such as RSS and Atom used to give out news feeds

• These can combine feeds to create personalized newspapers• Diggdot.us

Example of a Mashup

Mashup Architecture1] API/Content Providers• Sources of the content being mashed• Methods:  

       1)Through API’s using web protocols like REST and RSS/Atom             2)Screen Scraping

2] Mashup Site• This is where the mashup is hosted but not necessarily where it is

executed• Ways used for achieving data aggregation: 

       1)Client-side logic       2)Combination of Client-side and Server-side logic

3] Client’s Web Browser• Location where the application is represented graphically and where user

interaction takes place

Are Mashups new???

• Some would argue the concept of Mashups has been around for years - and this ‘hype’ over Mashups is over the top. For years we have been getting data from other systems and combining data with the existing systems to produce a result.

• Hype over Mashups because of the ease of end-users producing applications themselves through modern-day Mashup editors.

• The concept of the end-user being able to easily ‘drag-drop’ and put together a hacked up application within minutes is new.

Mashup Editors

• Used to create and edit mashups

Some of the popular mashup editors are:

1. Microsoft Popfly

2. Yahoo Pipes

3. Google Mashup Editor

Microsoft Popfly

• Drag Drop interface provided

• Blocks are combined to create mashups

• Advantages:        1. Easy to use        2. No prior coding experience required

• Disadvantages:        1. Does not allow as much customization as the other

editors.           

Yahoo Pipes!

• Pipes is a tool used to aggregate, manipulate and mash up content from around the world.

• Provides a GUI for combining many feeds into one, geocoding them, sorting and filtering them.

• Advantages:        1)Allows for a lot of customization and flexibility

• Disadvantages:        1)Difficult to use for the non-technical people as compared to Popfly

Google Mashup Editor

• No Drag Drop interface provided

• Mashups can be written in JavaScript, CSS and HTML

• Advantage:        1) Maximum room for customization offered

to programmers

• Disadvantage:       1)Reduced user base as too complicated for users who don’t have a strong knowledge of programming

Top Mashup Tags

Mashup Trends

• As on 04/16/2009:

• Total Mashups listed: 3868 • Past 7 Days:19 • Past 30 Days:88

• Mashups / Day: 3 • 7 Days Avg.: 2.7 • 30 Days Avg.: 2.9

The Rising Popularity

Mashup

Portals

• A web portal presents information from diverse sources in a unified way.

• Apart from the search feature, various other functionalities provided such as e-mail , news , stock prices, etc.

               Portal versus Mashup

      Criteria                          Portal                                Mashup

• Classification      Older Technology, extension to           Using newer, loosely defined Web                                               traditional  Web server                        2.0 Techniques

• Aggregation     Web server role split into 2 Phases:   API’s from different content

     Techniques     Markup Generation                            providers used to aggregate                                               Aggregation of mark up fragments

• Location           Traditionally, Content Aggregation     Content aggregation takes place

     Dependencies takes place on the server                   either on the server or the client

• Aggregation  “Salad bar style”: Aggregated “Melting Pot” style: Content can

Styles                  content presented side by side aggregated in any manner, without overlap. resulting in arbitary structured

hybrid content

Portals versus Mashup contd.

                                                               portals, mashup

Conclusions

• Mashups serve as an excellent method to represent aggregated data from multiple sources in a visually attractive way.

• As stated by Douglas Crockford, Senior JavaScript Architect at Yahoo! , “Mashups are one of the most interesting developments in the software industry in the last 20 years.”

Thank You!!