Pipes and Google Mashup Editor
- 1. Yahoo! Pipes and Google Mashup Editor
- 2. Yahoo! Pipes What is it?
- 3. Yahoo! Pipes Yahoo! Says: “Rewire the web” and “Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.”
- 4. Yahoo! Pipes ReadWriteWeb says: “...with pipes, the Web essentially becomes a giant database that can be queried and remixed in any number of ways”
- 5. Yahoo! Pipes Why would I want to do that?
- 6. Yahoo! Pipes Why would I want to do that? Got two or more sources of information you want to use together?
- 7. 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?
- 8. 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?
- 10. Yahoo! Pipes Benefits...? Easy to use tools provided
- 11. Yahoo! Pipes Benefits...? Easy to use tools provided Publishing, hosting and distribution taken care of
- 12. Yahoo! Pipes Benefits...? Easy to use tools provided Publishing, hosting and distribution taken care of No (or very little) coding necessary
- 13. Yahoo! Pipes Let's make a pipe! http://pipes.yahoo.com
- 15. Yahoo! Pipes Signup or Login using your Yahoo! ID or Flickr login
- 17. Yahoo! Pipes Create your pipe graphically Drag and drop modules to build a pipe
- 19. Yahoo! Pipes Start with the feed source(s) Work your way towards the pipe output
- 20. 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
- 24. Yahoo! Pipes Copy the RSS URL from the browser address bar Paste it into the Feed module in your pipe
- 26. Yahoo! Pipes Connect your Feed module to your pipe output Ta-da! You've made a working pipe.
- 28. Yahoo! Pipes But, that's not much better than the original feed Let's add another source
- 33. Yahoo! Pipes Add a Union module Combines up to 5 different feeds
- 35. Yahoo! Pipes Filter results Ensure we only get “developer” roles
- 38. Yahoo! Pipes Filter results Ensure we only get “developer” roles Add a filter rule that allows only this subset
- 39. 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?
- 40. Yahoo! Pipes Yes, use the debugger pane Gives us a quick preview of the pipe output
- 41. 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
- 44. Yahoo! Pipes Saving the pipe allows us to then run it
- 47. 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?
- 49. 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
- 52. Yahoo! Pipes Create a widget to add to My Yahoo! Google homepage Google Reader Netvibes
- 55. Yahoo! Pipes Get instant or daily email alerts as the feed updates Get instant messenger alerts Get mobile alerts (USA only, I think)
- 57. Yahoo! Pipes Output as JSON Lightweight Easy for Javascript developers to work with
- 59. Yahoo! Pipes Output as RSS Use in your favourite newsreader Import as data source for Google Mashups Editor
- 61. Yahoo! Pipes Pretty useful, hmm? But not very exciting. Can we 'make it funky'?
- 62. Yahoo! Pipes Let's try and put the jobs on a map
- 63. Yahoo! Pipes Let's try and put the jobs on a map First, we need to find the location for each job
- 65. 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
- 67. Yahoo! Pipes If we run the pipe now, we get a different output
- 69. Yahoo! Pipes Again, we can output this in various formats Google homepage Blogger widget
- 72. 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
- 73. Google Mashups Editor (GME) What is it?
- 74. 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”
- 75. Google Mashups Editor (GME) Uses standard languages: HTML CSS Javascript XML
- 76. Google Mashups Editor (GME) Unfortunately, it's STILL in closed beta
- 77. Google Mashups Editor (GME) But you can request access here: http://code.google.com/support/mashupeditorsignup/
- 79. 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
- 81. 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>
- 83. 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
- 86. 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
- 89. 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
- 90. 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
- 91. Google Mashups Editor (GME) <gm:text ref="atom:title"> access the title element of the current feed item NOTE: GME converts RSS to Atom on import <gm:link ref="link/@href" label="link..."/> uses Xpath to find the right link from the feed.
- 94. Google Mashups Editor (GME) This app is now publically available at http://combinejobs.googlemashups.com/
- 97. 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
- 100. 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