mathruffian-dot HTML 教學簡報
交付目標
建立可直接以瀏覽器開啟的離線簡報。預設使用原生 HTML、CSS、JavaScript，不要求建置工具或網路服務。
工作流
- 讀取來源內容並確認受眾、場合、時間、比例與是否離線。
- 建立頁面表：頁碼、角色、唯一主張、理解任務、版型與互動。
- 複製
assets/starter/index.html到工作目錄。 - 替換範例內容，保留必要的導覽、鍵盤與列印功能。
- 將圖片、字體與資料放入本地
assets/，避免不必要的外部依賴。 - 使用瀏覽器逐頁測試桌面與窄螢幕版面。
- 檢查主控台錯誤、連結、鍵盤、列印與離線開啟。
- 交付 HTML 與資產資料夾。
必備功能
- 左右方向鍵、PageUp／PageDown、Home／End 換頁。
- 畫面上的上一頁、下一頁按鈕。
- 目前頁碼與總頁數。
- 章節或投影片導覽。
- 講者備註放在語意清楚但預設隱藏的元素中。
?print=1或列印樣式可一次顯示所有頁面。- URL hash 記住目前頁面，重新整理後可回到原頁。
版面規則
- 以 16:9 投影為預設，內容在 1280 × 720 與 1920 × 1080 均可讀。
- 一頁一個主張，最多三個主要元素。
- 使用 CSS Grid／Flexbox 建立穩定排版。
- 文字使用
clamp()控制響應式字級。 - 不依賴滑動長頁閱讀；每張投影片必須完整落在視窗內。
- 動畫必須尊重
prefers-reduced-motion。
完整規則見 references/html-deck-principles.md。
安全與相容性
- 不把 API key、token 或敏感資料寫入 HTML。
- 不使用遠端腳本執行不明程式。
- 若需 KaTeX、圖表函式庫或字體，離線需求下應下載本地副本。
- 互動元件可用鍵盤操作，文字與背景須有足夠對比。
Browser QA
完成後必須實際開啟並檢查：
- 第一頁、最後一頁與至少一張內容密集頁。
- 方向鍵、按鈕、Home／End、hash 與列印模式。
- 1280 × 720 及窄螢幕版面。
- 無水平捲動、文字裁切、元素重疊與主控台錯誤。
交付
回報入口 HTML 絕對路徑、投影片數、使用方式、瀏覽器檢查結果與任何外部依賴。