Category Archives: My Resources

Teaching & learning resources created by me.

Scrolllooper

https://addons.mozilla.org/en-US/firefox/addon/162030/

Scrolllooper is a Firefox Addon that I created to allow automatic  page scrolling in an infinite loop. This addon was designed to allow a web page to be displayed in public on a large screen. The aim of the addon is simply to automatically scroll to the bottom of the page, and then jump back to the top. The scrolling speed is variable and can be defined in the Preference pane.

The motivation for creating this addon was two-fold: firstly, someone needed this exact functionality, and it did not seem to be available elsewhere; secondly, I was curious as to how exactly addons were put together. In total, it took about 12 hours of work from start (no idea) to finish (addon available on Mozilla addon website), and of course this included many wrong turns and dead ends. Oddly, this was the only case I can ever recall where Google failed to help me find any really useful information on how to proceed. Initially I tried to follow a number of different guides, but they all seemed to be out of date, incomplete or incomprehensible (especially those relating to JavaScript). In the end, I proceeded by using an online generator, some disparate documentation, preexisting addons (open source is handy) and plenty of trial and error. Right when I got to the final stages, I discovered two rich sources of information, which I would recommend as great starting points:

  • Addon Builder at the Firefox Addon Developer Hub – this page provides a customised starter-kit for addon developers, which acts as a springboard, taking a lot of fiddling out of the early stages of development. The site also contains plenty of documentation. I wish I had had this at the outset.
  • XUL Documentation at the Mozilla Developer Center – XUL is Mozilla’s XML based language for defining application interfaces: this is useful when tailoring the Firefox interface to meet your needs. The API provided here seems very thorough and well organised.

Having been through the process of creating an addon, I think there is plenty of educational potential in this process. With proper guidance, there is no reason why senior students should not be able to create and distribute their own Firefox Addons. This would provide a fantastic and realistic introduction to the wide world of open source software, with combination of integrated technologies (XML, JavaScript, CSS) providing a reasonable challenge.

Internet Structure Diagram

This diagram gives an abstract, high-level overview of how the Internet is structured. The aim is to allow a teacher to introduce concepts such as TCP/IP, packet switching, LANs and firewalls, without going into too much detail. It leaves some interesting questions: Why a cloud? What’s in the cloud? Do we really need to know? At what level (education, career) is it important to know?

Download the file.

Photo Game No. 01, 15/05/2009

This collection of 10 interesting photos can be used to stimulate students in a variety of ways. For instance, in small groups they can be asked to produce a story based around any 5 of the pictures, in any order, which can then be presented to the class (with the pictures in a multimedia presentation).

This is useful to get students working together as a group, using a short time to apply some pressure. This can also be use as an extension to an improv session based on PechaFlickr.

To get started, use the image gallery below, or download a ZIP file with all of the images.

Creating A Digital Hub: Website Creation for Teachers

Recently I have been fielding questions from pre-service teachers regarding setting up their own website to support teaching and learning. I usually point people to a wiki (www.wikispaces.com ) or blog (www.onsugar.com ) service as a starting point, and show them how to integrate content from other sites and services. The video below aims to answer such questions in a thorough, easy-to-follow manner, so that teachers can help themselves.

Prior to watching the video it is worth noting that it deals with the creation of a wiki , but that the same principles can be applied to a blog. Many people are unclear on the distinctions between these two types of website: in general, a wiki is a relatively unstructured site that can be easily contributed to by a number of users, whereas a blog is a chronoligcal journal maintained by a single users. If you wish to develop a site that you alone run and others read, then a blog may be a better choice. However, if you want to invite other teachers or students to collaborate, a wiki may be a better option. Some sites, such as this one, blend elements of the two, and there are other structures which, for simplicity’s sake, we will not consider here. Your choice now determines what you can and cannot do with your site in the future, so it is worth considering.

Graphics: Isolating An Image From Its Background

As part of a UWS “Interactive PowerPoint for Teaching” workshop I helped out at today, I was asked by quite a few people how to remove the background from a picture so that it could be integrated into a presentation more cleanly. I showed a few people some relatively simple tricks using free, open source software called Gimp. In order to make this information more widely available, I have put together a short guide on how this can be done. The guide can be downloaded here.

Of course, there are other (more powerful and complex) ways to do this, and it can be done using other applications. However, Gimp is free, and this method is pretty straightforward, making it accessible to almost all users.

Example Report Text Type

Example Report Text Type

This model text can be used to introduce ICT students to the report text type. It may be particularly useful to those students for whom English is a second language. Annotations have been kept brief, but colour has been used to link into the text for clarity. It is anticipated that the teacher would guide the students, rather than relying just on the text.

TCP/IP Role Play Stickers

TCP IP Role Play Stickers

