หน่วยการเรียนรู้ที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

เรื่องที่ 1 รู้จักกับเว็บไซต์ 

1. เว็บไซต์ (Website) คืออะไร?

ลองจินตนาการว่า เว็บไซต์ ก็เหมือนกับ หนังสือเล่มใหญ่ หรือ นิตยสาร หนึ่งเล่มครับ หนังสือเล่มนี้ไม่ได้ทำจากกระดาษ แต่สร้างจากไฟล์คอมพิวเตอร์ และเราเปิดอ่านมันผ่านหน้าจอ

• เว็บเพจ (Web Page): ถ้าเว็บไซต์คือ “หนังสือ” หนึ่งเล่ม เว็บเพจ ก็คือ “หน้ากระดาษ” แต่ละหน้าในหนังสือนั้นครับ เช่น หน้าแรก, หน้าเกี่ยวกับเรา, หน้าสินค้า, หน้าติดต่อเรา เป็นต้น
• เนื้อหา: ในหน้าเว็บเพจ (หน้ากระดาษ) ก็จะมีข้อมูลต่างๆ อยู่ในนั้น ไม่ว่าจะเป็น ตัวอักษร, รูปภาพ, วิดีโอ, เสียง, หรือเกม ที่เราสามารถโต้ตอบได้
• จุดประสงค์: เว็บไซต์ถูกสร้างขึ้นมาเพื่อจุดประสงค์หลายอย่าง เช่น ให้ความรู้ (เช่นเว็บโรงเรียน, Wikipedia), ขายของ (Shopee, Lazada), ให้ความบันเทิง (YouTube, Facebook), หรือเป็นเครื่องมือในการทำงาน (Google Docs)
• ที่อยู่: เราจะเข้าไปยังเว็บไซต์ต่างๆ ได้ผ่าน “ที่อยู่” ของมัน หรือที่เราเรียกว่า URL (จะอธิบายเพิ่มในหัวข้อที่ 4 ครับ)

สรุปง่ายๆ: เว็บไซต์ คือ แหล่งรวมหน้าเว็บเพจหลายๆ หน้าที่เกี่ยวข้องสัมพันธ์กัน ถูกจัดเก็บไว้ในคอมพิวเตอร์แม่ข่าย (Server) และเราสามารถเปิดดูได้ผ่านอินเทอร์เน็ต

2. เว็บเบราว์เซอร์ (Web browser) คืออะไร?

ถ้าเว็บไซต์คือ “หนังสือ” ที่วางอยู่บนชั้นหนังสือทั่วโลก เว็บเบราว์เซอร์ ก็คือ “ยานพาหนะ” หรือ “แว่นตาพิเศษ” ที่ช่วยให้เราสามารถเดินทางไปหยิบหนังสือเล่มนั้นมาอ่าน และ “ถอดรหัส” ภาษาคอมพิวเตอร์ออกมาเป็นภาพสวยงามให้เราเห็นได้ครับ

• หน้าที่หลัก: มันคือ “โปรแกรม” หรือ “แอป” ในคอมพิวเตอร์หรือมือถือของเรา ที่ใช้สำหรับ เปิดดูเว็บไซต์
• การทำงาน: เมื่อเราพิมพ์ที่อยู่ (URL) ของเว็บไซต์ลงไป เว็บเบราว์เซอร์จะวิ่งไปที่ Server ของเว็บไซต์นั้น (ผ่านทางอินเทอร์เน็ต) ขอดึงข้อมูลหน้าเว็บเพจนั้นมา แล้วนำโค้ด (เช่น HTML, CSS, JavaScript) มาประกอบร่างสร้างเป็นหน้าเว็บสวยๆ ที่เราเห็นกัน
• ตัวอย่างโปรแกรม: นักเรียนทุกคนต้องเคยใช้แน่นอนครับ
  • Google Chrome (ที่หลายคนนิยมใช้)
  • Microsoft Edge (ที่มากับ Windows)
  • Safari (ที่มากับ iPhone, iPad, Mac)
  • Firefox

