# Brief — เว็บไซต์ตัวอย่างรายวิชา 977-121

> ฉบับรวมงานโดย parent หลังรอบ 07: ดู `integration-notes.md`; snapshot แต่ละรอบเก็บเนื้อหาดั้งเดิมไว้

## กรอบงานและสถานะข้อมูล

- **ขอบเขตผลลัพธ์:** เอกสารสังเคราะห์/กำกับสำหรับหน้า static HTML/CSS/JS ภาษาไทยหน้าเดียว; เอกสารนี้ไม่ใช่หน้าเว็บ และไม่มีการทำ web research
- **สถานะ:** อัปเดตหลังได้รับข้อกำหนด D1–D3 และตรวจความสอดคล้องกับ source ที่มีแล้ว; สถานะเผยแพร่ public ยังรอหลักฐานจากขั้น deploy
- **ตำแหน่งผลิตภัณฑ์:** เว็บไซต์ตัวอย่างประกอบการเรียนที่ `/examples/course-website/` ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ
- **ข้อจำกัด:** ไม่สร้างตรา/โลโก้มหาวิทยาลัย ข้อมูลผู้สอน หน่วยกิต ตารางภาคเรียน เกณฑ์คะแนน ช่องทางสมัคร บัญชี LMS หรือ login/รับสมัครจำลอง

## FACT

- ชื่อรายวิชา: **977-121 Module: Website Design and Development**
- สถาบันที่ระบุ: **มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus**
- **AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI** เป็น workshop ภายในรายวิชา ระยะเวลา 2 วัน × 4 ชั่วโมง (รวม 8 ชั่วโมง) และมีพัก 10 นาทีต่อวัน; ไม่ใช่ชั่วโมง หน่วยกิต หรือประมวลรายวิชาฉบับเต็มของมหาวิทยาลัย
- มีบทเรียนจริง 11 บท (00–10) และมีปลายทางบทเรียน/ทรัพยากรตาม content inventory ด้านล่าง
- visual system ที่มีอยู่ใช้ Inter + Noto Sans Thai, light เป็นค่าเริ่มต้น และใช้สีเขียวอย่างจำกัดเพื่อเน้น
- การจัดเส้นทางคลังบทเรียนที่ยืนยันแล้วจาก `scripts/build.mjs` `dayData`: Day 1 ใช้บท 00–05 และ Day 2 ใช้บท 06–10; เป็นการเลือกเนื้อหาตามเวลาใน workshop ไม่ได้หมายความว่าสอนครบทุกบทภายใน 8 ชั่วโมง
- CTA รอง `ดูบทเรียนทั้งหมด` ที่ยืนยันแล้วชี้ไปยัง anchor `#lessons` ภายในหน้า ไม่ใช่ `/`
- มี theme toggle ที่ยืนยันแล้ว: light เป็นค่าเริ่มต้นแม้ OS เป็น dark, อ่าน/บันทึกเฉพาะตัวเลือกที่ผู้ใช้กดด้วย key `psu-course-website-theme-v1`, และใช้งานต่อได้เมื่อ storage ผิดพลาด

## INFERENCE

- ผู้เข้าชมหลักต้องการตอบคำถามเร็ว ๆ ว่า “เริ่มตรงไหน”, “มีบทเรียนใดบ้าง” และ “workshop สองวันนี้ทำอะไร”; ดังนั้นหน้าเดียวควรให้ทางเลือกเริ่มเรียนและแผน Day 1/Day 2 อยู่ก่อนเนื้อหารายละเอียด
- CTA ควรพาไปยังปลายทางที่มีอยู่จริงเท่านั้น และป้ายกำกับต้องบอกชนิด/สถานะของปลายทางอย่างตรงไปตรงมา โดยเฉพาะลิงก์บทความแบบทีละขั้นที่ยังอยู่ระหว่างสร้าง
- เนื่องจาก workshop เป็นเพียงส่วนหนึ่งของ module จึงควรนำเสนอเป็น “แผน workshop” ไม่ใช่ตารางสอนหรือคำอธิบายรายวิชาฉบับสมบูรณ์

