main-curriculum/01-welcome.html at master · codewithme/main-curriculum · GitHub

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
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Code with me</title>

		<meta name="description" content="Code with me introduction">
		<meta name="author" content="Code with me, Tom Giratikanon, Sisi Wei">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/theme/default.css">
		<link rel="stylesheet" href="css/codewithme.css">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<script>
			// If the query includes 'print-pdf' we'll use the PDF print sheet
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Used to fade in a background when a specific slide state is reached -->
			<div class="state-background"></div>

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section class="small">
					<h1 style="margin-top:100px;"><img src="images/basic-logo-tan-bg.png"/></h1>
					<h3>Coding for journalism</h3>
					<div class="small-logo-container disappear standalone-copyright">

						<div class="copyright"> &copy; 2013 Code with me</div>
					</div>
					<div class="notes">
						<p>Welcome! Thanks for spending the weekend learning something new. We're excited to work with you!</p>
						<p>[ I'm Tom. I'm Sisi. Introduce ourselves a bit. ]</p>
					</div>
				</section>

				<section class="small">
					<h2>Thanks to our mentors</h2>
					<img src="images/introduction/portland-mentors.png" width=979 style="max-height: 681px;" />
					<div class="notes">
						<p>Thank you to our wonderful mentors, from all types of backgrounds, who have donated an entire weekend to come help you. Thanks especially to Daniel Bachhuber and Lauren Rabaino for helping us organize the workshop, including finding mentors, food and a venue.</p>
					</div>
				</section>

				<section class="small">
					<h2>Thanks to our sponsors</h2>
					<div class="sponsors-list disappear">
						<img src="images/introduction/open-news.png">
						<img src="images/introduction/oregonian-large.png">
						<img src="images/introduction/automattic.png">
					</div>

					<div class="notes">
						<p>Thank you to Susan Gage and The Oregonian for hosting the workshop, making this room available, and providing laptops for students.</p>
						<p>Thank you to Knight-Mozilla Open News, for making it possible to bring so many mentors together, and helping to cover food.</p>
						<p>And finally thanks for Automatic, for helping us cover some of our meal costs.</p>
						<p>We really couldn't have come to Portland if it hadn't been for these wonderful sponsors.</p>
				</section>


				<section class="small">
					<h2>Three things we want you to do</h2>
					<ol>
						<li><strong>Work hard</strong>. <br /><span class="notes">Coding can be challenging, and a little frustrating. But the great thing about it is, when you run into a problem, there’s always a solution, if you push yourself to find it. When something doesn’t quite work or look the way you want, that’s okay -- you can figure it out and make it better. (PRESS ENTER)</span></li>
						<li class="fragment"><strong>Ask questions</strong>. <br /><span class="notes">Our extremely generous and talented mentors have donated their Saturday and Sunday to help you. So if you’re stuck, ask them for help. That’s literally why they are here. I get stuck all the time, as do my colleagues -- and often just asking a question outloud helps me find the solution. So ask questions! (PRESS ENTER)</li>
						<li  class="fragment"><strong>Have fun</strong>. <br/><span class="notes">Coding is awesome. It’s one of the most exciting ways in the world to tell your story, because, If you can imagine something, with code, you can build it. It doesn’t really take a lot of money, or special equipment, or insider access. It just takes your work. And that’s pretty awesome. So let's begin with asking the question, WHAT IS CODE?.</span></li>
					</ol>
				</section>

				<section class="small">
					<h2>What is code?</h2>
					<div class="box-model-container">
						<p class="box-model">"Computers are good at following instructions, <br />but not at reading your mind." &mdash;Donald Knuth</p>
					</div>
				</section>

				<section class="small">
					<h2 class="vertical-center">Code is a way to talk to computers.</h2>
					<p>(Beep boop.)</p>
					<div class="notes">
						<p>Think of learning code just like learning a foreign language.</p>
						<p>First, we need to figure out what we want the computer to do for us.</p>
						<p>Then, all we have to do is figure out how to communicate that want, to the computer, in a language it understands.</p>
					</div>
				</section>

				<section class="small">
					<h2>Code also has a few dialects</h2>
					<p class="al">Different coding languages talk to different parts of the computer, and are able to do different things, such as:</p>
					<ul>
						<li>Create programs for your personal computer, like Photoshop or Excel</li>
						<li>Create webpages for the Internet</li>
					</ul>
					<div class="notes">
						<p>So this weekend, you'll be learning three different coding languages that all help you make webpages for the Internet. Every single thing you see on the web is shaped by code.</p>
					</div>
				</section>

			</div>

		</div>

		<script src="lib/js/head.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,

				transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/linear(2d)

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
				]
			});

		</script>

	</body>
</html>