Tag Archives: #iwmw10

University Website

The image above from xkcd.com webcomic was doing the rounds on Friday.

I’m sure you recognise parts of your institution’s own website in this diagram, in particular I usually find more joy in finding faculty members phone/email addresses on Google rather than on the official site.

A couple of tools which sprung to mind when I saw this diagram were Google’s Browser Size Tool, which let you see contours of the the average percentages of users browser window size. This helped Google discover that 10% of their visitors couldn’t see the download button for Google Earth without scrolling. You can also overlay these contours on your own site. I’m sure many web admins are also already using Google Analytics click overlay to work out where visitors are going (and if they are on the ball assigning goals and click values).

If you want to chuck some formal/informal evaluation techniques into the mix Mike Nolan has been using a modification of Nick DeNardis’ EDU Checkup turning it into ‘Slate My Website’ in which groups collectively perform first impression and ~5minute reviews of a sites design, content and code (more info in this post by Mike).

If you are looking for something a more formal usability technique I’ve always been fond of ‘cognitive walkthroughs’:

The cognitive walkthrough method is a usability inspection method used to identify usability issues in a piece of software or web site, focusing on how easy it is for new users to accomplish tasks with the system. The method is rooted in the notion that users typically prefer to learn a system by using it to accomplish tasks, rather than, for example, studying a manual. The method is prized for its ability to generate results quickly with low cost, especially when compared to usability testing, as well as the ability to apply the method early in the design phases, before coding has even begun.

The topic of maximising and streamlining institutional websites featured in a couple of presentations at IWMW10, including Ranjit Sidhu’s 'So what do you do exactly?' In challenging times justifying the roles of the web teams and Paul Boag’s No money? No matter - Improve your website with next to no cash.

I’ve embedded Paul’s presentation below who suggests that one of the best ways to make sure you get the most out of what you’ve got is to simplify your offerings by automating the removal, hiding or review of material.

Originally uploaded by RLHyde

Having spent a couple of nights crunching code it’s time to catch up with some paperwork. Since writing about the iTitle updates in Twitter subtitling, the three E’s: Embed, embed, embed Brian Kelly has followed up with a couple of posts (Captioned Videos of IWMW 2010 Talks and Twitter Captioned Videos Gets Even Better) highlighting some of the benefits of iTitle, experiences of using the service and some ideas for future development.

Having other people using iTitle is incredible useful as it adds some participatory design to the development of the tool. It’s also been great to have Tony Hirst point out some useful tips and tricks. More about those later.

So first up …

Vimeo gets cross browser support with flash-based player playback
In March after I managed to get in-browser playback with YouTube videos Paul Hadley from Just Blogging contacted me and asked if something similar was possible with Vimeo. At the time I briefly tried getting them to run through the flash-based JW Player which was used with the YouTube vids but couldn’t get it to work. I probably gave up too early, instead being lured into playing with Vimeo’s beta HTML5 output. It was a great opportunity to learn about the possibilities of HTML5 video and emerging formats for subtitles, of course not forgetting about the joys of video codecs. Many a blog post has been written on HTML5 video and I won’t get into that here, the bottom line being the h.264 codec used by Vimeo is only available in a handful of browsers.

IWMW10 was a great stimulus to have another look at using Vimeo’s existing flash-based video. Had I done a bit more digging around back in March I probably would have come across Andrew Beveridge’s code posted on the JW Player forum. This code is able to convert a Vimeo video ID into a url for the source .mp4 file which can be played in the same JW Player used for YouTube content. This is a big step forward as it means Vimeo’s excellent hosting service, which even with a free account allows videos over 10 minutes, can now be mashed-up with Twitter content and available for viewing in *97% of desktop web browsers. Now that’s got to strengthen its use to enhance conference archives.

Next …

Twitter authentication for user protected archives
Before IWMW10 Brian asked if there were any ‘gotchas’ he should be aware of with iTitle. I couldn’t think of any but it wasn’t long before Brian came up with one.

The way I setup iTitle for the in-browser video playback with subtitles was to created a cached copy of the XML caption file using the video ID as an identifier/filename. The problem here is that anyone could come along later and recreate a completely different subtitle file for the same video overwriting the original. I’ve been able to write protect Brian’s hard work my changing the file permissions on the server but this model isn’t sustainable.

