ด้านความรู้

1. ความสำคัญของการวิเคราะห์และออกแบบโครงสร้างเว็บไซต์

2. ลักษณะโครงสร้างของเว็บไซต์

3. ขั้นตอนการออกแบบเว็บไซต์

4. หลักการจัดเตรียมข้อมูลและจัดเก็บไฟล์

5. หลักการเลือกสีที่เหมาะสมกับงานพัฒนาเว็บไซต์

ด้านทักษะ

1. การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์

ด้านคุณธรรม จริยธรรม

2. ความรับผิดชอบ

3. ความสนใจใฝ่รู้

สาระสำคัญ

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

สมรรถนะอาชีพประจำหน่วย

แสดงความรู้เกี่ยวกับการวิเคราะห์และออกแบบโครงสร้างระบบเว็บไซต์ได้อย่างเหมาะสม

• จุดประสงค์ทั่วไป / บูรณาการเศรษฐกิจพอเพียง

1. เพื่อแสดงความรู้เกี่ยวกับการวิเคราะห์และออกแบบโครงสร้างระบบเว็บไซต์ได้อย่างเหมาะสม(ด้านความรู้)

2. การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์ (ด้านทักษะ)

3. เพื่อให้มีเจตคติที่ดีต่อการเตรียมความพร้อมด้าน วัสดุ อุปกรณ์ และการปฏิบัติงานอย่างถูกต้อง สำเร็จภายในเวลาที่กำหนด มีเหตุและผลตามหลักปรัชญาของเศรษฐกิจพอเพียง(ด้านคุณธรรม จริยธรรม)

• จุดประสงค์เชิงพฤติกรรม / บูรณาการเศรษฐกิจพอเพียง

1. อธิบายความสำคัญของการวิเคราะห์และออกแบบโครงสร้างเว็บไซต์ (ด้านความรู้)

2. บอกลักษณะโครงสร้างของเว็บไซต์(ด้านความรู้)

3. บอกขั้นตอนการออกแบบเว็บไซต์(ด้านความรู้)

4. อธิบายหลักการจัดเตรียมข้อมูลและจัดเก็บไฟล์(ด้านความรู้)

5. อธิบายหลักการเลือกสีที่เหมาะสมกับงานพัฒนาเว็บไซต์(ด้านความรู้)

6. บอกประเภทของไฟล์รูปภาพที่เหมาะสมกับงานพัฒนาเว็บไซต์ (ด้านความรู้)

7. การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์ (ด้านทักษะ)

8. การเตรียมความพร้อมด้านการเตรียม วัสดุ อุปกรณ์นักศึกษาจะต้องทำความสะอาดห้องเรียน มีการจัดเตรียมสถานที่ สื่อ วัสดุ อุปกรณ์ไว้อย่างพร้อมเพรียง (ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพียง)

9. ความมีเหตุมีผลในการปฏิบัติงาน ตามหลักปรัชญาของเศรษฐกิจพอเพียงนักศึกษาจะต้องมีการใช้ ความรู้ทักษะวิชาชีพนำไปประยุกต์ใช้ อย่างคุ้มค่าและประหยัด(ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพียง)

• ด้านความรู้(ทฤษฎี)

ความสำคัญของการวิเคราะห์และออกแบบโครงสร้างเว็บไซต์ (จุดประสงค์เชิงพฤติกรรมข้อที่ 1)

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

ลักษณะโครงสร้างของเว็บไซต์(จุดประสงค์เชิงพฤติกรรมข้อที่ 2)

ในการออกแบบเว็บไซต์ที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุลมีการออกแบบโครงสร้างเนื้อหา โดยต้องวางแผนโครงสร้างให้ดี มีการเชื่อมต่อสัมพันธ์กัน ระหว่างรายการ (Menu)หรือโฮมเพจ(Home Page) กับหน้าเนื้อหาอื่นๆ รวมถึงการเชื่อมโยงไปสู่ภาพสื่อมัลติมีเดียและข้อความต่างๆ ได้อย่างเหมาะสม เพื่อป้องกันไม่ให้ผู้ใช้งานระบบหลงทางในขณะ เข้าสู่เนื้อหาต่างๆ ในเว็บไซต์ จากหลักการนี้แสดงว่าโครงสร้างของเว็บไซต์เป็นส่วนที่ควรให้ความสำคัญ โครงสร้างที่ดีจะช่วยส่งผลดีต่อผู้ใช้งานระบบ เพราะข้อมูลที่มีอยู่มากมายนั้นต้องอาศัย การเชื่อมโยงเนื้อหา หรือการจัดระเบียบของเนื้อหาให้กับการสืบค้นภายในเว็บไซต์ การจัดระเบียบที่ดี จะช่วยให้ผู้ใช้มีความสะดวก รวดเร็วในการเข้าถึงเนื้อหา ในขณะเดียวกันโครงสร้างที่ไม่ เหมาะสมก็ย่อมส่งผลเสียต่อผู้ใช้เช่นกัน ในที่นี้ จะขอนำเสนอรูปแบบโครงสร้างของเว็บไซต์ตามแนวคิดของ Lynch and Horton ดังนี้

