Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
265 lines (187 sloc) 10.5 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">
<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="span5">
<img src="img/story/storycamp_logo.jpg" class="frontlogo">
</div>
<div class="span6 story-detail">
<h1>Exploring Web-Native storytelling</h1>
<p class="toppad">Story Camp is a free online learning lab where learners can connect live with high profile guest speakers, engage in creative learning activities, and share their progress with others. The <a href="https://wiki.mozilla.org/Popcorn_Story_Camp">summer 2012 class</a> is already enrolled, but you can follow along at home.</p>
<p>Popcorn Story Camp starts with a <a href="cinema.html">six chapter toolkit</a> that contains videos, projects, templates, visuals and readings that will walk you through the process of creating a web native film. By the end you'll be ready to start hacking your own projects.</p>
<p><a class="btn btn-success btn-larger" href="cinema.html">Check It Out &gt;</a></p>
</div>
</div>
<!--End Story Camp Header-->
<hr>
<div class="row-fluid toppad">
<div class="span6">
<h2>Featured projects</h2>
</div>
<div class="span6">
<h2>What's new?</h2>
</div>
<!--End Small Titles-->
<div class="span5 toppad">
<div class="row">
<div class="span6">
<div>
<a href="http://bavc.org/historyinthesestreets" class="thumbnail-front"><img src="img/story/history.jpg" alt=""> </a>
<h5 class="toppad"><a href="http://bavc.org/historyinthesestreets">History in These Streets</a></h5>
<p class="beta">created by <a href="http://bavc.org">BAVC</a></p>
<p class="project-desc">A hybrid walking tour / oral history project using Popcorn.</p>
</div>
</div>
<div class="span6">
<div>
<a href="http://bavc.org/cultivatingcommunity" class="thumbnail-front"><img src="img/story/cultivating.jpg" alt=""> </a>
<h5 class="toppad"><a href="http://bavc.org/cultivatingcommunity">Cultivating Community</a></h5>
<p class="beta">created by <a href="http://bavc.org">BAVC</a></p>
<p class="project-desc">A look at urban gardening in West Oakland, using maps and project b-roll.</p>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div>
<a href="http://bavc.org/creativegrowth" class="thumbnail-front"> <img src="img/story/creative.jpg" alt=""> </a>
<h5 class="toppad"><a href="http://bavc.org/creativegrowth">Creative Growth</a></h5>
<p class="beta">created by <a href="http://bavc.org">BAVC</a></p>
<p class="project-desc">Answer some questions about what inspires you to customize your viewing.</p>
</div>
</div>
<div class="span6">
<div>
<a href="http://www.visionsofstudents.org/" class="thumbnail-front"> <img src="img/story/vost.jpg" alt=""> </a>
<h5 class="toppad"><a href="http://www.visionsofstudents.org/">Visions of Students Today</a></h5>
<p class="beta">created by <a href="#">this guy</a></p>
<p class="project-desc">Collage video remix shows student perspectives on modern education</p>
</div>
</div>
</div>
</div>
<!--End Left-Mid section-->
<div class="span6 pull-right toppad" style="float:right !important; margin-left: 0px !important">
<div class="well">
<h3 class="toppad"><a href="http://www.zythepsary.com/techie/storycamp-starts-its-countdown/">Story Camp Starts its Countdown</a></h3><br>
<h4>by Laura Hilliger</h4> /
<h5>June 5th</h5>
<p class="project-desc">Storycamp is shaping up to be one awesome program for everyone involved... [<a href="http://www.zythepsary.com/techie/storycamp-starts-its-countdown/">read</a>] </p>
</div>
<div class="well">
<h3 class="toppad"><a href="http://www.zerodivide.org/bavc/web_made_movies">Web Made Movies</a></h3><br>
<h4>Zero Divide</h4> /
<h5>July 2011</h5>
<p class="project-desc">ZeroDivide teams up with BAVC and Mozilla to explore the possibilities of web-native filmmaking to help the internet find its own storytelling voice... [<a href="http://www.zerodivide.org/bavc/web_made_movies">read</a>]</p>
</div>
<div class="well">
<h3 class="toppad"><a href="http://www.benmoskowitz.com/?p=265">Web-native Projects: An Update on BAVC/Mozilla Collaboration</a> </h3><br>
<h4>by Ben Moskowitz</h4> /
<h5>July 2011</h5>
<p class="project-desc">This year, Mozilla has been working with The Factory youth media program at the Bay Area Video Coalition (BAVC)... [<a href="http://www.benmoskowitz.com/?p=265">read</a>]</p>
</div>
<p class="pull-right"><a href="http://twitter.com/#!/search/storycamp">Read about #StoryCamp on Twitter...</a></p>
</div>
<!--End Right-Mid section-->
</div>
<div class="row toppad">
<div class="span12">
<h2>Summer 2012 participating organizations</h2>
<div>
</div>
<div class="row toppad well">
<div class="span2">
<a class="SC_logos" href="http://bavc.org/" target="_blank"><img src="img/story/partner/bavc.gif" /></a>
<a class="SC_logos" href="http://alaskateenmedia.org/" target="_blank"> <img src="img/story/partner/atmilogo.png"></a>
<a class="SC_logos" href="http://blackgirlscode.com/" target="_blank"> <img src="img/story/partner/bgcodelogo.png"></a>
<a class="SC_logos" href="http://cmap.tv/" target="_blank"> <img src="img/story/partner/cmap.jpg" /></a>
<a class="SC_logos" href="http://www.digidove.org/" target="_blank"> <img src="img/story/partner/digidovelogo.png"></a>
</div>
<div class="span2">
<a class="SC_logos" href="http://freespiritmedia.org/" target="_blank"> <img src="img/story/partner/freespiritmedia.jpg" /></a>
<a class="SC_logos" href="http://explorecreateshare.org/" target="_blank"> <img src="img/story/partner/hive.png" /></a>
<a class="SC_logos" href="http://hollywoodtheatre.org/" target="_blank"> <img src="img/story/partner/hollywoodtheatre.png" /></a>
<a class="SC_logos" href="http://clubhousebeat.org/" target="_blank"> <img src="img/story/partner/clubhouselogo.png"></a>
<a class="SC_logos" href="http://www.thelampnyc.org/" target="_blank"> <img src="img/story/partner/lamp_logo.gif"></a>
</div>
<div class="span2">
<a class="SC_logos" href="http://marz.inkpeople.org/" target="_blank"> <img src="img/story/partner/marzprojectlogo.gif"></a>
<a class="SC_logos" href="http://mediaarts.org/" target="_blank"> <img src="img/story/partner/mediaarts.jpg" /></a>
<a class="SC_logos" href="http://metroeast.org/" target="_blank"> <img src="img/story/partner/metroeast.gif" /></a>
<a class="SC_logos" href="http://muralarts.org/" target="_blank"> <img src="img/story/partner/muralarts.png" /></a>
<a class="SC_logos" href="http://northamptontv.org/" target="_blank"> <img src="img/story/partner/northamptontv.png" /></a>
</div>
<div class="span2">
<a class="SC_logos" href="http://facebook.com/onkwest" target="_blank"> <img src="img/story/partner/kwestlogo.png"></a>
<a class="SC_logos" href="http://openmediafoundation.org/" target="_blank"> <img src="img/story/partner/openmediafoundation.png" /></a>
<a class="SC_logos" href="http://pcmtv.org/" target="_blank"> <img src="img/story/partner/pcmtv.jpg" /></a>
<a class="SC_logos" href="http://peoplesproductionhouse.org/" target="_blank"> <img src="img/story/partner/peoplesproductionhouse.jpg" /></a>
<a class="SC_logos" href="http://saysi.org/" target="_blank"> <img src="img/story/partner/saysi.jpg" /></a>
</div>
<div class="span2">
<a class="SC_logos" href="http://spyhop.org/" target="_blank"> <img src="img/story/partner/spyhop.png" /></a>
<a class="SC_logos" href="http://www.theknowfresno.org/" target="_blank"> <img src="img/story/partner/theknowlogo.png"></a>
<a class="SC_logos" href="http://www.venicearts.org/" target="_blank"> <img src="img/story/partner/veniceartslogo.png"></a>
<a class="SC_logos" href="http://youthradio.org/" target="_blank"> <img src="img/story/partner/youthradio.png" /></a>
<a class="SC_logos" href="http://seattleymca.org/" target="_blank"> <img src="img/story/partner/seattleymca.gif" /></a>
<a class="SC_logos" href="http://youthmediaseattle.org/" target="_blank"><img src="img/story/partner/youthmediaseattle.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div id="footer">
<div class="constrained">
<h2><img src="img/footer_logo.png" alt="Mozilla Webmaker" width="129" height="39"></h2>
<div class="col">
<h3>About</h3>
<ul>
<li><a href="#" about="" us<="" a=""></a></li><a href="#" about="" us<="" a="">
</a><li><a href="#" about="" us<="" a=""></a><a href="mailto:joinmozilla@mozilla.org">Contact Us</a></li>
<li><a href="http://www.mozilla.org/en-US/privacy-policy.html">Privacy Policy</a></li>
<li><a href="http://www.mozilla.org/en-US/about/legal.html">Legal Notices</a></li>
</ul>
</div>
<div class="col">
<h3>Connect with Us</h3>
<ul>
<li><a href="http://twitter.com/mozilla/">Twitter</a></li>
<li><a href="https://www.facebook.com/mozilla/">Facebook</a></li>
</ul>
</div>
<div class="col">
<h3>Make Something!</h3>
<ul>
<li><a href="https://webmaker.org/en-US/events/">Events</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body></html>