I started to write the odd weekly recap of my view of micro.blog and it misfired in a very confusing, to me, way. The post went through to the micro.blog app as a titled post. I had kept the character count down to under 280. The post was a status post. It should have appeared in all of its glory on micro.blog.

I looked at it for a while and then headed over to the micro.blog slack community to bother @manton. Only after that I looked again and thought it through.

My script that removes titles in RSS from my status posts if the post <280 chars didn’t account for emoji being counted as multiple chars. It wasn’t till I’d posted to slack that I figured this out.

I’ve figure out how to work round this, replacing emoji with one character using a slight change to this function from @mdhughes. I’ll probably have to wait until next week to post another recap and see if it really will work.

I’ve updated this gist: functions that have do with micro.blog and microblogging that live in my child theme’s functions.php

It is getting time for a rethink of how the tubes are connected here, I need to simplify a little I think.

Code eyes

These are some technical notes on some of the changes I’ve made to the standard WordPress site for EDUtalk, I am not sure if they are of much interest to anyone but myself, but writing them up here will, 1. get them clear in my mind, and 2. provide a reference.

The site is running on WordPress 3.5.1. I made a child theme as I wanted to edit some of files and mostly be upgrade proof.

If you have no interest in this you might be interested in the main facts of the move: EDUtalk Has Moved, or just head over to EDUtalk and listen to some great audio.

Plugins

  1. Akismet, spam protection, pretty much a no brainer.
  2. FeedWordPress, this is very much at the heart of the new site, this plugin allows you to syndicate content from other sites, in our case audioboo boos tagged edutalk and iPadio phlogs with the same tag. Posts form these sites with the tag are added to EDUtalk. The plugin also allows us to make the titles link to the original site rather than our own post page, I believe this is a better way to do things for the authors who submit content by tagging.
  3. MediaElement.js – HTML5 Audio and Video, I installed this initially but it is now turned off. Instead I have used this JavaScript myself. As I understand it the plugin will provide html5 and fallback players for audio inserted with a short code player. As a lot of our content comes via FeedWordPress it would not work there unless we manually edited posts.
  4. In the process of importing all of the old content I found the Categories to Tags Converter Importer and WordPress Importer plugin invaluable.
  5. The Safe Redirect Manager plugin redirects links from the old site to the new one, for example, /pages/radio-edutalk to /listen.

Child Theme Files

It seems that the way you best edit a WordPress theme is through Child Themes, this avoids problems when upgrading.

I started by copying the content.php file from the theme to the child theme folder. Here I edited the php to add an html 5 audio player to the top of a post, if the post had an enclosure. I used:$enclosureData = get_post_meta($post->ID, 'enclosure' ); to find out if there was an enclosure. I had a bit of hassle as Audioboo encloses images as well as mp3s, but looped through the enclosures and used the first audio one I found.

I had to edit the main theme function.php file to comment out a bit of code that removed enclosures if they were not linked in the post. This proved a problem when doing some manual edits of the imports. I got information on how to do this from this post: How to stop WordPress 2.8 – 3.5 from deleting enclosures | Kevin J Edwards. The main tool used in building edutalk.cc was google. In this case I edited the theme’s own function.php file, rather than the child themes, as the child theme’s function.php is added to, rather than replacing the parent theme. If there is a better way to do this, I’d like to know.

I did create a child theme function.php and added functions to include the jQuery and MediaElement.js. I then copied the footer.php to the child theme and added a script to added a flash player to the audio tags for browsers that do not play mp3s natively.

jQuery(document).ready(function() {
	jQuery('audio').mediaelementplayer();
});

Pretty simple stuff.

Originally I added a bit more jQuery to hide the audioboo and ipadio players and maps in the post. They were not making the posts look very nice, and I found it difficult to style them. Later on, as I found that the pages were loading very slowly, I went back into the content.php file and added some code to only show the post content, if it was in the Radio Edutalk category. Even with only 6 posts per page this made a huge difference in speeding up the page loading (twice as fast). I changed:

