tag:blogger.com,1999:blog-37463022091786494902024-03-12T22:21:23.196-07:00Open Source BroadcastingUnknownnoreply@blogger.comBlogger7125tag:blogger.com,1999:blog-3746302209178649490.post-64590109183158623512011-07-29T02:20:00.000-07:002011-07-29T04:13:35.255-07:00How I learned to stop worrying and love the crowd<span class="Apple-style-span" style="line-height: 13px;"></span><br />
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="line-height: 13px;">This past week, as part of the Knight-Mozilla </span><span class="Apple-style-span" style="line-height: 13px;"><a href="http://p2pu.org/en/groups/knight-mozilla-learning-lab/" style="text-decoration: none;">Ideas Challenge learning lab</a></span><span class="Apple-style-span" style="line-height: 13px;">, we heard from presenters </span><a href="http://mohamedn.com/">Mohamed Nanabhay</a>, the Head of Online at <a href="http://english.aljazeera.net/">Al Jazeera English</a> and <a href="http://twitter.com/#!/shazna">Shazna Nessa</a>, the Director of <a href="http://twitter.com/#!/ap_interactive">Interactive at the Associated Press</a>.</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">Shazna reminded us of something that Aza Raskin had stressed in his presentation, that </span></div>
</div>
<blockquote style="line-height: normal;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">"the hardest part about software is neither design nor software, it's culture."</span></div>
</blockquote>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">She also reminded us that </span></div>
<blockquote style="line-height: normal;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">"not everyone is going to be great at everything and to know what people are good at and what they're not."</span></div>
</blockquote>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">As my <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip">Public Radio Roadtrip</a> project <span class="Apple-style-span" style="line-height: 13px;">has the potential to elicit collaboration between different members of a news organization, each with differing skill sets, I have been thinking about how to best approach this issue. </span></span></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="line-height: 13px;"><span class="Apple-style-span" style="font-family: inherit;"><br /></span></span></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="line-height: 13px;">I was inspired by </span>Al Jazeera English's recent success with their coverage of the <a href="http://nglish.aljazeera.net/indepth/spotlight/2011/02/2011222121213770475.html">Arab awakening</a>. In particular, I was inspired by how their <span class="Apple-style-span" style="line-height: 17px;">news gathering strategy evolved to one which gathers and incorporates citizen content and where they discovered that </span></span></div>
<blockquote style="line-height: normal;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="line-height: 17px;"><span class="Apple-style-span" style="font-family: inherit;">"much of the most popular content was raw video with natural sound"</span></span></div>
</blockquote>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">I was also inspired to discover that Al Jazeera English been offering their coverage with a Creative Commons license on YouTube at <a href="http://cc.aljazeera.net/">http://cc.aljazeera.net/</a> and on <a href="http://www.flickr.com/photos/aljazeeraenglish">flickr</a>.</span></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;"><br /></span></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">Nanabhay stressed that he was amazed by the many ways in which their content has been used beyond </span>newscasts and documentaries such as within video games or in public service announcements. And it could be said that when you publish your media elements unbundled to the world that you could also be serving your own newsroom as well.</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;"><br /></span></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">What this idea drives home is the idea that different people with different strengths can be enabled to collaborate on a single project using disparate online resources. For instance, a photographer could put their photographs on flickr while a reporter could write and produce their finished piece as audio and upload this to SoundCloud. All this, while the data visualization expert could compile these disparate resources within the finished app. The idea that not all content needs to go through one tool to find its way to the web is subtle and empowering at the same time. </span>And this is one thing that has been baked into the Public Radio Roadtrip, that media elements can come together from virtually anywhere on the web.</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
One additional way where the Public Radio Roadtrip enables news staff (or even citizens) to easily use this tool, is that a finished roadtrip can be published anywhere using only a simple embed (as emphasized by presenter <a href="http://twitter.com/#!/burtherman">Burt Herman</a>'s experience with Storify).</div>
</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<iframe frameborder="0" height="400px" scrolling="No" src="http://publicradioroadtrip.appspot.com/publicradioroadtrip/default/view_collection_embed/493004" width="100%"></iframe></div>
</div>
<div style="line-height: normal;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
</div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;">One last point, lest we come away thinking that the solution for </span><span class="Apple-style-span" style="line-height: 13px;">eliciting collaboration across a news organization is solely a technological solution, </span>Shazna also emphasized the need for communication, the need to listen and to</div>
<blockquote style="line-height: normal;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
learn how to talk tech to non-tech people. Don't assume people don't know anything. They may not know how to talk [in technical terms].</div>
</blockquote>
<div style="line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
<div class="separator" style="clear: both; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s1M35mAOkWf7SRb7eIK5Jl32_K4YcciaE294gfKMs5ZEC-T7dU0K1nvoZEg5SePi2Q4nI3vEmMikUwPYhsfGOnsCnOw_9eWQcDYmU54GzZQ1mCJK2UEVNlg77xOYWiCBAi35v4hbSLT/s1600/culture.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s1M35mAOkWf7SRb7eIK5Jl32_K4YcciaE294gfKMs5ZEC-T7dU0K1nvoZEg5SePi2Q4nI3vEmMikUwPYhsfGOnsCnOw_9eWQcDYmU54GzZQ1mCJK2UEVNlg77xOYWiCBAi35v4hbSLT/s400/culture.png" width="400" /></a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3746302209178649490.post-70835826453767973312011-07-24T06:26:00.000-07:002011-07-24T12:44:54.366-07:00Towards an understanding of popcorn.jsThis past week, as part of the Knight-Mozilla <a href="http://p2pu.org/en/groups/knight-mozilla-learning-lab/">Ideas Challenge learning lab</a>, we heard from speakers <a href="http://www.wait-till-i.com/">Christian Heilmann</a>, a "developer evangelist" at Mozilla, as well as <a href="http://ejohn.org/">John Resig</a>, the lead developer of <a href="http://jquery.com/">jQuery</a> . Christian's presentation was dramatic in many ways for the way it exposed that working solely in the browser with native html5 technologies was possible and important to an open web. But Heilmann also served as a subtle introduction to John Resig's presentation in that he impressed upon the group the importance of understanding how the code you are working with works:<br />
<br />
<blockquote>
Don't practice pixie magic... If you use someone's code, make sure you understand it... Don't just take it</blockquote>
<br />
As a bookend to this idea, John Resig's presentation showed how deliberate and thorough one needs to be to treat "every user [of your project] as a potential, future, contributor" and to lead them towards that goal.<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5958531562/" title="John Resig - JQuery - Watch the full process by johntynan, on Flickr"><img alt="John Resig - JQuery - Watch the full process" height="373" src="http://farm7.static.flickr.com/6131/5958531562_8ffb37490f.jpg" width="500" /></a><br />
<br />
Resig stressed that you should assume your users have little in the way of background knowledge and to make your documentation as explicit as possible. e.g. "Open text editor..."<br />
<br />
With this in mind, I have decided to take a closer look at <a href="http://popcornjs.org/">Popcorn.js</a>, an amazing JavaScript library that allows you to create multimedia presentations in the browser using html5. (See these <a href="http://popcornjs.org/demos">demos</a> for some inspiring examples). Previously, I had created a presentation with popcorn.js using the authoring tool at <a href="http://butterapp.org/">butterapp.org</a>, but I wanted to follow Heilmann's advice to not rely on "pixie magic" and to gain a better understanding for how the underlying code worked. I also wanted to use this as an opportunity to see how explicit the documentation for popcorn.js was, especially when held up to Resig's rigorous standards, and to write this blog post which could possibly serve as an aide to other users, like myself, who are approaching popcorn.js for the first time.<br />
<br />
<h3>
Digging into the source code of popcorn js</h3>
<br />
<ol>
<li>I first <a href="https://github.com/webmademovies/popcorn-js/zipball/master">downloaded the complete project</a> as a zip file.</li>
<li>I then unzipped this archive into a folder on my computer.</li>
<li>Next I uploaded this to a directory on my web server.</li>
<li>I then made sure to edit the .htaccess file on my web server so that the <a href="http://diveintohtml5.org/video.html#video-mime-types">mime-type are configured properly</a> for html5 video</li>
</ol>
<br />
I was familiar with how to make minor modifications to the source code based on my experience with what I had created at butterapp.org. I knew the format of the page looked something like this (as described in the documentation <a href="http://popcornjs.org/popcorn-101">Popcorn 101</a>):<br />
<br />
<script src="https://gist.github.com/1041301.js?file=gistfile1.html">
</script><br />
<br />
I knew that the page contained "popcorn commands" which could be as simple as "pop.play()" or could be configured like this:<br />
<br />
<blockquote>
pop.footnote({<br />
start: 2,<br />
end: 6,<br />
text: "Pop!",<br />
target: "footnotediv"<br />
});</blockquote>
<br />
I also knew that the the properties target: "footnotediv" corresponded to a div with the id "footnotediv" within the body of the html page.<br />
<br />
<h3>
Getting ready to make your own plugin</h3>
<br />
<ol>
<li>I read the <a href="https://github.com/webmademovies/popcorn-js/blob/master/readme.md">readme</a> file and noted that I could get in touch with other popcorn developers by way of the <a href="https://groups.google.com/group/web-made-movies-working">mailing list</a> or the IRC channel (irc://irc.mozilla.org/popcorn).</li>
<li>I skimmed the <a href="http://popcornjs.org/documentation">documentation</a> and also found that there was a step-by step guide to <a href="http://popcornjs.org/creating-plugins">Getting Started with Popcorn.js Plugins</a>.</li>
<li>I read the plugin guide and it kind of made sense, but I'm more experiential, so I went into the plugins folder and made a copy of the "footnote" folder and renamed it to my plugin, which I called "styler".</li>
<li>I then renamed the four files within the styler directory from popcorn.footnote.html to popcorn.<i>styler</i>.html (same for popcorn.footnote.js and so on).<br />
</li>
<li>Since the JavaScript and html pages resided in a different directory than the footnote directory, I had to adjust the path the JavaScript file in popcorn.styler.html from <br />
<pre><script src="popcorn.footnote.js">
to
<script src="../footnote/popcorn.footnote.js">
<script src="popcorn.styler.js"></pre>
</li>
<li>I uploaded my "styler" directory to the web server under the popcorn-js/plugins folder and could test this by going to my web site at the url <a href="http://johntynan.com/scripts/popcorn-js/plugins/styler/popcorn.styler.html">http://johntynan.com/scripts/popcorn-js/plugins/styler/popcorn.styler.html</a> . Note the format of the path in the url. For your plugin, you should be going to a similar address.</li>
<li>This gives you a fully functioning page containing a working footnote demo that you could edit, build upon and test out your own ideas.</li>
</ol>
<h3>
Making your own plugin</h3>
<ol>
<li>Remember to check out the <a href="http://popcornjs.org/creating-plugins">Getting Started with Popcorn.js Plugins</a> guide.</li>
<li>If you plan to contribute your plugin back into the popcorn.js community, you may want to be familiar with the recommended <a href="https://webmademovies.lighthouseapp.com/projects/63272/workflow">workflow</a>. It will probably also be helpful to read through the <a href="https://webmademovies.lighthouseapp.com/projects/63272/styleguide">popcorn.js styleguide</a>.</li>
<li>In your text-editor, set your "tab setting" to use two spaces instead of tabs.</li>
<li>Next, I edited my popcorn.styler.js renaming all instances of "footnote" to "styler" (making sure to use the match case parameter and to perform this same search and replace for all instances of the uppercase Footnote as well).</li>
<li>Note the sections of both the <a href="https://raw.github.com/johntynan/Popcornjs-Styler-Plugin/master/popcorn.styler.html">popcorn.styler.html</a> page and the <a href="https://raw.github.com/johntynan/Popcornjs-Styler-Plugin/master/popcorn.styler.js">popcorn.styler.js</a> script. In particular, note how the popcorn.styler.js script has a five main sections: the <i>description</i>, the <i>manifest</i>, the <i>setup</i> and the <i>start</i> and the <i>end</i>.</li>
<li>Next, change the description and the author information to reflect the name of the plugin and to describe what the plugin will do.</li>
<li>You'll also want to change the example and the manifest to match the parameters that you'll be placing in the popcorn.styler.html page for example:</li>
</ol>
<script src="https://gist.github.com/1102575.js?file=popcorn_styler_js_01.js">
</script> <br />
<h3>
Making your plugin change some things on the page</h3>
<ol>
<li>Rather than create a div on the page (as the footnote plugin does), let's let popcorn select the target object that we would like to change by changing the options._container variable from <pre>options._container = document.createElement( 'div' )</pre>
to instead read <br />
<pre>options._container = document.getElementById( options.target )</pre>
</li>
<li>Next, in the start function, change<br />
<pre>options._container.style.display = "inline";</pre>
to read<br />
<pre>options._container.style.color = options.color;</pre>
</li>
<li>Lastly, make the following change to the popcorn.styler.html file<br />
<script src="https://gist.github.com/1102590.js?file=popcorn_styler_js_02.js">
</script></li>
</ol>
Viola! There it is: <iframe height="600" src="http://johntynan.com/scripts/popcorn-js/plugins/styler/popcorn.styler.html" width="400"></iframe><br />
You should have a video that plays, some text that displays on the page 5 seconds into the video, and then this text should change color 10 seconds into the video! <br />
<h3>
Next steps</h3>
If you're like me, you should be asking yourself, what else can I do on the page? Is this really just javascript? Can I change things by way of CSS or the DOM? And what about popcorn.js? How does this <a href="https://github.com/webmademovies/popcorn-js/blob/master/popcorn.js">popcorn.js</a> file work? To what extent does this one file hold together the entire framework and what exactly does this file do? Which functions that I used in my HTML or my JavaScript file actually reside in popcorn.js? And what more can I do with this file and with this framework? Do they have an API... why <a href="http://popcornjs.org/api">yes they do</a>. The work is just beginning. And while this exercise has dispelled some of the "pixie dust" I have a feeling that there is quite a bit of pixie dust left in store for developers wanting to explore what can be done with <a href="http://popcornjs.org/">popcorn.js</a> .Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-3746302209178649490.post-61739415849246941372011-07-17T15:57:00.000-07:002011-07-17T16:48:23.503-07:00Rethinking the problem for creating the Public Radio Roadtrip<br />
In response to <a href="http://www.azarask.in/">Aza Raskin</a>'s suggestions about writing down and refining a problem statement for a project so that the solution could be better understood, I wrote a problem statement for the <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip">Public Radio Roadtrip</a>:<br />
<blockquote>
I want to curate stories from multiple sources and associate geolocation information with these stories. I want to organize these stories into collections. I want to publish these collections of stories onto an embeddable map. I also want to publish these collections to additional destinations automatically, like a person's mp3 player (via podcasts), like Google Maps, Layar and more... I would like to easily create printed flyers of these stories with an accompanying qrcode which links to the audio.</blockquote>
Is this really the problem? It sounds more like a description.<br />
<br />
Aza quotes engineer Paul MacCready in his article "<a href="http://www.azarask.in/blog/post/the-wrong-problem/">You Are Solving The Wrong Problem</a>"<br />
<blockquote>
<span class="Apple-style-span" style="color: #333333; font-family: Baskerville; font-size: 16px; line-height: 24px;">“The problem is we don’t understand the problem.”</span></blockquote>
<span class="Apple-style-span" style="color: #333333; font-family: Baskerville; font-size: 16px; line-height: 24px;">Aza notes that "</span><span class="Apple-style-span" style="color: #333333; font-family: Baskerville; font-size: 16px; line-height: 24px;">the problem was the problem". The problem was the process itself, and to arrive at the solution the process needed to change. Both Aza and <a href="http://www.burtherman.com/">Bert Herman</a> said that repetition, that iteration was key.</span><br />
<span class="Apple-style-span" style="color: #333333; font-family: Baskerville; font-size: 16px; line-height: 24px;"><br /></span><br />
<span class="Apple-style-span" style="color: #333333; font-family: Baskerville; font-size: 16px; line-height: 24px;">So, perhaps rather than describe what I have now, perhaps the problem is, how can I better refine the process? How can I better test the app, gain feedback, refine my assumptions and my work and try again. What will my problem statement look like then?</span>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-3746302209178649490.post-84361387712312745042011-07-17T03:46:00.000-07:002011-07-17T15:07:20.539-07:00Refining the Concept of the Roadtrip App<a href="http://www.burtherman.com/">Bert Herman</a> in his recent <a href="http://bit.ly/nAn8iH">presentation</a> to the <a href="http://p2pu.org/en/groups/knight-mozilla-learning-lab/">Knight-Mozilla learning lab</a> came across as an unassuming person with a wisdom born from experience. <br />
<br />
He stressed that in order to devote yourself to making a successful large-scale project, you have to ask yourself if you are the right entrepreneur for the project. This has prompted some soul-searching on my part, and for the <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip">Public Radio Roadtrip</a> my answer came back "yes." I'm irrationally and tenaciously passionate about this app and I see it as meeting a need both in the newsroom and in the community.<br />
<br />
Herman then went on to stress that for any project to be successful, you "need to listen to what people are saying." He stressed that "you need to find the unsaid idea behind what people are saying" and that you need to "do [that] one thing head on."<br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">And this got me thinking about audiences, I wonder if we also need to be more clear who our audiences are... I've been thinking a lot about this quote from the article "<a href="http://www.knightfoundation.org/press-room/other/investing-future-news/">Investing in the future of news" <i>A contributed chapter for 'Page One' edited by David Folkenflik</i></a> </span><br />
<blockquote>
<span class="Apple-style-span" style="color: #333333; line-height: 24px;"><span class="Apple-style-span" style="font-family: inherit;">We found that projects made greater headway when they established an identity as part of a specific, tightly-defined community or interest group to attract passionate, repeat users. Journalists doing such outreach were more successful when they made themselves active members of the community, constantly asked for advice, showed that they were listening and made changes based on community input.</span></span></blockquote>
<span class="Apple-style-span" style="font-family: inherit;">I wonder if one potential audience for my app (outside reporters in the newsroom) would be a biking group, a car club or a geocaching interest group. I think they would clearly be the ones to give feedback on using maps and following routes. I think it would be great fun, it would be incredibly social to mash-up journalists and bicyclists in this kind of a way and see what happens.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
Bert Herman mentioned having "as little possible barriers to adoption as possible." For Storify, one of these barriers was solved by simply allowing users to publish their work from Storify directly on their own web sites, within their own pages using a simple embed code. The Public Radio Roadtrip currently requires people to install a bookmarklet (intended to help make it easier for people to place stories from NPR.org on the map). I have a feeling that this bookmarklet might actually be a barrier to adoption.<br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
Herman talked about the importance of design and for making things clean as the key for getting people to use your apps. With this in mind, I started working on a playful, two-minute mock-up of how the interface for the Public Radio Roadtrip could be cleaner and easier to use:<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5945430225/" title="Placeify by johntynan, on Flickr"><img alt="Placeify" height="306" src="http://farm7.static.flickr.com/6016/5945430225_dd5988ab70.jpg" width="500" /></a><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;"><i>Oh, and I wasn't sure if it was Bert or Aza who gave us carte blanche to "steal!"</i></span><br />
<br />
But really, the idea behind this graphic was to pose the idea of lowering barriers of adoption by brining a search inteface into the app (and eliminating the need for the bookmarklet). The other thing that this image meant to impress was the idea that the Public Radio Roadtrip intends to allow the user to curate points on the map from multiple sources, something that Herman's <a href="http://storify.com/">Storify</a> does amazingly well.<br />
<br />
Bert Herman advised us "when you find your passion, build your community." In addition to "dating" my co-founders as he cheekily but earnestly suggested, I can see myself alongside journalists and tourists, virtual tourists and bicyclists, graphic designers and marketers, bringing public radio stories out into the physical and digital streets and into the world.<br />
<br />
<div>
<span class="Apple-style-span" style="font-family: inherit;"></span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="font-family: inherit;"><br /></span></div>
<span class="Apple-style-span" style="font-family: inherit;">
</span></div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-3746302209178649490.post-39508834010684547902011-07-14T23:41:00.000-07:002011-07-15T12:12:45.513-07:00QR Codes and Geolocation on the CheapOkay, so my <a href="http://opensourcebroadcasting.blogspot.com/2011/07/first-pitch-of-public-radio-roadtrip.html">last post</a> was inaccurate... well, wrong. And <a href="http://www.azarask.in/blog/post/how-to-prototype-and-influence-people/">Aza said we'd be wrong</a> on the first pass. So I'm not worried. This naturally leads me to consider ways where I could refine and iterate my sketch of the experience and to highlight more accurately the value that the <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip">Public Radio Roadtrip</a> holds for listeners and for stations.<br />
<div>
<br /></div>
And while this first pass did paint a suggestive experience, and one that does fall within the experience that one might have using the Public Radio Roadtrip, I wanted to be up-front in pointing out that everything I described in these initial sketches could be pretty much done without using the app itself. <br />
<br />
I didn't want there to be any smoke and mirrors here. I did not want to expend people's time and attention on an incomplete picture... that wouldn't get me any closer to selling the experience (although I will say that the experience of getting QR Codes of public radio stories out into the world is exciting to me).<br />
<br />
So, with that in mind, let me describe a very simple approach for associating QRCodes with radio stories. This approach is so simple that everyone can and should give this a try, and then they should walk outside and take these stories out into the physical world for others to find.<br />
<br />
For example, let's say you're a grocer. Let's say you want to entice people to pay a little extra money to buy some of your savory hydroponic tomatoes from Canada. <br />
<br />
Let's say you want to appeal to your customers' qualities as enlightened NPR listeners. So, you go to NPR.org<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5938879507/" title="qrcode1 by johntynan, on Flickr"><img alt="qrcode1" height="281" src="http://farm7.static.flickr.com/6013/5938879507_0057130baa.jpg" width="500" /></a><br />
<br />
Then, you search for Tomoato.<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939433714/" title="qrcode1_1 by johntynan, on Flickr"><img alt="qrcode1_1" height="167" src="http://farm7.static.flickr.com/6017/5939433714_562550ec74.jpg" width="500" /></a><br />
<br />
You find the perfect article about why tomatoes don't taste like anything and you find that it mentions hydroponic tomatoes from Canada. Great! Now, you right-click on the download link for the story and select "Copy Link Address".<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939433894/" title="qrcode2_3 by johntynan, on Flickr"><img alt="qrcode2_3" height="231" src="http://farm7.static.flickr.com/6144/5939433894_326470dded.jpg" width="500" /></a><br />
<br />
Next, in another tab or browser window, go to <a href="http://createqrcode.appspot.com/">createqrcode.appspot.com</a>.<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939434026/" title="qrcode4 by johntynan, on Flickr"><img alt="qrcode4" height="281" src="http://farm7.static.flickr.com/6016/5939434026_b635caa28c.jpg" width="500" /></a><br />
<br />
Then, paste the link to the audio story that you just copied into the textarea at createqrcode.appspot.com. Then, click "Create QR Code".<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939434154/" title="qrcode5 by johntynan, on Flickr"><img alt="qrcode5" height="281" src="http://farm7.static.flickr.com/6020/5939434154_6c1bccf37e.jpg" width="500" /></a><br />
<br />
Voila! You got it. Now, print this page.<br />
<br />
While you're at it, print the page from NPR.<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939434376/" title="qrcode6 by johntynan, on Flickr"><img alt="qrcode6" height="281" src="http://farm7.static.flickr.com/6013/5939434376_eddf2ee3f1.jpg" width="500" /></a><br />
<br />
Then, using some scissors, cut around the QR Code on the printed page.<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5939435092/" title="qrcode7 by johntynan, on Flickr"><img alt="qrcode7" height="375" src="http://farm7.static.flickr.com/6145/5939435092_d4071f21de.jpg" width="500" /></a><br />
<br />
Then, using some tape, paste the QR Code to the printed article.<br />
<br />
Finally, take your poster out into the world and tack it to a pole or post it to a community bulletin board (or in this example, by a tomato display at your business).<br />
<br />
<a href="http://www.flickr.com/photos/johntynan/5938881735/" title="qrcode8 by johntynan, on Flickr"><img alt="qrcode8" height="500" src="http://farm7.static.flickr.com/6140/5938881735_97da88afe6.jpg" width="375" /></a><br />
<br />
Now, people can use their smartphones to scan the QR Code and listen to the story, right there where they find it, wherever they find it, out in the world!Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3746302209178649490.post-75852687575014917172011-07-13T16:10:00.000-07:002011-07-14T00:12:26.421-07:00A First Pitch of the Public Radio Roadtrip ExperienceThis past Monday, as part of our first week of the <a href="http://www.pbs.org/idealab/2011/07/stop-yammering-and-start-hammering-how-to-build-a-maker-space-for-news192.html">Knight-Mozilla Ideas Challenge learning lab</a>, we listened to Aza Raskin talk about <a href="http://www.azarask.in/blog/post/how-to-prototype-and-influence-people/">How to Prototype and Influence People</a>.<br />
<br />
I was struck by Aza's challenge to "Sell the Experience" of your app, as opposed to selling the list of features. See slides 6 and 7, as well as the lead up to slide 50 below:<br />
<br />
<div id="__ss_4705173" style="width: 425px;">
<strong style="display: block; margin: 12px 0 4px;"><a href="http://www.slideshare.net/azaraskin/how-to-prototype-and-influence-people" target="_blank" title="How to prototype and influence people">How to prototype and influence people</a></strong> <iframe frameborder="0" height="355" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/4705173" width="425"></iframe> <br />
<div style="padding: 5px 0 12px;">
View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/azaraskin" target="_blank">azaraskin</a> </div>
</div>
<br />
So, with that in mind, I thought I would sketch the experience that I envision a successful and happy user of the <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip/">Public Radio Roadtrip</a> would experience:<br />
<br />
<h3>
The Station's Experience</h3>
<br />
<a href="http://www.flickr.com/photos/johntynan/5935275054/" title="Your Experience by johntynan, on Flickr"><img alt="Your Experience" height="500" src="http://farm7.static.flickr.com/6140/5935275054_236f7cab5a.jpg" width="375" /></a><br />
<br />
<h3>
The Story's Experience</h3>
<br />
<a href="http://www.flickr.com/photos/johntynan/5935276854/" title="Your Story's Experience by johntynan, on Flickr"><img alt="Your Story's Experience" height="500" src="http://farm7.static.flickr.com/6013/5935276854_ab41fd8726.jpg" width="375" /></a><br />
<br />
<h3>
The Listener's Experience</h3>
<br />
<a href="http://www.flickr.com/photos/johntynan/5935275984/" title="Your Listener's Experience by johntynan, on Flickr"><img alt="Your Listener's Experience" height="375" src="http://farm7.static.flickr.com/6021/5935275984_f009baf16a.jpg" width="500" /></a><br />
<br />
So, now, my immediate step is to:<br />
<ul>
<li>ask potential users of the Public Radio Roadtrip... "Well... <a href="http://twitter.com/#!/johntynan/status/91285189183029250">Is this how you see the experience of creating 'roadtrips'?</a> Is this what you want to do with your stories?"</li>
<li>The next step is to listen</li>
<li>The next step after that is to iterate fast and adjust the app. To <a href="http://www.azarask.in/blog/post/the-wrong-problem/">iterate the solution as well as the understanding of the problem</a>. (See slide 34).</li>
</ul>
Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-3746302209178649490.post-24510905739322338442011-06-04T03:11:00.000-07:002011-07-13T13:40:17.594-07:00The Public Radio Roadtrip: A Proposal for the Knight/Mozilla Drumbeat/MoJo ChallengeI have a great project for the <a href="https://drumbeat.org/en-US/challenges/open-webs-killer-app/">Knight/Mozilla Drumbeat/MoJo challenge</a>. It's geared specifically for curating, sharing and discovering media (and could also be geared for user generated media). At it's core, it's GPL licensed (both the web app framework as well as the code itself). To my knowledge, it doesn't use any proprietary technology (mostly python and javascript). It aims to promote good coding (and has the potential to be a great example of html5 coding). It's reproducable (on practically any operating system, or via Google App Engine). It's easily customized for media organizations. And I think there are software and processes that are being used (notably web2py and google app engine) which could be instructive for coders, media organizations to know about. And it's fun!<br />
<br />
Okay, what is it? It's called the Public Radio Roadtrip. It incorporates location-based-audio (or other media) and mapping. It doesn't aim to be a cms. It allows media organizations to continue to use the publication tools of their choice. However, it provides an "editorial layer" between disparate web sites (or apis) and it leverages the power of geolocating stories.<br />
<br />
I've been working on this app for almost a year now.<br />
<br />
You can view the code here: <a href="http://code.google.com/p/publicradioroadtrip/">http://code.google.com/p/publicradioroadtrip/</a><br />
<br />
You can try out the demo here: <a href="http://publicradioroadtrip.appspot.com/publicradioroadtrip/">http://publicradioroadtrip.appspot.com/publicradioroadtrip/</a><br />
<br />
I've blogged a bit about the concepts and ideas behind the app here:<br />
<br />
<a href="http://opensourcebroadcasting.blogspot.com/2010/10/refining-assumptions-about-public-radio.html">http://opensourcebroadcasting.blogspot.com/2010/10/refining-assumptions-about-public-radio.html</a><br />
<br />
and here: <a href="http://opensourcebroadcasting.blogspot.com/2011/05/public-radio-roadtrip-request-for-beta.html">http://opensourcebroadcasting.blogspot.com/2011/05/public-radio-roadtrip-request-for-beta.html</a><br />
<br />
and here: <a href="http://opensourcebroadcasting.blogspot.com/2011/06/navigate-to-public-media-stories-via.html">http://opensourcebroadcasting.blogspot.com/2011/06/navigate-to-public-media-stories-via.html</a><br />
<br />
I've had significant input from practicing journalists and technologists from within public media such as <a href="http://twitter.com/#!/kristianiaclark">Krissy Clarke</a> at KQED, <a href="http://twitter.com/#!/javaun">Javaun Moradi</a> at NPR and <a href="http://twitter.com/#!/hearvox">Barrett Golding</a> (at Hearing Voices).<br />
<br />
I think this app has a lot of potential to grow in the coming year. I envision ways where journalists and citizens could inform the direction for the creation of this app. I envision ways where this app could be a useful tool for journalists working to define and discover ways in which location based stories are concieved and told. And I think this could be useful in promoting Mozilla's goal of openness, standards and innovation.<br />
<br />
Thank you for your consideration.<br />
<br />
John TynanUnknownnoreply@blogger.com0