## PROPOSAL

### เป้าหมายและ audience

**เป้าหมายหลัก:** ช่วยผู้เรียนค้นพบเส้นทางเริ่มเรียน เข้าถึงบทเรียนจริง และเข้าใจขอบเขตของ AI Web Studio workshop โดยไม่ทำให้เข้าใจว่าเป็นเว็บไซต์ทางการหรือระบบรับสมัคร

**Audience หลัก:** ผู้เรียนที่ต้องการเริ่มทำเว็บไซต์ด้วย AI และต้องเลือกบทเรียน/ดูภาพรวม workshop ก่อนเข้าเนื้อหา

**Audience รอง:** ผู้สอนหรือผู้ทบทวนสื่อที่ต้องการตรวจรายการบทเรียนและปลายทางของหลักสูตรอย่างรวดเร็ว

### ข้อเสนอคุณค่า (value proposition)

“เส้นทางเรียนรู้เพื่อออกแบบและพัฒนาเว็บไซต์ด้วย AI: เริ่มจากเครื่องมือและพื้นฐาน ไปจนถึงการส่งมอบที่ตรวจสอบได้ พร้อม workshop สองวันเป็นส่วนหนึ่งของ module.”

### CTA และปลายทาง

| ระดับ | ป้าย CTA ที่เสนอ | ปลายทาง | หมายเหตุ |
| --- | --- | --- | --- |
| หลัก | `เริ่มจากบทเรียน 00` | `/learn/lessons/00-setup-and-web-basics/` | เริ่มต้นที่จุดเข้าเรียนชัดเจน |
| รอง | `ดูบทเรียนทั้งหมด` | anchor `#lessons` | ยืนยันจาก Prompt02; เลื่อนไปยังรายการบทเรียนในหน้า ไม่ใช่ `/` |
| รอง | `ดูแผน AI Web Studio 2 วัน` | anchor `#workshop` | เลื่อนภายในหน้า ไม่อ้างว่าเป็นตารางรายวิชาเต็ม |
| รอง | `เปิดคู่มือการเรียน` | `/handbook/` | ปลายทางที่มีจริง |
| รอง | `ดูทรัพยากร` | `/resources/` | ปลายทางที่มีจริง |
| บริบท | `อ่านการสร้างทีละขั้น` | `/learn/labs/build-course-website-step-by-step/` | แสดงลิงก์เมื่อ route นี้รวมอยู่ใน build ที่ตรวจแล้ว; สถานะ deploy บันทึกแยกต่างหาก |
| เครดิต | `Rawinnipa` | `https://rawinsoft.com/` | ลิงก์ผู้ออกแบบ/ผู้จัดทำสื่อเท่านั้น ไม่อ้าง partnership หรือเจ้าของมหาวิทยาลัย |

### ลำดับ section ของหน้าเดียว

1. **Utility/header** — ชื่อรายวิชา, สถาบัน, ป้าย “เว็บไซต์ตัวอย่างประกอบการเรียน”, การข้ามไปเนื้อหาหลัก (skip link), สวิตช์ theme
2. **Hero** — ชื่อรายวิชาเต็ม, ชื่อ workshop, value proposition, CTA หลัก และ CTA ดู workshop
3. **ขอบเขต AI Web Studio** — ข้อความชัดเจนว่าเป็นส่วนหนึ่งของ module; 2 วัน × 4 ชั่วโมง, พัก 10 นาที/วัน, รวม 8 ชั่วโมง; ไม่แทนรายละเอียดรายวิชาฉบับมหาวิทยาลัย
4. **แผน workshop Day 1 / Day 2** — สรุปกิจกรรมตามระดับหัวข้อเท่านั้น; ไม่ประดิษฐ์ตารางเวลาเต็มหรือผลการประเมิน
5. **เส้นทางบทเรียน** — รายการ 00–10 พร้อมชื่อและลิงก์ที่มีจริง; search/filter แบบ optional: ทั้งหมด, Day 1, Day 2 โดยต้องประกาศเกณฑ์การจัดกลุ่มก่อนใช้
6. **Labs และแหล่งเรียนต่อ** — ลิงก์ labs ที่มีจริง, handbook และ resources; ลิงก์ “อ่านการสร้างทีละขั้น” ไปยังเอกสารที่รวมอยู่ใน build นี้
7. **ข้อจำกัด/ความโปร่งใส** — ย้ำสถานะเว็บไซต์ตัวอย่าง; ไม่มี login, รับสมัคร, LMS หรือข้อมูลทางวิชาการที่ยังไม่ยืนยัน
8. **Footer** — ชื่อรายวิชาและ PSU Phuket เป็นข้อความ, ลิงก์ Rawinnipa ตามขอบเขตเครดิต; ไม่มีตราหรือโลโก้ที่สร้างขึ้น

