Web 2.0 Mashups


Published on


Published in: Economy & Finance, Technology

Web 2.0 Mashups

  1. 1. Web 2.0 Mashups Dr. Harry Chen CMSC 491S/691S March 3, 2008
  2. 2. Agenda <ul><li>What’s Web Mashup? </li></ul><ul><li>How is it different from Web Portals and Web Information Aggregators? </li></ul><ul><li>Popular Mashup architecture </li></ul><ul><li>Key enabling technologies of Mashups </li></ul><ul><li>Legal and business issues </li></ul>
  3. 3. 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)
  4. 4. Mashups and Mashups Music Mashups Web 2.0 Mashups
  5. 5. Good ideas behind Mashups <ul><li>Allow information to be viewed from different perspectives (e.g., view real estate data on a map) </li></ul><ul><li>Combine data from multiple sources into a single unified view (e.g., compare gas prices in the neighborhood). </li></ul><ul><li>Enrich raw data with new information (e.g., view eBay real estate auction along with Zillow data) </li></ul>
  6. 6. These ideas are not new! <ul><li>Web Portals : Yahoo! provide information of different kinds under a single unified theme. </li></ul><ul><li>Web Information Aggregators : CNET, Pricewatch.com, MySimon etc. provide price comparison services for many products. </li></ul><ul><li>RSS Readers : collect feeds from different news sites to create a news channel. </li></ul>
  7. 7. Mashup, old idea repolished? <ul><li>Is Mashup an innovative new idea? </li></ul><ul><li>Are there any difference among Mashups , Web Portals and Web Information Aggregators ? </li></ul>
  8. 8. Similar, but distinct Web Portals & Web Information Aggregators vs. Mashups <ul><li>Only Mashups creates something new from the existing information </li></ul><ul><li>Pull information from different sources </li></ul><ul><li>Provide a unified view </li></ul>Difference Similarity
  9. 9. Restaurants Example <ul><li>Consider a Restaurant Review web site </li></ul><ul><li>A typical Web Portal or Aggregator </li></ul><ul><ul><li>Collect reviews from multiple sources </li></ul></ul><ul><ul><li>Combine reviews into a single database </li></ul></ul><ul><ul><li>Build a new Web site for review search and recommendation </li></ul></ul>An example from: http://webtrends.about.com/od/webmashups/a/web_mashup.htm
  10. 10. Restaurant Mashup App <ul><li>Collect reviews from difference sites (including Web Portals) </li></ul><ul><li>Use Google Maps to locate the restaurant address and place their reviews on the map </li></ul><ul><li>New UI experience – browse restaurant reviews on a map. </li></ul>
  11. 11. Mashup Genres <ul><li>Mapping mashups </li></ul><ul><li>Video and audio mashups </li></ul><ul><li>Search and shopping mashups </li></ul><ul><li>News mashups </li></ul><ul><li>Enterprise mashups </li></ul><ul><li>Mashups of Mashups (monster mashups) </li></ul>
  12. 12. Mashup Architecture
  13. 13. What’s involved Content Provider API Provider Mashup Site Client Web Browser Content Provider Content Provider API Provider API Provider
  14. 14. Content Provider <ul><li>Provides data </li></ul><ul><li>May be the authority in these data (e.g., US government agency) </li></ul><ul><li>May ask for money to use the data </li></ul><ul><li>May invite the Web to contribute to and edit the data </li></ul><ul><li>May not provide open API for reading data </li></ul>Can you name a Content Provider?
  15. 15. API Provider <ul><li>Provides API to access and modify the data </li></ul><ul><li>May the same organization that publishes the data (API Provider == Content Provider) </li></ul><ul><li>API are usually Web-based (HTTP) </li></ul><ul><li>May ask for money to use the API, usually its free. </li></ul>Can you name an API Provider who is not a Content Provider?
  16. 16. Mashup Site <ul><li>Hosts the mashup application </li></ul><ul><li>Actual “mashup” may not occurred on the server – depending on the implementation </li></ul><ul><ul><li>Server-side process </li></ul></ul><ul><ul><li>Client-side process </li></ul></ul><ul><li>May license the use of data or API from the Content Provider or API Provider </li></ul><ul><li>May acquire data by scrapping Web pages </li></ul>Do you see any problems with mashups that rely on content scrapping?
  17. 17. Client Web Browser <ul><li>Displays mashup pages to the user </li></ul><ul><li>May perform client-side “mashup” logic </li></ul><ul><li>JavaScript and ActiveX are usually required </li></ul><ul><li>Heavy use of JavaScript and ActiveX can cause cross-browser compatibility issue. </li></ul>What’s the role Flash technology in Web 2.0 Mashups?
  18. 18. Key Enabling Technologies
  19. 19. 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
  20. 20. Key technologies <ul><li>HTTP </li></ul><ul><li>Ajax </li></ul><ul><li>XHTML and CSS </li></ul><ul><li>REST </li></ul><ul><li>RSS </li></ul>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.
  21. 21. HTTP <ul><li>Without HTTP, the Web won’t exist. </li></ul><ul><li>The protocol for communicating information on the Web </li></ul><ul><li>It defines 8 methods indicating the desired actions to be performed on a resource </li></ul>Web Browser Web Server request response Can you name those methods?
  22. 22. Key HTTP Methods <ul><li>Some methods are key to enable REST programming (more on REST later) </li></ul>
  23. 23. HTTP in Mashups <ul><li>Mashup applications usually read/write data via HTTP </li></ul><ul><li>Because HTTP is stateless, building mashup applications is not as intuitive as building desktop applications. </li></ul><ul><li>Sending data via HTTP has many advantageous. Can you name a few? </li></ul><ul><ul><li>What if you are building an enterprise app </li></ul></ul>
  24. 24. Ajax <ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>The idea is to enable interactive Web pages without requiring the browser to refresh. </li></ul>Browser JavaScript code Web Server “ Give me some data” “ Here, data in XML” Modify the page content, without refreshing the page
  25. 25. Ajax vs. tradition HTTP paradigm <ul><li>In the tradition HTTP world </li></ul><ul><ul><li>Every request results in a new page loading </li></ul></ul><ul><ul><li>Dynamic pages are created on the server-side </li></ul></ul><ul><ul><li>Data, format and styling are done on the server </li></ul></ul><ul><li>In the Ajax world </li></ul><ul><ul><li>The result of an Ajax call may only change a small parts of an existing HTML page </li></ul></ul><ul><ul><li>Server sets up the page structure, JavaScript code performs the content creation </li></ul></ul><ul><ul><li>Data, format and styling are done via JavaScript (CSS and XHTML) </li></ul></ul>
  26. 26. Ajax in Mashups <ul><li>The idea of Ajax plays an important role in the mashup culture – not the JavaScript part or the XML part of Ajax. </li></ul><ul><li>Ajax encouraged Web innovations </li></ul><ul><ul><li>Goolge Maps </li></ul></ul><ul><ul><li>Porting desktop applications to the Web </li></ul></ul><ul><li>Ajax make the Web more “useable” for the everyday people </li></ul>
  27. 27. XHTML and CSS <ul><li>HTML tells your browser the structure of a Web page </li></ul><ul><li>CSS tells your browser about the format and styling of the page content </li></ul><ul><li>XHTML is an XML version of the HTML language </li></ul>Why do we need XHTML? What’s wrong with HTML?
  28. 28. XHTML and CSS in JavaScript <ul><li>JavaScript is powerful Web programming language because it can exploit XHTML and CSS </li></ul><ul><li>JavaScript is support by all major Web browsers and it provides the API to parse XHTML pages and use CSS </li></ul><ul><li>You don’t use JavaScript to change page styles. You change page styles by using JavaScript to manipulate XHTML and CSS </li></ul>
  29. 29. XHTML and CSS in Mashups <ul><li>XHTML provides the mechanism to “id” objects in a Web page and change their structural position in the page </li></ul><ul><ul><li>Without XHTML, you won’t be able to move things around in the page without doing a “refresh” </li></ul></ul><ul><li>CSS makes Mashup “pretty” and “usable”. </li></ul><ul><ul><li>Diaglog box vs. a browser pop-up </li></ul></ul><ul><ul><li>Overlay HTML objects on the top of each </li></ul></ul>
  30. 30. REST <ul><li>Re presentational S tate T ransfer </li></ul><ul><li>The goal is to allow web resources to be created, updated, deleted and retrieved using the existing HTTP methods. </li></ul><ul><li>REST is the enemy of RPC (Remote Procedure Calls) </li></ul><ul><li>Resources are identified by unique URL </li></ul>http://example.com/user/johnsmith
  31. 31. The CRUD model e.g., REST operation: http://example.com/user/johnsmith
  32. 32. REST in Mashups <ul><li>REST simplifies the reading of data for Mashup applications. </li></ul><ul><li>You can build Mashups without using REST </li></ul><ul><li>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. </li></ul>
  33. 33. RSS <ul><li>R eally S imple S yndication </li></ul><ul><li>Allows frequently updated contents to be published in a common format </li></ul>
  34. 34. RSS in Mashups <ul><li>RSS can be used a standard formation representation to share information between the Content Provider and Mashup Sites. </li></ul><ul><li>Provides key vocabularies to describe common data types on the Web </li></ul><ul><ul><li>Use RSS to describe blog entries, news, podcasts, email messages etc. </li></ul></ul>
  35. 35. Mashup Legal and Business Issues
  36. 36. Legal Issues <ul><li>Should Mashup artists have the right to use any data published on the Web? </li></ul><ul><li>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. </li></ul><ul><li>Trespassing in Cyberspace: your mashup is overloading my server! </li></ul>See also: http://web.mit.edu/sloan-msa/Papers/4.5.pdf
  37. 37. Business Issues <ul><li>Is it a good idea to build your start-up based on the Mashup idea? </li></ul><ul><ul><li>What if your Content Provider pull the plug from you? </li></ul></ul><ul><ul><li>What kind of control do you have over the data? </li></ul></ul><ul><ul><li>What kind of legal liabilities do you have when “mashup” data from other sites? </li></ul></ul>
  38. 38. Summary <ul><li>A mashup is a web application that combines data from more than one source into a single integrated tool </li></ul><ul><li>It’s a unique technology because it creates something new from the data already exists. </li></ul><ul><li>Mashups are only possible because of the recently advancement in Web technology – Ajax, REST, XHTML, CSS and RSS. </li></ul>