Lab 8
Mashups

Introduction

This week we've learned how mashups exploit web technology to improve the presentation of a service and/or to combine multiple sources of data. Now is your chance to make it happen.

Choose a Mashup Topic

Pick some idea for integrating things. Here are a few basic ideas:

  1. A conventional mashup that combines Google Maps with data that you get from some other different web service. This could involve your old theme, or not. You can get data from (1) a conventional web service via XML like we did last week (using your old web service is okay if suitable), (2) via a JavaScript library that accesses a webservice for you (like Google Maps and Tools), and/or (3) via screen-scraping (writing code to extract info from HTML that is accessible on the web somewhere). NOTE: Google Maps is not an absolute requirement, talk to the instructor if you have a different idea.
  2. A game that involves leveraging some web service. This might not need TWO services, but will need to do significant data manipulation of the ONE service to be worthy of the lab.
  3. Something else that you propose and have approved.

We'll demo the best mashups when we are finished!

Required Milestones

You have a little less than 2 weeks for this lab. Note two important things:

Mashup Requirements

  1. Big Enough: Your proposal should be "big enough" in scope to justify a two week lab, but not too big (for instance, just querying Google Search for addresses and then putting those on the map would be too easy. Make it more complex, or getting addresses from some other service, would make things more interesting).
  2. Google Maps: You should use Google Maps based on what we learned about in class. However, exceptions are possible if you have a particularly good idea.
  3. User Interaction: You need at least two modes of user interaction in the mashup (AND at least one of these must be something that is NOT "using a search box"). This most likely means getting data (from a user action), and using events like onclick and onhover to trigger other actions on the page. Two is the minimum, having more will benefit your grade.
  4. Implement at least one other feature in addition to markers on your google map. In-class examples do not count. Possible ideas: see the Google API, but you could make the markers clickable (to show more info when they are clicked), draw lines, or add other things to your map. This could also be a feature that you create in the JS on the rest of your page, that somehow improves your mashup. Talk to the instructor if you need ideas.
  5. Multiple types of data. You should have at least two different types of data that you get from your web service (and do something with). For instance, you might have "addresses" and "names" (two different things), or "addresses" and "ratings". Just getting addresses and putting them on a map is not enough.
    NOTE: if you use Yelp, then the "name" of each business doesn't count towards your two (since this was already implemented in class). So you'll probably want to use "address", "name", and one other thing (like rating or similar) from Yelp.
  6. Nice on the eyes: The final product should be attractive and usable. This means basic web design like having a title, a natural layout, reasonable colors, etc. Making it a sensible (i.e. useful) mashup is not a strict requirement, but is good if you can.
  7. Reminder -- following the theme from your previous labs is NOT required.

Data Notes

If your web service uses XML, you probably do NOT want to use XSLT to pull things out of XML. Instead, send the XML back to your JavaScript, and work on it from there. Suppose your XML result has 20 items that each have <location> and <title> elements. To get the i'th location, you can either use the standard DOM operations, or jQuery (recommended).

  1. Standard:
    xmlDoc.getElementsByTagName("location")[i].childNodes[0].nodeValue;
    "xmlDoc" is what you get from something like xmlhttp.responseXML
  2. jQuery:
    $(xmlDoc).find("location").eq(i).text();

Setting Up Google Maps

  1. NOTE: getting a Google API key is now optional for Google Maps (Google changed this, used to be required). If you find you need one for some reason, here are the instructions.
  2. Go to the official google developer's page.
  3. Click "Getting Started"
  4. Click "Obtaining an API Key"
  5. Follow the instructions (you need to "activate" the Google Maps v3 API as one of them).
  6. If asked for your website URL, just list your intranet address (you don't need to put the specifics path including Lab08 in there).
  7. Copy the API key they give you!
  8. On the same "Getting Started" page, there is a code example of how to use your key and show an initial map.

Directory Requirements

  1. Make a new it452/Lab08 directory. No need to copy old files into it unless you decided to integrate with your existing site.
  2. default.htm: (1) Add a link to your mashup, (2) provide a brief overview and INSTRUCTIONS on how it should be used, (3) Give a sample working link to your web service(s) (or just name the service if non-data service like Google Tools).
  3. Ensure your page works with Chrome. Having it work on IE is encouraged but not required.
  4. Ensure all your pages validate and that you have met all requirements.

Helpful stuff

  1. For problems with perl, see tips about creating Perl files.
  2. As always, the "Error Console" in Chrome is invaluable.
  3. If you need to do screen scraping, it may be easier to do Perl than JavaScript. Here is one example. Suppose you want to extract ALL occurrences of the text between <h1> ... </h1> tags. This program will find matches for both "yadda" and "dabba" given the test string:

    my $str = "sdfadfdsf<h1>yadda</h1> <b>adfdf</b> <h1>dabba</h1> <br/> blah";

    # Notes:
    # [^<] matches any character EXCEPT <
    # the 'g' at the end makes this a 'global' search -- so it will returns all matches in the array, not just the first one
    # Notice to match the </h1> we need to escape the slash, e.g. <\/h1>
    my @matches = ($str =~ m/<h1>([^<]*)<\/h1>/gx );
    for (my $ii=0;$ii<@matches;$ii++) {
    print "$ii: $matches[$ii]\n";
    }

Deliverables

  1. All of your files for Lab08 should be in a folder called "it452/Lab08" (without the quotes) on the Web drive.
  2. Your main page for Lab08 should be called "index.html" (without the quotes) and placed inside the folder it452/Lab08.
  3. Follow the "Directory Requirements" above.
  4. All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after submission.
  5. Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet.
    2. The first page of the output of the W3C validator, as run on the final version of your Lab08/index.html.
    3. A printout of the source to your Lab08/index.html file. Truncated lines are not acceptable.
    4. Printouts of any JavaScript files you wrote for this lab.
    5. Printouts of any Perl/PHP files you wrote for this lab.