Mashups Intro and Examples

1. Mashups
work you don’t have to do
evalica@infoiasi.ro
http://students.info.uaic.ro/~evalica/

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ă evalica@infoiasi.ro
2

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ă evalica@infoiasi.ro
3

4. Buzzword 2.0
microformats
participation
ebay
RSS Google
APIs
Mashups
Summer <Web /> 2.007
YouTube
folksonomy
Flickr
Ajax del.icio.us
Wikipedia
blogging open data
Amazon
Ecaterina Valică evalica@infoiasi.ro
4

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ă evalica@infoiasi.ro
5

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ă evalica@infoiasi.ro
6

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ă evalica@infoiasi.ro
7

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ă evalica@infoiasi.ro
8

9. Make your own mashup
Pick a subject Decide what data sources
Decide where your data is coming from
Programmableweb.com
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ă evalica@infoiasi.ro
9

10. Make your own mashup
Top APIs for Mashups
Advertising Google AdSense,
Yahoo Ads
Blogging Blogger
Bookmarks del.icio.us
Events Eventful,
Upcoming.org
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ă evalica@infoiasi.ro
10

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ă evalica@infoiasi.ro
11

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ă evalica@infoiasi.ro
12

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ă evalica@infoiasi.ro
13

14. Mashup styles
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
14

15. Google Maps Mashup
APIs: http://code.google.com/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ă evalica@infoiasi.ro
15

16. Google Maps Mashup
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
16

17. Google Maps Mashup
As simple as possible,
but no simpler
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
17

18. Google Maps Mashup
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
18

19. Chicagocrime
http://www.chicagocrime.org
Description: A freely browsable database of crimes reported in Chicago overlaid onto Google Maps
APIs: Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
19

20. Housing Maps
http://www.housingmaps.com/
Description: Visual housing search page via dynamic overlays of Craigslist home listings on Google Maps
APIs: Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
20

21. BBC News
http://www.benedictoneill.com/content/newsmap/
Description: See where the latest news is happening in the UK
APIs: BBC, Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
21

22. loc.alize.us
http://loc.alize.us
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ă evalica@infoiasi.ro
22

23. Quebec Wines
http://www.quebecwines.com/qw_quebecwineriesmap.php
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ă evalica@infoiasi.ro
23

24. emokoo
http://www.emokoo.com/
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ă evalica@infoiasi.ro
24

25. Page Flakes
http://www.pageflakes.com/
Description: Custom homepage builder that uses Ajax to includes pre-built modules for Flickr, YouTube, Amazon, etc.
APIs: Amazon S3, AOL Video, Box.net, Clickatell, del.icio.us, 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ă evalica@infoiasi.ro
25

26. The Effects of Nuclear Weapons
http://meyerweb.com/eric/tools/gmap/hydesim.html
Description: Illustrates the effect of a 150 kiloton nuclear explosion
APIs: Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
26

27. World of Warcraft Map
http://mapwow.com/
Description: A World of Warcraft Map that includes Herbs, Ores and Treasures
APIs: Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
27

28. Goggles
http://www.isoma.net/games/goggles.html
Description: Flight simulator built on top of Google Maps, containing several locations to fly over
APIs: Google Maps
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
28

29. Whack-A-Mole(Ker)
http://gmaps-samples.googlecode.com/svn/trunk/whackamarker/whackamarker.htm
Description: Whack as many invader mole you can
APIs: Google Maps
Other: Easter Egg Hunt
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
29

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ă evalica@infoiasi.ro
30

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ă evalica@infoiasi.ro
31

32. Links
http://www.programmableweb.com
http://www.googlemapsmania.blogspot.com/
http://www.webdirections.org/
Summer <Web /> 2.007
http://web2.wsj2.com/
http://code.google.com/
http://www.wikipedia.org/
Ecaterina Valică evalica@infoiasi.ro
32

33. Questions?
Summer <Web /> 2.007
Ecaterina Valică evalica@infoiasi.ro
33