How to Use Web Pages as Outlining Tools V

(Continued from How to Use Web Pages as Outlining Tools IV.)

To do this, I coded an outline as a list of lists, using HTML <ul> elements. This gave me a bulleted list of bulleted lists, where each list item was a topic such as “A bit of our history” or “New Vehicle Appeal”.

I then followed each topic by the HTML needed to implement Simple-expand’s expand/collapse control. Like this:

   <a class="expander" href="#">Celia</a>
    <div class="content">
        Celia (72) retired as a post lady a couple 
        of years ago and leads a very active life 
        even despite now being retired. Celia 
        drives for us one day a week which she really 
        enjoys as it gets her meeting different people 
        and of course being a post lady she knows 
        where places are.
As the Simple-expand website explains, you need an element to use as the control, and an element that contains the content. The latter must have class content.

I also had to include a stylesheet and some JavaScript in the page. This follows the same kind of pattern as in “How to Generate Random Quotes in JavaScript”. The stylesheet was loaded by a reference in the head of the page,

<link rel=stylesheet href="expander.css" type="text/css">

The JavaScript includes a reference to the jQuery library, downloaded from Google Hosted Libraries. There’s a reference to the code file itself, simple-expand.js. And there’s an initialisation call. As with the random-quote generator, this calls the expand/collapse setup code, but in a way that ensures all the HTML it operates on has been loaded first. The setup call also links the code to elements with class expander, meaning that it will treat these as the controls.

<script type="text/javascript">

