RSC MASHe

Sebastian showing Video Feedback
Originally uploaded by ilmungo

A long, long, long time ago I wrote a post Using Tokbox for Live and Recorded Video Feedback in which I demonstrated how the free ManyCam software could be used to turn your desktop into a virtual webcam to provide feedback on students work in a Russell Stannard styley. Recently my colleague Kenji Lamb was showing me how you could directly record your webcam using YouTube, so I thought I would revisit this idea.

This time instead of focusing on the use of the visual element as a tool to direct students attention to a specific part of a assessment submission (e.g. highlight and talking about parts of a word document), I thought it would be interesting to demonstrate it in a more abstract way using images to reinforcing audio comments (e.g. you did good – happy face; you did bad – sad face).

When previously looking at audio feedback I’ve been very aware that reducing as much of the administrative burden is very important. Online form filling whether it be through the VLE, other systems or in the YouTube example, can be a bit of a chore so in this demonstration I also touch upon using bookmarklets to remove some of the burden. Here is a link to the bookmarklet I created for student feedback on YouTube (YouTube Feedback Template – you should be able drag and drop this to your bookmark toolbar but if you are reading this through an RSS reader it might get stripped out).

Having this link in you toolbar means when you get to the video settings you can click it to populate the form. Bookmarklets are a nice tool to have in the chest so I’ve covered them in more detail in Bookmarklets: Auto form filling and more. This post also shows you how you can create your own custom filling bookmarklet using Benjamin Keen’s Bookmarklet Generator.

So here it his a quick overview of using YouTube for recording student feedback:

Comments powered by Click here to add yours ...

The need for speed
Originally uploaded by toastforbrekkie

Google recently announced that it is using site speed in web search ranking and while the weighting of this metric is slight (less than 1% of search queries will be affected) it is still good practice to make sure your web resources are optimised.

I was a little shocked to discover MASHe didn’t fair particularly well on speed tests. Inherently, self-hosted WordPress blogs give you a lot of flexibility in how you configure your blog, making endless tweaks to its appearance and available functionality via plugins. The cost of this flexibility is you can quickly turn your site into a quagmire of extra coding slowing down page loading times. You are also reliant on your server configuration being correctly optimised. This post documents what I discovered and how I fixed it.

Diagnosis

Having already signed up to Google’s Webmaster Tools I was able to check the Labs –> Site performance and was a little shocked to see “your site take 6.9 seconds to load (updated on Apr 2, 2010). This is slower than 83% of sites”

My first step was to diagnose where I was loosing time. The site performance results give you some pointers but these aren’t real-time and I wanted a way to make sure I was heading in the right direction. I chose to download Google’s Page Speed and Yahoo’s YSlow. Both these tools run a barrage of tests on a web page, highlighting area’s where you can make improvements.

Fixes

Because performance of self-hosted WordPress blogs is a known problem there are a number of plugin’s available to optimise performance. Previously I had been using  WP Super Cache  but as the site performance data has shown there is perhaps more I could be doing, so I switched to W3 Total Cache which has some nice features. The key words to look out for when optimising websites are page caching, server-side gzip compression, content delivery network (CDN) integration (also known as parallelizing) and minifying.  

Just to expand on a couple of these:

Server-side compression – the basic idea is a requested webpage is compressed at the server before being sent to the user reducing the bandwidth required. A number of 3rd party hosts don’t enable this feature presumably because of increased processing load on their servers. So despite my best efforts I was unable to use server-side compression.

CDN -  because there is a limit to the number of page elements the browser can download at one time, distributing assets across hostnames allows items more items to be downloaded simultaneously. A quick fix for me was to use our host providers control panel to create a sub-domain http://mashe.img.rsc-ne-scotland.org.uk which mirrors my existing directory structure. W3 Total Cache then allows you to choose the type of files to server from the different domain practically allowing you to doubled the number of page elements downloaded simultaneously.

