bodmas blog » Web http://bodmas.org/blog Keith Peter Burnett's blog about Maths teaching and ILT Sat, 13 Feb 2010 21:13:31 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Ninjawords dictionary http://bodmas.org/blog/ilt-ideas/ninjawords-dictionary/ http://bodmas.org/blog/ilt-ideas/ninjawords-dictionary/#comments Sun, 17 Jan 2010 20:48:25 +0000 Keith Burnett http://bodmas.org/blog/?p=1034 ninjawords dictionary no adverts and fast

The ninjawords on-line dictionary is fast and carries no adverts. Definitions are short and many have usage examples provided. There is an iPhone app, and the page is mobile friendly. I’m putting it on the front of our Moodle.

Definitions contain hyper links to other defined words so you can play the game where you look up a word then look up the words used to define the word…

]]>
http://bodmas.org/blog/ilt-ideas/ninjawords-dictionary/feed/ 0
Customise the header image in the default WordPress theme http://bodmas.org/blog/web-design/customise-the-header-image-in-the-default-wordpress-theme/ http://bodmas.org/blog/web-design/customise-the-header-image-in-the-default-wordpress-theme/#comments Tue, 21 Jul 2009 09:07:54 +0000 Keith Burnett http://bodmas.org/blog/?p=823 finished header image

The WordPress blogging script is supplied with two themes, Classic and Default. The Default theme is based on Kubrick by Michael Heilemann and comes with an image header graphic with a blue gradient in a white frame. This post explains how to put an image into the blue gradient area so that the white frame is kept visible, so that the rest of the theme looks consistent.

I use Ubuntu on my home computer, so I’ve used the Gnu Image Manipulation Program (GIMP) to edit the header. GIMP is available for Mac OS X and Windows as well and is free to download. There is even a version that you can run from a pen drive without installing the application on your hard drive.

A close look at the Kubrick theme in action on my own web site shows the white frame with curved corners.

detail of the kubrickheader image

There is actually a further grey frame around the white frame. The grey frame is matched to the background colour of the Web page, so you can’t see the join. Loading the header into the GIMP shows the white frame on the grey background.

detail of the unmodified kubrickheader image

We need to select the central blue image and then paste another image into the selection. The problem is that the central blue area has a gradient from dark to lighter blue, and this gradient makes it hard to select the central area directly. I’ve worked out how to select the white frame and the grey background and then invert the selection, so that the central area is selected.

To load the header into GIMP, you need to find the header file, called kubrickheader.jpg. The file is in the images folder, inside the Default theme folder, itself inside the wp-themes folder. The wp-themes folder is inside the wp-content folder in the top level of the WordPress application. I would suggest that you make a copy of the kubrickheader.jpg file to save having to download the WordPress zip file again.

  • Load the kubrickheader.jpg into GIMP.
  • Click on the Fuzzy Select Tool GIMP fuzzy select tool
  • Click on the grey outer background of the image
  • You should see the ‘ants’ moving around the image showing the region that has been selected.
  • If you zoom up to (say) 400% you will notice that the selection area does not quite reach to the end of the grey area, it ends as the gradient begins to move towards a darker grey thin line that sets off the white frame

detail of the fuzzy select boundary

  • Use the Select | Grow command to move the selection boundary inwards towards the white frame. We want the seection to cross into the white frame by enough pixels so that the corners are within the selection region, but not so far that the selection boundary impinges on the blue gradient. I used 9 pixels for the amount of ‘growth’.

fuzzy select tool window

  • You can see how the selection boundary now reaches into the white frame

detail showing the grown selection and how it impinges on the white frame

  • Now click the Fuzzy Select Tool and press and hold the shift key to extend the selection
  • Click on the white frame outside the selected region, and when you release the mouse, the selection boundary should reach the end of the white frame. As you can see, the selection boundary stops as soon as the boundary reaches the anti-aliased pixels that start the blue gradient area

detail showing the result of the second use of the fuzzy select tool

  • Next, you need to ‘invert’ the selection. Just go to the Select menu and choose the Invert command. You will notice that the ‘ants’ are marching around the outside of the blue gradient area.

