BTC640/Assignment2-Winter2013

Due date: 22 mar

Late penalties: 10% per day

In this assignment you'll be working in a team to digitize an existing lecture. That means filming the lecture, editing the audio and video, converting it to formats that the popular browsers can play, and using the newest web technologies such as Popcorn.js to display the lecture in a web browser.

The learning module your create will be in a webpage created by you, but can be easily integrated into any other website using just copy-paste (and uploading the necessary files, of course).

Teams

3 people per team. If you want a bigger or smaller team - I may allow it, please talk to me about it. You teams must be formed by the end of study week.

When you're forming the team - keep in mind that the following are the major tasks:

• Filming
• Audio/video post-processing (the quality must be good)
• Exporting the resulting video for the web
• Using popcorn.js for your video
• All other web stuff as needed (CSS, HTML, other JavaScript)

As soon as you decide, add your names to the following list (one bullet per team):

1. Meet Godhani, Husain Fazal, Robert Stanica, Preshoth Paramalingam
2. Vince Lee, Alex Craig, Mark Aronin
3. Neil Guzman, Tudor Minea, Frank Panico
4. Sasha Atijas, Jonathan Cheung, Barath Kumar, Rubinder Singh
5. Michael Veis, Nitin Prakash, Shajinth Pathmakulaseelan, Krishanthan Lingeswaran
6. Natalia Levkevitch, Radney Alquiza
7. Aakash Dhawan, Chad Arthur, Nan Zhaou
8. Ali Shoja, Melvin Berena, Jeff Lee, Gagan
9. Ari Keleshian, Simon de Almeida
10. Dale Karp, Saad Mohammad, Saul Grybas
11. Travis Cole, Anh Viet, Hunter
12. Hye Young Choi, Andrew Li, Leo Turalba
13. Sydney Collins, ??

Preparation

Note the following:

• Filming has to be done using a camera on a tripod, so a cellphone will not work, and a point-and-shoot camera may or may not work. If you don't have access to this equipment - I can lend you mine, but we have to arrange it well in advance.
• You'll have to film an entire lecture and the quality will matter, so you might want to do a couple of test runs first.
• In the first week of class after break week you will have a guest speaker talk to you about Popcorn.js and maybe PopcornMaker (the latter may or may not be useful for you).
• You'll need a video of a reasonable size (that can be streamed over a typical residential internet connection).
• You'll need that video to play in the latest versions of Firefox, Chrome, and Internet Explorer.
• The entire webpage has to look professional.

That will give you plenty of study and preparation work for the study week. There will be a graded progress report in week 10, so don't leave it till later.

Filming

One of our professors (Tom Aratyn) has graciously agreed to let you guys film his ULI101 lectures. That means you have a real lecture you can film, but you have to be professional about it. I asked Tom that if you are disturbing his class he will kick you out, in which case you'll be out of luck for this assignment, unless you find another volunteer.

In order to make sure that the filming isn't causing too much trouble for the ULI101 lectures - only one person can be in the lab/lecture room filming at one time. Once the teams are settled - note in the table above which lecture and when you are planning to be filming.

You're also welcome to film our guest speaker's presentation or another class, just don't forget to ask permission first if you want to film someone else.

Make sure as the lecture goes on that you keep the camera centered on the subject. That's going to be the speaker but may include other things: for example if the speaker is writing something or pointing to something - that should be in the video as well. Don't worry too much about making sure that the text on the projector display is readable, you'll be dealing with that later in the assignment.

Editing

In this project the main result of editing will be removing pauses that don't need to be in an online lecture. This would be realtively simple in a short video but will take a lot of work for a video this size.

That means you'll have to watch all of it and use Windows Movie Maker or iMovie (or another tool if you prefer) to delete the pauses. While you're doing this - make notes of times where in the video you'll want to insert events (see the Webpage/Content section below), you'll save yourself some time that way.

If you recorded audio separately - you will want to add the audio track and sync it with the original video before you make any changes to the video, otherwise it will take way too much effort to add the audio later.

Webpage

Same as for assignment 1 - you will need to find a template for your page so that the result looks professional. Don't forget to set the titles correctly and remove links that you aren't using.

On the index page you should have:

• The team number and all the team members' names.
• Where you got the website template.
• Links to any code samples written by someone else that you used in the assignment. You may use online resources or Chris's demo code from here, but you have to be very clear which code you didn't write yourself or else it's plagiarism.

On the video page there will be a title, the name of the presenter, a short description of the lecture, and two main components:

1. The video itself, in an HTML5 video tag. Have the controls showing but don't start playing it automatically.
2. Next to it (probably to the right, though I'll leave that detail to you, as long as it works it's good) you'll need a "Content" area, where you'll show the slides associated with the lecture.

Video

This time you have to make sure your video works not only in Firefox but also in IE. Just the latest versions. That means your video will have to be in two formats. Please do test it on both browsers.

Obviously this only applies to the final, edited video, not the original one you filmed.

Space is a very important consideration. Though you should be filming at the highest quality your camera and storage space allows - that will be too much for real-time video on the web. Assume a client download speed of 300kbps, and calculate how much space that means your video can take, based on how long it is.

You don't want to have bad quality though. So you should have a native size at least 640 pixels wide and make sure you can clearly see the speaker's face.

Content

Whatever the presenter is showing on the projector should be very well visible in your webpage. There's no way to film that with a regular camera. You could have a screen recording or a specialised device to do this, but we have another, better option.

We're going to use Popcorn.js to associate content with certain times in the video. That means you will need screenshots of slides that the speaker used. You can use LibreOffice to export a slideshow as PDF and then use another tool to make an image out of each slide. If the speaker is showing a webpage - instead of showing a screenshot of the webpage you should load the webpage itself in the content div.

The content should appear when it becomes relevant (typically when the speaker switches to that slide/webpage) and dissapear when it's no longer needed.

You should have at least 15 events for your lecture. If for some reason you filmed someone who didn't have slides or webpages to show - you can replace them with source code they were showing or what you think would be useful reference webpages related to the presentation.

Submission

Progress Report

In week 10 (the week before the assignment is due) your entire team has to meet with me and show the status of the project. Not a standup presentation, but just a chat to make sure you're on track to completing everything on time.

Most importantly:

Final Submission

Test your project in Firefox and Internet explorer. Since we don't have a place to host such large files - you'll have to submit the assignment on a CD or DVD. It will contain:

- Your webpage, fully working. - The original, unmodified video, inside a folder called "raw".