สรุปง่ายๆ: เว็บเบราว์เซอร์ คือ โปรแกรมที่ใช้เปิดเว็บไซต์ ถ้าไม่มีเบราว์เซอร์ เราก็จะไม่สามารถท่องเว็บได้นั่นเอง

3. อินเทอร์เน็ต (Internet) คืออะไร?

ถ้าเว็บไซต์คือ “บ้าน” (ที่มีข้อมูลอยู่) และเว็บเบราว์เซอร์คือ “รถยนต์” (ที่พาเราไป) อินเทอร์เน็ต ก็คือ “เครือข่ายถนนที่เชื่อมโยงบ้านทุกหลังในโลกเข้าด้วยกัน” ครับ

• ความหมาย: อินเทอร์เน็ต (Internet) มาจากคำว่า “Interconnected Network” คือ เครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่สุดในโลกที่เชื่อมต่อคอมพิวเตอร์และอุปกรณ์นับล้านๆ เครื่องเข้าไว้ด้วยกัน
• ความสำคัญ: มันคือ “ตัวกลาง” ที่ทำให้รถ (เบราว์เซอร์) สามารถวิ่งไปหาบ้าน (เว็บไซต์) ได้ ถ้าไม่มีอินเทอร์เน็ต (ถนนขาด) รถของเราก็ไปไหนไม่ได้ คอมพิวเตอร์ของเราก็จะคุยกับคอมพิวเตอร์เครื่องอื่นไม่ได้ครับ
• สิ่งที่แตกต่าง:
  • อินเทอร์เน็ต คือ โครงสร้างพื้นฐาน, คือเครือข่าย, คือถนน
  • เว็บไซต์ คือ ข้อมูลที่วางอยู่บนเครือข่ายนั้น (เหมือนบ้านที่อยู่ติดถนน)
  • เบราว์เซอร์ คือ โปรแกรมที่ใช้เดินทางบนถนนเพื่อไปดูข้อมูลในบ้าน

อินเทอร์เน็ตไม่ได้มีไว้แค่ท่องเว็บเท่านั้น แต่ยังใช้สำหรับส่งอีเมล, เล่นเกมออนไลน์, โทรศัพท์คุยกัน (VoIP), หรือดูหนัง (Streaming) ด้วยครับ

4. คำศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์

เพื่อให้เราเข้าใจการทำงานของเว็บไซต์มากขึ้น เราควรรู้จักคำศัพท์เหล่านี้ครับ

• URL (Uniform Resource Locator): คือ “ที่อยู่” แบบเต็มยศของเว็บไซต์ หรือที่นักเรียนเรียกติดปากว่า “ลิงก์” (Link) มันจะบอกว่าข้อมูลที่เราอยากได้อยู่ที่ไหนในโลกอินเทอร์เน็ต
  • ตัวอย่าง: https://www.example.com/about
• Domain Name (ชื่อโดเมน): คือ “ชื่อที่จำง่าย” ของเว็บไซต์ มักจะเป็นส่วนที่อยู่หลัง www.
  • ตัวอย่าง: google.com, facebook.com, หรือ [ชื่อโรงเรียน].ac.th
• IP Address: คือ “ที่อยู่จริงๆ” ของคอมพิวเตอร์แม่ข่าย (Server) ซึ่งเป็นตัวเลขล้วนๆ (เช่น 172.217.167.78) แต่เพราะมันจำยาก เราเลยสร้าง Domain Name มาใช้เรียกแทนครับ
• Homepage (หน้าแรก): คือ “หน้าปก” หรือ “สารบัญ” ของเว็บไซต์ เป็นหน้าแรกที่เราจะเจอเมื่อพิมพ์แค่ชื่อโดเมนหลัก (เช่น พิมพ์ google.com ก็จะเจอหน้าค้นหา)
• Hyperlink (ลิงก์): คือ ข้อความหรือรูปภาพที่เราสามารถ “คลิก” ได้ แล้วมันจะพาเรา “กระโดด” ไปยังหน้าเว็บเพจอื่น หรือเว็บไซต์อื่น เหมือนประตูวาร์ปนั่นเอง
• HTTP / HTTPS: คือ “ภาษา” หรือ “กฎกติกา” ที่เบราว์เซอร์ใช้คุยกับ Server
  • HTTP (Hypertext Transfer Protocol): การสื่อสารแบบปกติ
  • HTTPS (Hypertext Transfer Protocol Secure): การสื่อสารแบบ “ปลอดภัย” ข้อมูลที่ส่งจะถูกเข้ารหัสไว้ สังเกตง่ายๆ คือจะมี รูปแม่กุญแจ 🔒 อยู่หน้า URL เหมาะสำหรับเว็บที่ต้องกรอกรหัสผ่านหรือข้อมูลการเงิน

