-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
434 lines (396 loc) · 19.3 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>CPS 101 - A First Byte of Computer Science</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<script src="//code.iconify.design/1/1.0.7/iconify.min.js"></script>
<!--
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
-->
<!-- Plugin CSS -->
<link rel="stylesheet" href="device-mockups/device-mockups.min.css">
<!-- Custom styles for this template -->
<link href="css/new-age.min.css" rel="stylesheet">
<link href="css/brand.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">CPS 101</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#download">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#features">Outline</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead">
<video class="video-fluid z-depth-1" autoplay loop muted controls>
<source src="./img/cps101-wide-720.mp4" type="video/mp4" />
</video>
<!--
<div class="video-background">
<div class="video-wrap">
<div id="video">
<video id="bgvid" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="../img/cps101.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
-->
<div class="container h-100" style="z-index: 2;">
<div class="row h-100">
<div class="col-lg-7 my-auto">
<div class="header-content mx-auto">
<div class="siteTitle">
<h1>
A First Byte of Computer Science
</h1>
</div>
<a href="#download" class="btn btn-outline btn-xl js-scroll-trigger">More Information</a>
</div>
</div>
<div class="col-lg-5 my-auto">
<!--
<div class="device-container">
<div class="device-mockup iphone6_plus portrait white">
<div class="device">
<div class="screen">
<img src="img/demo-screen-1.jpg" class="img-fluid" alt="">
</div>
<div class="button">
</div>
</div>
</div>
</div>
-->
</div>
</div>
</div>
</header>
<section class="download bg-primary text-center" id="download">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<h2 class="section-heading">Computing is Everywhere!</h2>
<div style="text-align: left">
<p>
From fridges to bridges, from stoves to gloves - today's devices are all interconnected and use their resources to help us thrive in an information-driven society.
CPS 101 is an introductory course - you do not need any prerequisites,
other than an inquisitive mindset, a computer with Internet access, and the Chrome browser installed.
</p>
<p>
In this course, you will become familiar with the programmable world around you with a variety of examples and
exercises that follow the scientific method and are based on sensing the environment, processing sampled data, and drawing conclusions
through programming the micro:bit device (we use v2 for twice the fun).
</p>
<p>
The STEM fields all include more and more computing-centric tasks, and this course will show you some of the many advantages of using high level programming in your future discipline as well as the limitations that arise from observing natural phenomenon and their subsequent processing.
Are you more the <i>artsy</i> type? How about embedding some interactive tasks in your next art design or bringing your fashion designs to life?
</p>
<p>
No matter where your future journey will lead you, chances are that you will not escape some form of computing in your education and future career.
This course will prepare you for what's ahead.
</p>
<p style="text-align: center;">
<a href="#features" class="btn btn-outline-dark btn-xl js-scroll-trigger">Course Details</a>
</p>
</div>
<!--
<div class="badges">
<a class="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""></a>
<a class="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""></a>
</div>
-->
</div>
</div>
</div>
</section>
<section class="features" id="features">
<div class="container">
<div class="section-heading text-center">
<h2>Course Outline</h2>
<p class="text-muted">A gentle introduction into general and scientific computing.</p>
<hr>
<p class="text-muted">
(While having fun doing unscientific things!)<br>
<iconify-icon class="feature-item-icon" data-icon="mdi-emoticon-happy-outline"></iconify-icon>
</p>
</div>
<div class="row">
<!--
<div class="col-lg-4 my-auto">
<div class="device-container">
<div class="device-mockup iphone6_plus portrait white">
<div class="device">
<div class="screen">
-->
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<!--
<img src="img/demo-screen-1.jpg" class="img-fluid" alt="">
</div>
<div class="button">
-->
<!-- You can hook the "home button" to some JavaScript events or just remove it -->
<!--
</div>
</div>
</div>
</div>
</div>
-->
<div class="col-lg-12 my-auto">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-television-guide"></iconify-icon>
<h3>Visual Programming</h3>
<p class="text-muted">Visually design your programs using drag & drop.</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-microscope"></iconify-icon>
<h3>Scientific Method</h3>
<p class="text-muted">Learn how to use programs to test your hypotheses!</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-database-search-outline"></iconify-icon>
<h3>Interpret Data</h3>
<p class="text-muted">See if the data you get is the data you need!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-connection"></iconify-icon>
<h3>Plug and Play</h3>
<p class="text-muted">Connect your device and yourself to other students and the world!</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-spider-web"></iconify-icon>
<h3>Online</h3>
<p class="text-muted">This course is online!</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-item">
<iconify-icon class="feature-item-icon" data-icon="mdi-book-education-outline"></iconify-icon>
<h3>Grades</h3>
<p class="text-muted">Hands-on parts 60%<br> Quizzes/exams 40%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="timeline" id="timeline">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 1</span>
<div class="timeline-icon">
<i class="fa fa-rocket"></i>
</div>
<div class="content">
<h3 class="title">Introduction to CS and the Scientific Method</h3>
<p class="description">
This initial course module will introduce you to the scientific method and how computing has permeated dfiferent disciplines today.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 2-3</span>
<div class="timeline-icon">
<i class="fa fa-microchip"></i>
</div>
<div class="content">
<h3 class="title">Input/Computing/Output</h3>
<p class="description">
We continue from the first high-level view to a more detailed one, with a focus on getting to know how input is processed and output generated with the help of the micro:bit.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 4-5</span>
<div class="timeline-icon">
<i class="fa fa-atom"></i>
</div>
<div class="content">
<h3 class="title">Boundaries of granularity and impacts on performance of individual systems</h3>
<p class="description">
For computing in a scientific context, it is important to have an understanding of data is gathered and how that process impacts our results. Who is ready to test an hypothesis with experiments?
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 6-7</span>
<div class="timeline-icon">
<i class="fa fa-network-wired"></i>
</div>
<div class="content">
<h3 class="title">From individual to networked systems, introduction to wired/wireless communications, the Internet</h3>
<p class="description">
Computing devices by themselves are lonely. We have a 10,000 feet view on how they communicate with one another and how the Internet is formed.
We also will see how to do that with our own devices.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 8-9</span>
<div class="timeline-icon">
<i class="fa fa-globe"></i>
</div>
<div class="content">
<h3 class="title">The World Wide Web</h3>
<p class="description">
While we use it all the time (hey, <i>you are</i> by looking at this site!), the www is a part of the Internet. We will ahve a glance at connecting our computing devices to the 'web.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 10-13</span>
<div class="timeline-icon">
<i class="fa fa-asterisk"></i>
</div>
<div class="content">
<h3 class="title">The Internet of Everything </h3>
<p class="description">
Aahh. Machine overlords brewing fresh coffee. Or tea, who are we to judge. But, maybe we just look at connecting the next 100 billion devices to make everyday smart.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="timeline-year">Week 14-15</span>
<div class="timeline-icon">
<i class="fa fa-flag-checkered"></i>
</div>
<div class="content">
<h3 class="title">Project work: build a distributed system</h3>
<p class="description">
All your prior training led you here. Build your own system showing everything you learned. Time for inspirational quotes. Or just: "This is the way."
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<p style="text-align: center; padding-top: 2em;">
<a href="#contact" class="btn btn-outline-dark btn-xl js-scroll-trigger">Anything else?</a>
</p>
</div>
</section>
<!--
<section class="cta">
<div class="cta-content">
<div class="container">
<h2>Stop waiting.<br>Start building.</h2>
<a href="#contact" class="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
</div>
</div>
<div class="overlay"></div>
</section>
-->
<section class="contact bg-primary" id="contact">
<div class="header-content">
<h2>Do You Want to Know More?</h2>
<ul class="fa-ul fa-2x">
<li><span class="fa-li"><a href="http://patrick.seeling.org" target="_blank"><i class="fas fa-brain"></i></a></span>
<p>
I am Dr. PS (Patrick Seeling), a Professor in the Department of Computer Science at Central Michigan University.
My main research interests evolve around next generation computing networks, services, and computing-mediated education.
</p>
</li>
<li><span class="fa-li"><a href="http://patrick.seeling.org" target="_blank"><i class="fas fa-house-user"></i></a></span>
<p>
For more information about me, feel free to check out my personal homepage at
<a href="http://patrick.seeling.org" target="_blank">http://patrick.seeling.org</a>
</p>
</li>
<li><span class="fa-li"><a href="mailto:patrick.seeling@cmich.edu?subject=CPS101" target="_blank"><i class="fas fa-paper-plane"></i></a></span>
<p>
Though I am located in Pearce Hall #408, it is best these days to contact me via email
<a href="mailto:patrick.seeling@cmich.edu">patrick.seeling@cmich.edu</a>
</p>
</li>
</ul>
</div>
</section>
<footer>
<div class="container">
<p>Made with <i class="fas fa-keyboard"></i> and <i class="fas fa-coffee"></i> by <a href="http://patrick.seeling.org" target="_blank">Patrick Seeling</a>,
<i class="fas fa-paper-plane"></i> patrick.seeling.at.cmich.edu 2020-2021.
<br> Theme: modified New-Age.
</p>
<!--
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">Privacy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms</a>
</li>
<li class="list-inline-item">
<a href="#">FAQ</a>
</li>
</ul>
-->
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/new-age.min.js"></script>
</body>
</html>