/
cinema5.html
307 lines (272 loc) · 10.8 KB
/
cinema5.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
<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">×</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">×</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>