pipes and google mashup editor

Yahoo! Pipes and
Google Mashup Editor

Yahoo! Pipes

What is it?

Yahoo! Pipes

Yahoo! Says:

Rewire the web

and

Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.

Yahoo! Pipes

ReadWriteWeb says:

...with pipes, the Web essentially becomes a giant database that can be queried and remixed in any number of ways

Yahoo! Pipes

Why would I want to do that?

Yahoo! Pipes


Got two or more sources of information you want to use together?

Yahoo! Pipes



Got information in different formats?

Yahoo! Pipes



Got information in different formats?

Got an idea but not sure how to implement it?

Yahoo! Pipes

Benefits...?

Yahoo! Pipes

Benefits...?

Easy to use tools provided

Yahoo! Pipes

Benefits...?


Publishing, hosting and distribution taken care of

Yahoo! Pipes

Benefits...?


Publishing, hosting and distribution taken care of

No (or very little) coding necessary

Yahoo! Pipes

Let's make a pipe!

http://pipes.yahoo.com

Yahoo! Pipes

Signup

or

Login using your Yahoo! ID or Flickr login

Yahoo! Pipes

Create your pipe graphically

Drag and drop modules to build a pipe

Yahoo! Pipes

Start with the feed source(s)

Work your way towards the pipe output

Yahoo! Pipes

Let's build a pipe that:

gets job data from various sources

displays the information in an interesting way

we can publish for others to use

Yahoo! Pipes

Copy the RSS URL from the browser address bar

Paste it into the Feed module in your pipe

Yahoo! Pipes

Connect your Feed module to your pipe output

Ta-da! You've made a working pipe.

Yahoo! Pipes

But, that's not much better than the original feed

Let's add another source

Yahoo! Pipes

Add a Union module

Combines up to 5 different feeds

Yahoo! Pipes

Filter results

Ensure we only get developer roles

Yahoo! Pipes

Filter results


Add a filter rule that allows only this subset

Yahoo! Pipes

Filter results


Add a filter rule that allows only this subset

Can we check what we're doing as we go along?

Yahoo! Pipes

Yes, use the debugger pane

Gives us a quick preview of the pipe output

Yahoo! Pipes

Yes, use the debugger pane

Gives us a quick preview of the pipe output

Here we see how it has reduced the result set from 55 items to 24 items

Yahoo! Pipes

Saving the pipe allows us to then run it

Yahoo! Pipes

Great. So now we have a combined feed of jobs from The Guardian and The Times.

What else can we do with it?

Yahoo! Pipes

Create a badge

adds a widget to blogging systems like Blogger, TypePad, Wordpress

or

provides a tag to paste into any web page

Yahoo! Pipes

Create a widget to add to

My Yahoo!

Google homepage

Google Reader

Netvibes

Yahoo! Pipes

Get instant or daily email alerts as the feed updates

Get instant messenger alerts

Get mobile alerts (USA only, I think)

Yahoo! Pipes

Output as JSON

Lightweight

Easy for Javascript developers to work with

Yahoo! Pipes

Output as RSS

Use in your favourite newsreader

Import as data source for Google Mashups Editor

Yahoo! Pipes

Pretty useful, hmm?

But not very exciting. Can we 'make it funky'?

Yahoo! Pipes

Let's try and put the jobs on a map

Yahoo! Pipes

Let's try and put the jobs on a map

First, we need to find the location for each job

Yahoo! Pipes

Location Extractor is a module which searches the item titles and descriptions for likely place names.

It then creates a location item containing latitude and longitude information, and outputs it in GeoRSS format for use by other services

Yahoo! Pipes

If we run the pipe now, we get a different output

Yahoo! Pipes

Again, we can output this in various formats

Google homepage

Blogger widget

Yahoo! Pipes

But we're still not quite there yet

I want to present the data in a combined list and map format.

With integration between the two

Google Mashups Editor (GME)

What is it?


Google says:

...an interactive development environment in which you edit, compile, test, and manage your applications

...a development environment that allows the user to place interacting modules on a Web page and provide them with data from a variety of feeds


Uses standard languages:

HTML

CSS

Javascript

XML


Unfortunately, it's STILL in closed beta


But you can request access here:

http://code.google.com/support/mashupeditorsignup/


You write, test and save your files within the editor

Like Google Docs or Calendar, you can access your projects from anywhere


Create a new project

Small set of custom Google tags describe what goes where

Each Mashup must have at least


Write your page using HTML

Use Google tags to insert special features

adds a list to the page

data attribute is where you put your feed

In our case, the RSS link from our pipe


adds a Google map to the page

Data attribute can link to the id of an element which already has a data sourced specified


allows each page element to respond to clicks from another page element

src attribute should be the id of the element to listen to clicks from

We'll add one for the list and one for the map


is a chunk of code which page elements can use

Give it an id

Reference the template from a page element using template= attribute


access the title element of the current feed item

NOTE: GME converts RSS to Atom on import

uses Xpath to find the right link from the feed.


This app is now publically available at

http://combinejobs.googlemashups.com/


You can now deploy your app as a Google Gadget by using this URL:

http://combinejobs.googlemashups.com/gadget.xml

Can be submitted to Google's Gadget Directory

Pipes: http://pipes.yahoo.com

Blog: http://blog.pipes.yahoo.net/

Group: http://discuss.pipes.yahoo.com/

Our pipe: http://pipes.yahoo.com/pipes/pipe.info_id=zo_zXlOu3RGJITC4rbQIDg

GME: http://code.google.com/gme/

The Editor: http://editor.googlemashups.com/editor

Our project: http://combinejobs.googlemashups.com/

Search Flickr in German:

http://pipes.yahoo.com/pipes/pipe.info?_id=3vDET7JJ3RGxD6T_MlrX_Q

Twitters by hour/day:

http://pipes.yahoo.com/pipes/pipe.edit?_id=ery0fdqM3RGKlYHC_g6H4A

http://xefer.com/twitter/kottke

Houses for sale on Gumtree:

http://pipes.yahoo.com/pipes/pipe.info?_id=vPQtpfT_2xG8k7axzKky6g

pipes and google mashup editor

Technology