ขั้นตอนการพัฒนาเว็บไซต์
สมาคมสภาคนพิการทุกประเภทแห่งประเทศไทย (Disabilities Thailand — DTH)
บันทึกขั้นตอนการพัฒนาและปรับปรุงเว็บไซต์ ฉบับ Redesign v2.1 "Human & Natural" — เน้นการออกแบบที่อบอุ่น เป็นธรรมชาติ เข้าถึงง่ายสำหรับทุกคน โดยคงโครงสร้างเดิมและเพิ่มเนื้อหาข้อมูลทางการให้ครบถ้วน
1
วางโครงสร้าง + ปรับธีม
10–11 มิ.ย.- ดึงไฟล์ต้นฉบับ dth-v2.html / dth-v2.css มาพัฒนาต่อในเครื่อง
- ปรับธีมเป็น "Human & Natural" — พื้นกระดาษครีม เขียวธรรมชาติ เงานุ่ม มุมโค้งแบบ organic
- เปลี่ยนฟอนต์เป็น Anuphan (หัวข้อ) + Sarabun (เนื้อหา) — ฟอนต์ไทยมีหัว อ่านง่าย
- คงระบบ Accessibility เดิม: ปรับขนาดอักษร 3 ระดับ, โหมดตัดกันสูง (ขาว/เหลืองพื้นดำ), รองรับ reduced-motion
2
ดึงข้อมูลจริง + หน้ารอง
11 มิ.ย.- เชื่อมหน้ารอง เกี่ยวกับเรา / ข่าวสาร / ข้อบังคับ ให้เมนูคลิกได้จริง
- นำไฟล์จริงจากโฟลเดอร์งานเข้าระบบ: โลโก้ 6 สมาคม, อินโฟกราฟิก, เอกสาร PDF
- จัดโครงสร้างไฟล์ Pic/ · Doc/ ชื่อ ASCII ปลอดภัยตอน deploy
3
ปรับดีไซน์ให้เรียบสะอาด
15 มิ.ย.- เปลี่ยน emoji หลากสี → SVG icon เส้นโทนเขียว ทั้งเว็บ (เปลี่ยนสีตามโหมด contrast อัตโนมัติ)
- เอา icon และภาษาอังกฤษหน้าหัวข้อออก ให้สไตล์เรียบ
- จัด โลโก้หลัก — แบบกลมสมมาตร (header) + แบบแนวนอน (footer)
4
เนื้อหาทางการ — เกี่ยวกับเรา
15 มิ.ย.- เพิ่มเนื้อหาทางการครบถ้วน: ความเป็นมา · วัตถุประสงค์ 10 ข้อ · วิสัยทัศน์ · พันธกิจ
- คณะกรรมการบริหาร 30 รายชื่อ + รูปผู้บริหาร 6 ท่าน + ภาพคณะกรรมการเต็ม
- ผลงานที่ภาคภูมิใจ 5 ด้าน (กฎหมาย/นโยบาย/เครือข่าย/พิทักษ์สิทธิ/ต่างประเทศ)
- แก้ข้อมูลติดต่อ องค์การสมาชิก 6 สมาคม — เพิ่มเว็บไซต์, แยกโทรสาร, แก้ที่อยู่
5
สร้างหน้าใหม่ + ข้อมูลจริง
15 มิ.ย.- เจ้าหน้าที่สมาคม — ผังโครงสร้าง + ตารางรายชื่อ 12 คน
- สภาฯ ประจำจังหวัด — รูป + ตาราง 67 จังหวัด 4 ภาค (จากไฟล์ Excel · กดโทรได้)
- คลังสื่อ / อินโฟกราฟิก — กรองหมวด + ค้นหา แบบหน้าข่าวสาร
- DTH Magazine + ข้อเสนอเชิงนโยบาย — ดาวน์โหลด PDF
- จัดเมนูใหม่ 4 หมวด — ทุกรายการลิงก์หน้าจริงในเว็บ ไม่มีค้าง
6
Responsive + Animation
15 มิ.ย.- ปรับการแสดงผล มือถือ — การ์ด 2 คอลัมน์, โลโก้เครือข่าย 4 คอลัมน์, ตารางเลื่อนแนวนอน, ฟอนต์ไม่เบียดบรรทัด
- ใส่ scroll-reveal animation (เนื้อหาลอยขึ้นตอนเลื่อนถึง) + hero caption
- แถบกลับขึ้นด้านบน เลื่อนขึ้นจากขอบล่าง + ปุ่มติดต่อลอย
7
Backup + Deploy
15 มิ.ย.- สำรองไฟล์เฉพาะที่ใช้งานเป็น .zip + เก็บใน Git
- จัดทำเอกสาร README · Site Map · Flow การทำงาน
- Deploy ขึ้น GitHub Pages — เผยแพร่ออนไลน์
เทคโนโลยีที่ใช้
HTML5 + CSS3โครงสร้างและสไตล์ ไม่พึ่ง framework หนัก
Vanilla JavaScriptslider · แท็บกรอง · เมนู · animation
Anuphan · Sarabunฟอนต์ไทย Google Fonts
GitHub Pagesโฮสต์เว็บ static ฟรี
Accessibility (a11y)ปรับอักษร · โหมดตัดกันสูง · skip link
Responsiveรองรับมือถือ–เดสก์ท็อป
เว็บไซต์สภาคนพิการทุกประเภทแห่งประเทศไทย · Redesign v2.1 "Human & Natural" · มิถุนายน 2569