Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
337 lines (303 sloc) 17.3 KB
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Mozilla Popcorn Story Camp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/popcorn.css" rel="stylesheet">
<link href="css/story.css" rel="stylesheet">
<link href="css/video-js.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src=""></script>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<div class="container">
<!--Story Camp Header-->
<div class="row well sc-banner">
<div class="span4 collab">
<a href="index.html"><img src="img/story/storycamp_logo.png" class="leftpad sc-banner-logo"> </a>
<div class="bavc-credit">
created in collaboration with <a href="" target="_blank"><img src="img/story/partner/smallbavc.gif" width="50px" /></a>
<div class="span7">
<h5>Welcome to StoryCamp!</h5>
<a class="btn pull-right download-btn" href="docs/popcorn_teacher_guide.pdf"><i class="icon-download-alt"></i>Get teachers' guide [PDF]</a>
<!--End Story Camp Header-->
<!--Start Chapter Nav-->
<div class="SC_cinema_left">
<ul class="navList">
<li class="active-chapter">
<a href="#"> <img src="img/story/chapter01.png"> </a></li>
<h1>History of Media</h1>
<a href="cinema2.html"> <img src="img/story/chapter02.png"></a></li>
<a href="cinema3.html"> <img src="img/story/chapter03.png"></a></li>
<h1>Ways of the Web</h1>
<a href="cinema4.html"> <img src="img/story/chapter04.png"></a></li>
<h1>Web Native Storytelling</h1>
<a href="cinema5.html"> <img src="img/story/chapter05.png"></a></li>
<h1>Web Native Planning</h1>
<a href="cinema6.html"> <img src="img/story/chapter06.png"></a></li>
<!--End Chapter Nav-->
<!--Week 1 Content-->
<div class="SC_cinema_right well">
<div id="video-container">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="768" height="480" poster="img/story/episode1.jpg"
<source src="" type='video/mp4'>
<source src="" type='video/webm'>
<div id="pop-container"></div>
<!--extra content-->
<div style="display:block">
<h2>Week One Resources</h2>
<!-- teacher resources -->
<div class="pull-right">
<a class="btn btn-resource" data-toggle="modal" href="#01modal01">Week One Assignments</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#01modalPopRef">Popcorn Reference Guide</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#01modal02">Peer Assessment Worksheet</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#01modal03">DIY: Make a MadLib</a><br>
<!-- activity resources -->
<ul class="thumbnails">
<div class="thumbnail"> <a href=""> <img src="img/story/webinar_thumb01.png" alt=""> </a>
<h4>Chat with Damian Kulash</h4>
<div class="thumbnail"> <a href=""> <img src="img/story/title_madlib_small.png" height="116px" alt=""> </a>
<h4>Make a Mad Lib Story</h4>
<!-- modal content -->
<div id="01modal01" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>Week One: Introduction</h2>
<div class="modal-body">
<h3>Week One Assignments</h3>
<h4>1: Watch the "Episode 1: Introduction video" and explore the pop up links in the video</h4>
<h4>2: Brainstorm a Project Synopsis</h4>
<p>The Web Native Film should critically and creatively explore a story.<em> An
example might be your local organic farm, or the work of an area charity.</em> Work with your group to create a paragraph description of what you would like to work on over the summer.</p>
<h4>3: Prepare your supporting site</h4>
<p>Go to <a href="" target="_blank"></a> and create a new blog. Make sure that each group member has the ability to log in. Discuss and decide on a Tumblr template that you want to use. We suggest using tumblr for its ease of use (, but use whatever blogging platform makes you most comfortable. If you have an existing blog, feel free to use that. The supporting site should:</p>
<li>showcase the film and the process through which the film was created </li>
<li>introduce each member of your group </li>
<li>introduce the subject of the film, <em>Example: "Supporting the New Generation of Organic Farmers"</em></li>
<li>present, support and justify the project narrative explored in the film </li>
<li>give detailed information on each members perception of this theme AND regular updates (weekly) on the
creation process through blog posts that use examples, videos, demos and remixes. </li>
<li>highlight underlying concepts that connect these perceptions </li>
<li>allow easy social sharing and commenting </li>
<li>use video, text, graphics, photographs, animations and other forms of media that are self made or have a
Creative Commons license and properly attributes all sources.</li>
<h4>4: Write a Blog Post</h4>
<p> <strong>Tool:</strong> Your personal website, Tumblr, Wordpress, Blogger, etc.</p>
<p> Write a blog post on the week one guest speaker and initial thoughts on the project.</p>
<h4>5: Make a Procedural Story with the Mad Libs Template</h4>
<p> <strong>Tool:</strong> Popcorn</p>
<p>The "Robots In Everytown" template is meant to give an introduction to the concept of "procedural storytelling". The template allows you to change the maps, images and voices of the robots within the story. Discuss how these different user-generated options change the meaning and tone of the piece. Consider whether the video they create could be made in any medium other than the web. Why or why not?</p>
<h4>6: Ice Breaker Activity</h4>
<p> <strong>Tool:</strong> Big Blue Button, Google Hangouts, Voxli, Skype, etc</p>
<p> Just hang out with your group and have a social hour over video chat. Try Google Hangouts or use Skype Conferencing.
Or meet up in person for an hour. We'll do an informal report-back on your social hour next week (i.e., we'll ask you
if it was fun :)</p>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<div id="01modalPopRef" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>Popcorn Reference</h2>
<div class="modal-body">
<div class="modalFloaterRight">
<h4>Keyboard Shortcuts</h4>
<p><strong>Spacebar</strong> allows you to Play and
Pause the video playback. Using this
shortcut will also update the timeline
view if the playhead gets lost.</p>
<p> If you click an event and hold down <strong>SHIFT</strong>, then click another event, you
can move both events on the timeline
in sync using the <strong>arrow keys.</strong></p>
<p> Using the <strong>up/down arrow keys</strong> allows
you to move an event to a different
<p> Click on an event and hit the <strong>delete</strong> key to remove it from the timeline.</p>
<p>A template provides a visual layout and is usually designed for a specific
kind of project. Each template includes only specific plug-ins to keep the
JavaScript as lightweight as possible. Clicking the +Popcorn Button at the
bottom right of the interface, underneath the “My Events” panel, allows you
to add plug-ins that are not specific to the template you’ve selected. You
have to drag the plug-in you’d like to use and drop it in the My Events tray
to add it to your template.</p>
<p>You can’t change your template after you’ve started a project, so choose carefully.
When you click “create,” your project will be created, and you’ll enter
the editor view.</p>
<p> An event is a marker that says “do something” at a specific point in your
film. To add an event to the timeline, you drag and drop the text from
the My Events box to the Timeline! To delete an event from the Timeline,
you click the event and hit the Delete key on your keyboard.</p>
<p> Popcorn has a great many plug-ins which allow you to pull events into your
timeline. Because there are many plug-ins and templates, there are infinite
variations and possibilities. No two Popcorn projects will be the same. But
the authoring pattern is always the same: <strong>choose a plug-in, add it to the
timeline, and configure the event.</strong></p>
<p> A Popcorn project can have an infinite number of tracks. Tracks help you,
the creator, organize events in the way that seems most logical to you.
Maybe you want one track to visualize all the Twitter events. Or maybe you
want one track to visualize all the cat-related events. It’s up to you.
When you mouse over the name of a track, you’ll see an “X” to delete the
track. In the track editor, you can see the code for the events that you’ve
assigned to the track.</p>
<h3>Saving, Exporting and Publishing</h3>
<p> You can save your project, export the code of your project and/or publish
your project to the WWW. In the upper right hand corner of the interface
are buttons to accomplish these things. Just follow the on screen instructions
and share your masterpieces with the world! </p>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<div id="01modal02" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>Peer Assessment Worksheet</h2>
<div class="modal-body">
<p>Here are some broad topics and sample questions you can use to to think about the work of your peers:</p>
<h4>Evidence of Data Gathering</h4>
<li>How well did your peer show that he/she could gather assets (images, text, video and other data from the web) to voice his/her own opinions in a web native story?</li>
<li>How well did your peer attribute the resources he/she used? Would you be able to find those resources again?</li>
<h4>Evidence of Understanding</h4>
<li>Would you say that your peer really understood this week’s theme and why it is relevant to web native filmmaking?</li>
<li>How well did your peer explain the material in his/her own words?</li>
<h4>Evidence of Reflection and Analysis</h4>
<li>How well does your peer’s work incorporate feedback from others? Did his/her work change after sharing with and speaking with you or your other peers?</li>
<li>Would you say your peer expressed a clear opinion on his or her topic (i.e. the theme of his or her project)?
<h4>Evidence of Creativity</h4>
<li>Would you say that your peer really had a solid grasp on their topic?</li>
<li>Would you say that your peer represented another take or perspective on the topic that you had not really thought of before?</li>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<div id="01modal03" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>DIY Make a MadLib</h2>
<div class="modal-body">
<h3>DIY Make a Madlib</h3>
<p>Add vintage titles, robots speaking, comic style speech bubbles and your own special brand of silly to make a mad lib.</p>
<li>Open the <a href="">Mad Lib template</a> in your browser</li>
<li>Start by using the Robots Invade Everytown video that is pre loaded into the template or click the Edit Source button in the upper left-hand corner of the video and change the URL to the URL of the video you want to work with.</li>
<li>Double click the title event and change the title. Add other title events to new tracks and double click to change the positionings to middle title or bottom title using the style selector and target selector. If you need a new track, click the Track + button on the lower left-hand side of the interface. Don’t forget to include your name somewhere!</li>
<li>After you’ve clicked done on each of the title events, double click the Speak events on the timeline. You can change the robots speech by typing in new text. Double click to change what the robot voice says and play around with those options.</li>
<li>Center the map at second :19 to the location the robots will be invading first. Double Click to set this location and click done.</li>
<li>Edit the image event in the timeline around :25. The robots are targeting a specific person. Who is it?</li>
<li>Double Click the “Zoink” event and change the text. You can also change the bubble style. Try out different positions for your bubble. Play around with the options so that your Zoink bubble is positioned the way you like.</li>
<li>Continue adding and editing events until your video is what you want it to be. When you’re ready, click the “publish” button and copy and paste your link to save it somewhere. Then, click the “view source” button and save your code. You can also save your project on by clicking the “save” button.</li>
<li>Share with the world. Share your video link widely. Tweet your video link with the tag #AllHailRobots</li>
<li>While waiting for the invasion, iterate your project based on feedback you receive.</li>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<!--end modal content-->
<!--End Week 1 Content-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/modal.js"></script>
<script src="js/video.js"></script>
<script src="js/popcorn.js"></script>
<script src="js/popcorn.pop.js"></script>
<script type="text/javascript">
var popcorn = Popcorn( '#my_video_1_html5_api');
"start": 15.06,
"end": 18.99,
"text": "Learn about Mozilla Webmaker",
"link": "",
"top": "80%",
"left": "20%",
"target": "pop-container",
"icon": "pop-images/net.png"
"start": 56.94,
"end": 59.77,
"text": "Learn about the BAVC students experience",
"link": "",
"top": "69%",
"left": "28%",
"target": "pop-container",
"icon": "pop-images/info.png"
"start": 63.88,
"end": 67.56,
"text": "Watch a video of their experience",
"link": "",
"top": "72%",
"left": "43%",
"target": "pop-container",
"icon": "pop-images/tv.png"
return popcorn;