南投縣政府社會及勞動局旗艦官網數位平台建置採購案

# 南投縣政府社會及勞動局<br/>旗艦官網數位平台建置採購案

## 服務建議書簡報

<p style="font-size:0.8em;"><strong>投標廠商</strong>：提特斯科技有限公司（統一編號 97512668）<br/><strong>負責人</strong>：楊嘉豪　　<strong>案號</strong>：115-10-11-003-E</p>

---

## 案件理解與本日導覽

**升格後首座旗艦入口**
社會及勞動局升格後之一級機關，現行內容分散於共構之社會福利資訊網，本案建置一座整合以下面向的獨立旗艦官網：

- **資訊公開**：政府資訊公開專區（預算／執行成效／標案）
- **數位展示**：一致而現代之視覺呈現九科室業務
- **互動溝通**：串接社勞局＋托育服務兩個 LINE 官方帳號
- **數位無障礙**：以 AA 等級為設計基準

</div>
<div style="font-size:0.66em;">

<div style="display:flex; flex-direction:column; gap:0.45em;">
<div style="display:flex; align-items:center; gap:0.7em; background:#EFF6FF; border-left:5px solid #2563EB; border-radius:8px; padding:0.5em 0.75em;">
<div style="flex:0 0 1.8em; height:1.8em; border-radius:50%; background:#2563EB; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold;">一</div>
<div style="text-align:left;"><strong>平台核心</strong><br/><span style="font-size:0.78em; color:#475569;">CMS 自主開發・RWD・無障礙・LINE・移轉</span></div>
</div>
<div style="display:flex; align-items:center; gap:0.7em; background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:8px; padding:0.5em 0.75em;">
<div style="flex:0 0 1.8em; height:1.8em; border-radius:50%; background:#7c3aed; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold;">二</div>
<div style="text-align:left;"><strong>資訊安全防護</strong><br/><span style="font-size:0.78em; color:#475569;">普級七構面・OWASP・通報應變・第三方檢測</span></div>
</div>
<div style="display:flex; align-items:center; gap:0.7em; background:#ECFDF5; border-left:5px solid #16A34A; border-radius:8px; padding:0.5em 0.75em;">
<div style="flex:0 0 1.8em; height:1.8em; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold;">三</div>
<div style="text-align:left;"><strong>專案管理與履約經驗</strong><br/><span style="font-size:0.78em; color:#475569;">組織治理・7 人團隊・跨年度期程</span></div>
</div>
<div style="display:flex; align-items:center; gap:0.7em; background:#FFFBEB; border-left:5px solid #d97706; border-radius:8px; padding:0.5em 0.75em;">
<div style="flex:0 0 1.8em; height:1.8em; border-radius:50%; background:#d97706; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold;">四</div>
<div style="text-align:left;"><strong>保固與品質</strong><br/><span style="font-size:0.78em; color:#475569;">保固 SLA・教育訓練・品管・風險</span></div>
</div>
</div>

</div>
</div>
<p class="footer-ref">(對照服務建議書 企劃書概述 p.1；壹之一 p.5)</p>

---

## 一座平台、四層回應

![四大回應主軸導覽](diagrams/67-summary-response-map.svg)

</div>
<div style="font-size:0.66em;">

- **平台核心**：ASP.NET（C#）自主開發 CMS，非套用未經資安強化之開源套件；前台 RWD 多螢＋數位無障礙 AA
- **安全基盤**：對齊資通系統防護基準（普級）；OWASP Top 10＋SSDLC 內建；敏感個資去識別化或加密、全站 TLS
- **專案治理**：跨年度階段查核點；負責人楊嘉豪任 24 小時單一窗口＋代理人備援
- **維運轉移**：保固至 117/12/31；教育訓練＋數位影音；換廠商無條件技術移交

</div>
</div>
<p class="footer-ref">(對照服務建議書 執行摘要 p.3)</p>

---

## CMS 核心：自主開發

