Lab 9






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


This is a two week lab. However, prior to the start of class on Mon Nov 24 you must get enough of your mashup working so that you can show some result from using some web service, via a web page on your site. When you have this working:

  1. Save a copy of your working files
  2. Email the instructor a link that demonstrates it working.


(OPINFO participants: The milestone deadline for you is sooner – 2359, Fri Nov 21. For the rest of the lab: note that if you pick something that doesn’t require DB access, then you can likely do everything you need from a home PC, since for Google tools you won’t need a Perl proxy. However ,wouldn’t it be nice to just finish everything before you go?.


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




  1. Make a new Lab09 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.
    2. Something that presents a much better UI on top of a single existing web service.
    3. A game that involves leveraging some web service.
    4. Something else that you propose.

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. You must use Google Maps, via what we learned about in class. However, exceptions are possible if you have a particularly good idea.
    3. 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.
    4. 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.
    5. Your proposal should be big enough in scope to justify a two week lab, but not too big. You will have extra time next week to work on the lab in class.
    6. Using Perl/PHP for some server side processing is fine but not required.
  1. We’ll demo the best mashups when we are finished.

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

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

7.      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. If you need to do screen scraping, it may be easier to do Perl.  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";




1)      All of your files for Lab09 should be in a folder called "Lab09" (without the quotes) on the Web drive.

2)      Your main page for Lab09 should be called "index.html" (without the quotes) and placed inside the folder Lab09.

3)      Your instructor will assume that your web pages are viewable at where XXXXXX is your alpha number. You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

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 you have submitted your assignment.

5)      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 Lab09/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.