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 data from TWO different web services (or maybe some other data source). 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, (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).
  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

Before proceeding, talk to the instructor about what you propose to do. Here are some requirements to keep in mind:

  1. 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). Note that you will have extra time next week to work on the lab in class.
  2. 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. You'll need to register with Google to get a Maps API key. When asked for your website URL, just list your top level domain (you don't need to put the specifics path including Lab08 in there)
  4. You need at least two modes of user interaction in the mashup. 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.
  5. You need to implement at least one other feature in addition to markers on your google map. In-class examples do not count.
  6. The final product should be attractive and usable. This means basic web design like having a title, a natural layout, good colors, nice borders, etc. Making it a sensible (i.e. useful) mashup is not a strict requirement, but is good if you can.
  7. Using Perl/PHP for some server side processing is fine but not required.

Directory Requirements

  1. Make a new 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.

NOTE: all HTML files must validate as XHTML without errors for full credit. The penalty for a file that does not validate is 10%.

Data Notes

If your web service uses XML, note that you probably do NOT want to use XSLT to pull things out of XML. Instead, send the XML back to your JavaScript program, and work on it from there with the DOM API. See our earlier labs on this. You can also use the getElementsByTagName() function for this. Suppose your XML result has 20 items that each have <location> and <title> elements. To get the i'th location, you would do something like this:

xmlDoc.getElementsByTagName("location")[i].childNodes[0].nodeValue;

Here "xmlDoc" is what you get from something like xmlhttp.responseXML

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 "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 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 external JavaScript files specific to this lab.
    5. Printout of your Perl/PHP files specific to this lab.