1.โครงสร้างของเว็บไซต์แบบเรียงตามลำดับ (Sequential Structure)

2.โครงสร้างของเว็บไซต์แบบลำดับขั้น (Hierarchical Structure)

3.โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure)

4. โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure)

ขั้นตอนในการพัฒนาเว็บไซต์(จุดประสงค์เชิงพฤติกรรมข้อที่ 3)

ในการพัฒนาเว็บไซต์นั้นจะต้องมีการออกแบบแต่ละเพจเพื่อให้ผู้พัฒนาประหยัดเวลาในการพัฒนาระบบเพราะทำให้ได้มองเห็นภาพและองค์ประกอบของระบบนั้นได้อย่างครบถ้วนตามความต้องการของผู้ใช้งานหลังจากที่ได้มีการออกแบบระบบสมบูรณ์แล้วผู้พัฒนาระบบจำเป็นต้องศึกษาขั้นตอนในการพัฒนาระบบเว็บไซต์ตามขั้นตอนต่อไปนี้

ขั้นตอนที่ 1 การกำหนดโครงสร้างของเว็บไซต์

ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ

ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า

ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า

ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์

ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์

ภาษา C++ จะมีรูปแบบการเขียนทั้งแบบฟังก์ชัน และแบบเชิงวัตถุ จากตัวอย่างโปรแกรม 2.1 จะมีฟังก์ชัน main ( ) โดยทุกโปรแกรมจะต้องมี เป็นฟังก์ชันหลัก ซึ่งระบบจะเริ่มต้นทำงานที่ฟังก์ชัน main ( ) ซึ่งฟังก์ชัน main ( ) ไปเรียกใช้ฟังก์ชันอื่น ๆ ภายในโปรแกรมโดยแต่ละฟังก์ชันเมื่อเราสร้างขึ้นมาใช้งาน จะประกอบด้วย 2 ส่วน คือ

หัวฟังก์ชัน ประกอบด้วย ชื่อฟังก์ชัน, ค่าที่รับเข้าและชนิดข้อมูล

ตัวฟังก์ชัน เป็นส่วนประกอบที่ประกอบไปด้วยตัวแปร และคำสั่งในการทำงาน โดยจะครอบด้วยสัญลักษณ์วงเล็บปีกกา และกำหนดให้ส่งค่าคืนกลับด้วยคีย์เวิร์ด return

หลักการจัดเตรียมข้อมูลและจัดเก็บไฟล์(จุดประสงค์เชิงพฤติกรรมข้อที่ 4 )

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

1. การจัดเตรียมข้อมูลส่วนของเนื้อหา

2. การจัดเก็บไฟล์ข้อมูล่

หลักการเลือกสีที่เหมาะสมกับงานพัฒนาเว็บไซต์(จุดประสงค์เชิงพฤติกรรมข้อที่ 5 )

สีนั้นมีความสำคัญอย่างยิ่งในการออกแบบและพัฒนาระบบเว็บไซต์ การเลือกสีให้เข้ากับเนื้อหาของเว็บไซต์ จะทำให้เว็บไซต์มีความน่าเชื่อถือยิ่งขึ้น และยังส่งผลอย่างมากกับความสวยงามความเป็นเอกลักษณ์ให้กับเว็บไซต์หรือองค์กรได้ จึงมีความจำเป็นต้องศึกษาเกี่ยวกับทฤษฎีสี เพื่อให้สามารถออกแบบและเลือกใช้สีได้อย่างเหมาะสมดังรูปวงล้อความสัมพันธ์ของสีที่บรรจุสีที่นิยมใช้ในเว็บไซต์ไว้จำนวนทั้งหมด 20 สี โดยผู้ออกแบบสามารถใช้ความสัมพันธ์ของวงล้อขอสีนี้ให้เกิดประโยชน์ได้อย่างมากมาย เช่น

ต้องการออกแบบให้เว็บไซต์ที่ให้ความรู้สึกตัดกันโดยสิ้นเชิงอาจใช้ชุดสี 4 สีที่ทำมุมกัน 90 องศา เช่นถ้าเลือกชุดสี 1 , 6 , 11 , 16 สีที่ได้จะตัดกันชัดเจน ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็อาจเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์ 5, 6, 7,8 ก็จะได้สีในโทนสีเหลืองสว่าง เป็นต้น

ไฟล์รูปภาพที่ใช้อยู่ในปัจจุบันนี้มีหลายประเภท(จุดประสงค์เชิงพฤติกรรมข้อที่ 6 )

แต่ไฟล์รูปภาพที่นิยมใช้กับการพัฒนาเว็บเพจมี 3 ประเภทคือ

1) ไฟล์ประเภท GIF (Graphics Interchange Format)

2) ไฟล์ประเภท JPEG หรือ JPG (Joint Photographic Expert Group)

3) ไฟล์ประเภท PNG (Portable Network Graphic)