![CMS 核心：ASP.NET（C#）自主開發引擎](diagrams/04-cms-core-inhouse.svg) 
<p class="footer-ref">(對照服務建議書 貳之一 p.9)</p>

---

## CMS 後台管理（一）：選單與權限

<p style="font-size:0.6em; margin:0 0 0.45em;">後台 Web-Based <strong>免安裝用戶端</strong>、前後台區隔；多子站／主題專區之選單、權限、視覺<strong>獨立配置</strong>——以下皆為 Titus CMS 後台實際畫面：</p>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-menus.png" style="width:100%; height:375px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">選單管理：三層樹狀目錄、拖曳排序——三次點擊內抵達</p></div>
<div><img src="images/titus-admin-accounts.png" style="width:100%; height:375px; object-fit:contain; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">帳號權限：單位編輯綁定專區——對應九科室分眾維護</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之四 p.9)</p>

---

## CMS 後台管理（二）：編輯與版型

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-pagebuilder.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">頁面編輯：積木式區塊組頁、樣式隨點隨換、即時調整版面</p></div>
<div><img src="images/titus-admin-gallery.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">版型中心：整頁版型／區塊組合／主題配色一鍵套用</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之四 p.9)</p>

---

## CMS 後台管理（三）：訊息與檔案

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-news.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">訊息發布：分類・置頂・排程上下架——草稿確認後始對外發布</p></div>
<div><img src="images/titus-admin-files.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">檔案下載：申請表單／法規／成果報告分類，逾期自動標示</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之四 p.9)</p>

---

## CMS 後台管理（四）：媒體與稽核

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-media.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">媒體庫：全站圖像集中管理——上稿即提示替代文字（無障礙）</p></div>
<div><img src="images/titus-admin-audit.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">操作紀錄：登入與操作全程留痕——歷程唯讀，後台不提供刪改</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之四 p.9)</p>

---

## 前台效能雙軌設計

![前台效能：頁面快取＋靜態化生成雙軌設計](diagrams/08-cache-dual-track.svg) 
<p class="footer-ref">(對照服務建議書 貳之四 p.9)</p>

---

## Titus 展示站佐證（一）：前台版型

<p style="font-size:0.6em; margin:0 0 0.45em;">公開展示站 <strong>cms-demo.ttechnology.com.tw</strong>——<strong>23 種內容區塊・66 個區塊樣式・33 套整頁版型</strong>：</p>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-front-product.png" style="width:100%; height:360px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">產品官網（積木式 CMS）</p></div>
<div><img src="images/titus-front-travel.png" style="width:100%; height:360px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">觀光旅遊示範站</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之二 p.9)</p>

---

## Titus 展示站佐證（二）：前台版型

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-front-cafe.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">咖啡品牌版型</p></div>
<div><img src="images/titus-front-gov.png" style="width:100%; height:400px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">政府與公共服務示範站</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之二 p.9)</p>

---

## Titus 展示站佐證（三）：後台編輯

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-blocks.png" style="width:100%; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">後台：新增區塊選擇器</p></div>
<div><img src="images/titus-admin-drag.png" style="width:100%; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">後台：區塊拖曳排序</p></div>
</div>
<p class="footer-ref">(對照服務建議書 貳之二 p.9)</p>

---

## Titus 展示站佐證（四）：後台管理

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-admin-publish.png" style="width:100%; height:400px; object-fit:contain; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">後台：頁面設定與排程發布</p></div>
<div><img src="images/titus-admin-template.png" style="width:100%; height:400px; object-fit:contain; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">後台：版型中心（33 套版型統一管理）</p></div>
</div>
<p style="font-size:0.5em; color:#475569; margin-top:0.35em;"><strong>本案技術對應</strong>：依需求指定之 ASP.NET（C#）自主實作、MSSQL 共構、部署 IIS；展示站之設計與體驗完整移植，非現成品直接套用。</p>
<p class="footer-ref">(對照服務建議書 貳之二 p.9)</p>

