-
Notifications
You must be signed in to change notification settings - Fork 7
/
cinema3.html
412 lines (372 loc) · 18.5 KB
/
cinema3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!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">
<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>Remix</h2><br>
<h5>The Web, like remix, is constantly evolving and changing.</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 class="active-chapter">
<h1>Remix</h1>
<a href="#"> <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>
<h1>Web Native Storytelling</h1>
<a href="cinema5.html"> <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/episode3.jpg"
data-setup="{}">
<source src="http://videos-origin.mozilla.org/serv/webmademovies/storycamp/storycamp_episode3.mp4" type='video/mp4'>
<source src="http://videos-origin.mozilla.org/serv/webmademovies/storycamp/storycamp_episode3.webm" type='video/webm'>
</video>
<div id="pop-container"></div>
</div>
<br>
<!--extra content-->
<div style="display:block">
<h2>Week Three Resources</h2>
<!-- teacher resources -->
<div class="pull-right">
<a class="btn btn-resource" data-toggle="modal" href="#03modal01">Week Three: Assignments</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#03modal02">Designing for the Web</a><br>
<a class="btn btn-resource" data-toggle="modal" href="#03modal03">Planning a Web Native Film</a><br>
</div>
<!-- activity resources -->
<ul class="thumbnails">
<li>
<div class="thumbnail"> <a href="https://air.mozilla.org/remix-commentary-and-html5/"> <img src="img/story/webinar_thumb03.png" alt=""> </a>
<h4>Chat with Jon McIntosh</h4>
</div>
</li>
<li>
<div class="thumbnail"> <a href="http://www.newsjack.in"> <img src="img/story/newsjack_thumb.png" height="116px" alt=""> </a>
<h4>Jack the News</h4>
</div>
</li>
</ul>
<ul class="thumbnails">
<li>
<div class="thumbnail"> <a href="http://www.genderremixer.com/html5/" target="_blank"> <img src="img/story/genderemixer_thumb.jpg" height="116px" alt=""> </a>
<h4>Gender Remixer</h4>
</div>
</li>
</ul>
</div>
<!-- modal content -->
<div id="03modal01" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h2>Week Three: Remixing</h2>
</div>
<div class="modal-body">
<h3>Assignments</h3>
<p>
<h4>1: Watch the “Chapter 3: Remix” curriculum video and explore the
pop up resources in the video</h4><br><br>
<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 three guest speaker.</p>
<h4>3: Create a Gender Remix</h4>
<p> <strong>Tool:</strong> <a href="http://www.genderremixer.com/html5/" target="_blank">the Gender Remixer</a></p><p> Play around with the Gender Remixer for a few minutes. Think about what happens to the context of the commercial
when the video and audio don’t match.</p>
<h4>4: Jack the News</h4>
<p> <strong>Tool:</strong> <a href="http://newsjack.in/" target="_blank">Newsjack</a></p>
<p>Play around with NewsJack for a few minutes. Think about how you detect
biased information on the internet and save your hack URL!</p>
<h4>5: Remix a Youtube Video using the Pop Up Template</h4>
<p> <strong>Tools:</strong> Popcorn<br/>
</div>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
</div>
<div id="03modal02" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h2>Designing for the Web</h2>
</div>
<div class="modal-body">
<h3>Designing for your AUDIENCE:</h3>
<p> You need to know who your target audience is. A target audience is a group of people that have something in common,
and it greatly influences many design aspects.</p>
<p> Think about the type of people you want to engage. Make notes about things like age, family status, computer experience
and interests or hobbies.</p>
<h4> Ask yourself:</h4>
<p>
<ul>
<li>How old are these people? </li>
<li>Do they have a lot of family obligations? </li>
<li>Do they have a particular career path? </li>
<li>How often are they online? </li>
<li>What are their hobbies?</li>
</ul>
</p>
<p>Write a general description of your user.</p>
<p> The <strong>target audience</strong> is important because it helps to answer a bunch of design questions you’re going to have.</p>
<p>
<ul>
<li>
<strong>Age range:</strong>
Could impact color scheme, text size, and language used.</li>
<li>
<strong>Level of computer experience:</strong>
Impacts viewer’s ability to interact with the site. What are they used to in terms of site design?</li>
<li>
<strong>Hobbies/Interests/Pastimes:</strong>
May help to gear and guide the taste of the site as well as point views to other resources within these interests that they enjoy.</li>
</ul>
</p>
<h3> Content</h3>
<p> Write all the content bits and pieces out on little pieces of paper. Then, categorize the pieces. This exercise will give you a logical global navigation (and subnavigation if you have lots of content).</p>
<p> There’s no one way to organize content. You need to have a feel for what your content is, and then categorize
pieces together. Don’t forget, it’s easier to rearrange pieces of paper than electronic data.</p>
<p> This process doesn’t just help the organization of content, it also helps you begin to think about production resources you will need and a time plan.
<p>
<h3> Navigation</h3>
<p> If you’ve worked through the content section, you’ll know that Navigation relies quite heavily on the content. Organizing
content will reveal logical global and sub navigation. What comes first? Create a hierarchy for your content.</p>
<p> The site map shows exactly how many navigational items you’ll need as well as the hierarchy of the pages. The creation
of a site map will also help you eliminate irrelevant content and know what you need to produce. It’s a good
idea to take your time with this because without it, it will quickly become confusing where a particular piece of content
“lives”. A simple and clear navigation structure is important so that your users don’t get confused or frustrated.</p>
</div>
<div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> </div>
</div>
<div id="03modal03" class="modal hide fade" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h2>Planning a Web Native Film: SVT</h2>
</div>
<div class="modal-body">
<p> <img src="img/story/SVT_cycle.png" width="500px"/> To help plan a web native film, we recommend a model called “SVT” (or Story, Vision, Tech). This cyclical model begins with <strong>the story</strong>. Technology
can serve as inspiration, but <strong>never substitute for a story</strong>. Your number
one job is to tell a story. <strong>Never forget it!</strong></p>
<h3>Story</h3>
<p> What is your story about? Who are your characters? What are their motivations?
Why should your viewers care? In web-native stories and traditional
stories alike, story matters!</p>
<h3>Vision</h3>
<p>After you have the story, think about how you’d want your user to experience
that story. How do you envision a viewer interacting with your web
native film? What are the unique characteristics of the web (like participation,
or interactivity) that can help you tell your story more effectively?
You’ll need to bring a creative vision that serves as the expression of your
story.</p>
<div class="modalFloaterRight">
<h4>Information Architecture
& Procedural Storytelling</h4>
<p>Here are two concepts that apply
specially to web-native stories: <strong>information
architecture</strong> and <strong>procedural
storytelling.</strong></p>
<p> <strong>Information architecture</strong> refers to
the way your app is structured. If you
were making a traditional film, you’d
need a basic information architecture
to keep track of your notes, research,
and footage. But the finished film requires
no such architecture, since it’s a
flat 90 minute film.</p>
<p> <strong>A web-native film is in</strong> a piece of
software so it needs an information
architecture. Information architecture
is simply a system of organization
that takes into account both how you
present information and how a user
accesses that information.</p>
<p> If, for example, your film brings images
into the page: you need to have
a mental model of what those images
might be, where they are stored, and
how they’re retrieved.</p>
<p> <strong>Procedural storytelling</strong> refers to a
way of designing stories so they’re different
every time. Procedural storytellers
write the rules once and trust
a computer to actually execute the
story. Modern videogames are procedural
stories, in that they respond to
player actions. Madlibs are a kind of
procedural story, in that a Madlib will
be different each time it is completed
by a new person.</p>
</div>
<p> It may help to sketch out storyboards, wireframes, or stage directions
for how you want people to experience your story. Try to describe how it
should work, not how you’d build it.</p>
<p> You shouldn’t worry too much about technology at this stage—your creative
vision will determine the technical requirements. Just think big and figure out how to build it in the next step.</p>
<h3>Tech</h3>
<p> Once you have a story and vision, you’ll be able to investigate what kind of
technology you need to make your vision come alive. The advantage of developing
a vision first is that you’ll know exactly what technical challenges
you’ll need to solve to make your vision work.</p>
<p> Everyone’s technology needs will be different. You’ll need to do some investigation
around possible solutions— perhaps by searching the web, or
consulting with a developer, or emailing the creator of a similar project for
advice.</p>
<p> If you can at all avoid it, don’t waste your time writing code. The beauty
of open source is that often, someone has already solved your problem.
It’s much smarter to spend time repurposing and mashing together code,
rather than starting from scratch.</p>
<p> Don’t include technical components just because they’re shiny and cool: the
tech needs to serve the project’s goals.</p>
<h3>Rinse and Repeat!</h3>
<p> After you’ve cycled through story, then vision, then tech—you’ll want to
come back to story.</p>
<p> Maybe your idea of the story has changed along the way. Or maybe you
think that the technology isn’t there to support your vision, and need to
revisit whether this is the best story to develop for the web. Be brave and
not afraid to iterate on your work — it’s part of what makes an excellent
storyteller.</p>
<h3>Show your work</h3>
<p> There are some differences between web-native storytellers and conventional
storytellers. Many storytellers are afraid of showing things that are
half done. Filmmakers, for instance, do a lot of iteration on their projects,
but it usually happens in private—they continue to tighten their edit to
test the flow, tempo, and rhythm of a certain cut. But to adapt to the web,
filmmakers have to be willing to do this kind of iteration in public.</p>
<p> As a web-native storyteller, you’re necessarily making software. And in the
software world, we like to say “if you’re not embarrassed when you ship
your first version, you waited too long.” </p>
<p> The best way to tackle a web-native project is to release early, release
often and iterate on your ideas constantly. Using a cyclical model might
mean your project may never be finished, but you can be sure it will be
awesome. Like Da Vinci said, “Art is never finished, it’s only abandoned.”</p>
<h3>In summary</h3>
<p> Start with a story—an actual story
about actual people and their motivations.
Then have a vision for how you
can tell that story more effectively
using the web. Then, and only then,
figure out the specific technologies
you will use to implement this vision.
This way, you’ll be in a position to
make technology work for you—and
not be stuck asking “what can I do
with technology?”</p>
</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": 38.63,
"end": 43.13,
"text": "WATCH this video about a virtual choir that connected people around the world",
"link": "http://ericwhitacre.com/the-virtual-choir",
"top": "81%",
"left": "5%",
"target": "pop-container",
"icon": "pop-images/tv.png"
});
popcorn.pop({
"start": 67.06,
"end": 71.6,
"text": "Read about Open Source",
"link": "http://en.wikipedia.org/wiki/Open_source",
"top": "74%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/info.png"
});
popcorn.pop({
"start": 104.67,
"end": 108.46,
"text": "Learn about Andy Warhol",
"link": "http://en.wikipedia.org/wiki/Andy_Warhol",
"top": "19%",
"left": "15%",
"target": "pop-container",
"icon": "pop-images/user.png"
});
popcorn.pop({
"start": 110.18,
"end": 114.44,
"text": "Watch Rip! A Remix Manifesto, a documentary about remix culture",
"link": "http://www.nfb.ca/rip",
"top": "75%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/tv.png"
});
popcorn.pop({
"start": 132.82,
"end": 135.94,
"text": "Try remixing the web with Mozilla's Thimble App",
"link": "http://www.webmaker.org/tools",
"top": "72%",
"left": "50%",
"target": "pop-container",
"icon": "pop-images/net.png"
});
return popcorn;
}());</script>
</body>
</html>