### Content inventory

| กลุ่ม | เนื้อหาที่แสดง | ปลายทาง |
| --- | --- | --- |
| รายวิชา | 977-121 Module: Website Design and Development; มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus | ไม่มีลิงก์สถาบันที่ยืนยัน |
| Workshop | AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI; 2 วัน × 4 ชั่วโมง = 8 ชั่วโมง; พัก 10 นาที/วัน | `#workshop` |
| บทเรียน 00 | เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร | `/learn/lessons/00-setup-and-web-basics/` |
| บทเรียน 01 | พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง | `/learn/lessons/01-vibe-coding-foundations/` |
| บทเรียน 02 | Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง | `/learn/lessons/02-agent-skills/` |
| บทเรียน 03 | Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation | `/learn/lessons/03-specs-and-prompts/` |
| บทเรียน 04 | ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ | `/learn/lessons/04-design-and-assets/` |
| บทเรียน 05 | เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง | `/learn/lessons/05-company-website/` |
| บทเรียน 06 | เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง | `/learn/lessons/06-rental-and-data/` |
| บทเรียน 07 | GSAP product story, storefront และ quote demo | `/learn/lessons/07-gsap-storefront/` |
| บทเรียน 08 | รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้ | `/learn/lessons/08-cloudflare-deploy/` |
| บทเรียน 09 | Production Operations: security, observability, rollback และต้นทุน | `/learn/lessons/09-production-operations/` |
| บทเรียน 10 | สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้ | `/learn/lessons/10-capstone-and-handoff/` |
| Labs/ทรัพยากร | install AI tools; research-to-brand website; design tools and MCP; resources; handbook | `/learn/labs/install-ai-tools/`; `/learn/labs/research-to-brand-website/`; `/learn/labs/design-tools-and-mcp/`; `/resources/`; `/handbook/` |

### States

| State | ข้อเสนอพฤติกรรม/ข้อความ |
| --- | --- |
| Default | แสดง hero, CTA, workshop summary และรายการบทเรียนทั้งหมด |
| Light (default) | พื้น `#F7F7F7`, ข้อความ `#0A0A0A`, accent `#3EDC81` พร้อมข้อความเข้ม, ข้อความเขียวบนพื้นอ่อน `#17653F` |
| Dark | canvas `#0A0A0A`, surface `#171717`, ข้อความ `#F7F7F7`; รักษา contrast และไม่ใช้เขียวเป็นข้อความหลักบนพื้นมืดหากยังไม่ตรวจ contrast |
| Theme preference | มี theme toggle ที่ยืนยันแล้ว; ใช้ light เป็น default แม้ OS เป็น dark, เก็บเฉพาะตัวเลือกที่ผู้ใช้กดใน `psu-course-website-theme-v1`, และ fallback ได้เมื่อ storage ใช้ไม่ได้ |
| Lesson filter/search | แสดงผล “ไม่พบบทเรียนที่ตรงกัน” พร้อมปุ่ม/ลิงก์คืนค่า; filter Day 1/Day 2 ใช้ mapping ที่ยืนยันแล้ว: Day 1 บท 00–05, Day 2 บท 06–10 |
| CTA พร้อมใน build | `อ่านการสร้างทีละขั้น` ชี้เอกสารที่รวมใน build; การตรวจ public deployment เป็นคนละขั้น |
| Link failure/unknown | ไม่สร้างหน้า 404 หรือ loading simulation; ใช้เฉพาะปลายทางที่ S5 ระบุ |
| Print | พื้นกระดาษขาว, ข้อความอ่านได้, ไม่พึ่งสีอย่างเดียวเพื่อสื่อความหมาย |

