Kight–Mozilla Learning Lab

[mozlearninglab]

My Submition for the Lab

The time has come...

Find out about Open News Player here.

[mozlearninglab]

Facilitating Collaboration in Open News Player

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. 

The success of a product like Open News Player obviously replies on the commitment from the content creators. A change of staff would be a consideration as well as the commissioning of a system and tools for its journalists to use. 

[mozlearninglab]

Open News Player Wireframe Demo

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. 

Any who. If you haven't seen the demo please check it out and tell me you thoughts on it!

[mozlearninglab]

Getting to know Popcorn.js

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.

I look forward to seeing what I can produce using Popcorn.js.

[mozlearninglab]

Open News Player in 256 Chars

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.

I think this was a fantastic exercise and helped me focus on what I need this Open News Player to achieve. 

[mozlearninglab]

Mozilla News Lab Week #2

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.

It is also very important to help users set up and running. Making sure that the getting started side of things are of a quality so that the users don't experience (attrition) failure and ditch your project. With this in mind I have decided that I would like really like some kind working demo with enough documentation for them to know how to replicate what the demo achieves. I really want to be able for people to download the source with a demo and get it running locally in their browser. 

[mozlearninglab]

Bringing the 10 o'clock News into the Browser

I finally think I may be onto something! When considering what areas of journalism I wanted to focus for this Lab project I though I should play to my strengths as a graphic designer and front-end developer. I also considered my relationship with news. My favourite way to consumer any information is video and with the discover of Popcorn.js, it was a sign to explore video journalism.

When thinking about how I like to consume news I have to admit that watching it on TV is the most effective method for me personally. I am a visual person, like many others, and watching information is the best way to retain it and is most enjoyable, rather than print or radio. Whats great about the News on TV is that they inform of the days headlines then move on to sequentially report on all of them. This overview of the days stories is a great way of being told all of the news thats happened and then asses whether you would like to know more.

I propose the development of an interstice experience that embraces the strengths of broadcast news format as well as aiding the development of the Open Web. I have a vision of an 'Open News Player' which would updated daily by news vendors which has been designed and formatted for HTML5 browsers.

To much data is inaccessible inside the render of a video file. Popcorn.js has shown how the browser can handle the pairing of DOM manipulation and a media timeline. Taking information like graphs, maps, links and quotes out of a video file and letting them breath in the browser could lead to non-linear, more immersive and relevant experiences.

Why embed a video in a page of a news reporter highlighting points on a graph when the graph could live outside of the reporters narration and on the page? The graph could then be interacted with further or even styled differently for the accessibility of the user. 

Amanda Cox from the New York Times highlighted the importance of having a 'read out' guiding the audience to what conclusions an info graphic shows. A traditional news presenter would be a better substitute i feel.

What exactly is this Open News Playing going to be?

The idea of this project is to turn the browser into an TV. There would still be traditional <video> elements on the page but a rawer, less post-produced version than would be aired on traditional TV. All lower thirds, text, info graphics and anything that a browser could render would be delivered as semantic data leaving only footage such as reporters, interviews or locations being delivered as video.

Javascript on the page would the sync this information information with the video allowing the user to play and pause the whole experience. Many examples of Popcorn.js is the use of content alongside to support the video. But some examples rely on the library to communicate the desired information. The latter is what I am after. Not a video with extra content but video AND the content.

This is the process the user goes through when using the application:

Visit site/app

Watch headlines and add interesting stories to the queue

Work your way through the queue of content

Pause playback at desired points to investigate the story further

Complete the queue — You have finished watching today news

I have also sketched out some interface designs to help communicate what this thing could look like.

What would using this Open News Player help me achieve?

I though I would produce a list of how I think this idea would aid mankind

Update me on all current affairs 

Let me find out details of stories I am interested in

Give me the ability and room to investigate further

A method of consuming news that tells you when you consumed all you can for today

Ability to use custom styling for accessibility 

Questions that this Idea has left me with

Viability of alpha transparency video in a the bowser?

A realtime context. Can we push DOM manipulation along with a stream?

What impact will this have on bandwidth?