---

## RWD 多螢＋UI/UX 視覺美編

![RWD 響應式設計（本案採用）](diagrams/16-rwd-only.svg)

</div>
<div style="text-align:center;">

![同一網站電腦版預覽](images/rwd-preview-desktop.png) 
<p style="font-size:0.6em; font-weight:bold; margin:0.25em 0 0; color:#1e293b;">電腦版</p>

</div>
<div style="text-align:center;">

![同一網站平板版預覽](images/rwd-preview-tablet.png) 
<p style="font-size:0.6em; font-weight:bold; margin:0.25em 0 0; color:#1e293b;">平板版</p>

</div>
<div style="text-align:center;">

![同一網站手機版預覽](images/rwd-preview-mobile.png) 
<p style="font-size:0.6em; font-weight:bold; margin:0.25em 0 0; color:#1e293b;">手機版</p>

</div>
</div>

<p class="footer-ref">(對照服務建議書 參 p.30)</p>

---

## 網站架構 IA＋功能模組配置（一）

<p style="font-size:0.6em; margin:0 0 0.45em;">九科室收斂<strong>三大內容軸</strong>（認識我們・業務推動介紹・便民服務），已以 Titus CMS 模組於示範站<strong>實際組建</strong>：</p>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-gov-about.png" style="width:100%; height:370px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">認識我們：機關介紹・組織職掌</p></div>
<div><img src="images/titus-gov-labor.png" style="width:100%; height:370px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">業務專區：勞工行政服務</p></div>
</div>
<p class="footer-ref">(對照服務建議書 肆 p.34)</p>

---

## 網站架構 IA＋功能模組配置（二）

<p style="font-size:0.6em; margin:0 0 0.45em;">同一套模組跨專區重複套用、各專區<strong>獨立視覺</strong>：</p>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.6em;">
<div><img src="images/titus-gov-childcare.png" style="width:100%; height:370px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">業務專區：托育服務（獨立視覺主題）</p></div>
<div><img src="images/titus-gov-open-info.png" style="width:100%; height:370px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:0.5em; margin:0.15em 0 0; color:#475569; text-align:center;">便民服務：政府資訊公開專區</p></div>
</div>
<p class="footer-ref">(對照服務建議書 肆 p.34)</p>

---

## 數位無障礙 AA 級

![數位無障礙 AA 等級四大原則](diagrams/21-a11y-pour.svg) 
<p class="footer-ref">(對照服務建議書 伍 p.37)</p>

---

## LINE 雙官方帳號 API＋費用邊界

![LINE 官方帳號費用與責任邊界](diagrams/33-line-cost-boundary.svg)

</div>
<div style="font-size:0.49em;">

<strong>兩個 LINE@</strong>（社勞局＋托育服務）以 Messaging API 客製：

- Push／Narrowcast 分眾・Reply・Rich Menu・關鍵字自動回覆
- 官網 CMS 後台**統一設定與監控**；串接中斷即時 Email 告警

</div>
</div>
<p class="footer-ref">(對照服務建議書 陸 p.40)</p>

---

## 歷史資料移轉四階段

![歷史資料移轉四階段方法論](diagrams/34-migration-methodology.svg)

</div>
<div style="font-size:0.66em;">

**銜接 → 整合 → 確認 → 設計**，逐階段降低移轉風險：

- **銜接**：盤點舊站資料來源、範圍、型態
- **整合**：新舊欄位對照（Mapping）＋清洗＋ ETL
- **確認**：整併測試、筆數勾稽，交貴局驗證
- **設計**：切換排程＋歷史資料封存專區

近三年**完整移轉**、三年前**封存專區**；**離峰切換、完整備份可回退**。

</div>
</div>
<p class="footer-ref">(對照服務建議書 柒 p.43)</p>

---

## 資安總覽：普級七構面＋縱深三層

![資通系統防護基準（普級）七大構面](diagrams/37-protection-baseline.svg)

