16
17 หัวข้อเรื่อง (Topics) 2.1 กระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ 2.4 โครงสร้างการทำงานของเว็บไซต์ 2.5 การออกแบบโครงสร้างการทํางานของเว็บไซต์ แนวคิดสําคัญ (Main Idea) ในการสร้างเว็บไซต์ให้ประสบผลสำเร็จจะต้องมีกระบวนการในการจัดเตรียมข้อมูลในการสร้าง เว็บไซต์ กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ที่เหมาะสมเพราะการเลือกใช้สีที่เหมาะสมจะช่วย ส่งเสริม ให้เว็บไซต์มีความน่าเชื่อถือมากยิ่งขึ้น การศึกษาเกี่ยวกับกระบวนการพัฒนาและเผยแพร่เว็บไซต์ เพื่อให้ สามารถสร้างเว็บไชต์ได้ตรงตามเป้าหมายที่กำหนดไว้ นอกจากนั้น การศึกษาโครงสร้างการทำงานของ เว็บไซต์ และการออกแบบโครงสร้างการทํางานของเว็บไซต์จะทำให้มองเห็นลักษณะภาพรวมของการทำงาน ของ เว็บไซต์ซึ่งจะส่งผลให้การออกแบบเว็บไซต์ทำได้ง่ายขึ้น 1. แสดงความรู้เกี่ยวกับกระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 2. แสดงความรู้เกี่ยวกับกระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 3. แสดงความรู้เกี่ยวกับกระบวนการพัฒนาและเผยแพร่เว็บไซต์ 4. แสดงความรู้เกี่ยวกับโครงสร้างการทำงานของเว็บไซต์ 5. แสดงความรู้เกี่ยวกับการออกแบบโครงสร้างการทำงานของเว็บไซต์ กระบวนการและโครงสร้างการทำงานของเว็บไซต์ สมรรถนะย่อย (Element of Cornpetency) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1. อธิบายกระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ได้ 2. อธิบายกระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ได้ 3. อธิบายกระบวนการพัฒนาและเผยแพร่เว็บไซต์ได้ 4. อธิบายโครงสร้างการทำงานของเว็บไซต์ได้ 5. ออกแบบโครงสร้างการทำงานของเว็บไซต์ได้
18 2.1 กระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ รูปที่ 2.1 กำหนดผังงานให้กับเว็บไซต์ เนื้อหาสาระ (Content) เว็บไซต์เป็นแหล่งรวบรวมข้อมูลที่เกี่ยวข้องกับหน่วยงาน ร้านค้า หรือองค์กรต่าง ๆ ดังนั้นในการสร้าง เว็บไซต์จะต้องมีกระบวนการเตรียมข้อมูลต่าง ๆ เพื่อให้ได้ข้อมูลที่มีความถูกต้อง เหมาะสม และเพียงพอต่อ การสร้างเว็บไซต์โดยกระบวนการในการเตรียมข้อมูลในการสร้างเว็บไซต์ มีดังนี้ 2.1.1 เตรียมข้อมูลหรือเนื้อหาคร่าว ๆ ที่เกี่ยวข้องกับเว็บไซต์ที่เกี่ยวข้องกับเว็บไซต์ เพื่อให้การ สร้างเว็บไซต์ตรงตามจุดประสงค์มากที่สุด ข้อมูลสำคัญที่ผู้คนคาดหวังว่าจะได้เห็นเมื่อเข้าชมเว็บไซต์ประกอบด้วยรายละเอียดของผลิตภัณฑ์ ซึ่ง เป็นรายละเอียดตามจริง ข้อมูลเกี่ยวกับหน่วยงาน องค์กร บริษัท หรือสถานที่ผลิตจำหน่ายข้อมูลสำหรับการ ติดต่อ เช่น ชื่อ หมายเลขโทรศัพท์ ช่องทางการติดต่ออื่น ๆ ข่าวสารความคืบหน้า เรื่องราวอัพเดตที่น่าสนใจ คำถามยอดนิยมต่าง ๆ หากการเตรียมข้อมูลต่าง ๆ เรียบร้อยก่อนจะทำให้การสร้างเว็บไซต์เสร็จได้อย่าง รวดเร็ว และง่ายในการสร้างเว็บไซต์มากขึ้น นอกจากนั้นยังสามารถปรับแต่งการนำเสนอข้อมูลให้ผู้ที่เข้ามา เยี่ยมชมเว็บไซต์รู้สึกดีและประทับใจจนอยากกลับมาเยี่ยมชมเว็บไซต์ในภายหลังได้ 2.1.2 การแยกประเภทข้อมูลออกเป็นกลุ่มย่อยเพื่อให้ง่ายต่อการสร้างเว็บไซต์ หลังจากที่ได้รวบรวมข้อมูลทั้งหมดมาแล้วต้องแยกข้อมูลและกำหนดผังงานให้กับเว็บไซต์จัด เรียงลำดับความสำคัญของข้อมูลต่าง ๆ แยกข้อมูลไปในแต่ละหน้าตามความต้องการ ดังตัวอย่างการแยก ประเภทข้อมูลออกเป็นกลุ่มย่อยหลังจากนั้นนำเนื้อหาข้อมูลมาจัดเรียงให้อยู่ในไฟล์เอกสาร บันทึก แยกไฟล์ ออกมาตามเมนูต่าง ๆ ดังนี้ YOUR WEBSITE HOME ABOUT US CONTACT US ข้อมูลองค์กร/ร้านค้าคร่าว ๆ รูปภาพภายในองค์กร ข้อมูลองค์กร/ร้านค้าอย่างระเอียด สถานที่ติดต่อ โปรโมชั่นหรือสินค้าใหม่ การทำงานภายในองค์กร หมายเลขโทรศัพท์,อีเมล แผนที่ จุดเด่น/จุดขาย ขององค์กร/ร้านค้า
19 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 2.1.3 การเตรียมข้อมูลรูปภาพที่ใช้บนเว็บไซต์ การเตรียมข้อมูลรูปภาพที่ใช้บนเว็บไซต์ถือว่ามีความสำคัญมาก เพราะถ้ารูปภาพบนเว็บไซต์สวยงาม สะดุดตาจะดึงดูดให้ผู้เข้าชมมีความสนใจอยากจะเยี่ยมชมเว็บไซต์ ซึ่งนอกจากรูปภาพสวยแล้ว ขนาดของ รูปภาพก็มีความสำคัญมากเพราะถ้าไฟล์รูปภาพที่นำมาสร้างเว็บไซต์มีขนาดไม่เหมาะสมจะทำให้ การโหลดรูปภาพนานยิ่งขึ้นอาจส่งผลให้ผู้เข้าชมเบื่อหน่ายกับการรอการแสดงผลของเว็บไซต์ได้ 2.2.1 กระบวนการออกแบบเว็บไซต์ กระบวนการออกแบบเว็บไซต์ หมายถึง ขั้นตอนวิธีการถ่ายทอดรูปแบบของเว็บไซต์จากความคิด ออกมาเป็นผลงาน ทำให้ผู้อื่นสามารถมองเห็น รับรู้ หรือสัมผัสได้เพื่อให้มีความเข้าใจในผลงานที่ออกมาจาก ความคิดร่วมกัน รูปแบบของเว็บไซต์ที่คิดออกมาอาจเป็นสิ่งที่เป็นไปได้จริงหรือเป็นเพียงนามธรรมก็ได้ผู้ที่ทำ หน้าที่ออกแบบเว็บไซต์เรียกว่านักออกแบบและพัฒนาเว็บไซต์ (Webmaster) ซึ่งหมายถึงบุคคลที่ทำงาน วิชาชีพในสาขาการออกแบบและพัฒนาเว็บไซต์โดยเฉพาะการออกแบบเว็บไซต์มีความสำคัญต่อการพัฒนา เว็บไซต์มากเพราะจะทำให้ผู้พัฒนาเว็บไซต์สามารถพัฒนางานได้อย่างถูกต้องรวดเร็วตรงตามวัตถุประสงค์ของ องค์กรซึ่งในการออกแบบเว็บไซต์นั้นองค์ประกอบต่อไปนี้ถือเป็นพื้นฐานที่สำคัญในการออกแบบพัฒนาเว็บไซต์ ได้อย่างมีประสิทธิภาพ 1. ความเรียบง่าย (Simplicity) คือ การใช้รูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้อย่างสะดวก รวดเร็วแม้ว่าจะมีข้อมูลในเว็บไซต์อยู่มากมายแต่จะไม่ออกแบบโดยใช้ภาพกราฟิกหรือตัวอักษรที่เคลื่อนไหว ตลอดเวลาซึ่งจะทำให้รบกวนสายตาและสร้างความรำคาญต่อผู้ใช้ นอกจากนั้นยังใช้ชนิดและสีของตัวอักษรไม่ มากเกินไปจนวุ่นวายในส่วนเนื้อหาก็ใช้ตัวอักษรสีดำบนพื้นหลังสีขาวตามปกติ และไม่มีการเปลี่ยนแปลงสีของ ลิงก์ให้สับสนดังนั้น หลักที่สำคัญของความเรียบง่าย คือ การสื่อสารเนื้อหาถึงผู้ใช้โดยจํากัดองค์ประกอบเสริมที่ เกี่ยวข้องกับการนำเสนอให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น 2. ความสม่ำเสมอ (Consistency) คือ การสร้างความสม่ำเสมอให้กับเว็บไซต์ได้โดยใช้รูปแบบ เดียวกันตลอดทั้งเว็บไซต์ เนื่องจากผู้ใช้จะรู้สึกว่าเป็นเสมือนสถานที่เดียวกัน ถ้าลักษณะของแต่ละหน้าใน เว็บไซต์เดียวกันนั้นแตกต่างกันมากผู้ใช้อาจเกิดความสับสนและไม่แน่ใจว่ากำลังอยู่ในเว็บไซต์เดิมหรือไม่ ดังนั้นรูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสีที่ใช้ควรมีความคล้ายคลึงกันตลอดทั้ง เว็บไซต์ 3. ความเป็นเอกลักษณะ (Identity) คือ การออกแบบต้องคำนึงถึงลักษณะขององค์กรเนื่องจาก รูปแบบของเว็บไซต์ที่สามารถสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้นได้ เช่น เว็บไซต์ของธนาคารไม่ ควรมีลักษณะเหมือนเว็บไซต์ร้านขายสินค้า การใช้ชุดสี ชนิดอักษร รูปภาพ และภาพกราฟิกจะมีผลต่อรูปแบบ ของเว็บไซต์อย่างมากผู้ออกแบบจึงต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม
20 4. เนื้อหาที่มีประโยชน์ (Useful Content) คือ เนื้อหาถือเป็นสิ่งสำคัญที่สุดในเว็บไซต์ดังนั้น ใน เว็บไซต์ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ โดยมีการปรับปรุงและเพิ่มเติมให้ ทันต่อเหตุการณ์อยู่เสมอ 5. ระบบนำทางที่ใช้งานง่าย (User Friendly Navigation) คือ การออกแบบระบบนำทางให้ผู้ใช้ เข้าใจได้ง่ายและใช้งานสะดวก โดยใช้กราฟิกสื่อความหมายร่วมกับอธิบายที่ชัดเจน รวมทั้งมีรูปแบบและลำดับ ของรายการที่สม่ำเสมอตลอดทั้งเว็บไซต์ 6. มีลักษณะที่น่าสนใจ (Visual Appeal) หน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพ ของ องค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ ไม่มีร่องรอยของความเสียหายเป็นจุดด่าง หรือ มีขอบเป็นขั้นบันไดให้เห็น การใช้ชนิดของตัวอักษรที่อ่านง่าย สบายตา และการใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น 7. การใช้งานอย่างไม่จํากัด (Compatibility) คือ การออกแบบเว็บไซต์ให้ผู้ใช้ส่วนใหญ่เข้าถึง ได้มากที่สุดโดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใด ๆ เพิ่มหรือต้องเลือกบราวเซอร์ชนิดใดชนิดหนึ่งจึง จะสามารถเข้าถึงเนื้อหาได้ สามารถแสดงผลได้ในทุกระบบปฏิบัติการ และที่ความละเอียดหน้าจอต่าง ๆ อย่าง ไม่มีปัญหา สิ่งเหล่านี้จะยิ่งมีความสำคัญมากขึ้นสำหรับเว็บไซต์ที่มีผู้ใช้บริการจำนวนมากหรือมีกลุ่มเป้าหมายที่ หลากหลาย 8. คุณภาพในการออกแบบ (Design Stability) คือ การที่ต้องออกแบบและเรียบเรียงเนื้อหาอย่าง รอบคอบ เว็บไซต์ที่ทำขึ้นอย่างไม่มีการออกแบบจะทำให้เว็บไซต์ที่ออกมาไม่มีมาตรฐานและการไม่จัดระบบ ข้อมูลนั้น เมื่อมีข้อมูลเพิ่มขึ้นเรื่อย ๆ จะทำให้เกิดปัญหาและไม่สามารถสร้างความน่าเชื่อถือแก่ผู้ใช้ได้ 9. ระบบการใช้งานที่ถูกต้อง (Functional Stability) การทำงานต่าง ๆ ในเว็บไซต์ต้อง มีความ แน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น ลิงก์ต่าง ๆ ที่มีอยู่นั้นจะต้องเชื่อมโยงไปยังหน้าที่มีปรากฏอยู่จริงและ ถูกต้อง 2.2.2 การเลือกใช้สีในเว็บไซต์ การเลือกใช้สีในเว็บไซต์เป็นสิ่งที่มีความสำคัญมากเพราะสีเป็นสิ่งที่ดึงดูดความสนใจของ ผู้เข้าชมเว็บไซต์ ดังนั้น ในการสร้างเว็บไซต์ สีเป็นสิ่งที่กำหนดความรู้สึกสามารถใช้สีตกแต่งตัวอักษร รูปภาพ ลิงก์ และรูปภาพทั้งหมด การเลือกใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหาได้อย่างถูกต้อง เพิ่มความสวยงามให้กับหน้าเว็บไซต์ หากใช้สีที่ไม่เหมาะสมอาจทำให้ยากต่อการสื่อสาร ความหมายอาจผิด จากวัตถุประสงค์และดึงดูดความสนใจของผู้เข้าชมเว็บไซต์ได้น้อยลง สิ่งที่ต้องคำนึงถึงเกี่ยวกับการเลือกใช้สี สำหรับเว็บไซต์มีดังนี้
21 1. การใช้สีอย่างสม่ำเสมอ การออกแบบเว็บไซต์โดยใช้สีอย่างสม่ำเสมอจะสามารถสร้าง ขอบเขต ของเว็บไซต์ที่สัมผัสได้ด้วยตา เมื่อผู้ใช้คลิกเข้าไปในแต่ละหน้าของเว็บไซต์จะรู้สึกเหมือนอยู่ภายในเว็บไซต์ เดียวกัน 2. ใช้สีอย่างเหมาะสม เว็บไซต์เปรียบเสมือนสถานที่หนึ่ง ๆ ที่มีลักษณะเฉพาะของตนเอง เช่น ธนาคาร โรงเรียน หรือร้านค้าต่าง ๆ ดังนั้น การเลือกใช้สีที่เหมาะสมกับลักษณะของเว็บไซต์จะช่วยส่งเสริม เป้าหมายและภาพพจน์ของเว็บไซต์ได้ ควรคำนึงถึงหลายปัจจัยให้เหมาะสมกับสีในเว็บไซต์ เช่น วัฒนธรรม แฟชั่น อายุ และประสบการณ์ของผู้เข้าชมเว็บไซต์กลุ่มเป้าหมาย 3. ใช้สีเพื่อความหมาย สีแต่ละสีสื่อความหมายและความรู้สึกต่างกัน สีหนึ่งอาจสื่อความหมาย ทางบวกหรือทางลบก็ได้ ขึ้นอยู่กับสถานการณ์ ตัวอย่างเช่น สีดำให้ความรู้สึกโศกเศร้าในงานศพแต่กลับแสดง ถึงความเป็นมืออาชีพในการแสดงผลของศิลปิน ดังนั้น สีที่ให้ความหมายและความรู้สึกตรงกับเนื้อหา จะช่วย สนับสนุนให้ผู้ใช้ได้รับข้อมูลที่ถูกต้องและครบถ้วน การใช้สีในงานออกแบบต่าง ๆ นั้นจะต้องเข้าใจหลัก จิตวิทยา ความหมายและสัญลักษณ์ของสี แต่อย่าลืมว่าทุกคนไม่ได้มองความหมายของสีได้เหมือนกัน ความหมายของสีในมุมแต่ละคนนั้นมักจะได้รับอิทธิพลมาจากวัฒนธรรม สังคมที่แตกต่างกันโดยสีแต่ละสีนั้นมี ความหมายและสามารถเชื่อมโยงกับความรู้สึกของผู้คนในงานออกแบบได้ ดังนี้ (1) สีแดง ให้ความรู้สึกที่หลากหลายมากที่สุดเพราะเป็นสีที่ใกล้เคียงไฟ สามารถเป็นตัวแทน ของความอบอุ่นหรืออันตรายก็ได้ในเวลาเดียวกัน แต่ในอีกแง่มุมนึงสีแดงก็บ่งบอกถึงอารมณ์ ความรู้สึกที่มีพลัง มีชีวิตชีวา ร้อนแรง นอกจากนั้นยังมีความหมายไปในทางลบ คือ การใช้ความ รุนแรง รูปที่ 2.2 เว็บเพจที่เลือกใช้สีแดง
22 (ที่มา : https://www.mcdonalds.co.th) (2) สีส้ม สื่อถึงความอบอุ่น ซึ่งความหมายในแง่อื่น ๆ คือ ความคิดสร้างสรรค์ ความเป็นมิตร และอารมณ์ความรู้สึกที่ทำให้ผู้คนที่มองเห็นแล้วรู้สึกสบายตา สบายใจ รูปที่ 2.3 เว็บเพจที่เลือกใช้สีส้ม (ที่มา : https://www.nokair.com) (3) สีเหลือง สื่อถึงแสงแดด ความรู้สึกทางอารมณ์ คือ ความสุข ความปลื้มปิติ ความสดใสร่า เริง และความสดใหม่ ในแง่ของงานออกแบบสีเหลืองจะเป็นสีที่ดึงดูดความสนใจได้ดีมากให้ความรู้สึก ที่เป็นมิตรและมีความสนุก รูปที่ 2.4 เว็บเพจที่เลือกใช้สีเหลือง (ที่มา : https://www.nokair.com)
23 (4) สีเขียว บ่งบอกถึงธรรมชาติ อีกความหมายคือ การเจริญเติบโต ความสดใหม่ มีคุณภาพ และสิ่งที่ดี หรือถ้าใช้ในสินค้าจะสามารถบ่งบอกได้ว่าสินค้าชนิดนี้มาจากธรรมชาติ นอกจากนี้ ยัง หมายถึงความมั่งคั่งเกี่ยวกับการเงินและความมั่นคง สีเขียวที่ใช้ในงานออกแบบส่วนมากจะเป็นโลโก้ ธนาคารและสินค้าออร์แกนิก สินค้าเพื่อสุขภาพ หรือธุรกิจทางการเงิน รูปที่ 2.5 เว็บเพจที่เลือกใช้สีเขียว (ที่มา : www.kasikornbank.com) 5) สีฟ้า บ่งบอกถึงความสงบเงียบและน่าเชื่อถือ สะอาด และทำให้มีพลังมากขึ้น ในแง่ของ การออกแบบ สีฟ้าเป็นสีที่ใช้กันอย่างแพร่หลายมากที่สุด เพราะความหมายทางการสื่อสาร หมายถึง ความมั่นคง ความปลอดภัย และภาพลักษณ์ที่ดูเป็นมืออาชีพ รูปที่ 2.6 เว็บเพจที่เลือกใช้สีฟ้า (ที่มา : https//www.ktbnetbank.com/consumer)
24 6) สีม่วง บ่งบอกถึงความหรูหราและมั่งคั่งมีเกียรติ บางประเทศจะใช้สีม่วงเป็นส่วนที่เกี่ยวข้องกับพระ บรมวงศานุวงศ์ นอกจากนี้ ยังมีความหมายเกี่ยวกับความเชื่อทางจิตวิญญาณ ความลึกลับ และ ศาสนา สีม่วง ในการออกแบบส่วนมากสีม่วงเกี่ยวกับเรื่อง แฟชั่น ผู้หญิง และสินค้าที่ต้องการความหรูหราน่าเชื่อถือ 7) สีดำ บ่งบอกถึงความทันสมัย หรูหรา และความชับซ้อน ในทางกลับกันความหมายในทางลบคือ ความตาย ความชั่วร้าย หรือความลึกลับ แต่ในแง่ของการออกแบบ มีตราสินค้ามากมายที่ใช้สีดำอย่างแพร่หลาย อีก แง่มุมหนึ่งคือ ความมั่นคง ความเป็นกลาง และเป็นสีที่สามารถสื่อสารได้อย่างง่าย รูปที่ 2.8 เว็บเพจที่เลือกใช้สีดำ (ที่มา : https://www.apple.com/th/mac) รูปที่ 2.7 เว็บเพจที่เลือกใช้สีม่วง (ที่มา : http://www.scb.co.th/th/home)
25 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ (8) สีขาว บ่งบอกถึงความบริสุทธิ์ ไร้เดียงสา ความสะอาด และความเรียบง่าย ปัจจุบันสีขาวถูกมาใช้ ในงานออกแบบสไตล์มินิมอล (Minimal) อย่างแพร่หลาย เพราะสามารถสื่อสารถึงควานเรียบง่ายได้ดี หรือ ร้านค้าที่ทำให้บริเวณร้านเป็นสีขาวเพื่อให้รู้สึกถึงความโปร่งและความสะอาด รูปที่ 2.9 เว็บเพจที่เลือกใช้สีขาว (ที่มา : https://www.11street.co.th) เมื่อได้สร้างกระบวนการออกแบบและสร้างเว็บไซต์เสร็จเรียบร้อยแล้ว กระบวนการต่อไปของการ สร้างเว็บไชต์คือการเผยแพร่เว็บไชต์ให้ผู้อื่นได้เห็น การจัดทำเว็บไซต์และเผยแพร่ในระบบอินเทอร์เน็ต ควร ดูแลรักษาหน้าเว็บไชต์และตรวจสอบการเชื่อมโยงอัพเดตข้อมูลให้เป็นปัจจุบัน เพื่อให้มีผู้เยี่ยมชมเว็บไซต์อย่าง ต่อเนื่อง กระบวนการพัฒนาและเผยแพร่เว็บไซต์ มีดังนี้ 1. การจัดโครงร่างและตรวจสอบการทำงานของไฟล์ภายในเว็บไซต์การจัดโครงร่างเว็บไซต์อย่าง เป็นระบบ จะช่วยให้สามารถค้นหา แก้ไขไฟล์ต่าง ๆ ได้อย่างรวดเร็ว ทำให้การพัฒนาเว็บไซต์ทำได้อย่างมี ประสิทธิภาพ 2. การขอพื้นที่เว็บไซต์บนเว็บเชิร์ฟเวอร์ (Web Server) การนำเว็บไซต์ที่สร้างและพัฒนาเสร็จ เรียบร้อยแล้วอัพโหลดขึ้นบนเครื่องเว็บเซิร์ฟเวอร์ 3. การจดโดเมนเนม (Domain Name) เพื่อใช้ระบุแทนชื่อเว็บไซต์ การตั้งชื่อเว็บไซต์จะไม่ช้ำกับ บุคคลอื่น ดังนั้น ควรเลือกใช้ชื่อที่ง่ยต่อการพิมพ์เพื่อให้บุคคลอื่นสามารถเรียกใช้งานได้ง่าย
26 2.4 โครงสร้างการทำงานของเว็บไซต์ โครงสร้างการทำงานของเว็บไซต์การทำงานของเว็บไซต์ คือ รูปแบบ เค้าโครง แบบแผนการจัดลำดับ เนื้อหาโดยแบ่งออกเป็นหมวดหมู่ เพื่อจัดทำเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือน แผนที่ของเว็บไซต์ ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยให้ผู้สร้างเว็บไซต์ไม่หลงทาง การจัดโครงสร้าง ของเว็บไชต์ มีจุดมุ่งหมายสำคัญคือ การที่จะทำให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็น ระบบซึ่งถือว่าเป็นขั้นตอนที่สำคัญ ที่สามารถสร้างความสำเร็จให้กับผู้ที่ทำหน้าที่ในการออกแบบและพัฒนา เว็บไซต์(Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็น ส่วนต่าง ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่ายต่อการอ่านเนื้อหาซองผู้ใช้ เว็บไชตีโครงสร้างการทำงานของเว็บไชต์ที่ดีจะส่งผลดีต่อผู้ใช้งานระบบ เพราะข้อมูลที่มีอยู่มากมายนั้นต้อง อาศัยการเชื่อมโยงเนื้อหาหรือการจัดระเบียบของเนื้อหาให้กับการสืบคันภายในเว็บไชต์ การจัดระเบียบที่ดีจะ ช่วยให้ผู้ใช้มีความสะดวก รวดเร็วในการเข้าถึงเนื้อหา ในขณะเดียวกันโครงสร้างที่ไม่เหมาะสมย่อมส่งผลเสีย ต่อผู้ใช้เช่นกัน รูปแบบโครงสร้างของเว็บไซต์ตามแนวคิดของลินช์และฮอร์ตัน (Lynch and Horton) มีดังนี้ 2.4.1 โครงสร้างของเว็บไซต์แบบเรียงตามลำดับ (Sequential Structure) โครงสร้างของเว็บไซต์แบบเรียงตามลำดับเป็นโครงสร้างของเว็บไซต์แบบธรรมดาที่ใช้กันมากที่สุด เนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยมจัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราว ตามลำดับไม่ซับซ้อน เหมาะกับเว็บไชต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทาง ของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บไซต์จะเป็นการดำเนินเรื่องที่ต่อเนื่องในลักษณะของเส้นตรง โดย มีปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่ สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทำให้เสียเวลาในการเข้าสู่เนื้อหาเพราะ ต้องคลิกต่อเนื่องแบบเรียงลำดับ sale.html product.html index.html รูปที่ 2.10 ผังโครงสร้างของเว็บไซต์แบบเรียงตามลำดับ contact.html
27 2.4.2 โครงสร้างของเว็บไซต์แบบลำดับขั้น (Hierarchical Structure) โครงสร้างของเว็บไชต์แบบลำดับขั้นเป็นโครงสร้างที่มีความเหมาะสมกับข้อมูลที่มีความซับซ้อนโดย แบ่งเนื้อหาออกเป็นส่วนต่าง ๆ และมีรายละเอียดย่อย ในแต่ละส่วนลดหลั่นกันลงมาในลักษณะเดียวกันกับ แผนภูมิองค์กร จึงง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหา ลักษณะเด่น คือ การมีจุดเริ่มต้นที่จุดรวม จุดเดียว นั่นคือโฮมเพจ (Home Page) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่าง Index Product sale about us Lenovo Huawel samsung รูปที่ 2.1 1 ผังโครงสร้างของเว็บไซต์แบบลำดับชั้น 2.4.3 โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure) โครงสร้างของเว็บไชต์แบบตารางนี้มีความชับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเน้นเพิ่ม ความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วนเหมาะ สำหรับการแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ Index Computer program printer Notebook windows driver รูปที่ 2.12 ผังโครงสร้างของเว็บไซต์แบบตาราง 2.4.4 โครงสร้างของเว็บไซต์แบบใยแมงมุม (Web Structure) โครงสร้างของเว็บไซต์แบบใยแมงมุมจะมีความยืดหยุ่นมากที่สุด โดยเนื้อหาทุกหน้าในเว็บไซต์สามารถ จะเชื่อมโยงไปถึงกันได้หมด จึงเป็นรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ซึ่งผู้ใช้สามารถกำหนดวิธีการเข้าสู่ เนื้อหาได้ด้วยตนเอง สามารถคลิกเพื่อเชื่อมโยงเนื้อหาแต่ละหน้า โครงสร้างลี้กษณะนี้จัดเป็นรูปแบบที่ไม่มี † † † † †
28 2.5 การออกแบบโครงสร้างการทำงานของเว็บไซต์ โครงสร้างที่แน่นอนตายตัว (Unstructured) นอกจากนี้ การเชื่อมโยงไมได้จำกัดเฉพาะเนื้อหาภายในเว็บไชต์ นั้น ๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาของเว็บไชต์ภายนอกเพิ่มเติมได้ ทำให้การเข้าสู่เนื้อหามีความ หลากหลายและสะดวกต่อผู้ใช้งาน Index Computer program printer Notebook windows driver รูปที่ 2.13 ผังโครงสร้างของเว็บไซต์แบบใยแมงมุม การออกแบบโครงสร้างเว็บไชต์ คือ การออกแบบ การวางแผน การจัดหมวดหมู่ลำดับของเว็บไซต์ ทั้งหมด และจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ เพื่อให้ผู้พัฒนาเว็บไซต์สามารถพัฒนาย่างถูกต้องรวดเร็ว การ ออกแบบโครงสร้างเว็บไชที่ดีจะช่วยให้ผู้ใช้ไม่สับสนและค้นหาข้อมูลได้อย่างรวดเร็ว หลักการออกแบบ โครงสร้างเว็บไซต์ มีดังนี้ 1. กำหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์ทำเพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ใช้ว่าต้องการกลุ่มเป้าหมายใดในการเข้าใช้งานเว็บไซต์ 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้าง หรือจัดระเบียบข้อมูลที่ชัดเจน การที่เนื้อหามีความต่อเนื่องไปไม่สิ้นสุดหรือกระจายมากเกินไป อาจทำให้เกิด ความสับสนต่อผู้ใช้ได้ ดังนั้น จึงควรออกแบบให้มีลักษณะที่ชัดเจน แยกย่อยออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ ให้สัมพันธ์กัน รวมทั้งอาจมีการแสดงให้ผู้ใช้เห็นแผนที่โครงสร้างเพื่อป้องกันความสับสน 4. กำหนดรายละเอียดให้กับโครงสร้างเว็บไซต์ ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ ในการใช้ เช่น ผู้ใช้ควรทำอะไรบ้าง จำนวนหน้าควรมีเท่าไร มีการเชื่อมโยงมากน้อยเพียงใด การออกแบบโครงสร้างเว็บไซต์ถือว่าเป็นขั้นตอนที่สำคัญที่สามารถสร้างความสำเร็จให้กับผู้ที่ทำ หน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ ชัดเจนแยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ให้สัมพันธ์กันและเป็นมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานง่าย ต่อการเข้าอ่านเนื้อหาของผู้ใช้เว็บไซต์
29 Home ร้านจำหน่ายโทรศัพท์มือถือ รูปที่ 2.14 ตัวอย่างการออกแบบโครงสร้างเว็บไซต์ในร้านจำหน่ายโทรศัพท์มือถือ สินค้า ราคามือถือ ซ่อมมือถือ ติดต่อเรา สินค้าใหม่ สินค้าขายดี อุปกรณ์เสริม FAQ Manual ประวัติ สถานที่ตั้ง
30