What I’ve decided to do is allow a user to login to iTitle via Twitter using the same TwitterOAuth code used in uTitle. When they are logged in their Twitter user ID is then used to create a unique subtitle files which only they can overwrite. For example below is a version of one of the IWMW10 talks I created with just tweets from the @iwmwlive account (I did this by downloading the Twapper Keeper archive for #iwmw10 in .csv format and filtering the results in Excel, exporting as a .csv again then selecting this as the source in iTitle):

Finally …

Pulling video meta data using oEmbed
This one came from a tip from my partner in crime, Tony Hirst. After the ‘embed, embed, embed’ post Tony passed me a link to the oEmbed site. oEmbed is an open format implemented by a number of media hosting sites which makes it easy for 3rd parties to embed content with a single link. So for example if I included a url to a YouTube video if your site had the right plugins it could convert this into a playable version of the clip.

I think when Tony was suggesting oEmbed he was thinking that I could expose an API for the iTitle site which would make it easy for people to embed the results on their site with a single url. As I’m not aware of many 3rd party sites that use oEmbed yet for embedding content it’s lower down my to do.

iTitle content with information from VimeoInstead I thought it would be an opportunity to grab some meta data from either YouTube or Vimeo to include with the iTitle content. I’ve kept it quite basic so all I’m doing is pulling the video title and author. The main reason I wanted to do this was to add some meaningful tracking data to my Google Analytics (another tip Tony had which I haven’t implemented yet is Tracking YouTube Embedded Player Plays with Google Analytics)

Things still to do

Brian had some useful suggestions for further development including: searching for tweets across a collection of videos; and a RESTful interface to link to specific parts of a captioned video. The searching across a collection interests me the most and with enabling Vimeo content in JW Player this opens opportunities to use more of the player’s built-in features like playlists and clip control.

The other thing on my mind is the YouTube video timeline commenting tool, uTitle, could easily be extended to include Vimeo. Which leaves the question where will all this end …


downloadA conversation with Brian Kelly led to a quick refresh of the Twitter Subtitle Generator (iTitle) [I’ve got tired of linking to all of mine and Tony’s previous posts on this so started the Twitter subtitling wikipedia entry].

Brian was interested in using iTitle to create twitter captioned versions of videos from IWMW10. Their plan was to use Vimeo to host the videos as it allows upload of videos greater than 10 minutes. This led me to update the iTitle code to include the timeline jump navigation which I originally developed for YouTube videos.

Whilst doing this it occurred to me that I should really get around to providing a way for users to direct link to the results page (something I had been meaning to do from the very beginning). What this means is if you are using the iTitle for in-browser playback of subtitled YouTube or Vimeo videos you can share the results with a direct link. So for example you can see Brian’s open address for IWMW10 at http://hawksey.info/ititle/v/id/13314385/ or the Google I/O 2010 Android Demo at http://hawksey.info/ititle/u/id/IY3U2GXhz44/

More importantly I thought it would also be useful to include the ability to embed the results in other websites. With the introduction of the timeline jump navigation using the typical <embed> code you see with YouTube video isn’t possible (also I’m also using the HTML5 version of Vimeo videos which also doesn’t <embed>).

I’ve instead opted to automatically generating some <iframe> code which is included in the display/result page. So using Brian’s speech again as an example the resulting code generated to embed the video in your own website is:

<iframe style="border-bottom: medium none; border-left: medium none; width: 470px; height: 570px; overflow: hidden; border-top: medium none; border-right: medium none" src="http://hawksey.info/ititle/v/id/13314385/" frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe>

which gives:

To display just the video player with twitter subtitles I was able to <embed> code for the YouTube videos as they are Flash based. The JW Player which I use for playback has a ‘viral plugin’ which can generate the embed code (and send email links). A big plus point is that it preserves the link to the Twitter subtitle file. The player only version of Vimeo uses <iframe> again. With all these embed options I leave it to the author to decide if they link back to the original.

An update on YouTube/Twitter commenting (uTitle) coming soon …