#moznewslab

The time has come...

So this week we were given a specific question to answer over at the Mozilla News Lab. Unfortunately due to my error I missed Shana Nessa's talk but managed to catch up with the presentation.

Keeping in mind the objectives and challenges identified in this week’s presentations by Shazna Nessa and Mohamed Nanabhay, how does your project take into account the need to facilitate collaboration in the newsroom (whether real or virtual), while acknowledging that team members will have varying technological skill sets?

Which I then translated to —

What affect will Open News Player have on collaboration in the newsroom for users of varying skills and what can be done to help?

Firstly I think its important to highlight the fact that Open News Player is a platform for consuming news. This means that there is another format that newsrooms are going to have to put their content on. A commitment would have to be made to create content for ONP and that would require the effort from people who create news content.

For something like Open News Player to be a viable product I think there would need to be tighter integration of developers and broadcast. This need to work closer with developers in charge of ONP could be extended to other departments, especially Data Visualisation. Shazna spoke about the changes needed in the newsrooms, one being the development of hybrid skills. Somebody who could render an animation in Final Cut Pro as well as in a browser would be invaluable in producing content simultaneously for TV and ONP.

One thought is that broadcast could create content on the fly for ONP using the tools they are already using. By developing plug-ins for desktop video editors it could be as simple as exporting a timeline along with the assets for ONP at the same time as rendering the video. This blog post by Web Made Movies explains that this is already under way for Final Cut Pro and Popcorn.js.

I know, with my limited knowledge, that templates are used heavily in broadcast. This would lend itself to the idea of producing ONP and TV content at the same time. Using pre defined models for information means templates could be created to display in the two formats. Again Web Made Movies have already starred on a template model for Popcorn.

The 'investigate' feature of Open News Player his would require systems in place for metadata to display without intervention and tools to help with editorial content. Databases could hold metadata such as the source of the content and its date. For the editorial content It would be necessary to create tools for the editors and journalists to use. 

In the Open News Player demo I made, its shows a tool tip on a graph. It would be great if a journalists could use some tools to describe the graph they are after and then using a WYSIWYG method, add extra layers of content. Also visually toggling layers of data and saving, could generate different views for users interact with. This graph definition could then be packaged and sent to the broadcast department. 

So I have finally produced my wireframe slideshow for Open News Player. Its currently living at goo.gl/oKGTM Open News Player Wireframe Demo

I hope this demo is an accessible way for people of all levels to grasp the concept of Open News Player and what benefits this method of delivering news content brings. It runs through the current issues with broadcast and web video and how these are combated as well as running though the users experience.

I created the presentation using Popcorn.js and its image plugin to simply sync the slide changes to the audio narration I recorded. I have to say the hardest part was recoding the audio and I think it shows. My ability to read and speak clearly diminishes when I know its being recorded. 

I decided I need to to take the time to have a look at Popcorn.js and get my head around what it can achieve and how it works. Popcorn.js lives over at popcornjs.org and I have to say, I love the logo!

Documentation

Popcorn.js is described as 'The HTML5 MediaFramework' and describes it capabilities to the two audiences interested in using it: media makers and developers. 

Heres what the documentation describes it as for developers:

Popcorn.js is an event framework for HTML5 media. Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

I see popcorn.js as a framework where timeline events can trigger DOM manipulation. There is also a community creating plugins to make specific tasks easier.  There are already a lot of plugins on the plugin page but know that there are some more out there that haven't made it onto the list yet. 

Popcorn 101

In the documentation there is a Popcorn 101 guide which runs you through setting up popcorn and shows you how to make some text appear in an element at a specified time of a video.

This page is really fantastic, making use of Popcorn to sync lines of code highlighting while the guy narrating describes what the code does. And at the end of the walkthrough an iframe loads showing what the example achieves. I really think this is a great way to quickly get developers understanding the code they are looking at and home more adopt this.

Dissecting Popcorn 101

At this point I couldn't resist having a look at the source and see how this demo was put together. I have allays found that taking apart working, purposeful code is the best way to get familiar with a new library. 

After looking around this page I found it was using a plugin called popcorndoc.js plugin that doesn't appear on the plugins page. After looking through the code with my noob googles I have come to the conclusion it is some very nice code :p

Its applies and removes CSS classes to div.line elements inside the Gist embed. It also then has the ability to replace a specified element with an iframe and load the URL to the working Gist example.

In the document 3 scripts are loaded to achieve this

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> <script src="popcorn.popcorndoc.js"></script> <script src="timeline.js"></script>

This first is the popcorn library, then the popcorndoc plugin and then a third javascript document when contains the event timeline for this example. 

