portfolio/lectures.html at main · Ian3738/portfolio · 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
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>心築數位講堂｜陳奕安</title>
<meta name="description" content="十場教學設計直播的完整錄影：知識翻新的 AI 協作教案設計、字魂系列、跨領域教學實踐、Gemini 串接試算表。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Noto+Serif+TC:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>

<header class="site-head" id="sitehead">
  <a class="brand" href="index.html">Chen Yi<span class="hy">-</span>An</a>
  <button class="burger" id="burger" aria-label="選單" aria-expanded="false">
    <span></span><span></span><span></span>
  </button>
</header>

<div class="menu" id="menu">
  <div class="menu-in">
    <nav class="menu-list" aria-label="主選單">
        <a href="index.html">Home<span class="zh">總覽</span></a>
        <a href="about.html">Profile<span class="zh">關於</span></a>
        <a href="research.html">Research<span class="zh">研究</span></a>
        <a href="publications.html">Publications<span class="zh">著作</span></a>
        <a href="systems.html">Tools<span class="zh">工具</span></a>
        <a href="works.html">Works<span class="zh">教材</span></a>
        <a href="lectures.html">Lectures<span class="zh">講堂</span></a>
    </nav>
    <div class="menu-side">
      <a href="mailto:yianchen@mx.nthu.edu.tw">yianchen@mx.nthu.edu.tw</a><br>
      <a href="https://github.com/ian3738" target="_blank" rel="noopener">GitHub</a><br>
      <a href="https://sites.google.com/view/shinzhuteacher" target="_blank" rel="noopener">心築師塾工作室</a><br>
      <a href="https://kf-mvp-2cdbe.web.app/communities" target="_blank" rel="noopener">Knowledge Forum</a>
    </div>
  </div>
</div>

<main>
<header class="page-head">
  <div class="wrap">
    <h1 class="en">Lectures<span class="zh">心築數位講堂</span></h1>
    <p class="page-sub">十場教學設計直播的完整錄影。影片由三師爸 Sense Bar 與本人頻道發布，點擊封面就地播放。</p>
  </div>
</header>

