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 and Pdf.js to display the lecture in a web browser.
The 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 and pdf.js for your video
- All other web stuff as needed (CSS, HTML, maybe PHP)
As soon as you decide, add your names to the following list (one bullet per team):
- Meet Godhani, Husain Fazal, Robert Stanica, Preshoth Paramalingam
- Vince Lee, Alex Craig, Mark Aronin
- Neil Guzman, Tudor Minea, Frank Panico
- Sasha Atijas, Jonathan Cheung, Barath Kumar, Rubinder Singh
- Michael Veis, Nitin Prakash, Shajinth Pathmakulaseelan, Krishanthan Lingeswaran
- Natalia Levkevitch, Radney Alquiza
- Aakash Dhawan, Chad Arthur, Nan Zhaou
- Ali Shoja, Melvin Berena, Jeff Lee, Gagan
- Ari Keleshian, Simon de Almeida
- Dale Karp, Saad Mohammad, Saul Grybas
- Travis Cole, Anh Viet, Hunter
- Hye Young Choi, Andrew Li, Leo Turalba
- 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 will also need to use PDF.js to render PDF slides next to your video.
- 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.
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, 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
Submission
FF/IE