The Mashup-by-URL-Templating-and-Embedding Pattern
Let’s now apply Flickr’s URL language to make a simple mashup with Flickr. In this section, I’ll show how to create a simple example of what I call the Mashup-by-URL-Templating-and-Embedding pattern. Specifically, I connect Flickr archives and a WordPress weblog by virtue of translating URLs; an HTML page takes a given year and month and displays my Flickr photos along with the entries from the weblog for this book (http://blog.mashupguide.net). The mashup works because both the Flickr archives and the entries for the weblog are addressable by year and month. For Flickr, recall the following URL template for the archives:
http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{month}/{archive-view}
For example:
http://www.flickr.com/photos/raymondyee/archives/date-taken/2007/06/calendar/
The weblog has URLs for posts by year and month (if posts from those dates exist):
http://blog.mashupguide.net/{year}/{month}
For example:
http://blog.mashupguide.net/2007/06/
The mashup takes the year and month from the user and loads two iframes corresponding to the Flickr photos and Mashupguide.net entries for the month by constructing the URLs for the year and month:[33]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Raymond Yee's Flickr and mashupguide weblog</title>
<script type="text/javascript">
//<![CDATA[
function reloadFrames() {
// get a handle to the iframes and the year and month in the form
var dateForm = document.getElementById('date');
var flickrFrame = document.getElementById('FlickrFrame');
var wpFrame = document.getElementById('WPFrame');
year = dateForm.year.value;
month = dateForm.month.value;
var year, month, dateForm;
var flickrURL = "http://www.flickr.com/photos/raymondyee/archives/date-taken/" + year + "/" + month + "/calendar";
var wpURL = "http://blog.mashupguide.net/" + year + "/" + month + "/";
//reset the URLs for the iframes
flickrFrame.src = flickrURL;
wpFrame.src = wpURL;
return false;
}
//]]>
</script>
</head>
<body>
<form id="date" action="#" onsubmit="return reloadFrames();"
>
Year: <input type="text" size="4" name="year"
value="2007"/>
Month: <input type="text" size="4"
name="month" value="06"/>
<input type="submit" value="Reload Frames"/>
</form>
<iframe id="FlickrFrame"
src="http://www.flickr.com/photos/raymondyee/archives/date-taken/2007/06/calendar/"
name="Flickr" style="width:600px; height:500px; border: 0px"/>
<iframe id="WPFrame" src="http://blog.mashupguide.net/2007/06/"
name="WordPress" style="width:600px; height:500px; border: 0px"/>
</body>
</html>
This example may seem trivial, even accounting for its intentional simplicity as an illustration, but ask yourself, what if you wanted to add a third source, such as the posts I made to del.icio.us posts for a given month? As you will see later in this chapter, there is no delic.io.us URL corresponding to a listing of the bookmarks uploaded in a given year or month (that is, the human UI to del.icio.us is not addressable by the posting date), so I can’t add del.icio.us to my mashup by adding a corresponding iframe and URI template. Addressability of resources is what makes the Mashup-by-URL-Templating-and-Embedding pattern possible.
![[Note]](../docbook_images/note.png) | Note |
|---|---|
You can use |
Granular URI addressability, the ability to refer to resources through a URI in very specific terms, enables simple mashups. This is especially true if the parameters in the URI templates are ones that have the same meaning across many web sites. Such identifiers are often the point of commonality between URIs from different sites. You have seen a number of such identifiers already:
ISBN
Year, month, day
Latitude and longitude
URLs themselves; for example,
http://validator.w3.org?uri={uri-to-validate}, where uri-to-validate is a URL to validate, such ashttp://validator.w3.org/check?uri=http%3A%2F%2Fvalidator.w3.org%2F)
These identifiers contrast with application-specific identifiers (such as NSIDs of Flickr users and groups). Somewhere between widely used identifiers and those that are confined to one application only are objects such as tags, which may or may not have meaning beyond the originating web site. I’ll return to this issue in Chapter 3.