slide 1

Mashups

evalica@infoiasi.rohttp://students.info.uaic.ro/~evalica/

work you don’t have to do

Ecaterina Valică evalica@infoiasi.ro2

Sum

mer

<W

eb/>

2.

007

Content

Web 2.0 Software

So what’s a mashup?

Make your own mashup

Mashup styles

Google Maps Mashup

Samples

Limitations & Challenges

Ecaterina Valică evalica@infoiasi.ro3

Sum

mer

<W

eb/>

2.

007

"We know we don't have a corner on creativity. There are creative people all around the world, 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."

Vint Cerf

Ecaterina Valică evalica@infoiasi.ro4

Sum

mer

<W

eb/>

2.

007

Buzzword 2.0

RSS

Ajax

open data

APIs

folksonomyMashups

participationmicroformats

Google

Flickr

del.icio.usWikipedia

Amazon

YouTube

ebay

blogging

Ecaterina Valică evalica@infoiasi.ro5

Sum

mer

<W

eb/>

2.

007

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 easierto build, cheaper, more reusable, and more maintainable

Web 2.0 directions lead to information sharing, collaboration and social networking

Ecaterina Valică evalica@infoiasi.ro6

Sum

mer

<W

eb/>

2.

007

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 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.ro7

Sum

mer

<W

eb/>

2.

007

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

Other methods of sourcing content for mashups include Web feeds (e.g. RSS or Atom) and JavaScript”

Ecaterina Valică evalica@infoiasi.ro8

Sum

mer

<W

eb/>

2.

007

So what’s a mashup?

That encourage software creators to expose their applications as sets of reusable servicesand encourage others use the good pieces of what they provide in new and innovative ways, easily wiring together the little pieces

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.ro9

Sum

mer

<W

eb/>

2.

007

Make your own mashup

Pick a subject Decide what data sources

Decide where your data is coming from

Programmableweb.com

Total APIs: 431

Total Mashups Listed : 1900

Mashup/Day: 3.16

Weigh your coding skills: JavaScript, AJAX, Ruby, etc.

Ecaterina Valică evalica@infoiasi.ro10

Sum

mer

<W

eb/>

2.

007

Make your own mashup

Advertising Google AdSense, Yahoo Ads

Blogging BloggerBookmarks del.icio.usEvents Eventful,

Upcoming.orgMapping Google Maps,

Yahoo Maps, Microsoft Virtual Earth

Media YouTube, Flickr, Google Picasa

News BBCShopping Amazon, eBay

Top APIs for Mashups

Top Mashup Tags

Ecaterina Valică evalica@infoiasi.ro11

Sum

mer

<W

eb/>

2.

007

Make your own mashup

User

Mashup website

User Request

Website 1 Website 2

API Call Data API Call Data

Data presentation

Data Manipulation

Putting everything together

Ecaterina Valică evalica@infoiasi.ro12

Sum

mer

<W

eb/>

2.

007

Mashup styles

Presentation Mashup: Information either remix or just placed next to each other: Ajax desktops, portals

Client-Side Data Mashup: Information from 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.ro13

Sum

mer

<W

eb/>

2.

007

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

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.ro14

Sum

mer

<W

eb/>

2.

007

Mashup styles

Ecaterina Valică evalica@infoiasi.ro15

Sum

mer

<W

eb/>

2.

007

Google Maps Mashup

APIs: http://code.google.com/apis/

Lightweight programming model: Ajax, entirely JavaScript and XML, data formats: JSON, RSS

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.ro16

Sum

mer

<W

eb/>

2.

007

Google Maps Mashup

Ecaterina Valică evalica@infoiasi.ro17

Sum

mer

<W

eb/>

2.

007

Google Maps Mashup

As simple as possible, but no simpler

Ecaterina Valică evalica@infoiasi.ro18

Sum

mer

<W

eb/>

2.

007

Google Maps Mashup

Ecaterina Valică evalica@infoiasi.ro19

Sum

mer

<W

eb/>

2.

007

Description: A freely browsable database of crimes reported in Chicago overlaid onto Google MapsAPIs: Google Maps

Chicagocrimehttp://www.chicagocrime.org

Ecaterina Valică evalica@infoiasi.ro20

Sum

mer

<W

eb/>

2.

007

Housing Mapshttp://www.housingmaps.com/

Description: Visual housing search page via dynamic overlays of Craigslist home listings on Google MapsAPIs: Google Maps

Ecaterina Valică evalica@infoiasi.ro21

Sum

mer

<W

eb/>

2.

007

BBC Newshttp://www.benedictoneill.com/content/newsmap/

Description: See where the latest news is happening in the UKAPIs: BBC, Google Maps

Ecaterina Valică evalica@infoiasi.ro22

Sum

mer

<W

eb/>

2.

007

Description: Find any place all around the world and see where your or your friends have beenAPIs: Flickr, Google Maps

loc.alize.us http://loc.alize.us

Ecaterina Valică evalica@infoiasi.ro23

Sum

mer

<W

eb/>

2.

007

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

Ecaterina Valică evalica@infoiasi.ro24

Sum

mer

<W

eb/>

2.

007

emokoohttp://www.emokoo.com/

Description: A community site allowing you to share media from other social web 2.0 communitiesAPIs: Blogger, Flickr, YouTube

Ecaterina Valică evalica@infoiasi.ro25

Sum

mer

<W

eb/>

2.

007

Page Flakeshttp://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

Ecaterina Valică evalica@infoiasi.ro26

Sum

mer

<W

eb/>

2.

007

The Effects of Nuclear Weaponshttp://meyerweb.com/eric/tools/gmap/hydesim.html

Description: Illustrates the effect of a 150 kiloton nuclear explosion APIs: Google Maps

Ecaterina Valică evalica@infoiasi.ro27

Sum

mer

<W

eb/>

2.

007

World of Warcraft Maphttp://mapwow.com/

Description: A World of Warcraft Map that includes Herbs, Ores and Treasures APIs: Google Maps

Ecaterina Valică evalica@infoiasi.ro28

Sum

mer

<W

eb/>

2.

007

Goggleshttp://www.isoma.net/games/goggles.html

Description: Flight simulator built on top of Google Maps, containing several locations to fly overAPIs: Google Maps

Ecaterina Valică evalica@infoiasi.ro29

Sum

mer

<W

eb/>

2.

007

Whack-A-Mole(Ker)http://gmaps-samples.googlecode.com/svn/trunk/whackamarker/whackamarker.htm

Description: Whack as many invader mole you canAPIs: Google MapsOther: Easter Egg Hunt

Ecaterina Valică evalica@infoiasi.ro30

Sum

mer

<W

eb/>

2.

007

Limitations & Challenges

Limitations of APIs

Query size / Quantity – less than 50,000 hits per day (Google Maps)

API change? Can you keep up?

Cross-domain security problem

Legal Issues: "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.ro31

Sum

mer

<W

eb/>

2.

007

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:

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.ro32

Sum

mer

<W

eb/>

2.

007

Links

http://www.programmableweb.com

http://www.googlemapsmania.blogspot.com/

http://www.webdirections.org/

http://web2.wsj2.com/

http://code.google.com/

http://www.wikipedia.org/

Ecaterina Valică evalica@infoiasi.ro33

Sum

mer

<W

eb/>

2.

007 Questions?