</div>
<div style="font-size:0.66em;">

系統依防護需求等級評估屬**普級**，依控制措施查驗表**逐項實作**、提供佐證。

**七大構面**：存取控制／事件日誌與可歸責性／識別與鑑別／系統與通訊保護／系統與資訊完整性／系統與服務獲得／營運持續。

**縱深三層**：
傳輸 TLS／HTTPS　→　儲存去識別化或加密　→　應用 OWASP 防護

</div>
</div>
<p class="footer-ref">(對照服務建議書 捌 p.46)</p>

---

## OWASP Top 10＋SSDLC 內建

![安全軟體開發生命週期 SSDLC](diagrams/06-ssdlc.svg) 
<p class="footer-ref">(對照服務建議書 貳之三 p.9；捌 p.46)</p>

---

## 應用與個人資料保護

![應用程式與個人資料保護縱深防護](diagrams/38-app-pii-protection.svg) 
<p class="footer-ref">(對照服務建議書 捌之二 p.46)</p>

---

## GCB＋第三方檢測＋備援演練

![第三方資安檢測與上線前驗證機制](diagrams/40-thirdparty-detection.svg)

</div>
<div style="font-size:0.66em;">

- **GCB 組態基準**：套用全部規則後測服務正常性；無法避免之衝突整理**例外清單逐項送核**
- **第三方檢測**：委外執行 **SDLC 源碼檢測＋網站弱點掃描**，修補複測**至風險收斂**，納普級查驗佐證
- **上線前**：清除測試資料帳號、檢查惡意程式與隱密通道，**經貴局認可**始上線
- **備援演練**：載明備份復原程序，配合災難還原演練

</div>
</div>
<p class="footer-ref">(對照服務建議書 捌之三 p.46；捌之四 p.46)</p>

---

## 資安通報應變＋第三方檢測

![資安事件通報、應變與稽核配合時序](diagrams/41-incident-response.svg)

**第三方檢測實證**：普級控制措施**逐項實作**對齊標準要求；本案金額未達強制委外檢測門檻，仍**主動委由第三方**執行源碼檢測與弱點掃描（報告依需求交付、**費用已納編總價**），修補複測至風險收斂。

</div>
<p class="footer-ref">(對照服務建議書 捌之五 p.46)</p>

---

## 專案組織與治理

![本案專案組織架構與權責分工](diagrams/46-project-org.svg)

</div>
<div style="font-size:0.66em;">

**單一窗口＋功能分組＋權責可稽**：

- **單一聯繫窗口**：計畫主持人楊嘉豪（負責人），24 小時對口貴局；**代理人廖信謀**備援
- **5 功能組**：CMS 系統開發／資訊安全／資料移轉與維運／內容與 LINE 行銷／品質測試
- **資安治理分離**：資安負責人**花千祐具名擔任、非計畫主持人兼任**，開發與資安權責獨立
- 治理三構面：系統開發／前端無障礙／資安維運，各組任務對應 WBS 工作包

</div>
</div>
<p class="footer-ref">(對照服務建議書 玖之一 p.51；拾貳 p.63)</p>

---

## 團隊總覽：7 人涵蓋全鏈路

**7 名建置團隊＝5 名正職專任為主幹＋2 名資深專家常態支援**，涵蓋開發／資料／資安／內容／視覺全鏈路。

