การพัฒนา เว็บ

1. การพัฒนาเว็บ

2. หลักการออกแบบเว็บเพจ • หลักการออกแบบ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมาย ที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่นและนำเสนอข้อมูลเกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บเพจ ที่หลากหลายให้ลูกเล่นได้มากกว่าเว็บที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ Company Logo

3. หลักการออกแบบเว็บเพจ (ต่อ) สามารถแบ่งได้ 3 ลักษณะ • 1. แบบลำดับขั้น (Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลำดับกิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว Company Logo

4. หลักการออกแบบเว็บเพจ (ต่อ) 2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว Company Logo

5. หลักการออกแบบเว็บเพจ (ต่อ) • 3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้นและแบบเชิงเส้น Company Logo

6. หลักในการออกแบบเว็บไซต์หลักในการออกแบบเว็บไซต์ • สร้างลำดับชั้นความสำคัญขององค์ประกอบ • สร้างรูปแบบ บุคลิก และสไตล์ • สร้างความสม่ำเสมอตลอดทั้งไซต์ • จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ • สร้างจุดสนใจด้วยความแตกต่าง • จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย • ใช้กราฟิกอย่างเหมาะสม Company Logo

7. สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดีสิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี • 1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่อยู่บนจอภาพให้เห็นชัดเจน เช่นการใช้ตัวหนังสือ เส้น สี ขนาด ฯลฯ เพราะจะสามารถดึงดูดความสนใจได้ดี • 2.การย้ำซ้ำ (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมีลักษณะรูปแบบ สอดคล้องกันทั้งหมด Company Logo

8. สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ)สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ) • 3.การจัดแถว การวางแนว (Alignment) คือ การจัดวางองค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ ไร้เหตุผล ไม่ขัดกับความรู้สึก ของผู้อ่าน จัดให้ดูสะอาด • 4.ความใกล้เคียง ความเกี่ยวเนื่อง (Proximity) คือ การจัดวางองค์ประกอบที่เกี่ยวเนื่องกัน ให้เป็นกลุ่มก้อนเดียวกัน Company Logo

9. องค์ประกอบของการออกแบบเว็บไซต์ • 1. ความเรียบง่าย • 2. ความสม่ำเสมอ • 3. ความเป็นเอกลักษณ์ • 4. เนื้อหาที่มีประโยชน์ • 5. ระบบเนวิเกชันที่ใช้งานง่าย • 6.ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ Company Logo

10. องค์ประกอบของการออกแบบเว็บไซต์ (ต่อ) • 7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด • 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ Company Logo

11. กิจกรรมที่3 • คำสั่ง • นักเรียนศึกษาวิธีการ  แนวทางเกี่ยวกับการวางแผนและออกแบบเว็บไซต์ โดยใช้คำสำคัญ(แนวทางการวางแผนออกแบบสร้างเว็บไซต์) จากนั้น ให้นักเรียน • 1) นำเสนอการออกแบบการสร้างเว็บไซต์ (Wordpress) ในคาบเรียน • 2) ส่ง mind map ภาพรวมของโครงงาน ด้วยการ Attach File Company Logo

12. ตัวอย่างภาพรวมของโครงงานตัวอย่างภาพรวมของโครงงาน Company Logo

13. ตัวอย่างภาพรวมของโครงงานตัวอย่างภาพรวมของโครงงาน Company Logo

14. ตัวอย่างภาพรวมของโครงงานตัวอย่างภาพรวมของโครงงาน Company Logo

15. ตัวอย่างภาพรวมของโครงงานตัวอย่างภาพรวมของโครงงาน Company Logo