<section>
  <div class="wrap">
    <div class="sec-head rise"><h2>Featured<span class="zh">本季精選</span></h2></div>
    <div class="vid-feature rise">
      <div class="vid big">
        <button class="vid-thumb" data-yt="4n_89vaF4uQ" data-title="從知識翻新走向 AI 協作教案設計" aria-label="播放：從知識翻新走向 AI 協作教案設計">
          <img src="https://i.ytimg.com/vi/4n_89vaF4uQ/maxresdefault.jpg" alt="從知識翻新走向 AI 協作教案設計" loading="eager" width="1280" height="720">
          <span class="play" aria-hidden="true"></span>
        </button>
      </div>
      <div class="vid big"><div class="vid-body">
        <div class="vid-t">從知識翻新走向 AI 協作教案設計</div>
        <p class="vid-d">AI 能在幾秒內生出一份教案，問題是那份教案通常只在傳遞知識。這場直播用「香水課程」當實例，示範怎麼把知識翻新的核心精神接進 AI 工具：教案的目標從傳遞知識換成引發想法激盪，並用一套靈魂框架讓 AI 先搞懂你的教學脈絡再動筆。</p>
        <div class="vid-meta"><span>三師爸 Sense Bar</span><span>知識翻新</span><span>教案設計</span></div>
      </div></div>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="sec-head rise"><h2>Hanzi Series<span class="zh">字魂系列</span></h2></div>
    <p class="panel-note rise">把漢字教學做成 RPG 劇情冒險的兩集。教學模組由林羿汝老師開發。</p>
    <div class="vid-grid rise">
      <article class="vid"><button class="vid-thumb" data-yt="gwL5X61zpVM" data-title="字魂・六書篇" aria-label="播放：字魂・六書篇"><img src="https://i.ytimg.com/vi/gwL5X61zpVM/maxresdefault.jpg" alt="字魂・六書篇" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">字魂・六書篇</div><p class="vid-d">諸葛亮與龐統化身語言專家，帶學生解鎖漢字的構字原理。用「TRUE」思維把六書拆成可闖關的任務。</p><div class="vid-meta"><span>國文</span><span>RPG 劇情</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="6pJ4vmxfGHM" data-title="字魂・書法篇" aria-label="播放：字魂・書法篇"><img src="https://i.ytimg.com/vi/6pJ4vmxfGHM/maxresdefault.jpg" alt="字魂・書法篇" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">字魂・書法篇</div><p class="vid-d">從甲骨文、金文、篆書、隸書到草書與行書，七道關卡讓學生用觀察與推測自己解出文字演化的線索。</p><div class="vid-meta"><span>國文</span><span>書法</span></div></div></article>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="sec-head rise"><h2>Interdisciplinary<span class="zh">跨領域教學與創新實踐</span></h2></div>
    <div class="vid-grid rise">
      <article class="vid"><button class="vid-thumb" data-yt="ggqqiDSmQcg" data-title="星空Ｘ心空：SEL 中的直角座標" aria-label="播放：星空Ｘ心空：SEL 中的直角座標"><img src="https://i.ytimg.com/vi/ggqqiDSmQcg/maxresdefault.jpg" alt="星空Ｘ心空：SEL 中的直角座標" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">星空Ｘ心空：SEL 中的直角座標</div><p class="vid-d">把社會情緒學習接進國中數學的直角座標單元，再加上新聞文本分析、角色扮演、情緒座標圖與知識翻新卡牌探究。學生標的是自己的情緒，座標平面因此有了要標記的對象。</p><div class="vid-meta"><span>國中數學</span><span>SEL</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="ChDURCvYm8I" data-title="教育桌遊：永凍之罪・末日審判" aria-label="播放：教育桌遊：永凍之罪・末日審判"><img src="https://i.ytimg.com/vi/ChDURCvYm8I/maxresdefault.jpg" alt="教育桌遊：永凍之罪・末日審判" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">教育桌遊：永凍之罪・末日審判</div><p class="vid-d">從真實的地球環境危機出發，學生在卡牌回合中提出問題、行動與危機，一輪一輪修正彼此的想法。題目沒有標準答案，推進的是集體理解。</p><div class="vid-meta"><span>環境教育</span><span>教育桌遊</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="H7axusXfgNY" data-title="學遊無限：小說迷途" aria-label="播放：學遊無限：小說迷途"><img src="https://i.ytimg.com/vi/H7axusXfgNY/maxresdefault.jpg" alt="學遊無限：小說迷途" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">學遊無限：小說迷途</div><p class="vid-d">玩家用卡牌拼出九個完整故事，每張卡代表一個故事片段。收集與組合的過程同時練敘事能力與協作。</p><div class="vid-meta"><span>國文</span><span>敘事</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="ZJBh7TXgZ6k" data-title="AI 敘事 × AR 科技" aria-label="播放：AI 敘事 × AR 科技"><img src="https://i.ytimg.com/vi/ZJBh7TXgZ6k/maxresdefault.jpg" alt="AI 敘事 × AR 科技" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">AI 敘事 × AR 科技</div><p class="vid-d">用《麥肯錫寫作技術與邏輯思考》的 SCQOR 敘事架構搭配 ChatGPT，把學科概念寫成虛擬情節，再以 Artivive 讓靜態文本在鏡頭下動起來。</p><div class="vid-meta"><span>AR</span><span>敘事架構</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="rYlNO-3i0k8" data-title="浮生茶旅 × AI-KBL" aria-label="播放：浮生茶旅 × AI-KBL"><img src="https://i.ytimg.com/vi/rYlNO-3i0k8/maxresdefault.jpg" alt="浮生茶旅 × AI-KBL" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">浮生茶旅 × AI-KBL</div><p class="vid-d">用「阿薩姆（ASSAM）教學模式」把茶文化史做成影集式的自學歷程。學生拿知識翻新原則卡牌與 AI 對話，最後以公民記者身分寫出倡議報導。</p><div class="vid-meta"><span>多元文化</span><span>自學歷程</span></div></div></article>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="sec-head rise"><h2>Build<span class="zh">教育設計與數位轉型</span></h2></div>
    <div class="vid-grid rise">
      <article class="vid"><button class="vid-thumb" data-yt="2FFCKnHhdqA" data-title="Gemini 與 Google 試算表資料庫串接" aria-label="播放：Gemini 與 Google 試算表資料庫串接"><img src="https://i.ytimg.com/vi/2FFCKnHhdqA/maxresdefault.jpg" alt="Gemini 與 Google 試算表資料庫串接" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">Gemini 與 Google 試算表資料庫串接</div><p class="vid-d">不會寫網頁也能在一小時內做出自用的行政或教學平台。用 Gemini 的 Canvas 產出前端介面，再以 Google Apps Script 建立後台橋樑，讓前端輸入的資料即時寫回試算表。</p><div class="vid-meta"><span>Yian Chen</span><span>實作教學</span></div></div></article>
      <article class="vid"><button class="vid-thumb" data-yt="dy3YTJrdCwI" data-title="從紙本到數位：實現互動學習的轉型" aria-label="播放：從紙本到數位：實現互動學習的轉型"><img src="https://i.ytimg.com/vi/dy3YTJrdCwI/maxresdefault.jpg" alt="從紙本到數位：實現互動學習的轉型" loading="lazy" width="1280" height="720"><span class="play" aria-hidden="true"></span></button><div class="vid-body"><div class="vid-t">從紙本到數位：實現互動學習的轉型</div><p class="vid-d">首度公開心築師塾的高效備課術。把傳統紙本課本拆解，用 Canva 模組化設計轉成互動教材，並示範國文與數學怎麼運用拖拉任務與即時派送。重點在思維的轉化，不是工具的堆疊。</p><div class="vid-meta"><span>備課方法</span><span>數位教材</span></div></div></article>
    </div>
    <p class="panel-note rise" style="margin-top:1.6rem">影片來源：三師爸 Sense Bar、Yian Chen。教學資源包與工作坊預約請見 <a href="https://sites.google.com/view/shinzhuteacher/digitalcourses" target="_blank" rel="noopener" style="border-bottom:1px solid var(--sand)">心築師塾工作室</a>。</p>
  </div>