<?php  the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) );  ?>

to

<?php if(in_category(5)){the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) );} ?>

5 being the category for Radio Edutalk, I’ll be adding another category for mailed in audio if needed. Thinking about it it would be best to change to not in the audioboo and ipadio categories.

Screenshotpingdom

Altogether it was not very hard to figure this out with the help of google. WordPress is extremely well documented. The code is also easy to edit, without having to understand the whole thing. There are probably a lot of better ways to do this, and I’d be delighted to find out.

I’d also be interested in any other ways to improve the site, speed it up or add useful features.


I’ve been aware of the Primary Games Arena 1 for a while. I only noticed yesterday that it had an API The api lets you search for games and returns some xml. XML makes me think of Glow 2. Glow handle xml quite nicely, unfortunately for most teachers this needs a knowledge of XSL, which I do not think is common. I’ve managed in the past to figure out way of displaying RSS using XLS so though I’d try to do the same with the Primary Games search results. It turned out to be pretty straightforward as the xml returned by Primary Games is nice and simple.

Displaying a set of Primary Games in Glow

Glow xml Webpart Empty

You use the xml webpart. This part has 4 main fields: xml link, xml editor, xsl link and xsl editor, of these you only use 2, using either the link the direct editor field for both xml or xsl.

The way it work is that the xml is loaded and modified by the XSL. The XML webpart can be usefully used to display any html fragment without any XSL at all, but in the case of RSS or xml from the primary games arena it need to be formatted.

For example the url:
http://primarygamesarena.com/
searchapi.php?q=money

in the XML Link field produces an XML list of games tagged money. Clicking that link will show you what you would get in glow if you do not use XSL, not pupil friendly at the moment. We can use XSL to transform this. As a first test I used this xsl in the XSL Editor field.

This produces this: (click for flickr page):

primary games in glow

On the glow page the images launch the Primary games page with the game in an iFrame.

It then becomes simple to repeat this for other searches and give pupils sets of games, just replace money in the xml link with another word.

We can also pass around webparts already loaded with the xml address and the xsl and these can be imported onto a glow page. Here is a the money one. You could import that onto a glow page and just change the search string at the end of the url to get a different set of games to display.

Taking it a bit further

After doing the above brief test with glow I asked @johnmclear, one of the folk behind Primary Games, if there were any other parameters that could be used on the search, this is what I got back:

johnmclear
John McLear

@johnjohnston can add it. Email me an ideal request/response
Sat Jul 09 12:19:28 +0000 2011 from HootSuite captured: Mon, 11 Jul 11 16:11:04 +0100

A few hours, a couple of email and some tweets later John had updated the Primary Games API to include subject, year, keystage, topic, unit and gametype!

This man we can now use, for example: ?q=money&y=3&g=Strategy as a query and get all the money games suitable for year 3 (=primary 4 in Scotland) that are categorised as Strategy games.

Of course the API can also be used outside Glow on the web via php. Here is a page that lets you search and display games: Primary Games Arena API and here is the Source.

I’ve extended this a little to create a page that can search and display games in the same way but also supplies an embed code to embed the code on webpages, blogs or glow.

Primary Games API with Embed codes

To embed in a blog you just need to switch to the html view in the editor and paste in the code. In Glow you can use an XML webpart and past into the xml editor field.

Simulation

Can you organise the planets in our solar system?

The embed code here was edited to make the background yellow.

Of course you could simply create a screenshot of a game page, upload it and make it a link, but this is quicker and loads the games inside the Primary Games ecosystem this has a nice wee toolbar allowing pupils to gain achievements by playing games, rate games anonymously and get links to other games. You also get the advantage of the folk at Primary games having already categorised a huge range of games suitable for primary aged pupils. Many thanks to @johnmclear for the extremely quick additions ot the API.