5. ประเภทของคุกกี้ (Cookies) บนเว็บไซต์

เวลาเราเข้าเว็บไซต์ เรามักจะเห็นป๊อปอัปเด้งขึ้นมาถามว่า “ยินยอมให้ใช้คุกกี้หรือไม่?” เคยสงสัยไหมครับว่ามันคืออะไร?

คุกกี้ (Cookies) ไม่ใช่ขนมครับ แต่มันคือ “ไฟล์ข้อความขนาดเล็ก” ที่เว็บไซต์ส่งมาฝากเก็บไว้ใน “เบราว์เซอร์” ของเรา

• เปรียบเทียบ: ลองนึกว่าคุกกี้เหมือน “บัตรสะสมแต้ม” หรือ “ป้ายชื่อ” ที่ร้านค้า (เว็บไซต์) ออกให้เรา
• หน้าที่: เมื่อเรากลับไปที่ร้านนั้นอีกครั้ง เรายื่นบัตรให้ ร้านก็จะจำเราได้ทันที “อ๋อ คนนี้เองที่เคยมาซื้อของ” “คนนี้ชอบสีฟ้า” “คนนี้ล็อกอินค้างไว้”
• ประโยชน์: มันช่วยให้เราท่องเว็บสะดวกขึ้น เช่น
  • จำว่าเราล็อกอินค้างไว้ (ไม่ต้องใส่รหัสผ่านใหม่ทุกครั้ง)
  • จำของที่เราใส่ไว้ในตะกร้าสินค้า
  • จำภาษาที่เราเลือกใช้ หรือการตั้งค่าอื่นๆ

ทีนี้ คุกกี้ก็มีหลายประเภท แต่แบ่งตามหน้าที่หลักๆ ได้ดังนี้ครับ:

1. คุกกี้ที่จำเป็น (Strictly Necessary Cookies):
   • หน้าที่: จำเป็นมากๆ ต่อการทำงานของเว็บ ขาดไปเว็บอาจจะพัง
   • ตัวอย่าง: คุกกี้ที่จำว่าเราล็อกอินอยู่, คุกกี้ตะกร้าสินค้า (ถ้าไม่มีคุกกี้นี้ พอเรากดไปหน้าอื่น ของในตะกร้าก็จะหายหมด)
   • ส่วนใหญ่เว็บจะไม่ต้องขออนุญาตเราสำหรับคุกกี้ประเภทนี้
2. คุกกี้ประสิทธิภาพ (Performance / Analytics Cookies):
   • หน้าที่: ใช้นับสถิติว่ามีคนเข้าเว็บกี่คน, คนชอบอ่านหน้าไหน, คนมาจากไหน
   • ตัวอย่าง: Google Analytics
   • ข้อมูลนี้จะช่วยให้เจ้าของเว็บนำไปพัฒนาเว็บให้ดีขึ้น
3. คุกกี้ฟังก์ชัน (Functional Cookies):
   • หน้าที่: ใช้จำ “ตัวเลือก” หรือ “การตั้งค่า” ที่เราเคยเลือกไว้
   • ตัวอย่าง: จำว่าเราเลือกภาษาไทย, จำขนาดตัวอักษรที่เราปรับ, จำชื่อเราเพื่อทักทายในครั้งหน้า
   • ช่วยให้เราได้รับประสบการณ์ใช้งานเว็บที่ “เป็นส่วนตัว” มากขึ้น