</section>

<div class="wrap"><nav class="pager rise" aria-label="其他頁面">
  <a href="works.html"><div class="k">返回</div><div class="t">教材與作品</div></a>
  <a href="about.html"><div class="k">關於</div><div class="t">學經歷與獲獎</div></a>
  <a href="index.html"><div class="k">首頁</div><div class="t">總覽</div></a>
</nav></div>

</main>

<div class="lb" id="lb" role="dialog" aria-modal="true" aria-label="影片播放">
  <div class="lb-box"><button class="lb-close" aria-label="關閉">✕</button></div>
</div>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <div class="foot-k">Contact</div>
        <a class="foot-mail" href="mailto:yianchen@mx.nthu.edu.tw">yianchen@mx.nthu.edu.tw</a>
        <div style="margin-top:.9rem;font-size:12.5px;color:var(--ink-muted);letter-spacing:.06em">
          心築師塾工作室　<a href="mailto:shinzhu@gapp.nthu.edu.tw" style="border-bottom:1px solid var(--sand-line)">shinzhu@gapp.nthu.edu.tw</a>
        </div>
      </div>
      <div class="foot-links">
        <div class="foot-k">Links</div>
        <a href="https://github.com/ian3738" target="_blank" rel="noopener">GitHub · ian3738</a>
        <a href="https://sites.google.com/view/shinzhuteacher" target="_blank" rel="noopener">心築師塾工作室</a>
        <a href="https://kf-mvp-2cdbe.web.app/communities" target="_blank" rel="noopener">Knowledge Forum 平台</a>
      </div>
      <div class="seal"><b>國立清華大學</b>教育與學習科技學系<br>NTHU · Learning Sciences</div>
    </div>
    <div class="colophon">
      <span>© 2026 陳奕安</span>
      <span>圖表資料取自實際運作紀錄，社群成員均已匿名</span>
    </div>
  </div>
</footer>

<script src="assets/site.js"></script>
</body>
</html>