How will designers approach content for when users pause and investigate further?

How will the news rooms implement and produce content for this platform? A tighter integration of broadcast and developers?

Minimum Viable Product

The next stage for me is to defiantly start creating 'stuff'. I would like to communicate my idea with a working demo before the end of this lab. That will be my goal. I have to decide what to include in my MVP and get it done.

I plan to achieve this by creating a scenario/some news stories I would like to tell through this platform.

[mozlearninglab]

The Final Project Brief

The Final Assignment Brief for the Lab has been published.  Reading the document made me realise my existing idea doesn't have very much relevancy to the 'news room.' With this I have decided to work on a whole new idea.

After reading many of the first weeks blog posts I have seen that there are some really fantastic ideas people are beginning to work on. From the idea of collaborative journalism with a Github approach to writing to visualisation of the life of a story through a dynamic 'living' tree.

I have worked on some new concepts as well as revisiting some generated at the Innovation Jam. I have decided to play to my strengths as a graphic designer and front end-developer concentrating on the presentation of news and how it is consumed as a posed to the generation and sourcing. My concepts range from complete re-working of how news could be viewed on a page to profiling the amount of news you in-take based on a single integer input.

My favourite idea has to do with video and syncing DOM content for a more interactive IPTV news experience.  Popcorn.js is a fantastic project that has been initiated my Mozilla and I believe that I will be making use of this framework for this project.

[mozlearninglab]

Week One of the Lab

So this is the first of my weekly blogging assignments. Each will cover what I have taken away from the weeks lectures how I can apply this to my project for the lab.

My Idea

I thought I would introduce the idea I have come into the Learning Lab with. To boil it down to its simplest form: a platform for users to archive events they where both part of through collaboration.

People who are at the same meeting, party, terrorist attack or football game each have an experience that would be very different. Each of them would note different aspects of the event and at varying levels of detail.

This idea has been mutated in a number of ways; the simplest form being a way for friends to archive all of their accomplishments together. The date could then be visualised in a number of ways. May be more niche service for friends to conduct an internal investigation to find out what really happened the night before using the evidence they can produce together; getting the whole story.

I hope this lab will help me move this idea forwards into a thing I can show and discuss with others. My idea is currently worth zero as Aza pointed out.

Aza Raskin, @azaaza

Lecture #1 — 11th July 2011

Aza’s talk titled How to Prototype and Influence People was very inspiring and full of metaphor. He noted how others may not understand your idea and how forms of prototype can help with communication bandwidth and to get people exited.

The most notable point Aza made was that “you are iterating your solution as well as you understanding of the problem.” I think realising this will be key in the development of my project. I have already identified that I don’t know exactly what this service is and how it will function and that prototyping will aid me to define it.

Another point he made was that I should “aim to finish the first–pass in a day.” I will defiantly be doing this (Saturday). I plan to decide on a direction to take with this idea and produce wireframes. This will make me define the data I will be working with and how it will be inputted and visualised.

Burt Herman, @burtherman

Lecture #2 — 14th July 2011

Burt’s talk titles Following the Story: from foreign correspondent to entrepreneur discussed his own experiences and attitude towards Hacks and Hackers.

One of the key points I picked up on was the importance of having a co–conspirator with a complimentary skill sets and experiences. I think this is good advice but do not feel that this could be achieved in this 4 week course. I will take this away with me though.

I will also take the advices from my users like Burt highlighted. After I have produced something with enough communication bandwidth for people to get exited about I will present it to my audience for feedback. This will then help me redefine the project and how to move forwards.

[mozlearninglab]

An introduction to the continuation of my education

Thanks to the legend that is Peter MacRobert @petermacrobert I have a place on the Knight–Mozilla Learning Lab.

I am looking forward to this so much especially the lectures. They are being hosted online at around 5pm my time. I've never taken part in an online, live streaming lecture so should be a great experience. 

We also have to work on a personal project which we will then present at the end of the 4 weeks. I hope that my idea I have for a social network to help 'Get the whole picture' will be suitable. We are being asked to put in 5–10 hours each week which will be easy :p