Permalink
Switch branches/tags
Nothing to show
Find file
ec29ee3 Aug 3, 2012
@benrito @k88hudson
251 lines (176 sloc) 10.4 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">
<!-- 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" target="_blank"><img src="img/story/history.jpg"> </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" target="_blank">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" target="_blank"><img src="img/story/cultivating.jpg"> </a>
<h5 class="toppad"><a href="http://bavc.org/cultivatingcommunity" target="_blank">Cultivating Community</a></h5>
<p class="beta">created by <a href="http://bavc.org" target="_blank">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" target="_blank"> <img src="img/story/creative.jpg" alt=""> </a>
<h5 class="toppad"><a href="http://bavc.org/creativegrowth" target="_blank">Creative Growth</a></h5>
<p class="beta">created by <a href="http://bavc.org" target="_blank">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" target="_blank"> <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://futuresoup.com/the-sights-and-sounds-of-storycamp/">The Sights and Sounds of #Storycamp</a></h3><br>
<h4>by Jacob Caggiano</h4> /
<h5>July 9th</h5>
<p class="project-desc">What happens when you show dozens of teenagers how to grab anything off YouTube...[<a href="http://futuresoup.com/the-sights-and-sounds-of-storycamp/" target="_blank">read</a>] </p>
</div>
<div class="well">
<h3 class="toppad"><a href="http://fsmpopcorn.wordpress.com/2012/07/25/taysia-whats-the-bechdel-test/">Understanding Media Literacy using the Bechdel Test</a></h3><br>
<h4>by Taysia</h4> /
<h5>July 25th</h5>
<p class="project-desc">For those of you who may have never heard of the Bechdel test, it tests the feminist quality of a movie...[<a href="http://fsmpopcorn.wordpress.com/2012/07/25/taysia-whats-the-bechdel-test/" target="_blank">read</a>] </p>
</div>
<div class="well">
<h3 class="toppad"><a href="http://bavc.org/bavc-blog/gender-remixing-legoland-stealing-snacks-mozilla">Gender Remixing in Legoland</a></h3><br>
<h4>by Zoe Banks</h4> /
<h5>July 6th</h5>
<p class="project-desc">Yesterday I had the opportunity to hear Jonathan McIntosh (of Buffy vs. Edward: Twilight Remixed video fame...[<a href="http://bavc.org/bavc-blog/gender-remixing-legoland-stealing-snacks-mozilla" target="_blank">read</a>] </p>
</div>
<p class="pull-right"><a href="http://twitter.com/#!/search/storycamp" target="_blank">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>
</body></html>