-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (197 loc) · 11.2 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
<!DOCTYPE html>
<html data-theme="light" class="has-background-light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="https://ttussc.github.io/11th/img/favicon.ico">
<title>電資創客營</title>
<!-- description -->
<meta name="description" content="以開源為根，服務社會。科學創意服務社希望以在學校推廣開源的方式，營造出學校裡良好的學術環境。並希望社員能夠將自身之所學，回饋給社會。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="電資創客營" />
<meta property="og:description" content="以開源為根，服務社會。科學創意服務社希望以在學校推廣開源的方式，營造出學校裡良好的學術環境。並希望社員能夠將自身之所學，回饋給社會。" />
<meta property="og:image" content="./src/img/useless_box_sample.jpg" />
<meta property="og:url" content="https://ttussc.github.io/" />
<meta name="twitter:card" content="https://ttussc.github.io/11th/img/SSC_logo.png" />
<meta name="twitter:title" content="電資創客營" />
<meta name="twitter:description" content="以開源為根，服務社會。科學創意服務社希望以在學校推廣開源的方式，營造出學校裡良好的學術環境。並希望社員能夠將自身之所學，回饋給社會。" />
<!-- css -->
<link rel="stylesheet" href="./src/css/main.css" />
<!-- icon 用 -->
<script src="https://kit.fontawesome.com/71a9885d68.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="hero is-info banner">
<div class="hero-body">
<p class="title">
電資創客營
</p>
<p class="subtitle">
程式邏輯訓練／無用盒專題實作
</p>
</div>
</section>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="./index.html">
<img src="./src/img/SSC_logo_full.png">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample" id="navBurger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navMain" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="">
<span class="icon">
<i class="fa-solid fa-dungeon"></i>
</span>
<span>首頁</span>
</a>
<a class="navbar-item" href="./arduino/">
<span class="icon">
<i class="fa-solid fa-infinity"></i>
</span>
<span>Arduino</span>
</a>
<a class="navbar-item" href="./download/">
<span class="icon">
<i class="fa-solid fa-download"></i>
</span>
<span>檔案下載</span>
</a>
<a class="navbar-item" href="./resource/">
<span class="icon">
<i class="fa-solid fa-file"></i>
</span>
<span>相關資源</span>
</a>
<a class="navbar-item" href="./refund/">
<span class="icon">
<i class="fa-solid fa-file-invoice-dollar"></i>
</span>
<span>退費機制</span>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<!-- <span class="icon">
<i class="fa-solid fa-ellipsis"></i>
</span> -->
<span>更多</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="./about/">
<span class="icon">
<i class="fa-solid fa-info"></i>
</span>
<span>關於我們</span>
</a>
<a class="navbar-item" href="./contact/">
<span class="icon">
<i class="fa-solid fa-address-card"></i>
</span>
<span>聯絡資訊</span>
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://github.com/TTUSSC/cseecamp/issues" target="_blank">
<span class="icon">
<i class="fa-solid fa-bug"></i>
</span>
<span>Report an issue</span>
</a>
</div>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<!-- 主要內容 -->
<main class="section">
<div class="columns is-multiline is-desktop is-tablet is-flex">
<!-- 中間 -->
<div id="content_mid" class="column is-four-fifths mx-auto">
<section class="section box">
<h1 class="title mb-3">電路與<span>程式的結合</span></h1>
<h2 class="subtitle mb-6">
透過雙手來驗證電學原理，透過程式來賦予電子元件生命。
</h2>
<div class="buttons is-flex mt-6">
<a class="ml-auto mr-auto" href="https://forms.gle/acVHHqG5HkcWmAjy6" target="_blank">
<button class="button is-large is-primary is-rounded">
<i class="fa-solid fa-book mr-3"></i>
立即報名
</button>
</a>
</div>
</section>
<hr>
<div class="content box">
<h1 class="">緣起</h1>
<p class="is-size-5 mb-6">
AI 世代的崛起，<span class="mark">程式設計</span> 逐漸成為大家爭先恐後學習的科目，也納入了國高中的課綱。彷彿世代的孩子們，都非把程式設計當作科目學習。我們希望能透過 <span class="mark">引導思維</span> 的方式，讓學習程式設計如同當年的童玩般，<strong>成為大家夢想的開端</strong>。
</p>
<h1 class="">營隊主題</h1>
<p class="is-size-5 mb-6">
<span class="mark">「無用盒」</span>是一個結合 <strong>電路</strong> 和 <strong>Arduino 程式</strong> 的舒壓玩具。雖然但看起來毫無意義，但實際上目的卻是 <span class="mark">展現大家的創意及技能</span>，透過撰寫不同的程式使無用盒與使用者進行 <strong>各式各樣的互動</strong>。
</p>
<figure class="image is-3by2 mx-auto" style="max-width: 600px;">
<iframe
class="has-ratio"
width="640"
height="360"
src="https://www.youtube.com/embed/17vC6uu_Kso?si=InW79n7llVgkM1xf"
frameborder="0"
allowfullscreen
></iframe>
</figure>
<h2 class="">電學好好玩</h2>
<p></p>
<div class="columns content">
<figure class="column is-half">
<img class="image is-3by2" src="./src/img/20240120-IMG_6253.jpg" />
<figcaption class="mt-2">學員自行按照電路圖接電路</figcaption>
</figure>
<p class="is-size-5 mt-auto mb-6 mx-3">
我們將會利用 <span class="mark">電腦模擬電路</span> 的方式教導學員們一些基本的 <strong>接線知識</strong> 以及 <strong>運作原理</strong>，過程簡單且安全，會有 <strong>隊輔手把手帶領學員</strong> 成功接出屬於自己的線路。製作「無用盒」時，也會 <strong>仰賴所學的電路知識</strong> 完成作品。
</p>
</div>
<h2 class="">Arduino 小小程式挑戰</h2>
<p></p>
<div class="columns content">
<p class="is-size-5 mt-auto mb-6 mx-3">
無用盒內部依靠<span class="mark">程式控制電路運作</span>。製作「無用盒」之前，利用程式方塊 <strong>鍛鍊學員的 <span class="mark">程式邏輯能力</span></strong>。學員們將學會如何 <span class="mark">編寫 Arduino 程式</span> 讓電路依指示行動。建立在熟悉基本程式語法與邏輯的條件下，學員們可以依照自己對於程式的理解，<strong>發揮創造力，將各式不同的元件組合在一起。</strong>
</p>
<figure class="column is-half">
<img class="image is-3by2" src="./src/img/20240120-IMG_6380.jpg" />
<figcaption class="mt-2">學員與小隊輔共同討論程式的撰寫</figcaption>
</figure>
</div>
<h2 class="">手做無用盒</h2>
<p></p>
<div class="columns content">
<figure class="column is-half">
<img class="image is-3by2" src="./src/img/20240121-IMG_6504.jpg" />
<figcaption class="mt-2">小隊輔引導學員們自行組裝無用盒外殼</figcaption>
</figure>
<p class="is-size-5 mt-auto mb-6 mx-3">
學員們也可以 <strong>自行發揮想像力</strong>，構思屬於自己的作品。自由地彩繪「無用盒」，以及運用營隊兩天所學，組裝不同的電子元件，自行撰寫程式碼，<span class="mark">賦予「無用盒」獨一無二的靈魂</span>。
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto">
<div class="content has-text-centered">
<p>
電資創客營©2024 <a href="https://github.com/ttussc">TTUSSC</a>
</p>
</div>
</footer>
<script src="./src/js/main.js"></script>
</body>
</html>