Dare 2 Be Digital/

From MozillaWiki
Jump to: navigation, search

Live Action

It's Saturday! The link to the main page the attendees will be working from is:


Depending on what time it is, you can go to workshop 1,2, or 3 accordingly and you should see some videos up for translation.

I'll be monitoring #womoz in irc (irc.mozilla.org) in case there are questions or issues.

General Information

Date: Feb 12th, 2010

We've got an exciting day coming up on February 12th where Mozilla will be running a video booth at the Dare2BDigital conference for young women 13-16 to spend the day engaging with technology and being exposed to the variety of possibilities that exist for someone who pursues an education in STEM fields.

Here in Mountain View, several folks have volunteered to help out on site: Rainer and Marcia will be handling the cameras & interview station where we will capture participants, parents & speakers discussing their interests and areas of knowledge. At the same time Lukas, William, and (volunteer needed! Enter your name here) will be teaching 30 girls (10 per session over 3 sessions) how HTML5 and open video lets you run your own show - no YouTube or Flash needed!

The key components of this tutorial will be demonstrating the Miro Converter, Universal Subtitles, and a little bit of Popcorn.js where we will be having the girls work on doing subtitles for clips of footage shot during the day to share online and adding some dynamic content to the media.

We're trying to organize having a few localizers available and online during the workshop times to do translating nearly simultaneously in order to showcase the power of universal subtitles. Please sign up below if you are interested.

On Site Volunteers

Workshop/Tutorial on HTML5 Open Video

  • Lukas
  • WilliamR
  • Jinghua

Video booth:

  • Rainer
  • Marcia

Remote Helpers

Char Hackett, Closed captioning

PR, Organizing localization, enthusiasm

  • Mary
  • Stormy Peters


We need localizers to stop in and translate some short demo videos in order to showcase the power of the Universal Subtitles project to the attendees. If you are available on the day, please sign up here so I know how to find you and also introduce you during the workshops.

  • Stormy Peters, I hope to help transcribe. Probably during the first session.

3 workshops

Date: Feb 12th, 2010 (All times are PST, UTC -8)

10:15am - 11:30am

  • Janet + Katerina Dragojevic (Croatian)

12:30pm - 1:45pm

  • Ruth Braid & Viktor Godard

1:45pm - 3:00pm

  • Euge Ortiz (Spanish)

Notes for next time

  • a way for people to know what has been subtitled and what has not
  • avoid lockout of participants, wait for "English" or something other than "Subtitle Me"
  • have ftp & urls pre-setup in the laptops
  • allow people to edit by number and language so if a video is tied up in one language, someone can still edit in another lang.
  • something simpler than the wiki for logging into IRC. Consider that many volunteers may not be used to command line interfaces and might just not volunteer.
  • Question: would it make sense instead of Coda to use any of the following multi-platform Mozilla based web editors: KompoZer, BlueGriffon, and SeaMonkey?

Suggested Steps for Video Workshop Participants

Video Workshop

Steps for participants:

  1. Create a short video where you introduce yourself and respond to 3 questions that a friend will ask you. Briefly rehearse the questions before taking the video.
  2. Download video locally to your Mac, you will have file called something like "129283.mov", remember the file name, you will needed in the next step.
  3. Open with QuickTime
    1. click on "File" - "Save for web"
    2. check only "export version for: iPhone" (this will reduce the size of the video, so it's easy to see on the web).
    3. click on save, a folder with the video file name will be created on the desktop. Open the folder and look for the your modified video, you will recognize it, because it will have a ".m4v" file name extension.
    4. The name will look something like "129283 - iPhone.m4v". Rename it with your name but preserve the ".m4v file name extension so it looks something like "my_name_here.m4v" and drag it to the desktop. (note, to rename a file in Mac, press the Ctrl key and keep it press as you do one click with the mouse/pad, then go to "get info" on the resulting menu, change the file name as needed, and close the menu. Your file will retain the new name).
  4. Open "Miro Video Converter"
    1. Drag your "my_name_here.m4v" video to Miro, then click on the drop-down menu in Miro and select "WebM" video format, then click "convert". You will see a new file on the desktop named something like this: "my_name_here.webm"
    2. Drag your "my_name_here.m4v" video to Miro, then click on the drop-down menu in Miro and select "Theora" video format, then click "convert". You will see a new file on the desktop named something like this: "my_name_here.ogv". (note: Rename the file extension from ".ogv" to ".ogg", the resulting file should look something like: "my_name_here.ogg").
  5. Open your FTP client (in this case we use "Cyberduck")
    1. click on "Open Connection"; select FTP server, Server name: avnerd.tv , Password: [ask the instructor for the password]
    2. drag your "my_name_here.webm" and "my_name_here.ogg" videos to the "/videos" directory.
  6. Open your Web Editor (in this case "Coda")
    1. click on "add site"; Site name: avnerd.tv, Password: [ask the instructor for the password]
    2. change directory to your workshop number and your laptop number, for example "/w3/laptop4"
    3. there will be a preloaded template with the code needed to present your video and the subtitles at the http://avnerd.tv/d2bd/ website. Note that the Universal Subtitles enabling script is inserted at the "head" section of your html5 code, just after "<title>".
  7. Edit the template by adding the names of your videos inside the "<video ...>" tag, at the two "<source src=....>" sections, so it looks something like:
    1. For Theora: <source src="../videos/my_name_here.ogg" type="video/ogg">
    2. For WebM: <source src="../videos/my_name_here.webm" type="video/webm">
  8. Open your web browser (preferable Firefox or Chrome) and go to http//avnerd.tv/d2bd/live/ , select your workshop number, then select your laptop number for example: avnerd.tv/d2bd/live/w1/laptop6.html
  9. click on the "Universal Subtitles" widget at the lower left corner of the video, and select "subtitle", from English to English.
    1. The first step is to write the subtitles. Watch the instructional video and proceed to write subtitles for you video.
    2. The second step is to sync the audio on the video with your subtitles. Watch the instructional video and proceed to sync audio with subtitles.
    3. The third step is to review and add annotations if needed, again, watch the instructional video and proceed.
    4. The fourth step (and the most important one) is to save your work (if you don't have a Universal Subtitles account, you may have to create one).
  10. You are done! Open another tab on your web browser, click on the "refresh page" icon, and play your video. Enjoy!


  • Cyberduck is an open source FTP and SFTP, WebDAV, Cloud Files, Google Docs, and Amazon S3 client for Mac OS X and Windows. Check full description here and download here.
  • Coda is a commercial and proprietary web development application for Mac OS X, developed by Panic. Excellent product. It can be tested free for 14 days. Check full description here and download here.
  • We could try using Aptana which is open source.