-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclass3.html
476 lines (411 loc) · 23.6 KB
/
class3.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
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Public Speaking through Lightning Talks - Class 3 ~ Girl Develop It</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/gdiaa.css" id="theme">
<link rel="stylesheet" href="lib/css/light.css">
<link rel="stylesheet" href="css/print/pdf.css" media="print">
<script src="lib/js/head.min.js"></script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- INTRO -->
<section>
<!-- Title -->
<section>
<img src="images/gdi_logo_badge.png" class="img--bare" height="450px" />
<div class="box--small">
<h3><small><span class="blue">Public Speaking through</span></small><br /><span class="green">Lightning Talks</span></h3>
<p class="copy--xsmall">Class 3 | @gdiannarbor | #GDIA2</p>
</div>
</section>
<!-- Class Agenda -->
<section>
<h3>Class Agenda</h3>
<ul class="list--xtall box--small list--bare">
<li><strong class="red">Class 1:</strong> Intro to Public Speaking</li>
<li><strong class="red">Class 2:</strong> Intro to Teaching</li>
<li><strong class="pink">Class 3:</strong> Intro to Lightning Talks</li>
<li><strong class="red">Class 4:</strong> Leveling Up Your Speaker Skills</li>
</ul>
</section>
<!-- Today's Agenda -->
<section>
<h3><span class="blue">Today</span> Lightning</h3>
<ol class="list--xtall box--small">
<li class="blue">Homework Presentations</li>
<li class="green">The Basics</li>
<li class="yellow">Tips for Getting Started</li>
<li class="pink">Micro Talk Exercise</li>
<li class="red">Slide Design</li>
<li style="color: purple;">Homework Assignment</li>
</ol>
</section>
<!-- Why are we here? -->
<section>
<h3>Why are we here?</h3>
<ul class="box list--xtall copy--small">
<li>To <span class="blue">learn the art</span> of <span class="green">brevity</span></li>
<li>To <span class="blue">ask</span> and <span class="green">answer</span> questions</li>
<li>To <span class="blue">practice</span> and <span class="green">improve</span> our speaking skills</li>
<li>To <span class="blue">give</span> and <span class="green">receive</span> feedback</li>
<li><span class="red">To become more self-aware</span></li>
</ul>
</section>
</section>
<!-- HOMEWORK PRESENTATIONS -->
<section>
<section>
<h3>Homework: <span class="yellow">Interest Speech</span></h3>
</section>
<section>
<h3>Audience Tips</h3>
<ul class="box list--xtall">
<li class="fragment blue">No Phones!</li>
<li class="fragment green">Pay Attention</li>
<li class="fragment yellow">Help the Speaker Improve</li>
</ul>
</section>
<section>
<h3>Presenter Tips</h3>
<ul class="box list--xtall">
<li class="fragment blue">Project Your Voice</li>
<li class="fragment green">Make Eye Contact</li>
<li class="fragment yellow">Move Around</li>
<li class="fragment pink">POWER POSE!!!</li>
</ul>
</section>
<section>
<h3>Time!</h3>
<p class="box green">3-5 Minutes</p>
</section>
<section>
<h3>Homework: <span class="yellow">Interest Speech</span></h3>
<p class="box copy--xsmall" style="margin-top: 400px;">
<strong>Feedback:</strong>
<span class="blue">You do {this} well. </span>
<span class="green">You could improve on {this}.</span>
</p>
</section>
<section>
<h3>Collecting Feedback</h3>
<p class="box blue">Review your feedback.</p>
<p class="box green">Set 1 or 2 goals for yourself.</p>
<p class="box">Breaktime!</p>
</section>
</section>
<!-- THE BASICS -->
<section>
<section>
<h3>The Basics of Lightning Talks</h3>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Defined</h3>
<p class="copy--small box">Short, 5-10 minute talks.<br/>Often, several will be delivered in a single session.</p>
<p class="copy--xsmall">PechaKucha (20 slides, 20 seconds each) and<br/>Ignite (20 slides, 15 seconds each) are similar formats</p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Why</h3>
<p class="copy--small box">"The goal of lightning talks is to <span class="green">articulate a topic</span><br/>in a <span class="blue">quick</span>, <span class="yellow">insightful</span>, and <span class="red">clear</span> manner.</p>
<p class="copy--xsmall box">These concise and efficient talks are intended to<br/>grab the attention of the audience, convey key information, and<br/>allow for several presenters to share their ideas in a brief period of time."</p>
<p class="copy--xsmall"><a href="https://en.wikipedia.org/wiki/Lightning_talk">Wikipedia</a></p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Why Give One</h3>
<ul class="list--xtall copy--small box">
<li class="fragment">Great for <span class="green">new speakers</span>.</li>
<li class="fragment">Great for practicing <span class="green">overcoming nerves</span>.</li>
<li class="fragment">Great for <span class="green">guaging interest</span> in topics.</li>
<li class="fragment">Great for <span class="green">exploring an idea</span> you want to dive deeper on.</li>
<li class="fragment">Great for <span class="green">generating interest</span> in your full talk.</li>
</ul>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Big Picture</h3>
<p class="copy--small box">"People want to <span class="green">discover something new</span>,<br/>not everything there is to know about it."</p>
<p class="copy--xsmall"><a href="http://software.ac.uk/home/cw11/giving-good-lightning-talk">source</a></p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Focus</h3>
<p class="copy--small box">Limited time means getting to the point quickly and clearly.</p>
<p class="copy--xsmall box--small">Cut out as much non-critical information as possible</p>
<p class="copy--xsmall">Don't sweat the details. Don't try to cover too much ground.</p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Practice...</h3>
<p class="copy--small box">Practice... Practice...</p>
<p class="copy--xsmall box--small">The only way to be sure you'll stay within the allotted time is to practice and fine tune.</p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Topics</h3>
<p class="copy--small box">"A good lightning talk is <span class="blue">insightful</span>, <span class="green">inspiring</span>, <span class="yellow">thought-provoking</span>, <span class="pink">useful</span>, <span class="red">humorous</span>, <span style="color: purple">controversial</span>, or <span style="color: royalblue">enlightening</span>."</p>
<p class="copy--xsmall box--small"><a href="https://barriebyron.wordpress.com/2013/02/17/so-you-want-to-give-a-lightning-talk/">source</a></p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> IT Topics</h3>
<ul class="copy--xsmall box--small">
<li class="fragment">Why X is my favorite thing.</li>
<li class="fragment">I want to do cool project X. Who wants to help?</li>
<li class="fragment"><b>Successful Project:</b> I did project X. It was a success. Here's how you could benefit.</li>
<li class="fragment"><b>Failed Project:</b> I did project X. It was a failure, and here's why.</li>
<li class="fragment"><b>Heresy:</b> People always say X, but they're wrong. Here's why.</li>
<li class="fragment"><b>You All Suck:</b> Here's what is wrong with our community.</li>
<li class="fragment"><b>Call to Action:</b> Let's all do more of X / less of X.</li>
<li class="fragment">Wouldn't it be cool if X?</li>
<li class="fragment">Someone needs to do X.</li>
<li class="fragment">Why X was a mistake.</li>
<li class="fragment">Why X looks like a mistake, but isn't.</li>
<li class="fragment">What it's like to do X.</li>
<li class="fragment">Here's a useful technique that worked.</li>
<li class="fragment">Here's a technique I thought would be useful but didn't work.</li>
<li class="fragment">Why thing X sucks.</li>
<li class="fragment">Comparison of similar things X and Y.</li>
<li class="fragment">Why we should be paying more attention to X.</li>
</ul>
<p class="copy--xsmall box--small"><a href="http://perl.plover.com/lt/osc2003/lightning-talks.html/">source</a></p>
</section>
<section>
<h3><span class="blue">Lightning Talks</span> Slides</h3>
<p class="copy--small box">Use <span class="red">less words</span>, <span class="green">more visuals</span>.</p>
<p class="copy--small box fragment">Don't plan on spending much, if any,<br/>time on your intro or closing slides.</p>
<p class="copy--small box fragment">Use your knowledge of learning styles to make slides<br/>as accessible and as easily parsed as possible.</p>
<p class="copy--small box fragment">Teach for the middle.</p>
</section>
</section>
<!-- DEMO -->
<section>
<h3>Demo</h3>
<div class="box"><iframe width="853" height="480" src="https://www.youtube.com/embed/gxhJBWmmMRc?rel=0" frameborder="0" allowfullscreen></iframe></div>
</section>
<!-- EXERCISE -->
<section>
<section>
<h3>Exercise: <span class="yellow">Micro Talks</span></h3>
<p class="box blue"><strong>Prepare a micro talk</strong><br/>in one of the following categories.</p>
<p class="box copy--small green">Pets, Family, Friends, Games, Music, Movies/TV,<br/>Food, Vacations, Life Hacking, Home Life</p>
<p class="box--small copy--xsmall yellow">3 Minutes</p>
<ul class="box--small copy--xsmall">
<li>Tell a story</li>
<li>Provide a how-to</li>
<li>Why is X better than Y?</li>
<li>Why is X the best / worst?</li>
<li>Why we should all do ____</li>
<li>etc.</li>
</ul>
</section>
<section>
<h3>Why are we doing this?</h3>
<p class="copy--small box fragment">Practice thinking on our toes.</p>
<p class="copy--small box fragment">Practice excluding non-critical content.</p>
<p class="copy--small box fragment">Practice staying within time.</p>
<p class="copy--small box fragment">Because this is a Lightning Talk workshop!</p>
</section>
<section>
<h3>Prep / Break Time!</h3>
<p class="box red">10 Minutes</p>
</section>
<section>
<h3>Audience Tips</h3>
<ul class="box list--xtall">
<li class="blue">No Phones!</li>
<li class="green">Pay Attention</li>
<li class="yellow">Help the Speaker Improve</li>
</ul>
</section>
<section>
<h3>Presenter Tips</h3>
<ul class="box list--xtall">
<li class="blue">Project Your Voice</li>
<li class="green">Make Eye Contact</li>
<li class="yellow">Move Around</li>
<li class="fragment pink">POWER POSE!!!</li>
</ul>
</section>
<section>
<h3>Time!</h3>
<p class="box green">3 Minutes</p>
</section>
<section>
<h3>Exercise: <span class="yellow">Micro Talks</span></h3>
<p class="box copy--xsmall" style="margin-top: 400px;">
<strong>Feedback:</strong>
<span class="blue">You do {this} well. </span>
<span class="green">You could improve on {this}.</span>
</p>
</section>
<section>
<h3>Collecting Feedback</h3>
<p class="box blue">Review your feedback.</p>
<p class="box green">Set 1 or 2 goals for yourself.</p>
<p class="copy--xsmall">Quick break!</p>
</section>
</section>
<!-- SLIDE DESIGN -->
<section>
<section>
<h3>Slide Design</h3>
</section>
<section>
<h3><span class="blue">Slide Design</span> Style</h3>
<p class="box">What's <span class="green">your style</span>? Get inspired.</p>
<p class="box copy--small">Find ideas from <a href="http://www.slideshare.net/featured/media/presentations/category/technology" target="_blank">slide examples</a> and in<br/>templates for your presentation software.</p>
<p class="copy--xsmall box--small">Simple is best. "White space" is good.</p>
<p class="copy--xsmall">Note: It's best practice <i>not</i> to use any of the built-in templates.</p>
</section>
<section>
<h3><span class="blue">Slide Design</span> Color</h3>
<p class="box copy--small">We already know that <span class="green">color</span> can be<br/>an <span class="green">important</span> part of the <span class="green">learning</span> process.</p>
<p class="box copy--small">We can also use <span class="yellow">color</span> to make our slides<br/><span class="yellow">easier</span> for the listener to <span class="yellow">navigate</span>.</p>
</section>
<section>
<h3><span class="blue">Slide Design</span> Color Palettes</h3>
<p class="box copy--small">Screens & projectors are <span class="red">unpredictable</span>.<br/>Always choose <span class="green">high contrast colors</span>.</p>
<p class="box--small copy--xsmall">Dark on light, light on dark.</p>
<p class="box--small copy--xsmall">Choose a few accent colors.</p>
<p class="box--small copy--xsmall">Need inspiration? Try <a href="http://www.colourlovers.com/palettes/most-loved/all-time/meta" target="_blank">ColourLovers</a></p>
</section>
<section>
<h3><span class="blue">Slide Design</span> Color Use</h3>
<p class="box--small copy--small">The key is consciousness and consistency.</p>
<p class="box--small copy--xsmall">Use colors to identify sections and transitions.</p>
<a href="images/slide-color.png" target="_blank"><img src="images/slide-color.png" width="600" /></a>
</section>
<section>
<h3><span class="blue">Slide Design</span> Color Use</h3>
<p class="box"><a href="images/slide-color2.png" target="_blank"><img src="images/slide-color2.png" width="600" /></a></p>
</section>
</section>
<section>
<section>
<h3><span class="blue">Slide Design</span> Typography</h3>
</section>
<section>
<h3 style="font-size: 100px; margin-bottom: 80px;"><span class="green">Bigger is BETTER.</span></h3>
<p class="box copy--xsmall">Seriously, go big or go home. You can't go wrong!</p>
</section>
<section>
<h3 style="font-size: 100px; margin-bottom: 80px;"><span class="yellow">Use LESS words.</span></h3>
<p class="box copy--xsmall">Big text = less room. Create focus, provide keys for your dialogue.</p>
</section>
<section>
<h3 style="font-size: 100px; margin-bottom: 80px;"><span class="blue">Use CONTRAST.</span></h3>
<p class="box copy--xsmall">I repeat. Light on dark, dark on light.</p>
<p class="copy--xsmall" style="width: 50%; padding: 1em; margin: 80px auto 0; background: black; color: #5E2B45">Don't do this.</p>
</section>
<section>
<h3 style="font-size: 75px; margin-bottom: 80px;"><span class="pink">Use FONTS responsibly.</span></h3>
<p class="box copy--xsmall">Be consistent. Don't use too many. Pick type that is clean and easy to read.</p>
<p class="copy--xsmall"><a href="http://www.google.com/fonts" target="_blank">Google Fonts</a></p>
</section>
</section>
<section>
<section>
<h3><span class="blue">Slide Design</span> Images</h3>
<p class="box">Use images to support your content.</p>
<p class="copy--xsmall box--small"><a href="https://unsplash.com/" target="_blank">Unsplash</a></p>
<p class="copy--xsmall box--small"><a href="http://www.flickr.com/creativecommons/" target="_blank">Flickr Creative Commons</a></p>
<p class="copy--xsmall box--small"><a href="https://www.google.com/advanced_image_search?as_st=y&hl=en&as_epq=&as_oq=&as_eq=&cr=&as_sitesearch=&safe=images&q=unicorn&tbs=sur:f&tbm=isch" target="_blank">Google Usage Rights</a></p>
</section>
<section data-background="images/background.jpg">
<h3><span style="color: white; font-size:80px">Bigger is DRAMATIC.</h3>
</section>
<section>
<h4>Smaller images should have context</h4>
<div class='box'><img src="images/background.jpg" width="300" />
<p class="box--small copy--xsmall"><a href="https://unsplash.com/photos/1mp6lukMx2w" target="_blank">source</a></p>
</div>
</section>
<section>
<img src="images/image-context.png" width="600" />
</section>
<section data-background="images/background.jpg">
<h3><span style="color: white; font-size:80px;">Use contrast.</h3>
</section>
<section data-background="images/background2.jpg">
<h3><span style="color: white; font-size:80px; padding: .75em; display: inline-block; background: rgba(0,0,0,.4)">Try backdrops.</h3>
<p class="box--small copy--xsmall"><a href="https://unsplash.com/photos/fb9kOpMerWU" target="_blank" style="color: white">source</a></p>
</section>
<section data-background="images/background2.jpg">
<h3><span style="color: white; font-size:80px; text-shadow: 2px 2px 1px rgba(0,0,0,.4)">Try shadows.</h3>
</section>
<section>
<h3><span class="yellow" style="font-size:80px; text-shadow: 1px 1px 2px rgba(0,0,0,.4)">Shadows create depth.</h3>
<p class="box copy--xsmall">...even without background imagery. Just don't don't go overboard.</p>
</section>
<section>
<h3>Last, but not least...</h3>
<p class="box">Take it easy with transitions, animations, and videos.</p>
<p class="box--small copy--xsmall">They can get distracting.</p>
<p class="box--small copy--xsmall">But they can also be used to break up content<br/>and bring energy to the audience.</p>
</section>
<section data-background="images/distraction.gif">
</section>
</section>
<!-- OUTRO -->
<section>
<section>
<h3>Homework</h3>
<p class="box blue">Final Lightning Talk</p>
<p class="box copy--small green">a how to, an introduction, a reasoning, etc.<br/><i>preferably tech related</i></p>
<p class="box--small copy--xsmall yellow">5 - 7 Minutes</p>
<p class="box--small copy--xsmall yellow">Slides are required.</p>
<p class="box--small copy--xsmall">Aim to inform the listener.</p>
<p class="box--small copy--xsmall">Incorporate techniques for different learning styles.</p>
<p class="box--small copy--xsmall red">Practice. Practice. Practice.</p>
</section>
<section>
<h3>Questions?</h3>
<p class="box"><a href="https://gdiaa.slack.com/messages/0316-lightning-talks/details/" target="_blank">#0316-lightning-talks</a></p>
<p><small>Not on Slack? <a target="_blank" href="http://bit.ly/gdiaa-slack">bit.ly/gdiaa-slack</a></small></p>
</section>
<!-- Title -->
<section>
<img src="images/gdi_logo_badge.png" class="img--bare" height="450px" />
<div class="box--small">
<h3><small><span class="blue">Public Speaking through</span></small><br /><span class="green">Lightning Talks</span></h3>
<p class="copy--xsmall"><a href="class4.html">Class 4</a> | @gdiannarbor | #GDIA2</p>
</div>
</section>
</section>
</div> <!-- end .slides -->
<footer>
<div class="copyright">
#GDIA2 | @gdiannarbor | GDI Ann Arbor ~
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
rollingLinks: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>