Now all you have to do is to

  • open your background image in GIMP and select or scale the image to 760 by 200 pixels.
  • select all on your image and
  • switch to the kubrickheader image window
  • Chose Edit | Paste Into to copy the image into the central area
  • Save the image as an XCF file (GIMP format). Then you can change the image again, as the copied image has its own layer.
  • Then save a copy as a jpg file. This jpg will become your new header

Then upload the modified kubrickheader.jpg file to the appropriate folder on your WordPress installation using your favourite ftp program or the file manager on your Web site control panel.

]]>
http://bodmas.org/blog/web-design/customise-the-header-image-in-the-default-wordpress-theme/feed/ 0
Play it again http://bodmas.org/blog/notes/play-it-again/ http://bodmas.org/blog/notes/play-it-again/#comments Wed, 04 Mar 2009 22:23:49 +0000 Keith Burnett http://bodmas.org/blog/?p=758 The authors new ipod

The students have realised why I’m YouTubing certain parts of the Maths course… I’ll do some more over the weekend.

]]>
http://bodmas.org/blog/notes/play-it-again/feed/ 0
CSS comments in MSIE v6 http://bodmas.org/blog/ilt-ideas/css-comments-in-msie-v6/ http://bodmas.org/blog/ilt-ideas/css-comments-in-msie-v6/#comments Sun, 01 Feb 2009 22:09:05 +0000 Keith Burnett http://bodmas.org/blog/?p=744 bodmas fluid blue theme in blue MSIE 6 ignores forward slash style comments in CSS

The Fluid Blue WordPress theme has a liquid main column width so it suits smaller displays (web books, old monitors in College staff rooms) well. I changed the default blue colour scheme to orange and brown one Sunday afternoon some months ago. I kept the old CSS and just commented them out using ‘//’ at the beginning of the line. Then I added my new Orange/Human colours.

I decided the change the colours back today. Bright Idea, just uncomment the original ones and put ‘//’ characters in front of the orange lines. Worked fine in Firefox, but found that MSIE v6 on Windows XP would not change from orange. Flushed the history and cache. Restarted….

Then the penny dropped: MS Internet Explorer was ignoring the comment characters ‘//’ at the start of each line. When I changed the colours from blue to orange, the site rendered correctly because the orange colours were set last (CSS files are interpreted line by line and the last setting of an attribute wins). When I swapped the comment characters around, the commented out option was below the option I wanted. So MSIE reset the colour to orange.

I need to check what happens in MSIE 7 as well. Many College PCs run MSIE 6 on older hardware. Later versions of Microsoft Explorer support more of the CSS 2 and CSS 3 standards so some quite snazzy layouts will become possible soon.

]]>
http://bodmas.org/blog/ilt-ideas/css-comments-in-msie-v6/feed/ 0
Wordle http://bodmas.org/blog/ilt-ideas/wordle/ http://bodmas.org/blog/ilt-ideas/wordle/#comments Tue, 24 Jun 2008 07:00:42 +0000 Keith Burnett http://bodmas.org/blog/?p=688 tag cloud made from the Btec Applied Science criteria using wordle

Wordle draws a word cloud from text you copy and paste into a window. The cloud above was generated from the BTEC Applied Science assessment criteria for all the units. I can imagine using a word cloud like this to pull out the key words used in many of the criteria. These words are similar to the ‘cue words’ in Blooms taxonomy of cognitive learning objectives, and perhaps I can enable students to take on board the ‘assessment cues’ using this visual presentation. Via Seb Schmoller.

]]>
http://bodmas.org/blog/ilt-ideas/wordle/feed/ 0
Wiki Games http://bodmas.org/blog/web-design/wiki-games/ http://bodmas.org/blog/web-design/wiki-games/#comments Sat, 07 Jun 2008 19:26:17 +0000 Keith Burnett http://bodmas.org/blog/?p=682
“Homework: write a narrative account of a historical or fictional event as a collection of wiki pages. You must spread the narrative across the wiki — don’t have the story on one page and lots of annotations elsewhere. Nor should you take the one-page story and merely split it into segments named PartOne, PartTwo, and so forth. The wiki structure should contribute the the narrative organically; don’t reformat a conventional narrative.” Mark Bernstein, Wiki Mystery 3

Other Wiki related posts by Mark Bernstein

Ward Cunningham’s famous phrase…