Having a look in timeline.js I see that a  new Popcorn object is substantiated to a gistthis variable, being bound to the audio element with the ID of 'narration'.

var gistthis = Popcorn('#narration');

There is  then a stream of .popcorndic() objects laid out as specified in the DocBlock of the popcorndoc plugin. These objects are each events that describe at what point to start and then end syncing with the video in seconds. And also which lines to target.

.popcorndoc({ start: 47, // seconds end: 56, // seconds lines: '17,32', gistUrl: 'https://gist.github.com/1041301', target: 'gistdiv' }) .popcorndoc({ start: 57, // seconds end: 60, // seconds lines: '21', gistUrl: 'https://gist.github.com/1041301', target: 'gistdiv' }) .popcorndoc({ start: 60.5, // seconds end: 75, target: 'gistdiv', // DIV in which to load gist gistUrl: 'https://gist.github.com/1041301', // URL of gist runIn: 'iframediv' // DIV in which to load the example in an iframe }) ...

And finally a play function.

.play();

I think this packaging of events as javascript objects in a separate file is a really great way to keep the code manageable and portable. Adding another line of code to highlight would be as easy as creating another object with the necessary options.

Popcorn’s API

I've had a look around the Popcorn API and I have to say I was pretty impressed with the methods on offer but the documentation still needs some work. For the level that I am at I need quite detailed code examples. I'm sure JS veterans would find this documentation quite approachable at the level It currently is.

While reading through I was scouting out methods that would be needed for my Open News Player concept . I haven't thought through all of the coding implications but its good to get an idea of what available. There is a .getscript() static method that will load a script and run a function once complete. I think this would be very useful for ONP for (pre)loading the users queue of stories. 

Conclusion

After learning more about Popcorn I have to say it has made me really exited about its possibilities. I was going to look over some demos of what people have already made but would rather get on and work out how I am going to get this prototype built. 

Overall there is a lot more to the Popcorn framework than I originally thought. With the right knowledge and idea some (more) amazing things can be built. The community behind it seems very lively and dedicated from what I have witness from the mailing list, getting ready for the big 1.0 release.

As part of the lab I had describe my idea in 256 characters, including spaces! I'm now word-smith but I think I did ok. 

Open News Player brings the 10 o'clock News to the Browser. Watch the days headlines and queue more detailed reports— tailor coverage to your interests. ONP uses semantic web to liberate data from video allowing for further investigation and accessibility.

[ This text is reposted from the original version at the Technovica Lab blog, which is offline due to a DNS-related problem. Some links that would be broken have been removed and graphical elements are not included in this repost. I hope to have it fully restored early this week. This was originally reposted at my personal Tumblog when posting here failed.]

"Few developers understand the non-technical issues that go into an open-source project."

— JOHN RESIG  |  jQuery . Khan Academy

A common theme has emerged among the Knight-Mozilla Lab lecturers: Culture, its dynamics and how we approach it will be the most difficult aspect of building our projects.

Every one of the lectures so far has either had culture as a key focus, or mentioned culture and issues related to it as a key point. Among the latest ones, John Resig spoke about open source project development, management, and community, and his lessons from developing jQuery.

As he talked about the challenges he and his team faced, I couldn't help but reflect on how starkly the open source development approach contrasts with newsroom or news media culture. The former is an open, accessible framework with a bottom-up, grassroots structure. The latter is a closed, restricted framework with a top-down, hierarchical structure.

Although news organizations are now starting to collaborate with their communities in a more open manner, even large ones may take a token approach, asking people to submit a photo or to follow social media accounts.  I have little doubt that substantive collaboration and implementation  will be an issue for many — especially those who have not experienced or don't understand news and journalist culture. I saw and experienced it where I worked. In particular, developers were the strange, mysterious wizards who made things work but journalists didn't know how and were suspicious or indifferent to their ideas.

However, adding Resig's principles will strengthen my project — a collaboration tool for journalists that bridges the industrialized and developing worlds — and could help it foster a more open, connected, community-driven culture by first extending the trust journalists have for professional peers.

LESSONS

Resig raised important points, some of which are already elements of my project:

Understand what your users are trying to achieve. It will help you to create a better product. I talk to journalists all the time about their needs.

Make sign-up as painless as possible. It would require little more than a phone or fax number, or an e-mail address.

Treat every user as a potential contributor. The concept behind the tool is contribution, so it would be easy to migrate that behavour to bug reports, documentation, feature requests, etc., per Resig.

Other points will require further thought:  

Make documentation as accessible as possible. I initially thought the tool would roll out to English-speakers first but now see that may limit uptake and introduce cultural bias into the tool's design. Full documentation will have to be in multiple formats and languages.

Provide places for people to ask questions. My focus was so tight on my archetypal user, I didn't consider all of the channels by which users might contact me. Set-up is underway. 

Answer questions every day. You can't be lazy about it. Now planned: Answering support questions.

Have an open process. Make decisions with public input from the community. I already take community input privately. This will expand as the project unfolds.

[ This text is reposted from the original version at the Technovica Lab blog, which is offline due to a DNS-related problem. Some links that would be broken have been removed and graphical elements are not included in this repost. I hope to have it fully restored early this week.]

"Few developers understand the non-technical issues that go into an open-source project."

John Resig

jQuery,  Khan Academy

A common theme has emerged among the Knight-Mozilla Lab lecturers: Culture, its dynamics and how we approach it will be the most difficult aspect of building our projects.

Every one of the lectures so far has either had culture as a key focus, or mentioned culture and issues related to it as a key point. Among the latest ones, John Resig spoke about open source project development, management, and community, and his lessons from developing jQuery.

As he talked about the challenges he and his team faced, I couldn't help but reflect on how starkly the open source development approach contrasts with newsroom or news media culture. The former is an open, accessible framework with a bottom-up, grassroots structure. The latter is a closed, restricted framework with a top-down, hierarchical structure.

Although news organizations are now starting to collaborate with their communities in a more open manner, even large ones may take a token approach, asking people to submit a photo or to follow social media accounts.  I have little doubt that substantive collaboration and implementation  will be an issue for many — especially those who have not experienced or don't understand news and journalist culture. I saw and experienced it where I worked. In particular, developers were the strange, mysterious wizards who made things work but journalists didn't know how and were suspicious or indifferent to their ideas.

However, adding Resig's principles will strengthen my project — a collaboration tool for journalists that bridges the industrialized and developing worlds — and could help it foster a more open, connected, community-driven culture by first extending the trust journalists have for professional peers.

LESSONS

Resig raised important points, some of which are already elements of my project:

Understand what your users are trying to achieve. It will help you to create a better product. I talk to journalists all the time about their needs.

Make sign-up as painless as possible. It would require little more than a phone or fax number, or an e-mail address.

Treat every user as a potential contributor. The concept behind the tool is contribution, so it would be easy to migrate that behavour to bug reports, documentation, feature requests, etc., per Resig.

Other points will require further thought:  

Make documentation as accessible as possible. I initially thought the tool would roll out to English-speakers first but now see that may limit uptake and introduce cultural bias into the tool's design. Full documentation will have to be in multiple formats and languages.

Provide places for people to ask questions. My focus was so tight on my archetypal user, I didn't consider all of the channels by which users might contact me. Set-up is underway. 

Answer questions every day. You can't be lazy about it. Now planned: Answering support questions.

Have an open process. Make decisions with public input from the community. I already take community input privately. This will expand as the project unfolds.

This weeks compulsory lectures came from two guys with fantastic amounts of experience and passion for what can be achieved in a browser.

Christian Heilmann discussed the 'Sate of Mozilla and the browser in 2011'. In this lecture he spoke about the developments in browser technology and the direction HTML5 is taking the open web. I have quite an appreciation for web standards and it was awesome to get his persecutive.

Christian touched on a point that stuck with me. Accessibility and usability are necessary to getting more users. I think that accessibility is a selling point of my proposed Open News Player. Without the aid of market research or case studies I have come to the conclusion that rendering data and information into a video is making it inaccessible. Users who are visually impaired are stuck with the given, resolution dependent view of the data presented to them when watching video. 

Why not remove that graph, map, table or chart form the video file and use DOM manipulation to juxtapose it along side the narrative explanation? And then also add controls change the CSS of the data to give it more visual contrast for partially sighted users?

Christian also went through a list of open source projects which are helping to make the web a more media rich place. The one that stuck out to me was Popcorn.js (and many others from the lab!). To describe it simply, it's a library with a plug-in system to sync document content with a video track. This was the solution to the problem I was going over in my mind. I think It is a fantastic project and is hugh step forwards to truly have ubiquitous, accessible data. This single library from the Web Made Movies initiative has inspired me a lot for this project.

The second talk of the web was held by John Resig, most famous for initiating the popular jQuery Libraries. In his talk titled 'Open source process: jQuery' John spoke about his experiences of running the project and whats important to making an open source project successful. It was fanatics to see the man behind the project that had spurred me and so many others to get into web development. (Oh how I love you slideToggle())

The most important point I left with was how important the non-tech side of a project is. Having a happy community behind a project leads to its success. You have to make sure documentation and channels of communication are working to help users and contributors get answers to their questions.