Minifying – is the technique of compacting and sometimes merging different HTML, CSS and JavaScript elements. Compaction is achieved by removing additional whitespaces, line breaks and code comments. Whilst W3 Total Cache has minifying features it didn’t like my CSS and JavaScript so I used a separate WP Minify plugin.

The results are looking reasonably promising, pages that have been cached loading in 1.5-2 seconds. I’ve also gone from grade F on YSlow to grade B/C. The problem I’ve still got is pages that haven’t been visited for a long time (not being cached, or having to be re-cached) taking 20 seconds to load. I’ll perhaps come back to this another day unless anyone has some immediate suggestions. In the meantime I need to get back to posts on enhancing teaching and learning with technology ;-)     

A couple of weeks ago I was interested to read Joss Winn’s blog post on  Creating a PDF or eBook from an RSS feed in which he highlights using the FeedBooks service. This was ideal timing as we are always looking for new ways to make RSC NewsFeed readable in as many formats as possible.

The post has generated a number of comments, in particular, James Kwak at baselinescenario mentioned that a limitation of FeedBooks was that it didn’t include the post author or date in the automatically generated eBook.

This is very easy to do using Yahoo Pipes. Here is my ‘feedbooks pipe’. You can either run this pipe entering the url of the RSS feed of your blog. This will let you get the RSS feed required for FeedBooks (step 4 in Joss’s instructions). Alternatively you can just enter http://pipes.yahoo.com/mashe/feedbooks?_render=rss&url={enter your blog rss feed url here}. Feel free to clone this pipe if you would like to experiment with other manipulations. I’ve already created this extended version for WordPress users to only include last months posts. 

[All this pipe is doing is taking the feed url, copying the pubDate (item publish date), then using Regex to edit some of the post items. The first regex replaces the long date format (e.g. Fri, 15 Jan 2010 10:03:54 +0000) by extracting the pattern ‘digits character digits’. The next 2 entries modify the post description by putting ‘the author {dc:creator} | the date {date} plus break return’ before the existing content]

Thought I’d share some solutions I’ve found for problems I’ve encountered this week.

Problem: How to export a table (*.xls or *.csv) of twitter followers?
Solution: I first tried http://twitterexport.com/ which was good because it didn’t ask for twitter account login details, but the results are limited to 100 entries. I then tried http://tweetake.com/ which did the job (but does require twitter username and password)

Problem: Adding anchors to WordPress blog?
Solution: This problem was asked by our e-learning accessibility expert, Craig Mill. He wanted to make some of his longer blog posts more accessible by having a table of contents at the top. The solution was very straight forward as MindWireMedia have created the Auto Anchor List plugin which does exactly what we were looking for. The plugin scans though posts and pages looking for headings, automatically creating a navigable contents list at the beginning of the post. To see it in action check out Craig’s e-Inclusion Blog

Problem: How to reformat long urls in twitter badges? We had a problem with urls in the @rsc_ne_scotland twitter badge which we use for News announcements on our site. 
Solution: Using help from this how-to on Taco Quest and code from sevenofnine on whirlpool.net.au I came up with the code below. If you would like to use it just grab this JavaScript file to replace ‘http://twitter.com/javascripts/ blogger.js’ (this method of creating twitter badges has changed but here is an explanation for adding an old widget):

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
    var lm = 28;
    var strD = url.split("");
    var strB = "";
    var strT = "";
    var breakChar = "...";
    for(var i=0; i < strD.length; i++){
        strB += strD[i] ;
        if(strB.length >= lm){
            strT += strB + breakChar;
            strB = "";
        }
    }
    if(strD.length < lm){
        strT = url;
    }
      return '<a href="'+url+'">'+strT+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span><br/><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

[Just to warn you this post is more technical than my usual offerings and is perhaps not that practical either. Hopefully some of you will still find this useful. I’m shoehorning this post in under the ‘festive clause’ ;)]

If you are running Microsoft Vista with Outlook 2007 you may have noticed that you can preview certain email attachments in Outlook (this isn’t native functionality for XP users. A workaround is highlighted in the ‘how-to’ below). Last week I was trying to using this functionality to view an embedded Google wave. Unfortunately, despite installing Chrome Frames, it didn’t work (I think because either Microsoft wasn’t caching the JavaScript locally for wave or security prevents JavaScript writing an iframe).

