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).
Contents
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 row per team).
| # | Members | Film Who/When | Progress report |
|---|---|---|---|
| 0 | Example1, Example2, Example3 | Tom / 12 Mar 13:30. Done. | 14 Mar |
| 1 | Meet Godhani, Husain Fazal, Robert Stanica, Preshoth Paramalingam | Mehmet / 7 Mar 13:30. Done. | |
| 2 | Vince Lee, Alex Craig, Mark Aronin | Chris / 7 Mar 14:25. Done. | 14 Mar |
| 3 | Neil Guzman, Tudor Minea, Frank Panico | Mehmet / 7 Mar 13:30. Done | |
| 4 | Sasha Atijas, Jonathan Cheung, Barath Kumar, Rubinder Singh | Tom / 14 Mar 11:40. | |
| 5 | Michael Veis, Nitin Prakash, Shajinth Pathmakulaseelan, Krishanthan Lingeswaran | Chris / 7 Mar 14:25. Done. | 14 Mar |
| 6 | Natalia Levkevitch, Radney Alquiza | Chris / 7 Mar 14:25. Done. | |
| 7 | Aakash Dhawan, Chad Arthur, Nan Zhaou | Peter Liu / 7 Mar 15:20. Done. | |
| 8 | Ali Shoja, Melvin Berena, Jeff Lee, Gagandeep | Mcintyre / 12 Mar 13:30 | |
| 9 | Ari Keleshian, Simon de Almeida | Sumit Bhatia / 12 March @ 12:40 | |
| 10 | Dale Karp, Saad Mohammad, Saul Grybas | Tom / 12 Mar 11:40 T4042. |
13 Mar Done |
| 11 | Travis Cole, Anh Viet, Hunter Jansen | Tom / 14 Mar 13:30 T2107 | |
| 12 | Hye Young Choi, Andrew Li, Leo Turalba | Chris / 8 Mar 09:00. Done. |
13 Mar Done |
| 13 | Sydney Collins, Hadi Alshakhori | Tom / 14 Mar 15:20 T4042. |
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.
- A list of the equipment you used.
- 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:
- The video itself, in an HTML5 video tag. Have the controls showing but don't start playing it automatically.
- 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:
- What equipment you used, and where you got it from.
- Whether you had any issues doing the recording.
- Show me the raw recording you've made.
- Tell me your plan for doing the editing.
- Tell me the plan for creating the content section.
This progress report will be worth 20% of the assignment.
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".
Please write "BTC640/PRO608 Asg 2 Team X" on the disk.
