Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Mashups Intro and Examples

Published in: Technology, Education
  • Follow the link, new dating source: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here


  1. 1. Mashups work you don’t have to do
  2. 2. Content Web 2.0 Software So what’s a mashup? Make your own mashup Summer <Web /> 2.007 Mashup styles Google Maps Mashup Samples Limitations & Challenges Ecaterina Valică 2
  3. 3. quot;We know we don't have a corner on creativity. There are creative people all around the world, Summer <Web /> 2.007 hundreds of millions of them, and they are going to think of things to do with our basic platform that we didn't think of.quot; Vint Cerf Ecaterina Valică 3
  4. 4. Buzzword 2.0 microformats participation ebay RSS Google APIs Mashups Summer <Web /> 2.007 YouTube folksonomy Flickr Ajax Wikipedia blogging open data Amazon Ecaterina Valică 4
  5. 5. Web 2.0 Software Alternative way of producing software: lighter, faster, more people-centric direction Suitable when requirements are rapidly changing Used to make business applications that are easier Summer <Web /> 2.007 to build, cheaper, more reusable, and more maintainable Web 2.0 directions lead to information sharing, collaboration and social networking Ecaterina Valică 5
  6. 6. Web 2.0 Development Ideals Extremely Frequent Releases: Bugs go away faster, smooth evolution Small Pieces, Loosely Joined: Makes change easier, less risky but the parts are also less specialized and hackable Lightweight Programming Models: Languages and Summer <Web /> 2.007 simple data formats make development easy and cost- effective Users as Co-Creators: Offering them the features they want, allowing them to contribute information and attention Real-time Feedback and Sampling: watch what they do and use the feedback to create an better product Ecaterina Valică 6
  7. 7. So what’s a mashup? “A mashup is a website or application that combines content from more than one source into an integrated experience Content used in mashups is typically sourced from a third party via a public interface or API Summer <Web /> 2.007 Other methods of sourcing content for mashups include Web feeds (e.g. RSS or Atom) and JavaScript” Ecaterina Valică 7
  8. 8. So what’s a mashup? That encourage software creators to expose their applications as sets of reusable services and encourage others use the good pieces of what they provide in new and innovative ways, easily wiring together the little pieces Summer <Web /> 2.007 On the demand-side there is a rising comfort with and expectation of finding a throw-away application to do just the one thing you needed when you need it Ecaterina Valică 8
  9. 9. Make your own mashup Pick a subject Decide what data sources Decide where your data is coming from Summer <Web /> 2.007 Total APIs: 431 Total Mashups Listed : 1900 Mashup/Day: 3.16 Weigh your coding skills: JavaScript, AJAX, Ruby, etc. Ecaterina Valică 9
  10. 10. Make your own mashup Top APIs for Mashups Advertising Google AdSense, Yahoo Ads Blogging Blogger Bookmarks Events Eventful, Summer <Web /> 2.007 Mapping Google Maps, Top Mashup Tags Yahoo Maps, Microsoft Virtual Earth Media YouTube, Flickr, Google Picasa News BBC Shopping Amazon, eBay Ecaterina Valică 10
  11. 11. Make your own mashup Putting everything together User User Request Data presentation Summer <Web /> 2.007 Data Manipulation Mashup website Data API Call Data API Call Website 2 Website 1 Ecaterina Valică 11
  12. 12. Mashup styles Presentation Mashup: Information either remix or just placed next to each other: Ajax desktops, portals Client-Side Data Mashup: Information from Summer <Web /> 2.007 remote Web services, feeds, or even just plain HTML => new information Client-Side Software Mashup: Code integrated to result in a distinct new capability Ecaterina Valică 12
  13. 13. Mashup styles Server-Side Software Mashup: Recombinant software is easier since Web services Server-Side Data Mashup: Mashup up data across databases from different vendors Summer <Web /> 2.007 The advantage of in-browser client mashups is the complete portability and mobility they offer The advantage of server-side mashup is that it simplifies the client and offers a programming infrastructure that is much deeper and more powerful Ecaterina Valică 13
  14. 14. Mashup styles Summer <Web /> 2.007 Ecaterina Valică 14
  15. 15. Google Maps Mashup APIs: Lightweight programming model: Ajax, entirely JavaScript and XML, data formats: JSON, RSS Summer <Web /> 2.007 Google offers trust and credibility. As a mashup component supplier, having both of these in large supply is essential to get people to establish a long-term relationship with you Ecaterina Valică 15
  16. 16. Google Maps Mashup Summer <Web /> 2.007 Ecaterina Valică 16
  17. 17. Google Maps Mashup As simple as possible, but no simpler Summer <Web /> 2.007 Ecaterina Valică 17
  18. 18. Google Maps Mashup Summer <Web /> 2.007 Ecaterina Valică 18
  19. 19. Chicagocrime Description: A freely browsable database of crimes reported in Chicago overlaid onto Google Maps APIs: Google Maps Summer <Web /> 2.007 Ecaterina Valică 19
  20. 20. Housing Maps Description: Visual housing search page via dynamic overlays of Craigslist home listings on Google Maps APIs: Google Maps Summer <Web /> 2.007 Ecaterina Valică 20
  21. 21. BBC News Description: See where the latest news is happening in the UK APIs: BBC, Google Maps Summer <Web /> 2.007 Ecaterina Valică 21
  22. 22. Description: Find any place all around the world and see where your or your friends have been APIs: Flickr, Google Maps Summer <Web /> 2.007 Ecaterina Valică 22
  23. 23. Quebec Wines Description: Show the location of the wineries in Quebec and related wine information APIs: Amazon E-commerce, Google AdSense, Google Maps, Google Search Summer <Web /> 2.007 Ecaterina Valică 23
  24. 24. emokoo Description: A community site allowing you to share media from other social web 2.0 communities APIs: Blogger, Flickr, YouTube Summer <Web /> 2.007 Ecaterina Valică 24
  25. 25. Page Flakes Description: Custom homepage builder that uses Ajax to includes pre-built modules for Flickr, YouTube, Amazon, etc. APIs: Amazon S3, AOL Video,, Clickatell,, FedEx, Flickr, Google Ajax Search, Google Calendar, Google Code Search, Google Maps, indeed, InnerGears Weather by City, Map24 AJAX API, OpenStreetMap, Rhapsody, Rrove, SmashFly, TradeSports, WebAIM, YouTube Summer <Web /> 2.007 Ecaterina Valică 25
  26. 26. The Effects of Nuclear Weapons Description: Illustrates the effect of a 150 kiloton nuclear explosion APIs: Google Maps Summer <Web /> 2.007 Ecaterina Valică 26
  27. 27. World of Warcraft Map Description: A World of Warcraft Map that includes Herbs, Ores and Treasures APIs: Google Maps Summer <Web /> 2.007 Ecaterina Valică 27
  28. 28. Goggles Description: Flight simulator built on top of Google Maps, containing several locations to fly over APIs: Google Maps Summer <Web /> 2.007 Ecaterina Valică 28
  29. 29. Whack-A-Mole(Ker) Description: Whack as many invader mole you can APIs: Google Maps Other: Easter Egg Hunt Summer <Web /> 2.007 Ecaterina Valică 29
  30. 30. Limitations & Challenges Limitations of APIs Query size / Quantity – less than 50,000 hits per day (Google Maps) API change? Can you keep up? Summer <Web /> 2.007 Cross-domain security problem Legal Issues: quot;It's simply combining two things but not (adding) a lot of intellectual property on top of it. The problem is the people giving you the content want to be compensated. You are in fact a reseller of that content.“ Leap Frog Ventures Ecaterina Valică 30
  31. 31. Limitations & Challenges Bridgewerx, Kapow, Worcsnet - requiring programming skills to create mashups QEDWiki developed by IBM Google launches a new feature for Google Maps, My Maps, who can: Summer <Web /> 2.007 Mark locations on a map from a library of icons Draw lines and shapes to highlight paths and areas Add text, photos, or YouTube/Google Videos to a map Add HTML for further personalization View their maps in Google Earth Ecaterina Valică 31
  32. 32. Links Summer <Web /> 2.007 Ecaterina Valică 32
  33. 33. Questions? Summer <Web /> 2.007 Ecaterina Valică 33