Footnotes:

1. Primary Games Arena run by Primary Technology an company who run a fleet of commercial and free ICT services for primary schools.

2.When Glow was introduced I was one of the many folk who were very disappointed that Glow did not have tools for handling RSS: At the Scottish Learning Festival, on RM developer was asked about RSS and answered, ‘What is RSS?’! It turns out glow did and does support RSS and XML in general.

The footnotes are a wee experiment to make my posts a little less verbose, I used a technique describe on Daring Fireball: About the Footnotes.

The questions are at the end feel free to skip down there if you know anything about gps.

I spent quite a while over a year ago messing with the google maps api. eventually I made an interface for creating maps, uploading photos and placing them on the map. This gave me a lot of fun, but I found it too time consuming for children to use.
The earlier this year Google My Maps came out which was a lot neater than my effort, and I’ve used it a few times, mostly pasting in the links flickr provides to add photos.

Cort-ma-Law from Lecket hill This week I stared another one with a few photos from a walk.
I was a bit frustrated about placing the photos on the map as I found it hard to figure out where place where in the rather featureless Campsies.

Flickr map Sorry

I switched to using flickr own maps but found them it a bit slow (that might be my aging mac).
I found it even more difficult to get the photos placed with any accuracy on flickr maps, although the interface for adding and looking at the photos is very slick, especially when you grab a bunch of pictures and throw them on a single spot.
Perhaps I just do not go far enough so need to much detail on a map to make my walk look like a walk rather than a spot.

All this made me think about my previous experiments, especially as there was an article in macuser about using the flickr and google maps apis combined. I had just finished using phpflickr to make a community gallery so though this might be quite quick.

Unfortunately the macuser article relies on a flickr api flickr.photos.geo.getLocation which depends on you having placed the photo on the flickr map (I was beginning to go round in circles).

Then I remembered Adam Burt‘s Applescript for getting geo tags from Google Earth ready for pasting into flickr. Adam does amazing things with blogs, google Earth/maps and geoblogging.
The appleScript copies to the clipboard geo tags of the location showing on google earth at that time.
It is much easier to figure out where you are on google earth, it has a smoother gui than google maps and a better resolution (of where I was at least). so I geotagged a bunch of photos, grabbed a new google maps API key and got busy.

Flickr googlemap mashup

Of course at that time I didn’t know about flickr.photos.geo.getLocation depending on flickr maps.And I didn’t know a tag geo:lon=-4.704382114809 would be returned from the API as machine_tags=”geo:lon=4704382114809 geo:lat=56258859999999″ ie without the minus sign or point so I spent a fair bit of time staring at a blank map, as the google maps API didn’t understand what I was sending to it. Anyway to cut a very long afternoon short, I delved deeper than I had been before into the data returned from flickr.photos.getInfo and finally clunked together a couple of files, the first uses phpflickr to grab the info from flickr and store it in a file, the second pulls that info using the google maps api and create a map.
I did try pulling the information and creating the map all at once, but that took too long. The data from flickr obviously does not need to be updated very often so that job was hived off, speeding up the maps creation. The unfinished product is here: John’s Flickr Map Mashup.

This is just scratching the surface of what could be done, it would be better maybe to create different maps for different days or for particular tags. if all of my tagged photos go on the same map it might eventually be too crowded and need some pagination.

Help wanted: I’d like to know a bit more about geo tagging and perhaps GPS:

  1. Would it be possible to get data from a GPS device and add it to the EXIF data of a photo before uploading it?
  2. Does Flickr undersatand embeded gps data?
  3. Is there a cheap enough GPS device that would work with a mac?

I am thinking of a work flow that includes the tagging of photos before uploading, maybe in iphoto with AppleScript or a SuperCard project, I think I’ve done some EXIF data extracting so imagine that adding can’t be that much harder.

Any ideas that do not involve a lot of expense gratefully received.