| 姓名 | 角色（代號） | 身分 | 年資／重點專長 |
|---|---|---|---|
| 楊嘉豪 | 計畫主持人・系統架構／CMS 核心（SA） | 正職・專任・負責人 | 全端 8 年・C#／ASP.NET Core |
| 花千祐 | **資訊安全負責人（具名）**・應用開發（SEC） | 正職・專任 | 開發資安 8 年・輸入驗證／注入防護 |
| 張睿壬 | 資料工程・歷史資料移轉／報表（BE） | 正職・專任 | 後端 3 年・ETL・發明專利 I874259 |
| 曹子允 | 系統測試 QA・內容審校／備援聯絡（QA） | 正職・專任 | 測試 3 年・語言學碩 |
| 廖信謀 | 計畫聯絡人・專案經理／內容行銷（PrM） | 正職・專任 | 企劃 4 年・社群經營 |
| 黃柏翔 | CMS（.NET）實作・系統整合／維運（OPS） | 約聘・**核心支援** | .NET 8 年・現任一卡通 iPASS |
| 高嘉宏 | UI/UX 視覺設計・版型美編（UX） | 約聘・**核心支援** | 視覺 14 年・現任 TNL Mediagene |

</div>

黃柏翔、高嘉宏兩位業界資深專家與本團隊**長期常態合作**，專長直補 .NET 實作與視覺設計關鍵環節；資安權責由花千祐**具名**負責，與計畫主持人分離。全隊技術棧全面排除陸資陸牌。

</div>
<p class="footer-ref">(對照服務建議書 拾貳 p.63；附件一 p.76)</p>

---

## 核心成員專長（一）：開發與資安主幹

**楊嘉豪**｜計畫主持人・SA
_正職專任・公司負責人_

- 全端系統開發 **8 年**；2022 起帶技術團隊承接系統開發案
- **C#／ASP.NET Core**、React／Next／Vue、Docker／Nginx／CI-CD
- 交大物理所；主導 TITS 企業官網含嵌入式 CMS、國際品牌互動網頁
- 架構主導＋資安治理層監督一手掌握

</div>

**花千祐**｜資安負責人・SEC
_正職專任・具名擔任_

- 程式開發與自動化 **8 年**；加密與資安防護實務背景
- **輸入驗證／資料邊界／存取控制／注入防護**；REST API 整合
- 中山大學資工；原生行動應用已上架 App Store（自寫全程＋注入防護）
- 英文 TOEIC **970／990**

</div>

**黃柏翔 Calvin**｜CMS 實作・OPS
_約聘・核心支援_

- 後端工程 **8 年**；.NET Core／C#／Go／Node 多語後端
- 曾建置**每日 2TB** 資料湖、**每日 200 萬筆**交易高吞吐 API
- 擔本案 **CMS 核心 .NET 實作**與系統整合、效能調校
- 現任一卡通 iPASS，常態合作支援本案

</div>

</div>
<p class="footer-ref">(對照服務建議書 附件一 p.76)</p>

---

## 核心成員專長（二）

**張睿壬**｜資料工程・BE _正職專任_

- 後端 **3 年**；非結構化→結構化資料研發背景
- **本案近三年歷史資料移轉 ETL 主責**；資料庫設計、開放格式報表匯出
- 中華民國**發明專利**共同開發者（證號 I874259）；2024 GCBME 傑出獎

</div>

**高嘉宏**｜UI/UX 視覺・UX _約聘・核心支援_

- 數位媒體視覺與介面設計 **14 年**（團隊最資深視覺）
- 品牌識別／視覺系統・**RWD 前台版型**・資料視覺化互動
- 主導即時開票、能源政策等大型互動專題；現任 TNL Mediagene

</div>

**廖信謀**｜專案經理・PrM _正職專任_

- 專案企劃 **4 年**；政府標案文件撰寫＋社群經營
- 提案統整、進度追蹤、需求訪談、**LINE 官方帳號行銷**
- 企業活動企劃執行累計逾 **100 場次**（對應教育訓練場次規劃）

</div>

**曹子允**｜系統測試 QA _正職專任_

- 測試工程與品質保證 **3 年**；金融科技 QA、介面在地化
- 功能／UI-UX／迴歸測試、缺失追蹤、驗收把關＋**內容審校**
- 政大語言學碩；本案**備援聯絡人**

</div>

</div>
<p class="footer-ref">(對照服務建議書 附件一 p.76)</p>

---

## 廠商能量與類似履約實績

