Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
462 lines (430 sloc) 28.1 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;
<!-- 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">
<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">
<h2>History of Media</h2><br>
<h5>How has the media landscape changed over time?</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">
<a href="cinema.html"> <img src="img/story/chapter01.png"> </a></li>
<li class="active-chapter">
<h1>History of Media</h1>
<a href="#"> <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/episode2.jpg"
<source src="" type='video/mp4'>
<source src="" type='video/webm'>
<div id="pop-container"></div>
<div style="display:block">
<h2>Week Two Resources</h2>
<!-- teacher resources -->
<div class="pull-right">
<a class="btn btn-resource" data-toggle="modal" href="#02modal01">Week Two Assignments</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#02modal02">History of Media Discussion Guide</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#02modal04">A Brief History of Storytelling</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#02modal03">DIY: Hack a Commercial</a> <br>
<!-- activity resources -->
<ul class="thumbnails">
<div class="thumbnail coming-soon"> <a href="#"> <img src="img/story/webinar_thumb02.png" alt=""> </a>
<h4>Chat with Cory Doctorow</h4><br>
<h4><em>check back soon!</em>
<div class="thumbnail"> <a href=""> <img src="img/story/title_commercial_small.png" height="116px" alt=""> </a>
<h4>Hack a Commercial</h4>
<!-- modal content -->
<div id="02modal01" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>Week Two: History of Media</h2>
<div class="modal-body">
<h3>Week Two Assignments</h3>
<h4>1: Watch the "Week 2: Media History" curriculum video and explore the pop up resources in the video</h4>
<h4>2: Read "A Brief History of Visual Storytelling"</h4>
<h4>3: Write Individual Blog post</h4>
<p> Write a blog post on the week two guest speaker, the discussion on Media History and the reading.</p>
<h4>4: Hack a Commercial using the Popup Template</h4>
<p> <strong>Tool:</strong> Popcorn</p>
<p>See the DIY activity - this activity will have learners recontextualize classic commercials from the Internet Archive using Popcorn.</p>
<h4>5: Project Management</h4>
<p> Discuss in your group:
<li>the Web Native Film and site your group will create. Decide on one and create the first version of your project
narrative. Each group member should compose a few paragraphs about the collaborative process. These
paragraphs will later form the first blog post that will be put into Tumblr. </li>
<li>what roles individual learners will play. Will some members focus on video production, while others dive into web making? </li>
<li>which tools your group will use to communicate</li>
<li>why different perspectives are valuable</li>
<li>the voice of your project (serious, humorous, formal, informal, etc)</li>
<p> Document your decisions in an online document. Write up how you came to your decisions and compose a synopsis of the discussion help over varying perspectives. Share this document with the rest of the groups. </p>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a>
<div id="02modal02" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>History of Media Discussion Guide</h2>
<div class="modal-body">
<p>Participate in a guided discussion and critical thought experiment surrounding the history of media and how specific medias altered our cultural landscape, why did this happened, why it was/is important. Take notes on the discussion.
Some stuff you can talk about with your peers:</p>
<p><img src="img/story/Gutenberg.jpg" width="200px"/> <strong>The Printing Press</strong> Before Gutenberg invented the printing press, communicating with the masses was something that only the Church or the very wealthy could do. Information was localized and it stayed localized, it wasn't copied or distributed often and there was a massive divide between the haves and have nots. Then, Martin Luther used the technology to start the Protestant Reformation....</p>
<p> Thomas Edison invented <strong>the Phonograph</strong>, instigating Mass Medium #2: Recordings.<a href="" target="_blank"> <img src="img/story/WPV_Edison_Phonograph.jpg" width="200px"/></a> Edison's invention allowed people to share information first hand, over time and across great distances. Recorded music influenced society in a great many ways. Jazz, for example, opened the doors for newly freed slaves to become entertainers and in the 60's Rock and Roll continued the "freeing" of people of color as well as women from traditional life styles. </p>
<p> <strong>Cinema</strong> expanded on recordings allowing us to both SEE and hear other people's experiences. For more detailed discussion points on cinema, see A Brief History of Storytelling.</p>
<p> <a href="" target="_blank"><img src="img/story/Radio_MARCONI_.jpg" width="200px"/></a> <strong>Radio</strong> When Marconi figured out how to transmit live messages using Morse code, he changed the way mankind related to information. It was the first time we could experience what was going on ?over there? instantaneously. The reason that the Titanic sinking had such an impact is partly because live transmits were being sent from the scene. People were able to experience the drama as it happened and it's been said that the only reason there were ANY survivors from the Titanic was because of Marconi's invention.</p>
<p> Then came <strong>Television</strong>, initially an extension of radio broadcasts, early TV was probably kind of boring. But now, we all know that TV has the power to inform us instantaneously. And to show us that in "reality" everyone has perfect hair and teeth.</p>
<p> After TV nothing happened for a while until the US Military started experimenting with distributed computer networks.
That didn't actually help out the general public much until 1989 when Tim Berner's Lee developed <strong>the
World Wide Web</strong>. Now the WWW can do everything the first 5 media forms could do:</p>
<li>Read and publish content </li>
<li>play recordings </li>
<li>watch movies </li>
<li>listen to radio </li>
<li>watch TV</li>
<p>It's true that on the Web you can find varying degrees of quality. That's because the Web is a medium where anyone can participate - the fact that you can find feature films and cat videos in the same browser is what makes this medium unique.</p>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<div id="02modal04" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>A Brief History of Storytelling</h2>
<div class="modal-body">
<h3> Introduction</h3>
<p> To understand the tremendous opportunities that the internet offers as a new storytelling medium, we need to first
begin to think about it as a new "canvas" with its own unique properties, and we need to understand how it is different
than the artistic forms of expression that have preceded it.</p>
<p> This handout provides a brief historical review of the evolution visual storytelling. It focuses specifically on how artists
took advantage of each new technological development in visual expression, but also how each development
- from painting to photography to motion pictures to video games - also dictated the kind of content that is produced.
Thinking about each art form this way will be crucial when we envision the internet as a storytelling canvas
and discuss the best-practices for web-native filmmaking.</p>
<p> Anyone who has ever tried to write a script knows that you cannot write interior thoughts in a screenplay, you can
only what we can see and hear. In a novel, you can write "Tom is hungry" - you can tell us that someone is hungry,
but in a movie you must show us that Tom is hungry: "Tom's stomach rumbles." The novel may have the advantage
over the film in sharing interior thoughts, but can written words express the grandeur of Avatar's visuals? Or express
the depths of Heath Ledger's unsettling performance as The Joker in The Dark Knight?</p>
<p> Or: Imagine you were given a pad of paper and a pencil and asked to tell a story with it. Now imagine you were
given the same pad but with a set of watercolor paints instead - don't you think the kind of story you told, and how
you told it, would be different? Now imagine your pad of paper is the internet.</p>
<h3>Cave Paintings</h3>
<p> Thirty four thousand years ago, in a large cave in
Southern France, an artist used pigment to create some
of the first known paintings. Herds of bison, charging
rhinos, leaping gazelle. The animals - some of them now
extinct - were rendered in startling detail. However, these
were not simply portraits. The animals were interacting
with one another - and interaction is story. The artist
was a storyteller. By using visual means of expression to
recount the artist's experiences at that moment in time,
we can draw a line between the caves of southern France
and the contemporary stories we see unfolding on our
computer monitors in the present day.</p>
<p><a href="" target="_blank"><img src=""/></a> There is evidence that those early painters struggled
with the limitations of their chosen "canvas" and also
found ways to take advantage of the opportunities their
unique art form provided them. Painters in the Chauvet
caves sanded down the textured walls to have a lighter,
smoother surface upon which to work, and then after the
paintings were completed they etched an outline of the
subject into the stone so that the torchlight would cast
shadows that made the image stand out. In other places, rather than try to disguise the texture or curvature of the
walls, the artists actually incorporated these qualities into their work. A jagged piece of the wall could be used to
represent fur, the sloping lines of a rock race could direct the viewer's eye to where the artist wanted them to look.</p>
<p>So what can we say made the cave wall unique as a medium for visual expression? What are its benefits as a canvas?
What are its limitations? First off, the work of art is singular - you cannot copy a cave wall. Obviously, this also
means you must go to the cave - it isn't coming to you. While this may seem like a limitation, think about the experience
of standing before something that you know is unique in the world - a building, a sculpture, even a person.
Something that can be copied is more accessible, but for that very reason it also loses some of its magic. Cave
walls are rarely smooth, so you must accommodate the textures and shape of the wall, but they are also not confined
to a specific shape the way a piece of paper or a canvas is. It can take any shape, and it is three-dimensional ?
there is freedom, and possibility, that doesn't exist in the confines of an 8.5x11 sheet of paper.</p>
<p> We could spend time discussing the evolution of painting, the advantages and disadvantages of watercolor vs. oilbased
paint, but you get the point ? each medium is unique, each has its strengths and limitations, and our images
and stories are shaped by the medium we choose to express ourselves in. Moving on!</p>
<p><img src="img/story/02_JosephNiepce.jpg"/> The first photographs were taken by a Frenchman named Joseph
Nicephore Niepce in 1827. They were called Heliographs because the
images were etched by rays of light from the sun. Later, photography
would capture an image on a celluloid material - called a negative -
that allowed for the precise duplication of images.</p>
<p> Photography was unique in many ways: it produced art that precisely
replicated the subject, unlike the subjective interpretations of painting
or drawing. It also was produced quickly - the image was captured in
a fraction of a second, and the chemical developing and printing could
be done in hours. Its speed and potential for reproduction made photography
the most important development in visual expression in centuries.</p>
<p> If the benefits of photography were its striking ability to produce what we would consider "life-like" imagery at a
remarkable speed, what were its limitations? As with painting on canvas (and perhaps because of the canvas), a
rectangular frame was quickly agreed upon by purveyors of the art. Once mass-produced cameras embraced the
aspect ratio the rectangle became the format that all photos had to adhere to. Images were also limited to black
and white expression for the first 75 years of photographic history; readily accessible color photography was introduced
to the public in 1903.</p>
<p> Perhaps most importantly, though, the photographic artist also surrendered control over the subject - a painter
could create each aspect of the image as she desired, while a photographer is "stuck" with using what actually exists
in the world. The photograph sacrificed poetry for authenticity.</p>
<h3>Motion Pictures &amp; Television</h3>
<p><img src="img/story/muybridge.jpg" width="200px"/> The first motion picture device is credited to Eadweard
Muybridge, who used a series of cameras to study the
motion of horses in 1877.</p>
<p> Movie cameras built upon the still-image camera's capacity
for capturing what is perceived as reality. The combination
of photographic fidelity with seamlessly moving
images, along with the invention of the magnetic audio
track and the development of a system of editing by early American filmmaking pioneers like Thomas Edison and D.W, Griffith, resulted in an art form that viewers could engage
on a level of near-hypnosis.</p>
<p> At first, however, storytelling wasn't considered the domain of the motion picture camera, Early films were basically
long-format still photographs - footage of a baby eating, a train arriving at a station, people leaving work after a long
day at the factory. In the same way that we see the internet as simply an improved version of other media (better
than mail, better than a yellow pages, better than a Thomas Brothers, etc), we first envisioned the motion picture
camera as just a better version of the still camera, rather than its own unique means of artistic expression.
What we would consider the "grammar" of film language - close up shots, reverse shots, continuity editing, special
effects ? began to emerge at the turn of the century and by the 1914 had crystallized into something we would
recognize in today's theatres. And this particular voice, this mode of storytelling that disguises editing and creates a
highly-seductive illusion of continuous time and space, has become the dominant form of visual storytelling on our
<p> If we identify the unique property of the motion picture storytelling as the ability to create a hypnotic, life-like world
that the viewer gets sucked into, then what are it's limitations? Well, for much of its history, motion pictures were so
prohibitively expensive to make that few people got to make them, and those that did were severely limited in what
they could do and say by the financial constraints put upon them. In short, movies were expensive to make and had
to make their money back, so they had to follow a very precise, very limiting formula.</p>
<p> As filmmaking equipment became more affordable and accessible, there were more opportunities for artists to
pursue non-commercial storytelling. By the time these opportunities emerged in the 1950s and 1960s (most notably
in the form of smaller 16mm and 8mm film cameras), though, audiences had a long-established expectation of
what a film should look and sound like. The magic of film's ability to mimic real-life was also a prison: audiences did
not tolerate deviations from that style of storytelling. While we were open minded about impressionist and abstract
painting, we struggled with motion picture expressions that didn't hold true to the way we saw and heard the world
around us.</p>
<p> A conversation about the developments in motion picture technology and storytelling wouldn't be complete without
mention of the television revolution. First design in 1926 and implemented in Germany in 1935, the television came
to American in 1941 and by 1959 there were 50 million TV sets in the country.</p>
<p> Television offered a revolutionary means of engagement: changing the channel. This wasn't available when one
went to the movies ? the closest a filmgoer could come to changing the channel was walking out of one theater
and into another. Television also offered live broadcasts, offering a more comprehensive experience than the radio
broadcast. Finally, the content was also endlessly streaming: you could always watch television. These qualities are
both early echoes of the interaction we see with the internet today.</p>
<p> If film form was limiting in its scope and language, though, television was far more so. Deeply-rooted financial pressures
and rigorously adhered-to schedules (24 minutes for a half-hour slot, 44 minutes for an hour slot, etc) made
television highly formulaic and limited in storytelling opportunities.</p>
<h3>Video Games</h3>
<p><a href="!-PDP-1-20070512.jpg/320px-Spacewar!-PDP-1-20070512.jpg" target="_blank"><img src="!-PDP-1-20070512.jpg/320px-Spacewar!-PDP-1-20070512.jpg" width="200px"/></a> The first video game is widely recognized as "Cathode Ray Tube Amusement Device", an extremely basic one-player
proto-Missile Command devised in 1947 for an analog computer. Fifty years later, video games would surpass motion
pictures as the high-grossing visual-storytelling medium on the planet.</p>
<p> While television gave you the opportunity to change the channel from one story to another, video games offered the
opportunity to actually change and even create the content of the story. Most story-based video games still operate on a largely linear path with a set outcome, the gettingthere
is going to be unique for each "user" (and note the
distinction between "viewers" and "users" - what do we
call people who engage with web-native films?) And while
video games may have lacked the life-like image quality
of films, they made up for it in interactivity and identification:
having an avatar - a graphic representation of the
user ? that responded to her commands.</p>
<p> Interactive storytelling is becoming increasingly common
in our society. Consoles like the Wii have made gaming
more accessible to broader communities. The passivity
of the motion picture experience is being challenged by
the interactivity of the gaming console. Again, we can see
echoes of the internet in the degree to which the user or
viewer can dictate the terms of engagement with the story.</p>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<div id="02modal03" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h2>DIY Hack a Commerical</h2>
<div class="modal-body">
<h3>DIY Hack a Commercial</h3>
<p>Add your own voice to an old commercial by adding popups and commentary. You can change meanings, extend messages, and otherwise recontextualize the video.</p>
<li>Find a commercial you would like to comment on at the <a href="">Prelinger Archive</a> Browse by collection or title. Once you've found a commercial to work with, choose a file type (we recommend the ogg file format) and click to open the commercial in your browser. </li>
<li>Open <a href="">the popup template</a> in your browser</li>
<li>Click the Edit Source button in the upper lefthand corner of the video and change the URL to the URL of the of the commercial you'll be commenting on.</li>
<li>Drag a popup event to the place in the Timeline where you want the popup to appear. </li>
<li>Double Click on the event to adjust the text, position, and sticker for that popup event.</li>
<li>Keep adding popup events to the timeline. When you're ready, click the "share" button and copy and paste your link to save it somewhere. Then, click the export button and save your code.</li>
<li>Share with the world. Share your video link widely.</li>
<li>Iterate your project based on feedback you receive. </li>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
<!--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">(function(){
var popcorn = Popcorn( '#my_video_1_html5_api');
"start": 16.38,
"end": 20.86,
"text": "Watch this video about the history of storytelling",
"link": "",
"top": "81%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/eye.png"
"start": 55.51,
"end": 59.16,
"text": "Read about the early filmmakers who made this film",
"link": "",
"top": "73%",
"left": "57%",
"target": "pop-container",
"icon": "pop-images/info.png"
"start": 67.05,
"end": 72.06,
"text": "Learn about montage",
"link": "",
"top": "50%",
"left": "53%",
"target": "pop-container",
"icon": "pop-images/error.png"
"start": 77.58,
"end": 80.95,
"text": "Learn the history of the World Wide Web",
"link": "",
"top": "81%",
"left": "10%",
"target": "pop-container",
"icon": "pop-images/info.png"
"start": 85.31,
"end": 89.05,
"text": "Watch a video about the evolution of the web",
"link": "",
"top": "78%",
"left": "11%",
"target": "pop-container",
"icon": "pop-images/tv.png"
"start": 106.76,
"end": 109.94000000000001,
"text": "Watch this video \"Donald Duck Meets Glenn Beck",
"link": "",
"top": "67%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/net.png"
"start": 112.33,
"end": 114.98,
"text": "Watch this web native film: \"\"",
"link": "",
"top": "72%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/net.png"
"start": 120.72,
"end": 123.19,
"text": "Watch this web documentary: \"Prison Valley\"",
"link": "",
"top": "15%",
"left": "5%",
"target": "pop-container",
"icon": "pop-images/net.png"
return popcorn;
Jump to Line
Something went wrong with that request. Please try again.