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

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

- **ขอบเขตผลลัพธ์:** เอกสารสังเคราะห์สำหรับหน้า static HTML/CSS/JS ภาษาไทยหน้าเดียวในอนาคต; เอกสารนี้ไม่ใช่หน้าเว็บ และไม่มีการทำ web research
- **สถานะ:** Draft สำหรับให้เจ้าของตรวจสอบก่อนเข้าสู่ semantic HTML
- **ตำแหน่งผลิตภัณฑ์:** เว็บไซต์ตัวอย่างประกอบการเรียนที่ `/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 เป็นค่าเริ่มต้น และใช้สีเขียวอย่างจำกัดเพื่อเน้น

## 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/` | เริ่มต้นที่จุดเข้าเรียนชัดเจน |
| รอง | `ดูบทเรียนทั้งหมด` | `/` | ใช้เมื่อหน้าเว็บไซต์สื่อหลักสูตรแสดงรายการเรียน; ยืนยัน label ใน implementation อีกครั้ง |
| รอง | `ดูแผน AI Web Studio 2 วัน` | anchor `#workshop` | เลื่อนภายในหน้า ไม่อ้างว่าเป็นตารางรายวิชาเต็ม |
| รอง | `เปิดคู่มือการเรียน` | `/handbook/` | ปลายทางที่มีจริง |
| รอง | `ดูทรัพยากร` | `/resources/` | ปลายทางที่มีจริง |
| บริบท | `อ่านการสร้างทีละขั้น` | `/learn/labs/build-course-website-step-by-step/` | ติดป้าย “กำลังสร้าง” จนกว่าจะยืนยันว่าเผยแพร่แล้ว |
| เครดิต | `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; ลิงก์ “อ่านการสร้างทีละขั้น” พร้อมป้าย “กำลังสร้าง”
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 | ใช้ light เป็น default; หากมีสวิตช์ ต้องมองเห็นสถานะและทำงานด้วยคีย์บอร์ด |
| Lesson filter/search (optional) | แสดงผล “ไม่พบบทเรียนที่ตรงกัน” พร้อมปุ่ม/ลิงก์คืนค่า; filter Day 1/Day 2 ใช้ได้ต่อเมื่อเจ้าของยืนยัน mapping |
| CTA pending | `อ่านการสร้างทีละขั้น` มีป้าย “กำลังสร้าง” และไม่อ้างว่าอ่านได้แล้ว |
| 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 — ต้องถามเจ้าของก่อน implementation

1. ต้องการให้ชื่อไทยของรายวิชามีหรือไม่? ปัจจุบันยืนยันเพียงชื่อ `977-121 Module: Website Design and Development`.
2. Mapping ที่ได้รับอนุมัติของบทเรียนใดอยู่ Day 1 และ Day 2 คืออะไร? จนกว่าจะยืนยัน ต้องไม่เปิด filter Day 1/Day 2 หรือใส่ป้ายรายบท.
3. CTA `ดูบทเรียนทั้งหมด` ควรชี้ไปหน้าใด/anchor ใด? S5 ยืนยันเพียง `/` เป็นเว็บไซต์สื่อหลักสูตร ไม่ได้ยืนยันส่วนรายการบทเรียน.
4. ปลายทาง `/learn/labs/build-course-website-step-by-step/` เผยแพร่เมื่อใด? ก่อนนั้นต้องคงป้าย “กำลังสร้าง” หรือซ่อน CTA.
5. อนุมัติข้อความ disclaimer ว่า “เว็บไซต์ตัวอย่างประกอบการเรียน ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ” หรือมีถ้อยคำที่เจ้าของกำหนดหรือไม่?
6. ผู้ใช้ต้องการ theme toggle จริงหรือเพียงรองรับ system preference? ข้อกำหนด design system ระบุ light default และ dark palette แต่ยังไม่ยืนยัน interaction.
7. ยืนยันว่าต้องการแสดงลิงก์ Rawinnipa ใน footer หรือไม่; หากแสดงให้ใช้เพียงเครดิตผู้ออกแบบ/ผู้จัดทำสื่อ.
8. ผู้สอน หน่วยกิต ภาคเรียน เกณฑ์คะแนน ช่องทางสมัคร และ LMS จะได้รับอนุมัติให้แสดงหรือไม่? ถ้าไม่ ต้องคงไม่แสดงทั้งหมด.