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.
You have a little less than 2
weeks for this lab. Note two important things:
milestone: Prior to the start of lab on Tues April 19 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 (this should be
something from a web service that is NOT Google Maps – talk to the
instructor if you think you are an exception). This does NOT have to be a
complete working example. For instance,
if you are getting addresses from somewhere, if you just do a
window.alert() with some addresses that you get from a web service, that
is good enough for this milestone (it doesn’t have to integrate yet with a
map). When you have this working:
Save a copy
of your working files in a new folder Lab08beta
instructor a link that demonstrates it working.
milestone on-time is worth about 10% of
your final grade.
- Make a new Lab08 directory. No need to copy old files into it unless
you decided to integrate with your existing site.
Pick some idea for integrating things. Here are a few
- 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
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)
- A game that involves leveraging some web service.
- Something else that you propose and have
Before proceeding, talk
to the instructor about what you propose to do. Here are some requirements
to keep in mind:
- You need to decide on and have approved an idea before the first full lab period is
- 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.
- You must use Google Maps, via what we learned about
in class. However, exceptions are possible if you have a particularly
- 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)
- 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.
- 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.
- 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?
- If you have XML: note that you probably do NOT want
to use XSLT to pull things out of XML.
it from there with the DOM API. See
our earlier labs on this. For a
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:
Here “xmlDoc” is what you get from something like
- We’ll demo the best mashups when we are finished.
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.
Ensure your page works with Firefox. Having it work on
IE is encouraged but not required.
Ensure all your pages validate and that you have met
NOTE: all HTML files must validate as XHTML without errors
for full credit. The penalty for a file
that does not validate is 10%.
- As always, the “Error Console” in Firefox is
- For problems with perl, see tips about creating Perl files.
- If you need to do screen scraping, it may be easier
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 =
<b> adfdf</b> <h1>dabba</h1> <br/>
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
# Notice to match the </h1> we need to
escape the slash, e.g. <\/h1>
my @matches = ($str
=~ m/<h1>([^<]*)<\/h1>/gx );
print "$ii: $matches[$ii]\n";
All of your files for Lab08 should be in a folder
called "Lab08" (without the quotes) on the Web drive.
Your main page for Lab08 should be called
"index.html" (without the quotes) and placed inside the folder Lab08.
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.
Turn in the following hardcopy on or before the due
date, stapled together in the following order (coversheet on top):
A completed assignment coversheet. Your comments will help us improve the
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.
A printout of the
etc.). Truncated lines are not
acceptable – use Crimson Editor vice Notepad if needed for printing. You could also paste into Microsoft Word etc.