Mash-Up Web Design

Client projects and tech blog posts about Mash-Up

FWCC Google Maps MashupThe Friends World Committee for Consultation unites Quakers of all stripes together in joint projects and dialog. It's Americas office has the most complete listing of U.S. and Canadian Friends Meetings and Churches and now has a map to prove it! This is a mash-up of the FWCC database with Google Maps.

Because of limitations of how many data points Google can show the countries have been divided into regions. The main access page is a screen shot of a Google Map with a old fashioned imagemap overlay that allows you to select the region you want to look at. Javascript goodness shadows the currently selected region.

See it live: www.fwccamericas.org/friends
Categories: Client Sites , Faith-Based , Nonprofit
Tags: Friends World Committee For Consultation, Fwcc, Google, Google Maps, Javascript, Quaker | Edit
Alliance CemeteryI was hired to redesign the website of a cemetery that represents a fascinating slice of South Jersey history. In the 1880s, a group of Jews escaped Russian pogroms, came to America and started a "return to the soil" movement that led to the establishment of an agricultural colony in the small Salem County crossroads of Norma, New Jersey. Before long they established Alliance Cemetery.

The new Alliance website highlights the entrance gate. The cemetery has hired a surveying company to do a detailed map of the plots and we hope to add this in with a Google Maps mash-up when the data becomes available. A detailed history and photos are also in the works.

The design is hand-coded from scratch and is probably the most tasteful design of my portfolio. The pages themselves are editable by the client using CushyCMS and the Directions page has an integrated Google Map.

Visit: AllianceCemetery.com
Categories: Client Sites , Faith-Based , Local , Nonprofit
Tags: Cemetery, Design, Google Maps, History, Jewish, Norma, Photos, Salem County, South Jersey, Vineland | Edit
A few weeks ago, Yahoo unveiled a new mash-up service called Pipes. It's sophisticated AJAX-powered graphical interface lets you pull in XML feeds, combine them, filter them and output the result as a customized RSS feed. I've recently used it to create specialized events pages for my blog aggregator. In this series of posts I'll show you how it's done. Each post will be one part of the puzzle.

The first tutorial shows how to pull in a Del.icio.us feed.

Step 1: Input tags

The Del.icio.us social bookmarking system runs much of my aggregator: users see a post they like and bookmark it in Del.icio.us with a special tag.

The first step in Pipes is to collect the input (right). Pull the "Text Input" module (above) onto your Pipes work space. This lets you collect user input. Give it both a name and a prompt. In most instances it's fine that these be the same as the prompt won't be visible in the end. It's good to put something down in Debug for later on in the Pipes process.

Step 2: Construct the RSS call

We take our two input tags and use them to construct an URL by using the "URLBuilder". The base URL is Del.icio.us's RSS feed (http://del.icio.us/rss/). The URL builder adds the user input then the tag input to give us a valid URL (http://del.icio.us/rss/user/tag/).

Step 4: Grab the feed

Yahoo Pipes' "Fetch" module takes that URL input and turns it into an RSS feed. Shown to the right is Fetch with the final "Pipe Output".

See it in action

You can see how this fits together by going to my Del.icio.us Sample page on Pipes. You can make a copy and play with it yourself. Add "&user=username&tag=tagname&_render=rss" to that URL and you've made it a feed.

Okay so I've turned a Del.icio.us RSS feed into... a Yahoo Pipes RSS feed with identical input and output. Well, we're only getting started. Our input tags can be reused for other searches and spliced together inside of a more elaborate Pipe. That's where the fun starts and I'll get there soon.

The other advantage of sending things through Pipes is that we can easily rename fields. Del.icio.us, Flickr and other services often extend RSS standards by including metadata in "dc" fields, an abbreviation for the Dublin Core standards extension. A recent entry from my Del.icio.us feed includes this:

     <dc:creator>martin_kelley</dc:creator>
<dc:date>2007-03-15T05:18:53Z</dc:date>
<dc:subject>tech tech.design</dc:subject>

Standard PHP parsers like MagpieRSS and SimplePie often have trouble pulling dc data. With Pipes you can rename the fields you like; in theory that should make them more accessible to the parsers. You can also combine fields and use Pipes' Regex module to operate on them with regular expressions.

Categories: Practical 2.0 , RSS Syndication
Tags: Aggregators, Ajax, Delicious, Graphical Interface, Input Module, Input Tags, Instances, Mash, Pipes, Puzzle, Social Bookmarking | Edit

Search

As Seen In

EBook

Shortcut cover
Web 2.0 Mash-Ups & Niche Aggregators (O'Reilly Media, 2008, $9.95): Order here.

Social Networks

Other Sites

Archives