Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

307 lines (272 sloc) 11.059 kb
<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">
<style type="text/css">
.sidebar-nav {
padding: 9px 0;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- 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">
</head>
<body>
<div class="container">
<!--Story Camp Header-->
<div class="row well">
<div class="span4 collab">
<a href="index.html"><img src="img/story/storycamp_logo.png" class="leftpad sc-banner-logo"> </a>
<br>
<div class="bavc-credit">
created in collaboration with <a href="http://bavc.org/" target="_blank"><img src="img/story/partner/smallbavc.gif" width="50px" /></a>
</div>
</div>
<div class="span7">
<h2>Web Native Storytelling</h2><br>
<h5>What does it mean to tell a web native story?</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>
</div>
</div>
<!--End Story Camp Header-->
<hr>
<!--Start Chapter Nav-->
<div class="SC_cinema_left">
<ul class="navList">
<li>
<h1>Introduction</h1>
<a href="cinema.html"> <img src="img/story/chapter01.png"> </a></li>
<li>
<h1>History of Media</h1>
<a href="cinema2.html"> <img src="img/story/chapter02.png"></a></li>
<li>
<h1>Remix</h1>
<a href="cinema3.html"> <img src="img/story/chapter03.png"></a></li>
<li>
<h1>Ways of the Web</h1>
<a href="cinema4.html"> <img src="img/story/chapter04.png"></a></li>
<li class="active-chapter">
<h1>Web Native Storytelling</h1>
<a href="#"> <img src="img/story/chapter05.png"></a></li>
<li >
<h1>Web Native Planning</h1>
<a href="cinema6.html"> <img src="img/story/chapter06.png"></a></li>
</ul>
</div>
<!--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/episode5.jpg"
data-setup="{}">
<source src="http://videos-origin.mozilla.org/serv/webmademovies/storycamp/storycamp_episode5.mp4" type='video/mp4'>
<source src="http://videos-origin.mozilla.org/serv/webmademovies/storycamp/storycamp_episode5.webm" type='video/webm'>
</video>
<div id="pop-container"></div>
</div>
<br>
<!--extra content-->
<div style="display:block">
<h2>Week Five Projects</h2>
<!-- teacher resources -->
<div class="pull-right">
<a class="btn btn-resource" data-toggle="modal" href="#05modal01">Week Five: Assignments</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#05modal02">DIY Report the News</a> <br>
</div>
<!-- activity resources -->
<ul class="thumbnails">
<li>
<div class="thumbnail coming-soon"> <a href="#"> <img src="img/story/webinar_thumb05.png" alt=""> </a>
<h4>Chat w Anita Sarkeesian</h4><br>
<h4><em>check back soon!</em>
</div>
</li>
<li>
<div class="thumbnail"> <a href="http://maker.mozillapopcorn.org/templates/supported/newscaster"> <img src="img/story/title_newscast_small.png" height="116px" alt=""> </a>
<h4>Report the News</h4>
</div>
</li>
</ul>
</div>
<!-- modal content -->
<div id="05modal01" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>Week Five: Web Native Storytelling</h2>
</div>
<div class="modal-body">
<h3>Assignments</h3>
<p>
<h4>1: Watch the “Week 5: Web Native Storytelling” curriculum video and explore the pop up resources in the video</h4></p>
<p>* Note this week’s video has many examples</p>
<h4>2: Individual Blogpost</h4>
<p> <strong>Tool:</strong> Your personal website, Tumblr, Wordpress, Blogger, etc.</p>
<p> Write a blog post on the week five guest speaker.</p>
<h4>3: Report the News using the Newscast Template</h4>
<p> <strong>Tool:</strong> Popcorn</p>
<p>This popcorn template is an example of how a news report could be delivered differently when it is connected to the web - the template allows you to pull in live data and stories.</p>
<h4>4: Continue Brainstorming your Project</h4>
<p>Nuances of your project likely changed after seeing the possibilities of Web Native Storytelling and gathering feedback from other groups. Iterate pieces and parts of your project with your group. Make new plans, change designs, push yourselves to make your project better.</p>
</div>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
</div>
<div id="05modal02" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>DIY Report the News</h2>
</div>
<div class="modal-body">
<h3>DIY Report the News</h3><br/>
Add lower thirds and extra video footage to create a newscast about any topic you choose.
<ol>
<li>Find or record a video you would like to use for your Newscast. If you create your own video, upload it to YouTube. Once you’ve found or made something to work with, open the <a href="http://maker.mozillapopcorn.org/templates/supported/newscaster">Newscaster template</a> in your browser
</li>
<li>Click the Edit Source button in the upper left-hand corner of the video and change the URL.
</li>
<li>Double Click the text event located on the timeline and change the text to “A Report by:” with your name.
</li>
<li>Double Click the title card event on the timeline. Change the text and the timing if you prefer. Click done.
</li>
<li>Double Click the photo event and switch out the image. Add an image by dragging it from your desktop or entering a URL. You can resize the image by entering a new value in the width box or by clicking and dragging in the viewport. Click done when you are finished.</li>
<li>Change the text of the Zoink event and reposition it.
</li>
<li>Keep adding events to the timeline. Experiment with the mediaspawner and shrink events. Double click events on the timeline to change that event’s settings.
</li>
<li>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 mozillapopcorn.org by clicking the “save” button.
</li>
<li>Open your code in a Text Editor and change the logo and cube from KNN Report to whatever you choose. Look for “KNN News” in the code and switch out the text.
</li>
<li>Share! Iterate your project based on feedback you receive.
</li>
</ol>
</div>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
</div>
</div>
<!--end extra content-->
</div>
<!--End Week 1 Content-->
</div>
<!-- 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">(function(){
var popcorn = Popcorn( '#my_video_1_html5_api');
popcorn.pop({
"start": 22.11,
"end": 25.86,
"text": "Watch \"History In These Streets\", created by students at BAVC",
"link": "http://bavc.org/sites/live/files/factory/historyinthestreets/index.html",
"top": "70%",
"left": "3%",
"target": "pop-container",
"icon": "pop-images/eye.png"
});
popcorn.pop({
"start": 43.88,
"end": 47.74,
"text": "\"Jaws\" - (1975)",
"link": "http://www.imdb.com/title/tt0073195/",
"top": "83%",
"left": "14%",
"target": "pop-container"
});
popcorn.pop({
"start": 49.13,
"end": 50.71,
"text": "\"Memento\" (2000)",
"link": "http://www.imdb.com/title/tt0209144/",
"top": "78%",
"left": "9%",
"target": "pop-container"
});
popcorn.pop({
"start": 52.18,
"end": 54.59,
"text": "Watch \"Never Mind The Bullets\", a web comic",
"link": "http://www.nevermindthebullets.com/?fbid=PSi5OxNAE0Y",
"top": "60%",
"left": "12%",
"target": "pop-container",
"icon": "pop-images/skull.png"
});
popcorn.pop({
"start": 81.2,
"end": 86.47,
"text": "Watch \"Take This Lollipop\"",
"link": "http://www.takethislollipop.com/",
"top": "83%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/tv.png"
});
popcorn.pop({
"start": 104.99,
"end": 109.95,
"text": "Watch \"The Wilderness Downtown\"",
"link": "http://thewildernessdowntown.com/",
"top": "73%",
"left": "5%",
"target": "pop-container",
"icon": "pop-images/eye.png"
});
popcorn.pop({
"start": 129.78,
"end": 135.42,
"text": "Watch \"Out My Window\"",
"link": "http://interactive.nfb.ca/#/outmywindow",
"top": "75%",
"left": "10%",
"target": "pop-container",
"icon": "pop-images/eye.png"
});
popcorn.pop({
"start": 153.2,
"end": 157.25,
"text": "Watch \"Pine Point\"",
"link": "http://interactive.nfb.ca/#/pinepoint",
"top": "77%",
"left": "67%",
"target": "pop-container",
"icon": "pop-images/eye.png"
});
popcorn.pop({
"start": 267.95,
"end": 272.67,
"text": "Read About Stan Brakhage",
"link": "http://en.wikipedia.org/wiki/Stan_Brakhage",
"top": "77%",
"left": "18%",
"target": "pop-container",
"icon": "pop-images/info.png"
});
popcorn.pop({
"start": 283.99,
"end": 287.63,
"text": "Listen to Girl Talk",
"link": "http://illegal-art.net/girltalk/",
"top": "73%",
"left": "71%",
"target": "pop-container",
"icon": "pop-images/music.png"
});
return popcorn;
}());</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.