Slide 1

Mashups

[email protected]://students.info.uaic.ro/~evalica/

work you don’t have to do

Ecaterina Valică [email protected]

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


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


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


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


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


Sum

mer

<W

eb/>

2.

007


“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”


Sum

mer

<W

eb/>

2.

007


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


Sum

mer

<W

eb/>

2.

007


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.


Sum

mer

<W

eb/>

2.

007


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


Sum

mer

<W

eb/>

2.

007


User

Mashup website

User Request

Website 1 Website 2

API Call Data API Call Data

Data presentation

Data Manipulation

Putting everything together


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


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


Sum

mer

<W

eb/>

2.

007

Mashup styles


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

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


Sum

mer

<W

eb/>

2.

007

Google Maps Mashup


Sum

mer

<W

eb/>

2.

007

Google Maps Mashup

As simple as possible, but no simpler

http://maps.google.com/


Sum

mer

<W

eb/>

2.

007

Google Maps Mashup


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

http://www.chicagocrime.org/


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

http://www.housingmaps.com/


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

http://www.benedictoneill.com/content/newsmap/


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

http://loc.alize.us/

http://loc.alize.us/


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

http://www.quebecwines.com/qw_quebecwineriesmap.php

http://www.quebecwines.com/qw_quebecwineriesmap.php


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

http://www.emokoo.com/


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

http://www.pageflakes.com/


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

http://meyerweb.com/eric/tools/gmap/hydesim.html


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

http://mapwow.com/


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

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


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

http://gmaps-samples.googlecode.com/svn/trunk/whackamarker/whackamarker.htm

http://gmaps-samples.googlecode.com/svn/trunk/egghunt/egghunt.html


Sum

mer

<W

eb/>

2.

007


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


Sum

mer

<W

eb/>

2.

007


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

http://bridgewerx.com/

http://kapowtech.com/

http://worcsnet.com/mainLayout

http://services.alphaworks.ibm.com/qedwiki/





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/

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/


Sum

mer

<W

eb/>

2.

007 Questions?

Slide 1

Documents

Transcript of Slide 1