<div style="display:grid; grid-template-columns:0.92fr 1.08fr; gap:0.7em; align-items:stretch; font-size:0.44em; margin:0 0 0.25em;">
<div style="border:1px solid #bfdbfe; border-left:4px solid #2563EB; border-radius:6px; padding:0.3em 0.6em; text-align:left;"><strong>三大核心能力</strong>：CMS 自主開發與全端維運（ASP.NET C#＋積木式後台）・資料工程與歷史資料移轉（ETL）・資訊安全與介面設計（普級防護＋RWD／無障礙）</div>
<div style="background:#FEF3C7; border-left:4px solid #d97706; border-radius:6px; padding:0.3em 0.6em; text-align:left;"><strong>履約能量</strong>：現正承接<strong>政府機關資訊系統開發案（執行中）</strong>，機關履約與資安要求正於第一線實作；企業與產品案完整交付如下列，核心成員個人專業經歷<strong>直補本案各環節</strong>。</div>
</div>

<div style="font-size:0.42em; margin:0 0 0.12em; color:#334155; text-align:left;"><strong>產品與官網實績</strong>｜SeaMeet・SeaX・Lexus 為核心成員任職期間作品（Seasalt.ai／米蘭營銷 Medialand）</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0.4em;">
<div><img src="images/seameet-app-1.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">SeaMeet 會議協作後台</p></div>
<div><img src="images/seax-1.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">SeaX 客服後台</p></div>
<div><img src="images/ttechnology-1.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">TITS 企業官網（嵌入式 CMS）</p></div>
<div><img src="images/lexus-official-1.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">Lexus 官方網站（會員系統）</p></div>
</div>

<div style="font-size:0.42em; margin:0.22em 0 0.12em; color:#334155; text-align:left;"><strong>Titus CMS 自研產品</strong>｜同一套 CMS 之前台版型與後台管理</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0.4em;">
<div><img src="images/titus-front-garden.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">版型：植栽園藝示範站</p></div>
<div><img src="images/titus-front-realty.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">版型：房仲品牌示範站</p></div>
<div><img src="images/titus-admin-analytics.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">後台：成效分析儀表板</p></div>
<div><img src="images/titus-admin-theme.png" style="width:100%; height:130px; object-fit:cover; object-position:top; border:1px solid #e2e8f0; border-radius:4px;"/><p style="font-size:0.4em; margin:0.1em 0 0; color:#475569; text-align:center;">後台：網站與主題設定</p></div>
</div>
<p class="footer-ref">(對照服務建議書 拾參 p.68；附件一 p.76)</p>

---

## 跨年度期程：六工作包＋查核點

![跨年度實施期程甘特與里程碑](diagrams/80-timeline.svg)

</div>
<div style="font-size:0.64em;">

**WBS 六大工作包**：需求與設計／CMS 開發／前端與無障礙／LINE 與整合／資料移轉／測試資安上線。

- **115 年度**：完成需求訪談（9 科室）、架構確認、原型設計簽核
- **116 年度**：系統開發、資料移轉測試、教育訓練、正式上線
- 進度控管採**甘特＋里程碑為主、看板內部、月報正式回報**複合方案
- 履約至 **116/6/30**；落後 5% 主動提解決措施

</div>
</div>
<p class="footer-ref">(對照服務建議書 玖之二 p.51)</p>

---

## 履約管理時點與進度控管

![履約管理關鍵時點](diagrams/49-contract-timepoints.svg) 
<p class="footer-ref">(對照服務建議書 玖之三 p.51)</p>

---

## 保固服務與故障分級 SLA

![保固服務機制與故障分級回應](diagrams/53-warranty.svg) 
<p class="footer-ref">(對照服務建議書 拾之一 p.57)</p>

---

## 教育訓練與技術轉移

![教育訓練規劃](diagrams/54-training.svg) 
<p class="footer-ref">(對照服務建議書 拾之二 p.57；拾之三 p.57)</p>