4. คุกกี้เพื่อการโฆษณา (Targeting / Advertising Cookies):
   • หน้าที่: นี่คือคุกกี้ที่หลายคนกังวลครับ มันใช้ “ติดตาม” พฤติกรรมของเราว่าเราสนใจอะไร ชอบดูสินค้าแบบไหน
   • ตัวอย่าง: เราไปค้นหารองเท้าวิ่งในเว็บ A แต่พอไปเข้าเว็บ B หรือ Facebook เรากลับเห็น “โฆษณารองเท้าวิ่ง” ตามมาหลอกหลอนเรา นั่นเป็นเพราะคุกกี้ประเภทนี้ครับ
   • มันถูกสร้างโดยบริษัทโฆษณา (เรียกว่า Third-party Cookies) เพื่อยิงโฆษณาให้ตรงกับความสนใจของเรา

สรุปเรื่องคุกกี้: คุกกี้มีทั้งประโยชน์ (ช่วยจำ) และโทษ (ถูกติดตามเพื่อโฆษณา) กฎหมาย (เช่น PDPA ของไทย) จึงกำหนดให้เว็บไซต์ต้องแจ้งและ “ขอความยินยอม” จากเราก่อนที่จะเก็บคุกกี้ที่ไม่จำเป็นนั่นเองครับ

สไลด์สอน โลกของเว็บไซต์

https://gamma.app/docs/2-gh03icxmdam9dpe

แบบฝึกหัด คำศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์

https://kujj.my.canva.site/website-vocabulary-learning

ใบงาน คำศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์

เรื่องที่ 2 ประเภทของเว็บไซต์

เราทุกคนท่องอินเทอร์เน็ตกันทุกวัน เข้าเว็บนั้น ออกเว็บนี้ แต่เคยสังเกตไหมว่า…

• ทำไมเว็บ Google ถึงมีแค่ช่องค้นหาโล่งๆ?
• ทำไมเว็บ Shopee ถึงมีแต่รูปสินค้าเต็มไปหมด?
• แล้วทำไม Facebook ถึงมีแต่เรื่องราวของเพื่อนเรา?

คำตอบง่ายๆ ก็คือ… เว็บไซต์แต่ละเว็บ ถูกสร้างขึ้นมาเพื่อ “จุดประสงค์” (Purpose) ที่ไม่เหมือนกันนั่นเอง!

