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

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?

Why would I want to do that?

Yahoo! Pipes Why would I want to do that? Got two or more sources of information you want to use together?

Why would I want to do that?

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

Yahoo! Pipes Why would I want to do that? Got two or more sources of information you want to use together? Got information in different formats?

Why would I want to do that?

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

Got information in different formats?

Yahoo! Pipes Why would I want to do that? Got two or more sources of information you want to use together? Got information in different formats? Got an idea but not sure how to implement it?

Why would I want to do that?

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

Got information in different formats?

Got an idea but not sure how to implement it?

Yahoo! Pipes Benefits...?

Benefits...?

Yahoo! Pipes Benefits...? Easy to use tools provided

Benefits...?

Easy to use tools provided

Yahoo! Pipes Benefits...? Easy to use tools provided Publishing, hosting and distribution taken care of

Benefits...?

Easy to use tools provided

Publishing, hosting and distribution taken care of

Yahoo! Pipes Benefits...? Easy to use tools provided Publishing, hosting and distribution taken care of No (or very little) coding necessary

Benefits...?

Easy to use tools provided

Publishing, hosting and distribution taken care of

No (or very little) coding necessary

Yahoo! Pipes Let's make a pipe! http://pipes.yahoo.com

Let's make a pipe!

http://pipes.yahoo.com

Yahoo! Pipes Signup or Login using your Yahoo! ID or Flickr login

Signup

or

Login using your Yahoo! ID or Flickr login

Yahoo! Pipes Create your pipe graphically Drag and drop modules to build a pipe

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

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

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

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.

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

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

Add a Union module

Combines up to 5 different feeds

Yahoo! Pipes Filter results Ensure we only get “developer” roles

Filter results

Ensure we only get “developer” roles

Yahoo! Pipes Filter results Ensure we only get “developer” roles Add a filter rule that allows only this subset

Filter results

Ensure we only get “developer” roles

Add a filter rule that allows only this subset

Yahoo! Pipes Filter results Ensure we only get “developer” roles Add a filter rule that allows only this subset Can we check what we're doing as we go along?

Filter results

Ensure we only get “developer” roles

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

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

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

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?

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 <script> tag to paste into any web page

Create a badge

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

or

provides a <script> tag to paste into any web page

Yahoo! Pipes Create a widget to add to My Yahoo! Google homepage Google Reader Netvibes

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)

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

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

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'?

Pretty useful, hmm?

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

Yahoo! Pipes Let's try and put the jobs on a map

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

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

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

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

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

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 Mashups Editor (GME) 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”

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”

Google Mashups Editor (GME) Uses standard languages: HTML CSS Javascript XML

Uses standard languages:

HTML

CSS

Javascript

XML

Google Mashups Editor (GME) Unfortunately, it's STILL in closed beta

Google Mashups Editor (GME) But you can request access here: http://code.google.com/support/mashupeditorsignup/

Google Mashups Editor (GME) You write, test and save your files within the editor Like Google Docs or Calendar, you can access your projects from anywhere

You write, test and save your files within the editor

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

Google Mashups Editor (GME) Create a new project Small set of custom Google tags describe what goes where Each Mashup must have at least <gm:page></gm:page>

Create a new project

Small set of custom Google tags describe what goes where

Each Mashup must have at least <gm:page></gm:page>

Google Mashups Editor (GME) Write your page using HTML Use Google tags to insert special features <gm:list> adds a list to the page data attribute is where you put your feed In our case, the RSS link from our pipe

Write your page using HTML

Use Google tags to insert special features

<gm:list> adds a list to the page

data attribute is where you put your feed

In our case, the RSS link from our pipe

Google Mashups Editor (GME) <gm:map> adds a Google map to the page Data attribute can link to the id of an element which already has a data sourced specified

<gm:map> adds a Google map to the page

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

Google Mashups Editor (GME) <gm:handleEvent> 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

<gm:handleEvent> 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

Google Mashups Editor (GME) <gm:template> is a chunk of code which page elements can use Give it an id <gm:template id=”xxx”> Reference the template from a page element using template=”” attribute

<gm:template> is a chunk of code which page elements can use

Give it an id <gm:template id=”xxx”>

Reference the template from a page element using template=”” attribute

Google Mashups Editor (GME) <gm:text ref=&quot;atom:title&quot;> access the title element of the current feed item NOTE: GME converts RSS to Atom on import <gm:link ref=&quot;link/@href&quot; label=&quot;link...&quot;/> uses Xpath to find the right link from the feed.

<gm:text ref=&quot;atom:title&quot;> access the title element of the current feed item

NOTE: GME converts RSS to Atom on import

<gm:link ref=&quot;link/@href&quot; label=&quot;link...&quot;/> uses Xpath to find the right link from the feed.

Google Mashups Editor (GME) This app is now publically available at http://combinejobs.googlemashups.com/

This app is now publically available at

http://combinejobs.googlemashups.com/

Google Mashups Editor (GME) 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

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: 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