### Responsive

- **Mobile ก่อน:** หนึ่งคอลัมน์, CTA กว้างแตะง่าย, nav ไม่บังคับเลื่อนแนวนอน, lesson cards เรียงแนวตั้ง
- **Tablet:** hero และ workshop สามารถจัดสองคอลัมน์เมื่อยังเหลือพื้นที่อ่านง่าย; filters อยู่ก่อนรายการผลลัพธ์
- **Desktop:** ใช้ความกว้างข้อความจำกัดเพื่อการอ่าน, lesson grid หลายคอลัมน์ตามพื้นที่, header ยังเข้าถึง CTA หลักได้
- ทุกขนาด: ไม่ซ่อนเนื้อหาสำคัญเพียงเพราะ viewport, รองรับ text zoom/reflow, และไม่ยึดความหมายด้วย hover เพียงอย่างเดียว

### Accessibility acceptance checks

- [ ] ใช้ semantic landmarks (`header`, `nav`, `main`, `section`, `footer`) และลำดับ heading ไม่ข้ามระดับ
- [ ] มี skip link; ทุก CTA/ลิงก์เข้าถึงด้วยคีย์บอร์ด และ focus ชัดเจน
- [ ] สี light/dark และทุกสถานะ focus/hover/selected ผ่าน contrast ที่เหมาะสม; สีเขียวไม่ใช่ตัวบอกความหมายเพียงอย่างเดียว
- [ ] สวิตช์ theme และ filter/search (หากสร้าง) มี accessible name, state และประกาศการเปลี่ยนแปลงผลลัพธ์อย่างเหมาะสม
- [ ] ข้อความไทยใช้ Noto Sans Thai และข้อความ Latin ใช้ Inter จาก font ในระบบ; ไม่มี external font
- [ ] ขนาดเป้าหมายสัมผัสเพียงพอ, หน้า reflow ได้ที่ความกว้างแคบ/zoom, และไม่มี horizontal overflow โดยไม่จำเป็น
- [ ] ไม่มีภาพที่ต้องพึ่งพาเพื่อเข้าใจเนื้อหา; ถ้ามี SVG ตกแต่งต้องซ่อนจาก assistive technology
- [ ] โครงสร้าง print เป็นพื้นขาวและยังอ่านลิงก์เอกสารได้

## ทางเลือกภาพ (ไม่สร้าง raster/ตรามหาวิทยาลัย)

### ทางเลือก A — Type-led learning map

ใช้ typography เป็นภาพหลัก: หมายเลขบทเรียน 00–10 ขนาดใหญ่, เส้นทาง/จุดสถานะด้วย CSS หรือ SVG ธรรมดา, และ chip “Day 1/Day 2”. ภาพสื่อการเดินทางผ่านเนื้อหาโดยไม่ต้องใช้รูปถ่ายหรือสินทรัพย์ใหม่; ใช้ green เฉพาะจุดเริ่มต้น, CTA และสถานะที่ได้รับการยืนยัน.

### ทางเลือก B — Editorial workshop cards

ใช้การ์ดขาว/ผิว dark ที่มีตัวเลข “Day 1”, “Day 2” และ glyph จาก HTML/SVG ธรรมดา (เช่น cursor, bracket, check) พร้อมภาพพิมพ์ขนาดใหญ่. ให้บรรยากาศ workshop ชัด แต่ต้องระวังไม่ทำให้ผู้ใช้เข้าใจว่าบัตรเหล่านี้คือกำหนดการรายวิชาทางการ.