Drama and ICT might seem incompatible, but role playing can provide students studying computing a hands-on way to learn certain concepts. These stickers are used with a class of up to 30 students to simulate how a TCP/IP network (such as the Internet) functions. The key concepts here are IP addressing and packet switching. Each element is portrayed by a student, with the class arranged into intranets, each with a number of PCs, printers, servers, firewalls and gateways. Intranets are connected to ISPs. ISPs are connected to backbones. Requests are transferred as packets.  The configurations are fictional (but some IP addresses are real).

How To Build A Drupal Site

Drupal (http://drupal.org/) is a great CMS (Content Management System) for developing online communities and sites. This is my simple guide for building a Drupal site.

Note that this is written for Drupal 6.8, but should mostly work for the whole 6.x version series. It may not work for other versions!

Install Drupal

I had the school’s web administrator do this for me. It takes some technical knowledge!

Create a “placeholder” Story

This page is my placeholder: you need to have at least one story created (and set to display on the Home Page) for the default front page message to disappear.

Choose a Theme

Take a look at http://drupal.org/project/Themes, or search around on Google. Once you have chosen a theme, download, decompress and upload it to the themes folder in your Drupal install.

Define Roles

It is worth taking time to consider and define the roles that users will take within your community. If you do this before installing modules, it will save you some time later on when it comes to setting user permissions. This site uses the following roles:

  • anonymous user
  • authenticated user
  • editor
  • read-only guest
  • student
  • teacher

Enable & Configure Core Modules

This section deals with optional Core modules that are already installed with Drupal, but need to be enabled. Each module varies, but you need to consider setting permissions for different users, and then configuring the modules own options.

  • Blog
  • Forums
  • Statistics
  • Taxonomy
  • Tracker
  • Upload
  • Trigger

Taxonomy

In Drupal you can create one or more taxonomies: each of which can contain one or more terms (think tags). This system is initially confusing, but is empowering.

Part of the power here, comes from the fact that you can organise terms into hierarchies, and then use these to organise you site. If you need site structure, then one of the big questions is “node hierarchy or term hierarchy”: in this site I have used terms to organise my content. It took me a while to work things our, and it would have been quicker had I first look at http://drupal.org/handbook/modules/taxonomy.

13/05/2009 – of late I have come to the conclusion to the “node hierarchy or term hierarchy” debate: if you are serious about Drupal you should ignore (and not install) node hierarchy, and instead use taxonomy to organise your website. If you are only a casual user and don’t plan on tagging, then node hierarchy is easier. Using both together will almost certainly give you a headache!

Install & Configure Contributed Modules

The great variety of community developed, contributed modules is part of what makes Drupal so powerful.

For each of the modules shown below, you can download them (from the URL shown), decompress them and upload them to the Modules directory of your Drupal install.

From here, each module varies, but you need to consider setting permissions for different users, and then configuring the modules own options.

You might find some modules require other modules.

  • Administration Menu – gives selected users an enhanced top-of-page administration menu.
  • Pathauto – extends Drupal’s core Path functionality to generate automatic text paths URLs for pages.
  • Table of Contents – allows a Wikipedia style table of contents to be created from HTML tags in a page. After installation, this needs to be enabled for the various input filters you may be using (see below). You will also need to rearrange the filters to ensure Table of Contents is evaluated before HTML Corrector
  • Node Hierarchy – allows for sites to be arranged in a hierarchy, providing structure to your site. Note though that this can also be done with taxonomy, and that this is my prefered method
  • Taxonomy Breadcrumb – allows for breadcrumbs to be create from taxonomy.
  • Google Analytics – allows for detailed statistics to be gathered through Google Analytics.
  • And many, many more…

Drupal allows you to define a number of menus, as well as use the inbuilt menus: Navigation, Primary, Secondary. In this site I have used the Primary menu (in this theme it is shown at the top of the page) to link to the main areas of the site.

Set Content Filtering

Drupal can filter user input. By default, filtering is enabled, but for some sites it is better turned off. This can be done under Input Formats under Site Configuration.

Turn On User Profiles

One of Drupal’s optional core modules is “Profile”: enable this module and you can define custom fields for user to fill in, giving me information about themselves.

User Settings

User settings contains many useful options. Some useful ones include limiting public registration, enabling user avatar images etc.

Comment Settings

Default setting comments for different content types can be configured in the Content Types admin area. Anonymous commenting is disabled by default, but I choise to enabled it (under Permissions in User Management). I have set permissions so that only editors can publish comments without having them approved first. To make approval easier, I used the Trigger core module to have the system send me an email each time a new comment is available for approval.

Clean URLs

By default, Drupal URLs have a query string in them (this looks like ?q=). Enabling Clean URLs overcomes this, making Drupal addresses more like those of a “normal” site. You can access this setting from Admin > Settings > Clean URLs. And, if you installed Pathauto (see above), your URLs should be textual, rather than numeric.