เว็บไซต์ (Website) ก็เหมือน “บ้าน” หรือ “ร้านค้า” บนโลกออนไลน์ ที่มี “ที่อยู่” (Domain Name เช่น https://www.google.com/search?q=google.com) ให้คนเข้าไปเยี่ยมชมได้ การที่เรารู้จักประเภทของเว็บ จะทำให้เราเป็นนักท่องเน็ตที่ฉลาด รู้ว่าเว็บไหนใช้ทำอะไร และเว็บไหนน่าเชื่อถือครับ

เรามาดูกันว่าเว็บไซต์หลักๆ ที่เราเจอกันทุกวัน มีกี่ประเภท อะไรบ้าง

🚀 7 ประเภทเว็บไซต์ ที่เราควรรู้จัก

1. เว็บไซต์ค้นหา (Search Engine)

• เว็บนี้คืออะไร? : เว็บที่เอาไว้ “ค้นหา” ข้อมูลทุกอย่างบนโลกอินเทอร์เน็ต
• ทำมาเพื่ออะไร? (P) : เพื่อช่วยให้เราค้นหาข้อมูลหรือเว็บไซต์อื่นๆ ที่เราต้องการเจอได้ง่ายที่สุด
• จุดสังเกต (K) : มี “ช่องค้นหา” (Search Bar) เป็นพระเอกของหน้าเว็บเลย
• ตัวอย่าง: Google, Bing

2. เว็บเครือข่ายสังคม (Social Media)

• เว็บนี้คืออะไร? : เว็บที่สร้างขึ้นมาเพื่อให้คนมา “เชื่อมต่อ” กัน
• ทำมาเพื่ออะไร? (P) : เพื่อสื่อสาร, ติดต่อกับเพื่อน, แบ่งปันเรื่องราว, รูปภาพ, วิดีโอ หรือแสดงความคิดเห็น
• จุดสังเกต (K) : ต้องสมัครสมาชิก/เข้าสู่ระบบ, มีหน้าโปรไฟล์ส่วนตัว, มีพื้นที่ให้โพสต์ (Feed)
• ตัวอย่าง: Facebook, TikTok, Instagram, X (Twitter)

3. เว็บซื้อขายของ (E-commerce)

• เว็บนี้คืออะไร? : “ห้างสรรพสินค้า” หรือ “ร้านค้าออนไลน์”
• ทำมาเพื่ออะไร? (P) : เพื่อซื้อ-ขายสินค้า หรือบริการ ผ่านทางอินเทอร์เน็ต
• จุดสังเกต (K) : มีรูปสินค้า, ราคา, โปรโมชั่น, มี “ตะกร้าสินค้า” (Shopping Cart) และระบบจ่ายเงิน
• ตัวอย่าง: Shopee, Lazada, Amazon

4. เว็บข่าวและสื่อ (News / Media)

• เว็บนี้คืออะไร? : “หนังสือพิมพ์” หรือ “ช่องทีวี” ออนไลน์
• ทำมาเพื่ออะไร? (P) : เพื่อนำเสนอข่าวสาร, บทความ, สาระความรู้ ที่ทันต่อเหตุการณ์
• จุดสังเกต (K) : มีพาดหัวข่าว, แบ่งหมวดหมู่ข่าว (เช่น กีฬา, บันเทิง, การเมือง), มีการอัปเดตเนื้อหาบ่อยมาก
• ตัวอย่าง: Thairath, Sanook, The Standard

5. เว็บเพื่อความบันเทิง (Entertainment)

• เว็บนี้คืออะไร? : เว็บที่รวมความสนุกไว้ให้เรา
• ทำมาเพื่ออะไร? (P) : เพื่อให้ความบันเทิง, ผ่อนคลาย, ดูหนัง, ฟังเพลง หรือเล่นเกม
• จุดสังเกต (K) : เน้นเนื้อหาที่เป็นวิดีโอ, เสียงเพลง, หรือเกม
• ตัวอย่าง: YouTube, Netflix

6. เว็บเพื่อการศึกษา (Educational)

• เว็บนี้คืออะไร? : “ห้องสมุด” หรือ “ห้องเรียน” ออนไลน์
• ทำมาเพื่ออะไร? (P) : เพื่อให้ความรู้, แหล่งข้อมูลทางการศึกษา, บทเรียนออนไลน์
• จุดสังเกต (K) : มีบทความวิชาการ, มีคลังความรู้, แบบทดสอบ, หรือคอร์สเรียน
• ตัวอย่าง: Wikipedia, เว็บไซต์โรงเรียน, DLTV, Starfish Labz

7. เว็บองค์กร/บริษัท (Corporate / Organization)

• เว็บนี้คืออะไร? : “หน้าตา” หรือ “ป้าย” ของบริษัทหรือองค์กรนั้นๆ
• ทำมาเพื่ออะไร? (P) : เพื่อประชาสัมพันธ์องค์กร, ให้ข้อมูลสินค้า/บริการ, สร้างความน่าเชื่อถือ หรือ (กรณีองค์กร) รับบริจาค
• จุดสังเกต (K) : มีหน้า “เกี่ยวกับเรา”, “ติดต่อเรา”, นำเสนอข้อมูลของบริษัท หรือมีปุ่ม “บริจาค” (เช่น UNICEF)
• ตัวอย่าง: apple.com (เว็บบริษัท), unicef.or.th (เว็บองค์กร)

💡 เกร็ดความรู้: เว็บไซต์พันธุ์ผสม (Hybrid)

ในปัจจุบัน หลายเว็บไซต์ก็ไม่ได้เป็นแค่ประเภทเดียว! แต่มีการ “ผสมผสาน” กันเพื่อให้ตอบโจทย์คนใช้มากขึ้น เช่น

• YouTube เป็นเว็บ Entertainment (ดูวิดีโอ) + Social Media (มี Comment, Like, Subscribe)
• Shopee เป็นเว็บ E-commerce (ซื้อของ) + Entertainment (มี Live สด, มีเกมให้เล่น)
• Facebook เป็นเว็บ Social Media + News (คนแชร์ข่าว) + E-commerce (มี Marketplace)

🎯 สรุป

เว็บไซต์มีหลายประเภท แต่ละประเภทก็มี “หน้าที่” ของมัน การที่เราเข้าใจประเภทและวัตถุประสงค์ของเว็บ จะช่วยให้เราใช้งานอินเทอร์เน็ตได้เก่งขึ้น!

ทีนี้… เวลานักเรียนเข้าเว็บไซต์ไหน ลองสวมบทเป็น “นักสืบเว็บไซต์” แล้วลองทายดูสิว่า… “เว็บนี้… ทำมาเพื่ออะไรกันนะ?” 🤔

สไลด์สอน ประเภทของเว็บไซต์

https://gamma.app/docs/2-679mtx9mijbako6

ใบงาน นักสืบเว็บไซต์ (Website Detectives)

หน่วยการเรียนรู้ที่ 2 หลักการออกแบบเว็บไซต์

เรื่องที่ 3 องค์ประกอบในการออกแบบเว็บไซต์

เราทุกคนเข้าเว็บไซต์กันทุกวัน ทั้งเว็บดูวิดีโอ (YouTube), เว็บค้นหา (Google), เว็บโซเชียล (Facebook/IG/TikTok) หรือเว็บโรงเรียนของเราเอง

เคยสงสัยไหมว่า…

• ทำไมบางเว็บ เราเข้าแล้ว “ชอบจัง” ใช้ง่าย สบายตา?
• ทำไมบางเว็บ เราเข้าแล้ว “งงมาก” ปุ่มอยู่ไหน หาสิ่งที่อยากไม่เจอ?

คำตอบคือ “องค์ประกอบในการออกแบบ” ครับ

วันนี้เราจะมาเรียนรู้ 5 องค์ประกอบสำคัญที่ทำให้เว็บหนึ่ง “ปัง” (น่าใช้) หรือ “พัง” (น่าปิดหนี) โดยลองคิดเปรียบเทียบง่ายๆ ว่า… เว็บไซต์ = บ้าน 1 หลัง ที่เราอยากชวนให้คนมาเที่ยวครับ

1. โครงสร้าง (Layout) 🏠 “แบบแปลนบ้าน”

คิดง่ายๆ: มันคือ “แบบแปลน” ว่าอะไรจะอยู่ตรงไหนของบ้าน (เว็บ)

นี่คือส่วนที่คนจะเห็นเป็นอย่างแรก เหมือนเราเดินมาหน้าบ้านแล้วรู้ทันทีว่า

• ส่วนหัว (Header): มักจะเป็น “ป้ายหน้าบ้าน” ที่มีชื่อเว็บ (โลโก้) และ “ประตูหลัก” (เมนู)
• ส่วนเนื้อหา (Content): “ห้องรับแขก” หรือส่วนที่ใหญ่ที่สุดที่คนตั้งใจมาดู
• ส่วนท้าย (Footer): “หลังบ้าน” มักจะเก็บข้อมูลติดต่อ หรือลิงก์ที่ไม่สำคัญมาก

ถ้าทำดี: คนจะหาของเจอง่าย ไม่หลง ถ้าทำพัง: เหมือนสร้างบ้านที่เอาห้องน้ำไว้หน้าบ้าน เอาประตูไปซ่อนหลังบ้าน คนมาเที่ยวก็จะงง

2. เนื้อหา (Content) 🛋️ “เฟอร์นิเจอร์และของในบ้าน”

คิดง่ายๆ: คือ “ทุกสิ่ง” ที่อยู่ในบ้านของเรา ไม่ว่าจะเป็น…

• ข้อความ (Text): คำอธิบาย ป้ายบอกทาง บทความ
• รูปภาพ (Images): รูปสวยๆ ช่วยตกแต่งบ้าน
• วิดีโอ/เสียง (Media): เหมือนทีวี หรือเพลงที่เปิดในบ้าน

ถ้าทำดี: บ้านจะมีเรื่องราวน่าสนใจ ถ้าเราชวนเพื่อนมา “ติวหนังสือ” (เว็บการศึกษา) ในบ้านก็ควรมีหนังสือ ไม่ใช่มีแต่ของเล่น (เนื้อหาต้องมีประโยชน์) ถ้าทำพัง: บ้านที่ไม่มีอะไรเลย หรือมีแต่ของรกๆ ที่ไม่เกี่ยวกับเรื่องที่ชวนมา คนก็ไม่อยากอยู่

3. การออกแบบ (Visual Design) 🎨 “การทาสีและตกแต่ง”

คิดง่ายๆ: คือ “ความสวยงาม” ทั้งหมดที่ตาเห็น

• สี (Color): “สีทาบ้าน” ต้องคุมโทน สบายตา ถ้าบ้านโรงพยาบาลใช้สีแดงสด คนไข้คงรู้สึกไม่ปลอดภัย
• ตัวอักษร (Typography): “ลายมือบนป้าย” ต้องอ่านง่าย ชัดเจน ไม่ใช้ฟอนต์ประหลาดจนอ่านไม่ออก
• พื้นที่ว่าง (White Space): “ทางเดินในบ้าน” ถ้าอัดเฟอร์นิเจอร์แน่นจนไม่มีที่เดิน คนก็อึดอัด เว็บก็เหมือนกัน ต้องมีที่ว่างให้พักสายตา

ถ้าทำดี: บ้านจะสวยน่าอยู่ คนอยากอยู่นานๆ ถ้าทำพัง: บ้านที่สีแสบตา ลายมืออ่านไม่ออก ของแน่นไปหมด คนเห็นแล้วปวดหัว อยากรีบออก

4. การนำทาง (Navigation) 🗺️ “ป้ายบอกทาง”

คิดง่ายๆ: คือ “ป้ายบอกทาง” และ “ประตู” ที่เชื่อมไปห้องต่างๆ

ส่วนนี้สำคัญมาก ทำให้คน “ไม่หลง” ในบ้าน (เว็บ) ของเรา มันคือพวกปุ่ม, ลิงก์, และเมนูต่างๆ

ถ้าทำดี: ป้ายบอกทางต้อง “ชัดเจน” และ “เหมือนกันทุกที่” เช่น ถ้าปุ่ม “ไปต่อ” เป็นสีเขียว มันก็ควรเป็นสีเขียวทุกหน้า คนจะได้จำได้ ถ้าทำพัง: เหมือนเดินในบ้านที่ไม่มีป้ายบอกทาง หรือป้ายชี้มั่วๆ เดินไปห้องครัวแต่ไปโผล่ห้องน้ำ คนจะหงุดหงิดมาก

5. การใช้งาน (Usability & Responsiveness) 📱 “บ้านที่ยืด-หดได้”

คิดง่ายๆ: คือ “ความง่าย” ในการใช้งาน และ “บ้านที่ยืดหดได้”

คำสำคัญของยุคนี้คือ Responsive Design (การออกแบบที่ตอบสนอง)

หมายความว่า “บ้าน” (เว็บ) ของเรา ต้องดูดีและใช้งานง่าย ไม่ว่าจะเปิดจากอุปกรณ์อะไร

• เปิดในคอม (จอใหญ่): บ้านกางเต็มที่ สวยงาม
• เปิดในมือถือ (จอเล็ก): บ้านต้อง “หดตัว” หรือ “จัดเรียงใหม่” ให้พอดีกับจอเล็กๆ โดยอัตโนมัติ

ถ้าทำดี: คนจะใช้งานเว็บเราได้สะดวกจากทุกที่ ถ้าทำพัง: ถ้าคนเปิดเว็บเราในมือถือ แล้วต้อง “ซูมเข้า-ซูมออก” ตลอดเวลาเพื่ออ่านข้อความ หรือกดปุ่มลำบาก… เขาก็จะปิดมันทิ้งทันที!

สรุป

การสร้างเว็บไซต์ที่ดี 1 เว็บ ไม่ใช่แค่ทำยังไงก็ได้ให้ “สวย” แต่ต้องคิดถึงทั้ง 5 องค์ประกอบนี้ เพื่อให้ “บ้าน” ของเราเป็นบ้านที่ มีประโยชน์ (Content) สวยงาม (Design) หาของง่าย (Layout) ไม่หลงทาง (Navigation) และอยู่สบายไม่ว่าจะใช้มือถือหรือคอม (Usability)

สไลด์สอน องค์ประกอบหลักในการออกแบบเว็บไซต์และประสบการณ์ผู้ใช้

https://gamma.app/docs/2-wpe3o2e6wvcytzt

ใบงาน เช็กลิสต์เว็บ “ปัง” หรือ “พัง”

ใบความรู้ที่ 8 เรื่อง UX/UI

ใบงานที่ 5 เรื่อง UX/UI

การออกแบบและการสร้างเว็บไซต์

HTML คืออะไร

HTML คือ ภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ โดยมีแม่แบบที่มาจากภาษา SGML โดย HTML จะเป็นภาษาในการสร้างเว็บที่สามารถเรียนรู้และทำความเข้าใจได้ง่าย ซึ่งในปัจจุบันก็มีการนำมาใช้กันอย่างแพร่หลาย

CSS คืออะไร

CSS คือ ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่ต้องการ CSS ย่อมาจาก Cascading Style Sheets 

ประโยชน์ของ CSS

1. ช่วยให้เนื้อหาภายในเอกสาร HTML มีความเข้าใจได้ง่ายขึ้นและในการแก้ไขเอกสารก็สามารถทำได้ง่ายกว่าเดิม เพราะการใช้ CSS จะช่วยลดการใช้ภาษา HTML ลงได้ในระดับหนึ่ง และแยกระหว่างเนื้อหากับรูปแบบในการแสดงผลได้อย่างชัดเจน
2. ทำให้สามารถดาวน์โหลดไฟล์ได้เร็ว เนื่องจาก code ในเอกสาร HTML ลดลง จึงทำให้ไฟล์มีขนาดเล็กลง
3. สามารถกำหนดรูปแบบการแสดผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีการแสดงผลในเอกสารแบบเดียวทั้งหน้าหรือในทุกๆ หน้าได้ ช่วยลดเวลาในการปรับปรุงและทำให้การสร้างเอกสารบนเว็บมีความรวดเร็วยิ่งขึ้น นอกจากนี้ยังสามารถควบคุมการแสดงผล ให้คล้ายหรือเหมือนกันได้ในหลาย Web Browser
4. ช่วยในการกำหนดการแสดงผลในรูปแบบที่มีความเหมาะกับสื่อต่างๆ ได้เป็นอย่างดี
5. ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานในอนาคตได้ดี

โดเมน คืออะไร

โดเมเนม (Domain Name) คือ ชื่อที่จะใช้ระบุลงไปในคอมพิวเตอร์เพื่อให้สามารถค้นหาได้ในโดเมนเนมซีสเทม โดยการตั้งชื่อโดเมนนั้น จะต้องเป็นชื่อที่ง่ายต่อการจดจำ เพื่อให้สามารถเข้าใช้งานได้ง่ายขึ้น

โปรแกรม Adobe Dreamweaver

แบบทดสอบกลางภาค