CHE-YU WU / STRATA 地層 地層 Strata｜2001–2026，每一年留下來的東西 # 一年的創作現場 沿著聲音、記憶與教學，走進這一年持續發生的實驗。 2017-01-01 — 2017-12-31 33 筆公開紀錄 紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱 [完整紀錄 ↓](https://cheyuwu.com/zh/strata/2017/#lab-records) ****案件紀錄**2017-01-01 / 2017-12-3133 筆 這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄 ### 2017 · 全年 ** ![](https://cheyuwu.com/static/lab/2017/awiclass-gallery.webp) *學生作品* ### 2017 · 01 ** ![](https://cheyuwu.com/static/img/mirror/25e82a257f00.webp) - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - *線上課程* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - ### 2017 · 03 ** ![](https://cheyuwu.com/static/img/mirror/49805527b04b.webp) - ### 2017 · 04 ** ![](https://cheyuwu.com/static/img/mirror/54bedff7fc9a.jpg) - ** ![](https://cheyuwu.com/static/img/mirror/483b40b3c7f5.jpg) - *SVG 動畫* ** ![](https://cheyuwu.com/static/img/mirror/863b1c0e7e91.jpg) - - *三角函數* ** ![](https://cheyuwu.com/static/img/mirror/4a01371bd42d.jpg) - - *三角函數* ** ![](https://cheyuwu.com/static/img/mirror/e399ec066ff9.jpg) *Vue.js* ** ![](https://cheyuwu.com/static/img/mirror/d0cdb314e3de.jpg) - *資料視覺化* ** ![](https://cheyuwu.com/static/lab/2017/repo-taichung-digital.webp) - *展覽網站* ### 2017 · 05 ** ![](https://cheyuwu.com/static/img/mirror/089e7c8ddf06.jpg) - - *Vue.js* ** ![](https://cheyuwu.com/static/lab/2017/tedx-ncue.webp) - *跨領域* ** ![](https://cheyuwu.com/static/img/mirror/191b70cbdc4f.jpg) - - ** ![](https://cheyuwu.com/static/img/mirror/759064a0f432.jpg) - - *募資* ** ![](https://cheyuwu.com/static/img/mirror/f641ec656419.jpg) - ** ![](https://cheyuwu.com/static/lab/2017/repo-itri-2017.webp) - - ### 2017 · 06 ** ![](https://cheyuwu.com/static/img/mirror/af7e4d0a4c08.webp) - *品牌識別* ** ![](https://cheyuwu.com/static/lab/2017/crowdwatch-4300.webp) - - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - *募資* ** ![](https://cheyuwu.com/static/img/mirror/42dd7d255fb5.jpg) - - - *Vue.js* ** ![](https://cheyuwu.com/static/lab/2017/repo-vue-lazy-table.webp) - ### 2017 · 07 ** ![](https://cheyuwu.com/static/img/mirror/6912e52fa15e.jpg) - *Vue.js* ** ![](https://cheyuwu.com/static/img/mirror/32e6946744d7.jpg) - - ### 2017 · 08 ** ![](https://cheyuwu.com/static/lab/2017/repo-dschool-ntu.webp) - *大學網站* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) *教學* ** - *雜學校* ### 2017 · 10 ** ![](https://cheyuwu.com/static/lab/2017/repo-n3xt2017.webp) - *倉庫* ** ![](https://cheyuwu.com/static/lab/2017/mopcon-2017.webp) - *演講* ** - ** ![](https://cheyuwu.com/static/lab/2017/repo-ideasql-instagram-crawler.webp) - ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail2290248@2x.jpg) ![](https://cheyuwu.com/static/img/sketches/923989-sm.webp) ![](https://cheyuwu.com/static/img/mirror/1239323070da-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1635740-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1615617-sm.webp) ![](https://cheyuwu.com/static/img/mirror/39bad087e6fd-sm.webp) ![](https://cheyuwu.com/static/img/mirror/0c23aeb30692-sm.webp) ![](https://cheyuwu.com/static/img/sketches/925596-sm.webp) 創作族譜**818 件每日創作，怎麼一件長出一件**46 個家族畫成有縮圖的分支樹，從 2018 到 2026→ [https://cheyuwu.com/zh/lineage/](https://cheyuwu.com/zh/lineage/) 完整紀錄 ## 逐一閱讀 最新的在最上面，往下越舊。每筆紀錄保留日期依據、公開來源與關係說明。 2017 ![ideaSQL Instagram 爬蟲｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-ideasql-instagram-crawler.webp) 2017-10-31 開源Che-Yu Wu / GitHub README image 2017-10-31 · 已公開 ### ideaSQL Instagram 爬蟲 GitHub 公開倉庫，建立與最後推送都在 2017-10-31，語言為 Python，有一顆星。README 寫明用法：在 mac 上安裝 Firefox 與 python selenium，用 -q 帶 hashtag、-n 帶數量，範例指令抓取端午節與台中兩個標籤各 3,000 筆。 - 爬蟲 - 資料蒐集 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/ideaSQL-instagram-crawler) [GitHub ↗︎](https://github.com/frank890417/ideaSQL-instagram-crawler) [Monoame Design work page ↗︎](https://monoame.com/works/22) 相關紀錄 [→ n3xt2017：雜學校展覽網站的公開倉庫](https://cheyuwu.com/zh/strata/2017/#lab-repo-n3xt2017) · 同一段接案期的公開倉庫 (策展主題) 2017-10-29 文章 2017-10-29 · 已公開 依 SlideShare 頁面標記的發布日期。 ### 以 Vue／GSAP／D3 為核心的網頁視覺動態整合與架構設計（投影片） 68 頁的公開投影片，署名吳哲宇，SlideShare 頁面標記的發布日為 2017-10-29，累積約 1,995 次瀏覽。大綱涵蓋 Vue 框架基礎、動畫數學與速度曲線、用 Vuex 管理狀態以控制動態、把動畫功能抽成元件，以及生命週期與框架整合，敘述方式把資料層、轉換層與呈現層分開處理。 - 投影片 - 狀態管理 來源 [前往原始頁面 ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) [SlideShare ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) 相關紀錄 [→ 以 Vue／GSAP／D3 為核心的網頁視覺動態整合與架構設計：MOPCON 2017](https://cheyuwu.com/zh/strata/2017/#lab-mopcon-2017) · 同一場演講的投影片 (來源關聯) ![以 Vue／GSAP／D3 為核心的網頁視覺動態整合與架構設計：MOPCON 2017｜影片畫面](https://cheyuwu.com/static/lab/2017/mopcon-2017.webp) 2017-10-29 演講MOPCON / YouTube thumbnail 2017-10-29 · 已公開活動紀錄 影片標題標記 R2-Day2，投影片在 SlideShare 上的發布日為 2017-10-29，兩者對上 MOPCON 2017 的第二天。官方影片是 2018-01-19 才上線，MOPCON 2017 的講者頁今日已回 404。 ### 以 Vue／GSAP／D3 為核心的網頁視覺動態整合與架構設計：MOPCON 2017 MOPCON 2017 第二天 R2 場的演講。官方影片的說明寫著，網頁視覺設計與程式開發時因應不同互動需求，需要在各個框架間整合與架構，以資料驅動內容與動態，並說這場分享會討論開發上遇到的案例，從視覺設計到網頁開發，整合 Vue-cli、GSAP、D3 等框架，以及以 Vuex 為使用者輸入狀態中樞、調控多頁面網頁動態的方式。影片長度 49 分 26 秒。 - 演講 - 前端架構 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=XLZ3lahTOWU) [MOPCON on YouTube ↗︎](https://www.youtube.com/watch?v=XLZ3lahTOWU) [SlideShare ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) 相關紀錄 [→ 以 Vue／GSAP／D3 為核心的網頁視覺動態整合與架構設計（投影片）](https://cheyuwu.com/zh/strata/2017/#lab-slides-vue-gsap-d3) · 同一場演講的投影片 (來源關聯) ![n3xt2017：雜學校展覽網站的公開倉庫｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-n3xt2017.webp) 2017-10-01 開源Monoame Design / portfolio image 2017-10-01 · 已公開 ### n3xt2017：雜學校展覽網站的公開倉庫 GitHub 公開倉庫，建立日期 2017-10-01，主要語言標記為 Vue，最後一次推送為 2022-11-03。倉庫的 README 只有倉庫名一行，沒有說明文字，倉庫描述欄為空。 - 倉庫 - 展覽網站 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/n3xt2017) [GitHub ↗︎](https://github.com/frank890417/n3xt2017) [Monoame Design work page ↗︎](https://monoame.com/works/25) [Za Share ↗︎](https://zashare.org/) 相關紀錄 [→ ideaSQL Instagram 爬蟲](https://cheyuwu.com/zh/strata/2017/#lab-repo-ideasql-instagram-crawler) · 同一段接案期的公開倉庫 (策展主題) 2017-08-24 開源 2017-08-24 · 已公開 採 GitHub 的 repo 建立日期，實際開發起點可能更早。 ### pacman_zashare：雜學校的小精靈網頁 公開 repo，README 標示是一個 Vue.js 專案，用 webpack 模板起的。主要語言為 JavaScript，最後一次推送在隔天。Hahow 第二門課的單元列表裡也有一個結合陣列與地圖製作小精靈的 CodePen 範例。 - 雜學校 - 網頁遊戲 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/pacman_zashare) [GitHub ↗︎](https://github.com/frank890417/pacman_zashare) 相關紀錄 [→ DschoolNTU2017：台大創新設計學院網站](https://cheyuwu.com/zh/strata/2017/#lab-repo-dschool-ntu) · 同一個月的公開 repo (策展主題) [→ zashare_website：雜學校網站（大學）](https://cheyuwu.com/zh/strata/2016/#lab-repo-zashare-website) · 同一個雜學校客戶線 (策展主題) ![Hahow 課程封面：動畫互動網頁特效入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-08-16 課程Che-Yu Wu / Hahow course cover 2017-08-16 · 已公開 採 Hahow API 的 publishTime，落在本年窗口起點前 24 天，課程本身的錄製與釋出延續到 2018 年 8 月，整段製課期都在窗口內。課程頁今日（2026-09-13）讀到的數字為 6,229 位學生、4.98 分（225 則評價）、總片長 185,106 秒與 954,373 次瀏覽，這些是八年後的累積值。 ### 動畫互動網頁特效入門（JS/CANVAS）：Hahow 第二門課 Hahow 公開 API 把這門課的 publishTime 記為 2017-08-16，課程頁標題寫《動畫互動網頁特效入門（JS/CANVAS）》，課程說明寫從零快速入門互動網頁、JS 與繪圖實戰範例，並學習 Vue.js 整合前端網頁。他自己的文章把製課期寫成 2017 年 8 月到 2018 年 8 月，內容橫跨基礎網頁、JS 入門、Canvas 與特效動畫到 Vue 進階應用，超過 60 個範例與 400 張以上投影片，募資在不到十個小時達成超過 600%，文章寫成時學生數接近 2,300 位。 - 教學 - 數學 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public API ↗︎](https://api.hahow.in/api/courses/monoame-webdesign2) [cheyuwu.com ↗︎](https://cheyuwu.com/writing/2018-effects-course-brewing/) 相關紀錄 [→ 釀造一門結合網頁、設計、數學與特效的線上程式課程（2018）](https://cheyuwu.com/zh/strata/2018/#lab-writing-effects-brewing) · 同一門課的製作紀錄 (來源關聯) [→ 動態互動網頁特效入門：結合物件導向與數學建立 agar.io（2018）](https://cheyuwu.com/zh/strata/2018/#lab-live-agario) · 課程範例的直播版本 (策展主題) [→ Project 12 Space Invader（2018）](https://cheyuwu.com/zh/strata/2018/#lab-codepen-space-invader) · 同期課程的專案編號體系 (策展主題) [→ 從不只是一門線上課程，而是一場推動進化的豪賭（2018）](https://cheyuwu.com/zh/strata/2018/#lab-writing-hahow-bet) · 文中提到的第二門課 (策展主題) ![Hahow 課程封面：動畫互動網頁特效入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-08-16 課程Che-Yu Wu / Hahow course cover 2017-08-16 · 已公開 採 Hahow 公開 API 的上線時間。 ### 動畫互動網頁特效入門正式上線 Hahow 公開 API 記下第二門課的上線時間為 2017-08-16，共 8 章，影片總長 185106 秒，約 51 小時。課程頁把內容分成四大系列單元，寫著以 2300 分鐘帶你走遍網頁特效的世界，四個階段分別是 HTML 與 CSS、JavaScript 程式與動畫、數學與物件導向下的 Canvas 互動運算藝術、Vue.js 整合應用，另有 VueX 與 Vue-router、GSAP、D3.js、Three.js 四個解鎖加碼單元。 - 線上課程 - Canvas 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow 課程頁 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) 相關紀錄 [→ 動畫互動網頁特效入門：募資上線與直播說明](https://cheyuwu.com/zh/strata/2017/#lab-course2-fundraising-open) · 同一門課的正式上線 (策展主題) ![DschoolNTU2017：台大創新設計學院網站｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-dschool-ntu.webp) 2017-08-02 開源Monoame Design / portfolio image 2017-08-02 · 已公開 採 GitHub 的 repo 建立日期，實際開發起點可能更早。 ### DschoolNTU2017：台大創新設計學院網站 公開 repo，描述寫著 Dschool NTU Website，主要語言標為 Vue，最後一次推送在 2017-08-22。repo 沒有 README。 - 大學網站 - Vue.js 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/DschoolNTU2017) [GitHub ↗︎](https://github.com/frank890417/DschoolNTU2017) 相關紀錄 [→ pacman_zashare：雜學校的小精靈網頁](https://cheyuwu.com/zh/strata/2017/#lab-repo-pacman-zashare) · 同一個月的公開 repo (策展主題) ![老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/32e6946744d7.jpg) 2017-07-21 文章Che-Yu Wu / YouTube 2017-07-21 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯 承接上一集的簡易版便利貼，這次除了調整細節與動畫之外，也串接 Firebase 資料庫，讓便利貼牆可以多人同時編輯分享。影片說明列出這次會分享 Vue.js 的資料操作與整理、transition 進出場動畫，以及串接 Firebase 保存資料與即時更新。 - Firebase - 多人協作 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) 相關紀錄 [→ 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-tictactoe) · 同一段串 Firebase 的實驗 (策展主題) [→ 老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-sticky-wall-1) · 同一組的第二集 (來源關聯) ![老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/6912e52fa15e.jpg) 2017-07-14 文章Che-Yu Wu / YouTube 2017-07-14 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1 影片說明寫著靈感總是來之匆匆，沒有好好記下來又是一陣絞盡腦汁，因此用 Vue 實作便利貼，並分享網頁上 drag and drop 的一些有趣應用。 - Vue.js - 拖放 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=xOAHnDsd2BQ) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=xOAHnDsd2BQ) 相關紀錄 [→ 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-sticky-wall-2) · 同一組的第二集 (來源關聯) ![vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-vue-lazy-table.webp) 2017-06-26 開源Che-Yu Wu / GitHub README image 2017-06-26 · 已公開 採 GitHub 的 repo 建立日期，實際開發起點可能更早。 ### vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件 公開 repo，描述寫著一個用簡單語法、以最少設定顯示複雜資料的 Vue 表格元件。README 的理由寫得很直白，後端有時給了太多型態的資料，懶得一一標欄位時，這個元件只要把資料傳進去就好，並示範最小設定下自動命名欄位。這是他這段時間的公開 repo 裡收到最多星星的一個，目前 6 顆。 - Vue.js - 開源元件 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/vue-lazy-table) [GitHub ↗︎](https://github.com/frank890417/vue-lazy-table) 相關紀錄 [→ 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-tictactoe) · 同一段 Vue.js 密集期 (策展主題) ![老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/42dd7d255fb5.jpg) 2017-06-22 文章Che-Yu Wu / YouTube 2017-06-22 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧 影片說明寫著苦思很久，想找一個不會太難又能講到東西的題目，於是想起小時候的回憶，用 Vue.js 實作遊戲邏輯，刻一個簡潔有力的介面。說明附上 CodePen 範例，以及一個串 Firebase 的多人遊玩版本。 - Vue.js - 遊戲邏輯 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=jhOMF8DRVaY) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=jhOMF8DRVaY) 相關紀錄 [→ 老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-calendar) · 同一季週四寫程式系列 (策展主題) [→ 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-sticky-wall-2) · 同一段串 Firebase 的實驗 (策展主題) [→ vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件](https://cheyuwu.com/zh/strata/2017/#lab-repo-vue-lazy-table) · 同一段 Vue.js 密集期 (策展主題) ![Hahow 課程封面：動畫互動網頁特效入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-06-17 課程Che-Yu Wu / Hahow course cover 2017-06-17 · 已公開 採 Hahow 公開 API 的募資截止時間。 ### 動畫互動網頁特效入門：募資期間結束 Hahow 公開 API 把第二門課的募資截止時間記為 2017-06-17。募資期間的媒體報導寫著專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名，文章結尾標示課程倒數最後 2 天。 - 募資 - 學生人數 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) [群眾觀點 CrowdWatch ↗︎](https://crowdwatch.tw/post/2735/) 相關紀錄 [→ 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/strata/2017/#lab-crowdwatch-4300) · 報導寫的那次募資 (來源關聯) **群眾觀點 CrowdWatch** ![群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做｜報導配圖](https://cheyuwu.com/static/lab/2017/crowdwatch-4300.webp) 2017-06-13 報導CrowdWatch / article image 2017-06-13 · 已公開 採頁面 metadata 的發布時間 2017-06-13，版面上顯示的日期是 2017 年 6 月 14 日。 ### 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做 群眾觀點的報導，作者郭丞哲時任貝殼放大產品設計師。文章寫一年前的《動態互動網頁程式入門》帶領近 3000 位同學走入前端網頁，一年後的《動畫互動網頁特效入門》專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名。文中稱他為交大學生、設計師、網頁全端雙棲工程師、墨雨設計創辦人，剛滿 22 歲，代表作列了台北聲音地景計畫、雜學校 ZaShare、複雜生活節，並寫到他今年初創立粉絲頁老闆來點寇汀吧，每週四 22:00 直播。文章把課程設計的切入點歸在成就感與讓你的產出能被看見，並記下兩個對抗低完課率的機制，贊助者專屬臉書社團與客製化的作業收集網站。 - 線上課程 - 報導 來源 [前往原始頁面 ↗︎](https://crowdwatch.tw/post/2735/) [群眾觀點 CrowdWatch ↗︎](https://crowdwatch.tw/post/2735/) [INSIDE 授權轉載版 ↗︎](https://www.inside.com.tw/article/9629-how-to-create-successful-online-curriculum-fund-raising-plan) 相關紀錄 [→ TEDxNCUE「嚮」：跨領域結合創造可能性](https://cheyuwu.com/zh/strata/2017/#lab-tedx-ncue) · 同一段時間的對外身份 (策展主題) [→ 動畫互動網頁特效入門：募資上線與直播說明](https://cheyuwu.com/zh/strata/2017/#lab-course2-fundraising-open) · 報導這次募資的文章 (來源關聯) [→ 動畫互動網頁特效入門：募資期間結束](https://cheyuwu.com/zh/strata/2017/#lab-course2-campaign-close) · 報導寫的那次募資 (來源關聯) ![n3xtcon 品牌識別與網站｜作品頁主視覺](https://cheyuwu.com/static/img/mirror/af7e4d0a4c08.webp) 2017-06 原型Che-Yu Wu 2017-06 · 已公開 採官網作品頁標示的期間起點，期間後半已落在本年窗口之外。 ### Unleash the Future：n3xtcon 品牌識別與網站 官網作品頁把期間寫成 06/2017 到 12/2017，客戶是洛杉磯的科技論壇 n3xtcon。頁面說明對方要一套能同時延伸到網站與線下印刷的完整形象，任務是從原本 logo 的四個三角形出發重做品牌。幾次提案後客戶選了重疊的概念，新 logo 是一條折疊並自我交疊的緞帶。網站採板塊與漂浮的概念，在深藍空間裡放螢光物件，並用 Pixi.js 做行星的動態效果。 - 品牌識別 - WebGL 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/project/1/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/1/) 相關紀錄 [→ 台北聲音地景計畫：捷運站體音樂徵選互動網站](https://cheyuwu.com/zh/strata/2017/#lab-taipei-metro-soundscape) · 同一年的委託案 (策展主題) ![itri2017：工研院家庭用電家計簿的前端 repo｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-itri-2017.webp) 2017-05-30 開源Monoame Design / portfolio image 2017-05-30 · 已公開 採 GitHub 的 repo 建立日期，實際開發起點可能更早。 ### itri2017：工研院家庭用電家計簿的前端 repo 公開 repo，主要語言標為 Vue，建立時間落在官網作品頁記的工研院案期間之內。README 只有兩行標題，沒有進一步說明。 - Vue.js - 委託案 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/itri2017) [GitHub ↗︎](https://github.com/frank890417/itri2017) 相關紀錄 [→ 工研院綠能所家庭用電家計簿：3D 場景與資料視覺化](https://cheyuwu.com/zh/strata/2017/#lab-itri-electricity-journal) · 同一個案子的公開 repo (來源關聯) [→ TaichungDigital2017：台中展覽網站](https://cheyuwu.com/zh/strata/2017/#lab-repo-taichung-digital) · 同一段接案期的 repo (策展主題) ![老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/f641ec656419.jpg) 2017-05-25 文章Che-Yu Wu / YouTube 2017-05-25 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧 直播講解用 Vue.js 處理月曆顯示的動態樣式，除了用資料計算與排版月曆之外，還善用計算屬性設定當天行程小點與假日顯示等樣式，時間夠的話再做點擊後編輯待辦事項。 - Vue.js - 計算屬性 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=kMGUJMThb-U) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=kMGUJMThb-U) 相關紀錄 [→ 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-tictactoe) · 同一季週四寫程式系列 (策展主題) ![今天不來點寇汀，來點新課程吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/759064a0f432.jpg) 2017-05-18 課程Che-Yu Wu / YouTube 2017-05-18 · 已公開 採 Hahow 公開 API 的募資起算時間，直播預告寫的直播日為 5/18。 ### 動畫互動網頁特效入門：募資上線與直播說明 Hahow 公開 API 記下第二門課《動畫互動網頁特效入門（JS/CANVAS）》的募資起算時間為 2017-05-18。同一天的直播預告寫著睽違了一年，今天不來點寇汀，來點新課程吧，並說明這次重點放在 JS、Canvas 與 Vue.js，當晚十點整直播即時說明課程與解答問題，預告裡也提到上一堂課有超過兩千八百人參與。 - 募資 - Canvas 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) [哲宇寇汀吧 YouTube 直播預告 ↗︎](https://www.youtube.com/watch?v=SgoZve6UhRU) 相關紀錄 [→ 動畫互動網頁特效入門正式上線](https://cheyuwu.com/zh/strata/2017/#lab-course2-published) · 同一門課的正式上線 (策展主題) [→ 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/strata/2017/#lab-crowdwatch-4300) · 報導這次募資的文章 (來源關聯) ![老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/191b70cbdc4f.jpg) 2017-05-11 文章Che-Yu Wu / YouTube 2017-05-11 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧 接續前一集用 Canvas 畫虛擬介面時鐘的概念，除了極座標之外，還牽涉多物件的更新與繪製，做出一個虛擬的雷達掃描介面。影片說明附上 CodePen 範例連結。 - Canvas - 極座標 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=fVAE28YTCMs) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=fVAE28YTCMs) 相關紀錄 [→ 老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-carousel) · 同一季週四寫程式系列 (策展主題) [→ 老闆來點寇汀：用數學土炮畫一個時鐘](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-trigonometry-2) · 接續同一條 Canvas 介面線 (來源關聯) ![TEDxNCUE「嚮」：跨領域結合創造可能性｜影片畫面](https://cheyuwu.com/static/lab/2017/tedx-ncue.webp) 2017-05-07 演講TEDx Talks / YouTube thumbnail 2017-05-07 · 已公開活動紀錄 採 TED 活動頁的日期。履歷把這場記在 2016 年，與活動頁不符，這裡採活動頁；影片上傳日為 2018-01-10，晚於活動。 ### TEDxNCUE「嚮」：跨領域結合創造可能性 TED 的官方活動頁把 TEDxNCUE 記在 2017 年 5 月 7 日下午 1:30 到 6:30，地點在彰化縣，主題譯為 Forward。他的場次題目是跨領域結合創造可能性，講的是用腦袋生活、分析解構再結合，錄影後來上到 TEDx Talks 頻道，長度 18 分 09 秒。 - 跨領域 - 演講 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=bl5MrZ6GA98) [TED 活動頁 ↗︎](https://www.ted.com/tedx/events/22851) [TEDx Talks on YouTube ↗︎](https://www.youtube.com/watch?v=bl5MrZ6GA98) 相關紀錄 [→ 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/strata/2017/#lab-crowdwatch-4300) · 同一段時間的對外身份 (策展主題) ![老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/089e7c8ddf06.jpg) 2017-05-04 文章Che-Yu Wu / YouTube 2017-05-04 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧 直播講解輪播在網站裡很常用，但座標計算與更新很繁瑣，於是示範如何用 Vue.js 串連資料快速打造輪播，並分享一些常用小技巧。影片說明附上 CodePen 範例連結。 - Vue.js - 介面元件 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=GFMnJKy_910) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=GFMnJKy_910) 相關紀錄 [→ 老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-weather-map) · 同一季週四寫程式系列 (策展主題) [→ 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-radar) · 同一季週四寫程式系列 (策展主題) ![TaichungDigital2017：台中展覽網站｜作品畫面](https://cheyuwu.com/static/lab/2017/repo-taichung-digital.webp) 2017-04-30 開源Monoame Design / portfolio image 2017-04-30 · 已公開 採 GitHub 的 repo 建立日期，實際開發起點可能更早。 ### TaichungDigital2017：台中展覽網站 公開 repo，描述只寫 taichung exhibition，主要語言標為 Vue，最後一次推送在 2017-06-24。README 只有標題一行，展覽名稱與合作單位未能從公開頁面確認。 - 展覽網站 - Vue.js 來源 [前往原始頁面 ↗︎](https://github.com/frank890417/TaichungDigital2017) [GitHub ↗︎](https://github.com/frank890417/TaichungDigital2017) 相關紀錄 [→ itri2017：工研院家庭用電家計簿的前端 repo](https://cheyuwu.com/zh/strata/2017/#lab-repo-itri-2017) · 同一段接案期的 repo (策展主題) ![老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/d0cdb314e3de.jpg) 2017-04-27 文章Che-Yu Wu / YouTube 2017-04-27 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧 直播講解如何在 Illustrator 中把地圖的資料附在 SVG 上，在網頁中動態載入，並用 Vue.js 切換顯示的天氣資料。影片說明附上 CodePen 範例，以及後來補寫的直播筆記連結。YouTube 頁面標示 13270 次觀看，是這一季裡觀看數最高的一支。 - 資料視覺化 - SVG 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=eHrGB5EHtF4) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=eHrGB5EHtF4) 相關紀錄 [→ 老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-carousel) · 同一季週四寫程式系列 (策展主題) ![老闆來點寇汀：Vue.js 組件與即時關鍵字反白｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/e399ec066ff9.jpg) 2017-04-21 文章Che-Yu Wu / YouTube 2017-04-21 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：Vue.js 組件與即時關鍵字反白 直播講解資料載入、Vue 組件、map 與 filter，以及正規表達式的一些概念，並用雜學校的資料當範例，順帶講自己做這個功能遇到的雷點。影片說明附上 CodePen 範例連結。 - Vue.js - 資料處理 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=V-BLAZbSV1s) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=V-BLAZbSV1s) 相關紀錄 [→ zashare_website：雜學校網站（大學）](https://cheyuwu.com/zh/strata/2016/#lab-repo-zashare-website) · 同一個雜學校網站線 (策展主題) ![老闆來點寇汀：用數學土炮畫一個時鐘｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/4a01371bd42d.jpg) 2017-04-20 文章Che-Yu Wu / YouTube 2017-04-20 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：用數學土炮畫一個時鐘 接續上一集，直播講解如何理解三角函數用於繪圖或網頁動畫，以及如何製作一個動態的時鐘。影片說明附上 CodePen 範例連結。 - 三角函數 - Canvas 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=AOcSUTNTXCk) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=AOcSUTNTXCk) 相關紀錄 [→ 老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-trigonometry-1) · 同一組的第二集 (來源關聯) [→ 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-radar) · 接續同一條 Canvas 介面線 (來源關聯) ![老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/863b1c0e7e91.jpg) 2017-04-06 文章Che-Yu Wu / YouTube 2017-04-06 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1 從抽象的數學走到實際的動畫。直播講解三角函數基礎概念、如何理解數學在程式中的應用，並體驗一些基礎三角函數應用手法。影片說明附上第二集連結，也附上 Hahow 第一門課的連結。 - 三角函數 - 動畫原理 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=CUk3end28rM) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=CUk3end28rM) 相關紀錄 [→ 老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-hotel-rooms) · 同一季週四寫程式系列 (策展主題) [→ 老闆來點寇汀：用數學土炮畫一個時鐘](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-trigonometry-2) · 同一組的第二集 (來源關聯) ![老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/483b40b3c7f5.jpg) 2017-04-02 文章Che-Yu Wu / YouTube 2017-04-02 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站 直播講解如何在 Illustrator 裡製作場景、設定動畫觸發，並實際示範捷運地景音樂網站的互動製作。影片說明寫著要讓蔥油餅阿伯展現獨門絕技。這支是這一季裡觀看數較高的一支，YouTube 頁面標示 10882 次觀看。 - SVG 動畫 - Illustrator 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=oB3lv1wW_I4) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=oB3lv1wW_I4) 相關紀錄 [→ 台北聲音地景計畫：捷運站體音樂徵選互動網站](https://cheyuwu.com/zh/strata/2017/#lab-taipei-metro-soundscape) · 直播裡拆解這個案子的動畫 (來源關聯) ![老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單｜YouTube 影片縮圖](https://cheyuwu.com/static/img/mirror/54bedff7fc9a.jpg) 2017-04-02 文章Che-Yu Wu / YouTube 2017-04-02 · 已公開 採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。 ### 老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單 直播做一個房間選擇器，可以增減房間、調整打折數、分別訂房，並動態顯示結帳結果。影片說明寫著會講解 Vue.js 組件概念、屬性與方法的繼承，從零開始刻出一個訂房前端頁面。YouTube 頁面標示 10961 次觀看。 - Vue.js - 元件 來源 [前往原始頁面 ↗︎](https://www.youtube.com/watch?v=uLhXpzsv5kk) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=uLhXpzsv5kk) 相關紀錄 [→ 老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-trigonometry-1) · 同一季週四寫程式系列 (策展主題) ![家庭用電家計簿網頁｜作品頁主視覺](https://cheyuwu.com/static/img/mirror/49805527b04b.webp) 2017-03 原型Che-Yu Wu 2017-03 · 已公開 採官網作品頁標示的期間起點。 ### 工研院綠能所家庭用電家計簿：3D 場景與資料視覺化 官網作品頁把期間寫成 03/2017 到 05/2017，客戶是工研院綠能與環境研究所。頁面說明原本的網頁還帶著 Flash 與過時的互動視覺，於是改成 3D 場景，團隊做了五個 3D 房間，他負責網頁的體驗優化，用泡泡圖把全國用電資料視覺化，再引導使用者填表。前端用 Vue.js，填完表就能看到自己的用電視覺化結果。 - 資料視覺化 - 3D 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/project/-L3BF-Vyu4MIt4bQ_jDa/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/-L3BF-Vyu4MIt4bQ_jDa/) [saving.energypark.org.tw ↗︎](https://saving.energypark.org.tw/) 相關紀錄 [→ itri2017：工研院家庭用電家計簿的前端 repo](https://cheyuwu.com/zh/strata/2017/#lab-repo-itri-2017) · 同一個案子的公開 repo (來源關聯) ![Hahow 課程封面：動畫互動網頁程式入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) 2017-01-26 課程Che-Yu Wu / Hahow course cover 2017-01-26 · 已公開 課程頁的更新日誌只寫月日，年份依同一份日誌的「7/4 課程募資期間圓滿結束」與 Hahow 公開 API 的募資截止 2016-07-03、上線 2016-09-01 推定。 ### 動畫互動網頁程式入門：課程共筆開放共同編輯 課程頁更新日誌寫著 1/26 新增課程共筆，內容包含學習目錄與推薦時間、課程勘誤補充、推薦書籍，並註明持續新增、可以一起編輯。課程的維護因此從單向影片轉成學生能一起改的文件。 - 共筆 - 課程營運 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow 課程頁更新日誌 ↗︎](https://hahow.in/cr/monoame-webdesign1) 相關紀錄 [→ 動畫互動網頁程式入門：全部單元上線完畢](https://cheyuwu.com/zh/strata/2017/#lab-course1-all-units-online) · 同一份更新日誌的下一則 (來源關聯) ![Hahow 課程封面：動畫互動網頁程式入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) 2017-01-17 課程Che-Yu Wu / Hahow course cover 2017-01-17 · 已公開 課程頁的更新日誌只寫月日，年份依同一份日誌的「7/4 課程募資期間圓滿結束」與 Hahow 公開 API 的募資截止 2016-07-03、上線 2016-09-01 推定。 ### 動畫互動網頁程式入門：全部單元上線完畢 課程頁更新日誌記下 1/17 全部單元上線完畢。依 Hahow 公開 API，這門課共 13 章，影片總長 104726 秒，也就是 29 小時左右，課程頁另標示突破 8000% 集資成果與超過 4000 人一同學習。 - 線上課程 - 交付 來源 [前往原始頁面 ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow 課程頁更新日誌 ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/56189df9df7b3d0b005c6639) 相關紀錄 [→ 動畫互動網頁程式入門：課程共筆開放共同編輯](https://cheyuwu.com/zh/strata/2017/#lab-course1-cowrite) · 同一份更新日誌的下一則 (來源關聯) ![台北聲音地景計畫互動網站｜作品頁主視覺](https://cheyuwu.com/static/img/mirror/25e82a257f00.webp) 2017-01 原型Che-Yu Wu 2017-01 · 已公開 採官網作品頁標示的期間起點。taipeisoundscape.com 現在顯示的是 2018 年那一屆，2017 年版本的線上狀態未能從公開頁面確認。 ### 台北聲音地景計畫：捷運站體音樂徵選互動網站 官網作品頁把期間寫成 01/2017 到 03/2017，客戶列為豐collect音樂製作與臺北市政府捷運工程局。頁面說明這個案子與音樂製作方合作辦理 2017 年捷運地景音樂徵選，收集在地音樂家的作品，並在東門、松山機場、龍山寺等站點採集自然音、誦經聲與攤販的招呼聲。市府原本只要一個放報名資訊的簡單網站，他提案改成能把錄音播回給乘客聽的網站，讓那些平常被忽略的聲音重新被聽見。 - 聲音 - 公共委託 來源 [前往原始頁面 ↗︎](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) [taipeisoundscape.com ↗︎](https://taipeisoundscape.com/en) 相關紀錄 [→ 老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站](https://cheyuwu.com/zh/strata/2017/#lab-boss-coding-metro-svg) · 直播裡拆解這個案子的動畫 (來源關聯) [→ Unleash the Future：n3xtcon 品牌識別與網站](https://cheyuwu.com/zh/strata/2017/#lab-n3xtcon-brand) · 同一年的委託案 (策展主題) ![2017 awiclass 同學作品集網站｜作品畫面](https://cheyuwu.com/static/lab/2017/awiclass-gallery.webp) 2017 原型Monoame Design / portfolio image 2017 · 已公開 網址與頁面都只標 2017，確切上線日期未能從公開頁面確認。 ### 2017 awiclass 同學作品集網站 兩門 Hahow 課程的課程頁都把同學作品集連到 2017.awiclass.monoame.com，第一門課對應 proj/1，第二門課對應 proj/2。站名掛在墨雨設計的網域下，頁面標題寫著 Hahow 動態互動網頁程式入門，收的是學生交上來的作品與練習。 - 學生作品 - 教學工具 來源 [前往原始頁面 ↗︎](https://2017.awiclass.monoame.com/proj/2) [awiclass 同學作品集 ↗︎](https://2017.awiclass.monoame.com/proj/2) [Hahow 課程頁的作品集連結 ↗︎](https://hahow.in/cr/monoame-webdesign2) 相關紀錄 [→ 動畫互動網頁程式入門：即時作品集合系統上線（大學）](https://cheyuwu.com/zh/strata/2016/#lab-course1-works-collector) · 課程頁記下的作品集合系統 (來源關聯) [→ Animated-Web-Course：動態網頁程式設計課程的配套工具（大學）](https://cheyuwu.com/zh/strata/2016/#lab-repo-animated-web-course) · 同一套作品集系統的後端 (來源關聯)