Mashups

Dr. Mohammad Ahmad

2

Mashups

Agenda Introduction

What are Mashups

Why Mashups

Types of Mashups

Architecture

Mashup Tools & Editors

Mashups Vs Portlets

Creating Your Own Mashups

Conclusion

3

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.

4

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

© Mediasurface 2008 5

6

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.

7

Types Of Mashups

Prominent Mashup types are

Mapping Mashups

Video and Photo Mashups

Search and Shopping Mashups

News Mashups

8

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.

9

10

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.

11

12

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 screen-scraping 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.

13

14

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 techie-oriented news sources Digg.com, Slashdot.org, and Del.icio.us.

15

16

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

17

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.

18

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.

19

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.

20

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 re-render the entire page after some user action.

21

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.

22

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 platform-agnostic encoding

2) Second is the message structure, which consists of a header and a body.

23

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.

24

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.

In this way, REST is similar to the document-literal style of SOAP services.

25

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.

26

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.

27

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.

28

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.

29

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 drag-drop 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.

30

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.

31

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.

32

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

33

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.