Help Yourself

Project : BeebIt, A Learning add-on for Firefox 3

Project Details

Description

BeebIt is a BBC Learning Development project that aims to make useful learning content easier to find. It allows teachers, parents and students to install a toolbar plug-in in their internet browser that identifies key terms from the web pages they are reading and suggests a wide range of related BBC resources.

With BeebIt installed you're never more that a click away from a reliable source of videos, games and other resources.

It was made to save teachers and students time, and expose people to a wider range of materials that they might not normally use in the classroom.

How it works

BeebIt uses the BBC metadata services API to identify key concepts on a web page. The API does this by reading the text of a page and looking for key terms or sets of terms, known as 'search strings'. If it finds terms that it recognises it returns these as an Atom feed like this one. Among other things, the feed contains a list of related DBpedia terms.

Once it has a list of related terms from the metadata services API, it uses the BBC Learning Resource Finder API to find resources from different parts of the BBC that might be useful when teaching or learning about that topic. The LRF API gets this information from a database created specially for this purpose. We had to scrape the search results from several different BBC search result pages, because there is no BBC search API as yet. It's not ideal, but it works.

Once it has all the relevant information the toolbar diplays it on the page. It does this by reading the HTML of the page and adding some content of its own using Javascript.

What open source stuff does it use?

BeebIt is entirely open-source. It was built using open-source technology, and uses only information that is available to the public. It has no special access to BBC systems, so anyone from anywhere could create something similar (or better).

Technologies and tools used to create:

PHP
Javascript
Jquery
Notepad++ (an open source text editor ideal for making web pages)
Feeds and APIs

Disclaimer: Work in Progress

BeebIt is far from finished - we have lots of features and functionality that we want to add, as well as a few bugs that we need to iron out. If you'd like to report a bug that you've found or request a new feature please email openlab@bbc.co.uk

Alternatively you could always have a go at making it better yourself. This is an open-source project, so feel free to mess around with it in any way you wish. All that we ask is that you let us know what you've done with it. If you're new to this sort of thing we've made a short turorial to get you started.

The Learning Resource Finder supports about 5,500 wikipedia terms which can be found here: http://bigbadideas.com/. You should also check out the latest version.

The new version will support about 20,000 terms and will be ready by the summer. It will also provide links to more BBC content including video clips, iPlayer and News.

Watch this space!

Tutorial: a first foray into open source

Download the early Beta version of the toolbar: Beeb-It-0.5.xpi (please read the terms and conditions - you're downloading it at your own risk).
Make sure you have Firefox 3 installed (you can download it from www.mozilla.com/firefox/).
Install the toolbar on FF3 by opening Firefox and clicking File > Open and then finding the Beeb-It-0.5.xpi file that you downloaded
Restart firefox and visit any page with a reasonable amount of text, such as http://en.wikipedia.org/wiki/Viking
You should then see a toolbar appear at the bottom of your screen which shows the relevant terms from the page and allows you to access related resources from the BBC.

Getting deeper

Changing the way the toolbar behaves is easy. Though some changes are easier than others.
To start unpacking the toolbar, simply change the name of the .xpi to whatever_you_like.zip
You should now find that you can open the file and see all the parts inside it.
Extract all the parts to a folder.
The simplest change you can make is to change the colours of the toolbar. To do this, open page.css and look for text like .beebit-channel-aroundthebbc { background-color: #f33; } - this is the control for the background colour of the 'Around the BBC' section of the toolbar. Try changing this to .beebit-channel-aroundthebbc { background-color: #FF9999; }
To see your changes simply re-zip the folder (7zip is a free, open source zipping programme if you don't have one already)
Rename the .zip file from back to an .xpi
Open the .xpi file from Firefox and re-install the (modified) tool bar
You should now be able to view the toolbar with whatever colour scheme you like
Once you've mastered this you might want to go on to have a look at some of the other files in the xpi and work out what they do. There's a tutorial available from Mozilla, makers of Firefox, and plenty of information available free on the web if you get stuck.