---

## 品質管制閉環

![品質管制機制閉環](diagrams/51-qc-loop.svg) 
<p class="footer-ref">(對照服務建議書 玖之五 p.51)</p>

---

## 風險管理：5×5 矩陣＋四大應變

![風險評估 5×5 矩陣](diagrams/57-risk-matrix.svg)

</div>
<div style="font-size:0.55em;">

循環：**識別 → 評估 → 應變 → 監控**，納入月報追蹤。四大重點風險經應變後降至**可接受／需監控**：

- **R1 技術棧**（ASP.NET C# 自建 CMS）：核心成員實作能量＋SSDLC
- **R2 資料移轉與環境切換**（P2V／V2V 機房）：離峰切換、完整備份可回退
- **R3 跨年度執行**：階段查核點＋月報預警
- **R4 資安合規**：普級逐項實作＋第三方檢測

</div>
</div>
<p class="footer-ref">(對照服務建議書 拾壹 p.60)</p>

---

## 交付物與智財歸屬

![驗收成果文件四大類與原始碼](diagrams/50-deliverables.svg) 
<p class="footer-ref">(對照服務建議書 玖之四 p.51；附件二 p.91)</p>

---

## 承諾總結：一座平台、四層回應

**平台核心**
ASP.NET（C#）自主開發 CMS，前台 RWD 多螢＋數位無障礙 AA

</div>
<div style="border:1px solid #bbf7d0; border-left:4px solid #16A34A; border-radius:8px; padding:0.6em 0.8em;">

**安全基盤**
普級逐項實作＋OWASP＋SSDLC；第三方檢測對齊標準

</div>
<div style="border:1px solid #ddd6fe; border-left:4px solid #7c3aed; border-radius:8px; padding:0.6em 0.8em;">

**專案治理**
24 小時單一窗口＋代理人；跨年度查核點，履約至 116/6/30

</div>
<div style="border:1px solid #fed7aa; border-left:4px solid #d97706; border-radius:8px; padding:0.6em 0.8em;">

**維運轉移**
保固至 117/12/31；教育訓練＋影音；換廠商**無條件技術移交**

</div>

<p style="text-align:center; font-size:0.68em; color:#334155; margin-top:0.8em;">固定總價 <strong>1,450,000 元</strong>整・驗收合格後一次結付</p>
<p class="footer-ref">(對照服務建議書 執行摘要 p.3)</p>

---

## 感謝聆聽　敬請指教

<p style="font-size:0.7em; color:#64748b; margin-top:1em;">提特斯科技有限公司</p>

---

## 需求逐點回應總覽

全書針對需求說明書逐點回應——**實作方法＋多方案評估＋交付佐證**一一對應，八項服務科目全數涵蓋：

| 序 | 服務科目 | 對應章節 | 佐證重點 |
|:-:|---|---|---|
| 1 | 網站架設 | 壹・捌 | 目標機房盤點・部署測試・P2V/V2V 移轉演練 |
| 2 | 網站設計及建置（含後台管理） | 貳・參 | 自主 CMS・積木式後台・RWD・UI/UX・展示站佐證 |
| 3 | LINE@建置服務 | 陸 | 雙官方帳號 API 客製・分眾推播・費用邊界 |
| 4 | 功能與內容擴充 | 肆 | 五大功能模組於各內容區塊配置・三大內容軸 |
| 5 | 專案管理及教育訓練 | 玖・拾 | 跨年度查核點・混成訓練・技術轉移 |
| 6 | 系統整合（含資料轉移） | 柒 | 四階段移轉・近三年完整＋歷史封存專區 |
| 7 | 資訊安全防護 | 捌 | 普級逐項實作・OWASP・第三方檢測 |
| 8 | 系統維護（含保固期維護） | 拾 | 保固至 117/12/31・SLA 分級・CSR 主動產製 |

</div>
<p class="footer-ref">(對照服務建議書 企劃書概述 p.1)</p>