And sometimes the programming was almost effortless, as if Smalltalk had been made to write that program. It was amazing. But other times we’d be programming away, and we’d say, “Now, wait a second, what are we working on here?” We’d just get stuck. And if we were stuck more than a minute, I’d stop and say, “Kent, what’s the simplest thing that could possibly work?” A Conversation with Ward Cunningham and Bill Venners

]]>
http://bodmas.org/blog/web-design/wiki-games/feed/ 0
Modifying Oddmuse http://bodmas.org/blog/ilt-ideas/hacking-oddmuse/ http://bodmas.org/blog/ilt-ideas/hacking-oddmuse/#comments Thu, 24 May 2007 19:51:02 +0000 Keith Burnett http://bodmas.org/blog//hacking-oddmuse/ Oddmuse is a wiki script written in perl. It is based on the Usemod wiki script, but can produce valid xhtml. Oddmuse does not need a database, page data is stored in text files.

To get a wiki running on a Web server that runs Apache (1.2 upwards) and that can run perl cgi scripts, you just need to

  • specify the path to the data folder
  • set the configuration variables to reflect how you want the wiki to work
  • upload the script to the cgi-bin of your Web server
  • create the data folder and set permissions appropriately (755 for the script and 777 for the data folder).

There are specific instructions for Windows XP, Mac OS X and a Gnu/Linux system. There is also some information on the configuration settings.

Oddmuse offers some ‘advanced’ facilities including,

  • File upload, you create a page to hold the file, and then edit that page. In the editor box, the phrase ‘replace this text with a file’ appears. Follow that link and browse for your file and click the upload button. The page now contains only a link to the file. Any text has been overwritten by the file link
  • Rollback, if the wiki is set so that anyone can edit the pages, then if the user sets a user name, then that user can roll back a page to a previous version – that results in later versions being lost
I wanted a wiki for a staff development project that would
  • Allow any visitor to edit
  • Allow only some people to upload files and ‘roll back’ pages to earlier states
  • Forget about users once the browser has been closed – the wiki will be used on shared computers during an event
I set $EditAllowed variable to 1 (true), and I set the $AdminPass = ‘a_password’. I left the $UploadAllowed variable at its default setting of 0 (false). These settings mean that anyone can edit, but only those who know the admin password can upload files.

Rollback

Unfortunately, any visitor who sets a ‘username’ by typing their username into the box on the editing page can then rollback the history of pages. The implicated code is on line 1917 in the subDoHistory function.
my $rollback = UserCanEdit($id, 0) &&
(GetParam('username', '') or UserIsEditor());
The logic is as follows: Rollback if users can edit AND (user has set a user name OR user is the editor) I changed the logic to
my $rollback = UserCanEdit($id, 0) && UserIsAdmin();
or, in English, Rollback if users can edit AND user is an admin. That will stop users accidentally rolling back a full page to the first edit. Those with the admin password can roll pages back in the case of a complete foo-bar due to layout codes or the ‘she who saves last wins’ issue.

Cookie expiry

Oddmuse sets a cookie, and the default script has a cookie expiry set to 2 years after last use. If someone typed the admin password on a Web browser in a drop-in IT room, that machine would have all rights until the cookies were next deleted. The code is on line 2205 in the subCookie function…
sub Cookie {
  my ($changed, $visible, %params) = CookieData();
  # params are URL encoded
  if ($changed) {
    my $cookie = join(UrlEncode($FS), %params);
# no CTL in field values
    my $result = $q->cookie(-name=>$CookieName,
                -value=>$cookie,
                -expires=>'+2y');
    $Message .= $q->p(T('Cookie: ') . $CookieName . ', '
    . join(', ', map {$_ . '=' . $params{$_}}
keys(%params))) if $visible;
    return $result;
  }
  return '';
}
I changed line 2205 to read
               -expires=>'';

i.e. I set no expiry so the cookie will expire after the current session, when the user quits the browser. Some Web pages about cookies suggest setting a cookie expiry in the past. In that case, MS Internet Explorer expires the cookie as soon as the cookie is created. I must admit that behavior does strike me as more logical than the Netscape response of expiring the cookie after the browser closes.

