{"id":640,"date":"2009-04-03T19:54:09","date_gmt":"2009-04-03T19:54:09","guid":{"rendered":"http:\/\/dalelane.co.uk\/blog\/?p=640"},"modified":"2009-10-30T20:14:27","modified_gmt":"2009-10-30T20:14:27","slug":"presenting-with-the-twitter-backchannel","status":"publish","type":"post","link":"https:\/\/dalelane.co.uk\/blog\/?p=640","title":{"rendered":"Presenting with the Twitter backchannel"},"content":{"rendered":"

I went to Bath for openMIC<\/a> this week (part conference, part barcamp – a brilliant and informative day on innovation in mobile). <\/p>\n

The first half was made up of traditional conference-style presentations, and during one of these presentations, I noticed tweets with the #openMIC<\/a> hashtag become particularly active: feedback that the presenter was missing. <\/p>\n

I wondered about ways that the presenter could have got that feedback before finishing his talk…<\/p>\n

\"thinking<\/a><\/p>\n

This isn’t a new idea: I’ve heard of large US tech conferences where the backchannel is displayed on a second screen or projector next to the presenter’s slides. But I rarely get the chance to present where there is the facility for projecting to two screens at once. <\/p>\n

So I got thinking about how a compromise could work: embedding a live twitter search somewhere within a presentation. <\/p>\n

I had a bit of free time this afternoon to play with the idea a little more. As is sadly often my way, my first few ideas were needlessly overcomplicated: using macros, VBScript or something like that to try and get data from the web and embed it within my slides. <\/p>\n

Fiddly. And prone to a number of fundamental issues, such as trying to avoid reloading the twitter search every time you change slide.<\/p>\n

But then I had a flash of what, for want of a better word, I shall call ‘genius’. \ud83d\ude09<\/p>\n

Instead of fighting to embed a website within a presentation, what about embedding a presentation within a webpage?<\/p>\n

A little bit of playing around with code, and I managed to pull a quick proof-of-concept together.<\/p>\n

<\/a><\/p>\n

How it works<\/strong><\/p>\n

It’s a webpage, to be presented from a browser displayed in full-screen. The webpage embeds a presentation on the left, and the realtime results of a twitter search in a column on the right. <\/p>\n

You specify the query to search twitter for in the URL, so you can modify it without having to dig around in code. The search query is grabbed by some very neat (freely available) Javascript code that I nicked from monitter.com<\/a>, which creates a constantly-updating twitter search.<\/p>\n

The presentation is embedded in the webpage as a Flash object, using (the free) OpenOffice<\/a> to export a presentation to Macromedia Flash.<\/p>\n

These two bits are pulled together with a simple bit of HTML to create the presentation page.<\/p>\n

Use it for yourself<\/strong><\/p>\n

I’ve zipped up the files needed to turn any presentation into a presentation with the twitter backchannel<\/a>. Unzip all the files within to the same directory. <\/p>\n

Export your slides to Macromedia Flash (swf) using OpenOffice and name the flash file “myslides.swf”. Save the file in the directory where you unzipped the other presentation files.<\/p>\n

Open the runpresentation.html file in a web browser. Add your search query to the end of the URL. <\/p>\n

For example, to search for tweets mentioning “dalelane”, use a URL like:
\nhttp:\/\/your-host-name\/runpresentation?dalelane or
\nfile:\/\/\/C:\/twitter\/runpresentation.html?dalelane<\/p>\n

For more detail, read the comments I’ve added to the top of the runpresentation.html HTML file.<\/p>\n

See it in action<\/strong><\/p>\n

I’ve put an example up here<\/a>.<\/p>\n

I’m going to Barcamp Bournemouth<\/a> tomorrow, so this is very good timing – I’ll hopefully get my first chance to try this out tomorrow. <\/p>\n

Wish me luck. \ud83d\ude42 <\/p>\n

.<\/p>\n

Update (30\/10\/2009):<\/strong> In hindsight, I massively overcomplicated this. For the last couple of<\/a> presentations<\/a> I’ve given using this approach, I exported the slides to a PDF and embedded Adobe Acrobat instead. <\/p>\n

<body>\r\n    <!-- the presentation -->\r\n    <object style=\"width: 84%; float: left\">\r\n        <embed src=\"mqtt_for_mobile.pdf#toolbar=0&navpanes=0&scrollbar=0\"\r\n               bgcolor=\"#000000\"\r\n               width=\"100%\"\r\n               height=\"100%\">\r\n        <\/embed>\r\n    <\/object>\r\n    <!-- the twitter search -->\r\n    <div style=\"width: 14%; height: 96%;\"\r\n         class=\"monitter\"\r\n         id=\"tweets\"\r\n         lang=\"en\">\r\n    <\/div>\r\n<\/body><\/pre>\n
It works just as well, and has the added benefit of letting you navigate forwards and backwards through the slides. <\/p>\n
Why didn’t I think of that first time? \ud83d\ude42 <\/p>\n","protected":false},"excerpt":{"rendered":"
I went to Bath for openMIC this week (part conference, part barcamp – a brilliant and informative day on innovation in mobile). The first half was made up of traditional conference-style presentations, and during one of these presentations, I noticed tweets with the #openMIC hashtag become particularly active: feedback that the presenter was missing. I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[374,375,376,371,370,372,373,151],"class_list":["post-640","post","type-post","status-publish","format-standard","hentry","category-code","tag-backchannel","tag-barcampbournemouth","tag-bcbomo","tag-monitter","tag-openmic","tag-powerpoint","tag-presentations","tag-twitter"],"_links":{"self":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=640"}],"version-history":[{"count":0,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/640\/revisions"}],"wp:attachment":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}