While embedding Wave doesn’t work, interacting with a lot of other social tools (Etherpad, Mindmeister, Google Docs, Facebook, Flickr, Ning … ) does! Don’t believe me watch this:

How to do it

If you are using XP and Outlook 2007 you’ll first need to install some custom preview handlers. These basically allow you to preview email attachments in Outlook’s reading pane. Fortunately Gil Azar has already made a package of preview handlers. Gil’s instructions and download are here.

All we are doing is:

1. creating a local web page which embeds your chosen site
2. creating a new email
3. attaching the file
4. saving the message as a draft
5. moving the draft to a folder (in my case I created one called ‘MyStuff’)

Then when you want to access your chose site just click on the attachment to view it. This video demonstrates the process:

Creating the web page attachment

For the example in the video above I used iframes. These basically allow you to place another website within a webpage. The code I’m using is below. For the different sites you want to include you just need to change the iframe src, which in the case below is https://www.mindmeister.com/. Some sites provide specific instructions on how to embed elements (etherpad for example). If you are wondering what the rest of the code does it just resizes the height of the frame to fill the window. Here is a compressed folder (*.zip) of some of the pages I created for the video.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
</head>
<body>
<iframe id="frame" src="https://www.mindmeister.com/" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>

<script type="text/javascript">
// From http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
</body>
</html>

Enjoy – Seasons Greetings!

Using the festive period to stray slightly away from my core remit I thought I would document a little mashup which allows you to automatically tweet items you share in Google Reader.

Background

I’m a big fan of Google Reader and its the main way I consume RSS feeds (unsure about RSS? Here it is explained in plain English). Already I use the  Shared Items Post Plugin to automatically post a digest of my shared Reader items. The idea is I’m acting as an intelligent filter, sifting through almost 150 subscriptions to pull out items which might be of most relevance to staff at our supported institutions. The nice thing about Google Reader is I can share items making a personal note or comment. This has parallels to micro-blogging sites like twitter. 

The emergence of twitter, and similar status update sites, is changing the way many people tap into information streams and for me it makes sense to make sure information I produce or find useful is disseminated through as many channels as possible.

How to do it

Go to your Google Reader Shared page (if you haven’t set-up a public page or can’t remember where it is login to Reader, click on ‘Your stuff’, then ‘share settings’, shown below).

On the page that opens there should be a link to ‘Preview your shared items page in a new window’, on this page you need to copy your ‘Atom feed’ link.

At this point you can go to straight to an automatic tweeting service called twitterfeed and paste this link in as a new feed (Twitterfeed is a free service which allows you to submit a RSS feed. New feed items are then ‘tweeted’ on your behalf). Unfortunately doing it this way means that any notes you’ve written about a post are lost.

Not satisfied with this I decided to create a Yahoo Pipe which extracts my notes, if any, and tweets this instead. If you’ve never tried Yahoo Pipes its a great free service to take existing RSS feeds, do some tweaking and output a new custom RSS feed. I’ll explain how the pipe works at the end of this post. For now:

1. open this ‘Tweet Google Reader Shared’ yahoo pipe
2. paste your ‘Atom feed’ link from Google Reader and click ‘Run Pipe’.
3. copy the ‘Get as RSS’ link into twitterfeed.com.

Now when you share an item in Google Reader with a note, the note will be tweeted via twitterfeed.com (if you share an item without a note the existing item title will be used).

To see an example here is a tweet posted via twitterfeed which was pulled from the Google Reader Shared page shown below:

How the pipe works

Below is a screenshot of the pipe I created (click here to see it in Yahoo Pipes). The pseudo code is:

1. Fetch Feed from Google Reader Shared page
2. If feed contains annotation copy as title else do nothing
3. Sort by date (new first)
4. Remove <a href> tags from title 

Enjoy (and Seasons Greetings)!