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.

 

Required Milestone

 

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

1.      Save a copy of your working files in a new folder Lab08beta

2.      Email the instructor a link that demonstrates it working.

 

Meeting this milestone on-time is worth about 10% of your final grade.

 

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.      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 this week with the Google 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.
    3. Something else that you propose and have approved. 

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

    1. You need to decide on and have approved an idea before the first full lab period is up.
    2. 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.
    3. You must use Google Maps, via what we learned about in class. However, exceptions are possible if you have a particularly good idea.
      1. 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. Bear in mind that your website is not accessible from outside the yard – in some rare cases this makes it impossible to use a service, because they need to load a page from you.
    5. The final product should be attractive and usable.  Making it a sensible (i.e. useful) mashup is not a strict requirement, but is good if you can.
    6. Using Perl/PHP for some server side processing is fine but not required. And remember – if you make a new Perl file, what do you need to do to make our server work with it?
  1. If you have 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.  For a slightly different version of the JavaScript, 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
  2. We’ll demo the best mashups when we are finished.

3.      Add a link to your mashup from your default.htm and provide a brief overview and instructions on how it should be used. Mention what sources of data you are using.

4.      Ensure your page works with Firefox. Having it work on IE is encouraged but not required.

5.      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%.

Helpful stuff

  1. As always, the “Error Console” in Firefox is invaluable.
  2. For problems with perl, see tips about creating Perl files.
  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)      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 you have submitted your assignment.

4)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The first page of the output of the W3C validator, as run on the final version of your Lab08/index.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. 

c)      A printout of the source to your files – as appropriate for what you do (JavaScript, HTML etc.).  Truncated lines are not acceptable – use Crimson Editor vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.