Oddmuse is written in a well structured way and I was able to work out which functions contained the code I needed to change. I could also be confident that changing the subDoHistory function would not change (say) the alignment of lists, or the handling of images. I was able to customise this lightweight server application for my needs in about an hour.

]]>
http://bodmas.org/blog/ilt-ideas/hacking-oddmuse/feed/ 0
Column theme http://bodmas.org/blog/web-design/column-theme/ http://bodmas.org/blog/web-design/column-theme/#comments Wed, 17 Jan 2007 21:45:17 +0000 Keith Burnett http://bodmas.org/blog/?p=533 screen grab of the new layout

The new theme for bodmas.org has a four column home page leading to single column article, archive and search result pages. There is still a lot of tweaking to do, but so far I like it. The idea and colours came from a Paolo Nutini CD that Ruth bought home one day – that 1960s look always rings bells with me as I remember looking at the oranges, browns and olives on the wallpaper as a nipper.

Paolo Nutini CD cover

The style sheet is quite simple, and the four column layout is achived using columns that are 24.9% of the page wide, floating to the left. The idea was ‘borrowed’ from Paul Ingram’s Ingram Labs page, itself featured on the One Page Sites blog post from 37 Signals.

Ingram Labs for the four column layout

My four columns start at the left with the About information (as bodmas.org acts as my home page and online CV I suppose). The Recent, the Archives and the Links columns form a time line of sorts. The layout is liquid because then it looks OK on a 1280 px screen but still works (depending on font size) down to 640 px wide.

Archive pages and search results give simple listings of the posts with date, category, or both depending on the type of page. The post pages themselves have wide margins to keep the column width readable.

I’m still working on the colours and some aspects of the css and php for the theme. You can get a text file containing the style sheet, the main template and the comments template if you want it but this is not yet a packaged ‘theme’ for Wordpress. As I use Tinderbox to index pages using lists, I might hack up an export template as well.

Main issues at present

  • How to make the content divs in the columns as long as the column entry other than by the hack of setting height as a large percentage
  • How to make the columns equal in length so the colours reach to the bottom of the page
]]>
http://bodmas.org/blog/web-design/column-theme/feed/ 0
Paparazzi App for Mac OS X http://bodmas.org/blog/ilt-ideas/paparazzi-app-for-mac-os-x/ http://bodmas.org/blog/ilt-ideas/paparazzi-app-for-mac-os-x/#comments Mon, 27 Nov 2006 22:12:38 +0000 Keith Burnett http://bodmas.org/blog/?p=513 We like the Gulf News layout. Below is a grab of the whole front page on 27th Nov made using the neat little Mac OS X application called Paparazzi. No scooters and long lenses here, just a nice solution to a problem I often have – how to capture the whole of a Web page that is much larger than my iBook screen.

Gulf News home page 27th Nov 2006 saved with paparazzi and scaled down to 400px width

]]>
http://bodmas.org/blog/ilt-ideas/paparazzi-app-for-mac-os-x/feed/ 0
Kubrick with white background http://bodmas.org/blog/ilt-ideas/kubrick-with-white-background/ http://bodmas.org/blog/ilt-ideas/kubrick-with-white-background/#comments Sat, 25 Nov 2006 12:43:38 +0000 Keith Burnett http://bodmas.org/blog/?p=510 Download a ZIP file that contains replacement kubrickbg.jpg and a sample kubrickheader.jpg file.

Modified kubrick theme with white background on sidebar

The Kubrick theme that comes with WordPress 2.x as the default uses a background image to provide a white background for the post area and a blue-grey background for the sidebar.

When setting up a project blog on bodmas for supporting workshops with various students, I wanted a very clean bright layout with plenty of white space. I modified the kubrickheader.jpg file so that instead of a blue gradient fill, it has a plain flat white area. I then added a picture on the right – itself with a white background. I’m including a .PSD file from Photoshop Elements with the modified header. The project blog is called Marfona after the potatoes, so I used an image scavenged from a UK site about potato varieties.

The main modification is to the kubrickbg.jpg file – the blue-grey area has been made flat white so that the sidebar now appears against a white background.

To use these files, just replace the old kubrickheader.jpg and kubrickbg.jpg files in the images folder inside the ‘default’ theme folder in your WordPress installation.

]]>
http://bodmas.org/blog/ilt-ideas/kubrick-with-white-background/feed/ 0