<script type="text/javascript">
<script type="text/javascript">
  $( function () {

The result was “What Other Community-Transport Sites are Doing, Especially about Volunteers and Funding”. This is it with all topics collapsed:
Screenshot of 'What Others are Doing' page with all topics collapsed

And here it is with a few topics expanded:
Screenshot of 'What Others are Doing' page with some topics expanded

How to Use Web Pages as Outlining Tools IV

(Continued from How to Use Web Pages as Outlining Tools III.)

The trouble with Word is well expressed in author Charlie Stross’s blog post “Writing tools”. He explains why Word is not ideal for writing his science-fiction books, and why it’s bad even for other tasks. Later on in the discussion, commenter Alex writes:

My partner is nontechnical and constantly has to deal with collaboratively edited, heavily formatted MSWord documents in academia, and it’s truly astonishing the degree of pain involved. Not only would a version control system help (although, vertrol is a bit like These People Just Need A Honky – everyone who does it thinks it’s the solution to everyone else’s problems), but MS Word is just so painful. It’s riddled with some of the worst usability antipatterns you can imagine, especially that it tends to change things because it’s designed to assume that you should want them. And it’s hellishly implicit; you can’t just hit the right keystroke command and remove the bloody annoying spare section break. You often can remove one of those graphically, but not always.

That’s my experience exactly, and I’m glad to know it wasn’t just me being careless.

Later still, commenter Andrew G says:

Back in my first year of college I forgot how to use Word. I had been spending a lot of time teaching myself HTML, and working on web pages, and hadn’t written anything in a regular word editor for a while.

Then I had to write a paper in class, and at the last minute realized I couldn’t remember how to format text the way I wanted.

So I pasted the whole thing to notepad, added in the HTML formatting, and displayed it in a web browser before printing it for class.

I agree with Andrew G. When I’ve needed to make posters, or letters, or slides, I’ve often chosen HTML rather than Word. Suppose I want to make an unordered list. I know that I have to type:

  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
I can see exactly where the list items begin and end, and I have confidence that my web browser will format them in a sensible way. I also know that if I press Enter in the middle of an item, I can rely on my browser not to go into a frenzy of spurious item inserts. Unlike the behaviour described in section “#9: Word automatically adds numbers or bullets at the beginning of lines as you type them” of TechRepublic’s “10 annoying Word features (and how to turn them off)”:

There are two flavors of this potential annoyance. First, if you start to type something Word thinks is a bulleted list (using asterisks, say) or type 1, a period, and some text, it may convert what you type to bulleted or numbered list format when you press Enter.To prevent this, go to Tools | AutoCorrect Options and select the AutoFormat As You Type tab. Then, deselect the Automatic Bulleted List and/or Automatic Numbered list check boxes and click OK.A related aspect of this behavior is that once you’re entering automatic list items, pressing Enter will perpetuate it — Word will keep inserting bullets or numbers on each new line. To free yourself from this formatting frenzy, just press Enter a second time, and Word will knock it off.

So HTML is what I decided to do for the outline I needed to make.


How to Use Web Pages as Outlining Tools III

(Continued from How to Use Web Pages as Outlining Tools II.)

Community transport costs money. For example, BACT, a volunteer group providing transport around Beccles and Bungay, inaugurated a new minibus last April. It cost over £52,000, a figure which presumably doesn’t include tax, MOT, repairs, petrol, and other running costs. I’d been asked to help Oxfordshire Neighbourhoods Partnership with fundraising, and wanted to see how community-transport sites around the UK did this. I also wanted to see what kind of publicity they used to encourage volunteers, and to summarise my findings for other members of ONP.

So I Googled around, and found the sites below:
  Speke and Garston Community Transport
  York Wheels
  Wellow Community Minibus
  Merton Community Transport (MCT)

What I love about these is their sense of community. The language is informal and chatty. Fundraising events are described in a way that makes everyone feel they can take part: Christmas Fairs, the 100’s club, book sales, Easy Giving and online shopping, the Minibus Money-Box Appeal. There are lots of photos of buses and drivers and customers, making the groups seem really active. The sites put the customer into the picture, in both senses of the phrase. BACT has a list of donors. That kind of thankyou is really important. Also BACT’s site, volunteers and passengers have given their own little snippets, and some are touching. As Mrs P. wrote, “The service has helped to get me out from a very dark place. Everyone is so helpful and friendly and I don’t know what I would do without BACT.” And some of the sites explain in detail the benefits of volunteering, including driver training.

Having found these sites, I identified bits of content that I thought we could either imitate for a “how-to-do-community-transport” tutorial site, or that we could use fundraising ideas from. This came to about 1000 lines of HTML. Too much to put in a single document and expect other members of ONP to work through: I needed to structure it. I needed an outlining tool. I was thnking to buy Microsoft Publisher for cheap. Then I thought of Microsoft Word. I then tried to stop thinking of Microsoft Word.


How to Use Web Pages as Outlining Tools II

(Continued from How to Use Web Pages as Outlining Tools.)

I took the image at the end of the previous post from one of the maps on the Campaign for Better Transport’s site: an interactive map which lets you see the cuts to bus funding in England and Wales since 2010. For Oxfordshire, it shows a reduction from £4.6M in 2010-11 to £2.6M in 2014-15, and to only £1.8M in 2015-16.

Since then, there have been more cuts. According to the Oxford Mail‘s “Bus service cuts: All you need to know about routes that will be axed across Oxfordshire”, more than 50 routes were removed in July. And in December, the Mail reported that three routes were withdrawn from the area around Beckley, Stanton St John, Forest Hill, Littleworth, and the Miltons. Which may be a bigger problem than some of the earlier cuts, because I don’t think there are other services nearby that can substitute.

I’m no expert, but I’ve read that the July cuts aren’t as serious as claimed, because bus companies have limited the damage by changing and merging some routes. But they are still serious. To quote Oxford Prospect‘s “Nine More Oxford Villages Lose Their Bus Services”:

Emma Teasdale lives in Horton-cum-Studley. She told the public meeting:
“My daughter will have no way of getting from our village into Oxford and home from college daily when the 108 & 118 service is withdrawn. I certainly can’t afford a taxi twice a day. Angry is not the word!”

Going back to Oxford Neighbourhoods Partnership, this charity’s aim is to help neighbourhoods in Oxfordshire become good neighbourhoods. Neighbourhoods whose members can then take over some of the tasks that our government no longer wants to do. One of which is organising bus services — or, more generally speaking, community transport. The latter term also covers things that scheduled bus services are not best suited for anyway, such as getting patients who can’t walk well to hospital. But all this costs money.


How to Use Web Pages as Outlining Tools

As well as web development, I’ve been working for a charity called Oxford Neighbourhoods Partnership or ONP. I needed an outlining tool for some of this work, and I’m going to explain how I used Sylvain Hamel’s Simple-expand. This is a a jQuery library for making web pages which you can click on parts of, thereby hiding or revealing chunks of text. As in this demo. But why did I want it?

If you know Oxford, you will recognise names such as Rose Hill, Wolvercote, Littlemore, Summertown, Blackbird Leys, and Botley. All are the names of neighbourhoods, using the word in its geographic sense. I suspect many are also neighbourhoods in the social sense, meaning that their inhabitants feel some kind of identification with the area and that it is distinct from the areas around it. And hopefully, some are also good neighbourhoods, meaning that the inhabitants will take time to help one another, if only in small ways such as fund-raising at coffee mornings, fêtes, and street fairs. Diamond Jubilee Party in Cardigan Street, Jericho, June 4 2012Diamond Jubilee Party in Cardigan Street, Jericho, June 4 2012: Peter Stalker

What defines a neighbourhood is a difficult question in social science, and is discussed in this Young Foundation report “How can neighbourhoods be understood and defined?”. This was written as part of a research programme aimed at understanding how the UK, one of the most centralised countries in the OECD, could put more power into the hands of local communities.

But although neighbourhoods may be hard to define, it isn’t hard to see why we need them. Especially today.
Budget for Oxfordshire bus services from 2010 to 2015


How to Grab Images from Clickpic

A Summertown artist recently asked me to build her a WordPress site to show off her paintings. As with the other sites I’ve blogged about, I installed WordPress for her at Mythic Beasts, discussed the design of the site and chose a theme, and built a prototype showing the pages we thought we’d need together with some sample pictures showing how we’d display the art. And I then had to put the art itself on the site.

Penny didn’t have up-to-date saves of her images at home, but she had set up an account at Clickpic, a service which enables photographers to build their own sites by filling in templates and uploading photos. Or paintings, in Penny’s case. She had set up four galleries: Chinese Brush, Landscape, Portrait, and Impressionist. Each gallery occupied two pages of thumbnails (one with about fifty, and an overflow with about twenty), so altogether, there were eight pages of thumbnails.

Of course, the thumbnails on their own aren’t much use. But some poking around showed that each thumbnail had the suffix _thumb in its name, and also had a full-size counterpart with the same name except for the _thumb. So I knew where everything was, which meant I should be able to download it.

This arrangement was regular enough that it was definitely worth writing a program, rather than doing something like 280 downloads manually. So I wrote the PHP script below, which I’m reproducing in case it’s of use to anyone else. I’ve commented it, so I don’t think I need to explain much else. The only thing I’ll mention is that I based it on S.Visser’s answer to the Stack Overflow discussion scraping all images from a website using DOMDocument. DomDocument is a data structure which represents HTML pages in a way that makes it easy to (for example) loop over them and inspect all the images and their URLs. Which is what I’m doing below.


/* grab_images.php */

Grabs the images in each of the four galleries
on Penny's account at .
These are named Chinese Brush, Landscape,
Portrait, and Impressionist. Puts them into
corresponding subdirectories here.

// Copy the image at $url into a file
// with the same basename in the subdirectory
// $dir .
function grab( $url, $dir ) 
  global $grabs;
  // For recording grabbed images in
  // the order I grab them.
  // I append an IMG for the image to this,
  // followed by its name.

  $image =  file_get_contents( $url );
  // Image contents.

  if ( $image === FALSE ) {
    echo "Can't find image " . $url;
    return -1;

  $parsed = parse_url( $url );
  // URL split into its components.

  $path = $parsed[ 'path' ];
  // The file path.

  $saveto = $dir . '/' . basename( $path );
  // The last component of the path, i.e.
  // the basename.

  file_put_contents( $saveto, $image ); 
  // Copy the image there.

  $grabs = $grabs . 
           "<img src=" . $saveto . ">\n<BR>" .
           $saveto . "\n<BR><BR>"; 
  // Append the image and its name
  // to the record of images grabbed.  

// Copy all images from the gallery on
// $page_url into subdirectory $dir .
function grab_gallery( $page_url, $dir )
  $html = file_get_contents( $page_url );
  // Get the HTML of the page at $page_url .
  // This is one of Penny's gallery pages.

  $dom = new domDocument;
  $dom->preserveWhiteSpace = false;
  // Convert to DOM: see 
  // "scraping all images from a website using DOMDocument" ,

  $images = $dom->getElementsByTagName('img');
  // Get a list of all images on the page.

  foreach ($images as $image) {
    $src = $image->getAttribute('src');
    $src_big = str_replace( "_thumb", "", $src );
    echo $src . "\n";
    grab( $src, $dir );
    echo $src_big . "\n";
    grab( $src_big, $dir );
  // Loop over the list, saving the thumbnail
  // and its corresponding full-size image.
  // By inspection, I see the latter have the same
  // name as the former but without '_thumb'.

grab_gallery( ""
            , "images/chinese_brush"

grab_gallery( ""
            , "images/chinese_brush"

grab_gallery( ""
            , "images/landscape"

grab_gallery( ""
            , "images/landscape"

grab_gallery( ""
            , "images/portrait"

grab_gallery( ""
            , "images/portrait"

grab_gallery( ""
            , "images/impressionist"

grab_gallery( ""
            , "images/impressionist"