### Draft ที่เลือก — ทางเลือก A

เลือก **Type-led learning map** เพราะสอดคล้องกับแบรนด์เดิมที่เรียบ ใช้สีเขียวจำกัด และให้บทเรียนจริงเป็นศูนย์กลาง. ลดความเสี่ยงการสร้างภาพ/ตรามหาวิทยาลัยหรือการใส่บริบท workshop เกินข้อเท็จจริง. จะใช้เฉพาะข้อความ, HTML และ SVG ธรรมดาตามสินทรัพย์ที่อนุญาต.

## การเปลี่ยนสถานะ GAP ที่ได้รับคำตอบแล้ว

รายการเหล่านี้เคยเป็น GAP ใน snapshot รอบแรก และปิดสถานะด้วยคำสั่ง/ข้อมูลที่ parent ส่งจริงระหว่าง implementation; ไม่ใช่การอนุมัติจากมหาวิทยาลัยหรือเจ้าของรายวิชาเต็ม

| GAP เดิม | สถานะใหม่ | แหล่งยืนยัน | ผลต่อ implementation |
| --- | --- | --- | --- |
| Mapping Day 1/Day 2 | **CONFIRMED** | Prompt02; `scripts/build.mjs` `dayData`; `implementation-decisions.md` D1 | แสดง/กรอง Day 1 บท 00–05 และ Day 2 บท 06–10 |
| CTA `ดูบทเรียนทั้งหมด` | **CONFIRMED** | Prompt02; `implementation-decisions.md` D2 | ชี้ anchor `#lessons` |
| Theme toggle | **CONFIRMED** | Prompt04; `implementation-decisions.md` D3 | light default, toggle, เก็บเฉพาะ explicit choice, storage fallback |

## ข้อมูลนอกขอบเขตและหลักฐานที่ต้องตรวจในขั้นเผยแพร่

1. ต้องการให้ชื่อไทยของรายวิชามีหรือไม่? ปัจจุบันยืนยันเพียงชื่อ `977-121 Module: Website Design and Development`.
2. ปลายทาง `/learn/labs/build-course-website-step-by-step/` รวมอยู่ใน build ที่ parent ตรวจแล้ว จึงใช้ข้อความลิงก์ปกติ; ก่อนอ้างว่าเผยแพร่สาธารณะต้องตรวจ URL หลัง deploy.
3. อนุมัติข้อความ disclaimer ว่า “เว็บไซต์ตัวอย่างประกอบการเรียน ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ” หรือมีถ้อยคำที่เจ้าของกำหนดหรือไม่?
4. ผู้ใช้กำหนดให้มีลิงก์ Rawinnipa ใน footer แล้ว; ใช้เป็นเครดิตผู้จัดทำสื่อ ไม่อ้างการรับรองโดยมหาวิทยาลัย.
5. ผู้สอน หน่วยกิต ภาคเรียน เกณฑ์คะแนน ช่องทางสมัคร และ LMS จะได้รับอนุมัติให้แสดงหรือไม่? ถ้าไม่ ต้องคงไม่แสดงทั้งหมด.

## หลักฐานตรวจที่ได้รับ

`browser-verification.json` เป็นผล Playwright ที่ **parent runner** รัน ไม่ใช่การทดสอบ browser โดย Codex รอบนี้: 5 expected, 0 unexpected, 0 flaky ที่ `http://127.0.0.1:3320`. ครอบคลุม 11 บทและ mapping, search/filter/reset, light default เมื่อ OS dark พร้อม storage fallback, no-JS fallback, keyboard/viewport/axe. หลักฐานระบุ `publication: not yet tested in public`; จึงยังห้ามสรุปว่าเผยแพร่สาธารณะจนกว่าจะมีหลักฐานจากขั้น deploy.