หลักการออกแบบเว็บไซต์ทางการศึกษา : ทฤษฎีสู่การปฏิบัติ by Jin Monsakul

โครงการตาราอีเลิร์นนิง โครงการมหาวิทยาลัยไซเบอร์ ไทย หลักการออกแบบเว็บไซต์ ทางการศึกษา:ทฤษฎีส่ กู ารปฏิบัติ สิ่งพิมพ์ TCU พิมพ์ ครัง้ ที่ 1

พุทธศักราช 2554

จานวน

2,000 เล่ม

จัดพิมพ์ เผยแพร่ โครงการมหาวิทยาลัยไซเบอร์ ไทย สานักงานคณะกรรมการการอุดมศึกษา 328 ถนนศรี อยุธยา ราชเทวี กรุ งเทพมหานคร 10400 โทรศัพท์ 02-3545678 ต่อ 2006, 02-6105233-9 โทรสาร 02-3545476 http://www.ThaiCyberU.go.th ข้ อมูลทางบรรณานุกรม จินตวีร์ คล้ ายสังข์ , หลักการออกแบบเว็บไซต์ทางการศึกษา:ทฤษฎีส่กู ารปฏิบตั ิ โครงการมหาวิทยาลัยไซเบอร์ ไทย, สานักงานคณะกรรมการการอุดมศึกษา กรุ งเทพ:2554 270 หน้ า ISBN 978-616-202-370-5 1. การออกแบบเว็บไซต์ 2. อีเลิร์นนิง 3. ชื่อเรื่ อง พิมพ์ ท่ ี

บริ ษัท สยามพริ น้ ท์ จากัด (SiamPrint Co.,Ltd) 115/69 ซอยรามอินทรา 40 แขวงนวลจันทร์ เขตบึงกุ่ม กรุ งเทพฯ 10230 Tel 02-5088019, 02-5088024, 02-5088028, Fax 02-5092971-2

http://www.ThaiCyberU.go.th

ก

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

ข

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

(ดร.สุเมธ แย้ มนุน่ ) เลขาธิการคณะกรรมการการอุดมศึกษา

ค

ในปั จจุบนั เว็บไซต์ทางการศึกษาถือว่าเป็ นสือ่ หลักในการเรี ยนการสอนแบบ ออนไลน์ การเรี ยนการสอนแบบอีเลิร์นนิง และการเรี ยนการสอนแบบผสมผสาน อีกทัง้ ยัง ถื อ ว่ า เป็ นสื่ อ การเรี ย นการสอนที่ มี บ ทบาทและเป็ นเครื่ อ งมื อ ส าคัญ ที่ ท าให้ การจัดการเรี ยนรู้ ในลักษณะดังกล่าวมีประสิทธิ ภาพและประสบความสาเร็ จยิ่งขึน้ โดยเฉพาะในเรื่ องของการเรี ยนรู้ การใฝ่ รู้ และการแลกเปลี่ยนเรี ยนรู้ ในบริ บทสังคม แห่งการเรี ยนรู้ ออนไลน์ ดังนัน้ ผู้เขียนจึงได้ จัดทาหนังสือเล่มนีข้ ึ ้นเพื่อเป็ นแนวทาง ในการออกแบบเว็ บ ไซต์ ท างการศึก ษาตามหลัก การทางการศึก ษา อี ก ทัง้ ยัง เป็ น การส่งเสริ มให้ ผ้ เู รี ยนสามารถสร้ างความรู้โดยการค้ นคว้ าและลงมือปฏิบตั ิ ไปด้ วย โดย เรี ยงตามความสนใจ ความถนัด และความสามารถของผู้เรี ยน นอกจากนี ้ ผู้เรี ย น ยังสามารถใช้ เครื่ องมือการติดต่อสื่อสารออนไลน์ช่วยในการจัดกิจกรรม ซึ่งนอกจาก จะช่ว ยให้ ผ้ ูเรี ยนได้ พัฒ นาตนเองตามวัต ถุประสงค์ ของการเรี ย นรู้ ที่ กาหนดไว้ แล้ ว ยังช่วยพัฒนาการคิดและทัก ษะการสื่อสาร และการมีปฏิสมั พันธ์ กบั เพื่อนและผู้สอน ออนไลน์อีกด้ วย ภายในหนังสือ เล่มนี จ้ ะเน้ นไปที่บริ บทของการเรี ยนการสอนอีเ ลิร์น นิงใน ระดับอุดมศึกษาแต่ก็ยงั สามารถประยุกต์ใช้ ได้ เป็ นอย่างดีในการศึกษาทุกระดับ โดย บทที่ 1 จะกล่า วถึง ข้ อมูลพืน้ ฐานเกี่ ย วกับ เว็บ ไซต์ ทางการศึกษา ในขณะที่บ ทที่ 2 จะกล่าวถึ ง หลัก การออกแบบเว็บ ไซต์ ท างการศึกษา บทที่ 3 เป็ นการน าเสนอ 16 ประเด็นที่สาคัญสาหรับรู ปแบบเว็บไซต์ทางการศึกษาซึ่งได้ นามาแบ่งเป็ นด้ านต่างๆ

ง

เพื่อการนาไปใช้ รวมถึงความพึงพอใจของผู้ใช้ ต่อรู ปแบบเว็บไซต์ทางการศึกษาด้ วย ข้ อมูลดังกล่าวในบทนี ้ได้ นามาจากงานวิจยั ของผู้เขียนที่ได้ จดั ทาขึ ้นในปี 2553 สาหรับ บทที่ 4 จะกล่าวถึงว่าจากแนวคิดทัง้ 3 บทข้ างต้ นจะนามาสูก่ ารปฏิบตั ิได้ อย่างไร โดย ผู้เขียนได้ เลือกใช้ opensource CMS และ LMS ที่ผ้ เู รี ยนสามารถทดลองใช้ และนาไป ต่อยอดได้ โดยผ่านการเรี ย นรู้ ด้ วยตนเองและการเข้ า ร่ วมเป็ นหนึ่งในสมาชิ กสังคม ออนไลน์ของCMS และ LMS นี ้ที่ได้ มีการปรับปรุงข้ อมูลให้ ทนั สมัยอยู่ตลอดเวลา ส่วน บทที่ 5 กล่าวถึงการประเมินเว็บไซต์ทางการศึกษา และบทสุดท้ ายบทที่ 6 การนาเสนอ กิจกรรมเพื่อส่งเสริ มความรู้และทักษะการออกแบบ เว็บไซต์ทางการศึกษา ผู้เขียนหวังเป็ นอย่างยิ่งว่า “หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎี สูก่ ารปฏิบตั ิ” ซึง่ เน้ นที่บริ บทของการเรี ยนการสอนอีเลิร์นนิ งในทุกระดับเล่มนี ้คงจะให้ เนื อ้ หาสาระที่ เ ป็ นประโยชน์ แ ก่ ผ้ ูอ่ า นไม่ม ากก็ น้ อ ย สุด ท้ า ยนี ้ ผู้เ ขี ย นขอขอบคุณ โครงการมหาวิทยาลัยไซเบอร์ ไทย สานักงานคณะกรรมการการอุดมศึกษา ที่ให้ การ สนับสนุนการจัดพิมพ์หนังสือเล่มนี ้เป็ นอย่างดียิ่งมา ณ โอกาสนี ้ด้ วย

ผู้ช่วยศาสตราจารย์ ดร. จินตวีร์ คล้ ายสังข์

จ

คานิยม คานา สารบัญ บทที่ 1

บทที่ 2

ข้ อมูลพืน้ ฐานเกี่ยวกับเว็บไซต์ ทางการศึกษา 1. ความเป็ นมาและความหมายของเว็บไซต์ทางการศึกษา และเว็บไซต์ทางการศึกษาเชิงโต้ ตอบ 2. ทฤษฎีทางการศึกษาและหลักการพื ้นฐานสาหรับ การออกแบบและพัฒนาเว็บไซต์ทางการศึกษา 3. องค์ประกอบของเว็บไซต์ทางการศึกษา 4. ขันตอนการออกแบบและพั ้ ฒนาเว็บไซต์ทางการศึกษา 5. โครงสร้ างเว็บไซต์ทางการศึกษา 6. กรณีศกึ ษาการออกแบบเว็บไซต์ทางการศึกษา หลักการออกแบบเว็บไซต์ ทางการศึกษา 1. หลักการพื ้นฐานในการออกแบบเว็บไซต์ทางการศึกษา 1.1 การเน้ นข้ อความสาคัญ 1.2 ความตรงกันข้ าม 1.3 ความสมดุล 1.4 การวางแนว/การจัดเป็ นเส้ นตรง 1.5 การทาซ ้า 1.6 การเลือกใช้ สี 1.7 การเลือกใช้ ภาพ

หน้ า ก ค จ 1 2 5 11 26 37 42 49 49 49 51 53 56 58 60 64

ฉ

2. หลักการเพิ่มเติมสาหรับการออกแบบเว็บไซต์ทางการศึกษา 2.1 ความเรี ยบง่าย 2.2 ความสม่าเสมอ 2.3 ระบบนาทาง 2.4 คุณภาพในการออกแบบ 2.5 การออกแบบหน้ าจอ 2.6 ความละเอียดของจอภาพ 2.7 การนาเสนอเนื ้อหา บทที่ 3

บทที่ 4

รูปแบบเว็บไซต์ ทางการศึกษา 1. การนาเสนอ 16 ประเด็นที่สาคัญสาหรับรู ปแบบเว็บไซต์ทาง การศึกษา 2. การนาเสนอรู ปแบบเว็บไซต์ทางการศึกษาที่แบ่งเป็ น 3 ด้ าน เพื่อการนาไปใช้ 3. การนาเสนอความพึงพอใจต่อรู ปแบบเว็บไซต์ทางการศึกษา การพัฒนาเว็บไซต์ ทางการศึกษา: ทฤษฎีส่ ูการปฏิบัติ 1. CMS: Content Management System 2. LMS: Learning Management System 3. การใช้ งานเว็บไซต์ในส่วนของ Moodle เบื ้องต้ น 4. การใช้ งานเว็บไซต์ในส่วนของ Joomla! เบื ้องต้ น

หน้ า 66 66 68 70 71 71 72 73 75 78 106 108 111 113 120 126 133

ช

บทที่ 5

บทที่ 6

การประเมินเว็บไซต์ ทางการศึกษา 1. ตัวอย่างเกณฑ์การประเมินเว็บไซต์ทางการศึกษา 2. ตัวอย่างแบบสอบถามรู ปแบบเว็บไซต์ทางการศึกษา 3. ตัวอย่างแบบประเมินประสิทธิภาพเว็บไซต์ทางการศึกษาและ แบบสอบถามความพึงพอใจเว็บไซต์ทางการศึกษา การนาเสนอกิจกรรมเพื่อส่ งเสริมความรู้และทักษะ การออกแบบเว็บไซต์ ทางการศึกษา 1. กิจกรรมที่ 1: การร่ วมระดมความคิดและแลกเปลี่ยน ประสบการณ์ 2. กิจกรรมที่ 2: การร่ วมระดมความคิดเว็บไซต์ทางการศึกษา 3. กิจกรรมที่ 3: ADDIE Step1 4. กิจกรรมที่ 4: ADDIE Step2 5. กิจกรรมที่ 5: วิเคราะห์ สังเคราะห์ องค์ประกอบที่สาคัญของ อีเลิร์นนิงเว็บไซต์ที่มีประสิทธิภาพ 6. กิจกรรมที่ 6: การออกแบบและพัฒนาหน้ าโฮมเพจสาหรับ การเรี ยนการสอนอีเลิร์นนิง 7. กิจกรรมที่ 7: การออกแบบและพัฒนาหน้ าเว็บเพจสาหรับ การเรี ยนการสอนอีเลิร์นนิง 8. กิจกรรมที่ 8: แลกเปลี่ยนเรี ยนรู้ การออกแบบและพัฒนา เว็บเพจสาหรับการเรี ยนการสอนอีเลิร์นนิง

หน้ า 179 179 194 214 227 227 227 230 233 245 251 255 256

ซ

9. กิจกรรมที่ 9: Review of CMS & LMS: What are Pros & Cons? 10. กิจกรรมที่ 10: Effective Website for e-Learning 11. กิจกรรมที่ 11: The effective website project: SUMMARY 12. กิจกรรมที่ 12: ประเมินเว็บไซต์ 13. กิจกรรมที่ 13: การประยุกต์ใช้ เกณฑ์การประเมินเว็บไซต์ บรรณานุกรม คณะผู้จัดทา

หน้ า 257 260 261 264 265 266 270

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 1

จากกระแสของสังคมที่ได้ รับผลกระทบของความก้ าวหน้ าทางเทคโนโลยี เครื่ องมือ สื่อสาร ตลอดจนสารสนเทศออนไลน์ต่าง ๆ นัน้ ทาให้ เกิดการเปลี่ยนแปลงในการดาเนินชีวิต การทางาน และการเรี ยนรู้ ของเรา จะเห็นได้ ว่าการเรี ยนรู้ ของเรานัน้ ได้ พึ่งพิงสารส นเทศ ออนไลน์ต่าง ๆ มากยิ่งขึ ้น ดังเช่นการใช้ เทคโนโลยีในการเรี ยนการสอนปั จจุบนั ที่หลายคน เชื่ อ ว่าจะเข้ ามาตอบโจทย์ ในเรื่ อ งของการจัด การเรี ยนให้ มีป ระสิทธิ ภ าพอย่ างสูงสุด สื่ อ การเรี ยนการสอนมีอยู่หลายประเภทด้ วยกัน ไม่วา่ จะเป็ นสื่อพื ้นฐาน สื่อคอมพิวเตอร์ ช่วยสอน หรื อสื่อเว็บไซต์ทางการศึกษาที่หลาย ๆ คนเชื่อว่าจะเข้ ามาช่วยเสริ มในเรื่ องของข้ อจากัดของ เวลาและสถานที่ ที่จะเอือ้ ให้ ผ้ ูเรี ยนสามารถเข้ ามาศึกษาหาความรู้ ณ ที่ใดและเวลาใดก็ได้ โดยสื่อ เว็บไซต์ทางการศึกษาถือ ว่าเป็ นสื่อการเรี ยนการสอนที่สนับสนุนให้ ผ้ ูเรี ยนได้ ศึกษา เรี ยนรู้ ด้ วยตนเอง ส่งเสริ มปฏิสมั พันธ์ ผ่านเครื อข่ายออนไลน์ทงกั ั ้ บผู้เรี ยนด้ วยกันเอง และ ระหว่างผู้เรี ยนกับผู้สอน ด้ วยแนวคิดที่ว่าการเรี ยนการสอนในลักษณะนีจ้ ะนาไปสู่การสร้ าง องค์ความรู้ ใหม่ ๆ ด้ วยตนเองผ่านสังคมแห่งการเรี ยนรู้ ออนไลน์ นอกจากนี ้ ในปั จ จุบัน จะเห็นได้ ว่าคุณ ประโยชน์ ข องเว็บ ไซต์ อันเป็ นแหล่ง เก็ บ รวบรวมข้ อมูลทุกชนิดได้ มากมายมหาศาล ผนวกกับอิทธิพลของอินเทอร์ เน็ตที่มีต่อการศึกษา อย่างมากมาย โดยเฉพาะในเรื่ องของการขยายโอกาสทางการศึกษา ดังจะเห็นได้ ว่าความรู้ มิได้ ถกู จากัดอยู่เพียงในห้ องเรี ยนอย่างเดียวอีกต่อไปแล้ ว แต่ผ้ เู รี ยนสามารถหาความรู้ ได้ ด้วย ตนเองจากเว็บไซต์ตา่ ง ๆ ผ่านการใช้ อินเทอร์ เน็ต ฉะนันรู ้ ปแบบของการเรี ยนการสอนควรเน้ น สอนวิธีการเรี ยนให้ ผ้ เู รี ยน ไม่ใช่สอนแต่เนื ้อหาวิชาเพียงอย่างเดียว (Teaching how to learn -- not what to learn.) และการเรี ยนการสอนในรู ปแบบนี ้ยัง เป็ นการส่งเสริ มทักษะการเรี ยนรู้ ตลอดชีวติ (Lifelong learning) อีกด้ วย ดัง นัน้ อาจกล่ า วได้ ว่า เว็บ ไซต์ ท างการศึก ษาที่ มี คุณ ภาพย่ อ มส่ ง ผลให้ ผ้ ูเ รี ย น ประสบความสาเร็ จและมีคุณภาพในการเรี ยนรู้ เช่นกัน โดยเว็บไซต์ทางการศึกษาดังกล่าวมี www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

รายละเอี ย ดความเป็ นมา ความหมาย ทฤษฎี ก ารศึก ษาและหลัก การพื น้ ฐานส าหรั บ การออกแบบและพัฒนาเว็บ ไซต์ ทางการศึกษา องค์ประกอบ ขัน้ ตอนการออกแบบและ พัฒนาเว็บไซต์ทางการศึกษา โครงสร้ างเว็บไซต์ทางการศึกษา และกรณีศกึ ษาการออกแบบ เว็บไซต์ทางการศึกษา ดังต่อไปนี ้ 1. ความเป็ นมาและความหมายของเว็บไซต์ ทางการศึกษาและเว็บไซต์ ทางการศึกษา เชิงโต้ ตอบ เว็บ ไซต์ ทางการศึกษาถื อ เป็ นสื่ อ หนึ่ง ที่ ใช้ ใ นการเรี ย นการสอนทางไกลที่ไ ด้ รั บ ความนิยมกันอย่างแพร่ หลายด้ วยจุดเด่นในด้ านของการเข้ าถึงได้ ตลอดเวลา และทุกสถานที่ โดยสามารถแยกได้ เป็ น 5 ยุค กล่าวคือ ยุคที่ 1 เริ่ มขึ ้นช่วงปลายปี พ.ศ. 2442 ซึง่ ใช้ จดหมาย เป็ นสื่อ นักเรี ยนและผู้สอนติดต่อสื่อสารกันโดยการเขียน ยุคที่ 2 คือ มหาวิทยาลัยเปิ ด (Open University) ซึง่ เริ่ มขึ ้นประมาณปี พ.ศ. 2513 ยุคที่ 3 ของการศึกษาทางไกลเริ่ มขึ ้น เมื่อประมาณปี พ.ศ. 2523 มาพร้ อมกับวิดีโอเทป การกระจายเสียง ดาวเทียม และสายเคเบิ ้ล ยุคที่ 4 คือ การเรี ยนการสอนผ่านเว็บ โดยเน้ นการให้ ความรู้ ผ่านทางเวิล์ด ไวด์ เว็บ โดย บทเรี ย นส่ว นใหญ่ ยังมี เนื อ้ หาที่ นิ่ง และผู้เรี ยนเข้ า เรี ยนศึกษาบทเรี ยนในลักษณะของ passive learners ยุคที่5 ยุคอีเลิร์นนิง เป็ นยุคของการศึกษาทางไกลที่พฒ ั นามาจากยุค ที่ 4 โดยใช้ เทคโนโลยีทุกประเภทของอินเทอร์ เน็ต โดยยุคที่ 5 ของการศึกษาทางไกลจะเน้ น บทเรี ยนที่ มี ก ารสร้ างองค์ ค วามรู้ ใหม่ อ ยู่ เ สมอจากการร่ วมระดมสมองผ่ า นชุ ม ชน แห่งการเรี ยนรู้ ต่าง ๆ (Community of learning) การเรี ยนการสอนจะเน้ นที่ผ้ เู รี ยนมีส่วนร่ วม เชิงรุ ก (Active) มีปฏิสมั พันธ์ (Interaction) กับผู้สอน ผู้เรี ยนด้ วยกันเอง บทเรี ยน และระบบ บริ หารจัดการการเรี ยนการสอน และเน้ นบทเรี ยน (Courseware) ในลักษณะมัลติมีเดีย (Multimedia) เมื่ อ พิจารณาการเรี ยนการสอนในรู ปแบบของการเรี ยนการสอนผ่านเว็บ (Web Based Instruction) และ แบบอีเลิร์นนิง (e-Learning) จะเห็นได้ ว่าจุดเชื่อมต่อของยุคที่ 4 และยุคที่ 5 นัน้ มีความสาคัญ กล่าวคือการเรี ยนการสอนในยุคที่ 4 นันจะเน้ ้ นที่การเรี ยน การสอนผ่ า นทางเว็ บ (Web based) หรื อ ผ่ า นทางอิ น เทอร์ เ น็ ต การใช้ ป ระโยชน์ ข อง สารสนเทศบนฐานข้ อมูลอินเทอร์ เน็ตจึงตอบสนองความต้ องการของผู้เรี ยนในพื ้นที่ห่างไกล สามารถที่จะเข้ ามาสู่การเรี ยนแบบนี ไ้ ด้ ไม่ ว่า จะอยู่ ณ ที่ใ ด และเวลาใดก็ไ ด้ จึง ถื อ ได้ ว่า อินเทอร์ เน็ตได้ ช่วยสร้ างโอกาสในการศึกษาทางไกลสาหรั บ ใครทุกคน ทุกหนแห่ง และทุก เวลา อย่างไรก็ตามการเรี ยนการสอนในยุคนี ้นันยั ้ งเป็ นการเน้ นที่ปฏิสมั พันธ์ระหว่างผู้เรี ยนกับ

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 3

บทเรี ยน และผู้เรี ยนกับผู้สอนเป็ นส่วนใหญ่ โดยปฏิสัมพันธ์ ระหว่างผู้เรี ยนด้ วยกันเองยังมี ข้ อจากัด อีกทังเครื ้ ่ องมือที่ใช้ ในการปฏิสัมพันธ์ ระหว่างการเรี ยนการสอนต่าง ๆ ทังแบบ ้ ประสานเวลา และไม่ประสานเวลาก็ยงั เป็ นปั ญหาอยู่ในช่วงเวลานันด้ ้ วย ดังนัน้ เมื่อยุคที่ 5 ของการศึกษาทางไกลที่ได้ พฒ ั นามาจากยุคที่ 4 โดยใช้ เทคโนโลยีทกุ ประเภทของอินเทอร์ เน็ต โดยส่วนใหญ่ แ ล้ ว เทคโนโลยีดังกล่าวจะเข้ ามาตอบโจทย์ ในเรื่ อ งของข้ อจากัดเครื่ อ งมื อ ที่ใช้ ในการปฏิสัมพันธ์ ร ะหว่างการเรี ยนการสอนต่าง ๆ ดังนัน้ ในยุค ที่ 5 นี ้ การนามาใช้ ของเครื่ องมือ ต่าง ๆ อาทิ WEB 2.0, อีเมล์ (Email), ห้ องสนทนา (Chat), ห้ อ งประชุม (Forum/Discussion), กลุ่ ม ผู้ สนใจ (Mailing List), ป้ ายประกาศ (Bulletin Board/ Announcement), การประกาศคะแนนทางอินเทอร์ เน็ต (e-Gradebook), การสอบทาง อินเทอร์ เน็ต (e-Exam), และระบบวิดีโอคอนเฟอร์ เรนท์หรื อกล้ องอินเทอร์ เน็ต (Webcam) สาหรั บการจัดประชุมทางไกล จึงมีความสาคัญ และเป็ นเครื่ องมือสาคัญที่ทาให้ การเรี ยน การสอนประสบความสาเร็ จยิ่งขึ ้น สรุ ปได้ ว่า ความเป็ นมาของการเรี ยนการสอนอีเลิร์นนิง เริ่ มจากวิวฒ ั นาการ 5 ยุค ของการศึกษาทางไกล ซึง่ เริ่ มตังแต่ ้ ยคุ ของการใช้ ชดุ เอกสารส่งผ่านทางไปรษณีย์ จากนันเป็ ้ น ช่วงของการเผยแพร่ สื่อต่าง ๆ ทางรายการโทรทัศน์ การใช้ จานดาวเทียมเพื่อส่งสัญญาณ ต่อ มาเป็ นยุคของการเรี ยนแบบใช้ บทเรี ยนการเรี ยนการสอนโดยใช้ คอมพิวเตอร์ ช่วยสอน (Computer-Assisted Instruction: CAI) บทเรี ยนการเรี ยนการสอนบนเว็บ (Web-Based Instruction: WBI) จนถึงในยุคปั จจุบนั ซึ่งเน้ นที่การเรี ยนการสอนผ่านเว็บหรื ออีเลิร์นนิง ที่ เน้ นในเรื่ องของการเรี ยนการสอนแบบ Anyone from Anywhere and at Anytime ที่ไม่มี ข้ อจากัดของเวลาและสถานที่ อีกทัง้ ยังเน้ นในเรื่ องของเทคโนโลยี WEB 2.0 Technology ที่ เน้ นการปฏิสมั พันธ์ระหว่างกันมากขึน้ และเรื่ องของ Online Learning Community หรื อ สังคมแห่งการเรี ยนรู้ อีกด้ วย ส าหรั บ จุ ด เริ่ ม ต้ น ของการเรี ย นการสอนอี เ ลิ ร์ น นิ ง ในประเทศไทยเริ่ ม ขึ น้ เมื่ อ กระทรวงศึกษาธิ ก ารได้ มี ประกาศ หลัก เกณฑ์ก ารขอเปิ ดและดาเนิน การหลักสูตรระดับ ปริ ญญาในระบบการศึกษาทางไกล พ.ศ. 2548 ราชกิจจานุเบกษา เล่ม 122 ตอนพิเศษ120 ง 26 ตุลาคม 2548 เพื่อส่งเสริ มการศึกษาตลอดชีวติ สาหรับประชาชน และส่งเสริ มให้ ผ้ เู รี ยนได้ มีโอกาสเรี ยนรู้ ด้วยตนเอง และเพื่อธารงไว้ ซงึ่ คุณภาพมาตรฐานการจัดการอุดมศึกษา โดยได้ กาหนดปรั ชญาและวัตถุป ระสงค์ไ ว้ ว่า สถาบันอุดมศึก ษาสามารถจัดการศึกษาทางไกล เพื่ อ ให้ เป็ นไปตามเจตนารมณ์ ข องพระราชบัญ ญัติก ารศึกษาแห่งชาติ พ.ศ. 2542 ซึ่ง www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

กาหนดให้ จดั การศึกษาตลอดชีวิตสาหรับประชาชนด้ วยวิธีการที่หลากหลาย เพื่อตอบสนอง ความต้ อ งการของบุค คลและสัง คม โดยไม่ ต้ อ งเข้ า ชัน้ เรี ย นตามปกติ และเป็ นการเพิ่ ม ประสิทธิภาพและคุณภาพการจัดการศึกษาระดับอุดมศึกษา การจัดการศึกษาทางไกล มุ่ง เปิ ดโอกาสและขยายโอกาสให้ นกั ศึกษาและผู้สนใจใฝ่ หาความรู้ สามารถศึกษาหาความรู้ ได้ ในเวลาและสถานที่ ที่ ต นสะดวกตามความสนใจและความสามารถของแต่ ล ะบุ ค คล สอดคล้ อ งกับ พัฒ นาการของเทคโนโลยี ส ารสนเทศและการสื่ อ สารอย่า งมี ประสิ ทธิ ภ าพ นอกจากนี ้ ประกาศฉบับนี ย้ ังกาหนดให้ สถาบันอุดมศึกษาที่จัดการศึกษาทางไกลจะต้ อ ง พัฒนาระบบการศึกษาทางไกลให้ สมบูรณ์ อยู่เสมอ โดยเฉพาะให้ มีเทคโนโลยีและสื่อทังสื ้ ่อ หลัก สื่อเสริ ม หรื อสื่อแบบผสมผสานที่จะใช้ อย่างเพียงพอ เพื่อเป็ นหลักประกันว่านักศึกษา จะได้ รับบริ การการศึกษาที่ดี สามารถเรี ยนรู้ ได้ ด้วยตนเองอย่างมีคณ ุ ภาพและได้ มาตรฐาน และหลักสูตรที่จัดการศึกษาทางไกลทุกหลักสูตรจะต้ อ งกาหนดและพัฒนาระบบประกัน คุณภาพของหลักสูตรให้ มี ประสิทธิภาพและเหมาะสมกับการจัดการศึกษาทางไกล ให้ ทุก หลัก สูต รมี ก ารพัฒ นาหลัก สูต รให้ ทัน สมัย และมี ก ารประเมิ น เพื่ อ พัฒ นาหลัก สูต รอย่ า ง ต่อเนื่องอย่างน้ อยทุก ๆ 5 ปี (กระทรวงศึกษาธิการ, 2548) ความหมายของเว็บไซต์ ทางการศึกษา การนาเว็บไซต์ทางการศึกษาไปใช้ ในการเรี ยนการสอนนัน้ จะมีการใช้ ในรู ปแบบที่ ต่าง ๆ กัน ไม่วา่ จะเป็ นการใช้ เป็ นสื่อเสริ มในการเรี ยนการสอนแบบใช้ เว็บช่วย การใช้ เป็ นสื่อ หลักในการเรี ยนการสอนแบบออนไลน์และการเรี ยนการสอนแบบผสมผสาน จากรายงานผล สารวจเรื่ อง “อีเลิร์นนิงระดับปริ ญญาผุดขึ ้นมามากมาย: การศึกษาออนไลน์ในสหรัฐอเมริ กา พ.ศ. 2548” (Growing by Degrees: Online Education in the United States, 2005) ของ สมาคมสโลน คอนซอร์ เทียม (Sloan Consortium Foundation) ซึง่ ได้ แปลและเรี ยบเรี ยงโดย ศาสตราจารย์ ดร. ศรี ศกั ดิ์ จามรมาน ดังแสดงในตารางที่ 1.1

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 5

ตารางที่ 1.1 ประเภทการเรี ยนการสอนออนไลน์ สัดส่ วนของ เนือ้ หาที่ นาเสนอทาง อินเทอร์ เน็ต

ประเภทการเรียน การสอน

รายละเอียด

แบบใช้ เว็บช่วย (Web-Facilitated)

วิชาที่ ใช้ เทคโนโลยีเว็บเพื่อ อานวยความสะดวกใน การสอนวิ ช าที่ เ คยสอนในชัน้ เรี ย นปกติ ใ ช้ ร ะบบ การจัดการวิ ชาหรื อหน้ าเว็ บเพื่อน าเสนอค าอธิ บาย รายวิชา และการบ้ าน เป็ นต้ น

30-79%

แบบผสมผสาน (Blended/ Hybrid)

นาเสนอเนื อ้ หาวิ ชาโดยผสมผสานวิ ธีออนไลน์ แ ละ การเรี ย นการสอนในชัน้ เรี ย น เนื อ้ หาและกิ จ กรรม ส่ว นมากนาเสนอผ่านอินเทอร์ เน็ ต เช่น ระบบบริ หาร จัดการรายวิ ชา ห้ องสนทนา และบางส่ว นจัด อยู่ใ น ห้ องเรียนปกติ

80-100%

แบบออนไลน์ / แบบอีเลิร์นนิง (Online/ E-Learning)

นาเสนอเนือ้ หาทังหมด ้ หรื อเกือบทัง้ หมดทางออนไลน์ หรื อทางอิ น เทอร์ เน็ ต และโดยทั่ ว ไปแล้ วไม่ มี การจัดการเรียนการสอนในห้ องเรียนเลย

1-29%

2. ทฤษฎีทางการศึกษาและหลักการพืน้ ฐานสาหรับการออกแบบและพัฒนาเว็บไซต์ ทางการศึกษา ทฤษฎีและหลักการพืน้ ฐานที่สาคัญสาหรั บการออกแบบและพัฒนาเว็บไซต์ทาง การศึกษาประกอบด้ วย 5 ส่วนหลักคือ (1) ทฤษฎีการเรี ยนรู้ (2) ทฤษฎีระบบ (3) ทฤษฎี การติดต่อสื่อสาร (4) รู ปแบบการเรี ยนการสอน และ (5) การศึกษาทางไกล ซึ่งล้ วนมี ความสาคัญต่อการเรี ยนในรู ปแบบนี ้ (Davidson-Shivers & Rasmussen, 2006)

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

แผนภาพที่ 1.1: WBID MODEL (ที่มา Davidson-Shivers & Rasmussen, 2006) 1) ทฤษฎีการเรี ยนรู้ ประกอบด้ วย (1) ทฤษฎีพฤติกรรมนิยมที่เชื่อในเรื่ องของ การฝึ กปฏิบตั ิ การเสริ มแรงและการลงโทษ การมีส่วนร่ วมในการเรี ยนและการตอบสนอง การปรับพฤติกรรม และการเลียนแบบ (2) ทฤษฎีพุทธิปัญญา ที่เน้ นเรื่ องการเรี ยนรู้ ที่ผ้ เู รี ย น เป็ นศูนย์กลาง การเรี ยนรู้ อย่างมีความหมายและเป็ นระบบ โดยคานึงถึงพื ้นฐานความรู้ เดิม และการเชื่อ มโยงไปสู่ความรู้ ใหม่ (3) ทฤษฎีคอนสตรั คติวิสต์ ที่เน้ นเรื่ องของการสร้ าง องค์ความรู้ ด้ วยตนเอง แต่ละทฤษฎี นนั ้ ล้ วนมีวัตถุประสงค์เดียวกันคือ เพื่อ ให้ ผ้ ูเรี ยนบรรลุ เป้าหมายการเรี ยนรู้ ที่ได้ กาหนดไว้ อย่างไรก็ตามด้ วยลักษณะของความรู้ และวัตถุประสงค์ที่ ต่างกัน ทฤษฎีทงั ้ 3 นีจ้ ึงเหมาะสมในสถานการณ์ที่ แตกต่างกันไป ในการเรี ยนรู้ ผ่านบริ บท ของสื่อเว็บ โดยที่ผ้ สู อนเป็ นผู้ช่วยเหลือ แนะนา และจัดสภาพแวดล้ อมให้ เหมาะต่อการเรี ยน และบริ บทของสังคมที่เอื ้อต่อการเรี ยนรู้ ทฤษฎีพฤติกรรมนิยม (Behaviorist Theory) นักจิตวิทยาการศึกษา ได้ แก่ Thorndike (1913) Pavlov (1927) และ Skinner (1974) เชื่อว่าการเรี ยนรู้ คือการเปลี่ยนแปลงพฤติกรรมที่สามารถสังเกตเห็นได้ อันเกิดจาก การให้ สิ่งเร้ าจากภายนอกในสภาพแวดล้ อมการเรี ยนรู้ นักจิตวิทยากลุ่มนี ้เชื่อว่าพฤติกรรม

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 7

ที่สงั เกตเห็นได้ เป็ นการบ่งชี ้อย่างชัดเจนของการเรี ยนรู้ ที่เกิดขึ ้น ไม่ใช่สิ่งที่อยู่ในความคิดของ ผู้เรี ยน ดังนัน้ แนวทางปฏิบตั ิของการนาแนวคิดของนักจิตวิทยากลุ่มพฤติกรรมนิยมไปใช้ คือควรมีการแจ้ งให้ ทราบว่าวัตถุประสงค์ของการเรี ยนการสอนคืออะไร เพื่อให้ ผ้ เู รี ยนทราบ และตังความคาดหวั ้ ง ตลอดจนการประเมินตนเองว่าจะสามารถได้ รับผลการเรี ยนรู้ ประจา บทเรี ยนนัน้ ๆ หรื อไม่ ผู้เรี ยนจะต้ องได้ รับการประเมินผลการเรี ยนการสอนเพื่อให้ ทราบว่า ตนเองมีผลการเรี ยนรู้ เป็ นไปตามที่กาหนดไว้ หรื อไม่ ทังนี ้ ้อาจมาจากการให้ ข้อมูลป้อนกลับที่ เหมาะสมทังในภาพรวมและในทุ ้ ก ๆ ขันตอนของการเรี ้ ยนการสอน เพื่อให้ ผ้ เู รี ยนสามารถ ตรวจสอบได้ วา่ ตนเองกาลังเกิดการเรี ยนรู้ ที่ถกู ต้ องหรื อไม่ อย่างไร ทฤษฎีพุทธิปัญญา (Cognitive Theory) นักจิตวิทยาและนักการศึกษากลุ่มพุทธิปัญญา เชื่อว่าการเรี ยนรู้ บางเรื่ องไม่สามารถ สัง เกตเห็ น ได้ จ ากพฤติ ก รรมที่ แ สดงออก และการเรี ย นรู้ ที่ เ กิ ด ขึ น้ มี ม ากกว่ า การวัด ด้ ว ย พฤติกรรมที่เปลี่ยนแปลง ดังนัน้ นักจิตวิทยาและนักการศึกษากลุ่มนี จ้ ึงศึกษาเกี่ยวกับการ เรี ยนรู้ ที่เกี่ยวข้ องกับการใช้ ความจา แรงจูงใจ และการคิดตลอดจนการสะท้ อนที่แสดงให้ เห็นถึง กระบวนการเรี ยนรู้ ของผู้เรี ยน ซึ่งนักจิตวิทยากลุ่มนีพ้ ิจารณาว่าการเรี ยนรู้ เป็ นกระบวนการที่ เกิ ด ขึ น้ ภายในของผู้ เรี ย น ตามความสามารถในการเรี ย นรู้ ของแต่ ล ะบุ ค คลปริ ม าณ ความสามารถ ความพยายามที่ท่มุ เทระหว่างกระบวนการเรี ยนรู้ และความซับซ้ อนของการ ประมวลผล ตลอดจนโครงสร้ างความรู้ เดิมของผู้เรี ยน ดังนันแนวทางปฏิ ้ บตั ิของการนาแนวคิด ของนักจิตวิทยาและนักการศึกษากลุ่มพุทธิปัญญาไปใช้ ได้ คือ การใช้ กลวิธีที่ให้ ผ้ ูเข้ ารั บการ เรี ยนการสอนได้ เข้ าถึงสื่อการเรี ยนได้ มากที่สุด เพื่อให้ ผ้ ูเข้ ารับการเรี ยนการสอนสามารถถ่าย โอนสิ่งที่ได้ รับผ่านประสาทสัมผัสไปยังหน่วยความจาระยะสัน้ เช่น การอ่าน การมอง และการ สัมผัส เป็ นต้ น นอกจากนี ้การจัดลาดับเนือ้ หาอย่างเป็ นระบบ เรี ยงลาดับจากง่ายไปยาก และ แสดงถึงความเชื่อมโยง เช่น การใช้ ผงั ความคิดล่วงหน้ า (Advanced Organizer) จะช่วยให้ ผ้ ู เข้ ารับการเรี ยนการสอนเกิดการจดจาและระลึกถึงข้ อมูลนัน้ ๆ ได้ ดียิ่งขึ ้น ทฤษฎีคอนสตรัคติวสิ ต์ (Constructivist Theory) นักทฤษฎีกลุ่มคอนสตรัคติวสิ ต์มีความคิดเห็นในเรื่ องการเรี ยนรู้ ของผู้เรี ยน โดยนัก ทฤษฎีกลุ่มนี ้เห็นว่าผู้เรี ยนแต่ละคนมีการแปลความหมายของสารที่ได้ รับและการแปลความ สิ่งที่อยู่รอบตัวตามการรับรู้ ของแต่ละบุคคล ซึง่ การรับรู้ นนภายหลั ั้ งจะเปลี่ยนเป็ นความรู้ ตาม ความเข้ าใจของผู้เรี ยนแต่ละคน (Learners construct their own knowledge) นักทฤษฎี www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

กลุ่มนี ้มองว่าผู้เรี ยนจะต้ องเป็ นศูนย์กลางการเรี ยนรู้ (Learner center) ซึง่ มีผ้ สู อนทาหน้ าที่ เป็ นผู้ช่วยสนับสนุนการเรี ยนรู้ และให้ คาแนะนาสนับสนุนการเรี ยนรู้ (facilitator, coach) โดยผู้สอนจะเป็ นผู้ให้ คาแนะนามากกว่าเป็ นผู้ถ่ายทอดความรู้ กิจกรรมการเรี ยนจึงเน้ น สถานการณ์ ก ารเรี ย นรู้ ซึ่ ง ผู้ เรี ยนจะต้ องประยุ ก ต์ ใ ช้ ความรู้ ในการแก้ ปั ญหา ดัง นั น้ การประยุกต์ใช้ ทฤษฎีคอนสตรั คติวิสต์สาหรั บการเรี ยนการสอน คือการจัดการเรี ยนรู้ ที่ให้ ผู้เข้ ารั บการเรี ยนการสอนมี ส่วนร่ วมและวิทยากรตัง้ คาถามหรื อ เสนอสถานการณ์ ปัญ หา กระตุ้นให้ ผ้ ูเข้ ารั บการเรี ยนการสอนคิดวิเคราะห์และคิดแก้ ปัญ หา วิทยากรในฐานะที่เป็ น ผู้สนับ สนุนการเรี ยนรู้ จะต้ อ งจัด เตรี ย มแหล่งข้ อ มูลให้ เพี ย งพอต่อ การเรี ย นรู้ ของผู้เ ข้ ารั บ การเรี ย นการสอน อั น จะน าไปสู่ ก ารสร้ างองค์ ค วามรู้ ใหม่ ต ามความเข้ าใจของผู้ เรี ย น นอกจากนี ้การเรี ยนแบบร่ วมมือ (Collaborative learning) ยังช่วยกระตุ้นให้ ผ้ เู ข้ ารับการเรี ยน การสอนแลกเปลี่ยนความคิดเห็นและร่ วมกันทางานให้ เสร็ จตามที่ได้ รั บมอบหมาย และมี ปฏิสัมพันธ์ กับผู้อื่ น ซึ่งจะนาไปสู่ การเรี ยนรู้ เพื่ อ ส่งเสริ มการเรี ยนรู้ ขัน้ สูง (higher order learning) และเกิดชุมชนแห่งการเรี ยนรู้ (learning community) อีกด้ วย สรุ ปได้ ว่าการใช้ ความรู้ ของทฤษฎีการเรี ยนรู้ ทัง้ 3 กลุ่ม ได้ แก่ พฤติกรรมนิยม พุทธิ ปั ญ ญา และคอนสตรั ค ติวิสต์ ล้ วนมี วัตถุป ระสงค์เ ดีย วกันคือ เพื่ อ ให้ ผ้ ูเ รี ยนบรรลุ เป้าหมายการเรี ยนรู้ ที่ได้ กาหนดไว้ อย่างไรก็ตามด้ วยลักษณะของความรู้ และวัตถุประสงค์ที่ ต่างกัน ทฤษฎีทงั ้ 3 นีจ้ ึงเหมาะสมในสถานการณ์ที่แตกต่างกันไป เช่น การใช้ ทฤษฎีกลุ่ม พฤติกรรมนิยมจะเหมาะกับการเรี ยนการสอนที่เน้ นข้ อเท็จจริ ง ในขณะที่หลักการจากทฤษฎี พุทธิ ปัญ ญาจะเหมาะกับการเรี ยนการสอนที่เน้ นหลักการและกระบวนการ และหลักการ จากทฤษฎี ค อนสตรั ค ติวิส ต์ จ ะเหมาะกับ การเรี ย นการสอนที่ เ น้ น ทัก ษะการคิด ระดับ สู ง (Ally, 2006; Waterhouse, 2005) 2) ทฤษฎีระบบ (Systems Theory) ประกอบด้ วยองค์ประกอบ 2 ส่วนคื อ Systemic เชื่อ ว่าผู้เรี ยนสามารถเรี ยนรู้ ได้ ดีที่สุดผ่านการออกแบบการสอนอย่างเป็ นระบบ (organized approach) นาไปสู่นวัตกรรมการสอน (instruction innovation) ซึง่ อาจอยู่ใน รู ปแบบของผลงานในภาพรวมหรื อกระบวนการ ในขณะที่ Systematic พิจารณาแนวคิดจาก นวัตกรรมซึง่ อาจอยู่ในรู ปของผลงาน กฎเกณฑ์ หรื อกระบวนการที่ได้ นาไปเผยแพร่ หรื อปรับ ใช้ ในองค์กร โดยเน้ นที่ผลลัพธ์ที่ได้ จากนวัตกรรมนัน้ ๆ

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 9

3) ทฤษฎีการติดต่ อสื่อสาร (Communication Theory) ถือเป็ นองค์ประกอบ ส าคัญ องค์ ป ระกอบหนึ่ ง ซึ่ง จะเน้ นในเรื่ อ งของกระบวนการส่ ง ผ่ า นและถ่ า ยโอนข้ อ มูล (Message) ให้ มีประสิทธิภาพสูงสุดจากผู้ส่งสาร (Sender) ไปยังผู้รับสาร (Receiver) และ ผลย้ อนกลับ (Feedback) จากผู้รับสารมายังผู้ส่งสาร และการลดสิ่งแทรกแซง (noise) ให้ ได้ มากที่สุด เพื่อให้ ผ้ รู ั บสารได้ รับข้ อมูลที่กระจ่างและถูกต้ องที่สุด ดังนันการออกแบบสาร ้ (Message Design) จึงถือเป็ นองค์ประกอบสาคัญในการออกแบบการสอนแบบออนไลน์ ไม่วา่ จะเป็ นในเรื่ องของการออกแบบหน้ าเว็บที่เหมาะสม (webpage layout) การประยุกต์ใช้ หลักการติดต่อสื่ อสาร (Communication principle) เพื่อ สร้ างระบบนาทางที่เหมาะสม (Navigation) ด้ วยการใช้ ปมุ่ (buttons) สัญรู ป (icon) และการเชื่อมโยง (hypermedia) ด้ วย ข้ อความ (text) และสื่อรู ปแบบต่าง ๆ เช่น เสียง(audio) วีดิทศั น์ (video) และสื่อประสม (multimedia) โดยแนวคิ ด การออกแบบสารต่ า ง ๆ เหล่ า นี จ้ ะช่ ว ยเพิ่ ม การส่ ง สารและ การแลกเปลี่ยนข้ อมูลให้ มีประสิทธิภาพยิ่งขึ ้น 4) รู ปแบบการเรี ยนการสอน (ID Models) แบบจาลองการออกแบบการสอน ADDIE ซึ่งถือว่าเป็ นแบบจาลองแรกเริ่ มและเป็ นรากฐานที่สาคัญ (Generic Model) ซึ่ง นาไปสู่แบบจาลองอื่น ๆ ที่นิยมในปั จจุบนั เช่น Dick and Carey Model, Kemp Model, Gagne Model เป็ นต้ น แบบจาลอง ADDIE ย่อมาจาก Analysis, Design, Development, Implementation, Evaluation โดยหลักการนาไปใช้ คือ ผลลัพธ์ ที่ได้ ในแต่ละขัน้ จะนาไปสู่ การดาเนินงานในขันต่ ้ อ ๆ ไป โดยขันตอนของการวิ ้ เคราะห์ (Analysis) จะเน้ นที่วตั ถุประสงค์ ของกลุ่มผู้ชม/เป้าหมาย และเนื อ้ หา การออกแบบ (Design) จะเน้ นที่ความสอดคล้ องกับ วัตถุป ระสงค์ข องกลุ่มผู้ชม/เป้าหมาย พื น้ ฐานของผู้เรี ย น วัต ถุประสงค์ข องบทเรี ย นและ เนื อ้ หา การพัฒ นา (Development) เป็ นการก าหนดแผนการด าเนิ น งานผลิ ต อย่ า งเป็ น ขันตอนเพื ้ ่อตอบสนองวัตถุประสงค์ของเนื ้อหา บทเรี ยนและการประเมินผล และรู ป แบบที่ได้ ออกแบบไว้ การนาไปใช้ (Implementation) คือการนาผลงานไปใช้ งานจริ งหลังจากที่ได้ มี การทดลองนาไปใช้ กับกลุ่มเป้าหมายและได้ ปรั บแก้ ตามข้ อเสนอแนะแล้ ว นอกจากนีอ้ าจ รวมถึงการตรวจสอบและขอคาแนะนาจากผู้เชี่ยวชาญด้ านการออกแบบบทเรี ยน สุดท้ ายคือ การวัด ผลและการประเมิ น (Evaluation) ที่ จ ะต้ องท าอย่ า งมี ร ะบบ โดยการประเมิ น ประกอบด้ ว ย 2 ส่ ว นที่ ส าคัญ คื อ การประเมิ น ผลระหว่า งขัน้ ตอนพัฒ นา (Formative Evaluation) เพื่อนาไปปรับปรุ งแก้ ไขในการดาเนินงานขันต่ ้ อ ๆ ไป และการประเมินผลเมื่อ

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

พัฒนาบทเรี ยนเรี ยบร้ อยแล้ ว (Summative Evaluation) เพื่อเป็ นการเปิ ดโอกาสสาหรับความ คิดเห็นจากผู้ใช้ งาน และการประเมินจากผลสัมฤทธิ์ของผู้เรี ยน 5) การศึกษาทางไกล (Distance Education) เป็ นการศึกษาซึง่ ส่งเสริ มให้ ผ้ เู รี ยน ที่มีข้อจากัดในเรื่ องของเวลาและสถานที่ได้ มีโอกาสศึกษาเล่าเรี ยน โดยการศึกษาทางไกล สามารถจาแนกออกได้ เป็ น 3 ประเภทคือ (1) การเรี ยนที่ผ้ เู รี ยนอยู่ต่างสถานที่และเข้ าเรี ยน ต่างเวลา e-mail และกระดานสนทนาจึงถูกใช้ เป็ นเครื่ องมือหลักในการติดต่อสื่อสาร (2) การ เรี ยนที่การติดต่อ สื่ อ สารระหว่างผู้เรี ย นและผู้สอนเกิดขึน้ ในเวลาเดียวกัน (Synchronous communication) แต่ต่างสถานที่ เช่น การเรี ยนผ่านทางระบบ teleconference การใช้ chat เพื่อการสนทนาโต้ ตอบและ (3) การเรี ยนแบบไม่ประสานเวลา (Asynchronous) ที่ผ้ เู รี ยนและ ผู้สอนเข้ าร่ วมการเรี ยนการสอนต่างเวลากัน ปั จจัยพื ้นฐานที่สาคัญสาหรั บการจัดการเรี ยนรู้ แบบอีเลิร์นนิงทัง้ 5 ส่วนนี ้ล้ วนมี ความสาคัญอย่างยิ่ง ซึง่ ถ้ าผู้สอนหรื อผู้ออกแบบบทเรี ยนสามารถออกแบบได้ ครอบคลุมทัง้ 5 ส่วน จะทาให้ การจัดการเรี ยนรู้ ในรู ปแบบนี ้ประสบผลสาเร็ จยิ่งขึ ้น ข้ อดีของการจัดการเรี ยนรู้ ในรู ป แบบอี เ ลิ ร์ น นิ ง คื อ การใช้ ป ระโยชน์ ข องสารสนเทศบนฐานข้ อมูล อิ น เทอร์ เ น็ ต และ การสร้ างโอกาสในการศึกษา อย่างไรก็ตามการจัดการเรี ยนรู้ ในปั จจุบนั นีย้ ังเป็ นการเน้ นที่ ปฏิสัมพันธ์ ร ะหว่างผู้เรี ยนกับบทเรี ยน และผู้เรี ยนกับผู้สอนเป็ นส่วนใหญ่ โดยปฏิสัมพันธ์ ระหว่า งผู้เ รี ย นด้ ว ยกัน เองยัง มี ข้ อ จ ากัด อี ก ทัง้ เครื่ อ งมื อ ที่ ใ ช้ ใ นการปฏิ สัมพัน ธ์ ร ะหว่า ง การเรี ยนทังแบบประสานเวลาและไม่ ้ ประสานเวลาก็ยังเป็ นปั ญ หาอยู่ ดังนัน้ จะเห็นได้ ว่า แนวโน้ มในอนาคตจะมีการนาเทคโนโลยีเว็บ 2.0 มาช่วยเสริ มและตอบโจทย์ในเรื่ องของ ข้ อจากัดของเครื่ องมือที่ใช้ ในการปฏิสมั พันธ์ระหว่างการเรี ยน เช่น บล็อก (Blog) สารานุกรม เสรี (Wikipedia) และ การสัมมนาออนไลน์ (Webinar) จะเห็นได้ ว่าเครื่ องมือดังกล่าวจะเริ่ ม เข้ ามามีบทบาทและเป็ นเครื่ องมือสาคัญที่ทาให้ การจัดการเรี ยนรู้ มีประสิทธิภาพและประสบ ความสาเร็ จยิ่งขึ ้น โดยเฉพาะในเรื่ องของการเรี ยนรู้ การใฝ่ รู้ และการแลกเปลี่ยนเรี ยนรู้ ใน สังคมออนไลน์ (Online Learning Community) โดยสรุ ปการจัดการเรี ยนรู้ แบบอีเลิร์นนิง ผู้สอนควรให้ ความสาคัญกับศาสตร์ ด้าน การศึกษา โดยเน้ นการจัดการเรี ยนรู้ ที่อาศัยทฤษฎีการเรี ยนรู้ ทฤษฎีการติดต่อสื่อสาร และ รู ปแบบการจัดการเรี ยนรู้ ที่ส่งเสริ มให้ ผ้ ูเรี ยนสร้ างความรู้ โดยการค้ นคว้ าและลงมือปฏิบตั ิ ด้ วยตนเองตามความสนใจ ความถนัด และความสามารถของผู้เรี ยน โดยใช้ เครื่ อ งมื อ การติดต่อสื่อสารบนออนไลน์ช่วยในการจัดกิจกรรม ซึ่งนอกจากจะช่วยให้ ผ้ ูเรี ยนได้ พัฒนา

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 11

ตนเองตามวัต ถุ ป ระสงค์ ก ารเรี ย นรู้ ที่ ก าหนดไว้ แ ล้ ว ยัง ช่ ว ยพัฒ นาการคิ ด และทัก ษะ การสื่อสารและการมีปฏิสมั พันธ์กบั เพื่อนและผู้สอนออนไลน์ด้วย 3. องค์ ประกอบของเว็บไซต์ ทางการศึกษา องค์ประกอบของเว็บไซต์ทางการศึกษาที่สาคัญประกอบด้ วย 3 องค์ประกอบ พื ้นฐาน โดยมีรายละเอียดดังนี ้ 1) บทเรียนอิเล็กทรอนิกส์ (courseware) เป็ นเนื ้อหาสาระที่นาเสนอในรู ปแบบอิเล็กทรอนิกส์ ซึง่ ส่วนใหญ่มีลกั ษณะเป็ นสื่อ ประสม โดยเน้ นการออกแบบที่ใช้ วิธีการ กลยุทธ์ และการให้ ข้อมูลป้อนกลับแก่ผ้ เู รี ยนโดย ทันทีในการนาเสนอ ที่กระตุ้นให้ ผ้ เู รี ยนเกิดการเรี ยนรู้ ตามวัตถุประสงค์ที่กาหนดไว้ ซึง่ ผู้เรี ยน สามารถเข้ าถึงเนื อ้ หาได้ ตามความต้ อ งการ ตลอดจนอาจมี แ บบฝึ กหัดหรื อ แบบทดสอบ เพื่อให้ ผ้ ูเรี ยนสามารถตรวจสอบความเข้ าใจ ทังนี ้ ้อาจยึดแนวทางของ learning object บทเรี ยนอิเล็กทรอนิกส์ (Courseware) ในรู ปแบบของ Learning Objects เป็ นสื่อการสอนใน ลักษณะบทเรี ยนอิเล็กทรอนิกส์ที่มีขนาดเล็ก สามารถนากลับมาใช้ ใหม่โดยการจั ดเรี ยงลาดับ เนื ้อหาใหม่ เกิดเป็ นบทเรี ยนใหม่ โดยมีองค์ประกอบสาคัญในแต่ละ Learning Object คือ (1) วัตถุประสงค์การเรี ยนรู้ (2) หน่วยการเรี ยน และ (3) แบบทดสอบ โดยคุณลักษณะเด่น ของ Learning Objects คือเนื ้อหาเป็ นอิสระภายในตัวเอง สะดวกต่อการนาไปใช้ และการ ปรับแก้ (content updated) สามารถใช้ ซ ้า(reusable) แบ่งปั น แลกเปลี่ยนเนื ้อหาระหว่างกัน (repository) ได้ ผ่านระบบบริ หารการเรี ยนการสอน (Learning Management System) อีก ทัง้ ยัง เป็ นการลดปั ญ หาไฟล์ ข นาดใหญ่ แ ละการปรั บ ปรุ ง แก้ ไขเนื อ้ หาบทเรี ย น ได้ ย าก (Davidson-Shivers, 2006; Waterhouse, 2005; ใจทิพย์ ณ สงขลา, 2550; Khan, 2005) ดังตัวอย่างผลงานวิจยั ในตารางที่ 1.2 และหนังสือ/บทความในตารางที่ 1.3-1.4

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ตารางที่ 1.2 งานวิจยั ในประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา

มัลติมีเดีย ความน่าเชื่อถือ

ชื่อ ผู้วิจัย

การ ตัวแปร ออกแบบ ตาม

สรุ ปผลการวิจัย

เจนจิรา รูปแบบ   รู ปแบบโฮมเพจเว็ บไซต์ท างด้ านการศึกษาระดับ อุดมศึกษา พบว่า อนันตกาล โฮมเพจ 1. ความน่าเชื่อถือของโฮมเพจทางด้ านการศึกษาควรมี ความ (2548) เว็บไซต์ ยาวของโฮมเพจเมื่อเทียบกับจอภาพมีค วามยาวเหมาะสมกับ ทางด้ าน เนื อ้ หา มีโครงสร้ างเป็ นแนวตัง้ สัญ ลัก ษณ์ สถาบัน อยู่ด้ านบน การศึกษา กึ่งกลางหน้ ามีแนวการวางเมนูหลักแบบทังแนวตั ้ งและแนวนอน ้ ระดับ โดยแนวตัง้ อยูด่ ้ านซ้ ายและแนวนอนอยู่ด้านบน มีเมนูหลักเป็ น อุดมศึกษา แบบ Pop-up Menu และใช้ สีแสดงสถานะการเชื่อมโยงจากเมนู หลักไปสูเ่ นื ้อหา 2. ด้ านเนื ้อหา จัดวางเนือ้ หาแบบจัดกลาง และแสดงเนือ้ หา แบบคอลัมน์เดียว จัดวางองค์ประกอบในลักษณะมีพื ้นที่ส่วนบน และใช้ พื ้นที่ด้านซ้ ายแคบกว่าพื ้นที่ด้านขวา 3. ด้ านสี ผู้ใช้ เว็บไซต์ทางด้ านการศึกษาให้ ความสาคัญใน เรื่ องการใช้ สีสวยงามสบายตา และสื่อความหมายได้ ต รงตาม จุดประสงค์ และเห็นว่าลักษณะพื ้นหลังสีอ่อน ตัวอักษรสีเข้ ม ใช้ โทนสีเย็นเหมาะสมสาหรับเว็บไซต์ทางด้ านการศึกษา 4. ด้ านตัวอักษร ผู้ใช้ ให้ ความสาคัญกับตัวอักษรที่เป็ นแบบที่ อ่ า นง่ า ย ชั ด เจน กลมกลื น กั บ ทุ ก ๆ หน้ า ขนาดตั ว อั ก ษร ภาษาไทยของหัวเรื่องเป็ น 24 point ตัวหนา ขนาดของเนื ้อหา 16 point ตัว ปกติ ส่ว นหัว เรื่ องที่ เป็ นภาษาอังกฤษใช้ รูป แบบ ตัวอักษรแบบลายมือ 5. ด้ านภาพประกอบ ใช้ เพื่ออธิบายเพิ่มเติมจากตัวอักษรตาม ความเหมาะสมของเนื ้อหา 6. ด้ านเสียงประกอบ ใช้ เสียงประกอบสอดคล้ อง สมจริ ง เข้ า กับเนื ้อหาและต้ องการให้ โฮมเพจมีเสียงดนตรีประกอบ

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 13

ณัฐพล ราไพ (2548)

ส่วนต่อประสาน ระบบนาทาง

ชื่อ ผู้วิจัย

การ ตัวแปร ออกแบบ ตาม

สรุ ปผลการวิจัย

รูปแบบ   1. การเชื่อมโยง ของ 1.1 การเชื่อมโยงที่ดี ไฮเพอร์ เท็กซ์ที่ใช้ ควรจะมีลักษณะที่ เว็บเพจ อยูใ่ นรูปแบบที่เป็ นมาตรฐานทัว่ ไป ที่มีตอ่ 1.2 คาที่ใช้ สาหรับการเชื่อมโยงจะต้ องเข้ าใจง่าย มีความ ผลสัมฤทธิ์ ชัดเจน และไม่สนจนเกิ ั้ นไป ทาง 1.3 แต่ละเว็บเพจควรมีจดุ เชื่อมโยงกลับมายังหน้ าแรกของ เว็บไซต์ที่กาลังใช้ งานอยูด่ ้ วย การเรียน 1.4 ควรกาหนดให้ ผ้ เู รี ยนได้ เข้ าสู่หน้ าจอแรกที่มีคาอธิบาย เบื ้องต้ น มีการแสดงโครงสร้ าง ภายในเว็บ ซึ่งอาจอยู่ในลักษณะ ของสารบัญหรื อรายการเพื่อผู้เรี ยนจะได้ ทราบถึงขอบเขตที่จะ สืบค้ น 2. ระบบนาทาง เน้ นการใช้ งานที่เข้ าถึงง่าย จะช่วยให้ ผ้ เู รี ยน รู้สกึ สบายใจต่อการเรี ยนและสามารถทาความเข้ าใจกับเนือ้ หา ได้ อย่า งเต็ มที่ ควรกาหนดปุ่ มการใช้ ง านที่ ชัด เจน เหมาะสม โดยเฉพาะปุ่ มควบคุม เส้ นทางการเข้ าสูเ่ นื ้อหา (Navigation) ไม่ ว่าจะเป็ นเดินหน้ า ถอยหลัง รวมทังอาจมี ้ การแนะนาว่าผู้เรี ยน ควรจะเรี ย นอย่า งไร ขัน้ ตอนใดก่อ นหรื อ หลัง ควรเพิ่ม ความ ยืดหยุ่นให้ ผ้ เู รี ยนสามารถกาหนดเส้ นทางการเรี ยนรู้ ได้ เอง เช่น การใช้ แผนผังของเว็บไซต์ (site map) ที่ช่วยให้ ผ้ เู รี ยนทราบว่า ตอนนี อ้ ยู่ ณ จุด ใด หรื อ เครื่ อ งมื อสื บ ค้ น ที่ ช่ว ยใน การค้ น หา หน้ าที่ต้องการ

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ตัวแปร ตาม

สรวงสุดา รูปแบบ    ปานสกุล การเรียนรู้ (2545) กระบวน การแก้ ปั ญหาเชิง สร้ างสรรค์ แบบร่วมมือ ในองค์กร บน อินเทอร์ เน็ต

สรุ ปผลการวิจัย ..0.

ชื่อ ผู้วิจัย

มัลติมีเดีย เนื ้อหา ระบบนาทาง

การออกแบบ

1. ด้ านมัลติมีเดีย 1.1 หลีกเลี่ยงการใช้ กราฟิ กที่ ไม่ ก่อให้ เกิ ด ประโยชน์ เพราะถึงแม้ จะดูสวยงาม แต่จะทาให้ ผ้ เู รียนเสียเวลาในการรับ ข้ อมูลที่ต้ องการ แต่หากต้ องมีการใช้ ภาพประกอบ ก็ควรใช้ เฉพาะที่มีความสัมพันธ์กบั เนื ้อหาเท่านัน้ 1.2 การใช้ รูป ภาพเพื่อเป็ นพืน้ หลัง ไม่ค วรเน้ น สีสัน ที่ ฉูดฉาด เพราะอาจจะไปลดความเด่นชัดของเนือ้ หาลง ควรใช้ ภาพที่มีสีออ่ น ๆ ไม่สว่างเกินไป รวมไปถึงการใช้ เทคนิคต่าง ๆ เช่น ภาพเคลื่อนไหว หรื อตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะ เกิดการรบกวนการอ่านได้ ควรใช้ เฉพาะที่จาเป็ นจริง ๆ เท่านัน้ 1.3 ตัวอักษรที่นามาแสดงบนจอภาพ ควรเลือกขนาดที่ อ่านง่าย ไม่มีสีสนั หรือลวดลายมากเกินไป 1.4 ควรออกแบบหน้ าเว็บเพจให้ เป็ นมาตรฐานเดียวกัน ตลอดทัง้ เว็บไซต์ เพราะความสม่าเสมอจะช่วยให้ ผ้ ูเรี ยนรู้สึก คุ้นเคยและสามารถคาดการณ์ลกั ษณะล่วงหน้ าของเว็บได้ จะ ช่ว ยให้ การใช้ งานบทเรี ยนเป็ นไปอย่า งสะดวก แต่มีข้ อควร ระวั ง คื อ ความสม่ า เสมอนี อ้ าจน ามาซึ่ ง ความน่ า เบื่ อ ได้ แนวทาง แก้ ไขคือ สร้ างความแตกต่างที่น่าสนใจในแต่ละหน้ า โดยใช้ องค์ ป ระกอบที่ ค ล้ ายคลึ ง กั น แต่ มี สี ห รื อ ลั ก ษณะ แตกต่า งกัน ไปเล็ กน้ อ ยเพื่ อท าให้ เ กิ ด ลักษณะพิเ ศษเฉพาะ หน้ านัน้ ๆ แต่ยงั คงความสม่าเสมอของเว็บไซต์ได้ 2. การออกแบบเนื ้อหา ควรสัน้ กระชับและทันสมัย หลีก เลี่ยง การใช้ เว็บเพจที่มีลกั ษณะการเลื่อนขึน้ ลง แต่ถ้าจาเป็ นควรจะ ให้ ข้อมูลที่มีความสาคัญอยูบ่ ริเวณด้ านบนสุดของหน้ าจอ 3. การออกแบบระบบนาทาง 3.1 ควรจัดโครงสร้ างหรื อจัดระเบียบของข้ อมูลที่ชดั เจน มาตรฐานเดียวกัน จะช่วยให้ น่าใช้ งานและง่ายต่อการใช้ งาน 3.2 ควรเพิ่มความยืดหยุ่นให้ ผ้ เู รี ยนโดยการให้ อิสระใน การเข้ าถึงเนือ้ หาผ่านระบบนาทางที่มีประสิทธิ ภาพจะทาให้ เข้ าใจเนือ้ หาได้ อย่างเต็มที่โดยไม่ต้องเสียเวลาอยู่กับการทา ความเข้ าใจการใช้ งาที่สบั สน

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 15

ตารางที่ 1.3 หนังสือ/บทความในประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา การออกแบบ

มัลติมีเดีย ส่วนต่อประสาน . เนื...้อหา ระบบนาทาง การเข้ าถึงข้ อมูล . ถึงข้ อมูล

ชื่อ ผู้เขียน/ ผู้แต่ ง

รายละเอียด

จิตเกษม      1. ด้ านมัลติมีเดีย พัฒนาศิริ 1.1 การใส่ภาพประกอบ จะต้ องเลือกรูปภาพที่ทาหน้ าที่ (2539) แทนค าบรรยายที่ ต้ องการ ควรใช้ รู ป ภาพที่ ส ามารถสื่ อ ความหมายกับผู้ใช้ ได้ ตรงตามวัตถุประสงค์ 1.2 รู ป ภาพที่ น ามาประกอบ ไม่ค วรมี ข นาดใหญ่ ห รื อ จานวนมากเกิ น ไป เพราะอาจท าให้ ส าระของเว็ บ เพจถู ก ลด ความสาคัญลง 1.3 การใช้ รู ป ภาพเพื่ อ เป็ นพื น้ หลัง ไม่ค วรเน้ นสี สัน ที่ ฉูดฉาด เพราะอาจไปลดความเด่นชัดของเนือ้ หา ควรใช้ ภาพที่มี สีออ่ น ๆ ไม่สว่างจนเกินไป 1.4 ตัว อักษร ควรเลือกขนาดที่ อ่า นง่า ย ไม่มีสีสัน และ ลวดลายมากเกินความจาเป็ น 2. การออกแบบส่วนต่อประสาน 2.1 เชื่ อ มโยงข้ อมูล ไปยัง เป้ าหมายได้ ต รงกั บ ความ ต้ อ งการมากที่ สุด ถ้ า ข้ อ มูล ที่ น ามาแสดงมี เ นื อ้ หาสาระมาก เกินไป เว็บเพจไม่สามารถนาข้ อมูลทัง้ หมดมาแสดงได้ ควรนา แหล่งข้ อมูลนันมาเขี ้ ยนเป็ นตัวเชื่อมโยง ผู้ใช้ จะได้ สามารถค้ นหา ข้ อมูลได้ อย่างถูกต้ องและกว้ างขวางยิ่งขึ ้น 2.2 การสร้ างตัวเชื่อมโยงจะสร้ างในรูปของตัวอักษรหรื อ รูปภาพก็ได้ แต่ควรที่จะแสดงจุดเชื่อมโยงให้ ผ้ ใู ช้ สามารถเข้ าใจ ได้ ง่าย ที่นิยมสร้ างกันส่วนใหญ่เมื่อมีเนือ้ หาตอนใดเอ่ยถึงชื่อที่ เป็ นรายละเอียดเกี่ยวเนื่องกันก็จะสร้ างจุดเชื่อมโยงทันที 2.3 ในแต่ละเว็บเพจควรมีจดุ เชื่อมโยงกลับไปยังหน้ าแรก ของเว็ บ ไซต์ ที่ ก าลังใช้ งานอยู่ ทัง้ นี เ้ ผื่ อว่า ผู้ใ ช้ ห ลงทางและไม่ ทราบว่าจะทาอย่างไรต่อไปก็จะสามารถกลับมาสูจ่ ดุ เริ่มต้ นใหม่ 3. การออกแบบเนื ้อหา 3.1 เนื ้อหากระชับ สันและทั ้ นสมัย 3.2 เนื อ้ หาควรเป็ นเรื่ องที่ส าคัญ หรื ออยู่ในความสนใจ ของผู้คนหรือเป็ นเรื่องที่ต้องการให้ ผ้ ใู ช้ ทราบ และควรปรับปรุงให้ ทันสมัยอยูเ่ สมอ www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ชื่อ ผู้เขียน/ ผู้แต่ ง

การออกแบบ

รายละเอียด

3.3 ควรเป็ นมาตรฐานเดี ย วกั น โดยอาจแบ่ ง เนื อ้ หา ออกเป็ นส่วน ๆ หรือจัดกลุม่ เป็ นหมวดหมู่ 4. การออกแบบระบบนาทาง 4.1 ควรมีรายการสารบัญ (Index) แสดงรายละเอียด ของเว็บเพจ การที่ผ้ ใู ช้ จะเข้ าไปค้ นหาข้ อมูลได้ ผู้สร้ างควรแสดง รายการทังหมดที ้ ่เว็บเพจนันมี ้ อยูใ่ ห้ ผ้ ใู ช้ ทราบ โดยอาจทาอยู่ใน รูปแบบของสารบัญหรื อตัวเชื่อมโยง (links) จะทาให้ สามารถ หาข้ อมูลได้ อย่างรวดเร็ว 4.2 เมื่อใดเนื ้อหาตอนใดเอ่ยถึงชื่อที่เป็ นรายละเอียดที่ เกี่ยวเนื่องกันให้ สร้ างตัวเชื่อมทันที 5. การเข้ าถึงข้ อมูล 5.1 ใช้ งานง่าย เนื่องจากอะไรก็ตามถ้ ามีความง่ายใน การใช้ งานแล้ วโอกาสที่ผ้ ชู มสนใจเว็บไซต์ยอ่ มสูงตามลาดับ 5.2 สามารถโต้ ตอบกับผู้ใช้ ได้ อย่างทันท่วงที 5.3 ควรก าหนดจุด ที่ ผ้ ูใ ช้ ส ามารถแสดงความคิ ด เห็ น หรือให้ คาแนะนากับผู้สร้ างได้ เช่น ใส่ e-mail ลงในเว็บเพจ ใน ตาแหน่งที่ เขียนควรอยู่บ นสุด หรื อล่างสุดของเว็ บเพจ ไม่ควร เขี ยนแทรกไว้ ที่ ตาแหน่ งใด ๆ ของจอภาพ เพราะผู้ใช้ อาจหา e-mail ไม่พบก็ได้

การออกแบบ มัลติมีเดีย ส่วนต่อประสาน ใ เนื ้อหา . การทดสอบ ความน่าเชื่อถือ

ชื่อ ผู้เขียน / ผู้แต่ ง

รายละเอียด

ปทีป     1.ด้ า นมัล ติ มีเดี ย การจัด ท าข้ อความและภาพจะต้ องมี เมธาคุณวุฒิ วัตถุประสงค์ มีการจัดเตรี ยมวางแบบและขนาดของตัวอักษร (2544) สี การกาหนดปุ่ มต่าง ๆ และการใช้ เนือ้ ที่และภาพที่ใช้ ต้องไม่ ใหญ่ เ กิ น ไปและต้ อ งไม่ ใ ช้ เ วลานานในการเชื่ อ มโยงมาสู่ บทเรียน

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 17

การออกแบบ มัลติมีเดีย ส่วนต่อประสาน ใ เนื ้อหา . การทดสอบ ความน่าเชื่อถือ

ชื่อ ผู้เขียน / ผู้แต่ ง

รายละเอียด 2. ควรมี ก ารจัด หน้ า จอภาพให้ เหมาะสม น่ า อ่ า นและใช้ การเชื่ อ มต่ อ ไปยั ง หน้ าถั ด ไปมากกว่ า ที่ จ ะใช้ การเลื่ อ น หน้ าจอภาพ และถ้ ามี ก ารเชื่ อ มโยงกั บ ภายนอกจะต้ องมี ข้ อความบอกไว้ วา่ มีการเชื่อมโยงกับสิ่งใด 3. หลี ก เลี่ ย งการท าเนื อ้ หาที่ ย าว ต้ อ งแบ่ ง สาระอย่ า ง เหมาะสมหรือมีการจัดทาเป็ นกลุม่ 4. การทดสอบการใช้ งาน ควรมีการประเมิน 4.1 การประเมินลักษณะเว็บไซต์ ควรจะทราบได้ ทันทีว่า เมื่อเปิ ดเข้ าไปแล้ วเกี่ยวข้ องกับเรื่ องใด ควรบอกลักษณะและ รายละเอียดของเว็บนัน้ 4.2 การประเมินภารกิจ (Authority) จะต้ องบอกขนาด ของเว็บและรายละเอียดโครงสร้ างของเว็บ เช่น แสดงที่อยู่และ เส้ นทางภายในเว็บและชื่อผู้ออกแบบเว็บ 4.3 ประเมิ น การจัด รู ป แบบและการออกแบบ ความ ซับซ้ อน เวลา รูปแบบที่เป็ นที่ต้องการของผู้ใช้ 4.4 ประเมินการเชื่อมโยง (Links) เป็ นสิ่งที่จาเป็ นและมี ผลต่อ การใช้ การเพิ่ มจ านวนเชื่ อ มโยงโดยไม่จ าเป็ นไม่ เ ป็ น ประโยชน์ต่อผู้ใช้ ควรใช้ เครื่ องมือสืบค้ นแทนการเชื่อมโยงที่ไม่ จาเป็ น 4.5 การประเมินเนือ้ หา (Content) เนือ้ หาที่เป็ นข้ อความ ภาพ หรือเสียง จะต้ องเหมาะสมกับเว็บ และให้ ความสาคัญกับ องค์ประกอบทุกส่วนเท่าเทียมกัน 4.6 การประเมินผลการเรี ยน สามารถประเมินผลระหว่าง เรียน การประเมินรวมหลังเรี ยน เพื่อดูผลที่มีต่อผู้เรี ยนและดูผล ที่คาดหวังไว้ ซึง่ จะนาไปปรับปรุงการสอนอย่างต่อเนื่อง 5. ความน่าเชื่อถือ ควรมีการจัดทาส่วนท้ ายของบทเรี ยนมี ชื่ อ ผู้ จั ด ท า และอี เ มล์ ที่ จ ะติ ด ต่ อ ได้ วั น ที่ จั ด ท า /แก้ ไข เปลี่ยนแปลง แนวการเลือกต่าง ๆ เพื่อให้ สามารถเห็นภาพรวม ทัง้ หมด และจานวนหน้ า ที่มีการจัดท าและต้ องไม่ยาวเกิน ไป หรือสันเกิ ้ นไป และมีการปรับปรุงเว็บเพจอยูเ่ สมอ www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ตารางที่ 1.4 หนังสือ/บทความต่างประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา

Khan (2005)

    

การทดสอบ

ส่วนต่อประสาน เนื ้อหา ระบบนาทาง การเข้ าถึงข้ อมูล

การออกแบบ

ชื่อ ผู้เขียน / ผู้แต่ ง

รายละเอียด 1. การออกแบบส่วนต่อประสาน 1.1 หน้ าจอเว็บไซต์แสดงผลปกติหรื อไม่เมื่อเปิ ดใช้ กับ โปรแกรมค้ น หาเว็บ (Internet Explorer, Netscape หรื อ โปรแกรมค้ นหาอื่น ๆ ) 1.2 องค์ ป ระกอบต่ อ ไปนี ท้ ี่ ช่ ว ยให้ เ นื อ้ หาบทเรี ย นมี ความสมบูรณ์ ( ระบุทุกองค์ ป ระกอบที่ ช่ว ยให้ เนื อ้ หาบทเรี ย น สมบูรณ์ ได้ แก่ ภาพและวัตถุ เสียง วีดิโอ ภาพเคลื่อนไหว) 1.3 ควรเว้ นช่องว่างอย่างเหมาะสมหรื อประมาณ 20% เพื่อช่วยให้ ผ้ อู า่ นผ่อนคลายสายตาในขณะอ่าน 1.4 หน้ าหลัก/โปรแกรมน่าสนใจและดึงดูดด้ วยภาพหรื อ เสียง (แต่ละคนอาจชอบสีและรูปแบบอักษรต่างกัน) 1.5 ข้ อความในเว็บไซต์อา่ นได้ งา่ ยและชัดเจน 1.6 สีพื ้นหลังและสีส่วนหน้ าที่ใช้ ในการนาเสนอเว็บไซต์ กลมกลืนกัน 1.7 เว็ บ ไซต์ มี รู ป แบบการน าเสนอเหมื อ นเอกสาร ประกอบบทเรี ยน จะท าให้ ผ้ ูเรี ยนสามารถเชื่ อมโยงระหว่า ง บทเรียนออนไลน์และเอกสารประกอบบทเรียน 1.8 องค์ประกอบในการนาเสนอ เช่น ชื่อเรื่ อง เนือ้ หา การเชื่อมโยงและอื่น ๆ ใช้ รูปแบบเดียวกัน 1.9 ใช้ รูปแบบอักษรมาตรฐานทัว่ ไป โดยแบบอักษรจะ ไม่เปลี่ยนแปลงเมื่ อแสดงผลบนจอคอมพิวเตอร์ หรื อโปรแกรม ค้ นหาเว็บอื่น ๆ (เช่น Arial สาหรับภาษาอังกฤษ) 1.10 มีโครงสร้ างการใช้ สี ตาแหน่งการวางชื่อเรื่ องและ เนื ้อหารูปแบบเดียวกัน 1.11 ภาพและวัตถุช่วยให้ ผ้ ูเรี ยนบรรลุวตั ถุประสงค์ของ บทเรียน

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 19

การทดสอบ

การออกแบบ ส่วนต่อประสาน เนื ้อหา ระบบนาทาง การเข้ าถึงข้ อมูล

ชื่อ ผู้เขียน / ผู้แต่ ง

รายละเอียด 1.12 ความเร็วในการแสดงข้ อมูลและแสดงผลบนหน้ าจอ (ภาพหรื อ วั ต ถุ ข นาดใหญ่ ใ ช้ เวลานานในการดาวน์ โ หลด และแสดงผลบนหน้ าจอ นอกจากนี ใ้ นการถ่ า ยข้ อมูล และ แสดงผลแตกต่ า งกั น ไปตามความเร็ ว ของอิ น เทอร์ เ น็ ต ของ ผู้ใช้ งาน) 1.13 มีการอ้ างอิงผู้ออกแบบและพัฒนาบทเรียน 1.14 มีการเชื่อมโยงเว็บไซต์ไปยังเว็บไซต์ของหน่วยงาน อื่น ๆ 1.15 เว็บไซต์มีการเชื่อมโยงไปยังหน้ าประวัติของผู้สอน 1.16 ภาพและวัตถุที่ มีสีสัน ต่า ง ๆ มีค วามชัด เจนเมื่อ พิมพ์แบบขาวดา 1.17 แต่ล ะหน้ า สามารถพิมพ์ ออกมาได้ ข นาดพอดี ใ น หนึ่งหน้ าเอกสาร 2. การออกแบบเนื ้อหา 2.1 บทเรี ยนใช้ กลวิธีเพื่อกระตุ้นความสนใจของผู้เรี ยน ได้ แก่ ภาพเคลื่อนไหว (ภาพเหตุการณ์ สนั ้ ๆ) วัตถุเคลื่อนไหว (เช่น วัตถุสกุล .gif) ภาพประกอบ ความแตกต่างระหว่างวัตถุ และส่วนประกอบอื่น ๆ ใช้ สี เสียงและสัญลักษณ์ที่เกี่ยวข้ องกับ เนื ้อหา 2.2 ในบทเรี ยนมีการใช้ กลวิธีเพื่อพัฒนาความคงทนใน การเรี ย น ได้ แ ก่ หน้ า จอการน าเสนอจัด เป็ นล าดับ เนื อ้ หา จัดเป็ นระบบ เกี่ยวข้ องกันอย่างมีความหมาย มีบทเกริ่ นนาเข้ า สู่เนือ้ หา ใช้ รูปแบบโครงสร้ างการนาเสนอเดียวกันของแต่ละ หน้ า การน าเสนอ เช่น การวางชื่ อ เรื่ อง ภาพ บทความและ ส่ว นประกอบอื่น ๆ มีเครื่ องมือที่ แ บ่งเนื อ้ หาออกเป็ นส่ว น ๆ อย่างเหมาะสม มีคานาและบทสรุป 2.3 บทเรียนนาเสนอใจความสาคัญเพียงประเด็นเดียวใน หนึ่งย่อหน้ า

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

การออกแบบ การทดสอบ

ชื่อ ผู้เขียน / ผู้แต่ ง

ส่วนต่อประสาน เนื ้อหา ระบบนาทาง การเข้ าถึงข้ อมูล

รายละเอียด 2.4 บทความแบ่ง ออกเป็ นช่ว ง ๆ และสามารถอ่า นแบบ กวาดสายตาเพื่อความเข้ า ใจ (หัว ข้ อหลักและหัว ข้ อย่อยใน บทเรียนควรสัน้ กะทัดรัดและสอดคล้ องกันอย่างมีความหมาย เพื่อให้ ผ้ อู า่ นอ่านกวาดสายตาหาใจความสาคัญได้ ) 2.5 บทเรี ยนใช้ องค์ประอบของสื่อประสม ได้ แก่ ข้ อความ ภาพและวัตถุ ภาพ เคลื่อนไหว เสียง วีดีโอ และการผสมผสาน ของสื่ อ ประสมเอื อ้ ให้ เกิ ด การเรี ยนรู้ บทเรี ยนได้ อย่ า งมี ประสิทธิภาพ 2.6 สื่อประสมที่ใช้ ในบทเรี ยนมีประสิทธิภาพในการสร้ าง การเรียนรู้อย่างมีความหมายมากน้ อยเพียงใด 2.7 บทเรี ยนมีการนาเสนอองค์ป ระกอบทางภาษาอย่า ง ถูกต้ อง (ไวยกรณ์ เครื่องหมายวรรคตอน การสะกดคา) 2.8 บทเรี ยนมีการนาเสนอองค์ ป ระกอบสื่อประสมอย่า ง เหมาะสมและสอดคล้ องกั น (ข้ อความ ภาพและวั ต ถุ ภาพเคลื่อนไหว เสียง วีดีโอ) 2.9 บทเรียนสามารถพิมพ์สาหรับผู้เรียนและผู้สอนได้ สะดวก 3. การออกแบบระบบนาทาง 3.1 บทเรี ย นมี โ ครงสร้ างเนื อ้ หา เช่น หน่ ว ยการเรี ย นรู้ สาระความรู้ กิจกรรมการเรียนรู้และอื่น ๆ เพื่อนาทางให้ ผ้ เู รี ยน ศึกษาบทเรียน 3.2 บทเรี ยนมีแผนผังเว็บไซต์ เช่น ภาพรวมของบทเรี ยน เพื่อนาทางให้ ผ้ เู รียนศึกษาบทเรียน 3.3 บทเรี ยนควรถามให้ ผ้ ูเรี ยนถ่ายโอนข้ อมูลขนาดใหญ่ เช่น เสียง วีดีโอ และภาพขนาดใหญ่ลงในหน่วยความจาหลัก ก่อน เพื่อหลีกเลี่ยงปั ญหาติดขัดขณะเรียน 3.4 การเชื่ อ มโยงมี สัญ ลั ก ษณ์ แ ละบอกจุ ด หมายใน การเชื่ อ มโยงแก่ ผ้ ูเ รี ย นเพื่ อ ให้ ผ้ ู เรี ย นตัด สิ น ใจในการเลื อ ก การเชื่อมโยง 3.5 บทเรี ยนที่มีการเชื่อมโยงภายในเว็บไซต์มากเกินไป อาจทาให้ ผ้ เู รียนสับสน

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 21

การทดสอบ

การออกแบบ ส่วนต่อประสาน เนื ้อหา ระบบนาทาง การเข้ าถึงข้ อมูล

ชื่อ ผู้เขียน / ผู้แต่ ง

รายละเอียด 3.6 บทเรียนที่มีการเชื่อมโยงภายนอกมากเกินไปอาจทา ให้ ผ้ เู รียนสับสน 3.7 เลื อกใช้ สัญ ลัก ษณ์ ที่ ผ้ ูเ รี ย นคุ้น เคย มี ค วามชัด เจน สอดคล้ องกับเนื ้อหาที่ต้องการเชื่อมโยง 3.8 มีการใช้ สีรูป แบบเดี ยวกัน เพื่อแสดงการเชื่อมโยงที่ ผู้เรี ย นได้ เ ข้ า ถึ งและยังไม่ได้ เ ข้ า ถึง สีม าตรฐานในการแสดง การเชื่อมโยง สีฟ้าสาหรับการเชื่อมโยงที่ผ้ เู รี ยนยังไม่ได้ เข้ าถึง และสีแดงหรือสีมว่ งสาหรับการเชื่อมโยงที่ผ้ เู รียนได้ เข้ าถึงแล้ ว 3.9 บทเรี ย นมี ค วามยื ด หยุ่น ในการเรี ย นผ่ า นค าสั่ง ใน บทเรียน โดยผู้เรียนมีทางเลือกต่าง ๆ ในการศึกษาบทเรียน 3.10 บทเรี ยนมีการแนะนาแนวทางการเรี ยน (ผู้เรี ยนมักจะ ดาเนิ นการศึกษาบทเรี ยนตามการเชื่อมโยงที่ปรากฏในบทเรี ยน ดั ง นั น้ ควรมี ก ารวางแผนการเชื่ อ มโยงหลายมิ ติ อ ย่ า งมี ประสิทธิ ภาพเพื่อเป็ นแนวทางแนะนาการศึกษาบทเรียนแก่ผ้ เู รียน 3.11 ควรมีการนาทางเข้ าสู่บทเรี ยนที่ง่าย ผู้เรี ยนสามารถ เชื่อมโยงหน้ าต่าง ๆ ได้ สะดวก ไม่สบั สนหรือหลงทาง 3.12 ควรหลีกเลี่ยงการเชื่อมโยงบทเรี ยนไปยังเว็บไซต์ที่ ไม่สมบูรณ์ 3.13 ควรมีช่องทางการค้ น หาข้ อมูล ทัง้ ภายในเว็ บ ไซต์ และภายนอกเว็บไซต์ 3.14 ควรใช้ รูปแบบสัญลักษณ์และคาเดียวกันเพื่อช่วยนา ทางในบทเรียน 3.15 ทุกหน้ าควรมีการเชื่อมโยงกลับมายังหน้ าหลัก 3.16 การเชื่อมโยงภายในบทเรี ยนควรมีการเชื่อมโยงไป ยังหน้ าต่าง ๆ ที่ถกู ต้ อง 3.17 การเชื่ อมโยงภายนอกบทเรี ยนควรมี การเชื่ อมโยงที่ ถูกต้ อง 3.18 ไม่ควรมีการเชื่อมโยงหลายมิติในบทเรียนมากเกินไป 3.19 คุณภาพระบบเสียงและวีดี โอโดยตรงจากเว็ บไซต์ ควรมีประสิทธิภาพ www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

การออกแบบ การทดสอบ

ชื่อ ผู้เขียน / ผู้แต่ ง

ส่วนต่อประสาน เนื ้อหา ระบบนาทาง การเข้ าถึงข้ อมูล

รายละเอียด 4. การทดสอบการใช้ งาน 4.1 ทดลองใช้ กบั กลุม่ ผู้เรียนกลุม่ ตัวอย่าง 4.2 ผู้เรียนตอบคาถามต่าง ๆ ในบทเรียนได้ ภายในเวลาที่ กาหนด 4.3 ผู้เรี ยนรู้ ว่า ก าลัง อยู่ต าแหน่ งใดในบทเรี ยนและน า ทางการเรียนได้ โดยไม่ต้องคาดเดา 4.4 การใช้ ค าศั พ ท์ เ ฉพาะในบทเรี ยนส ามารถท า ความเข้ าใจได้ งา่ ย 4.5 ผู้เรียนเห็นตัวอย่างบทเรียนที่จะศึกษา 4.6 เว็บไซต์ออกแบบมาเพื่ออานวยความสะดวกให้ ผ้ เู รี ยน เข้ าถึ ง เนื อ้ หาเฉพาะที่ ต้ องการได้ อย่ า งสะดวก ภายใน การเชื่อมโยงไม่เกิน 3 ครัง้ 5. การเข้ าถึงข้ อมูล 5.1 เว็ บ ไซต์ อ อกแบบมาให้ ผ้ ู เรี ยนจ านวนมากเข้ าถึ ง บทเรียนได้ มากน้ อยเพียงใด 5.2 บทเรี ยนควรมีข้ อความสารองอธิ บ ายภาพและวัต ถุ (ข้ อความส ารองอาจไม่ ใ ช่ ข้ อความตั ว อั ก ษร สามารถใช้ โปรแกรมถ่ายทอดข้ อมูลได้ ด้วยเสียง ซึ่งเป็ นสิ่งจาเป็ นสาหรับ ผู้บกพร่องทางการมองเห็น) 5.3 บทเรี ย นควรมี ข้ อความบรรยายประกอบการฟั ง (ผู้ บกพร่ อ งทางการได้ ยิ น สามารถอ่ า นข้ อความบรรยาย ประกอบการฟั งได้ ) 5.4 หน้ าจอสามารถปรับขนาดให้ เหมาะกับผู้บกพร่ องทาง สายตา 5.5 สามารถมองเห็ น ความแ ตกต่ า งของสี ที่ ใ ช้ ใ น การนาเสนอบทเรี ยนอย่า งชัด เจนเพื่ออานวยความสะดวกแก่ ผู้บกพร่องทางสายตา 5.6 ผู้เรียนสามารถใช้ แป้นพิมพ์อกั ษรแทนการใช้ เม้ าส์หรื อ อุปกรณ์เคลื่อนตาแหน่งในการนาทางศึกษาบทเรียน

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 23

2) การติดต่ อสื่อสาร (Communication) เครื่ อ งมื อ ในการติดต่อ สื่ อ สารเป็ นเครื่ อ งมื อ ที่ช่ว ยให้ ผ้ ูเ รี ยนได้ ติดต่อ สอบถาม ปรึ กษาหารื อ และแลกเปลี่ยนความคิดเห็นระหว่างผู้เรี ยนและผู้สอน และระหว่างผู้เรี ยนกับ เพื่อนร่ วมชันเรี ้ ยนคนอื่น ๆ โดยเครื่ องมือที่ใช้ ในการติดต่อสื่อสารอาจแยกได้ เป็ น 2 ประเภท คือ แบบประสานเวลา (Synchronous) และแบบไม่ประสานเวลา (Asynchronous) เครื่ องมือ พื ้นฐานที่ใช้ ในการติดต่อสื่อสารออนไลน์ที่เป็ นที่ นิยมกันอย่างแพร่ หลายตังแต่ ้ อดีตและยังคง ได้ รับความนิยมอย่างแพร่ หลายในปั จจุบนั ได้ แก่ แช็ท ไปรษณี ย์อิเล็กทรอนิกส์ กระดาน อภิปรายและกระดานประกาศ ภายหลังได้ รับอิทธิพลด้ วยเครื่ องมือติดต่อสื่อสารต่าง ๆ ของ WWW2.0 เทคโนโลยี เช่น บล็อก วิกิ ทาให้ การติดต่อสื่อสารมีความเป็ นพลวัฒน์ (dynamic) มากยิ่งขึ ้น รายละเอียดต่าง ๆ ดังนี ้ (จินตวีร์ คล้ ายสังข์ และประกอบ กรณีกิจ, 2552) แช็ท (Chat) เป็ นการสื่ อ สารแบบประสานเวลา ซึ่งเหมาะกับการแลกเปลี่ ยน สารสนเทศในกลุ่มเดียวกัน และสามารถทบทวนไฟล์การสนทนาของกลุ่มได้ ไปรษณีย์อิเล็กทรอนิกส์ (e-mail) เป็ นการสื่อสารแบบไม่ประสานเวลา ซึง่ เป็ น เครื่ อ งมื อ ที่ช่วยให้ ผ้ ูเรี ยนสามารถติดต่อ สื่ อ สารกับผู้สอนหรื อ เพื่ อ นร่ วมชัน้ เรี ยนได้ โดยส่ง ข้ อ ความในรู ปจดหมาย พร้ อมทัง้ แนบไฟล์ ไ ปยังพื น้ ที่ส่วนตัวของผู้รั บ จึงสามารถนาไป ประยุกต์ใช้ ได้ กบั การปรึกษารายบุคคล การส่งงานและการให้ ข้อมูลป้อนกลับแก่ผ้ เู รี ยน กระดานอภิปรายและกระดานประกาศ (Discussion Board and Bulletin Board) เป็ นการสื่อสารแบบไม่ประสานเวลา ซึง่ สนับสนุนให้ ผ้ สู อนและผู้เรี ยนประกาศข้ อความ ไฟล์ และสารสนเทศ ในพื ้นที่ที่ผ้ สู อนเตรี ยมไว้ ให้ และผู้สอนและผู้เรี ยนสามารถโต้ ตอบหรื อดาวน์ โหลดไฟล์เหล่านันได้ ้ ซึง่ ผู้เรี ยนสามารถติดตามการสนทนาโต้ ตอบในประเด็นที่ต้องการได้ บล็อก (Blog) เป็ นการสื่อสารแบบไม่ประสานเวลา ซึง่ สนับสนุนให้ ผ้ ูเรี ยนเขียน บันทึกการเรี ยนรู้ ประจาวัน และเปิ ดโอกาสให้ ผ้ สู อนและเพื่อนร่ วมชันเรี ้ ยนสามารถให้ ข้อมูล ป้อนกลับ เสนอข้ อคิดเห็นหรื อคาแนะนาแนบไปกับบันทึกนันได้ ้ วิกิ (Wiki) เป็ นการสื่อสารแบบไม่ประสานเวลา โดยสนับสนุนให้ ผ้ เู รี ยนและกลุ่ม สามารถสร้ างและแก้ ไขเอกสารร่ วมกัน ซึ่งสนับสนุนการเรี ยนแบบร่ วมมือ ทัง้ นีก้ ลุ่มผู้เรี ยน สามารถบัน ทึก และร่ ว มกันท างานในพื น้ ที่ส่ ว นกลางร่ วมกัน โดยผู้ส อนอาจใช้ เ ครื่ อ งมื อ การติดต่อสื่อสารอื่นร่ วมด้ วย เพื่อให้ สมาชิกในกลุ่มได้ ร่วมอภิปรายและตกผลึกความคิดได้ ดังตัวอย่างหนังสือ/บทความในตารางที่ 1.5 และ 1.6

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ตารางที่ 1.5 หนังสือ/บทความในประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา

เว็บ 2.0

การ ชื่อ ออกแบบ ผู้เขียน / ผู้แต่ ง

รายละเอียด

สมคิด อเนกทวีผล (2550)



1. Google Adsense ระบบโฆษณาเป็ นลิงค์ตามแต่คาที่ผ้ ใู ช้ ค้นหา 2. flickr.com เว็ บ อัล บัม้ เก็ บ และแชร์ รู ป ออนไลน์ ที่ มี การโยงใยเป็ น ชุมชน ส่งต่อรู ปกันง่าย BitTorrent ระบบที่ผ้ ใู ช้ ต่างก็ดาวน์โหลดไฟล์จากกัน และกันเอง 3. wikipedia.com เว็บสารานุกรมที่ผ้ ใู ช้ บญ ั ญัติคากันเอง ให้ ความหมาย กันเอง และแก้ ไขคาของคนอื่นได้ ตลอดเวลา 4. Blog เขียนง่าย ใส่รูป เสียง คลิปได้ งา่ ย ๆ เหมือนส่งเมล์ เผยแพร่ส่งต่ อ ได้ กว้ างขวาง 5. SEO (Search Engine Optimization) ลงทุนกับเทคนิคทาให้ ลิงค์เว็บ บริษัทตัวเองได้ อยูห่ น้ าแรกบน ๆ ใน Google, เสิร์ชอื่น ๆ

สุนิตย์ เชรษฐา และ ชิตพงษ์ กิตตินราดร (ม.ป.ป.)



1. Wikipedia เป็ นสารานุกรม Online ขนาดใหญ่ ที่ สุด ไม่ว่า ใครก็ ได้ สามารถสร้ าง แก้ ไข และปรับปรุงเนื ้อหาอย่างแทบไม่มีขีดจากัด 2. flickr.com ซึ่งเป็ นเว็บไซต์ที่เปิ ดให้ ผ้ ใู ช้ ส ามารถส่งรู ปภาพอะไรก็ได้ ขึน้ ระบบ 3. Blog คือเว็บไซต์สว่ นตัวสาเร็จรูป ที่ผ้ ใู ช้ เพียงสมัครสมาชิกกับผู้ให้ บริ การ และเขียนข้ อความที่ต้องการลงไป พร้ อมให้ ใครก็ได้ เข้ ามาอ่านทันที 4. Feed คือระบบที่สง่ ข้ อมูลขึ ้นหน้ าจอคอมพิวเตอร์ อย่างอัตโนมัติทกุ ครัง้ ที่ มีการเพิ่มเติมหรือเปลี่ยนแปลงข้ อมูล 5. digg สามารถให้ คะแนนเนื ้อหาที่ผ้ ใู ช้ คนอื่นส่งขึ ้นระบบได้ อย่างอิสระ

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 25

ตารางที่ 1.6 หนังสือ/บทความต่างประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา รายละเอียด

เว็บ 2.0

ชื่อ การ ผู้เขียน ออกแบบ / ผู้แต่ ง Tim and John (2009)



Google AdSense, Flickr, BitTorrent, Napster, blogging, upcoming.org and EVDB, search engine optimization, cost per click, web services, participation, wikis, tagging ("folksonomy"), syndication

Paul (2006)



Flickr, YouTube, MySpace, Wikipedia, and the entire blogosphere, share digital

3) การประเมินผลการเรี ยน (Assessment and Evaluation) ในการเรี ย นแบบผสมผสานบางรายวิชาจ าเป็ นต้ อ งวัด ระดับ ความรู้ ก่ อ นเรี ย น (Pre-test) เพื่อให้ ผ้ เู รี ยนได้ เลือกเรี ยนในบทเรี ยนหรื อหลักสูตรที่เหมาะสมมากที่สุด ซึง่ จะทา ให้ การเรี ยนเกิดประสิทธิภาพสูงสุด เมื่อเข้ าสู่บทเรี ยนในแต่ละหลักสูตรก็จะมีการสอบย่อย ท้ ายบท (Quiz) และการสอบใหญ่ก่อนที่จะจบหลักสูตร (Final Examination) ระบบจัด การการเรี ยนรู้ จะเรี ยกข้ อสอบที่จะใช้ มาจากระบบบริ หารคลังข้ อสอบซึง่ เป็ นส่วนย่อยที่รวมอยู่ ในระบบจัดการการเรี ยนรู้ (ปราวีณยา สุวรรณณัฐโชติ และ จินตวีร์ มัน่ สกุล, 2550; ศรี ศกั ดิ์ จามรมาน อุทมุ พร จามรมาน และ จินตวีร์ มัน่ สกุล, 2549) โดยมีข้อสอบหลายรู ปแบบให้ ผู้สอนเลือกใช้ ทังนี ้ ้โดยส่วนใหญ่แล้ วระบบจัดการการเรี ยนรู้ จะสามารถสร้ างข้ อสอบได้ อย่าง น้ อย 4 รู ปแบบ ได้ แก่ แบบเลือกตอบ แบบถูกผิด แบบเติมคาตอบ และแบบจับคู่ นอกจากนี ย้ ัง มี อ งค์ ป ระกอบอื่ น ๆ ที่ ผ้ ูส อนควรน ามาพิ จ ารณาผลการเรี ย นรู้ ของผู้เรี ยนประกอบการประเมินด้ วยดังนี ้ 1) จานวนครัง้ การเข้ าเรี ยนในห้ องเรี ยน หรื อใน บทเรี ยนออนไลน์ หรื อการเข้ าร่ วมกิจกรรมบนออนไลน์ 2) เวลาที่เข้ าใช้ ในแต่ละบทเรี ยน 3) ความถี่ในการแสดงความคิดเห็นหรื อการอภิปราย เช่น ความถี่ในการอภิปรายในห้ องเรี ยน หรื อในกระดานอภิปราย เป็ นต้ น 4) คุณภาพของการแสดงความคิดเห็นหรื อการอภิปราย 5) การบ้ านและงานที่ได้ รับมอบหมาย ซึ่งรวมถึงโครงงานต่าง ๆ ด้ วย 6) คุณภาพของ การเขียนบันทึกการเรี ยนรู้ ประจาวัน และ 7) แฟ้มสะสมงานอิเล็กทรอนิกส์ www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

สิ่งสาคัญสาหรับการจัดการเรี ยนรู้ และการประเมินผลก็คือ การให้ ข้อมูลป้อนกลับ แก่ผ้ ูเรี ยน ซึ่งจากงานวิจัยของ ประกอบ กรณี กิจ (2552) ที่พบว่า มีปฏิสัมพันธ์ ระหว่าง ระดับ ความสามารถทางการเรี ย นรู้ และแบบการให้ ข้ อมูล ป้ อนกลับ ในแฟ้ มสะสมงาน อิเล็กทรอนิกส์ที่มีตอ่ ผลสัมฤทธิ์ทางการเรี ยนของผู้เรี ยนในวิชาการผลิตสื่ออิเล็กทรอนิกส์เพื่อ การศึกษาอย่างมีนยั สาคัญทางสถิตทิ ี่ระดับ .05 ทังนี ้ ้เนื่องจากผู้เรี ยนต้ องการข้ อมูลป้อนกลับ ที่เฉพาะเจาะจงกับตนเอง มีการบอกจุดเด่นและจุดด้ อย หรื อระบุข้อผิดพลาด ซึ่งข้ อมูล ลักษณะนี ้จะมีประโยชน์กบั ผู้เรี ยนมากกว่าการให้ ข้อมู ลป้อนกลับแบบคลุมเครื อ ดังตัวอย่าง หนังสือ/บทความในตารางที่ 1.7 ตารางที่ 1.7 หนังสือ/บทความต่างประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา

การทดสอบ

การ ออกแบบ ชื่อ ผู้เขียน / ผู้แต่ ง Larisa (2004)



รายละเอียด

การทดสอบการใช้ งานจะช่วยปรับปรุงระบบให้ ดีก่อนนาไปใช้ จริง 1) ผู้ใช้ มีปฏิสมั พันธ์และสนุกกับการใช้ งานเว็บไซต์หรือไม่ 2) ผู้ใช้ เข้ าใจวัตถุประสงค์ของเว็บไซต์หรือไม่ 3) ผู้ใช้ จะกลับมาใช้ เว็บไซต์อีกหรือไม่ 4) การทดสอบ search, site map, forms, and custom error pages function.

4. ขัน้ ตอนการออกแบบและพัฒนาเว็บไซต์ ทางการศึกษา จากองค์ประกอบที่สาคัญทัง้ 3 สามารถนามาจัดลาดับขันตอนการออกแบบและ ้ พัฒนาเว็บไซต์ทางการศึกษา (ADDIE MODEL) ซึง่ มีส่วนประกอบที่สาคัญอยู่ 2 ส่วน คือ จากฝ่ ายผู้ผลิต /ผู้ดูแ ลเว็บไซต์ (Webmaster) และจากฝ่ ายผู้สอนและ/หรื อ นักออกแบบ การเรี ยนการสอน ดังนี ้

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 27

แผนภาพที่ 1.2 ขันตอนการออกแบบและพั ้ ฒนาเว็บไซต์ทางการศึกษา จะขอแสดงถึงกระบวนการในการพัฒนาเว็บไซต์สาหรับการเรี ยนการสอนอีเลิร์นนิง ตามแนวทางของ ADDIE Instructional Design Model ซึง่ ประกอบด้ วยขันตอนดั ้ งนี ้ 1) การวิเคราะห์ (Analysis) ฝ่ ายผู้ผลิต/ผู้ดแู ลเว็บไซต์ (Webmaster): การวิเคราะห์วตั ถุประสงค์ของเว็บไซต์ กลุ่มผู้ชม/เป้าหมาย เนื ้อหา และศึกษาแหล่งข้ อมูลต่าง ๆ ฝ่ ายผู้สอนและ/หรื อนักออกแบบ การเรี ยนการสอน: การวิเคราะห์ (Analysis) คือการวิเคราะห์วตั ถุประสงค์ของบทเรี ยน ผู้เรี ยน พื ้นฐานของผู้เรี ยน เนื ้อหา แหล่งความรู้ และสื่อที่เหมาะสม 2) การออกแบบ (Design) ฝ่ ายผู้ผลิต/ผู้ดแู ลเว็บไซต์ (Webmaster): การออกแบบ (Design) คือการกาหนด โครงสร้ างเว็บไซต์ (Site Structure) รายละเอี ยดหน้ า เว็บเพจทัง้ นี เ้ พื่ อ ให้ สอดคล้ อ งกับ วัตถุประสงค์ของเว็บไซต์ กลุ่มผู้ชม/เป้าหมาย และเนือ้ หา โดยพิจารณาถึง การจัดระบบ ข้ อมูลสารสนเทศ (Chunking information) เพื่อเอือ้ แก่ผ้ ูเข้ าชมเว็บไซต์แ ละ/หรื อ ผู้เรี ยน เว็บไซต์ส่วนใหญ่จะมีการจัดลาดับเนื ้อหาโดยเรี ยงลาดับตามความสาคัญมากไปน้ อย หรื อ หลักการโดยภาพรวมลงไปสู่ร ายละเอี ยดปลีกย่อ ย (hierarchy of importance) ในอี ก ลักษณะหนึ่งคือ รู ปแบบการจัดลาดับตามความสัมพันธ์ (Relations) โดยนาเสนอข้ อ มูล สารสนเทศจากการคาดเดาใจผู้ เข้ า ชมว่ า อะไรคื อ สิ่ ง ที่ ผ้ ูช มคาดหวัง ว่า จะเจอก่ อ นหลัง www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

อาจเริ่ มจากข้ อมูลที่ผ้ ูเข้ าชม/ผู้เรี ย นมีความคุ้นเคยมากไปน้ อย เพื่ อให้ ผ้ ูชมสามารถเข้ าถึง ข้ อมูลที่ต้องการได้

แผนภาพที่ 1.3 แสดงตัวอย่างเว็บไซต์ที่นาเสนอข้ อมูลด้ วยปุ่ มเมนูที่มากเกินไป อาจทาให้ ผ้ เู ข้ าชมสับสนได้ เนื่องจากปุ่ มและข้ อมูลภายใต้ ลิงค์ นันไม่ ้ มีความสัมพันธ์กนั (ที่มา: http://www.webstyleguide.com)

แผนภาพที่ 1.4 แสดงตัวอย่างเว็บไซต์ที่นาเสนอข้ อมูลด้ วยปุ่ มเมนูที่น้อยเกินไป อาจทาให้ ผ้ เู ข้ าชมสับสนและทาให้ ยากต่อการเข้ าถึงข้ อมูล (ที่มา: http://www.webstyleguide.com) ฝ่ ายผู้สอนและ/หรื อนักออกแบบการเรี ยนการสอน: การออกแบบ (Design) คือ การกาหนดโครงสร้ าง แผน ขันตอนการด ้ าเนินงาน และการประเมินบทเรี ยนอย่างเป็ นระบบ เช่น การออกแบบเนื ้อหาและกิจกรรมแบบประสานเวลา (Synchronous) แบบไม่ประสาน เวลา (Asynchronous) หรื อแบบผสมผสาน (Blended หรื อ Hybrid) เพื่อให้ สอดคล้ องกับ วัตถุประสงค์ของบทเรี ยน พื ้นฐานของผู้เรี ยนและเนื ้อหา

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 29

จะเห็นได้ ว่า ขันตอนในการออกแบบเว็ ้ บไซต์นนั ้ มีความสาคัญมากและอาจถือได้ ว่ า เป็ นขัน้ ตอนที่ ส าคัญ ที่ สุ ด ในการวางแผนการสร้ างเว็ บ ไซต์ เว็ บ ไซต์ ที่ ดี นัน้ จะต้ อ งมี วัตถุประสงค์ที่ชดั เจน ข้ อมูลมีการจัดวางอย่างเป็ นระเบียบ มีการจัดวางเนื ้อหาที่ชดั เจน ง่าย ต่อการสืบค้ น และในแต่ละส่วนมีความสัมพันธ์กนั ทังนี ้ ้ผู้ออกแบบเว็บไซต์ควรจัดสร้ าง SITE STRUCTURE เพื่ อ ตอบสนองความต้ องการข้ างต้ น ซึ่ ง รายละเอี ย ดเกี่ ย วกั บ SITE STRUCTURE จะอธิ บายในส่วนต่อ ไป ดังตัวอย่างผลงานวิจัยต่างประเทศแสดงในตาราง ที่ 1.8 และหนังสือ/บทความตารางที่ 1.9-1.10 ตารางที่ 1.8 งานวิจยั ต่างประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา การ ตัวแปร ออกแบบ ตาม

Bi การ (2000) ออกแบบ การสอน ในรูปของ เว็บไซต์เพื่อ การศึกษา

การออกแบบ

ชื่อ ผู้วิจัย



สรุ ปผลการวิจัย

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

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ชื่อ ผู้วิจัย

การ ตัวแปร ออกแบบ ตาม

Paolo แนวทาง et al ใน (2003) การเปลี่ยน แปลงเว็บ เพจที่มี เนื ้อหาที่ คงที่และ รวมอยูใ่ นที่ เดียวกัน

การออกแบบ



สรุ ปผลการวิจัย

เสนอแนวทางในการเปลี่ยนแปลงเว็ บ เพจที่ มีเนื อ้ หาที่ ค งที่ แ ละ รวมอยู่ในที่ เดียวกัน ซึ่งเดิ มหากต้ องการที่ จัดทาหน้ า เว็บเพจที่ มี ความคล้ ายคลึงกัน ทาการคัดลอกหน้ าเพจซ ้า ๆ กัน เมื่อต้ องการ ปรับปรุงเนือ้ หาและโครงสร้ างของเว็บเพจ ก็จะต้ องตามไปแก้ ไขใน ทุก ๆ หน้ าที่มีผล กระทบซึง่ ทาให้ เกิดความยุง่ ยาก ดังนันการเปลี ้ ่ยน ให้ เป็ นเว็บเพจที่มีความยืดหยุ่นในการแก้ ไข โดยจะมีนาเอาเทคนิค ของการทาคลัสเตอร์ (Cluster) จะสามารถดึงดูดความสนใจของ ผู้ ชมได้ กล่ า วคื อ เป็ นการแยกโครงสร้ างเว็ บ เพจที่ มี ลั ก ษณะ คล้ า ยคลึงกัน ออกมาเป็ นกลุ่ม ๆ เพื่ อ ใช้ เ ป็ นโครงสร้ างหลัก หรื อ เทมเพลทที่ จะใช้ ร่ว มกัน และใช้ เป็ นตัว กาหนดรู ป แบบของส่ว นที่ แสดงเป็ นเว็บเพจ ส่วนค่าตัวแปรต่าง ๆ และค่าของข้ อมูลที่ต้องการ แสดงบนหน้ าเว็บที่นนั ้ จะจัดเก็บไว้ ในฐานข้ อมูล พร้ อมทังมี ้ สว่ นของ แอพลิเคชัน่ ซึ่งอยู่ที่เซิร์ฟเวอร์ (Server) เพื่อทาการดึงข้ อมูลขึน้ มา จากฐานข้ อมูลและทาการรวมกับโครงสร้ างแล้ วแปลงให้ เป็ นหน้ า เว็ บ เพจที่ ส ามารถแสดงบนบราวเซอร์ (Browser) ได้ ท าให้ การท างานมี ค วามเป็ นอัต โนมัติ เ พิ่ ม มากขึ น้ และหากจะมี การเปลี่ยนแปลงจะเป็ นเพียงการเพิ่ม แก้ ไข และลบข้ อมูล ใน ฐานข้ อมูลเท่านัน้

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 31

ตารางที่ 1.9 หนังสือ/บทความในประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา

ไพฑูรย์ ศรีฟ้า (2542)

การออกแบบ

การ ชื่อ ออกแบบ ผู้เขียน / ผู้แต่ ง

รายละเอียด



1. จุด ประสงค์ (Aim) เว็ บ ไซต์ แ ต่ล ะเว็ บ ไซต์ นัน้ จะมีจุด ประสงค์ ใ น การสร้ างที่ แ ตกต่ า งกั น เช่ น สร้ างขึ น้ เพื่ อ เสนอข้ อมู ล ข่ า วสาร เพื่ อ การประชาสัม พัน ธ์ เพื่ อ การทดลอง ซึ่ ง เป็ นเรื่ อ งยากที่ จ ะชี ใ้ ห้ ชั ด เจน ถึง คุณ ค่า ของเว็ บ เหล่า นั น้ สิ่ งส าคัญ อยู่ต รงที่ เว็ บ ต่า ง ๆ เหล่า นัน้ ได้ มี การอธิ บ าย และมีทิ ศทางที่ ชัด เจนในส่ว นของหัว เรื่ องจะเป็ นสิ่งที่ สะท้ อน เรื่องราวภายในเว็บนัน้ ๆ ได้ ตามสมควร 2. ความถูกต้ องแม่นยา (Accuracy) เว็บเพจจานวนมากขาดความรู้ความ ถูกต้ องและแม่นยาในเรื่องของการตรวจสอบคาผิด ดังนัน้ คาหรื อข้ อความที่ ถูกต้ องจะทาให้ เกิดการเรียนรู้ในสิ่งที่ต้องการสื่อสารได้ อย่างไม่ผิดพลาด 3. ความน่าเชื่อถือและความเชี่ยวชาญ (Authority) ในการประเมินคุณค่า หนั ง สื อ จะดู ว่ า หนั ง สื อ เล่ ม นั น้ ใครเป็ นผู้ แต่ ง เช่ น เดี ย วกั บ เว็ บ เพจ ความน่าเชื่อถือส่วนหนึ่งมาจากผู้เขียนหรือทีมงานในการสร้ างเว็บ 4. ช่ว งระยะเวลาที่ แ พร่ กระจาย (Currency) ในแต่ล ะเว็ บ เพจควรมี การบอกว่าเราเริ่มสร้ างตังแต่ ้ เมื่อใด ปรับปรุงครัง้ สุดท้ ายเมื่อใด ซึ่งตามปกติ แล้ ว เว็บเพจจะต้ องมีการปรับปรุงให้ ทนั สมัยอยูต่ ลอดเวลา 5. ความลึกซึ ้งของเนือ้ หา (Depth) ความแตกต่างของเว็บเพจกับหนังสือ ก็ คื อไม่ส ามารถสร้ างเว็ บ ให้ มีค วามละเอีย ดและลึกซึง้ ได้ เท่า กับ หนัง สื อ ส่วนมากจะได้ แค่นาเสนอข้ อมูลข่าวสารได้ ไม่มากนัก แต่สิ่งที่เว็บสามารถทา ได้ คือ ลักษณะของการเสนอแนะในเรื่ องเทคนิควิธีการ เรื่ องของภาพและ เสี ย งที่ ส ามารถท าให้ ผ้ ูช มตื่ น ตาตื่ น ใจได้ อี ก ทัง้ ยัง สามารถดาวน์ โ หลด โปรแกรม ภาพ เสียงและอื่น ๆ ที่เราสนใจจากเว็บอื่นได้

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

การออกแบบ

การ ชื่อ ออกแบบ ผู้เขียน / ผู้แต่ ง

รายละเอียด

6. การออกแบบ (Design) การออกแบบเว็บเพจจะต้ องง่ายต่อการอ่า น พยายามหลีกเลี่ยงตัวอักษรและข้ อความที่มืดทึบ และใกล้ เคียงกับพื ้นหลัง ความเร็วในการถ่ายโอนข้ อมูล ซึ่งในการออกแบบหากมีภาพกราฟิ ก ควรใช้ ภาพแบบ Small Image 7. ความทัน สมัยทัน เหตุการณ์ (Regularity of update) ควรจะมี การเสนอข้ อมูลข่าวสารที่ทนั สมัย ทันต่อเหตุการณ์ และความเปลี่ยนแปลง อยู่เสมอ ดังนัน้ ในการพัฒนาเว็ บ เพจ ผู้ที่ จะพัฒนาเว็บ เพจควรค านึ งถึง คุณลักษณะที่เหมาะสมและคุณ ภาพของเว็ บเพจ เพื่อจะได้ ส ร้ า งเว็บ เพจ อย่างถูกต้ องและเป็ นเว็บเพจที่มีคณ ุ ค่าและมีประโยชน์ NECTEC (2545)



1. การประเมิ น ด้ า นตัว อักษร ได้ แ ก่ ชนิ ด ตัว อักษร (Font) ต้ องเป็ น มาตรฐาน ไม่หลากหลายเกินกว่า 3 ชนิดใน 1 หน้ าเว็บเพจ อ่านง่ายชัดเจน มีความกลมกลืนเป็ นระบบในทุกหน้ า ใช้ รูปแบบตัวอักษร(ตัวเอียง, ขีดเส้ นใต้ , หนา,บาง) แตกต่างเหมาะสม (เช่นถ้ าเป็ น หัวข้ อใช้ ตวั หนาตัวบางใช้ สาหรับ เนื ้อหาปกติ ) ขนาดตัวอักษรต้ องเหมาะสมกับกลุม่ เป้าหมาย (เช่นเด็กเล็กใช้ ขนาดตัวอักษรใหญ่ ระดับมัธยมศึกษา อุดมศึกษา ตัวอักษรขนาดเล็กลง) 2. การใช้ สี ทังสี ้ ตวั อักษร สีพื ้นเว็บ สีภาพประกอบ สีวตั ถุอื่น ๆ ที่นามา ประกอบใช้ สีสวยงามสบายตาไม่ห ลากหลายสีเกิน ไป สื่อความหมายได้ (เช่น สีแดงแทนเรื่องราวใหม่ ๆ ที่น่าติดตาม) มีความแตกต่างระหว่างสีพื ้น และสีข้อความ สีภาพประกอบ เหมาะสม มีความแตกต่างระหว่างสีข้อความ และข้ อความที่มีสว่ นเชื่อมโยง ใช้ สีอย่างกลมกลืนในทุกหน้ าของเว็บไซต์ 3. การใช้ ภาพกราฟิ ก ชนิดของภาพเหมาะสมกับกลุม่ เป้าหมาย (ภาพวาด การ์ ตนู ใช้ กับเด็ก, ภาพถ่ายใช้ กับบุคคลทัว่ ไป) ภาพต้ องสื่อความหมายตรง ตามจุดประสงค์หรื อสามารถอธิ บายเพิ่มเติ มได้ มากกว่าตัวหนังสือ ขนาด ของภาพที่แสดงในหน้ าจอเหมาะสม ชนิดและขนาดของไฟล์ภาพไม่ใหญ่ เกินไป

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 33

การออกแบบ

การ ชื่อ ออกแบบ ผู้เขียน / ผู้แต่ ง

รายละเอียด

4. การใช้ ภาพเคลื่อนไหว (Animation) ควรใช้ ในกรณีที่ไม่สามารถหาภาพ จริงได้ หรือการอธิบายเรื่องที่เป็ นนามธรรมหรื อเรื่ องที่ซบั ซ้ อนเพื่อให้ ดงู ่ายขึน้ และภาพต้ องสื่อความหมายตรงตามจุดประสงค์ ขนาดของภาพที่แสดงใน หน้ าจอเหมาะสม ชนิดและขนาดของไฟล์ภาพไม่ใหญ่เกินไป ความเร็ วของ การเคลื่อนไหวเป็ นธรรมชาติ จานวนของภาพเคลื่อนไหวเหมาะสม 5. การประเมิน ด้ า นภาพวีดิ ทัศน์ (Video) ใช้ ในกรณี ที่เนื อ้ หาต้ องการ นาเสนอถึงความต่อเนื่องของขัน้ ตอนวิธีการอย่างใดอย่างหนึ่ ง หรื อแสดง สภาพจริงที่เกิดขึน้ ขนาดของภาพวีดิทศั น์ที่แสดงในหน้ าจอเหมาะสม ชนิด และขนาดของไฟล์ ไม่ใ หญ่ เ กิ น ไป ภาพที่ แ สดงเคลื่ อนไหวเหมื อนจริ ง มี การบอกวิธีการเปิ ดดูวีดิทศั น์หรือโปรแกรมที่จะใช้ ในการดู 6.การประเมิ น ด้ านเสี ย ง มี ทั ง้ เสี ย งบรรยายและเสี ย งประกอบ (Background) ชัดเจนเหมาะสม สอดคล้ องสมจริ งเข้ ากับเนือ้ หา ไม่รบกวน ผู้ใช้ ความจาเป็ นในการใส่เสียงลงในเว็บไซต์ ขนาดและชนิดของไฟล์เสียงไม่ ใหญ่เกินไป มีคาแนะนาหรื อบอกวิธีการเปิ ดเสียง สามารถเลือกได้ ว่าจะฟั ง เสียงหรือไม่ 7. การประเมินด้ านการจัดวางองค์ประกอบต่า ง ๆ (ภาพ,ข้ อความ ฯลฯ) ควรมีความสมดุลเหมาะสม มีความเป็ นสากล(เช่นจากบนมาล่าง ซ้ ายไป ขวา) กลมกลืนในทุก ๆ หน้ า

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

ตารางที่ 1.10 หนังสือ/บทความต่างประเทศที่เกี่ยวกับรู ปแบบเว็บไซต์ทางการศึกษา การ ออกแบบ

การออกแบบ

ชื่อผู้เขียน / ผู้แต่ ง

รายละเอียด

Waterhouse (2005)



คุณภาพในการออกแบบ 1. มีการใช้ ประโยชน์จากภาพและวัตถุอย่างเหมาะสม 2. สามารถนาทางศึกษาบทเรียนในเว็บไซต์ได้ งา่ ย 3. เว็บไซต์มีการออกแบบให้ งา่ ยต่อการอ่าน 4. ผู้เรียนสามารถเข้ าถึงข้ อมูลต่าง ๆ ที่ต้องการเพิ่มเติมได้ ใน การเชื่อมโยง 2-3 ครัง้ 5. การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ สามารถใช้ งานและเข้ าถึงได้ 6. เว็บไซต์มีการนาเสนอโดยใช้ ข้อความเพียงอย่างเดียวหรือไม่ 7. ผู้เรียนสามารถค้ นหาเว็บไซต์ได้ งา่ ย 8. ออกแบบเพื่อความสะดวกต่อการกวาดสายตาและทาเข้ าใจ บทเรียนได้ งา่ ย 9. มีการใช้ สีอย่างเหมาะสม 10. หลีกเลี่ยงการใช้ ภาพและวัตถุที่เคลื่อนไหวแบบกระพริบเร็ว ๆ มีลกั ษณะโค้ งมนหรือมองแล้ วรู้สกึ สับสน 11. มีการออกแบบแถบป้ายบอกข้ อมูลสาหรับผู้อา่ น 12. มีแผนผังโดยรวมของเว็บไซต์ 13. หน้ าการนาเสนอข้ อมูลมีการเชื่อมโยงกลับไปยังหน้ าหลัก 14. ผู้เรียนยังคงเข้ าถึงเว็บไซต์ได้ ปกติในช่วงเวลาที่มีการเชื่อมต่อ เครือข่ายอินเทอร์ เน็ตมีปัญหา 15. มีการถ่ายข้ อมูลและแสดงผลหน้ าการนาเสนอข้ อมูลอย่างรวดเร็ว

Gary et al (2008)



1. 2. 3. 4. 5.

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

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 35

รายละเอียด

การออกแบบ

ชื่อผู้เขียน / ผู้แต่ ง

การ ออกแบบ

6. 7. 8. 9.

เรียนรู้โดยใช้ ประสบการณ์ตรง การทดสอบเชื่อถือได้ มีขอบเขตเนื ้อหาที่ชดั เจน มีการประเมินผลการเรียนโดยผู้เรียนด้ วย

3) การพัฒนา ฝ่ ายผู้ผลิต/ผู้ดแู ลเว็บไซต์ (Webmaster): การพัฒนา (Development) คือการสร้ าง เว็บไซต์โดยเริ่ มจากการกาหนดแผนการดาเนินงานผลิตอย่างเป็ นขันตอนตาม ้ Storyboard ที่ ได้ ระบุ เนื ้อหา รู ปแบบของเนื ้อหาในแต่ละหน้ าเว็บเพจ รวมถึงรู ปภาพ เสียง วีดิทศั น์ และอื่น ๆ เพื่อตอบสนองวัตถุประสงค์ของเว็บไซต์ จากนันใช้ ้ program authoring tools ต่าง ๆ ใน การสร้ างเว็บไซต์ เช่น program macromedia dreamweaver ที่เป็ นที่นิยมอย่างแพร่ หลาย program exe ที่เป็ น freeware และใช้ โปรแกรม editing tool ต่าง ๆ ในการตกแต่งภาพ และ กราฟิ กต่าง ๆ เช่น Adobe Photoshop ที่เป็ นที่นิยม หรื อ program photoscape ที่เป็ น freeware เป็ นต้ น ฝ่ ายผู้สอนและ/หรื อนักออกแบบการเรี ยนการสอน: การพัฒนา (Development) คือการสร้ างบทเรี ยนโดยเริ่ มจากการกาหนดแผนการดาเนินงานผลิตอย่างเป็ นขัน้ ตอนด้ วย การเขียน Storyboard โดยระบุ เนื ้อหา รู ปแบบของเนื ้อหาที่จะใช้ เช่น รู ปภาพ เสียงบรรยาย วีดิทศั น์ และผู้รับผิดชอบเพื่อตอบสนองวัตถุประสงค์ของบทเรี ยนและการประเมินบทเรี ยน อย่างเป็ นระบบ

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

4) การนาไปใช้ ฝ่ ายผู้ผลิต/ผู้ดูแ ลเว็บไซต์ (Webmaster): การนาไปใช้ (Implementation) คือ การนาเว็บไซต์ที่สร้ างเสร็ จไปใช้ งานจริ งหลังจากที่ได้ มีการทดลองนาไปใช้ กับกลุ่มเป้าหมาย และได้ ปรับแก้ ตามข้ อเสนอแนะเพื่อปรับปรุ งแก้ ไขแล้ ว นอกจากนี ้อาจมีการตรวจเช็คและขอ คาแนะนาจากผู้เชี่ยวชาญด้ านการออกแบบและพัฒนาเว็บไซต์ ฝ่ ายผู้สอนและ/หรื อนักออกแบบการเรี ยนการสอน: การนาไปใช้ (Implementation) คือการนาบทเรี ยนที่สร้ างเสร็ จไปใช้ งานจริ งหลังจากที่ได้ มีการทดลองนาไปใช้ โดยกลุ่มนัก ออกแบบและนักพัฒนาบทเรี ยนแล้ ว โดยในบทเรี ยนหนึ่งจะมีคาอธิบายการนาบทเรี ยนไปใช้ สาหรับผู้สอน การเตรี ยมความพร้ อมผู้เรี ยน และการเตรี ยมอุปกรณ์เครื่ องมือสาหรับบทเรี ยน นัน้ ๆ เพื่อให้ สามารถนาบทเรี ยนไปใช้ อย่างได้ ผลสูงสุด 5) การวัดผลและการประเมิน ฝ่ ายผู้ผลิต/ผู้ดแู ลเว็บไซต์ (Webmaster): การวัดผลและการประเมิน (Evaluation) คือการวัดผลและการประเมินจะต้ องทาอย่างมีระบบโดยวัดที่คณ ุ ภาพและประสิทธิภาพของ ขันตอนการออกแบบเว็ ้ บไซต์รวมทังชิ ้ ้นผลงานเว็บไซต์ ทังนี ้ ้เพื่อเป็ นการเก็บข้ อมูลเพื่อนาไป ปรับปรุ งแก้ ไขในการดาเนินงานครัง้ ต่อ ๆ ไป และเพื่อเป็ นการเปิ ดโอกาสรั บฟั งความคิดเห็น จากผู้ใช้ งานจริ ง ไม่ว่าจะเป็ นในเรื่ องของความถูกต้ องของเนื ้อหา การทางานของ link และ ระบบนาทาง (Navigation) ตรวจสอบหาความผิดพลาดของโปรแกรม script ความละเอียด ของภาพและความเร็ วในการ download เมื่อเชื่อมต่อกับอินเทอร์ เน็ต รวมทังมี ้ การทดลองกับ web browser ที่หลากหลาย ฝ่ ายผู้สอนและ/หรื อ นักออกแบบการเรี ยนการสอน: การวัดผลและการประเมิน (Evaluation) การวัด ผลและการประเมิ น จะต้ อ งท าอย่ า งมี ร ะบบโดยวัด ที่ คุณ ภาพและ ประสิทธิภาพของขันตอนการออกแบบบทเรี ้ ยนรวมทังชิ ้ ้นผลงานบทเรี ยน โดยการประเมินจะ ประกอบด้ วย 2 ส่ ว นที่ ส าคัญ คื อ การประเมิ น ผลระหว่ า งขั น้ ตอนพั ฒ นา (Formative Evaluation) เป็ นการเก็บข้ อมูลเพื่อนาไปปรั บปรุ งแก้ ไขในการดาเนินงานครั ง้ ต่อ ๆ ไป และ การประเมินผลเมื่อพัฒนาบทเรี ยนเรี ยบร้ อยแล้ ว (Summative Evaluation) เพื่อเป็ นการเปิ ด โอกาสสาหรั บความคิดเห็นจากผู้ใช้ งานจริ ง และจากการวัดและประเมินผลลัพธ์ ทางการ เรี ยนรู้ ของผู้เรี ยนว่าตรงตามวัตถุประสงค์ของบทเรี ยนหรื อไม่

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 37

5. โครงสร้ างเว็บไซต์ ทางการศึกษา ในการจัดวางข้ อมูลสารสนเทศบนเว็บนัน้ การจัดวางองค์ประกอบอย่างเป็ นระบบ การจัด ลาดับ เนื อ้ หาตามความส าคัญ อย่ า งมี ร ะเบี ย บ และการออกแบบเว็บ ไซต์ อ ย่ า งมี สุนทรี ยภาพนัน้ มีความสาคัญเป็ นอย่างยิ่ง โดยการจัดทาโครงสร้ างเว็บไซต์ (Site Structure) แบ่งออกเป็ น 4 ประเภทตามแนวทางของ Lynch and Horton (1999) ดังนี ้ (1) แบบขนาน (Linear) หรื อแบบ Sequence (เรี ยงลาดับ) (2) แบบไม่ขนาน (Non-linear) (3) แบบลาดับ ขัน้ (Hierarchies) และ (4) แบบเว็บ (Web) 1) แบบขนาน (Linear) หรื อแบบ Sequence (เรี ยงลาดับ) เหมาะสาหรั บ เว็บไซต์ทีเนื ้อหาน้ อย และมีโครงสร้ างเนื ้อหาที่ไม่ซบั ซ้ อน โดยผู้พัฒนาต้ องการให้ ผู้เรี ยนศึกษาเนื ้อหาไปตามลาดับที่ได้ กาหนดไว้

แผนภาพที่ 1.5 แสดงโครงสร้ างเว็บไซต์แบบขนาน (Linear) ที่มา www.webstyleguide.com 2) แบบไม่ขนาน (Non-linear) เหมาะสาหรับเว็บไซต์ที่มีเนือ้ หาเสริ มในบาง หัวข้ อ ผู้พัฒนาจึงพยายามที่จะออกแบบเว็บไซต์ที่ผ้ ูเรี ยนสามารถเข้ าไปศึกษา เนื ้อหาเพิ่มเติมในหัวข้ อนัน้ ๆ ได้

แผนภาพที่ 1.6 แสดงโครงสร้ างเว็บไซต์แบบไม่ขนาน (Non-linear) ที่มา www.webstyleguide.com www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

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

แผนภาพที่ 1.7 แสดงโครงสร้ างเว็บไซต์แบบลาดับขัน้ (Hierarchies) ที่มา www.webstyleguide.com 4) แบบเว็บ (Web) เหมาะสาหรั บเว็บไซต์ที่มีเนือ้ หาซับซ้ อนและมีความ เชื่อมโยงระหว่างหัวข้ อค่อนข้ างมาก ผู้พฒ ั นาจึงออกแบบให้ ผ้ เู รี ยนสามารถศึกษา เนือ้ หาโดยการคลิกเชื่อมโยงเนือ้ หาในส่วนต่าง ๆ ได้ ตามต้ องการ เป้าหมายของ การออกแบบในรู ปแบบนี ้ก็เพื่อที่จะใช้ ประโยชน์จากศักยภาพของเว็บในเรื่ องของ การเชื่อมโยง แต่เมื่อพิจารณาถึงการเรี ยนรู้ ของผู้เรี ยนแล้ ว เว็บไซต์ในลักษณะนี ้ อาจทาให้ ผ้ เู รี ยนเกิดความสับสนในขณะเรี ยนได้

แผนภาพที่ 1.8 แสดงโครงสร้ างเว็บไซต์แบบเว็บ (Web) ทีม่ า www.webstyleguide.com

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 39

Lynch and Horton (1999) ได้ กล่าวถึงการประยุกต์การออกแบบโครงสร้ าง เว็บไซต์ใช้ เพื่อตอบสนองวัตถุประสงค์การเรี ยนการสอน โดยได้ ให้ ความเห็นว่า การนาเสนอ เนื ้อหาในรู ปแบบเว็บไซต์นี ้ สามารถผสมผสานกันได้ โดยให้ พิจารณาจากประสบการณ์ของ ผู้เรี ยนซึง่ จะแปรผันตามความซับซ้ อนของโครงสร้ างเว็บไซต์

แผนภาพที่ 1.9 การประยุกต์การออกแบบโครงสร้ างเว็บไซต์ ที่มา www.webstyleguide.com เว็บไซต์โดยทัว่ ไปมีหลายประเภท ทังนี ้ ้ในการจัดทาเว็บไซต์สาหรับการศึกษา ควร พิจารณาความเป็ นวิชาการ การเป็ นแหล่งเผยแพร่ และแหล่งอ้ างอิงของบุคคลต่าง ๆ ฉะนัน้ การจัดวางข้ อมูลจึงควรเน้ นความเรี ยบหรู เป็ นระบบและมีระเบียบ ซึง่ จะแตกต่างจากเว็บไซต์ ทัว่ ไปที่จะต้ องออกแบบให้ ดงึ ดูดความสนใจจากผู้เข้ าชม

แผนภาพที่ 1.10 แสดงลักษณะข้ อมูลสาหรับเว็บไซต์การศึกษา ที่มา www.webstyleguide.com www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

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

แผนภาพที่ 1.11 แสดงการนาเสนอสารสนเทศของเว็บไซต์ต่าง ๆ ที่มา www.webstyleguide.com ดังนัน้ ในขันตอนของการออกแบบ ้ การจัดทาแผนผังเว็บไซต์จงึ มีความสาคัญอย่าง มากเพื่ อ ที่ จ ะได้ เ ป็ นข้ อมูล แก่ ผ้ ู พัฒ นาเว็ บ ไซต์ ต่ อ ไป ผู้ ออกแบบจัด ท าแผนภาพแสดง โครงสร้ างเว็บไซต์ (Concept diagram of site) จากนันผู ้ ้ พฒ ั นานาข้ อมูลดังกล่าวไปสร้ าง หน้ าเว็บเพจโดยการจัดเรี ยงไฟล์ตา่ ง ๆ บนเซิร์ฟเวอร์ (Arrangement of files on the server)

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 41

แผนภาพที่ 1.12 แสดง Concept Diagram of Site ที่มา www.webstyleguide.com

แผนภาพที่ 1.13 ตัวอย่าง Site Structure (1)

แผนภาพที่ 1.14 ตัวอย่าง Site Structure (2) www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

6. กรณีศกึ ษาการออกแบบเว็บไซต์ ทางการศึกษา การสารวจเว็บไซต์ทางการศึกษาในประเทศต่าง ๆ ในปี พ .ศ. 2548 พบว่ากว่า ร้ อยละ 50 ของหลักสูตรในระดับอุดมศึกษาในประเทศต่าง ๆ ได้ ใช้ การสอนแบบอีเลิร์นนิง นอกจากนี ้จานวนวิทยาลัยและมหาวิทยาลัยที่เปิ ดสอนทางไกลผ่านอินเทอร์ เน็ต ก็มีทีท่าว่า จะเพิ่มจานวนมากขึ ้นเป็ นสองเท่า จากจานวนวิทยาลัยและมหาวิทยาลัยที่เปิ ดสอนทางไกล ผ่านอินเทอร์ เน็ตในปี พ.ศ. 2542 จานวน 1,500 สถาบัน เพิ่มขึ ้นเป็ น 3,300 สถาบันในปี พ.ศ. 2547 ถึ ง ปี พ.ศ. 2549 ประเทศที่ พั ฒ นาแล้ วทั่ว โลกได้ เ ปิ ดบริ ก ารอี เ ลิ ร์ น นิ ง โดยใน สหรัฐอเมริ กานัน้ แต่ละภาคการศึกษามีผ้ สู มัครเรี ยนทางอีเลิร์นนิงประมาณ 2 ล้ านคน บาง มหาวิทยาลัย เช่น ฟิ นิกส์ออนไลน์ (Phoenix Online) มีนกั ศึกษากว่า 140,000 คน ในแคน นาดามีมหาวิทยาลัยเสมือนจริ งแห่งแคนาดา (Canadian Virtual University) และในอังกฤษ มียเู คอียู (UKeU) และจากรายงานของสมาคมสโลนในปี พ.ศ 2548 กล่าวว่า กว่า 65% ของ มหาวิทยาลัยในสหรั ฐ อเมริ กาเปิ ดการสอนอีเลิร์นนิงในระดับปริ ญญาโทและปริ ญญาเอก และ 65% ในระดับปริ ญญาตรี (ศรี ศกั ดิ์ จามรมาน, 2549) University of Phoenix เป็ นสถาบันอุดมศึกษาที่มีจานวนนักศึกษาที่เรี ยนแบบอี เลิร์นนิงมากที่สดุ ถึงกว่า 140,000 คน แนวทางในการจัดการเรี ยนการสอนแบบ อีเลิร์นนิงของ University of Phoenix นัน้ ยึดหลักเรื่ องความยืดหยุ่นของการศึกษาที่ผ้ ูเรี ยนสามารถเรี ยน เมื่ อ ไหร่ แ ละเวลาใดก็ได้ มาเป็ นแนวทางในการบริ หารสถาบัน ส่งผลให้ ประสบผลสาเร็ จ ทางด้ านการตอบรั บจากผู้ที่ต้องการจะศึกษาต่อ แต่มีข้อจากัดในเรื่ องของเวลาและภาระที่ ต้ องรั บผิดชอบ ทังในด้ ้ านหน้ าที่การงาน และทางด้ านครอบครั ว University of Phoenix Online เป็ นมหาวิทยาลัยเอกชนแห่งหนึ่งที่ประสบผลสาเร็ จและได้ รั บการตอบรับเป็ นอย่างดี โดยดูจ ากจ านวนผู้เ รี ย นที่ เ พิ่ ม ขึน้ อย่ า งรวดเร็ ว โดยมหาวิท ยาลัย แห่ ง นี ไ้ ด้ ก่ อ ตัง้ ในปี พ.ศ. 2532 และมีจานวนนักศึกษากว่า 140,000 คนจากรัฐต่าง ๆ ทัว่ สหรัฐอเมริ กา จากกว่า 40 ประเทศทัว่ โลก (http://www.phoenix.edu, 2008)

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 43

แผนภาพที่ 1.15 University of Phoenix Online (http://www.phoenix.edu/) ในปี พ.ศ. 2542 Jones International University เป็ นมหาวิทยาลัยเสมือ น (Virtual Univeristy) แห่งแรกที่ได้ รับการรั บรองวิทยฐานะสถาบันการศึกษาจากหน่วยงาน ภาครัฐ(accreditation) ในสหรัฐอเมริ กา ในขณะที่ Capella university (http://capella.edu) เป็ นมหาวิทยาลัยเสมือนแห่งแรกที่เข้ าสู่ตลาดหุ้น Nasdaq

แผนภาพที่ 1.16 Jones International University (http://jonesinternational.edu) www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

แผนภาพที่ 1.17 Capella university (http://www.capella.edu) นอกจากนี ้ ในบางสถาบันอุดมศึกษาก็มีแนวทางในการส่งเสริ มการเรี ยนการสอน แบบอีเลิร์นนิง โดยยึดหลักที่ว่าไม่ว่าคุณเป็ นใคร คุณก็สามารถแสวงหาความรู้ ได้ ดังตัวอย่าง ของมหาวิทยาลัย Messachusette Instutition of Technology (MIT) ที่ได้ มีการจัดทารายวิชาใน ลักษณะ บทเรี ยนอีเลิร์นนิง (MIT Open Courseware) ที่ผ้ สู นใจสามารถสมัครเข้ าเรี ยนได้ แต่จะ ไม่ได้ รับหน่วยกิต เช่นเดียวกับแนวคิดของ Open University ประเทศอังกฤษ (Open Learning)

แผนภาพที่ 1.18 ตัวอย่าง MIT Open Courseware (http://ocw.mit.edu/index.html)

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 45

แผนภาพที่ 1.19 ตัวอย่าง Open Learning (http://openlearn.open.ac.uk) นอกจากนี ้ ในหลาย ๆ มหาวิทยาลัยในเอเชียก็เริ่ มมีแนวคิดในการเผยแพร่ ความรู้ ในลั ก ษณะนี เ้ ช่ น กั น ดั ง ตั ว อย่ า งเช่ น ที่ University of Tokyo ที่ ไ ด้ เผยแพร่ เว็ บ ไซต์ UTOpenCourseWare รวบรวมรายวิ ช าต่ า ง ๆ เพื่ อ เผยแพร่ ความรู้ สู่ ส าธารณะ และ Hanyang Cyber Univerisity ของประเทศเกาหลี ที่ได้ เปิ ดหลักสูตรในระดับอุดมศึกษา ออนไลน์ เพื่อมุ่งหวังจะเป็ นมหาวิทยาลัยทางไกลระดับแนวหน้ าต่อไป

แผนภาพที่ 1.20 ตัวอย่าง UTOpenCourseWare (http://ocw.u-tokyo.ac.jp/english) www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

แผนภาพที่ 1.21 ตัวอย่าง Hanyang Cyber University (http://www.hanyangcyber.ac.kr) ในปี พ.ศ. 2548 โครงการมหาวิทยาลัยไซเบอร์ ไทยเปิ ดหลักสูตรอีเลิร์นนิงขึน้ ในขณะที่มหาวิทยาลัยอัสสัมชัญถือเป็ นมหาวิ ทยาลัยเอกชนที่เปิ ดหลักสูตรอีเลิร์นนิงขึ ้นเป็ น แห่งแรกในประเทศไทย

แผนภาพที่ 1.22 เว็บไซต์ของโครงการมหาวิทยาลัยไซเบอร์ ไทย (http://www.thaicyberu.go.th/)

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา 47

แผนภาพที่ 1.23 เว็บไซต์ของวิทยาลัยทางไกลอินเทอร์ เน็ต มหาวิทยาลัยอัสสัมชัญ (http://www.elearning.au.edu) ทังนี ้ ้ การเรี ยนการสอนแบบอีเลิร์นนิงไม่ จากัดเฉพาะระดับอุดมศึกษาเท่านั น้ ใน ระดับ K-12 ก็เริ่ มได้ รับความนิยม ดังตัวอย่างเช่น โรงเรี ยน Florida Virtual School (FLVS) ตังขึ ้ ้นเมื่อปี พ.ศ. 2539 ถือว่าเป็ นโรงเรี ยนเสมือน (Virtual school) ที่ใหญ่ที่สุด โดยโรงเรี ยน จะเอื ้อประโยชน์ให้ กบั ผู้เรี ยนที่อยู่ในสถานที่ชนบทให้ มีโอกาสได้ เรี ยนรายวิชาเดียวกันกับผู้ที่ อยู่ในเมืองหลวง (Waterhouse, 2005) ไม่เพียงแต่ในสหรั ฐอเมริ กา สหราชอาณาจักร ญี่ ปนุ่ และสาธารณรั ฐเกาหลี ที่ ตื่นตัวและให้ ความสาคัญกับการเรี ยนการสอนในลักษณะอีเลิร์นนิง มหาวิทยาลัยในอาเซียน หลายแห่ ง ก็ ไ ด้ มี ก ารเรี ย นการสอนแบบอี เ ลิ ร์ นนิ ง เช่ น กั น โดยมหาวิ ท ยาลัย แห่ ง แรกที่ เปิ ดหลั ก สู ต รอี เ ลิ ร์ นนิ ง ในประเทศต่ า ง ๆ ในอาเซี ย น ได้ แก่ Universiti Brunei Darussalam,University of Cambodia, Indonesian Open Learning University, National University of Laos, Universiti Tun Abdul Razak แห่งมาเลเซีย, e-Learning Center in Myanmar, University of the Philippines Open University, National University of Singapore, และ Can Tho University แห่งเวียดนาม (Charmonman, 2005)

www.ThaiCyberU.go.th

บทที่ 1 ข้ อมูลพื ้นฐานเกี่ยวกับเว็บไซต์ทางการศึกษา

บทสรุป องค์ประกอบและโครงสร้ างของเว็บไซต์ทางการศึกษาประกอบด้ วย 3 องค์ประกอบ พื ้นฐานที่สาคัญดังนี ้ (1) บทเรี ยนอิเล็กทรอนิกส์ (Courseware) เป็ นเนื ้อหาสาระที่นาเสนอใน รู ปแบบอิเล็กทรอนิกส์ ซึง่ ส่วนใหญ่มีลกั ษณะเป็ นสื่อประสม โดยเน้ นการออกแบบที่ใช้ วิธีการ กลยุทธ์ และการให้ ข้อมูลป้อนกลับแก่ผ้ เู รี ยนโดยทันทีในการนาเสนอที่กระตุ้นให้ ผ้ ูเรี ยนเกิด การเรี ยนรู้ ตามวัตถุประสงค์ที่กาหนดไว้ (2) การติดต่อสื่อสาร (Communication) เน้ นที่ เครื่ องมือในการติดต่อสื่อสารที่ช่วยให้ ผ้ เู รี ยนได้ ตดิ ต่อสอบถาม ปรึ กษาหารื อ และแลกเปลี่ยน ความคิดเห็นระหว่างผู้เรี ยนและผู้สอนและระหว่างผู้เรี ยนกับเพื่อนร่ วมชันเรี ้ ยนคนอื่น ๆ โดย เครื่ องมือที่ใช้ อาจแบ่งได้ เป็ นแบบประสานเวลา (Synchronous) และ แบบไม่ประสานเวลา (Asynchronous) (3) การประเมินผลการเรี ยน (Assessment and Evaluation) โดยใน การเรี ยนแบบผสมผสานบางรายวิชาจาเป็ นต้ องวัดระดับความรู้ ก่อนเรี ยน (Pre-test) เพื่อให้ ผู้เรี ยนได้ เลือกเรี ยนในบทเรี ยนหรื อหลักสูตรที่เหมาะสมมากที่สุด ซึ่งจะทาให้ การเรี ยนเกิด ประสิทธิ ภ าพสูงสุด เมื่ อ เข้ าสู่ร ายวิชาในแต่ละหลักสูตรก็จะมี การสอบย่อ ยท้ ายบทเรี ยน (Quiz) และการสอบประมวลความรู้ ก่อนที่จะรายวิชา (Final Examination) นอกจากการวัด และประเมิ น ผลลัพ ธ์ ก ารเรี ยนรู้ ของผู้ เรี ยนผ่ า นแบบทดสอบต่ า ง ๆ ดัง กล่ า วแล้ วนั น้ กระบวนการการเรี ยนรู้ ของผู้เรี ยนออนไลน์ถือได้ ว่าเป็ นปั จจัยสาคัญที่ผ้ สู อนควรพิจารณาไม่ ว่าจะเป็ น จานวนครัง้ การเข้ าเรี ยนในห้ องเรี ยน หรื อในบทเรี ยนออนไลน์ การเข้ าร่ วมกิจกรรม บนออนไลน์ เวลาที่เข้ าใช้ ในแต่ละบทเรี ยน ตลอดจนความถี่ในการแสดงความคิดเห็นหรื อ การอภิปราย เพื่อเป็ นการวัดกระบวนการเรี ยนรู้ ของผู้เรี ยนที่อยู่ในบริ บทออนไลน์ และเพื่อให้ เป็ นการวัดและประเมินผลมีความเที่ยงธรรมและครอบคลุมมิติการเรี ยนรู้ ต่าง ๆ ให้ ได้ มาก ที่สุด จากองค์ประกอบที่สาคัญทัง้ 3 นี ้ สามารถนามาจัดลาดับขัน้ ตอนการออกแบบและ พัฒนาเว็บไซต์ทางการศึกษา (ADDIE MODEL) ซึง่ มีส่วนประกอบที่สาคัญอยู่ 2 ส่วน คือ จากฝ่ ายผู้ผลิต/ผู้ดแู ลเว็บไซต์ (Webmaster) และจากฝ่ ายผู้สอน หรื อนักออกแบบการเรี ยน การสอน ADDIE MODEL ประกอบด้ วย (1) การวิเคราะห์ (2) การออกแบบ (3) การพัฒนา (4) การนาไปใช้ และ (5) การวัดผลและการประเมิน โดยการจัดทาโครงสร้ างเว็บไซต์ แบ่ง ออกเป็ น 4 ประเภทตามแนวทางของ Lynch and Horton (2002) คือ 1) แบบขนาน (Linear) หรื อ แบบ Sequence (เรี ยงลาดับ ) 2) แบบไม่ข นาน (Non-linear) 3) แบบลาดับขัน้ (Hierarchies) และ 4) แบบเว็บ (Web) โดยมีตวั อย่างกรณี ศกึ ษาและงานวิจัย หนังสือ / บทความ นามาเป็ นตัวอย่างประกอบด้ วย

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 49

การออกแบบเว็บไซต์สาหรั บการเรี ยนการสอนอีเลิร์นนิงนัน้ นอกจากการคานึงถึง กลุ่มเป้าหมาย ความสะดวกในการใช้ งานของผู้ใช้ แล้ ว ความสวยงามและสุนทรี ยภาพของ เว็บไซต์ก็มีความสาคัญเช่นกัน ดังนัน้ (1) หลักการพื ้นฐานในการออกแบบจึงเข้ ามามีบทบาท ส าคัญ ที่ ผ้ ู ออกแบบเว็ บ ไซต์ ท างการศึ ก ษาควรพิ จ ารณา คื อ การเน้ นข้ อความส าคัญ ความตรงกันข้ าม ความสมดุล การวางแนว การทาซ ้า การเลือกใช้ สี และการเลือกใช้ ภาพ นอกจากหลักการออกแบบดังกล่าวแล้ วยังมีข้อควรพิจารณาคือ (2) หลักการเพิ่มเติมสาหรับ การออกแบบเว็บไซต์ทางการศึกษา ได้ แก่ ความเรี ยบง่าย ความสม่าเสมอ ระบบนาทาง คุณภาพในการออกแบบ การออกแบบหน้ าจอ ความละเอียดของจอภาพ และการนาเสนอ เนื ้อหา 1. หลักการพืน้ ฐานในการออกแบบเว็บไซต์ ทางการศึกษา 1.1 การเน้ นข้ อความสาคัญ แนวทางในการพิจารณาการเน้ นข้ อความสาคัญคือ ให้ ผ้ อู อกแบบถามตนเองดังนี ้ (1) ส่วนใดที่เราดูเป็ นส่วนแรก ส่วนที่สอง ส่วนที่สามฯ (2) การที่เราดูสิ่งนันก่ ้ อนเป็ นเพราะ อะไร (3) ผู้ออกแบบมีเทคนิควิธีอะไรในการจัดลาดับองค์ประกอบต่าง ๆ ในหน้ ากระดาษ เช่น สี ขนาดพื ้นผิว ตาแหน่ง และ (4) จะเน้ นการจัดข้ อมูลให้ เป็ นระเบียบอย่างไร ทังนี ้ เ้ นื่อ งจากการเน้ นเข้ ามามี บทบาทสาคัญในการออกแบบเพื่ อให้ ผ้ ูอ่าน/ผู้เข้ า ชมเว็บ ไซต์ เ ข้ า ใจง่ า ยขึน้ เน้ นความส าคัญ ของส่ ว นประกอบส าคัญ ท าให้ เ ป็ นจุด สนใจ ของผู้เข้ าชมเว็บไซต์ และทาให้ ผ้ ูอ่านเข้ าใจในสิ่งที่เราต้ อ งการสื่อ ได้ ง่าย โดยพิจารณาว่า ส่วนไหนของสาร (message -- ในที่นีค้ ือเว็บไซต์) ที่จะสามารถดึงดูดผู้อ่านได้ มากที่สุด หลัง จากนัน้ เน้ น ค าหรื อ ประโยคที่ คิ ด ว่า มัน สามารถดึง ดูด ความสนใจของผู้อ่ า นได้ โดย การกาหนลาดับของการมอง โดยอาจพิจารณาจากคาถามต่อไปนี ้ (1) สารที่สาคัญที่สุดของ คุณคืออะไร (2) สารที่สาคัญที่สุดนี ้เป็ นส่วนประกอบสาคัญที่สามารถสื่อได้ ดีที่สุดหรื อไม่ www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

(3) สารรองลงมาคืออะไร (4) สารรองลงมานี ้ คือส่วนประกอบสาคัญที่สามารถสื่อได้ ดีที่สุด หรื อไม่ (5) สารรองลงมาขันที ้ ่ 3 คืออะไร (6) สารรองลงมาขันที ้ ่ 3 คือส่วนประกอบสาคัญที่ สามารถสื่อได้ ดีที่สดุ หรื อไม่ (7) ส่วนประกอบสาคัญในการมองคือสิ่งกระตุ้นหรื อดึงดูดความ สนใจของผู้อ่านมากที่สดุ หรื อไม่

แผนภาพที่ 2.1 การเน้ นข้ อความสาคัญที่เหมาะสม

แผนภาพที่ 2.2 การเน้ นข้ อความสาคัญที่ไม่เหมาะสม

แผนภาพที่ 2.3 เว็บไซต์ของโครงการมหาวิทยาลัยไซเบอร์ ไทย (http://www.thaicyberu.go.th/)

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 51

ดัง ตัว อย่า งเว็บไซต์ข องมหาวิทยาลัย ไซเบอร์ ไทยที่ มีการกาหนดกลุ่มเป้าหมายที่ ชัดเจนคือกลุ่มผู้ที่สนใจศึกษาเกี่ยวกับการเรี ยนการสอนอีเลิร์นนิงด้ านบนในส่วนของแบนเนอร์ (ส่วนที่สาคัญที่สดุ ) มีชื่อของมหาวิทยาลัยชัดเจน ในเว็บไซต์มีการเชื่อมโยงไปยังแหล่งข้ อมูล update ต่าง ๆ และบทเรี ยนให้ ผ้ เู ยี่ยมชมสามารถเข้ ามาศึกษาได้ นอกจากนี ้ยังมีระบบ log-in สาหรับสมาชิกเพื่อเข้ าไปศึกษา และแลกเปลี่ยนความรู้ (ส่วนไอคอนต่าง ๆ เป็ นส่วนที่สาคัญ ที่ 2 ส่วนใหญ่คือคอลัมน์ซ้ายของหน้ าจอ) ส่วนกลางของหน้ าจอมีการโพสต์ประกาศสาคัญ และประชาสัมพันธ์ตา่ ง ๆ อาจกล่าวได้ ว่าวิธีการเน้ นสามารถทาได้ หลายวิธี เช่น ทาให้ มีขนาดใหญ่ ทาให้ หนา ทาให้ สว่าง การเพิ่มลักษณะพิเศษให้ กับส่วนประกอบสาคัญ เช่น การใส่รูปแบบที่ แตกต่างจากข้ อความในหน้ านัน้ ๆ เช่น การเพิ่มเงาและความหนานูน (Shadow & Bevel) ใน กรณีที่เป็ นภาพ การเน้ นภาพให้ เด่นด้ วยการวางภาพบนพื ้นขาว การใช้ สีตรงกันข้ าม การเพิ่ม เงา ทาให้ เอียงเมื่อส่วนประกอบสาคัญอื่นเป็ นแนวนอน ทาให้ เข้ มเมื่อทุกสิ่งรอบ ๆ เป็ นสีจาง ทาให้ สว่างถ้ าทุกสิ่งทุกอย่างมืด ทาให้ ชดั ถ้ าทุกสิ่งทุกอย่างไม่ชดั เป็ นต้ น ดังนัน้ อาจสรุ ปได้ ว่า หลักการของการเน้ น คื อ การตัดสินใจเลือ กข้ อมูลที่สาคัญ ที่สุดของสารนัน้ ๆ ซึ่งในที่นีค้ ือเว็บไซต์ และนามาทาให้ เด่นชัดที่สุด ในกรณี ที่มีส่วนสาคัญ ของข้ อมูลมากกว่าหนึ่ง จะต้ อ งมีการวางแผนการกาหนดลาดับขัน้ การมอง กาหนดส่วนที่ สาคัญ ที่สุด กาหนดส่วนที่สาคัญรองลงมา หลังจากนัน้ ทาการเน้ นความสาคัญ ตามลาดับ ข้ อดีของการใช้ การเน้ นความสาคัญในงานคือ การช่วยให้ ข้อมูลเด่นชัดขึน้ และเอื ้อกับความ สะดวกในการใช้ งานของผู้ใช้ 1.2 ความตรงกันข้ าม แนวทางในการพิจารณาความตรงกันข้ ามคือ (1) การเน้ นความแตกต่างระหว่าง องค์ประกอบทางสายตา และ (2) ความตรงกันข้ ามของ ขนาด สี พื ้นผิว น ้าหนัก (ตัวหนา ตัวบาง) โดยหลักความตรงกันข้ ามเป็ นอีกหนึ่งหนทางที่ง่ายที่สุด และเร็ วที่สุดในการดึง ความสนใจของผู้อ่านมายังสารนัน้ ๆ (ในที่นี ้คือหน้ าเว็บเพจ) หลักความตรงกันข้ ามนามาใช้ ร่ วมกับหลักการเน้ นย ้า )The principle of Emphasis) เพื่อจัดองค์ประกอบของหน้ าเว็บเพจ ไม่ให้ ดเู หมือนกันมากจนเกินไป และใช้ หลักการเน้ นย ้าตามองค์ประกอบทางสายตา เมื่อทุก อย่างบนหน้ าเว็บเพจดูเหมือนกัน เพราะถ้ าขาดการเน้ นย ้าและความตรงกันข้ าม หน้ าเว็บเพจ ก็ดเู หมือนขาดรสชาติ น่าเบื่อ และขาดแบบแผนอันเป็ นระบบที่ชัดเจน และเมื่อทุกอย่างดูมี

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

ความสาคัญเท่ากัน ผู้ดูผ้ ูชมจะทราบถึงองค์ประกอบที่สาคัญและสิ่งแรกที่ต้องมองก่อนได้ อย่างไร ความตรงกันข้ า มเกิ ด ขึน้ เมื่ อ มี ส ององค์ป ระกอบหรื อ มากกว่า แตกต่า งจากอี ก อันหนึ่ง หนทางที่จะเกิ ดความตรงกันข้ ามประกอบ คื อ การเน้ น ความแตกต่างระหว่า ง องค์ประกอบทางสายตา เช่น การวางองค์ประกอบเล็ก ๆ พร้ อมกับองค์ประกอบใหญ่ เช่น ตัวอักษรตัวเล็กกับตัวอักษรตัวใหญ่ หรื อรู ปภาพเล็กกับรู ปภาพใหญ่ การใช้ สีโทนร้ อนกับสี โทนเย็น รู ปทรงเรขาคณิต หรื อพื ้นผิวมองทะลุผ่านพืน้ สีเดียวกัน การใช้ ตวั อักษรที่มีลูกเล่น อยู่ตดิ กับตัวอักษรเรี ยบ ๆ พื ้น ๆ การใช้ ตวั อักษรตัวหนาหรื อมีเส้ นกับตัวอักษรปกติหรื อมีเส้ น โดยการใช้ หลักการเน้ นยา้ ช่วยคุณจัดข้ อ มูลให้ เป็ นระบบระเบียบ และเริ่ มทาให้ เกิดความ แตกต่างตามที่ปรากฏแก่สายตา ในขณะที่การใช้ หลักการตรงกันข้ ามจะเน้ นความแตกต่าง ทางสายตาระหว่างองค์ประกอบทางสายตา สรุ ปได้ ว่า หลั กการเน้ นยา้ และหลักการตรงกัน ข้ ามมักจะใช้ ควบคูก่ นั เสมอ ดังตัวอย่างเว็บไซต์ของมหาวิทยาลัย Notre Dame มีการใช้ หลักความตรงกันข้ าม เพื่อดึงดูดความสนใจและจัดระเบียบทางสายตาในตัวสาร การออกแบบด้ วยความแตกต่าง เพียงเล็กน้ อยมักขาดความหลากหลาย และน่าเบื่อ ดังนัน้ เว็บไซต์ นีจ้ ึงใช้ ความตรงกันข้ าม ของขนาดตัวอักษร (ใหญ่เล็ก) และนา้ หนัก )ตัวหนา กับ ตัวบาง) ความตรงกันข้ ามของสี (Background, frame, และ text) พื ้นผิวขอบ (นูนและเงา) และแม้ แต่ความตรงกันข้ ามพื ้นผิว (การไล่โทนสี Background ฟ้าเข้ มไปอ่อน)

แผนภาพที่ 2.4 การใช้ หลักความตรงข้ ามที่เหมาะสม

แผนภาพที่ 2.5 การใช้ หลักความตรงข้ ามที่ไม่เหมาะสม

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 53

แผนภาพที่ 2.6 College of Arts and Letters - University of Notre Dame (http://al.nd.edu) 1.3 ความสมดุล แนวทางในการพิ จ ารณาความสมดุล คื อ (1) หลี ก เลี่ ย งการปล่ อ ยพื น้ ที่ ใ น หน้ ากระดาษบางส่วนให้ วา่ งเปล่า หรื อใส่อะไรต่าง ๆ ที่มากเกินความจาเป็ น (2) การจัดสมดุล แบบสมมาตร (Symmetrical Balance) และแบบไม่สมมาตร (Asymmetrical Balance) (3) พยายามจัดองค์ประกอบให้ balance (ซ้ าย กลาง ขวา) (4) การเลือกรู ปภาพมาใส่ ให้ ส่งเสริ มข้ อความ (5) การใส่เงาหลังองค์ ประกอบต่าง ๆ จะช่วยให้ งานมีมิติขึน้ ได้ และ (6) การบิดหรื อหมุนภาพหรื อข้ อความต่าง ๆช่วยเพิ่มชีวติ ชีวาให้ กบั งานได้ ทังนี ้ ้ การออกแบบที่สมดุลคือ การที่นา้ หนักทางสายตาขององค์ประกอบภายใน หนึ่งหน้ ามีการจัดวางอย่างเท่ากัน นา้ หนักทางสายตาคือ สิ่งที่แสดงถึงนา้ หนัก ทางกายภาพ ภายในหน้ าหนึ่ง ๆ ยกตัวอย่างเช่น หัวข้ อ ที่เป็ นตัวหนา ก็จะมีนา้ หนักทางสายตามากกว่า ข้ อความที่มีขนาดเล็กในบรรทัดอื่น ๆ หรื อรู ปสีแดงสดก็จะมีน ้าหนักทางสายตาที่มากกว่ารู ป เดียวกันแต่เป็ นสี เทา ในขณะเดียวกัน รู ปภาพที่น่าสนใจต่าง ๆก็จะมีนา้ หนักทางสายตาที่ มากกว่าตัวอักษรล้ วน ๆ เนื่องจากคนเรามีแนวโน้ มที่จะดูรูปภาพก่อนที่จะไปดูที่ตวั อักษร โดย ไม่ว่าจะเป็ นขนาด สี หรื อลวดลายขององค์ประกอบต่าง ๆ ก็ล้วนมีผลต่อการรับรู้ ค่านา้ หนัก ทางสายตาทังสิ ้ ้น www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

ก่อนที่เราจะสามารถจัดสมดุลได้ ดีนนั ้ เราจะต้ องเลือกว่าคา ข้ อความ หรื อรู ปภาพ ใดที่เราควรจะเน้ น และส่วนใดควรจะจัดเอาไว้ ด้วยกัน จัดสิ่งที่เกี่ยวข้ องกันเอาไว้ ด้วยกัน เมื่อ เราได้ จดั ข้ อมูลเอาไว้ ด้วยกันชุดหนึ่งแล้ ว สิ่งที่จะต้ องทาก็คือการสร้ างสมดุลในส่วนอื่น ๆของ หน้ าด้ วยข้ อมูลหรื อองค์ประกอบอื่น ๆ โดยรู ปแบบการจัดวางที่เป็ นแบบสมดุลที่สมมาตรกัน (Symmetrical Balance) จะเป็ นรู ปแบบที่มีองค์ประกอบทางสายตาจะสมมาตรกัน ไม่ว่าจะ เป็ นด้ านข้ างทัง้ สอง หรื อ ด้ านบนและด้ า นล่า ง เราสามารถสร้ างรู ป แบบของการสมดุล ที่ สมมาตรกันได้ โดยการสร้ างเส้ นสมมติ (เส้ น Guide & Grid) ขึ ้นที่กึ่งกลางของหน้ า จากนันจึ ้ ง จัดวางองค์ประกอบที่มีความคล้ ายกันลงไป จัดให้ อยู่กลางหน้ าโดยอาศัยไกด์จากเส้ นสมมติ ที่สร้ างขึ ้น ซึง่ วิธีนี ้เป็ นวิธีการออกแบบง่าย ๆที่นกั ออกแบบมือใหม่นิยมใช้ ซึง่ ก็ไม่ถือว่าผิดแต่ อย่างใด อย่างไรก็ตามการจัดวางหน้ าเช่นนี ้ จะทาให้ ชิ ้นงานของเราดูเป็ นทางการ เรี ยบ และ แข็งจนเกินไป ขาดอารมณ์ของการเคลื่อนไหวและพลังทางสายตา การออกแบบโดยการจัด สมดุลแบบสมมาตรนันเหมาะกั ้ บงานที่ค่อนข้ างทางการ และเรี ยบ ๆ ในทางตรงกันข้ าม หาก เราต้ องการงานที่ดมู ีชีวิตชีวามากขึน้ เราอาจจะต้ องหันไปใช้ การออกแบบโดยการจัดสมดุล แบบไม่สมมาตร (Asymmetrical Balance) โดยในการจัดสมดุลแบบไม่สมมาตรนัน้ คา ประโยคและรู ปภาพต่าง ๆ จะไม่ถูกจัดวางให้ เท่ากันในแต่ละด้ านของเส้ นสมมติตรงจุด แกนกลาง ในการจัดBalanceแบบสมมาตรนัน้ หากตรงมุมล่างซ้ ายของหน้ ามีรูปภาพอยู่ ทาง ด้ านขวาก็จะถูกจัดให้ เกิดการสมดุลขึน้ โดยการวางรู ปภาพขนาดเดียวกันเอาไว้ แต่สาหรั บ การจัดสมดุลแบบไม่สมมาตรแล้ วรู ปภาพนันจะถู ้ กทาให้ เกิดสมดุลขึ ้น โดยการวางตัวอักษร รู ปภาพที่มีขนาดต่าง ๆ กัน การไล่สี ใส่ลวดลาย หรื อการรวมรู ปภาพเล็ก ๆเอาไว้ ด้วยกัน ซึง่ การออกแบบโดยการจัด ให้ เ กิ ด สมดุล แบบไม่ ส มมาตรนี ม้ ี ค วามท้ า ทายเป็ นอย่ า งมาก เนื่องจากขนาด สีสนั และสัดส่วนขององค์ประกอบต่าง ๆจะต้ องถูกจัดวางและมีน ้าหนักทาง สายตาที่เหมาะสม การจัดองค์ประกอบต่าง ๆภายในหน้ าให้ สมดุลกันนัน้ ขึ ้นอยู่กบั การที่เราสามารถ หาขนาดที่เหมาะสมหรื อสัดส่วนขององค์ประกอบภายในหน้ าจะต้ องพอดี เราจะต้ องตัดสินใจ ให้ ได้ ว่าส่วนใดควรจะถูกเน้ นเพื่อให้ ร้ ู ว่าเป็ นส่วนที่สาคัญที่สุด แต่การที่เราจะตัดสินใจได้ ว่า แต่ละส่วนมีขนาดพอดีแล้ วหรื อไม่นนั ้ ก็ถือเป็ นเรื่ องยาก ซึ่งในเรื่ องนีก้ ารฝึ กฝนเท่านันจึ ้ งจะ ช่วยเราได้ สิ่งที่เราควรฝึ กบ่อ ย ๆ ให้ ชานาญก็คือ ในเรื่ อ งของการพิจารณาการจัดวางของ องค์ประกอบทางสายตาในแต่ละหน้ า

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 55

สาหรับในเรื่ องการออกแบบนัน้ ไม่มีคาว่าผิดหรื อถูก มีเพียงแค่หนทางที่ดีกว่าหรื อ แย่กว่าเท่านัน้ ลองทดลองทาดู และสนุกกับมัน พยายามสังเกตดูว่าคนอื่ น ๆออกแบบกัน อย่างไรและลองนาแนวคิดบางอย่างมาใช้ กบั งานในชิน้ ต่อ ๆไป อย่าลอกเลียนความคิดของ คนอื่นมาทังหมด ้ แต่ให้ นาแนวความคิดที่ดีที่สุดของเขามาดัดแปลงใช้ ในวิธีของเราเอง อย่า ผิดหวังหากว่างานของเราดูไม่สวยงามอย่างที่คิดไว้ เราสามารถปรับปรุ งให้ ดีขึ ้นได้ ในงานชิ ้น ต่อ ไป (การเยี่ ยมชมเว็บไซต์ข องบริ ษัทใหญ่ ๆ ที่มีชื่อเสี ยงในการออกแบบ เช่น APPLE, ADOBE เป็ นต้ น) ข้ อแนะนาในการนาหลักการนี ้ไปใช้ คือหากเรายังไม่ชานาญพอ พยามยาม จัดวางองค์ประกอบต่าง ๆให้ อยู่ในแนวเดียวกัน การจัดวางตัวอักษรต่าง ๆไว้ ในแนวเดียวกัน เช่ น การวางชิ ด ด้ า นซ้ า ย จัด กึ่ ง กลาง หรื อ จัด วางชิ ด ด้ า นขวา จ าท าให้ เ กิ ด ความสมดุล มากกว่าการที่จดั อักษรแบบกระจัดกระจายไม่เป็ นแนวเดียวกัน การเลือกรู ปภาพต่าง ๆมาใส่ ในแต่ละหน้ าควรจะช่วยส่งเสริ มข้ อความ อย่าให้ รูปภาพมาบิดเบือนข้ อความของเรา และ การใส่เงาหลังองค์ประกอบต่าง ๆ จะช่วยทาให้ งานของเราดูมีมิติขึ ้นได้ และการบิดหรื อหมุน รู ปภาพหรื อข้ อความต่าง ๆ ไม่ให้ อยู่ในแนวตังหรื ้ อนอนเพียงอย่างเดียวก็สามารถช่วยสร้ าง ความมี ชีวิตชี วาให้ กับงานของเราได้ ด้วย ดังตัวอย่างเว็บไซต์ข องมหาวิทยาลัย Miami มี ลักษณะกึง่ ทางการและไม่เป็ นทางการ

แผนภาพที่ 2.7 ความสมดุลที่เหมาะสม

แผนภาพที่ 2.8 ความสมดุลที่ไม่เหมาะสม www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 2.9 College of Arts and Sciences - University of Miami (http://www.as.miami.edu) 1.4 การวางแนว/การจัดเป็ นเส้ นตรง แนวทางในการพิ จ ารณาการวางแนว/การจัด เป็ นเส้ น ตรงคื อ (1) การจัด ส่วนประกอบต่าง ๆ ของหน้ าเว็บเพจ ให้ เรี ยงอยู่ในระนาบเดียวกันเพื่อให้ งานดูเป็ นระเบียบ (2) การวางตาแหน่งแบบตาราง (Grid) เช่นข้ อความในหน้ าหนังสือพิมพ์ (3) การจัดตาแหน่ง ข้ อความ (Text Alignment) มี 4 แบบ ได้ แก่ Flush Left, Flush Right, Centered และ Justified และ (4) แบบพิเศษอื่น ๆ เช่น Runaround (ข้ อความล้ อมรู ปภาพ) และ Concrete ข้ อความมีรูปแบบโดยรวมเป็ นลักษณะต่าง ๆ เพื่อเพิ่มความน่าสนใจ ซึง่ การจัดแนวบรรทัดคือ การจัดส่วนประกอบต่าง ๆ ของหน้ ากระดาษให้ เรี ยงอยู่ใน ระนาบเดียวกันเพื่อให้ งานดูเป็ นระเบียบ สะอาดตา และก่อนที่คุณจะเริ่ มออกแบบสิ่งแรกที่ คุณควรกาหนดในหน้ ากระดาษของคุณก็คือ เส้ นตาราง หรื อ กริ ด (Grid) โดยประโยชน์ของ เส้ นกริ ดจะช่วยให้ การทางานของคุณง่ายขึ ้น โดยคุณยังสามารถกาหนดความกว้ างของขอบ และขนาดคอลัมน์ ไว้ ล่ วงหน้ าสาหรั บ เพจสอดคล้ อ งกัน โดยในการออกแบบเส้ นกริ ด เรา สามารถออกแบบโครงสร้ างของเส้ นกริ ด ไว้ ห ลาย ๆ แบบ (Template) และจัด เก็ บเอาไว้ เพราะในการทางานครัง้ ต่อไปเราสามารถนาโครงสร้ างที่เราเก็บไว้ นนกลั ั ้ บมาใช้ ได้

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 57

การจัด ต าแหน่ ง ข้ อ ความ (Text Alignment) บางครั ง้ เราจะเรี ย กว่า Type Composition หรื อ Text Composition การจัดตาแหน่งข้ อความจะช่วยให้ หน้ ากระดาษของ คุณที่มีตวั อักษรมากมายนัน้ อ่านได้ ง่ายขึ ้น และ/หรื อมีความน่าสนใจมากยิ่งขึ ้น โดยรู ปแบบ ของการจัดตาแหน่งข้ อความมีอยู่ด้วยกัน 2 ประเภท คือ 1. Basic Text Alignments แบ่งออกเป็ น 4 แบบ คือ (1) Flush left บางครัง้ เรี ยกว่า Flush left / align left )แบบชิดซ้ าย) (2) Flush right/align right )แบบชิดขวา) (3) Centered )แบบศูนย์กลาง) และ (4) Justified บางครัง้ เรี ยกว่า flush-right/flush-left )แบบปรับซ้ ายขวา ตรง) 2. Advanced Text Alignments แบ่งออกเป็ น 3 แบบ คือ (1) Runaround )แบบ ล้ อมรอบ) (2) Asymmetric )แบบอดุลภาค) และ (3) Concrete )แบบรู ปธรรม)

แผนภาพที่ 2.10 การวางแนวที่เหมาะสม

แผนภาพที่ 2.11 การวางแนวที่ไม่เหมาะสม

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 2.12 แสดงตัวอย่าง Basic and Advanced text alignments (ที่มา: Graham, 2002) 1.5 การทาซา้ แนวทางในการพิจารณาการทาซ ้าคือ (1) การจัดองค์ประกอบหลาย ๆ ชิน้ โดย กาหนดตาแหน่งทาให้ เกิดช่องว่างเป็ นช่วง ๆ อย่างมีการวางแผนล่วงหน้ า (2) การทาให้ เกิด เอกภาพ (Unity) (3) การทาให้ น่าอ่าน ตื่นตา ตื่นใจ และ (4) องค์ประกอบของการทาซ ้า เช่น เส้ น รู ปทรง รู ปภาพ สี พื ้นผิว การทาซา้ เป็ นการจัดวางองค์ประกอบหลาย ๆ ชิน้ โดยกาหนดตาแหน่งให้ เกิดมี ช่องว่างเป็ นช่วง ๆ ตอน ๆ อย่างมีการวางแผนล่วงหน้ า จะทาให้ เกิดจังหวะและลีลาขึ ้น และ หากว่าองค์ประกอบหลาย ๆ ชิ ้นนันมี ้ ลกั ษณะซ ้ากันหรื อใกล้ เคียงกัน ก็จะยิ่งเป็ นการเน้ นให้ เกิดจังหวะและลีลา ได้ ชดั เจนยิ่งขึ ้น จังหวะและลีลาลักษณะนี ้จะก่อให้ เกิดความรู้ สึกที่ตื่นเต้ น ดูเคลื่อนไหวและมีพลัง ทังยั ้ งทาให้ ดเู ป็ นหนึ่งเดียวกันอีกด้ วย อาจทาได้ โดยการใช้ ตวั อักษรที่ เป็ นฟอนต์ เ ดี ย วกั น / มี ตั ว อั ก ษรที่ มี ค วามสั ม พั น ธ์ กั น กั บ เนื อ้ หา การใช้ รู ปภาพที่ มี ความสัมพันธ์กนั กับเนื ้อหา การใช้ รูปภาพให้ มีความเป็ นไปในทิศทางเดียวกัน การทาให้ ภาพ พื ้นหลังไม่วา่ งจนเกินไป การใช้ เส้ น เป็ นต้ น

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 59

หลักการใช้ การทาซ ้า อาจหมายรวมถึงความเป็ นเอกภาพ (Unity) โดยมีความเป็ น อันหนึง่ อันเดียวกัน ซึง่ ในการจัดทาเลย์เอาต์หมายถึงการนาเอาองค์ประกอบที่แตกต่างกันมา วางไว้ ใน พื ้นที่หน้ า กระดาษเดียวกันได้ อย่างกลมกลืน ทาหน้ าที่สอดคล้ องและส่งเสริ มกัน และกันในการสื่ อ สารความคิดรวบยอดและบุคลิกภาพของสื่ อ นัน้ ๆ การสร้ างเอกภาพนี ้ สามารถทาได้ หลายวิธี เช่น 1. การเลื อ กใช้ อ งค์ป ระกอบอย่างสม่ าเสมอ เช่น การเลื อ กใช้ แ บบตัวอักษร เดียวกัน การเลือกใช้ ภาพขาว ดาทังหมด ้ เป็ นต้ น 2. การสร้ างความต่อเนื่องกันให้ องค์ประกอบ เช่น การจัดให้ พาดหัววางทับลง บนภาพ การใช้ ตวั อักษรที่เป็ นข้ อความ ล้ อตามทรวดทรง ของภาพ เป็ นต้ น 3. การเว้ นพืน้ ที่ว่างรอบองค์ประกอบทังหมด ้ ซึ่งจะทาให้ พื ้นที่ว่างนัน้ ทาหน้ าที่ เหมื อ นกรอบสี ข าวล้ อมรอบองค์ ป ระกอบทัง้ หมดไว้ ภ ายในช่ ว ยให้ อ งค์ ประกอบทังหมดดู ้ เหมือนว่าอยู่กนั อย่างเป็ นกลุ่มเป็ นก้ อน สรุ ปว่าการทาซ ้า เป็ นหลักการออกแบบสารที่ต้องการส่งสารไปถึงผู้รับได้ อย่างมี ประสิทธิภาพที่สดุ โดยการใช้ การทาซ ้า ซึง่ การทาซ ้าที่ดีจะทาให้ หน้ าเว็บเพจน่าอ่าน น่าตื่นตา ตื่นใจ ดูเรี ยบร้ อย การทาซ ้ามีความสามารถที่จะช่วยทาให้ ส่วนประกอบต่าง ๆของหน้ ามาอยู่ ร่ วมกัน ทาให้ ดูแ ล้ วมีความสัมพันธ์ ร วมเป็ นหนึ่ง มีความเกี่ ยวข้ อ ง เกี่ยวเนื่อ งกัน หลักการ การทาซ ้าจะมีประสิทธิภาพมากขึ ้นหากใช้ ร่วมกันกับหลักการอื่น ๆ เช่น หลักการความสมดุล การเน้ น เป็ นต้ น ซึ่งข้ อ ควรระวังการทาซา้ ที่มากเกินไป จะทาให้ ดูร กตาได้ จึงควรทาให้ พอเหมาะพอดี

แผนภาพที่ 2.13 การทาซ ้าที่เหมาะสม

แผนภาพที่ 2.14 การทาซ ้าที่ไม่เหมาะสม www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

1.6 การเลือกใช้ สี แนวทางในการเลือกใช้ สีคือ (1) เลือกใช้ สีที่เหมาะสมเพื่อให้ เกิดความน่าสนใจ ดึงดูด สื่อความหมายได้ ชดั เจน เนื่องจากว่า สีมีพลังเกี่ยวกับการรับรู้ การเลือกสีเพื่อใช้ กบั สื่อ ต่าง ๆจะช่วยทาให้ เกิ ดความน่ าสนใจ ดึงดูดและสามารถสื่ อ ความหมายได้ อ ย่ างชัดเจน สาหรับคนที่ทางานเกี่ยวกับการใช้ สีนนั ้ จะต้ องมีหลักในการเลือกสีที่ดี เพื่อให้ งานออกมาลง ตัว ซึง่ ถ้ าหากขาดหลักในการเลือกใช้ สีแล้ ว ก็จะทาให้ ดไู ม่ส อดคล้ องกับการออกแบบผลงาน หรื อ ดูซับซ้ อ น สื่ อ ความหมายได้ ไ ม่ชัดเจน ระหว่างที่อ ยู่ในขัน้ ตอนของการเลื อ กสี ที่จะใช้ จะต้ องพยายามเลือ กสี เพื่ อให้ งานออกมาดูดี จากผู้ที่ศึกษาเรื่ องนี ้ กล่าวว่า การใช้ สีพืน้ ๆ ธรรมดา ๆ ก็สามารถช่วยดึงดูดความสนใจจากผู้อ่านให้ สนใจข้ อ ความนัน้ ๆ ได้ โดยจาก การทดสอบเรื่ องสีพบว่าหน้ ากระดาษที่มีสีจะช่วยสร้ างความสนใจได้ มากกว่าที่ไม่มีสี อีกหนึ่ง วิธีที่จะสร้ างความสนใจให้ กับงานได้ นนั ้ คือ การเพิ่มสีสันให้ หน้ ากระดาษ เพราะสีมีผลต่อ การรั บรู้ และช่วยในการสื่ อความหมายต่าง ๆบนหน้ ากระดาษ โดยการเลือกใช้ สีที่ ผิด อาจ ส่ง ผลกระทบต่อ การสื่ อ ความหมายที่ผิ ดตามไปด้ วย โดยสี ต่า ง ๆ นัน้ สามารถถ่า ยทอด อารมณ์ ความรู้ สึกได้ ต่างกัน ดังเช่น สีแดง เป็ นสีที่ให้ ความรู้ สึกร้ อนรุ นแรง กระตุ้น ท้ าทาย ตื่นเต้ น เร้ าใจ มีพลัง ความอุดมสมบูรณ์ ความมัง่ คัง่ แดงเข้ มเลือดนก ให้ ความรู้ สึก น่ ากลัว อันตราย น่ าขยะแขยง ในขณะที่ สีแ ดงสว่า ง ๆก็จ ะทาให้ นึก ถึงความรั ก สี เ หลื อ งจะให้ ความรู้ สกึ แจ่มใส ความสดใสร่ าเริ ง สีทอง แสดงถึงความหรู หรา และสีเงิน แสดงถึงเทคโนโลยี สมัยใหม่ ดังนัน้ การออกแบบเว็บไซต์และการเลือกใช้ สีนนจึ ั ้ งควรคานึงถึงกลุ่มเป้าหมายและ วัตถุประสงค์ของเว็บไซต์ด้วย เมื่อพิจารณาจากโทนสีร้อน (แดง ม่วงแกมแดง ส้ ม เหลือง และ เขียวอมเหลือง) สีเหล่านี ้จะสร้ างความรู้ สึกอบอุ่น (ต้ อนรับผู้เข้ าชม) สะดวกสบาย และดึงดูด ความสนใจ ในทางตรงกันข้ าม โทนสีเย็น (ม่วง นา้ เงิน ฟ้า นา้ เงินแกมเขียว และเขียว) สี เหล่านี ้จะสร้ างความรู้ สกึ สบาย สุภาพเรี ยบร้ อย มีความชานาญ (Professional look) แต่อาจ ขาดความดึงดูดความสนใจ และรู้ สกึ หดหู่ ซึมเศร้ า

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 61

สีฟ้า

สีขาว

แผนภาพที่ 2.15 การใช้ สีที่เหมาะสม

สีเหลืองสด

แผนภาพที่ 2.16 การใช้ สีที่ไม่เหมาะสม

แผนภาพที่ 2.17 เว็บไซต์โทนสีร้อน )http://www.seattleu.edu)

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 2.18 เว็บไซต์โทนสีเย็น (http://www.umich.edu) นอกเหนือจากการใช้ สีช่วยในการออกแบบแล้ ว สียังช่วยส่งเสริ มเอกลักษณ์ ของ องค์กรหรื อหน่วยงานนันได้ ้ โดยการใช้ สีขององค์กรมาเป็ นโทนสีหลักของเว็บไซต์ เว็บไซต์ของ จุฬาลงกรณ์ มหาวิทยาลัย ใช้ สีชมพูเป็ นหลักเพื่ อ คงเอกลักษณ์ ข องสี ประจามหาวิทยาลัย เช่นเดียวกับมหาวิทยาลัยธรรมศาสตร์ ที่ใช้ สีแดง-เหลืองซึง่ เป็ นสีประจามหาวิทยาลัยเป็ นหลัก

แผนภาพที่ 2.19 เว็บไซต์ของจุฬาลงกรณ์มหาวิทยาลัย

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 63

แผนภาพที่ 2.20 เว็บไซต์ของมหาวิทยาลัยธรรมศาสตร์ สีและคอมพิวเตอร์ -- สีมีความสัมพันธ์กบั คอมพิวเตอร์ เนื่องจากการออกแบบ บนหน้ าคอมพิวเตอร์ สีที่ปรากฏให้ เห็นบนหน้ าจอเป็ นการผสมสีโดยใช้ ระบบ RGB ซึ่งเป็ น ระบบที่ใช้ กนั ทัว่ ไปในจอคอมพิวเตอร์ จะทางานได้ ดีและมองดูเป็ นธรรมชาติ ประกอบด้ วย 3 สี คือ แดง เขียว และน ้าเงิน ซึง่ แตกต่างจากการออกแบบสาหรั บงานพิมพ์ตา่ ง ๆ ซึง่ ใช้ สีระบบ CMYK ประกอบด้ วย cyan )สีฟ้า) magenta )สีแดง) yellow )สีเหลือง) black )สีดา) เทคนิ ค ของการใช้ สี ค วรใช้ สี ที่ ดึ ง ดู ด ความสนใจเพื่ อ สร้ างความส าคั ญ ให้ กั บ ข้ อความหรื อภาพนั น้ การเลื อ กสี ที่ เ ข้ ากั บ หั ว ข้ อในการออกแบบงานชิ น้ นั น้ การดึงความสนใจจากผู้อ่าน ให้ เห็นความสาคัญของข้ อมูลบนหน้ ากระดาษ สามารถทาได้ โดยใช้ สีที่ส ว่าง ในกรณี ที่ง านที่ใ ช้ กระดาษหลาย ๆหน้ า เช่น เว็บไซต์ ควรใช้ สีที่ใช้ แ ต่ล ะ คอลัมน์เป็ นสีเดิม เช่น ใช้ Banner เป็ นสีเดียวกัน การเลือกใช้ ภาพสีสว่างเป็ นภาพพืน้ หลัง เพื่อ เพิ่มความน่าสนใจให้ กับชิน้ งาน สาหรั บผู้ที่เริ่ มต้ น ควรศึกษาการเลือ กใช้ สีที่อ ยู่ในธี ม (theme) เดียวกัน เช่น การศึกษา website ของ Adobe Kuler (http://kuler.adobe.com) สาหรั บการเลื อ กใช้ สีสาหรั บเว็บไซต์ VisiBone Web Design Color References (http://www.visibone.com/color) เป็ นเว็บรู ปแบบสีที่ช่วยออกแบบเว็บไซต์ Colourlovers Website (http://www.colourlovers.com/about) ส าหรั บ ช่ ว ยในการไล่ เ ฉดสี ใ น การออกแบบ และสุดท้ ายคือการเรี ยนรู้ จากผู้อื่นว่ามีวธิ ีการใช้ สีในงานของเขาอย่างไร www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 2.21 Adobe Kuler (http://kuler.adobe.com) 1.7 การเลือกใช้ ภาพ มีสุภาษิ ตจีนบทหนึ่งได้ กล่าวไว้ ว่า “A picture is worth a thousand words” (รู ปภาพ 1 รู ป สามารถใช้ แทนคาได้ หลายพันคา) เพราะในขณะเดียวกันที่ผ้ ชู มเว็บไซต์ได้ รับ ข้ อมูลข่าวสารจากสื่อต่าง ๆ ซึ่งวิธีที่ดีที่สุดที่ทาให้ ผ้ ชู มเว็บไซต์รับสารได้ รวดเร็ วที่สุดนันก็ ้ คือ การใช้ รูปภาพ รู ปภาพเป็ นองค์ประกอบที่สาคัญมากในการออกแบบและจัดหน้ าเว็บเพจ เพราะรู ปภาพจะสร้ างความอยากรู้ อยากเห็น ปลุก เร้ าอารมณ์ ใ ห้ เกิดแก่ผ้ ูรั บ สาร และใน ขณะเดียวกันการเลือกรู ปภาพที่ไม่เหมาะสมก็สามารถที่จะสร้ างความสับสน ความราคาญ ให้ แก่ผ้ รู ั บสารได้ เช่นกัน รู ปภาพที่นามาใช้ มีอิทธิพลต่อความรู้ สึกและรู ปแบบที่มีต่อหน้ าเว็บ เพจนัน้ ๆ รู ปภาพช่วยให้ การสื่อสารมีประสิทธิภาพได้ ในกรณีที่ข้อความไม่สามารถอธิบายได้ เพียงพอ รู ปภาพที่นามาใช้ จะขึ ้นอยู่กบั เนื ้อหาหลัก และความสามารถในการหารู ปภาพนัน้ ๆ มาได้ การเลือกรู ปภาพจะต้ องเลือกรู ปภาพให้ เหมาะสมกับข้ อมูลที่สื่อไป กฎพื ้นฐานในการใช้ รู ปภาพ ดังนี ้ (1) อย่าวางเรี ยงหรื อ อัดภาพหลายภาพเข้ าด้ วยกันเพราะอาจจะขัดขวาง กระบวนการรั บรู้ ของผู้รับสารได้ ควรเว้ นที่ว่างรอบภาพประกอบ (2) ควรเพิ่มความหลาก หลายและความแตกต่างของหน้ าสิ่งพิมพ์ด้วยการใช้ ภาพประกอบหลายขนาด และ (3) ถ้ า เป็ นข้ อ ความที่ก ากวมหรื อ เป็ นประโยคที่มี ใจความคลุม เครื อ ควรใช้ รู ป ภาพที่ สื่อ ถึง สิ่ง ที่ ข้ อความนัน้ ๆต้ องการบอก ซึง่ จะช่วยให้ ผ้ รู ับสารสามารถเดาได้ อย่างสมเหตุสมผล

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 65

ประเด็นที่สาคัญนอกจากการเลือกรู ปภาพให้ เหมาะสมกับ Concept ของเว็บไซต์ที่ ได้ กล่าวมาแล้ วคือ การเลือกใช้ รูปแบบกราฟิ กที่มีคณ ุ สมบัติ ที่เหมาะสม ไม่ว่าจะเป็ นในเรื่ อง ของการบีบอัดข้ อมูล ขนาดของไฟล์ เป็ นต้ น รู ปแบบของกราฟิ กที่นิยมมักจะอยู่ในรู ปแบบของ GIF และ JPEG เพราะเป็ นรู ปแบบที่บราวเซอร์ แทบทุกชนิดสนับสนุน ในขณะที่รูปแบบไฟล์ PNG (Portable Network Graphic) ที่มีคณ ุ สมบัตเิ ด่นอยู่หลายประการ เช่นระบบบีบอัดไฟล์ ที่มีคณ ุ ภาพสูงและขนาดไฟล์ที่เล็ก แต่ยงั มีข้อจากัดในเรื่ องของบราวเซอร์ สนับสนุนอยู่จึงไม่ เป็ นที่นิยม รู ปแบบภาพกราฟิ กประเภท GIF (Graphic Interchange Format) เป็ นรู ปแบบที่ ได้ รับความนิยมเนื่องจากเป็ นไฟล์กราฟิ กชนิดแรกที่ได้ รับการสนับสนุนจากเว็บบราวเซอร์ ไฟล์ประเภท GIF นี ้มีข้อมูลสีขนาด 8 บิต จึงทาให้ มีจานวนสีได้ มากที่สุด 256 สีและมีการบีบ อัดข้ อ มูลตามแนวของพิกเซล คือ ถ้ ามีจุดสี หลายจุดก็จะจัดเก็บเพียงแค่จุดเดียว ดังนัน้ จึง เหมาะสาหรับภาพกราฟิ กที่ประกอบด้ วยสีพื ้น ๆ และไม่ซบั ซ้ อน รู ปแบบภาพกราฟิ กประเภท JPEG (Joint Photographic Experts) เป็ นรู ปแบบที่ได้ รับความนิยมเป็ นอันดับสอง ไฟล์ ประเภทนีม้ ีข้อมูลสีขนาด 24 บิต จึงทาให้ มีจานวนสีได้ มากที่สุด 16.7 ล้ านสี ส่วนระบบ การบีบอัดมีลกั ษณะที่สูญเสีย (lossy) บางส่วนไปในกระบวนการบีบอัด (compressed) แต่ มักจะเห็นความแตกต่างได้ น้อยมากนอกจากจะนารู ปไปขยายใหญ่ ดังนันไฟล์ ้ ประเภท JPEG จึง เหมาะส าหรั บ ภาพถ่ าย และภาพกราฟิ กที่มี การไล่ร ะดับสี อ ย่ างละเอี ยด เพราะจะได้ คุณ ภาพรู ปที่ดีกว่าและยังมี ข นาดไฟล์ที่เล็กกว่าไฟล์ GIF มาก อย่างไรก็ตาม JPEG ไม่ เหมาะกับกราฟิ กที่ประกอบด้ วยสีพื ้นหรื อลายเส้ นเพราะจะทาให้ เกิดจุดด่า งของสีและทาให้ ไฟล์มีขนาดใหญ่กว่า GIF มาก ระบบการวัดขนาดของรู ปภาพในเว็บเพจคือพิกเซล (Pixel) โดยพิกเซลในรู ปภาพ จะจับ คู่แ บบหนึ่งต่อ หนึ่งกับพิก เซลตามความละเอี ยดของหน้ าจอ ดังนัน้ ในกระบวนการ ออกแบบกราฟิ กและรู ปภาพต่าง ๆ จึงควรใช้ ขนาดเป็ นพิกเซลไว้ เสมอ ซึ่งจะมีประโยชน์ใน การเปรี ย บเที ย บขนาดของกราฟิ กกั บ ขนาดของวิ น โดว์ ข องบราวเซอร์ และขนาดของ องค์ประกอบอื่น ๆ ในหน้ าจออีกด้ วย ระบบการวัดความละเอียดของรู ปภาพคือ pixel per inch (ppi) แต่บางครัง้ อาจใช้ ระบบการวัดที่ใช้ กับภาพพิมพ์ (dot per inch -- dpi) ทดแทนได้ โดยความละเอียดของ รู ปภาพในเว็บไซต์ควรมี ความละเอียดแค่ 72 ppi ก็เพียงพอเนื่ องจากจอมอนิเตอร์ ของ ผู้ใช้ ส่วนใหญ่ มีความละเอี ยดต่ากว่า 72 ppi ดังนัน้ แม้ ว่าภาพมี ความละเอี ยดสูงกว่า นี ้ www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

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

แผนภาพที่ 2.22 การเลือกใช้ ภาพประกอบที่เหมาะสม

แผนภาพที่ 2.23 การเลือกใช้ ภาพประกอบที่ไม่เหมาะสม

2. หลักการเพิ่มเติมสาหรับการออกแบบเว็บไซต์ ทางการศึกษา จากหลักการออกแบบข้ างต้ น จะเห็นได้ ว่าเป็ นหลักการพื ้นฐานในการออกแบบสื่อ ต่า ง ๆ ที่ เ กี่ ย วข้ อ งกับ การเรี ย นการสอนทัง้ นี อ้ าจกล่ า วได้ ว่า หลัก ในการออกแบบต่า ง ๆ เหล่านัน้ จึงเป็ นพืน้ ฐานสาคัญในการออกแบบเว็บเพจ )Web page design principles) สาหรั บอีเลิร์นนิง โดยหลักในการออกแบบเว็บเพจควรพิจารณาหลักการต่าง ๆ เหล่านีเ้ ป็ น พิเศษ กล่าวคือ 2.1 ความเรียบง่ าย การนาเสนอข้ อมูลเฉพาะที่จาเป็ น ยึดหลักความเรี ยบง่าย ไม่มีสิ่งรบกวนสายตา หรื ออาจสร้ างความราคาญให้ แก่ผ้ ใู ช้ (distraction) เช่น animation ต่าง ๆ ซึง่ อาจดูสวยงาม และน่าสนใจในตอนแรก แต่เมื่ อ ดูบ่อ ย ๆ อาจสร้ างความร าคาญได้ ตัวอย่า งเว็บไซต์ ที่ มี รู ปแบบเรี ยบง่าย เช่น เว็บไซต์ของ University of Hawaii

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 67

แผนภาพที่ 2.24 ความเรี ยบง่ายที่เหมาะสม

แผนภาพที่ 2.25 ความเรี ยบง่ายที่ไม่เหมาะสม

แผนภาพที่ 2.26 University of Hawaii at Hilo (http://www.uhh.hawaii.edu)

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

2.2 ความสม่าเสมอ โดยการใช้ รูปแบบ ระบบการนาทาง (Navigation) และโทนสี เดียวกันตลอดทัง้ เว็บไซต์ เพื่อให้ ผ้ ูเข้ าเยี่ยมชมรู้ สึกว่าอยู่ในสถานที่เดิมตลอดการเยี่ยมชมเว็บไซต์นนั ้ ๆ เช่น เว็บไซต์ของ University of Michigan ที่ใช้ สีโทน (theme) เดียวกัน ในทุก ๆ หน้ าเว็บเพจ

ทุกหน้ าใช้ โทนสีเดียวกัน

แต่ละหน้ าใช้ โทนสีตา่ งกัน

แผนภาพที่ 2.27 ความสม่าเสมอที่เหมาะสม

แผนภาพที่ 2.28 ความสม่าเสมอที่ไม่เหมาะสม

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 69

แผนภาพที่ 2.29 หน้ า Homepage ของ University of Michigan (http://www.umich.edu)

แผนภาพที่ 2.30 หน้ า webpage ของหน้ า Prospective Students, University of Michigan

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

2.3 ระบบนาทาง ระบบนาทางที่ใช้ งานง่าย (User-Friendly Navigation) มีความสาคัญมากของ เว็บไซต์ ที่จ ะออกแบบให้ ผ้ ูใช้ งานง่ ายและสะดวก ควรมี รู ปแบบและล าดับของรายการที่ สม่าเสมอ เช่น การวางในตาแหน่งเดียวกันในทุก ๆ หน้ า อีกทังถ้ ้ าเลือกใช้ กราฟิ ก ความเป็ น กราฟิ กที่สื่อความหมาย และสื่อความหมายร่ วมกับคาอธิบายที่ชดั เจน เว็บไซต์บางที่ได้ เพิ่ม ระบบ Navigation ที่เป็ นตัวอักษรไว้ ตอนท้ ายของหน้ าเพื่อช่วยอานวยความสะดวกกับผู้ที่สงั่ บราวเซอร์ ไม่ให้ แสดงผลกราฟิ กเพื่อความสะดวกรวดเร็ วในการดูด้วย เช่ นเว็บไซต์ของ South Nazarene University มี Navigation ที่สาคัญอยู่ที่ส่วนซ้ ายบน และมี Quick Links อยู่ใน แถบด้ านซ้ าย ระบบนาทางอยูใ่ นตาแหน่งเดียวกันทุกหน้ า

ระบบนาทางอยูใ่ นตาแหน่งต่างกัน

แผนภาพที่ 2.31 ระบบนาทางที่เหมาะสม

แผนภาพที่ 2.32 ระบบนาทางที่ไม่เหมาะสม

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 71

แผนภาพที่ 2.33 South Nazarene University (http://www.snu.edu) 2.4 คุณภาพในการออกแบบ เว็บจะมีคณ ุ ภาพ และน่าเชื่อถือได้ นนั ้ ควรให้ ความสาคัญกับการออกแบบอย่าง มาก เช่นเดียวกับสื่อประเภทอื่น ๆ ที่ต้องออกแบบและเรี ยบเรี ยงเนื ้อหาอย่างรอบคอบ เว็บที่ ทาขึ ้นอย่างลวก ไม่มีมาตรฐานการออกแบบและการจัดระบบข้ อมูลนัน้ เมื่อมีข้อมูลเพิ่มขึ ้น เรื่ อย ๆ ก็จะเกิดปั ญหาและไม่สามารถสร้ างความเชื่อถือจากผู้ใช้ ได้ 2.5 การออกแบบหน้ าจอ การออกแบบหน้ าจอที่สมดุลกันระหว่างเมนู, รายการเลือก, เนื ้อหา, ภาพประกอบ จะช่วยให้ ผ้ ใู ช้ สนใจเนื ้อหาได้ มาก โดยมากมักจะแบ่งจอภาพเป็ นส่วน ๆ ได้ แก่ ส่วนแสดงหัว เรื่ อ ง, ส่วนแสดงข้ อ ความประชาสัม พัน ธ์ , ส่ วนแสดงเนื อ้ หา, ส่ว นแสดงภาพประกอบ, ส่วนประกอบเสริ มอื่น ๆ (โดยเฉพาะเว็บไซต์สาหรับ E-Learning) เช่น ส่วนควบคุมบทเรี ยน, ส่วน log-in, หมายเลขเฟรมลาดับเนื ้อหา เป็ นต้ น

www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 2.34 การออกแบบหน้ าจอที่เหมาะสม

แผนภาพที่ 2.35 การออกแบบหน้ าจอที่ไม่เหมาะสม

2.6 ความละเอียดของจอภาพ ปั จจุบนั ความละเอียดของจอภาพที่นิยมใช้ จะมีสองค่า คือ 800x600 pixel และ 1024 x 768 pixel ดังนันควรพิ ้ จารณาถึงความละเอียดที่จะดีที่สุด เพราะหากออกแบบ หน้ าจอ สาหรั บจอภาพ 1024 x 768 pixel แต่นามาใช้ กบั จอภาพ 800x600 pixel จะ ทาให้ เนือ้ หาตกขอบจอได้ แต่ถ้าหากจัดทาด้ วยค่า 800x600 pixel หากนาเสนอผ่านจอ 1024 x 768 pixel จะปรากฏพื ้นที่วา่ งรอบเฟรมเนื ้อหาที่นาเสนอ

แผนภาพที่ 2.36 ความละเอียดของจอภาพที่เหมาะสม

แผนภาพที่ 2.37 ความละเอียดของจอภาพที่ไม่เหมาะสม

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา 73

2.7 การนาเสนอเนือ้ หา การนาเสนอเนื ้อหาที่เป็ นข้ อความ สิ่งที่ควรคานึงถึงคือ ฟอนต์ที่นามาใช้ งาน ควร เป็ นฟอนต์มาตรฐาน (ถ้ าเป็ นภาษาอังกฤษ นิยมใช้ Sans Serifs เช่น Arial Cordia News และหลีกเลี่ยงตัวอักษรแบบ Serifs เช่น Times New Roman) และตัวอักษรควรมีรูปแบบ ที่ ชัด เจน มี ก ารก าหนดขนาดที่ เ หมาะสมกั บ กลุ่ ม เป้ าหมาย น าเสนอด้ วยข้ อความน า แบบสัน้ ๆ เพื่ อดึงเข้ าเนือ้ หาจริ ง หลีกเลี่ยงการนาเสนอแบบจัดกึ่งกลาง ควรนาเสนอภาพ พอประมาณ ไม่ ม ากหรื อ น้ อ ยเกิน ไป จุด เน้ นให้ ใ ช้ ก ารตีก รอบสี หรื อ เน้ น ด้ ว ยสี ตัว อัก ษร ด้ วยสีโทนร้ อน

แผนภาพที่ 2.38 การนาเสนอเนื ้อหาที่เหมาะสม

แผนภาพที่ 2.39 การนาเสนอเนื ้อหาที่ไม่เหมาะสม

บทสรุป การออกแบบเว็ บ ไซต์ ส าหรั บ การเรี ยนการสอนนั น้ นอกจากการค านึ ง ถึ ง กลุ่มเป้าหมาย ความสะดวกในการใช้ งานของผู้ใช้ แล้ วนัน้ ความสวยงามและสุนทรี ยภาพ ของเว็ บ ไซต์ ก็ มี ค วามส าคัญ เช่ น กัน ดัง นัน้ หลัก การออกแบบ (Design Principles) จึง เข้ ามามี บ ทบาทส าคั ญ ที่ ผ้ ู ออกแบบเว็ บ ไซต์ ค วรพิ จ ารณา กล่ า วคื อ (1) การเน้ น ข้ อความสาคัญ (Emphasis) (2) ความตรงกันข้ าม (Contrast) (3) ความสมดุล (Balance) www.ThaiCyberU.go.th

บทที่ 2 หลักการออกแบบเว็บไซต์ทางการศึกษา

(4) การวางแนว (Alignment) (5) การทาซ ้า (Repetition) (6) การเลือกใช้ สี (Colors) และ (7) การเลือกใช้ ภาพ (Images) นอกจากหลักการออกแบบดังกล่าวแล้ ว ยังมีข้อควรพิจารณา เพิ่ ม เติ ม ส าหรั บ การออกแบบเว็ บ ไซต์ ท างการศึ ก ษาคื อ ความเรี ยบง่ า ย (Simplicity) ความสม่าเสมอ (Consistency) ระบบนาทางที่ใช้ งานง่าย )User-Friendly Navigation) คุณภาพในการออกแบบ )Design Stability) การออกแบบหน้ าจอ )Screen Design) รวมถึง ความละเอียดของจอภาพและการนาเสนอเนื ้อหาด้ วย

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

เพื่อให้ การออกแบบเว็บไซต์ มีประสิทธิภาพยิ่งขึน้ การออกแบบหน้ าจอ (Screen design) ประกอบด้ วย รู ปแบบหน้ าจอ เมนู การเลื อกตัวอักษร การพาดหัวตัวอักษร ปุ่ ม ภาพประกอบ ขนาดและความละเอียดของจอภาพ เส้ นทางการสืบค้ น (หรื อที่เรี ยกว่าระบบ navigation) และระบบการเชื่อมโยง (line) ก็มีความสาคัญมากเช่นกัน ตัวอย่าง The Master Page Layout Grid ดังตัวอย่างในแผนภาพที่ 3.1 ซึง่ หมายถึงการจัดวางกริ ดสาหรับหน้ า Homepage และหน้ า webpage อื่ น ๆ ในเว็บไซต์ เพื่ อ ให้ การออกแบบหน้ าจอ (Screen design) ในแต่ ล ะหน้ ามี ค วามสอดคล้ องกั น และเพื่ อ เป็ นการวิ เ คราะห์ โ ครงสร้ าง ของข้ อมูลด้ วย (Analyzing Content Structure) เช่นข้ อความในระบบนาทาง (navigation menu bar) กับเนือ้ หาในแต่ละหน้ า มีประสิทธิภาพยิ่งขึน้ โดยการวิเคราะห์โครงสร้ าง ของข้ อมูลด้ วย (Analyzing Content Structure) ดังนัน้ ผู้พัฒนาเว็บไซต์จะต้ องอ้ างอิงถึง การออกแบบโครงสร้ างเว็บไซต์ (Site Structure) เพื่อเป็ นแนวทาง และพัฒนาหน้ าโฮมเพจ และเว็บเพจต่าง ๆ ให้ สอดคล้ องกับ Site Structure ที่ได้ ออกแบบไว้ และในบางเว็บไซต์ก็จะมี หน้ า Site Map (แผนที่เว็บไซต์) หรื อบางครัง้ เรี ยก Site Index สาหรับผู้เข้ าชมเพื่อให้ เห็น โครงสร้ างข้ อมูลในเว็บไซต์นนั ้ ๆ อีกด้ วย ดังตัวอย่างในแผนภาพที่ 3.2

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.1 การจัดวางกริ ดสาหรับ Master Page (ที่มา: http://www.webstyleguide.com/index.html)

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.2 แสดง Site Map (แผนที่เว็บไซต์) ของเว็บไซต์ www.bitstream.com (ที่มา: http://www.webstyleguide.com/index.html) การดาเนินงานการพัฒนาเว็บไซต์สาหรับการเรี ยนการสอนสามารถสรุ ปเป็ นขันตอน ้ หลัก ๆ 4 ขันตอน ้ ได้ แก่ การวางแผนงานและการออกแบบตามขันตอนของ ้ ADDIE Model ได้ แก่ การวิเคราะห์ การออกแบบ การพัฒนา การนาไปใช้ และการประเมิน จากนัน้ จึงนา เนื ้อหาทังหมดมาจั ้ ดแบ่งหมวดหมู่ด้วยการจัดทาโครงสร้ างเว็บไซต์ (Site Structure) ขันตอน ้ ที่สาคัญต่อไปคือการออกแบบหน้ าเว็บ ไซต์ หรื อ Interface Design ซึง่ ควรมีการนาหลักการ ออกแบบต่าง ๆ ไม่วา่ จะเป็ นหลักการออกแบบพื ้นฐาน หลักการออกแบบสื่อเว็บ หรื อหลักการ อื่น ๆ เช่น หลักการของ Gestalt ที่ว่าด้ วยการรับรู้ มาประยุกต์ใช้ เมื่อได้ หน้ าเว็บไซต์คร่ าว ๆ แล้ ว จึง มาจัดท าเป็ น เทมเพลต เพื่ อ น าไปใช้ ในเว็บ เพจหน้ าอื่ น ๆ ต่อ ไป ขัน้ ตอนหลัก 4 ขันตอน ้ ดังแสดงในแผนภาพที่ 3.3

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.3 สรุ ปขันตอนการด ้ าเนินงานการพัฒนาเว็บไซต์สาหรับอีเลิร์นนิง นอกจากนี ้ จากงานวิจยั ของจินตวีร์ คล้ ายสังข์ (2553) ได้ กล่าวถึง (1) การนาเสนอ 16 ประเด็นที่สาคัญสาหรับรู ปแบบเว็บไซต์ทางการศึกษา (2) การนาเสนอรู ปแบบเว็บไซต์ ทางการศึกษาที่แบ่งเป็ นด้ านเพื่อการนาไปใช้ และ (3) การนาเสนอความพึงพอใจต่อรู ปแบบ เว็บไซต์ทางการศึกษา โดยมีรายละเอียดดังนี ้ 1. การนาเสนอ 16 ประเด็นที่สาคัญสาหรับรูปแบบเว็บไซต์ ทางการศึกษา ผลการศึกษาวิจยั คือ ข้ อที่ 1 ข้ อสรุปเกี่ยวกับข้ อมูลมัลติมีเดียด้ านพืน้ หลัง ดังนี ้ ลักษณะของพื ้นหลังที่เหมาะสม คือ พื ้นหลังสีอ่อนและตัวอักษรสีเข้ ม โดยพื ้นหลัง ที่ดงึ ดูดใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ พื ้นหลังสีอ่อน(โทนขาว ครี ม)และตัวอักษรสีเข้ ม (โทนฟ้า น ้าเงิน)ในส่วนเนื ้อหา พื ้นสีขาว ตัวอักษรสีดาปกติ หรื อ พื ้นหลังสีอ่อน(โทนขาว ครี ม) และตัวอักษรสีเข้ ม (โทนน ้าตาล) ในส่วนเนื ้อหา พื ้นสีขาว ตัวอักษรสีดาปกติ อย่างไรก็ตาม จากการสัมภาษณ์ ผ้ เู ชี่ยวชาญและจากการสนทนากลุ่มผู้ทรงคุณวุฒิ (Focus Group) ได้ ข้ อสรุ ปว่า สีโทนเย็นมีความเหมาะสมกับบริ บทการศึกษาที่สดุ

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.4 รู ปแบบของเว็บไซต์: พื ้นหลังสีขาว ครี มและตัวอักษรสีฟ้า น ้าเงิน ในส่วนเนื ้อหา พื ้นสีขาวตัวอักษรสีดาปกติ

แผนภาพที่ 3.5 เว็บไซต์ต้นแบบ: พื ้นหลังสีขาว ครี มและตัวอักษรสีฟ้า น ้าเงิน ในส่วนเนื ้อหา พื ้นสีขาวตัวอักษรสีดาปกติ www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.6 เว็บไซต์ต้นแบบ: พื ้นหลังสีขาว ครี มและตัวอักษรสีฟ้า น ้าเงิน ในส่วนเนื ้อหา พื ้นสีขาวตัวอักษรสีดาปกติ ข้ อที่ 2 ข้ อสรุปข้ อมูลมัลติมีเดียด้ านตัวอักษร ดังนี ้ ลักษณะของตัวอักษรที่เหมาะสม คือ ชนิดและขนาดมีความชัดเจนและอ่านง่าย และ สีของตัวอักษรเด่นชัด สบายตา โดยตัวอักษรที่ดงึ ดูดใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ ตัวอักษรหัวกลมแบบธรรมดา(Angsana UPC) ขนาด 10-20 พอยท์( ขึน้ อยู่กับตาแหน่ง เนือ้ หา) หรื อ ตัวอักษรหัวกลมแบบธรรมดา(Cordia UPC) ขนาด 10-20 พอยท์(ขึ ้นอยู่กับ ตาแหน่งเนื ้อหา) หรื อก็คือ ตัวอักษรแบบ Serif และ San-Serif ตามลาดับ อย่างไรก็ตามจาก การสัมภาษณ์ผ้ เู ชี่ยวชาญและจากการสนทนากลุ่มผู้ทรงคุณวุฒิ (Focus Group) ได้ ข้อสรุ ป ว่า ตัวอัก ษรแบบ San-Serif มี ความเหมาะสมที่ สุด อี กทัง้ ตัวอัก ษรที่ ใช้ ค วรเลื อ กชนิดที่ มี รู ป แบบตัวอัก ษรภาษาไทย และรู ป แบบตัว อัก ษรภาษาอังกฤษ ไม่ แ ตกต่า งกันมาก เช่ น Tahoma และ Verdana จึงจะเหมาะสมกับบริ บทการศึกษาไทยที่สดุ

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.7 รู ปแบบของเว็บไซต์: ตัวอักษร Angsana UPC

แผนภาพที่ 3.8 รู ปแบบของเว็บไซต์: ตัวอักษร Cordia UPC

แผนภาพที่ 3.9 เว็บไซต์ต้นแบบ: ตัวอักษร Tahoma

แผนภาพที่ 3.10 เว็บไซต์ต้นแบบ: ตัวอักษร Tahoma www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 3 ข้ อสรุปเกี่ยวข้ อมูลมัลติมีเดียด้ านการออกแบบจุดเชื่อมโยง ดังนี ้ องค์ประกอบของจุดเชื่อ มโยง อย่างน้ อยควรมี ชื่ อเรื่ อ ง(โดยมี การระบุชื่อ เรื่ องที่ ชัด เจน) จุด เชื่ อ มโยงภายในเว็ บ ไซต์ และลิ ง ค์ ไ ปยัง หน้ า หลัก โดยองค์ ป ระกอบของจุ ด เชื่อมโยงที่ดงึ ดูดใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ ชื่อเรื่ อง(โดยมีการระบุชื่อเรื่ องที่ชดั เจน) จุดเชื่อมโยงภายในเว็บไซต์ และลิงค์ไปยังหน้ าหลัก เช่นกัน

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

แผนภาพที่ 3.12 เว็บไซต์ต้นแบบ: ชื่อเรื่ อง(โดยมีการระบุชื่อเรื่ องที่ชดั เจน) จุดเชื่อมโยงภายในเว็บไซต์ และลิงค์ไปยังหน้ าหลัก

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.13 เว็บไซต์ต้นแบบ:ชื่อเรื่ อง(โดยมีการระบุชื่อเรื่ องที่ชดั เจน) จุดเชื่อมโยงภายในเว็บไซต์ และลิงค์ไปหน้ าหลัก

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 4 ข้ อสรุปเกี่ยวกับข้ อมูลมัลติมีเดียด้ านการออกแบบเนือ้ หา ดังนี ้ องค์ประกอบของเนื ้อหา อย่างน้ อยควรมี ภาพและวัตถุประกอบการบรรยาย หรื อ ภาพเคลื่อนไหว(ภาพเหตุการณ์สนั ้ ๆ) และลักษณะการนาเสนอเนื ้อหา คือ เนื ้อหากระชับ สัน้ และทันสมัย และ แบ่งเนื ้อหาออกเป็ นส่วน ๆ หรื อจัดกลุ่มเป็ นหมวดหมู่

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

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

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

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 5 สรุปข้ อมูลด้ านลักษณะเนือ้ หาที่ดึงดูดความสนใจ/ส่ งเสริมการเรี ยนรู้ ดังนี ้ ลักษณะเนือ้ หาที่ดึงดูดความสนใจ/ส่งเสริ มการเรี ยนรู้ คือ เนือ้ หากระชับ สัน้ และ ทันสมัย และ แบ่งเนื ้อหาออกเป็ นส่วน ๆ หรื อจัดกลุ่มเป็ นหมวดหมู่

แผนภาพที่ 3.16 รู ปแบบของเว็บไซต์: เนื ้อหาที่มีการแบ่งเนื ้อหาออกเป็ นส่วน ๆ หรื อจัดกลุ่มเป็ นหมวดหมู่ กระชับ สันและทั ้ นสมัย

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.17 เว็บไซต์ต้นแบบ: เนื ้อหาที่มีการแบ่งเนื ้อหาออกเป็ นส่วน ๆ หรื อจัดกลุ่มเป็ นหมวดหมู่ กระชับ สันและทั ้ นสมัย

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

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

แผนภาพที่ 3. 18 รู ปแบบของเว็บไซต์: ภาพประกอบที่เป็ นภาพเคลื่อนไหว สื่อความหมายกับผู้ใช้ ได้ ตรงกับวัตถุประสงค์ และ มีความเกี่ยวข้ องหรื อมีความสัมพันธ์กบั เนื ้อหา

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

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

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 7 สรุปข้ อมูลเกี่ยวกับความน่ าเชื่อถือ ดังนี ้ ความน่าเชื่อถือ ประกอบด้ วย การระบุชื่อผู้จดั ทาและอีเมลที่จะติดต่อได้ ระบุวนั ที่ จัดทา/แก้ ไขเปลี่ยนแปลงข้ อมูล และระบุผลงานที่เกี่ยวข้ องอื่น ๆ โดยความน่าเชื่อถือที่ส่งผล ต่อความสนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ การระบุชื่อผู้จดั ทาและอีเมลที่จะติดต่อได้ ระบุวนั ที่จดั ทา/แก้ ไขเปลี่ยนแปลงข้ อมูล และระบุผลงานที่เกี่ยวข้ องอื่น ๆ

แผนภาพที่ 3.20 รู ปแบบของเว็บไซต์: การระบุชื่อผู้จดั ทาและอีเมลที่จะติดต่อได้ ระบุวนั ที่จดั ทา/แก้ ไขเปลี่ยนแปลงข้ อมูล และระบุผลงานที่เกี่ยวข้ องอื่น ๆ

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 8 สรุปข้ อมูลเกี่ยวกับคุณภาพเนือ้ หา ดังนี ้ คุณภาพเนื ้อหา ควรประกอบด้ วย การนาเสนอข้ อมูลตามความเป็ นจริ ง ไม่มีอคติ นาเสนอข้ อมูลครบถ้ วนสมบูรณ์ และระบุแหล่งที่มาของข้ อมูล โดยคุณภาพเนื ้อหาที่ส่งผลต่อ ความสนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ การการนาเสนอข้ อมูลตามความเป็ นจริ ง ไม่มี อคติ นาเสนอข้ อมูลครบถ้ วนสมบูรณ์ และระบุแหล่งที่มาของข้ อมูล

แผนภาพที่ 3.21 รู ปแบบของเว็บไซต์: การนาเสนอข้ อมูลตามความเป็ นจริ ง ไม่มีอคติ นาเสนอข้ อมูลครบถ้ วนสมบูรณ์และระบุแหล่งที่มาของข้ อมูล www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.22 เว็บไซต์ต้นแบบ: การนาเสนอข้ อมูลตามความเป็ นจริ ง ไม่มีอคติ นาเสนอข้ อมูลครบถ้ วนสมบูรณ์ และระบุแหล่งที่มาของข้ อมูล ข้ อที่ 9 สรุปข้ อมูลเกี่ยวกับการออกแบบระบบนาทาง ดังนี ้ การออกแบบระบบน าทาง อย่า งน้ อ ยควรมี แผงผัง เว็บไซต์ เช่น ภาพรวมของ บทเรี ยน มี ทางเลื อ กให้ ผ้ ูใช้ เ ข้ าสื บค้ นข้ อ มูล และมี ก ารเชื่ อ มโยงกลับไปยังหน้ าหลัก โดย ลัก ษณะระบบน าทางที่ส่ งผลต่อ ความสนใจ/ส่ งเสริ มการเรี ย นรู้ ของผู้เรี ยน คื อ มี แ ผงผัง เว็บไซต์ เช่น ภาพรวมของบทเรี ยน มี ทางเลื อกให้ ผ้ ูใช้ เข้ าสื บค้ นข้ อ มูล และมีการเชื่อมโยง กลับไปยังหน้ าหลัก นอกจากนี ้ ผู้เชี่ยวชาญยังมีข้อสรุ ปอีกว่า ควรมีการบอกตาแหน่งว่าผู้เรี ยน อยู่ส่วนไหนของเว็บไซต์อีกด้ วย



แผนภาพที่ 3.23 รู ปแบบของเว็บไซต์: แผงผังเว็บไซต์ การเชื่อมโยงกลับไปยังหน้ าหลัก และการบอกตาแหน่งว่าผู้เรี ยนอยู่ส่วนไหนของเว็บไซต์

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.24 เว็บไซต์ต้นแบบ:แผงผังเว็บไซต์ การเชื่อมโยงกลับไปยังหน้ าหลัก และการบอกตาแหน่งว่าผู้เรี ยนอยู่ส่วนไหนของเว็บไซต์

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 10 สรุปข้ อมูลเกี่ยวกับข้ อมูลมัลติมีเดียด้ านเสียง ดังนี ้ ลักษณะของเสียง คือ ออกเสียงได้ ชดั เจน มีการใช้ เสียงสูงและต่าและตัวควบกล ้าที่ ดี และ ผู้ใช้ สามารถเลือกหยุดและเปิ ดฟั งได้ ตลอดเวลา โดยเสียงที่ดงึ ดูดความสนใจ/ส่งเสริ ม การเรี ยนรู้ ของผู้เรี ยน คือ ผู้ใช้ สามารถเลือกหยุดและเปิ ดฟั งเสียงแบคกราวน์ได้ ตลอดเวลา

แผนภาพที่ 3.25 รู ปแบบของเว็บไซต์: เสียงที่ออกเสียงได้ ชดั เจน มีการใช้ เสียงสูงและต่า และตัวควบกล ้าที่ดี และ ผู้ใช้ สามารถเลือกหยุดและเปิ ดฟั งได้ ตลอดเวลา ข้ อที่ 11 สรุปข้ อมูลเกี่ยวกับข้ อมูลมัลติมีเดียด้ านวีดทิ ัศน์ ดังนี ้ ลักษณะของวีดทิ ศั น์ คือ ใช้ เป็ นส่วนเสริ มข้ อความและภาพมากกว่าการใช้ เป็ นส่ วน หลักของเนื ้อหาในเว็บไซต์ และ ผู้ใช้ สามารถเลือกหยุดและเปิ ดดูได้ ตลอดเวลา โดยวีดิทศั น์ที่ ดึงดูดความสนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ วิดีโอคลิปที่สามารถดาวน์โหลดได้ แสดง อยู่บนหน้ าจอเว็บ(ขนาดหน้ าจอไม่มากกว่า 320x265 pixel) และสามารถลิงค์ไปยังหน้ าจอ เว็บ ใหม่ที่มีขนาดใหญ่ (full screen) ส่วนเนือ้ หาในวีดิทศั น์ที่ดึงดูดความสนใจ/ส่งเสริ ม การเรี ยนรู้ ของผู้เรี ยน คือ การอัพเดตนวัตกรรมใหม่ที่เกี่ยวข้ องกับโครงการฯ/หน่วยงานฯ

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.26 รู ปแบบของเว็บไซต์: วิดีโอคลิปที่สามารถดาวน์โหลดได้ แสดงอยู่บนหน้ าจอเว็บ (ขนาดหน้ าจอไม่มากกว่า 320x265 pixel) และสามารถลิงค์ไปยังหน้ าจอเว็บใหม่ที่มีขนาดใหญ่ (full screen)

แผนภาพที่ 3.27 เว็บไซต์ต้นแบบ: วิดีโอคลิปที่สามารถดาวน์โหลดได้ แสดงอยู่บนหน้ าจอเว็บ (ขนาดหน้ าจอไม่มากกว่า 320x265 pixel) และสามารถลิงค์ไปยังหน้ าจอเว็บใหม่ที่มีขนาดใหญ่ (full screen) www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 12 สรุปข้ อมูลเกี่ยวกับเครื่องมือสนับสนุนการสร้ างเว็บ 2.0 ดังนี ้ เครื่ องมือสนับสนุนการสร้ างเว็บ 2.0 ได้ แก่ เครื่ องมือสนับสนุนการทางานบนเว็บ (Web application tools) เช่น Blog และ RSS Feed เครื่ องมือสาหรั บติดต่อสื่อสาร (Communication tools) เช่น Chat, Instant Message, Desktop video conference และ Podcast เครื่ องมือส่งเสริ มการเป็ นชุมชนออนไลน์ (Community tools) เช่น Webboard, Wiki และ Social Networking ต่าง ๆ และ เครื่ องมือที่ช่วยในการแบ่งปั นข้ อมูลต่าง ๆ (File sharing tools) เช่น Photo sharing, Video sharing, Music Sharing และ Document sharing เป็ นต้ น โดยเครื่ อ งมื อ สนับสนุนการสร้ างเว็บ 2.0 ที่ดึงดูดความสนใจ/ส่งเสริ ม การเรี ยนรู้ ของผู้เรี ยน คือ Blog, Chat/Instant Message และ Wiki

แผนภาพที่ 3.28 รู ปแบบของเว็บไซต์: Chat, Webboard, Blog และ Wiki

แผนภาพที่ 3.29 รู ปแบบของเว็บไซต์: Facebook, Twitter และ Rss Feed

แผนภาพที่ 3.30 รู ปแบบของเว็บไซต์: Facebook, Twitter และ Webboard

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.31 เว็บไซต์ต้นแบบ: Webboard

แผนภาพที่ 3.32 เว็บไซต์ต้นแบบ: Chat

แผนภาพที่ 3.33 เว็บไซต์ต้นแบบ: Blog

www.ThaiCyberU.go.th

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 13 สรุปข้ อมูลเกี่ยวกับข้ อมูลด้ านประสิทธิภาพของจุดเชื่อมโยง ดังนี ้ ประสิทธิภาพของจุดเชื่อมโยง ได้ แก่ เข้ าถึงสารสนเทศที่ต้องการได้ อย่างรวดเร็ ว และ ควบคุมการใช้ งานได้ อย่างง่ายและสะดวกที่สดุ โดยข้ อมูลด้ านจุดเชื่อมโยงที่ดงึ ดูดความ สนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ เข้ าถึงสารสนเทศที่ต้อ งการได้ อ ย่างรวดเร็ ว และ ควบคุมการใช้ งานได้ อย่างง่ายและสะดวกที่สดุ

แผนภาพที่ 3.34 รู ปแบบของเว็บไซต์: จุดเชื่อมโยงที่เข้ าถึงสารสนเทศที่ต้องการ ได้ อย่างรวดเร็ ว และควบคุมการใช้ งานได้ อย่างง่ายและสะดวกที่สุด

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.35 เว็บไซต์ต้นแบบ: จุดเชื่อมโยงที่เข้ าถึงสารสนเทศ ที่ต้องการได้ อย่างรวดเร็ ว และควบคุม การใช้ งานได้ อย่างง่ายและสะดวกที่สดุ

แผนภาพที่ 3.36 เว็บไซต์ต้นแบบ: จุดเชื่อมโยงที่เข้ าถึงสารสนเทศ ที่ต้องการได้ อย่างรวดเร็ ว และควบคุม การใช้ งานได้ อย่างง่ายและสะดวกที่สดุ

www.ThaiCyberU.go.th

100

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 14 สรุปข้ อมูลเกี่ยวกับข้ อมูลด้ านการเข้ าถึงข้ อมูล ดังนี ้ การเข้ าถึงข้ อมูล ควรที่จะใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยนได้ ทนั ที โดยการเข้ าถึง ข้ อมูลที่ดงึ ดูดความสนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ ใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยน ได้ ทนั ที

แผนภาพที่ 3.37 รู ปแบบของเว็บไซต์: การเข้ าถึงข้ อมูลที่ใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยนได้ ทนั ที

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.38 เว็บไซต์ต้นแบบ: การเข้ าถึงข้ อมูลที่ใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยนได้ ทนั ที

แผนภาพที่ 3.39 เว็บไซต์ต้นแบบ: การเข้ าถึงข้ อมูลที่ใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยนได้ ทนั ที

www.ThaiCyberU.go.th

101

102

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 15 สรุปข้ อมูลเกี่ยวกับการทดสอบการใช้ งาน ดังนี ้ การทดสอบการใช้ งาน ควรที่จะทดสอบการออกแบบ การเชื่อมโยง(Links) เนื ้อหา (Content) และการเข้ าถึงข้ อมูล โดยการทดสอบการใช้ งานที่ดงึ ดูดความสนใจ/ส่งเสริ มการ เรี ยนรู้ ของผู้เรี ยน คือ ใช้ งานง่าย และ โต้ ตอบกับผู้เรี ยนได้ ทนั ที การออกแบบ การเชื่อมโยง(Link) และการเข้ าถึงข้ อมูล

เนือ้ หา (Content)

แผนภาพที่ 3.40 รู ปแบบของเว็บไซต์: การทดสอบการออกแบบ การเชื่อมโยง (Links) เนื ้อหา (Content) และการเข้ าถึงข้ อมูล

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

การออกแบบ

การเชื่อมโยง(Link) และการเข้ าถึงข้ อมูล เนือ้ หา (Content)

แผนภาพที่ 3.41 เว็บไซต์ต้นแบบ: การทดสอบการออกแบบ การเชื่อมโยง(Links) เนื ้อหา (Content) และการเข้ าถึงข้ อมูล การออกแบบ การเชื่อมโยง(Link) และการเข้ าถึงข้ อมูล

เนือ้ หา (Content)

แผนภาพที่ 3.42 เว็บไซต์ต้นแบบ: การทดสอบการออกแบบ การเชื่อมโยง(Links) เนื ้อหา (Content) และการเข้ าถึงข้ อมูล www.ThaiCyberU.go.th

103

104

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

ข้ อที่ 16 สรุปข้ อมูลเกี่ยวกับคุณภาพในการออกแบบ ดังนี ้ คุณภาพในการออกแบบ คือ การเข้ าถึงข้ อ มูล โดยคุณ ภาพในการที่ดึงดูดความ สนใจ/ส่งเสริ มการเรี ยนรู้ ของผู้เรี ยน คือ การเข้ าถึงข้ อมูล

การเข้ าถึงข้ อมูล

แผนภาพที่ 3.43 รู ปแบบของเว็บไซต์: การเข้ าถึงข้ อมูล

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.44 เว็บไซต์ต้นแบบ: การเข้ าถึงข้ อมูล

แผนภาพที่ 3.45 เว็บไซต์ต้นแบบ: การเข้ าถึงข้ อมูล

www.ThaiCyberU.go.th

105

106

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

2. การนาเสนอรูปแบบเว็บไซต์ ทางการศึกษาที่แบ่ งเป็ น 3 ด้ านเพื่อการนาไปใช้ เพื่ อ ให้ เข้ าใจง่ า ยต่ อ การน าข้ อสรุ ป ใน 16 ประเด็ น ไปใช้ ในการพิ จ ารณา การออกแบบ การพัฒนา ตลอดจนการประเมินผลรู ปแบบเว็บไซต์ทางการศึกษาที่ชดั เจน จึ ง นาทัง้ 16 ประเด็นมาแบ่งกลุ่มเป็ น 3 ด้ านหลัก ๆ คือ กลุ่มที่ 1 ด้ านการออกแบบมัลติมีเดีย (Multimedia Design) ประกอบด้ วย 5 ประเด็น ย่ อ ยได้ แ ก่ มัล ติมี เดี ย ด้ านพื น้ หลัง มัล ติมีเ ดี ย ด้ า นตัว อัก ษร มัลติมี เ ดีย ด้ า น ภาพประกอบ มัลติมีเดียด้ านเสียง และมัลติมีเดียด้ านวีดิทศั น์ กลุ่มที่ 2 ด้ านการออกแบบเนื ้อหา (Content Design) ประกอบด้ วย 5 ประเด็น ย่อยได้ แก่ มัลติมีเดียด้ านการออกแบบเนือ้ หา ด้ านลักษณะเนือ้ หาที่ดงึ ดูดความสนใจและ ส่งเสริ มการเรี ยนรู้ ความน่าเชื่อถือ และคุณภาพเนื ้อหา กลุ่มที่ 3 ด้ านการออกแบบส่วนต่อประสานสาหรับเว็บไซต์ (Website Interface Design) ประกอบด้ วย 7 ประเด็นย่อยได้ แก่ มัลติมีเดียด้ านการออกแบบจุดเชื่อมโยง การ ออกแบบระบบนาทาง เครื่ อ งมื อ สนับสนุนการสร้ างเว็บ 2.0 ด้ านประสิทธิ ภ าพของจุด เชื่ อ มโยง ด้ านการเข้ าถึงข้ อมูล การทดสอบการใช้ งาน และคุณภาพในการออกแบบ มี รายละเอียดดังแสดงในแผนภาพที่ 3.46

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

แผนภาพที่ 3.46 ภาพรวมรู ปแบบเว็บไซต์ฯ 16 ประเด็นแบ่งเป็ น 3 ด้ านเพื่อการนาไปใช้

www.ThaiCyberU.go.th

107

108

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

3. การนาเสนอความพึงพอใจต่ อรู ปแบบเว็บไซต์ ทางการศึกษา ในภาพรวมของการประเมินความพึงพอใจต่อรู ปแบบเว็บไซต์ทางการศึกษา ที่มี การนา 16 ประเด็นซึ่งแบ่งเป็ น 3 ด้ านหลักไปใช้ ในการออกแบบและพัฒนาเว็บไซต์ทาง การศึกษานัน้ ความพึงพอใจเว็บไซต์ของผู้เรี ยนที่มีต่อกิจกรรมการเรี ยนการสอนอยู่ในระดับ มาก เมื่อพิจารณาเป็ นรายด้ าน ผู้เรี ยนมีความพึงพอใจด้ านเนื ้อหาบทเรี ยนสูงสุด รองลงมาคือ ความพึงใจด้ านการออกแบบ และด้ านการจัดรู ปแบบตามลาดับ รายละเอียดดังแสดงใน ตารางที่ 3.1 และแผนภาพที่ 3.47 ตารางที่ 3.1 แสดงภาพรวมของการประเมินความพึงพอใจเว็บไซต์ทางการศึกษา รายการประเมิน 1. ด้ านการจัดรูปแบบ 2. ด้ านเนือ้ หาบทเรี ยน 3. ด้ านการออกแบบ 4. ด้ านการประเมินผล เฉลี่ย

ระดับความพึงพอใจ ค่ าเฉลี่ย S.D. แปลผล 4.06 .63 มาก 4.25 .53 มาก 4.08 .53 มาก 3.94 .71 มาก 4.08 .55 มาก

โดยด้ านการจัดรู ปแบบประกอบด้ วย (1) เว็บไซต์มีรูปแบบการนาเสนอที่เหมาะสม และมีความน่าสนใจ (2) เว็บไซต์มีรูปแบบการจัดวางในตาแหน่งที่เหมาะสม (3) เว็บไซต์ มี รู ป แบบการจัด ปริ ม าณเนื อ้ หาในแต่ล ะหน้ า ที่ เ หมาะสม และ (4) เว็บ ไซต์ มี รู ป แบบ การจัดลาดับ ขันตอน ้ ของเนื ้อหาที่เหมาะสมและเข้ าใจง่าย ด้ านเนือ้ หาบทเรี ยนประกอบด้ วย (1) เนื อ้ หามีความสอดคล้ องและครอบคลุม วัตถุประสงค์ (2) เนื ้อหาบทเรี ยนมีการแบ่งหัวข้ อที่ถูกต้ องเหมาะสม (3) เนื ้อหาบทเรี ยนมี การจัดเรี ยงลาดับขัน้ ตอน อย่างต่อ เนื่ อ ง เข้ าใจง่าย (4) เนื อ้ หาบทเรี ยนในแต่ละส่วนมี ความสัมพันธ์ กนั (5) เนื ้อหาบทเรี ยนมีความยาก ง่าย เหมาะสมกับระดับความรู้ ของผู้เรี ยน (6) ภาษาที่ใช้ เหมาะสม ชัดเจน ถูกต้ อง สามารถสื่อให้ ผ้ ชู มเข้ าถึงอารมณ์และ บรรยากาศใน การเรี ยน และ (7) เนือ้ หาบทเรี ยนมีประโยชน์ต่อการค้ นคว้ าเพิ่มเติม และให้ ความรู้ ทัว่ ไป ในวงกว้ าง

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

109

ด้ านการออกแบบประกอบด้ วย (1) รู ปแบบตัวอักษรที่ใช้ อ่านง่าย เหมาะสมและ กลมกลืน (2) ภาพประกอบสื่อความหมายตรงวัตถุประสงค์ของเนือ้ หาบทเรี ยน (3) ใช้ สี กลมกลื นในทุก ๆ หน้ า และสามารถสื่อ ความหมายชัดเจน (4) ใช้ ปุ่ม และไอคอน ที่สื่อ ความหมายชัดเจนและวางในตาแหน่งที่เหมาะสม (5) มีการจัดองค์ประกอบโดยรวมอย่าง กลมกลืน มีเอกลักษณ์ ที่ชัดเจน (6) มีการเชื่ อมโยงข้ อมูลภายในที่เหมาะสม และ (7) มี การเชื่อมโยงข้ อมูลภายนอกที่เหมาะสม ด้ านการประเมินผลประกอบด้ วย (1) มีการกาหนดวิธีการประเมินผลที่ชดั เจน (2) มีการประเมินผลที่เหมาะสม (3) มีการประเมินผลที่หลากหลาย และ (4) มีการใช้ ประโยชน์ จากเทคโนโลยีในการประเมินผลอย่างเหมาะสม

แผนภาพที่ 3.47 ภาพรวมของค่าเฉลี่ยความพึงพอใจที่มีตอ่ เว็บไซต์ทางการศึกษา

www.ThaiCyberU.go.th

110

บทที่ 3 รู ปแบบเว็บไซต์ทางการศึกษา

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

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

111

การศึกษาแบบอีเลิร์นนิงมี อ งค์ประกอบที่สาคัญ 4 ส่วน คือเนื อ้ หาของบทเรี ยน ระบบบริ หารจัดการการเรี ยนการสอน การติดต่อสื่อสาร และ การสอบ /วัดผลการเรี ยน ซึง่ เมื่อ นามาประกอบเข้ าด้ วยกันแล้ วทังระบบจะท ้ างานประสานกันได้ อย่างลงตัว ทังนี ้ ใ้ นยุคของ การเรี ยนการสอนผ่านเว็บ (Web based Learning) หรื อผ่านทางอินเทอร์ เน็ตนัน้ ส่วนใหญ่ จะเป็ นการสร้ าง standalone website เพื่อใช้ เป็ นศูนย์กลาง กาหนดลาดับของเนือ้ หาใน บทเรี ยน นาส่งบทเรี ยนผ่านเครื อข่ายคอมพิวเตอร์ ไปยังผู้เรี ยน ประเมินผลความสาเร็ จของ บทเรี ยน ควบคุม และสนับสนุนการให้ บริ การทัง้ หมดแก่ผ้ ูเรี ยน จึงถื อ เป็ นองค์ประกอบที่ สาคัญมากของการเรี ยนการสอนที่สนับสนุนให้ ผ้ เู รี ยนได้ ศกึ ษาเรี ยนรู้ เมื่อการศึกษาทางไกล พัฒนามาจากยุคที่สี่ (การเรี ยนการสอนผ่านเว็บ) เข้ าสู่ยุคปั จจุบนั คือการเรี ยนการสอนแบบ อีเลิร์นนิงที่เน้ นการใช้ เทคโนโลยีทกุ ประเภทของอินเทอร์ เน็ต อาทิ เวิล์ด ไวด์ เว็บ (WWW ), อีเมล (Email) ห้ องสนทนา (Chat) ห้ องประชุม (Forum/Discussion) กลุ่มผู้สนใจ (Mailing List) ป้ายประกาศ (Bulletin Board/Announcement) ห้ องสมุดดิจิทลั (Digital Library) อินเทอร์ เน็ตแบบทังออนไลน์ ้ และออฟไลน์ (On-line and Off-line Internet) การประกาศ คะแนนทางอินเทอร์ เน็ต (e-Gradebook) การสอบทางอินเทอร์ เน็ต (e-Exam) และระบบ วิดีโอคอนเฟอร์ เรนท์หรื อกล้ องอินเทอร์ เน็ต (Webcam) สาหรับการจัดประชุมทางไกล เป็ นต้ น จะเห็นได้ ว่าในยุคนี จ้ ะเน้ นที่ การเรี ย นการสอนที่ ผ้ ูเ รี ยนมี ส่ว นร่ วม (Active) มี ป ฏิสัมพัน ธ์ (Interaction) กับผู้สอน ผู้เรี ยนด้ วยกันเอง บทเรี ยน จึงทาให้ ระบบบริ หารจัดการการเรี ยน การสอน (Learning Management System) เช่น Moodle LMS, Blackboard LMS เข้ ามามี บทบาทมากยิ่งขึ ้นเนื่องจากตัวระบบมีเครื่ องมือที่สนับสนุนกิจกรรมการเรี ยนการสอนดังกล่าว ในขณะที่การพัฒนา Standalone website จะยังมีข้อจากัดในเครื่ องมือดังกล่าวอยู่

www.ThaiCyberU.go.th

112

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

นอกจากนี ้ วิธีการพัฒนาเว็บไซต์อีกรู ปแบบหนึ่งที่ได้ รับความนิยมคือ การพัฒนา เว็บไซต์ด้วยระบบบริ หารจัดการเว็บไซต์ (Content Management System: CMS) ที่นอกจาก จะสามารถพัฒนาเว็บไซต์ได้ อย่างมีประสิทธิ ภาพแล้ ว ยังอานวยความสะดวกในเรื่ องของ การบริ หารจัดการข้ อมูลบนเว็บไซต์ CMS ที่นิยมอย่างแพร่ หลาย เช่น Joomla! เป็ น CMS แบบ Open source สามารถ download มาใช้ งานได้ ฟรี เมื่ อ เปรี ยบเทียบการพัฒนา เว็บไซต์ด้วย Joomla! กับซอร์ ฟ แวร์ พัฒนาเว็บไซต์ต่าง ๆ ที่เป็ นที่ นิยม เช่น Macromedia Dreamweaver แล้ ว พบว่า Joomla! มีข้อได้ เปรี ยบในเรื่ องของการดูแล เปลี่ยนแปลง แก้ ไข และอัพเดทข้ อมูล โดยเว็บไซต์ที่พัฒนาจากโปรแกรม Dreamweaver นัน้ จะมีความยุ่งยาก กว่า (ต้ องแก้ ไฟล์และอัพโหลดใหม่ขึน้ server) การเพิ่มโครงสร้ างเว็บไซต์ และเมนูต่าง ๆ เว็บไซต์ ในขณะที่เว็บไซต์ที่พัฒนาขึน้ จากระบบ CMS จะช่วยลดภาระ และอานวยความ สะดวกรวดเร็ วให้ กบั ผู้ดแู ลเว็บไซต์ (Webmaster) และมีประสิทธิภาพมากยิ่งขึ ้น และสามารถ รองรับการใช้ งานได้ หลากหลาย ไม่ว่าจะเป็ นเว็บไซต์ส่วนตัว หรื อเว็บไซต์ขององค์กร เป็ นต้ น (จินตวีร์ มัน่ สกุล, 2551) CMS และ LMS การสร้ างเว็ บ ไซต์ นั น้ มี ด้ วยกั น หลายวิ ธี อาจแบ่ ง ได้ ตามยุ ค ตามสมั ย ของ อินเทอร์ เน็ตที่เปลี่ยนไป เริ่ มตัง้ แต่พัฒนาด้ วยการเขียนเว็บด้ วยภาษา HTML เองทังหมด ้ การใช้ ซอฟต์แวร์ สาเร็ จรู ปที่มีขายในท้ องตลอด หรื อการจ้ างนักพัฒนามืออาชีพเข้ ามาจัดการ เว็บ ไซต์ ซึ่งแต่ละวิธีจ ะมี จุดเด่น /ข้ อ จากัดแตกต่างกัน ออกไป ไม่ ว่า จะเป็ น ระยะเวลาใน การสร้ างเว็บ ไซต์ ต้ นทุน ความรู้ ด้ า นโปรแกรม ซึ่ง เป็ นหน้ า ที่ ข องผู้มี อ านาจตัด สิ น ใจใน การเลือกวิธีที่เหมาะสมกับหน่วยงาน ของตัวเอง วิธีเขี ยนภาษา HTML ทังหมดด้ ้ วยตัวเองนัน้ ยุ่งยากและเสี ยเวลาในการพัฒนามาก ดังนัน้ วิธีที่นิยมกว่าคือ การใช้ ซอฟต์แ วร์ สาเร็ จรู ป อย่างเช่น Dreamweaver หรื อ FrontPage ช่วยในการดีไซน์เว็บไซต์ แต่วิธีนี ้จะมีข้อจากัดใน กรณี ที่เป็ นเว็บไซต์ขนาดใหญ่ ผู้พัฒนาระบบต้ อ งมีความรู้ และเชี่ยวชาญด้ านโปรแกรมมิ่ง พอสมควรจึงจะสามารถ พัฒนาระบบตามความต้ องการของเว็บไซต์ที่ใหญ่และซับซ้ อนขึน้ เรื่ อย ๆ ได้ สาหรั บวิธีการจ้ างนักพัฒนามืออาชีพนัน้ ถึงแม้ จะรองรั บความต้ องการของลูกค้ า ในเรื่ อ งคุณ สมบัติแ ละหน้ า ตาของเว็บ ไซต์ ไ ด้ เป็ นอย่า งดี แต่ลูกค้ า จะประสบปั ญ หาเ มื่ อ ต้ อ งการอัพเดตเนื อ้ หา เนื่ อ งจากการอัพเดตท าได้ ย าก และทาให้ มี ค่า ใช้ จ่า ยต่อ เนื่ อ งใน การจ้ างผู้พัฒนาให้ ตามอัพเดตหรื อตามดูและระบบอย่างไม่มีที่ สิ ้นสุด จึงส่งผลให้ เว็บไซต์ จานวนมากไม่มีการอัพเดท และนาไปสู่ความล้ มเหลวในการจัดทาเว็บไซต์ข ององค์กรได้

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

113

อีกทัง้ การพัฒนาเว็บไซต์แบบเดิม ๆ ยังมีข้อจากัดอีกประการคือ ไม่ได้ แยกส่วนโครงสร้ างของ เว็บไซต์ ส่วนการแสดงผลและส่วนเนื ้อหาออกจากกัน จึงไม่สามารถแยกแก้ ไขเฉพาะส่วนได้ ส่งผลในระยะยาวทาให้ เว็บที่แก้ ไขอาจหน้ าตาไม่เหมือนกันทังหมด ้ หรื อการแก้ ไขลิงค์ทาได้ ยาก เกิดปั ญหาลิงค์ตาย (Dead link) ทาให้ ผ้ เู ข้ าชมเว็บไม่สามารถเข้ าถึงข้ อมูลที่ต้องการได้ เมื่ อเวลาผ่านไป จึงมีแ นวทางในการพัฒนาเว็บไซต์แบบกึ่งสาเร็ จรู ป โดยนาระบบบริ หาร จัดการข้ อมูลเว็บไซต์ (Content Management System) หรื อ CMS มาช่วยแก้ ไขปั ญหา ดังกล่าว (จินตวีร์ มัน่ สกุล, 2551) 1. CMS: Content Management System CMS หรื อ Content Management System เป็ นระบบที่นามาช่วยในการสร้ างและ บริ หารเว็บไซต์แบบสาเร็ จรู ป โดยในการใช้ งาน CMS นันผู ้ ้ ใช้ งานแทบไม่ต้องมีความรู้ ในด้ าน การเขียนโปรแกรม ก็สามารถสร้ างเว็บไซต์ได้ โดยที่ตวั CMS เองมีโปรแกรมประยุกต์ แบบ พร้ อมใช้ งานอยู่ภายในมากมายอาทิ ระบบจัดการบทความและข่าวสาร(News and Story) ระบบจัดการบทวิจารณ์ (Review), ระบบจัดการสมาชิก (Member) ระบบสื บค้ นข้ อ มูล (Search) ระบบจัดการไฟล์ดาวน์โหลด(Download), ระบบจัดการป้ายโฆษณา (Banner), ระบบการวิเคราะห์และตรวจสอบสถิติความนิยมในเว็บไซต์ (Analysis, Tracking and Statistics) เป็ นต้ น ปั จจุบนั ซอฟต์แวร์ ที่ใช้ สร้ าง CMS มีหลายตัวด้ วยกัน เช่น Wordpress.org

แผนภาพที่ 4.1 แสดง CMS: Wordpress.org www.ThaiCyberU.go.th

114

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

Wordpress เดิมเป็ นเพียงซอฟต์แวร์ ช่วยสร้ างบล็อก ซึง่ เขียนด้ วยภาษาพีเอชพีและ ใช้ ฐานข้ อ มูล MySQL และต่อ มาได้ มีการพัฒนาความสามารถให้ หลากหลายมากขึน้ กว่า การสร้ างบล็อกเพียงอย่างเดียว โดยปั จจุบนั WordPress ได้ รับความนิยมเป็ นอย่างมากจาก บล็อกเกอร์ ทวั่ โลก เนื่องจากเป็ นระบบที่มีความยืดหยุ่นในการใช้ งาน อีกทังยั ้ งมีผ้ ทู ี่สร้ างปลัก๊ อิน (โปรแกรมเสริ ม) ธีม (รู ปแบบการแสดงผล) รวมทังระบบอื ้ ่น ๆ ที่สามารถใช้ งานร่ วมกับ WordPress ได้ เป็ นจานวนมาก จึงทาให้ WordPress ได้ รับความนิยมอย่างยิ่ง มีหน่วยงานที่ มี ชื่ อ เสี ย งหลายแห่ ง ด้ ว ยกัน ที่ ไ ด้ ใ ช้ บ ริ ก ารของ Wordpress ในการช่ ว ยสร้ างเว็ บ ไซต์ ตัวอย่างเช่น CNN ซึง่ ใช้ บริ การ Wordpress เช่นเดียวกัน

แผนภาพที่ 4.2 แสดง CMS: Wordpress.org Drupal เป็ น software ประเภท web-based content management system โดยที่เนื ้อหาต่าง ๆและ pointer ของเนื ้อหา (text) จะถูกเก็บในฐานข้ อมูล ซึง่ เป็ นรู ปแบบ Dynamic (dynamically retrieved and composed) และแสดงเนื ้อหาหรื อ content แก่ผ้ ใู ช้ ทาง web browser เนื ้อหาใน Drupal สามารถสร้ างโดยผู้ใช้ จาก individual nodes เช่น node story ผู้ใช้ สามารถใส่ comment เป็ นต้ น ขึน้ อยู่กบั ว่า site นี ้จะตังค่ ้ าอย่างไร บางที การเพิ่ม node ใหม่หรื อการใส่ comment อาจจะไม่ได้ รั บอนุญาต ในขณะเดียวกัน node หรื อ comment อาจต้ องได้ รับการอนุญาตจากผู้ดแู ลก่อนที่ node หรื อ comment จะถูก แสดงผล ซึ่ง Drupal layout ("Theme") ที่เป็ น default ประกอบด้ วย 3 คอลัมน์ โดยที่

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

115

คอลัมน์กลางจะเป็ นส่วนของ content column ส่วนคอลัมน์ทางซ้ ายและขวาก็คือ sidebar ซึง่ sidebar จะแสดง block และ Block จะประกอบไปด้ วย link ที่จะชี ้ไปยัง node อื่น ๆ เช่น block ในการแสดงข้ อความ post ล่าสุด หรื อที่นิยมที่สดุ

แผนภาพที่ 4.3 แสดง CMS: Drupal

แผนภาพที่ 4.4 ตัวอย่างเว็บไซต์ของ GCCA ที่สร้ างด้ วย Drupal www.ThaiCyberU.go.th

116

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

Google Sites เองก็เป็ น software ประเภท web-based content management system เช่นเดียวกับ Drupal Google Site เป็ นอีกบริ การหนึ่งของ Google ที่เปิ ดให้ บริ การ พื ้นที่ทาเว็บไซต์แบบง่าย ๆ มี template แบบสาเร็ จให้ เลือกภายในคลิกเดียว มีข้อจากัดบ้ าง ในส่ วนที่ ไ ม่ส ามารถปรั บ แต่ง รู ป แบบตามความต้ อ งการได้ มากนัก ต้ อ งใช้ รู ป แบบที่ ท าง Google มีให้ เท่านัน้ (แต่ก็สามารถปรับแต่งสีในส่วนปลีกย่อยได้ ) และไม่สามารถใช้ ร่วมกับ ระบบฐานข้ อมูล เช่น MySQL ได้ แต่ก็มีข้อดีที่การใช้ งานง่าย ทาให้ ผ้ ทู ี่ไม่มีความรู้ เกี่ยวกับ การสร้ างเว็บ สามารถสร้ างเว็บไซต์ของตนเองได้ อย่างง่ายดายเหมือนกับการเขียนบล็อกบน เว็บ

แผนภาพที่ 4.5 แสดง Google Site Mambo เป็ นระบบ CMS ซึ่งครั ง้ หนึ่งเคยเป็ นต้ นแบบของ Joomla! จึง มีระบบ การทางานที่คล้ ายคลึงกัน แม้ วา่ ปั จจุบนั อาจจะไม่ได้ รับความนิยมมากเหมือนแต่ก่อนแต่ก็ยงั มีผ้ ูพัฒนา Extention ต่าง ๆ ให้ อย่างต่อเนื่อง ถ้ าสังเกตจากตัวอย่างก็จะพบว่าเว็บไซต์มี โครงสร้ างคล้ ายคลึงกับ Joomla! พอสมควร

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.6 แสดง CMS: Mambo

แผนภาพที่ 4.7 แสดงตัวอย่างเว็บไซต์ที่สร้ างโดย Mambo

www.ThaiCyberU.go.th

117

118

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

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

แผนภาพที่ 4.8 แสดง CMS: Joomla!

แผนภาพที่ 4.9 แสดงตัวอย่างเว็บไซต์ที่สร้ างโดย Joomla!

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

119

แผนภาพที่ 4.10 ที่หน้ า Joomla! Homepage > คลิก Get started with Joomla! > เลือกชมเว็บไซต์ที่พฒ ั นาด้ วย Joomla!> The Graduate School of Arts and Sciences, Harvard University Website: http://gsas.harvard.edu สรุ ปได้ ว่า เว็บไซต์ในรู ปแบบ CMS มีจุดเด่นคือ การใช้ งานได้ ฟรี (Open Source) และการใช้ งานได้ ง่าย สะดวก นอกจากนี ้ CMS ยังมี extension เสริ มการทางานต่าง ๆ เช่น ปลัก๊ อิน และเทมเพลตต่าง ๆ การออกเวอร์ ชนั่ (patch) สาหรั บแก้ ไขช่องโหว่ต่าง ๆ รวมถึง การอับเดทข้ อมูลด้ านความปลอดภัยอีกด้ วย นอกจากนี ้ ยั ง พบว่ า ระบบบริ ห ารจั ด การการเรี ยนการสอน (Learning Management System) ตอบสนองต่อ ความต้ อ งการของทุก สถาบันที่ ต้ อ งการส่ง เสริ ม การเรี ยนการสอนแบบอีเลิร์นนิง แต่ยงั มีข้อจากัดเรื่ องของผู้สอนที่มีขีดจากัดในการพัฒนา website ของตนเอง ผู้สอนสามารถพัฒนา course website ของตนผ่านระบบบริ หารจัดการ การเรี ยนการสอน (Learning Management System) ที่มีระบบรักษาความปลอดภัย (user name and password required) มี การเก็บข้ อ มูลผู้เรี ยนอย่างเป็ นระบบ (students’ records) อี ก ทัง้ ระบบติ ด ตามผู้เ รี ย น (students’ tracking) และในเรื่ อ งของ common platform ที่ผ้ เู รี ยนสามารถเข้ าไปที่ website แห่งเดียว และสามารถเข้ าเรี ยนได้ ในทุก ๆ วิชา กล่าวโดยรวมแล้ วระบบ LMS จะทาหน้ าที่เป็ นศูนย์กลางตังแต่ ้ ผ้ ูเรี ยนเริ่ มเข้ ามาเรี ยน โดย จัด เตรี ย มหลัก สู ต ร และบทเรี ย นในทุก ๆ วิ ช าเอาไว้ พ ร้ อมที่ จ ะให้ ผ้ ูเ รี ย นได้ เ ข้ า มาเรี ย น www.ThaiCyberU.go.th

120

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

เมื่อผู้เรี ยนได้ เริ่ มต้ นบทเรี ยนแล้ วระบบจะเริ่ มทางานโดยส่งบทเรี ยนตามคาขอของผู้เรี ยนผ่าน เครื อข่ายคอมพิวเตอร์ ไปแสดงที่เว็บบราวเซอร์ (Web browser) ของผู้เรี ยน จากนันระบบก็ ้ จะติดตามและบันทึก ความก้ าวหน้ า รวมทังสร้ ้ างรายงานกิจกรรมและผลการเรี ยนของผู้เรี ยน ในทุกหน่วยการเรี ยนอย่างละเอียดจนกระทัง่ จบหลักสูตร (Monsakul, 2006) 2. LMS: Learning Management System LMS หรื อ Learning Management System คือ ระบบที่นาเสนอความรู้ จัดเก็บ ข้ อมูลเพื่อ ติดตามสิ่งต่าง ๆ ที่เกิดขึน้ และ สนับสนุนการจัด การเรี ยนการสอนอีเลิร์ นนิงให้ ดาเนินไปด้ วยความเรี ยบร้ อยโดยเป็ นสภาพแวดล้ อมการเรี ยนการสอน เป็ นเครื่ องมือให้ กับ อาจารย์ (teacher) นักเรี ยน(student) รวมทังผู ้ ้ ดแู ลระบบ (administrator) เช่น การสร้ าง บทเรี ยน การสร้ างกิจกรรมออนไลน์ การสร้ างแบบทดสอบออนไลน์ การจัดการประเมิ น ออนไลน์ การตรวจสอบเวลาเรี ยนของผู้เรี ยน การตรวจสอบการทากิจกรรมให้ คะแนนผู้เรี ยน เป็ นต้ น ทาให้ เกิดความสะดวกในการจัดการเรี ยนการสอน อีเลิร์นนิง เมื่อเปรี ยบเทียบกับใน อดีตที่ไม่มีระบบจัดการเรี ยนรู้ อาจารย์จะต้ องพัฒนาเว็บไซต์ที่มีความสามารถใกล้ เคียงกับ ระบบจัดการเรี ยนรู้ ขึ ้นมาเอง ซึง่ ต้ องใช้ ทงเวลาและงบประมาณจ ั้ านวนมาก ระบบ Blackboard จะเป็ นระบบที่จุฬาลงกรณ์ มหาวิทยาลัยให้ นิสิตใช้ อยู่เป็ น ประจา เป็ น LMS รู ปแบบหนึ่งซึ่งมีการให้ นิสิตเลือกบทเรี ยน สามารถดาวน์โหลดเอกสาร หรื อ ส่ ง งานต่า ง ๆ บนระบบได้ มี ก ารท าแบบทดสอบและทราบผลในสมุด คะแนนทัน ที และมี ร ะบบการติ ด ต่อ สื่ อ สาร การประเมิ น ผ่ า นทางออนไลน์ ที่ มี ป ระสิ ท ธิ ภ าพ เป็ นต้ น อย่างไรก็ตามระบบ Blackboard ก็มีข้ อ จากัดที่เป็ นซอฟต์แ วร์ ที่มีลิข สิทธิ์ ต้ องมี การเสี ย ค่าใช้ จ่ายในการใช้

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

121

แผนภาพที่ 4.11 แสดงตัวอย่าง LMS: Blackboard

แผนภาพที่ 4.12 แสดงตัวอย่าง LMS: Blackboard ระบบที่ใช้ ในการเรี ยนอีเลิร์นนิงของโครงการมหาวิทยาลัยไซเบอร์ ไทยก็เป็ น LMS รู ปแบบหนึ่งที่พัฒนาขึน้ มาเองเพื่อตอบสนองความต้ องการ และยังได้ มีการเผยแพร่ เพื่อให้ ผู้อื่นได้ นาไปใช้ ตอ่ ไปอีกด้ วย www.ThaiCyberU.go.th

122

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

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

แผนภาพที่ 4.14 แสดงตัวอย่าง Sakai Project

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

123

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

แผนภาพที่ 4.15 แสดงตัวอย่าง LMS: ATutor Moodle เป็ น LMS ระบบหนึ่ งที่ ได้ รั บความนิ ยมมากที่ สุดในปั จจุ บัน สามารถ ออกแบบรายวิชาได้ ตามต้ องการ พร้ อมทังมี ้ ฟังก์ชนั ให้ ใช้ งานมากมาย เช่น จัดการสร้ างบทเรี ยน หรื อสร้ างแบบทดสอบ และอื่ น ๆ ซึ่งสามารถช่ วยอาจารย์ จัดการเรี ยนการสอนได้ อ ย่ างมี ประสิทธิภาพ

www.ThaiCyberU.go.th

124

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.16 แสดงตัวอย่าง LMS: Moodle

แผนภาพที่ 4.17 แสดงตัวอย่าง LMS: Moodle

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

125

แผนภาพที่ 4.18 แสดงตัวอย่าง LMS: Moodle อย่างไรก็ตามถ้ าสังเกตตัวอย่างแต่ละเว็บไซต์ให้ ดีจะเห็นว่า Moodle จะมีข้อจากัด ด้ านการออกแบบโครงสร้ างที่คอ่ นข้ างตายตัว ไม่คอ่ ยมีความสวยงามเท่ากับ CMS ต่าง ๆ แต่ ถ้ าผู้ใช้ มีความสามารถในการออกแบบและเข้ าใจการเขี ยนเว็บไซต์ก็สามารถปรั บแต่งให้ เว็บไซต์ให้ มีความแตกต่างและสวยงามได้ เช่นเดียวกัน LearnSquare LMS พัฒนาโดย Nectec เป็ นระบบบริ หารจัดการการเรี ยนรู้ ออนไลน์ผ่านเครื อข่ายคอมพิวเตอร์ โดยผู้เรี ยนสามารถเรี ยนรู้ ได้ ตามอัธยาศัย ทุกที่ ทุกเวลา ในรู ปแบบสื่อมัลติมีเดียทังบทความ ้ ภาพ เสียง หรื อวิดีโอที่สามารถโต้ ตอบได้ เสมือนการเรี ยน ในห้ องเรี ยนปกติซงึ่ ถือเป็ นการเปิ ดโอกาส ทางการศึกษาให้ กว้ างมากขึน้ และมีมาตรฐานที่ เท่าเทียมกัน

www.ThaiCyberU.go.th

126

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.19 แสดงตัวอย่าง LMS: LearnSquare 3. การใช้ งานเว็บไซต์ ในส่ วนของ Moodle เบือ้ งต้ น การใช้ งานเว็บไซต์ในส่วนของ Moodle เบื ้องต้ น ประกอบด้ วย (1) การจัดการส่วน ของผู้ดแู ลระบบ (2) การจัดการเกี่ยวกับสมาชิก (3) การจัดการเกี่ยวกับรายวิชา (4) การเพิ่ม บล็อคลงในหน้ าเว็บไซต์ (5) การจัดการรายวิชาสาหรับผู้สอน และ (6) การเพิ่มเนื ้อหาให้ กบั รายวิชา

แผนภาพที่ 4.20 การใช้ งานเว็บไซต์ในส่วนของ Moodle เบื ้องต้ น

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

127

(1) การจัดการส่ วนของผู้ดูแลระบบ ในส่วนของ Moodle นัน้ ในการจัดการระบบของเว็บไซต์ผ้ ดู ูแลระบบจะต้ องเข้ าสู่ ระบบด้ วย Account ในระดับของผู้ดแู ลระบบที่ได้ รับมา เมื่อเข้ าสู่ระบบแล้ วจะพบว่า ข้ อมูล ทุกอย่างที่ซ่อนไว้ จะปรากฏออกมา และมีบล็อค “การจัดการระบบ” เพิ่มขึน้ มาทางซ้ ายมือ

แผนภาพที่ 4.21 หน้ าเว็บไซต์เมื่อเข้ าสู่ระบบในฐานะของผู้ดแู ลระบบ (2) การจัดการเกี่ยวกับสมาชิก ในบล็อ คการจัดการระบบ เมนูเกี่ ยวกับการจัดการสมาชิกทัง้ หมดจะอยู่ในเมนู สมาชิก เมื่อคลิกที่เมนูจะปรากฏเมนูย่อยด้ วยกันอีก 3 เมนู คือ (1) การอนุมตั ิ ใช้ กาหนด วิธีการสมัครเป็ นสมาชิกของเว็บไซต์ (2) บัญชีผ้ ใู ช้ ใช้ สาหรับตรวจสอบรายชื่อสมาชิก เพิ่ม ลบ หรื อแก้ ไขข้ อมูลสมาชิกในเว็บไซต์ และ (3) Permissions ใช้ กาหนดบทบาทให้ กบั สมาชิก ในเว็บไซต์

แผนภาพที่ 4.22 เมนูสมาชิก www.ThaiCyberU.go.th

128

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

เมื่อผู้ดแู ลระบบคลิกเข้ ามาในเมนูรายชื่อสมาชิก ผู้ดแู ลระบบสามารถจัดการข้ อมูล สมาชิก ได้ ห ลายรู ป แบบ เช่น กรองรายชื่ อ ผู้ใ ช้ ด้ว ยการก าหนด filter สามารถเรี ย งล าดับ สมาชิกโดยการคลิกที่ด้านบนคอลัมน์ที่ต้องการให้ เรี ยงลาดับ แก้ ไขข้ อมูลสมาชิกโดยการคลิก ที่ชื่อ สมาชิก เพิ่มสมาชิกใหม่โดยการคลิกที่สมาชิก เป็ นต้ น อย่างไรก็ตามถ้ าผู้ดูแ ลระบบ ต้ องการเพิ่มสมาชิกจานวนมากในครั ง้ เดียวสามารถนาเข้ าไฟล์ CSV ได้ จากเมนูอัพโหลด สมาชิกจะสะดวกกว่า หรื อถ้ าต้ องการแก้ ไขข้ อมูลสมาชิกหลายคนพร้ อมกันสามารถกระทาได้ โดยผ่านทางเมนูการปฏิบตั กิ บั สมาชิกหลายคนใน คราวเดียว

แผนภาพที่ 4.23 หน้ ารายชื่อสมาชิก (3) การจัดการเกี่ยวกับรายวิชา ในการจัดการรายวิชาจะสามารถทาได้ ผ่านทางเมนูรายวิชา ซึง่ ประกอบด้ วยเมนู ย่อยต่อไปนี ้ (1) เพิ่ม/แก้ ไข รายวิชา สาหรับสร้ างรายวิชาและประเภทวิชาใหม่ หรื อแก้ ไข รายวิชาหรื อประเภทวิชาที่มีอยู่แล้ ว (2) สมัครเข้ าเรี ยน ใช้ สาหรับตังค่ ้ ารายละเอียดพื ้นฐาน การสมัครเข้ าเรี ยนของรายวิชาทังหมดและวิ ้ ชาที่จะสร้ างขึน้ ใหม่ และ (3) Course default settings ใช้ ตงค่ ั ้ าเริ่ มต้ นพื ้นฐานให้ กบั รายวิชาทังหมดและวิ ้ ชาที่จะสร้ างขึ ้นใหม่

แผนภาพที่ 4.24 เมนูรายวิชาทังหมด ้

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

129

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

แผนภาพที่ 4.25 บล็อค “บล็อค” ตังค่ ้ าบทบาทใหม่ให้ กบั สมาชิกในเฉพาะบล็อกนี ้

ซ่อน/ยกเลิกการซ่อน แก้ ไขการตังค่ ้ าบล็อก

ลบบล็อก เลื่อนตาแหน่งของบล็อคขึ ้นลง

เลื่อนตาแหน่งของบล็อกไปทางฝั่ งซ้ ายหรือขวา

แผนภาพที่ 4.26 ตัวอย่างบล็อก www.ThaiCyberU.go.th

130

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

(5) การจัดการรายวิชาสาหรับผู้สอน สาหรับผู้สอนเมื่อเข้ าสู่ระบบด้ วย Account ในระดับของผู้ดแู ลระบบหรื อระดับของ ผู้สอนก็ตามจะสามารถจัดการข้ อมูลภายในรายวิชาได้ เช่นเดียวกัน เพียงแต่ Account ระดับ ผู้สอนจะไม่สามารถจัดการข้ อมูลในหน้ าแรกของเว็บไซต์และข้ อมูลหลักของระบบได้ เมื่อเข้ ามาสู่รายวิชาแล้ วจะปรากฏบล็อค “การจัดการระบบ” ขึน้ มาทางซ้ ายมือ ผู้สอนสามารถปรับตังค่ ้ าต่าง ๆ ของรายวิชาได้ จากบล็อคนี ้ ดังนี ้  ปิ ดการแก้ ไขในหน้ านี ้ สาหรับปิ ดการแก้ ไขหน้ ารายวิชา  การตัง้ ค่ า ใช้ กาหนดค่าระบบและการแสดงผลต่าง ๆ ของรายวิชา  Assign roles ใช้ ตงค่ ั ้ าบทบาทสมาชิกของรายวิชา รวมถึงการนาเข้ า ผู้เรี ยนสู่รายวิชาด้ วย  คะแนนทัง้ หมด ใช้ แสดงคะแนนของผู้เรี ยน  กลุ่ม ใช้ ตงค่ ั ้ ากลุ่มผู้เรี ยน และจัดผู้เรี ยนลงกลุ่มต่าง ๆ  การสารองข้ อมูล  กู้คืน ใช้ เรี ยกข้ อมูลที่สารองไว้ กลับมา  นาเข้ า ใช้ นาเข้ ากิจกรรมจากรายวิชาอื่น  รีเซ็ท ใช้ คืนค่าเริ่ มต้ นในส่วนที่ต้องการ  รายงาน ใช้ แสดงการรายงานผลต่าง ๆ ในรายวิชา  คาถาม ใช้ เรี ยกคาถามต่าง ๆ จากคลังข้ อสอบ  ไฟล์ ใช้ จดั การไฟล์ตา่ ง ๆ ของรายวิชาที่อพั โหลดไว้  ประวัตสิ ่ วนตัว ใช้ แก้ ไขข้ อมูลส่วนตัวของ Account

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

131

แผนภาพที่ 4.27 บล็อค “การจัดการระบบ” ในส่วนของรายวิชา (6) การเพิ่มเนือ้ หาให้ กับรายวิชา นอกจากการเพิ่มและแก้ ไขบล็อคต่าง ๆ ให้ กบั หน้ ารายวิชาได้ เช่นเดียวกับผู้ดแู ลระบบ แล้ ว ผู้สอนยังสามารถเพิ่มเนื ้อหาต่างให้ กับรายวิชาให้ กบั ส่วนแสดงเนื ้อหาตรงกลางได้ อีกด้ วย ซึง่ ในส่วนของเนือ้ หาแต่ละหัวข้ อหรื อแต่ละรายสัปดาห์จะมีกล่องรายการด้ วยกัน 2 กล่องอยู่ ทางมุมล่างขวา คือกล่องรายการ “เพิ่มแหล่งข้ อมูล” และกล่องรายการ “เพิ่มกิจกรรม” กล่องรายการ “เพิ่มแหล่งข้ อมูล” นันใช้ ้ สาหรับเพิ่มเนื ้อหาในรู ปแบบต่าง ๆ เพื่อให้ ผู้เรี ยนศึกษา ลักษณะของการนาเสนอจะเป็ นแบบทางเดียวที่ผ้ เู รี ยนจะไม่สามารถโต้ ตอบหรื อ มีปฏิสมั พันธ์ได้ โดยรู ปแบบการนาเสนอแหล่งข้ อมูลมีดงั ต่อไปนี ้    

Label ใช้ แสดงข้ อความ รู ปภาพต่าง ๆ โดยตรงบนหน้ ารายวิชา หน้ าตัวหนังสือธรรมดา แสดงข้ อมูลในรู ปแบบตัวอักษรธรรมดาอย่างเดียว หน้ าเว็บเพจ แสดงข้ อมูลในลักษณะของหน้ าเว็บเพจที่สามารถแทรกสื่ อ ต่าง ๆ ลงไปได้ ไฟล์ หรื อเว็บไซต์ เชื่อมโยงไปยังไฟล์หรื อเว็บไซต์ที่ต้องการทังภายในและ ้ ภายนอกระบบ www.ThaiCyberU.go.th

132

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ



ไดเรกทอรี แสดงไดเรกทอรี ที่กาหนดเพื่อให้ ผ้ เู รี ยนสามารถดาวน์โหลดไฟล์ ต่าง ๆ ในไดเรกทอรี นนได้ ั้

แผนภาพที่ 4.28 กล่องรายการ “เพิ่มแหล่งข้ อมูล” ส่วนกล่องรายการ “เพิ่มกิจกรรม” นันใช้ ้ สาหรับเพิ่มกิจกรรมออนไลน์ให้ ผ้ เู รี ยนได้ ศึกษา และมีปฏิสมั พันธ์ระหว่างกันหลาย ๆ รู ปแบบ โดยในแต่ละกิจกรรมสามารถให้ คะแนน กับผู้เรี ยนได้ ทงแบบก ั้ าหนดเองและอัตโนมัติ กิจกรรมในรายการนีท้ งหมดจะสามารถเลื ั้ อก รู ปแบบการแบ่งกลุ่มผู้เรี ยนในการทากิจกรรมต่างจากแหล่งข้ อ มูลที่ไม่สามารถแบ่งกลุ่ม ศึกษาได้

แผนภาพที่ 4.29 กล่องรายการ “เพิ่มกิจกรรม

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

133

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

แผนภาพที่ 4.30 ตัวอย่างแหล่งข้ อมูลและกิจกรรม 4. การใช้ งานเว็บไซต์ ในส่ วนของ Joomla! เบือ้ งต้ น การใช้ งานเว็บไซต์ในส่วนของ Joomla! เบื ้องต้ น ประกอบด้ วย (1) การติดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง (2) ขันตอนการติ ้ ดตัง้ Joomla! (3) การจัดการส่วน ของผู้ดแู ลระบบ (4) การจัดการกับเนื ้อหาใน Joomla! (5) การสร้ าง Section และ Category เพื่อจัดหมวดหมู่บทความ (6) การสร้ างหรื อแก้ ไข Article เพื่ อเพิ่มเนื อ้ หาให้ กับเว็บไซต์ (7) การจัดการเมนูใน Joomla! (8) ข้ อแนะนาในการปรับปรุ งเนื ้อหาของเว็บไซต์ (9) การเพิ่ม ประสิทธิภาพให้ กบั Joomla! ด้ วย Extention และ (10) การติดตัง้ Extension ให้ กบั Joomla!

www.ThaiCyberU.go.th

134

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.31 เว็บไซต์ที่พฒ ั นาจาก Joomla! (1) การติดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่อง เนื่องจาก Joomla! เป็ น CMS ที่เขียนขึ ้นด้ วยสคริ ปต์ PHP ดังนันจึ ้ งต้ องมีการเตรี ยม ความพร้ อมของเครื่ องโดยการติดตัง้ ซอฟต์แวร์ ที่จาเป็ นต่าง ๆ ดังนี ้ (1) Web Server Apache version 1.3 ขึ ้นไป (2) PHP version 4.3 ขึ ้นไป และ (3) ระบบจัดการฐานข้ อมูล MySQL version 3.23 ขึ ้นไป สรุ ปได้ ว่า การติดตัง้ AppServ จึงเปรี ยบเสมือนการจาลอง เครื่ องคอมพิวเตอร์ ของเราให้ เป็ น Web Server ที่สามารถรองรับระบบจัดการฐานข้ อมูลได้ นัน่ เอง ขันตอนการติ ้ ดตัง้ AppServ เป็ นการเพื่อทดสอบ Joomla! ในเครื่ อง มีดงั นี ้ 1. ดับเบิ ้ลคลิกที่ตวั ติดตัง้ AppServ

แผนภาพที่ 4.32 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

2. หน้ าต่างติดตังจะเปิ ้ ดขึ ้นมา ให้ คลิกปุ่ ม Next

แผนภาพที่ 4.33 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 3. อ่านเงื่อนไขและข้ อตกลงในการใช้ งาน จากนันให้ ้ คลิกปุ่ ม I Agree

แผนภาพที่ 4.34 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

www.ThaiCyberU.go.th

135

136

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

4. เลือกตาแหน่งที่ต้องการติดตังโปรแกรม ้ (ค่ามาตรฐานกาหนดที่ C:\Appserv) จากนันคลิ ้ กปุ่ ม Next

แผนภาพที่ 4.35 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 5. เลือก Components ที่ต้องการติดตัง้ จากนัน้ กดปุ่ ม Next

แผนภาพที่ 4.36 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

137

6. ระบุชื่อ Server ในช่อง “Server name” (ปกติจะตังว่ ้ า localhost (สาหรับระบบ ปฏิบตั ิการ WindowsXP) แต่สาหรั บระบบปฏิบตั ิการ Windows7/ Vista ให้ ใส่ 127.0.0.1)

แผนภาพที่ 4.37 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 7. ระบุอีเมลของผู้ดแู ลระบบ ที่ “Administrator’s E-mail address” ซึง่ สามารถใส่ อะไรก็ได้ จากนันกดปุ่ ้ ม Next

แผนภาพที่ 4.38 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

www.ThaiCyberU.go.th

138

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

8. ระบุรหัสผ่านของฐานข้ อมูลลงในช่อง “Enter root password”

แผนภาพที่ 4.39 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 9. ระบุรหัสผ่านของฐานข้ อมูลซ ้าอีกครัง้ ในช่อง “Re-enter root password” จากนัน้ คลิกปุ่ ม install

แผนภาพที่ 4.40 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

10. รอโปรแกรมติดตังจนส ้ าเร็ จ จากนันคลิ ้ กปุ่ ม Next

แผนภาพที่ 4.41 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 11. เมื่อติดตังโปรแกรมเสร็ ้ จแล้ วให้ คลิกปุ่ ม Finish

แผนภาพที่ 4.42 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

www.ThaiCyberU.go.th

139

140

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

12. ไปยังโฟลเดอร์ Joomla ที่ได้ เตรี ยมไว้ ดับเบิ ้ลคลิกเข้ าไป

แผนภาพที่ 4.43 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 13. คลิกขวาที่โฟลเดอร์ Joomla เพื่อคัดลอกโฟลเดอร์ Joomla

แผนภาพที่ 4.44 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

14. จากนัน้ ไปยังตาแหน่งที่เราติดตัง้ AppServe เอาไว้

แผนภาพที่ 4.45 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง 15. ในโฟลเดอร์ AppServe ให้ ไปยังโฟลเดอร์ www แล้ วทาการวางโฟลเดอร์ Joomla ที่ได้ คดั ลอกไว้

แผนภาพที่ 4.46 ขันตอนการติ ้ ดตัง้ AppServ เพื่อทดสอบ Joomla! ในเครื่ อง เป็ นอันเสร็ จขันตอนการติ ้ ดตัง้ AppServe เพื่อทดสอบ Joomla! ในเครื่ อง

www.ThaiCyberU.go.th

141

142

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

(2) ขัน้ ตอนการติดตัง้ Joomla! เนื่องจากโปแกรม Joomla! เป็ น โอเพนซอร์ ซ ท่านจึงสามารถดาวน์โหลดโปรแกรม ได้ ที่ http://www.joomla.org โดยบันทึกโปรแกรมไว้ ที่ C:\AppServ\www จากนัน้ เมื่อดาวน์ โหลดไฟล์เสร็ จเรี ยบร้ อยแล้ ว ขอให้ ดาเนินการตามขันตอนต่ ้ าง ๆ ต่อไปนี ้  พิมพ์ที่อยู่ของเว็บที่เราได้ ตดิ ตัง้ Joomla เอาไว้ กรณีทดสอบระบบในเครื่ องให้ ใช้ http://localhost/ (สาหรับระบบปฏิบตั กิ าร WindowsXP) หรื อ http://127.0.0.1/ (สาหรับระบบปฏิบตั กิ าร Windows7/ Vista) ตามด้ วยชื่อโฟลเดอร์ ที่ตงไว้ ั ้ (ในที่นี ้ คือ Joomla)

แผนภาพที่ 4.47 ขันตอนการติ ้ ดตัง้ Joomla!  จากนันขอให้ ้ เลือกภาษาที่ต้องการ ในที่นี ้จะเลือก Th หรื อภาษาไทย แล้ วคลิกปุ่ ม “ถัดไป”

แผนภาพที่ 4.48 ขันตอนการติ ้ ดตัง้ Joomla!

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

 จะเป็ นหน้ าตรวจสอบการติดตัง้ ให้ คลิกปุ่ มถัดไปอีกครัง้ หนึง่

แผนภาพที่ 4.49 ขันตอนการติ ้ ดตัง้ Joomla!

 อ่านข้ อตกลงเกี่ยวกับลิขสิทธิ์ แล้ วคลิกปุ่ ม “ถัดไป”

แผนภาพที่ 4.50 ขันตอนการติ ้ ดตัง้ Joomla!

www.ThaiCyberU.go.th

143

144

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

 ในหน้ านี ้ให้ ระบุข้อมูลต่าง ๆ ดังนี ้ 1. ระบุชื่อโฮสต์ ค่าทัว่ ไปคือ “localhost”

แผนภาพที่ 4.51 ขันตอนการติ ้ ดตัง้ Joomla!

2. ระบุชื่อผู้ใช้ ฐานข้ อมูล ค่าทัว่ ไปคือ “root”

แผนภาพที่ 4.52 ขันตอนการติ ้ ดตัง้ Joomla!

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

3. ระบุรหัสผ่าน

แผนภาพที่ 4.53 ขันตอนการติ ้ ดตัง้ Joomla!

4. ระบุชื่อฐานข้ อมูล

แผนภาพที่ 4.54 ขันตอนการติ ้ ดตัง้ Joomla! เมื่อระบุข้อมูลครบแล้ วให้ คลิกปุ่ ม “ถัดไป”

www.ThaiCyberU.go.th

145

146

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

 คลิกปุ่ ม “ถัดไป” อีกครัง้ หนึง่

แผนภาพที่ 4.55 ขันตอนการติ ้ ดตัง้ Joomla!  ในหน้ านี ้มีข้อมูลที่ต้องระบุเช่นกัน ดังนี ้ 1. ระบุชื่อเว็บไซต์

แผนภาพที่ 4.56 ขันตอนการติ ้ ดตัง้ Joomla! 2. ระบุอีเมลของผู้ดแู ลระบบ

แผนภาพที่ 4.57 ขันตอนการติ ้ ดตัง้ Joomla!

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

3. ระบุรหัสผ่านของผู้ดแู ลระบบ

แผนภาพที่ 4.58 ขันตอนการติ ้ ดตัง้ Joomla! 4. ยืนยันรหัสผ่านอีกครัง้

แผนภาพที่ 4.59 ขันตอนการติ ้ ดตัง้ Joomla! เมื่อระบุข้อมูลครบแล้ วให้ คลิกปุ่ ม “ถัดไป”

www.ThaiCyberU.go.th

147

148

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

 จะมีหน้ าต่างปรากฏขึ ้นมา ให้ คลิกปุ่ ม “ตกลง”

แผนภาพที่ 4.60 ขันตอนการติ ้ ดตัง้ Joomla!  คลิกปุ่ มดูหน้ าเว็บไซต์เพื่อดูตวั อย่าง

แผนภาพที่ 4.61 ขันตอนการติ ้ ดตัง้ Joomla!  แต่เนื่องจากต้ องลบโฟลเดอร์ installation ในโฟลเดอร์ Joomla! เสียก่อน จึงจะดู ตัวอย่างเว็บไซต์ได้ ให้ ไปลบโฟลเดอร์ ดงั กล่าวเสียก่อนแล้ วจึงกลับมาคลิกเลือกดู ตัวอย่างเว็บไซต์อีกครัง้

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.62 ขันตอนการติ ้ ดตัง้ Joomla!  จะปรากฏหน้ าเว็บไซต์เปล่า ๆ ของ Joomla ที่สร้ างไว้

แผนภาพที่ 4.63 ขันตอนการติ ้ ดตัง้ Joomla! เป็ นอันเสร็ จขันตอนการติ ้ ดตัง้ Joomla! ในเครื่ องคอมพิวเตอร์ www.ThaiCyberU.go.th

149

150

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

(3) การจัดการส่ วนของผู้ดูแลระบบ เว็บไซต์สร้ างโดย Joomla! นันจะมี ้ ส่วนหลักของเว็บไซต์ด้วยกัน 2 ส่วน คือ ส่วน ของ Front-end ที่เป็ นหน้ าเว็บไซต์สาหรั บผู้เข้ าชม และส่วน Back-end คือส่วนของผู้ดแู ล ระบบสาหรั บจัดการระบบต่าง ๆ ของเว็บไซต์ โดยมีร ายละเอี ยดขององค์ประกอบ และ ขันตอนการใช้ ้ งานต่าง ๆ ดังนี ้ Front-end 1. ระบุที่อยู่ของเว็บเว็บ คือ http://localhost/ชื่อโฟลเดอร์ ที่ตงไว้ ั ้ ในที่นี ้คือ joomla

แผนภาพที่ 4.64 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) 2. ในส่วนของ Front-end ในหน้ าเว็บไซต์จะประกอบด้ วยส่วนประกอบต่าง ๆ ที่ เรี ยกว่า “โมดูล” การแสดงผลต่าง ๆ บนหน้ าเว็บของ Joomla! จะถูกควบคุมด้ วย โมดูลต่าง ๆ

แผนภาพที่ 4.65 การจัดการส่วนของผู้ดแู ลระบบ (Front-end)

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

ตัวอย่างเช่น 1) โมดูล Latest News สาหรับแสดงบทความล่าสุด

แผนภาพที่ 4.66 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) 2) โมดูล Popular สาหรับแสดงบทความที่มีผ้ เู ข้ าชมมากที่สดุ

แผนภาพที่ 4.67 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) 3) โมดูล Polls สาหรับเก็บรวบรวมข้ อมูลและแสดงผลทางสถิติ

แผนภาพที่ 4.68 การจัดการส่วนของผู้ดแู ลระบบ (Front-end)

www.ThaiCyberU.go.th

151

152

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

4) โมดูล Search สาหรับค้ นหาในเว็บไซต์

แผนภาพที่ 4.69 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) 5) โมดูล Main Menu สาหรับแสดงเมนูหลัก

แผนภาพที่ 4.70 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) 6) โมดูล Resources สาหรับเมนูไปยังแหล่งข้ อมูลต่าง ๆ

แผนภาพที่ 4.71 การจัดการส่วนของผู้ดแู ลระบบ (Front-end) รายละเอียดเพิ่มเติมเกี่ยวกับโมดูลต่าง ๆ ขอให้ ดใู นเรื่ อง Extension

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

153

Back-end 1. ระบุที่อยู่ของเว็บเว็บ คือ http://localhost/ชื่อโฟลเดอร์ ที่ตงไว้ ั ้ /administrator ในที่นี ้ คือ http://localhost/joomla/administrator

แผนภาพที่ 4.72 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) 2. จะเข้ ามาในหน้ าของผู้ดแู ลระบบ ซึง่ จะประกอบด้ วยคาสัง่ ต่าง ๆ ดังนี ้

แผนภาพที่ 4.73 การจัดการส่วนของผู้ดแู ลระบบ (Back-end)

www.ThaiCyberU.go.th

154

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

1) เมนู Site ทาหน้ าที่เกี่ยวกับฐานข้ อมูลหลัก ๆ ของเว็บไซต์ เช่น การจัดการผู้ใช้ การจัดการไฟล์ หรื อการตังค่ ้ าเบื ้องต้ นของเว็บไซต์

แผนภาพที่ 4.74 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) 2) เมนู Menus ทาหน้ าที่จดั การเกี่ยวกับเมนูและลิงค์เชื่อมโยงต่าง ๆ ภายในเมนูของเว็บไซต์

แผนภาพที่ 4.75 การจัดการส่วนของผู้ดแู ลระบบ (Back-end)

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

3) เมนู Content ทาหน้ าที่จดั การกลุ่มของบทความและบทความต่าง ๆ ใน เว็บไซต์

แผนภาพที่ 4.76 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) 4) เมนู Componentsทาหน้ าที่ปรับ/ตังค่ ้ า การทางานของ Components ต่าง ๆ ของเว็บไซต์

แผนภาพที่ 4.77 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) www.ThaiCyberU.go.th

155

156

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

5) เมนู Extension ใช้ install และลบ Extension ต่าง ๆ รวมถึงการตังค่ ้ า และจัดการ Extension อื่น ๆ ที่นอกเหนือจาก Component นัน้

แผนภาพที่ 4.78 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) 6) เมนู Tools เป็ นที่รวบรวมเครื่ องมือสนับสนุนการทางานในระบบต่าง ๆ ไม่วา่ จะเป็ นส่งข้ อความไปยังสมาชิก การอ่าน-เขียนข้ อความส่วนตัว

แผนภาพที่ 4.79 การจัดการส่วนของผู้ดแู ลระบบ (Back-end)

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

157

7) เมนู Help รวบรวมข้ อความให้ ความช่วยเหลือต่าง ๆ

แผนภาพที่ 4.80 การจัดการส่วนของผู้ดแู ลระบบ (Back-end) (4) การจัดการกับเนือ้ หาใน Joomla! ส่วนของเนื ้อหาใน Joomla! ประกอบด้ วยโครงสร้ าง 3 ส่วน คือ 1. Article คือ ข้ อมูลหรื อเนื ้อหาในแต่ละหน้ าของเว็บไซต์ ไม่ว่าจะเป็ นข่าวแต่ละ ข่าว บทความแต่ละบทความ หรื อรายละเอียดสินค้ าแต่ละรายการ ถือว่าเป็ น Article ทังสิ ้ ้น 2. Category คือ หมวดหมู่ย่อยของ Article ซึ่งเก็บรวบรวม Article ที่อยู่ใน หมวดเดียวกันไว้ ด้วยกัน 3. Section คือ หมวดหมู่หลักของ Article ซึ่งเก็บรวบรวม Category ที่อยู่ใน หมวดเดียวกันไว้ ด้วยกัน โดย Section จะเป็ นส่วนที่ใหญ่สุดที่เก็บรวมรวม Category ต่าง ๆ ที่เกี่ยวข้ องกับ Section เอาไว้ และในแต่ละ Category ก็จะมีการเก็บรวบรวมบทความประเภทเดียวกันไว้ อีกทีหนึ่ง ความสัมพันธ์ ร ะหว่าง Article, Category และ Section เป็ นไปตามแผนภาพ ดังต่อไปนี ้

www.ThaiCyberU.go.th

158

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.81 ความสัมพันธ์ระหว่าง Article, Category และ Section ถ้ าลองเปรี ยบเทียบกับ Directory ของคอมพิวเตอร์ ก็จะมีการสร้ างไดเรคทอรี หลัก (Section) สาหรั บการเก็บข้ อมูล และภายในไดเรคทอรี หลักก็อ าจจะมี การสร้ างไดเรคทอรี ย่อย (Category) แล้ วจึงจัดเก็บไฟล์ (Article) ไว้ ในไดเรคทอรี ย่อยเหล่านันอี ้ กทีหนึ่ง เพียงแต่ โครงสร้ างของ Joomla! มีเพียง 2 ระดับเท่านัน้ คือ Section และ Category ไม่สามารถสร้ าง กลุ่มย่อยลงไปอีกได้ เรื่ อย ๆ เหมือนไดเรคทอรี ในเครื่ องคอมพิวเตอร์

แผนภาพที่ 4.82 Directory ของคอมพิวเตอร์

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

159

ยกตัว อย่า งเช่ นเรามี บทความเกี่ ยวกับด้ า นเทคโนโลยี จ านวนหนึ่งก็ ย่อ มต้ อ งมี การจัดหมวดหมู่หลัก หรื อ Section ของบทความเพื่อให้ ง่ายต่อการค้ นหา เช่ น แบ่งออกเป็ น ด้ านเทคโนโลยี ด้ านคอมพิวเตอร์ เป็ นต้ น จากนันในแต่ ้ ละหมวดหมู่ก็ยงั มีกลุ่มของบทความที่ คล้ ายกันอีก จึงจัดเป็ นหมวดหมู่ย่อย หรื อ Category ขึ ้นมา เช่น ในหมวดเทคโนโลยีก็อาจจะ แบ่งเป็ นกลุ่มบทความด้ านเทคโนโลยีสารสนเทศกับกลุ่มบทความด้ านเทคโนโลยีการสื่อ สาร หรื อในหมวดคอมพิวเตอร์ ก็สามารถแบ่งเป็ นกลุ่มบทความด้ านฮาร์ ดแวร์ กับกลุ่มบทความ ด้ านซอฟต์แวร์ เป็ นต้ น

แผนภาพที่ 4.83 ตัวอย่างความสัมพันธ์ของหมวดหมู่หลักและหมวดหมู่ย่อยในบทความ ในกรณีที่เว็บไซต์มีขนาดใหญ่ไม่มากและต้ องการความรวดเร็ วผู้ใช้ สามารถสร้ าง Article ไม่ ใ ห้ จัด อยู่ ใ นหมวดหมู่ ใ ดก็ ไ ด้ ถื อ ว่ า เป็ น Article แบบโดด ๆ ที่ เ รี ย กว่ า Uncategorized มักใช้ กับข้ อมูลเฉพาะที่ไม่มีการแก้ ไขหรื อไม่เกี่ยวข้ องกับเนือ้ หาหลัก เช่น เงื่อนไขลิขสิทธิ์ กฎระเบียบข้ อตกลง เป็ นต้ น

www.ThaiCyberU.go.th

160

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

(5) การสร้ าง Section และ Category เพื่อจัดหมวดหมู่บทความ ก่อนที่เราจะสร้ าง Article ใด ๆ เราควรมีการสร้ าง Section และ Category ขึ ้นมา ก่อนเพื่อช่วยในการจัดเก็บ Article ให้ เป็ นหมวดหมู่ เพื่อช่วยให้ เกิดความสะดวกในการค้ นหา และมองเห็นความสัมพันธ์ ของ Article ต่าง ๆ ซึ่งสามารถสร้ างหรื อแก้ ไข Section และ Category ได้ ง่าย ๆ โดยคลิกที่เมนู Content แล้ วคลิกที่ Section Manager หรื อ Category Manager จากนันจึ ้ งคลิกที่ปมุ่ New ทางขวามือ เพื่อสร้ าง Section หรื อ Category ใหม่ หรื อ คลิกที่ Section หรื อ Category ที่มีอยู่แล้ วเพื่อทาการแก้ ไข ซึ่งในการสร้ าง Section และ Category นัน้ ต้ องมีการกาหนดพารามิเตอร์ ที่สาคัญหลายตัวซึง่ จะมีความคล้ ายคลึงกัน ดังนี ้ ตารางที่ 4.1 รายละเอียดพารามิเตอร์ ในการสร้ าง Section และ Category พารามิเตอร์ Title Alias Published Order

Access Level Image Image Position Description

รายละเอียด ชื่อของ Section หรื อ Category (บังคับใส่เพียงอันเดียว นอกนันละไว้ ้ ได้ ทงหมด) ั้ กาหนดชื่อ Alias สาหรับทา SEF (Search Engine Friendly) ตัวเลือกที่กาหนดว่าต้ องการใช้ งาน Section นี ้หรื อไม่ ค่าปกติคือ Yes .

กาหนดลาดับการจัดเรี ยง (ครัง้ แรกที่สร้ างจะยังกาหนดไม่ได้ Section ที่ สร้ างใหม่จะไปอยู่ท้ายสุด ต้ อ งเข้ ามาแก้ ไขอีกครั ง้ ก่อ นจึงจะกาหนด ลาดับได้ ) กาหนดขอบเขตการใช้ งานว่าเป็ น Public, Registered หรื อ Special ค่าปกติคือ Public (เปิ ดเผยสาธารณะ ใครก็สามารถเข้ ามาดูได้ ) กาหนดภาพ Icon สาหรับ Section (ไฟล์ภาพในไดเรคทอรี images\stories) กาหนดตาแหน่งการวางภาพ รายละเอียดและข้ อมูลเพิ่มเติมเกี่ยวกับ Section และ Category

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

161

แผนภาพที่ 4.84 พารามิเตอร์ ตา่ งในการสร้ าง Section และ Category (6) การสร้ างหรือแก้ ไข Article เพื่อเพิ่มเนือ้ หาให้ กับเว็บไซต์ เมื่อผู้ใช้ สร้ าง Section และ Category พร้ อมแล้ วถัดมาคือการเพิ่มเนื ้อหาให้ กับ เว็บ ไซต์ ด้วยการเขี ยนบทความเพื่ อ นาไปแสดงยังหน้ าเว็บ การเพิ่ม บทความก็ท าเช่ นกับ การสร้ าง Section และ Category โดยคลิกที่เมนู Content แล้ วคลิกที่ Article Manager จากนันจึ ้ งคลิกที่ปมุ่ New ทางขวามือ เพื่อสร้ างบทความใหม่ หรื อคลิกที่บทความที่มีอยู่แล้ ว เพื่ อ ทาการแก้ ไข บทความที่ส ร้ างขึน้ ใหม่จะเป็ นล าดับแรกของการนาเสนอเสมอ ซึ่งผู้ใ ช้ สามารถปรับเปลี่ยนลาดับของบทความได้ โดยคลิกที่ลูกศรในคอลัมน์ Order หรื อระบุลาดับ เลขที่ต้องการลงไปก็ได้ เช่นเดียวกัน

www.ThaiCyberU.go.th

162

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.85 การเปลี่ยนลาดับของบทความ ในส่วนของการสร้ าง Article แต่ละรายการนัน้ จะมีพารามิเตอร์ สาคัญที่ต้องระบุซงึ่ ในที่นี ้ได้ แบ่งออกเป็ น 2 กลุ่ม ดังที่เห็นในวงกลมในแผนภาพที่ 4.86

แผนภาพที่ 4.86 กลุ่มของพารามิเตอร์ สาคัญในการสร้ าง Article

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

163

พารามิเตอร์ ในกลุ่ม A นัน้ เป็ นพารามิเตอร์ ส่วนสาคัญของ Article ที่ผ้ ูใช้ ควร ตรวจสอบให้ แน่ชดั ถูกต้ องก่อนบันทึกข้ อมูล ดังแสดงในตารางที่ 4.2 ตารางที่ 4.2 รายละเอียดของพารามิเตอร์ ในกลุ่ม A พารามิเตอร์ Title Alias

รายละเอียด

ชื่อของ Article ชื่อของ Alias ของ Article สาหรับทา SEF (Search Engine Friendly) สามารถละไว้ ได้ Published ต้ องการแสดง Article นี ้ในห้ าเว็บไซต์หรื อไม่ ค่าปกติคือ Yes Front Page ต้ องการแสดง Article นี ้ในหน้ าแรกของเว็บไซต์หรื อไม่ ค่าปกติคือ No Section เลือก Section ของ Article Category เลือก Category ของ Article รายละเอียดของ เนื ้อหาของ Article ซึง่ เป็ น Textbox ให้ ผ้ ใู ช้ สามารถกรอกข้ อมูล Article เหมือนการใช้ งาน Editor พารามิเตอร์ ในกลุ่ม B นันเป็ ้ นตัวเลือกที่ผ้ ใู ช้ สามารถกาหนดเพิ่มเติมหรื อใช้ ค่าปกติ ที่ตงไว้ ั ้ อยู่แล้ วก็ได้ พารามิเตอร์ กลุ่มนีป้ ระกอบด้ วยกันด้ วยกัน 3 แท็บ คือ Parameters – Article, Parameters – Advanced และ Metadata – Information

www.ThaiCyberU.go.th

164

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

โดยในแท็บ Parameters – Article นันเป็ ้ นพารามิเตอร์ ที่กาหนดข้ อมูลและสร้ าง รายละเอียดเพิ่มเติมเกี่ยวกับ Article ที่สร้ าง ดังแสดงในตารางที่ 4.3 ตารางที่ 4.3 รายละเอียดของพารามิเตอร์ ในกลุ่ม B แท็บ Parameters – Article พารามิเตอร์ Author

Created Date

รายละเอียด กาหนดชื่อผู้สร้ าง Article เพื่อแสดงว่าใครเป็ นคนสร้ าง Article ชุดนี ้โดย ปกติ คือ ผู้ล็อกอินปั จจุบนั กาหนดนามแฝงกรณีที่ไม่ต้องการแสดงชื่อผู้สร้ าง สิทธิ์ในการเปิ ดอ่าน Article ซึง่ แบ่งเป็ น 3 ระดับ คือ Public, Registered หรื อ Special ค่าปกติคือ Public ซึง่ อนุญาตให้ ทกุ คน สามารถอ่านข้ อมูลใน Article นี ้ได้ ระบุวนั ที่และเวลาที่สร้ าง Article โดยค่าปกติคือ วันที่และเวลาปั จจุบนั

Start Publishing Finish Publishing

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

Author Alias Access Level

พารามิเตอร์ ในแท็บ Parameters – Advanced เป็ นพารามิเตอร์ ที่กาหนดข้ อมูล การแสดงผลของ Article พารามิเตอร์ ในกลุ่มนี ้จะถูกกาหนดเป็ น Use Global ทังหมดตามที ้ ่ กาหนดไว้ ในหน้ า Article Manager ซึง่ จะส่งผลทังเว็ ้ บไซต์ ทาให้ เราไม่ต้องมาปรับแก้ ไขในแต่ ละ Article ดังนัน้ เราจึงไม่นิยมแก้ ไขค่าเหล่านี ้ ยกเว้ นหากต้ องการกาหนดค่าเพื่อให้ มีผล เฉพาะ Article ชุดนี ้ชุดเดียว ถ้ าหากต้ องการปรับแต่งค่าปกติให้ มีผลกับ Article ทังหมดก็ ้ สามารถแก้ ไขในหน้ า Article Manager ได้ โดยคลิกที่ปมุ่ Parameterในหน้ า Article Manager จะพบหน้ ากาหนด ค่าพารามิเตอร์ Global ของ Article ทังหมด ้

แผนภาพที่ 4.87 ไอคอนตังค่ ้ า Parameter Global

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

165

ตารางที่ 4.4 รายละเอียดของพารามิเตอร์ ในกลุ่ม B แท็บ Parameters – Advanced พารามิเตอร์ รายละเอียด Show Title ต้ องการแสดงชื่อ Title ของ Article หรื อไม่ Title Linkable ต้ องการสร้ างลิงก์จากหัวข้ อเพื่อคลิกเข้ าไปอ่านรายละเอียด ของ Article ได้ หรื อไม่ Intro Text ต้ องการแสดงข้ อความเกริ่ นนาของ Article หรื อไม่ Section Name ต้ องการแสดงชื่อ Section ของ Article นี ้หรื อไม่ Section Title Linkable ต้ องการสร้ างลิงก์บนชื่อ Section เพื่อคลิกเข้ าไปดูใน Article อื่น ๆ ที่อยู่ใน Section เดียวกันหรื อไม่ Category Name ต้ องการแสดงชื่อ Category ของ Article นี ้หรื อไม่ Category Title Linkable ต้ องการสร้ างลิงก์บนชื่อ Category เพื่อคลิกเข้ าไปดูใน Article อื่น ๆ ที่อยู่ใน Category เดียวกันหรื อไม่ Article Rating ต้ องการให้ มีการแสดง Article Rating หรื อไม่ Author Name ต้ องการแสดงชื่อผู้สร้ าง Article หรื อไม่ Created Date and Time ต้ องการแสดงวันที่สร้ าง Article หรื อไม่ Modified Date and Time ต้ องการแสดงวันที่แก้ ไข Article ครัง้ ล่าสุดหรื อไม่ PDF Icon ต้ องการแสดงไอคอน PDF สาหรับสร้ างไฟล์ PDF จาก Article หรื อไม่ Print Icon ต้ อ งการแสดงไอคอน Print ส าหรั บพิ ม พ์ ข้ อ มูล ออกทาง เครื่ องพิมพ์หรื อไม่ E-mail Icon ต้ องการแสดงไอคอน E-mail สาหรับส่งเมลเพื่อส่งลิงก์ของ Article นี ้ไปให้ คนอื่นหรื อไม่ Content Language เลือกภาษาที่ใช้ เขียน Article ชุดนี ้ Key Reference กาหนด Keyword สาหรับเชื่อมโยงมายัง Article ชุดนี ้ Alternative Read more: กาหนดประโยคที่จะแสดงเพื่ อ สร้ างลิงก์ ให้ คลิกเข้ าไปอ่า น text รายละเอี ยดทัง้ หมดของ Article ในกรณี ที่กาหนดให้ แ สดง ข้ อมูลเพียงบางส่วนและต้ องการให้ ผ้ ูชมคลิกลิงก์เข้ าไปอ่าน รายละเอียดเพิ่มเติม www.ThaiCyberU.go.th

166

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

พารามิเตอร์ ในแท็บ Metadata – Information เป็ นส่วนของข้ อมูลเกี่ยวกับ Article ที่เราสร้ างขึ ้นมาซึง่ จะไม่แสดงให้ ผ้ ชู มทัว่ ไปเห็น แต่จะเป็ นข้ อมูลให้ Search Engine สามารถ ค้ นหาข้ อมูลจาก Article ที่เราสร้ างขึ ้นมาได้ ดังรายละเอียดในตารางที่ 4.5 ตารางที่ 4.5 รายละเอียดของพารามิเตอร์ ในกลุ่ม B แท็บ Metadata - Information พารามิเตอร์ รายละเอียด Description เป็ นการกาหนดรายละเอียดโดยสรุ ปของเนื ้อหาใน Article ซึง่ Search Engine จะนารายละเอียดนี ้ไปแสดงภายใต้ หวั ข้ อของผลลัพธ์ที่ได้ จาก การค้ นหาข้ อมูล Keywords ระบุ Keywords ที่เกี่ยวข้ องกับ Article Robots ระบุ Keywords สาหรับโปรแกรม Robot ที่เข้ ามาค้ นหาข้ อมูล Author กาหนดชื่อผู้สร้ าง Article (7) การจัดการเมนูใน Joomla! Article ที่สร้ างขึ ้นจะยังไม่นาเสนอเนื ้อหาในทันทีที่แสดง ผู้ใช้ จาเป็ นต้ องสร้ างเมนู เพื่อเชื่อมโยงไปยัง Article ที่สร้ างขึน้ ในการสร้ างเมนูก็ทาเช่นเดียวกับการสร้ าง Section, Category หรื อ Article คือคลิกที่เมนู Menus และเลือก Menu Manager จะปรากฏหน้ าต่าง ให้ ผ้ ใู ช้ กรอกรายละเอียด จากนันจึ ้ งคลิกที่ปมุ่ Save เพื่อบันทึกการตังค่ ้ า อย่างไรก็ตามเมนูที่ สร้ างขึน้ จะยัง ไม่ มี ร ายการภายใน ผู้ใ ช้ จ าเป็ นต้ อ งเพิ่ ม รายการภายในเมนูโ ดยคลิ ก ที่ เมนูที่ต้องการจากเมนู Menus หรื อ คลิกที่ไอคอน ในคอลัมน์ Menu Item(s) ใน Menu Manager และคลิกปุ่ ม New เพื่อสร้ างรายการใหม่หรื อคลิกที่รายการเมนูที่มีอยู่แล้ ว เพื่อแก้ ไข อย่างไรก็ตามในเว็บไซต์ได้ สร้ างเมนู Main Menu (เมนูหลัก) ที่แสดงด้ านบนของ เว็บไซต์ เมนู Class Menu (เมนูห้องเรี ยนอีเลิร์นนิง ) และเมนู External Link (เว็บไซต์ที่ เกี่ยวข้ อ ง) ที่แสดงทางขวามือ ของเว็บไซต์ไว้ อยู่แล้ ว ผู้ใช้ เพียงแค่ เพิ่มรายการเมนูโดยไม่ จาเป็ นต้ องสร้ างเมนูใหม่เพิ่มขึ ้นมาอีก

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

167

เมื่อคลิกที่ปมุ่ New จะปรากฏหน้ าให้ เลือกรู ปแบบเมนูที่ต้องการหลายรู ปแบบไม่ ว่าจะเป็ นการแสดง Article การเชื่ อมโยงไปยังคอมโพเนนต์ต่าง หรื อการเชื่อ มโยงไปยัง เว็บไซต์ภายนอก เป็ นต้ น สาหรับการแสดง Article ผู้ใช้ สามารถเลือกแสดง Article ได้ หลาย รู ปแบบอีกเช่นกัน เช่น แสดงเพียง Article เดียว ด้ วยการคลิกที่ Article Layout หรื อจะแสดง Article ทังหมดใน ้ Section หรื อ Category ที่ต้องการก็ได้ เช่นเดียวกัน เมื่อเลือกรู ปแบบเมนู ที่ต้องการแล้ วผู้ใช้ จาเป็ นต้ องตังค่ ้ าพารามิ เตอร์ เลือก Article, Section หรื อ Category ที่ ต้ องการเชื่อมโยงไปด้ วย

แผนภาพที่ 4.88 หน้ าเลือกรู ปแบบเมนู อย่างไรก็ตามเมนูที่สร้ างขึ ้นจะแสดงเฉพาะทางขวามือ การแสดงผลของเมนูจะถูก ควบคุมด้ วยโมดูลอีกทีหนึ่ง ดังนันผู ้ ้ ใช้ จะต้ องปรับตังค่ ้ าเมนูใน Module Manager ซึง่ อยู่ใน Menu Extension ด้ วย เมนูต่าง ๆ จะถูกควบคุมการแสดงผลด้ วยโมดูล Main Menu ถ้ า ต้ องการให้ มีเมนูใหม่นอกเหนือ Main Menu ต้ องเพิ่ม Module Main Menu และตังชื ้ ่อใหม่ ตามเมนูที่ได้ เพิ่มไป

www.ThaiCyberU.go.th

168

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.89 หน้ า Module Manager เมื่อคลิกที่โมดูลที่คุมเมนูที่ต้องการแล้ วจะพบพารามิเตอร์ สาคัญในการปรั บแต่ง เมนูให้ แสดงผลตามความต้ องการ ผู้ใช้ สามารถเลือกตาแหน่งการแสดงผลของเมนูโดยคลิกที่ หัวข้ อ Position เพื่อเลือกตาแหน่งที่ต้องการ ในกรณีที่มีเมนูด้วยกันหลายเมนูในตาแหน่ง เดียวกันผู้ใช้ สามารถเลือกจัดลาดับของเมนูได้ ที่คาสัง่ Order

แผนภาพที่ 4.90 กลุ่มพารามิเตอร์ Detail ภายใน Module Main Menu

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

169

บางครัง้ สาเหตุที่เมนูไม่แสดงในบางหน้ าของเว็บไซต์เนื่องมาจากการตังค่ ้ าโมดูลใน กลุ่มพารามิเตอร์ Menu Assignment ซึง่ เป็ นการกาหนดว่าต้ องการให้ เมนูแสดงในหน้ าเว็บ เพจใดบ้ างในรายการเมนู ผู้ใช้ สามารถเลือกปุ่ ม All เพื่อให้ แสดงเมนูในทุก ๆ หน้ า จากนัน้ เลือกเครื่ องมือ Save เพื่อบันทึกการตังค่ ้ า แต่ถ้าผู้ใช้ ต้องการเลือกให้ เมนูแสดงผลเพียงบาง หน้ าก็สามารถทาได้ โดยคลิกที่ Select Menu Item (s) from List และเลือกหน้ าที่ต้องการให้ เมนูแสดงผล

แผนภาพที่ 4.91 กลุ่มพารามิเตอร์ Menu Assignment ภายใน Module Main Menu ถัดมาในโมดูล Main Menu มีส่วนที่ผ้ ใู ช้ ควรตังค่ ้ าอีกส่วนคือส่วนของ Module Parameters ทางขวามื อซึ่งจะช่วยกาหนดค่าการแสดงผลของเมนูให้ สอดคล้ องกับความ ต้ องการของผู้ใช้ มากขึน้ โดยส่วนที่ควรตังค่ ้ า คือ Menu Name ที่ใช้ สาหรั บเลือกเมนูที่ ต้ อ งการแสดงผลและ Menu Style สาหรั บเลื อ กรู ปแบบการแสดงผล เช่น แนวตังหรื ้ อ แนวนอน เป็ นต้ น

www.ThaiCyberU.go.th

170

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.92 กลุ่ม Module Parameters ภายใน Module Main Menu (8) ข้ อแนะนาในการปรับปรุงเนือ้ หาของเว็บไซต์ เนื่องจากเนือ้ หาของเว็บไซต์ได้ ตงค่ ั ้ าไว้ เหมาะสมกับเมนูแล้ ว ดังนัน้ การปรั บปรุ ง เนื ้อหาของเว็บไซต์จงึ ควรแก้ ไข Article ที่เชื่อมโยงกับเมนูนนั ้ ๆ ไม่ควรที่สร้ าง Article ขึ ้นใหม่ โดยไม่ จาเป็ นอี ก เฉพาะเมนูข่ าวและประกาศเท่านัน้ ที่ผ้ ูใช้ สามารถเพิ่ม บทความใหม่ไ ด้ เนื่องจากเป็ นเมนูเดียวที่จะแสดงบทความทังหมดใน ้ Category (Section ข่าวและประกาศ/ Category ข่าวและประกาศภายในหลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง ) ซึง่ เมนูต่าง ๆ ในเว็บไซต์ นันมี ้ การเชื่อมโยง ดังต่อไปนี ้ ตารางที่ 4.6 เมนูหลัก เมนู หน้ าแรก รายละเอียดหลักสูตร โครงสร้ างหลักสูตร คณาจารย์ การสมัครขอรับทุน สอบถามข้ อมูล แผนผังเว็บไซต์

การเชื่อมโยง Article Layout - หน้ าแรก Article Layout - รายละเอียดหลักสูตร Article Layout - โครงสร้ างหลักสูตร Article Layout - รายชื่อคณาจารย์ในหลักสูตร Article Layout - วิธีการสมัครขอรับทุน Kunena Forum Xmap

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

171

แผนภาพที่ 4.93 เมนูหลัก ตารางที่ 4.7 เมนูห้องเรี ยนอีเลิร์นนิง เมนู การเชื่อมโยง เข้ าสู่ห้องเรี ยน External Link - http://lms9.thaicyberu.go.th/moodle/ ประมวลรายวิชา Article Layout - ประมวลรายวิชา ประกาศผลการเรี ยน Article Layout - ประกาศผลการเรี ยน ข่าวและประกาศ Category Blog Layout - ข่าวและประกาศ/ข่าวและประกาศ ภายในหลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง

แผนภาพที่ 4.94 เมนูห้องเรี ยนอีเลิร์นนิง สาหรับส่วนประกาศ/ประชาสัมพันธ์ ซึ่งอยู่ด้านบนของเว็บไซต์นนจะควบคุ ั้ มด้ วย โมดูล ซึง่ จะเลือกสุ่มบทความใน Section ข่าวและประกาศ/ Category ข่าวประชาสัมพันธ์ ทัว่ ไป มาแสดงทุกครัง้ ที่ Refresh หน้ าเว็บไซต์ ซึง่ ผู้ใช้ สามารถเพิ่ม ลด หรื อแก้ ไขบทความได้ ใน Section และ Category ดังกล่าวได้ อย่างอิสระ และสามารถปรับการแสดงผลของโมดูล ได้ ที่ Module ประกาศ/ประชาสัมพันธ์ ใน Module Manager

www.ThaiCyberU.go.th

172

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.95 News Flash ประกาศ/ประชาสัมพันธ์ (9) การเพิ่มประสิทธิภาพให้ กับ Joomla! ด้ วย Extension Joomla! Extension เป็ นซอฟต์แวร์ ที่นามาติดตังเพื ้ ่อขยายความสามารถของ Joomla! เพิ่มเติม Extension ของ Joomla! มีให้ เลือกใช้ งานมากมายนับไม่ถ้วนและส่วน ใหญ่ สามารถดาวน์ โหลดได้ ฟ รี จากเว็บไซต์ http://extentions.joomla.org นอกจากนี ต้ ัว Joomla! เองยังมีการติดตัง้ Extension บางส่วนมากับตัวมันเองด้ วยอยู่แล้ ว Extension นัน้ สามารถแบ่งได้ เป็ น 3 ประเภทหลัก ๆ คือ โมดูล (Module), คอมโพเนนต์ (Component) และ ปลัก๊ อิน (Plug-in) โมดูลเป็ นส่วนประกอบที่ใ ช้ สาหรั บ แสดงผลในหน้ าเว็บไซต์ เปรี ยบเสมื อ นเป็ น กล่องแต่ละกล่องหรื อเป็ นบล็อกที่สามารถแสดงผลหรื อติดต่อกับผู้ชมได้ โมดูลจะต้ องมีการ กาหนดตาแหน่ งที่ จะแสดงผลว่าจะวางที่ ตาแหน่ง ใดของเว็บไซต์ เช่ น ด้ า นบน ด้ านซ้ า ย ด้ า นขวา เป็ นต้ น โมดูล ยัง สามารถรั บ ข้ อ มูลจากผู้ช มได้ อี กด้ ว ย โมดูล มี ข้ อ จ ากัด ในการ ปรับแต่งพารามิเตอร์ การทางานได้ เพียงบางส่วนเท่านัน้ ในหน้ าเว็บไซต์ของ Joomla! จะประกอบไปด้ วยโมดูลด้ วยกันหลายตัวดังในภาพที่ 1 โดยใน Joomla! นันได้ ้ มีการสร้ างโมดูลเพื่อไว้ ให้ ใช้ งานจานวนหนึ่งแล้ ว ซึง่ ผู้ใช้ สามารถนา โมดูลเหล่านี ้มาปรั บแต่งค่าพารามิเตอร์ เพื่อนามาสร้ างเป็ นโมดูลใหม่ได้ อีกด้ วย เช่น โมดูล Top Menu, Main Menu, Other Menu และ Key Concepts เป็ นโมดูลที่สร้ างมาจากโมดูล ต้ นแบบเดียวกัน คือ mod_mainmenu เพี ยงแต่มีการกาหนดต าแหน่งในการติดตัง้ และ รู ปแบบการแสดงผลที่แตกต่างกันเท่านัน้ สาหรับโมดูลที่ติดตังมาโดยดี ้ ฟอลต์ใน Joomla! มี ดังที่แสดงในแผนภาพที่ 4.96

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.96 โมดูลต่าง ๆ ใน Joomla! ตารางที่ 4.8 โมดูลที่มีเตรี ยมไว้ ใน Joomla! โมดูล รายละเอียด Archived Content แสดง Article ที่เก็บอยู่ใน Achieve Banner แสดงป้ายโฆษณาบนเว็บไซต์หมุนเวียนสับเปลี่ยนตามที่กาหนด Breadcrumbs แสดงพาธโครงสร้ างของเว็บไซต์ในหน้ าปั จจุบนั ที่เปิ ดดูตาม Section, Category ที่มีการกาหนดไว้ Custom HTML เป็ นโมดูลที่อนุญาตให้ เขียน Code HTML ขึ ้นมาเองได้ เพื่อแสดงผล ตามที่ต้องการ Feed Display แสดง Syndicate Feed Footer แสดงข้ อมูล Joomla! Copyright Latest News แสดงรายการ Article ที่สร้ างขึ ้นมาล่าสุด Login แสดงแบบฟอร์ มสาหรับล็อกอินเข้ าสู่ระบบ www.ThaiCyberU.go.th

173

174

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

โมดูล Menu Most Read Content Newsflash Poll Random Image Related Articles

Search Sections Statistics Syndicate Who’s Online Wrapper

รายละเอียด แสดงเมนูเพื่อเชื่อมโยงไปยังส่วนต่าง ๆ แสดง Article ที่มีผ้ คู ลิกเข้ ามาอ่านเยอะที่สดุ เป็ นโมดูลที่ใช้ ส่มุ เลือก Article จาก Category ที่กาหนดขึ ้นมาแสดง บนเว็บไซต์ โดยทุกครัง้ ที่เปิ ดหน้ าเว็บใหม่ก็จะสุ่มแสดงไปเรื่ อย ๆ แสดงโพลสาหรับให้ ผ้ ชู มเลือกโหวต สุ่มเลือกภาพจากไดเรกทอรี ที่กาหนดมาแสดงบนเว็บไซต์ แสดงลิงค์ไปยัง Article อื่น ๆ ที่มีความเกี่ยวข้ องกับ Article ปั จจุบนั ที่ ผู้อ่านกาลังเปิ ดดูอยู่ โดยตรวจสอบจาก meta keyword ที่กาหนดไว้ ในแต่ละ Article แสดงช่องกรอกข้ อความสาหรับค้ นหาข้ อมูลในเว็บไซต์ แสดง Section ทังหมดที ้ ่สร้ างในเว็บไซต์ สาหรับเชื่อมโยงไปยัง Article ภายใน Section นัน้ ๆ แสดงสถิตเิ กี่ยวกับเซิฟเวอร์ ที่ตดิ ตัง้ Joomla! รวมไปถึงสถิตกิ ารใช้ งานเว็บไซต์ สร้ าง Syndicate Feed ในหน้ าที่แสดงโมดูลนี ้ แสดงจานวนผู้ชมในเว็บไซต์ แสดงหน้ าต่าง iFrame เพื่อเชื่อมไปยังเว็บไซต์ที่กาหนด

คอมโพเนนต์เป็ นส่วนประกอบที่มีความซับซ้ อนมากกว่าโมดูล คอมโพเนนต์มีส่วน ที่แสดงผลในหน้ าเว็บไซต์และมีส่วนที่สามารถปรั บแต่งการทางานในหน้ า Administration คอมโพเนนต์สามารถปรั บแต่งการทางานได้ อย่ างละเอียด สามารถสร้ างลิงก์เพื่อเชื่อมโยง จากเมนูได้ โดยตรงและสามารถแสดงผลได้ ในหน้ าเว็บไซต์ทงหน้ ั ้ า ในขณะที่โมดูลไม่สามารถ สร้ างลิงก์โดยตรงจากเมนูและโมดูลต้ องแสดงผลเพื่อเป็ นส่วนประกอบในหน้ าเว็บไซต์ตาม ตาแหน่งที่กาหนดไว้ เท่านัน้ ในหน้ าเว็บหน้ าหนึ่งสามารถมีคอมโพเนนต์เดียวต่อหน้ า ในขณะ ที่โมดูลสามารถแสดงได้ หลายโมดูล ตัวอย่างเช่น ระบบ Photo gallery, Guest book หรื อ Forum เป็ นต้ น

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

175

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

แผนภาพที่ 4.97 แสดงการทางานร่ วมกันระหว่างโมดูลและคอมโพเนนต์ ใน Joomla! นัน้ มี ค อมโพเนนต์ ดี ฟ อลต์ ม าให้ ถึง 6 คอมโพเนนต์ ด้ ว ยกัน คื อ Banner, Contact, News Feeds, Polls, Search และ Web Links โดยผู้ใช้ สามารถปรับตัง้ ค่าแต่ละคอมโพเนนต์ได้ ภายใต้ เมนู Components

www.ThaiCyberU.go.th

176

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

ตารางที่ 4.9 คอมโพเนนต์ที่มีเตรี ยมไว้ ใน Joomla! คอมโพเนนต์ Banner Contact News Feeds

Polls Search

Web Links

รายละเอียด สาหรับกาหนดค่าเพื่อแสดงป้ายโฆษณาทังแบบรู ้ ปภาพและข้ อความ สาหรับแสดงรายชื่อและรายละเอียดของบุคคล เช่น ชื่อ , ตาแหน่ง, อีเมล, ที่อยู่, เบอร์ โทรศัพท์ เป็ นต้ น ทางานคล้ ายกับโมดูล Feed Display ที่ใช้ สาหรับแสดงข้ อมูล Feed ตรงตาแหน่ง ที่ก าหนดไว้ แต่ News Feeds จะมี ร ายละเอี ยดที่ มากกว่า สามารถกาหนดแหล่งข้ อมูลที่รวบรวม Feed จากที่ต่าง ๆ มารวมกันไว้ ได้ มีหน้ าที่ในการสร้ างโพลใหม่รวมไปถึงการปรับแต่งการทางานของโพล เพื่อนาไปแสดงบนเว็บไซต์ผ่านทางโมดูล Polls ทาหน้ าที่แสดงคาที่ผ้ ูชมค้ นหาผ่านโมดูล Search หากต้ องการเก็บ ข้ อมูลว่าผู้ชมค้ นหาคาว่าอะไรบ้ างในเว็บไซต์และได้ ผลลัพธ์การค้ นหา กี่คาสามารถใช้ คอมโพเนนต์นี ้มาช่วยในการเก็บข้ อมูลได้ โดยการตัง้ ค่าการเก็บสถิตเิ ป็ น Enabled ทาหน้ าที่และแสดงลิงก์ เหมาะสาหรับผู้ดแู ลเว็บที่ต้องการจัดเก็บลิงก์ ให้ เป็ นหมวดหมู่ในเรื่ องที่น่าสนใจ

ปลั๊กอิ นเป็ นส่ว นที่ เข้ ามาเกี่ ย วข้ อ งในการติดต่อ ระหว่า งผู้ชมหรื อ ผู้ดูแ ลเว็บ กับ Joomla! ปลัก๊ อินสามารถตรวจจับข้ อมูลที่ส่งมาจาก Joomla! และแก้ ไขข้ อมูลนันก่ ้ อนที่จะ ส่งกลับไปให้ กบั ผู้ใช้ นอกจากนี ้ยังสามารถตรวจจับข้ อมูลที่ส่งมาจากผู้ใช้ ก่อนที่จะส่งกลับไป ให้ กบั Joomla! ได้ อีกด้ วย ตัวอย่างเช่น Editor – TinyMCE 2.0 (ภาพที่ 3) เป็ น Editor ที่ใช้ ในการแปลงข้ อมูล ในรู ปแบบ WYSIWYG ที่ผ้ ใู ช้ นาเข้ ามาเป็ นภาษา HTML เพื่อใช้ เก็บในฐานข้ อมูล และในทาง กลับกันก็นาข้ อมูลที่เก็บในรู ปแบบภาษา HTML ในฐานข้ อมูล มาทาการแปลงและแสดงผล ในรู ปแบบ WYSIWYG ทาให้ การแก้ ไขข้ อมูลในเว็บไซต์สามารถทาได้ สะดวกและเห็นผลลัพธ์ ของเอกสารได้ ทนั ที เป็ นต้ น

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

177

แผนภาพที่ 4.98 ปลัก๊ อิน TinyMCE 2.0 (10) การติดตัง้ Extension ให้ กับ Joomla! การติดตัง้ Extension ต่าง ๆ เพิ่มเติมไม่ว่าจะเป็ น Module, Component, Plug-in หรื อ Template ก็ตามมีขนตอนการติ ั้ ดตังที ้ ่เหมือนกัน คือให้ ผ้ ูใช้ ดาวน์โหลด Extension ซึ่ง Package ไฟล์เอาไว้ (นามสกุล zip จะดีที่สุด) เก็บไว้ ในเครื่ องคอมพิวเตอร์ ถัดมาอัพโหลด ไฟล์ ดงั กล่าวโดยเข้ าไปที่เมนู Extension > Install/Uniinstall และคลิกปุ่ มเรี ยกดูเลือ ก Extension ที่ต้องการ จากนันคลิ ้ กปุ่ ม Upload File & Install เพื่อติดตัง้ Extension เมื่อติดตัง้ แล้ ว Extension ต่าง ๆ สามารถไปปรับตังค่ ้ าได้ ในเมนูดงั ต่อไปนี ้ 1. Module จะสามารถปรั บตัง้ ค่าได้ ในเมนู Extension > Module Manager 2. Components จะสามารถปรับตังค่ ้ าได้ ในเมนู Components 3. Plugin จะสามารถปรับตังค่ ้ าได้ ในเมนู Extension > Plugin Manager 4. Template จะสามารถปรั บตังค่ ้ าได้ ในเมนู Extension > Template Manager

www.ThaiCyberU.go.th

178

บทที่ 4 การพัฒนาเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

แผนภาพที่ 4.99 หน้ าต่างการติดตัง้ Extension เพิ่มเติม ทังนี ้ ้ ผู้ใช้ สามารถสืบค้ น Extension ที่ต้องการเพิ่มเติมได้ จากhttp://extensions.joomla.org/ ซึง่ เป็ นเว็บไซต์หลักของ Joomla! บทสรุป CMS และ LMS เป็ นรู ปแบบของวิธีการพัฒนาเว็บไซต์ทางการศึกษาที่ได้ รั บ ความนิยมในปั จจุบนั โดย CMS เป็ นระบบที่นามาช่วยในการสร้ างและบริ หารเว็บ ไซต์แบบ สาเร็ จรู ป และในการใช้ งาน CMS นัน้ ผู้ใช้ งานแทบไม่ต้องมีความรู้ ในด้ านการเขียนโปรแกรม ก็สามารถสร้ างเว็บไซต์ได้ เว็บไซต์ในรู ปแบบ CMS มีจุดเด่นคือ การใช้ งานได้ ฟรี การใช้ งาน ได้ ง่าย สะดวก มีรูปแบบที่สวยงามและลูกเล่นที่ดึงดูด อย่างไรก็ตาม CMS เน้ นการบริ หาร จัดการข้ อความเป็ นหลัก ในขณะที่ LMS นันเป็ ้ นระบบที่นาเสนอความรู้ จัดเก็บข้ อมูลเพื่อ ติดตามสิ่งต่าง ๆ ที่เกิดขึ ้น และสนับสนุนการจัดการเรี ยนการสอนอีเลิร์นนิงให้ ดาเนินไปด้ วย ความเรี ยบร้ อย โดยเป็ นทังสภาพแวดล้ ้ อมการเรี ยนการสอนและเป็ นเครื่ องมือให้ กับผู้สอน ผู้เ รี ยน รวมทัง้ ผู้ดูแ ลระบบด้ ว ย ทัง้ นี ้ LMS อาจไม่ มี รู ป แบบที่ ส วยงามและลูกเล่ น ต่า ง ๆ มากเท่า CMS แต่เมื่อพิจารณาองค์ประกอบที่ใช้ สนับสนุนการเรี ยนการสอนอีเลิร์นนิงแล้ ว LMS จะมีคณ ุ สมบัตทิ ี่ครบถ้ วนมากกว่า จึงเป็ นที่นิยมอย่างแพร่ หลายในปั จจุบนั

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

179

แนวทางในการประเมินเว็บไซต์ทางการศึกษานัน้ ควรให้ ความสาคัญทังกั ้ บเนื ้อหา และเทคโนโลยีทางการศึกษาในสัดส่วนที่เท่า ๆ กัน ทังนี ้ ้ได้ ยกตัวอย่าง (1) เกณฑ์การประเมิน เว็บไซต์ทางการศึกษา 3 ตัวอย่าง (2) ตัวอย่างแบบสอบถามรู ปแบบเว็บไซต์ทางการศึกษา 2 ตัวอย่ า ง และ (3) ตัว อย่า งแบบประเมิ น ประสิ ท ธิ ภ าพเว็บ ไซต์ท างการศึกษาและ แบบสอบถามความพึงพอใจเว็บไซต์ทางการศึกษาอย่างละ 1 ตัวอย่าง เพื่อเป็ นแนวทางใน การประเมิน มีรายละเอียดดังต่อไปนี ้ 1. ตัวอย่ างเกณฑ์ การประเมินเว็บไซต์ ทางการศึกษา ในที่นีไ้ ด้ นาตัวอย่างเกณฑ์การประเมินเว็บไซต์ทางการศึกษา 3 ตัวอย่าง ประกอบด้ วย แบบที่ 1 เรื่ องการพัฒนาเกณฑ์การประเมินโปรแกรมการเรี ยนการสอนผ่านเว็บ โดย อักษรา แสงอร่ าม (2543) แบบที่ 2 หนังสือ e-Learning Quick Checklist โดย Badrual Khan (2005) และ แบบที่ 3 หนังสือ The Power of eLearning: the essential guide for teaching in the digital age โดย Waterhouse (2005) มีรายละเอียดดังนี ้ แนวทางในการประเมินสื่อเว็บสาหรับการเรียนการสอนแบบที่ 1 แนวทางในการประเมินสื่อเว็บสาหรับการเรี ยนการสอนแบบที่ 1 เป็ นวิทยานิพนธ์ ครุ ศาสตรมหาบัณฑิต สาขาวิชาโสตทัศนศึกษา จุฬาลงกรณ์มหาวิทยาลัย เรื่ องการพัฒนา เกณฑ์การประเมินโปรแกรมการเรี ย นการสอนผ่า นเว็บ โดย อักษรา แสงอร่ าม (2543) มีแนวทางในการพัฒนาเกณฑ์ในการประเมินดังนี ้ วัตถุประสงค์มี 2 ข้ อ คือ (1) เพื่อศึกษาเกณฑ์การประเมินโปรแกรมการเรี ยน การสอนผ่านเว็บ และ (2) เพื่อพัฒนาเกณฑ์การประเมินโปรแกรมการเรี ยนการสอนผ่านเว็บ ให้ มีประสิทธิภาพและมีมาตรฐานให้ เหมาะสมกับการเรี ยนการสอน โดยมีวิธีการดาเนิน www.ThaiCyberU.go.th

180

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

งานวิจยั แบบเดลฟาย โดยมีขนตอนในการด ั้ าเนินงานดังนี ้ (1) ผู้วิจยั สัมภาษณ์ผ้ เู ชี่ยวชาญ (2) สรุ ปผลจากผู้เชี่ ยวชาญ จากนัน้ นามาจัดเป็ นแบบสอบถาม และขอให้ ผ้ ูเชี่ ยวชาญ พิจารณาแบบสอบถามอีกครั ง้ (3) ขอให้ ผ้ ูเชี่ยวชาญยืนยันคาตอบในแบบสอบถามอีกครั ง้ และ (4) ผู้ทรงคุณวุฒิพิจารณาความเหมาะสมต้ นแบบชิน้ งานวิจัย ผลการวิจัยพบว่าเกณฑ์ การประเมินโปรแกรมการเรี ยนการสอนผ่านเว็บประกอบด้ วย 2 ด้ านใหญ่ 20 ด้ านย่อยดังนี ้ (1) ด้ านการออกแบบ ประกอบด้ วย 11 ด้ านย่อ ย คือ ตัวอักษร ภาพ ภาพเคลื่ อ นไหว ภาพวี ดิทัศ น์ เสี ย ง สี รายการ สัญ รู ป และปุ่ ม และโปรแกรมค้ น ผ่ า น เว็ บ ด้ า นการสอน ประกอบด้ วย 9 ด้ านย่อย คือ วัตถุประสงค์บทเรี ยน การนาเสนอเนื ้อหา กิจกรรมการเรี ยนรู้ กิจกรรมการเรี ยนรู้ (Synchronous) กิจกรรมการเรี ยนรู้ (Asynchronous) บทบาทของผู้สอน บทบาทของผู้เรี ยน การให้ ผลย้ อนกลับ และการทดสอบ ผลการวิจยั แบ่งเกณฑ์ในการประเมินออกเป็ นด้ านต่าง ๆ ดังนี ้ 1. เกณฑ์การประเมินด้ านตัวอักษร พบว่ารู ปแบบ ขนาด สีและชนิดตัวอักษรที่ดี ชัดเจน จะทาให้ ผ้ ูอ่านรู้ สึกว่าอ่านง่ายและอยากติดตามที่จะอ่านต่อ ไป อี กทัง้ ทาให้ ผ้ ูอ่าน เข้ าใจมากขึน้ โดยไม่ต้องมีคาอธิบายเพิ่มเติมให้ ยืดยาว เช่น การเน้ นข้ อความสาคัญด้ วยสี ตัวอักษรที่แตกต่างจากข้ อความปกติ จะทาให้ ข้อความที่ เน้ นเด่นขึ ้นมาและเกิดความสาคัญ ขึ ้นได้ 2. เกณฑ์การประเมินด้ านภาพ พบว่าการใช้ ภาพประกอบในบทเรี ยนสามารถช่วย ดึงดูดความสนใจของผู้เรี ยนไว้ กับข้ อความได้ แต่หากนาภาพที่ไม่เกี่ ยวข้ องกับบทเรี ยนมา ประกอบ อาจทาให้ ผ้ ูเรี ยนเกิดความราคาญหรื อ เกิดความสนใจในภาพอื่นนอกเหนื อจาก เนื ้อหาได้ ดังนันการใช้ ้ ภาพควรคานึงถึงความฉลาด อายุ และการศึกษาของผู้เรี ยน ส่วนชนิด ของไฟล์ภาพจะมีผลต่อเวลาในการบรรจุลงบทเรี ยน อาจทาให้ ผ้ เู รี ยนหมดความสนใจในภาพ นันได้ ้ 3. เกณฑ์ ก ารประเมิ น ด้ านภาพเคลื่ อ นไหว พบว่ า การใช้ ภาพเคลื่ อ นไหว จะเหมาะสมกับการอธิบายกระบวนการขันตอนต่ ้ าง ๆ โดยเลือกแสดงในบางจุดหรื อโดยรวม หรื อใช้ อธิ บายสิ่งที่ซบั ซ้ อน เข้ าใจได้ ยาก และควรใช้ ภ าพเคลื่อ นไหวเท่าที่จาเป็ น หากมาก เกินไปอาจทาให้ ผ้ เู รี ยนหันเหความสนใจจากบทเรี ยนได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

181

4. เกณฑ์การประเมินด้ านภาพวีดิทศั น์ พบว่า การเลือ กใช้ วีดิทศั น์ ต้องพิจารณา ความสามารถของ Hardware, Software และความจาเป็ นในการนามาใช้ ด้วย เนื่องจากไฟล์ วีดทิ ศั น์มีขนาดใหญ่และต้ องอาศัยเร็ วในการถ่ายข้ อมูลสูง ดังนัน้ หากผู้สอนสามารถนาเสนอ เนื ้อหาบางอย่างที่เพียงใช้ ข้อความก็สามารถเข้ าใจได้ ดีแล้ ว ก็ไม่จาเป็ นต้ องใช้ ภาพวีดิทศั น์อีก 5. เกณฑ์การประเมินด้ านเสียง พบว่า เสียงสามารถดึงดูดความสนใจของผู้เรี ยน กับสิ่งต่าง ๆ ที่แ สดงบนหน้ าจอและสร้ างความเข้ าใจพื น้ ฐานได้ โดยพื น้ ฐานของเสี ยงเอง ยิ่งคุณภาพเสียงชัดเจนเท่าไร ก็จะทาให้ ผ้ เู รี ยนไม่เกิดความสับสนและเข้ าใจผิด แต่ควรเลือก เสียงมาประกอบบทเรี ยนเท่าที่จาเป็ น เพราะขนาดไฟล์เสียงที่ใหญ่เกินไปจะทาให้ เกิดปั ญหา ความเร็ วในการถ่ายข้ อมูลได้ 6. เกณฑ์ ก ารประเมิ น ด้ านสี พบว่ า การใช้ สี กั บ บทเรี ยนควรให้ เหมาะสม กับจุดมุ่งหมายของบทเรี ยน ไม่ควรใช้ จานวนสีมากกว่า 5 สี เพราะจะทาให้ ดูเปรอะ หรื อไม่ น้ อยกว่า 2 สีต่อหน้ าจอ เพื่อให้ ผ้ เู รี ยนเกิดความสนใจ และควรคานึงถึงพื ้นหลังประกอบด้ วย เช่น ควรใช้ สีโ ทนเย็น กับพื น้ หลัง และใช้ สีโ ทนร้ อนส าหรั บพื น้ หน้ า หรื อ ถ้ า ผู้เรี ยนเป็ นเด็ก ควรใช้ สีที่ตดั กันเพื่อดึงความสนใจ เป็ นต้ น 7. เกณฑ์การประเมินด้ านรายการ พบว่า รายการจะทาให้ ผ้ ูใช้ เข้ าใจถึงโครงสร้ าง ของเนื อ้ หาการสอน โครงสร้ างรายการควรง่าย ไม่ซบั ซ้ อ นและผู้ใช้ สามารถรู้ ได้ เอง อี กทัง้ รายการควรมีหมายเลขให้ เลือกเป็ นตัวเลขและขยายเป็ นข้ อความที่เป็ นตัวเลือกอย่างมีลาดับ 8. เกณฑ์ ก ารประเมิ น ด้ า นสัญ รู ป และปุ่ ม พบว่า สัญ รู ป เป็ นสิ่ ง น าทางให้ ผ้ ูใ ช้ สามารถใช้ โปรแกรมเรี ยนได้ ง่ายขึ ้น ควรเลือกใช้ สญ ั รู ปแบบปุ่ มรู ปภาพ แบบรู ปลูกศรพร้ อม ทัง้ คาอธิ บายข้ อ ความสัน้ ๆ ประกอบสัญ ลักษณ์ ห รื อ แสดงข้ อ ความ Hypertext และใช้ รายการแบบปุ่ ม แบบ Pop up ที่แสดงสัญลักษณ์สื่อความหมายได้ เข้ าใจชัดเจนด้ วย 9. เกณฑ์การประเมินโปรแกรมค้ นดูเว็บ พบว่า โปรแกรมค้ นผ่านเว็บควรง่ายใน การนาข้ อมูลออกมา สามารถเชื่อมโยงไปยังข้ อความ ภาพ เสียงและวิดีโอได้ โดยรู ปแบบของ เว็บควรออกแบบให้ สนับสนุนผู้ใช้ ในหลาย ๆ ระดับ และระบบมัลติมีเดียอย่างเต็มที่ 10. เกณฑ์ ก ารประเมิ น ด้ า นการเชื่ อ มโยง พบว่ า การเชื่ อ มโยงที่ จัด ล าดับ ให้ สอดคล้ องกัน จะช่วยให้ ผ้ เู รี ยนไม่หลงทาง เช่น หากมีการเชื่อมโยงไปในหน้ าต่าง ๆ ควรจะมี การเชื่อมโยงให้ สามารถกลับมายังหน้ าโฮมเพจได้ ด้วย อีกทังการเชื ้ ่อมโยงไปยังข้ อมูลต่าง ๆ ใน Internet ควรมีการตรวจสอบตลอด เพราะหากไม่สามารถเชื่อมโยงได้ จะทาให้ เกิดปั ญหา ในการเรี ยน www.ThaiCyberU.go.th

182

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

11. เกณฑ์ ก ารประเมิ น ด้ า นโฮมเพจบทเรี ย น พบว่ า ควรประเมิ น การแสดง โครงสร้ างที่เป็ นภาพรวมของเว็บ การแสดงตาแหน่งผู้เรี ยนและส่วนประกอบของโฮมเพจ 2 ส่วนใหญ่ คือ ส่วนหัวข้ อที่กระชับและเหมาะ และส่วนเนื ้อหาที่มีรายการสารบัญแสดงถึง หัวข้ อ ของข้ อ มูลต่าง ๆ ที่อยู่ในเว็บเพจ เนื อ้ หาที่ต้องการเสนอ ภาพ เทคโนโลยีมัลติมีเดีย การติดต่อกับผู้สร้ างโฮมเพจ วันที่ทาการปรับปรุ งล่าสุด ถ้ าการออกแบบเป็ นที่น่าดึงดูดความ สนใจ มีสาระความรู้ ประโยชน์มาก โฮมเพจนันจะได้ ้ รับการเข้ าเยี่ยมชมบ่อย แต่ถ้าไม่ดี ไม่มี สาระ จะไม่มีคนสนใจกลับเข้ ามาเยี่ยมชมอีก 12. เกณฑ์การประเมินด้ านวัตถุประสงค์ของบทเรี ยน พบว่า การนาเสนอเนื ้อหา บทเรี ยนผ่านเว็บ ควรคานึงถึงความสัมพันธ์ของ 3 ตัวแปรหลักคือ เนื ้อหา วัตถุประสงค์ และ ผู้เรี ยน โดยก่อนเริ่ มเรี ยนควรทาความเข้ าใจกับผู้เรี ยนเสียก่อน การบอกวัตถุประสงค์การสอน เป็ นการแสดงคาอธิบายพฤติกรรมของผู้เรี ยนที่ได้ กระทาหลังจากสอบแล้ ว ซึ่งอาจมีหลาย วัตถุประสงค์ในเป้าหมายเดียวก็ได้ 13. เกณฑ์การประเมินด้ า นการนาเสนอเนื อ้ หา พบว่า การนาเสนอเนื อ้ หาควร คานึงถึงความถูกต้ อ งและความชัด เจนของเนื อ้ หา ความน่าเชื่ อ ถื อ ความทันสมัย ความ เหมาะสมของตาแหน่งในการนาเสนอเนือ้ หา ปริ มาณข้ อความต่อหน้ าจอและการใช้ ภาษา เช่น ข้ อความควรจัดให้ เป็ นระบบ เขียนได้ ใจความ เลือกใช้ คาศัพท์ที่ผ้ ใู ช้ งานคุ้นเคย เป็ นต้ น 14. เกณฑ์การประเมินด้ านกิจกรรมการเรี ยนรู้ พบว่า ในปั จจุบนั การเรี ยนการสอน เน้ นกิจกรรมและบริ การของอินเทอร์ เน็ต ผู้สอนเป็ นผู้ควบคุมตรวจสอบ ติดตามเรี ยนของ ผู้เรี ยนและเตรี ยมทรั พยากรสนับสนุน มี การอี เมลและ World Wide Web มากที่สุด โดยในเว็บจะประกอบไปด้ วยหน้ า Homepage เว็บเพจประกาศ ข่าวสาร ประมวลรายวิชา กิจกรรมการเรี ยนการสอน และเว็บเพจทรัพยากรสนับสนุน 15. เกณฑ์การประเมินด้ านกิจกรรมการเรี ยนรู้ โดยอาศัยการสื่อสารในเวลาเดียวกัน หรื อ Synchronous พบว่า กิจกรรมลักษณะนี ้ เป็ นการรั บส่ง ข่าวในเวลาเดีย วกัน เช่ น การพูดคุยสนทนา บริ การรับส่งข้ อความ เสียง และภาพ และภาพเคลื่อนไหว แต่ข้อจากัดของ กิจกรรมเหล่านี ้คือ เรื่ องของเวลาที่ใช้ 16. เกณฑ์การประเมินด้ านกิจกรรมการเรี ยนรู้ โดยอาศัยการสื่อสารต่างเวลากัน หรื อ Asynchronous พบว่า กิจกรรมบริ การบนเครื อข่ายอินเทอร์ เน็ตลักษณะนี ้ ผู้ส่งกับผู้รับ ไม่จาเป็ นต้ อ งทางานพร้ อมกัน เช่น การใช้ อีเมล กลุ่มสนทนา รวมถึงบริ การ World Wide Web เพราะไม่มีข้อจากัดในเรื่ องเวลาเหมือนการสื่อสารแบบSynchronous นัน่ เอง

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

183

17. เกณฑ์การประเมินด้ านบทบาทผู้สอน พบว่า ผู้สอนจะเป็ นเพียงผู้แนะนาอยู่ ข้ าง ๆ ผู้เรี ยน เป็ นผู้คอยควบคุมกิจกรรมการเรี ยนการสอนต่าง ๆ เป็ นผู้เตรี ยมทรั พยากร สนับสนุนทังด้ ้ านอุปกรณ์ ซอฟต์แวร์ และเทคนิควิธีการ เป็ นผู้ประเมินผลการเรี ยน ที่สาคัญ ผู้สอนจะต้ องหมัน่ แสวงหาความรู้ อยู่ตลอดเวลา เพื่อคอยตอบคาถามและแก้ ไขปั ญหาต่าง ๆ ที่เกิดขึ ้นในขณะเรี ยนได้ 18. เกณฑ์ ก ารประเมิ น ด้ า นบทบาทของผู้เ รี ย น พบว่า ผู้เรี ย นจะเป็ นผู้ดาเนิ น กิจกรรมการเรี ยนให้ เป็ นไปตามระบบของผู้เรี ยนเอง ผู้เรี ยนจะมีอิสระในการเรี ยนรู้ และนึกคิด ได้ จากกิจกรรมต่าง ๆ ในการเรี ยนการสอน ดัง นัน้ ผู้เรี ยนจาเป็ นต้ อ งมี ความรั บผิ ดชอบ ต่อตนเอง หมัน่ คอยติดตามและติดต่อกับผู้สอน สารวจตนเองว่าถนัดด้ านใด แล้ วเลือกวิธีการ เรี ยนให้ เหมาะสมกับตนเอง เพื่อผู้เรี ยนจะได้ นาความรู้ ไปประยุกต์ใช้ ในการเรี ยนการสอนของ ตนเองได้ ตอ่ ไป 19. เกณฑ์การประเมินด้ านการให้ ผลย้ อนกลับ พบว่า การให้ ผลย้ อนกลับนอกจาก ทาให้ ผ้ ูเ รี ยนเข้ า ใจถูกต้ อ งมากขึน้ แล้ ว ยัง ช่ วยท าให้ เ กิด แรงจูง ใจในการเรี ยนต่อ ไปด้ ว ย ผลย้ อนกลับจะต้ องเจาะจงกับข้ อผิดพลาดของผู้เรี ยน ไม่ใช่ผลย้ อนกลับแบบไร้ คาอธิบาย และควรให้ ผลย้ อนกลับในทันที เพราะจะทาให้ ผ้ เู รี ยนประสบความเสร็ จในการเรี ยนมากขึ ้น 20. เกณฑ์การประเมินด้ านการทดสอบ พบว่า รู ปแบบการทดสอบแบบ online นัน้ สามารถประเมิน ได้ หลายวิธี เช่น การทดสอบรายบุคคล การตรวจสอบปฏิสัมพันธ์ ในการ อภิปรายกลุ่ม คาถามและแฟ้มสะสมผลงานที่ได้ พฒ ั นา ที่สาคัญในการทดสอบ ควรให้ ผ้ เู รี ยน สามารถตรวจสอบและประเมินตนเองกับจุดประสงค์หลักและการเรี ยนรู้ ที่ได้ รับนอกเหนือจาก ที่กาหนดไว้ กบั บทเรี ยนได้ ด้วย แนวทางในการประเมินสื่อเว็บสาหรับการเรียนการสอนแบบที่ 2 Badrual Khan (2005) ได้ พูดถึงในหนังสือ e-Learning Quick Checklist ว่ามี 8 มิติในการพิจารณาระบบการเรี ยนการสอนแบบ e-Learning กล่าวคือ 1) ความพร้ อมของ สถาบันการศึกษา (INSTITUTION) 2) การจัดการ (MANAGEMENT) 3) ศาสตร์ ด้าน การเรี ยนการสอน (PEDAGOGICAL) 4) เทคโนโลยี (TECHNOLOGICAL) 5) การออกแบบ ส่วนต่อ ประสาน (INTERFACE DESIGN) 6) การวัด -ประเมิ นผล (EVALUATION) 7) แหล่งข้ อมูลสนับสนุน (RESOURCE SUPPORT) และ 8) จริ ยธรรม (ETHICAL) ดังแสดง ในแผนภาพที่ 5.1 มิตใิ นการพิจารณาการจัดระบบการเรี ยนการสอนแบบ e-Learning www.ThaiCyberU.go.th

184

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

แผนภาพที่ 5.1 มิตใิ นการพิจารณาการจัดระบบการเรี ยนการสอนแบบ e-Learning (Khan, 2005) ทังนี ้ ้จะเห็นได้ ว่าการประเมิน Website สาหรับการเรี ยนการสอน e-learning นัน้ จะเกี่ยวข้ องกับมิตขิ องการออกแบบส่วนต่อประสาน (Interface Design) ที่ Khan (2005) ได้ พูดถึงในหนังสือ e-Learning Quick Checklist ใน section ของเรื่ อง checklist for e-learning interface design ซึง่ ประกอบด้ วยหัวข้ อในการพิจารณาต่าง ๆ คือ (1) การออกแบบส่วนต่อ ประสาน (Page and Site Design) 17 ประเด็น (2) การออกแบบเนื ้อหา (Content Design) 10 ประเด็น (3) การออกแบบระบบนาทาง (Navigation) 20 ประเด็น (4) การเข้ าถึงข้ อมูล (Accessibility) 6 ประเด็น และ (5) การทดสอบการใช้ งาน (Usability Testing) 6 ประเด็น ดังนี ้ 1. การออกแบบส่ วนต่ อประสาน 1.1 ตรวจสอบดูว่าหน้ าเว็บนัน้ ดูสวยงามหรื อ ไม่ เมื่ อ เรี ยกดูจากเว็บ เบราเซอร์ ต่าง ๆ ได้ แก่ Internet Explorer, Netscape, และเว็บ เบราเซอร์ อื่น ๆ ที่เพิ่งออกใหม่ 1.2 องค์ประกอบต่อไปนี ้สนับสนุนเนื ้อหาที่เป็ นข้ อความของรายวิชานัน้ หรื อไม่ (ทาเครื่ องหมายในทุกองค์ประกอบที่ใช้ ทังภาพ ้ เสียง วิดีโอ และภาพเคลื่อนไหว)

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

185

1.3 หน้ าเว็บมีพื ้นที่วา่ งหรื อพื ้นที่สีขาวเพียงพอหรื อไม่ (ประมาณ 20%) เพื่ อ ช่วยให้ สายตาของผู้อ่านสามารถเคลื่อ นไปยังส่ว นเนื อ้ หาได้ ง่ายและสะดวกยิ่งขึน้ พึงจาไว้ ว่าพืน้ ที่สีขาวที่ไม่เพียงพอนัน้ จะทา ให้ หน้ าจอดูระเกะระกะ ไม่เป็ นระเบียบ 1.4 หน้ าเว็บหรื อโปรแกรมดึงดูดใจและเรี ยกความสนใจจากสายตา และการรั บฟั งของผู้ใช้ หรื อ ไม่ พึงจาไว้ ว่าผู้ใช้ แ ต่ละคนจะสนใจสี และรู ปแบบตัวอักษรที่แตกต่างกัน 1.5 ข้ อ ความที่ ใช้ ในทุก ๆ หน้ าของเว็บ ไซต์ห รื อ รายวิช านัน้ อ่ านง่า ย หรื อไม่ 1.6 ในทุก ๆ หน้ าของเว็บไซต์หรื อรายวิชา ใช้ สีพื ้นหลังของหน้ าจอเข้ า กันกับสี พืน้ หน้ าของหน้ าจอหรื อ ไม่ (ควรเป็ นสี ที่เสริ มกันให้ ดีขัน้ มากกว่าทาให้ ด้อยลง) 1.7 เว็ บ ไซต์ มี รู ป แบบหน้ าตาสอดคล้ องกัน กับ หน้ าตาของเอกสาร ประกอบรายวิชาที่ ตีพิมพ์ อ อกมาหรื อ ไม่ ทัง้ นี เ้ พื่ อ ช่ วยให้ ผ้ ูเรี ย น สามารถที่ จ ะเชื่ อ มโยงระหว่ า งข้ อ มูล รายวิช าบนในเว็บ ไซต์ กับ ข้ อมูลรายวิชาที่ส่งมาทางจดหมายได้ ง่ายขึ ้น 1.8 เว็บไซต์หรื อรายวิชาใช้ รูปแบบตัวอักษรที่สอดคล้ องกันหรื อไม่ เช่น หัวเรื่ อง ตัวเนื ้อหา หรื อลิงค์ เป็ นต้ น 1.9 เว็บไซต์หรื อ รายวิชาใช้ รู ปแบบตัวอักษรมาตรฐานหรื อไม่ เพื่ อว่า ตัวอักษรที่ปรากฏจะเป็ นแบบเดียวกันในทุก ๆ แพลทฟอร์ มและ เบราเซอร์ (ตัวอย่างเช่น รู ปแบบ Cordia new ใช้ สาหรับตัวอักษร ภาษาไทย และรู ปแบบ Arial สาหรับตัวอักษรภาษาอังกฤษ) 1.10 เว็บไซต์หรื อรายวิชาใช้ รูปแบบการจัดวางที่สอดคล้ องกันหรื อไม่ รวมไปถึง สี การวางหัวข้ อและเนื ้อหาในหน้ าเว็บ 1.11 การเลื อ กภาพประกอบช่ ว ยเพิ่ ม ความเข้ าใจของผู้ เรี ยนใน วัตถุประสงค์ของเว็บไซต์หรื อไม่

www.ThaiCyberU.go.th

186

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

1.12 ระยะเวลาที่ใช้ ในการโหลดหน้ าเว็บนัน้ รวดเร็ วเพี ยงใด หน้ าจอ โหลดเร็ ว หรื อ ไม่ หรื อ ต้ อ งให้ ผ้ ูเ รี ย นรอการโหลดภาพประกอบ วิดี โ อ และเสี ย งขนาดใหญ่ ห รื อ ไม่ (พึ ง จ าไว้ ว่ า ไฟล์ ภ าพและ มัล ติมี เ ดี ย ขนาดใหญ่ ใ ช้ เ วลานานในการดาวน์ โ หลด อย่ า งไร ก็ ต าม ความเร็ วในการโหลดนั น้ จะขึ น้ อยู่ กั บ ความเร็ วใน การเชื่อมต่ออินเทอร์ เน็ตของผู้ใช้ งานเองด้ วย รายวิชาควรจะถูก ออกแบบให้ ใช้ ช่องทางการส่งข้ อมูลอย่างมีประสิทธิภาพเพื่อลด ความเบื่อ หน่า ยของผู้เ รี ย นในการรอ มันเป็ นความคิด ที่ ดีที่ จ ะ ทดสอบการใช้ งานของหน้ าเว็บเพจด้ วยความเร็ วของการเชื่อมต่อ อินเทอร์ เน็ตหลาย ๆ ค่า) __________ เร็ ว __________ ค่อนข้ างเร็ ว __________ ค่อนข้ างช้ า __________ ช้ ามาก 1.13 รายวิชาได้ ให้ เครดิตกับผู้ที่เกี่ยวข้ องในการออกแบบและพัฒนา บทเรี ยนหรื อไม่ โดยอาจจะใส่ในหัวข้ อเมนูตอนท้ ายว่า “เครดิต” ก็ได้ ส่วนเครดิตนี ้มีประโยชน์อย่างมากต่อผู้เรี ยนเพราะจะทาให้ ผู้เรี ยนเห็นความสาคัญของบุคคลที่มีส่วนเกี่ยวข้ องกับการสร้ าง รายวิชาหรื อเว็บไซต์ (การให้ เครดิตกับผู้สร้ างอาจจะไม่เหมาะกับ เว็บไซต์บางชนิด เช่น เว็บไซต์ของรัฐบาล ฯลฯ) 1.14 เว็ บ ไซต์ มี ก ารท าลิ ง ค์ ไ ปสู่ เ ว็ บ ไซต์ ภายในสถาบั น หรื อไม่ ให้ ตรวจสอบการใช้ ลิงค์ดงั กล่าว 1.15 เว็บ ไซต์ ข องรายวิช ามี ลิ ง ค์ เ ชื่ อ มโยงไปยัง หน้ า เว็บ และประวัติ ส่วนตัวของผู้สอนหรื อไม่ 1.16 ภาพสีนนั ้ เมื่อพิมพ์ออกมาเป็ นขาวดาแล้ วสื่อความหมายออกมา เห็นชัดเจนหรื อ ไม่ พึงจาไว้ ว่าผู้ใช้ บางคนชอบที่จะพิมพ์เว็บเพจ ออกมาอ่านภายหลัง ประเภทของสีที่แตกต่างกันที่ถูกใช้ ในภาพ เป็ นส่วนจาแนกความแตกต่างและการทางานของสี อาจจะมอง ไม่เห็นเมื่อพิมพ์ออกมาสาหรับเครื่ องพิมพ์แบบขาวดา 1.17 หน้ า จอแต่ ล ะหน้ า จอของรายวิช าสามารถพิ ม พ์ อ อกมาให้ อ ยู่ ภายในหนึง่ หน้ ากระดาษได้ หรื อไม่

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

187

2. การออกแบบเนือ้ หา 2.1 ตรวจสอบว่ารายวิชาใดใช้ วิธีใดบ้ างในการดึงดูดความสนใจจาก ผู้เรี ยน ให้ ตรวจสอบทุกวิธีที่ใช้ 2.2 ตรวจสอบว่ารายวิชาใดใช้ วิธี ใดบ้ างในการพัฒนาความจ าของ ผู้เรี ยน ให้ ตรวจสอบทุกวิธีที่ใช้ 2.3 รายวิชาเป็ นไปตามกฎที่วา่ หนึง่ ความคิดต่อหนึง่ ย่อหน้ าหรื อไม่ 2.4 ข้ อความถูกจัดกลุ่มและแสดงในลักษณะที่สามารถค้ นหาและทา ความเข้ าใจได้ หรื อไม่ พึงจาไว้ ว่าในทุกหัวข้ อหลักและหัวข้ อย่อย ของรายวิชาควรจะเป็ นไปในทางเดียวกัน สันและสั ้ มพันธ์กนั อย่าง มีเหตุผล เพื่อว่าผู้อ่านจะได้ ค้นหาข้ อมูลได้ ง่าย 2.5 ตรวจสอบว่าทุกส่วนของการนาเสนอมีการใช้ มลั ติมีเดียในรายวิชา หรื อไม่ ให้ ตรวจสอบทุกมัลติมีเดียที่ใช้ 2.6 ถ้ าข้ อ 2.5 ตอบว่าใช่ ความหลากหลายของมัลติมีเดียแต่ละส่วน นันส่ ้ งเสริ มให้ เกิดสภาพแวดล้ อมการเรี ยนรู้ ที่มีประสิทธิภาพหรื อไม่ 2.7 รายวิชาใช้ ส่วนการนาเสนอแบบมัลติมีเดียเพื่อสร้ างการเรี ยนรู้ ที่ สาคัญได้ อย่างมีประสิทธิภาพหรื อไม่ ตรวจสอบทุกส่วนที่ใช้ 2.8 เนื ้อหาในรายวิชานันได้ ้ นาเสนออย่างเหมาะสมหรื อไม่ ตรวจสอบ ทุกเนื ้อหาที่ใช้ งาน 2.9 เนือ้ หาในรายวิชานัน้ ถูกนาเสนออย่างเหมาะสมและตรงประเด็น หรื อไม่ ตรวจสอบทุกเนื ้อหาที่ใช้ 2.10 รายวิช ามี วิธี ก ารที่ ส ะดวกในพิ ม พ์ ข้ อ มูล เข้ า สู่โ ปรแกรมส าหรั บ นักเรี ยนและผู้สอนไว้ ให้ ด้วยหรื อไม่ 3. การออกแบบระบบนาทาง 3.1 รายวิชามีการจัดโครงสร้ างเนื ้อหาอย่างชัดเจนหรื อไม่ ได้ แก่ หน่วย การเรี ยน บทเรี ยน กิจกรรม เพื่อช่วยนาทางผู้เรี ยนไปยังรายวิชา และเว็บไซต์ที่ต้องการ 3.2 รายวิชามีการสร้ างแผนที่ของเว็บไซต์หรื อไม่ ได้ แก่ ภาพกว้ างของ โปรแกรมช่วยสอน เพื่อช่วยนาทางผู้เรี ยนไปยังเนื ้อหาที่ต้องการได้ สะดวก www.ThaiCyberU.go.th

188

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3.3 เพื่อหลีกเลี่ยงการติดขัดของช่องทางการส่งข้ อมูล ในรายวิชานัน้ ๆ ได้ ถามผู้เ รี ยนเพื่ อ ทาการดาวน์ โหลด ไฟล์ เสี ย ง วิดีโอ และภาพ ที่มี ข นาดใหญ่ ลงในฮาร์ ด ดิสก์ ล่ วงหน้ าก่ อ นการเรี ย นการสอน หรื อไม่ 3.4 มี การแสดงคาอธิ บายลิงค์ ทงั ้ หมดอย่า งชัด เจน และเป็ นไปตาม วัต ถุ ป ระสงค์ ที่ ร ะบุ ไ ว้ เพื่ อ ที่ ว่ า ผู้ เรี ยนจะมี ข้ อมู ล เพี ย งพอใน การตัดสินใจว่าควรจะเข้ าไปยังลิงค์นี ้หรื อไม่ 3.5 เว็บไซต์มีลิงค์ภายในมากเกินไปจนทาให้ ผ้ ใู ช้ สบั สนหรื อไม่ 3.6 เว็บ ไซต์ มี ลิ ง ค์ ที่ น าไปสู่ เ ว็ บ ไซต์ อื่ น ๆ มากเกิ น ไปจนท าให้ ผ้ ูใ ช้ สับสนหรื อไม่ 3.7 เว็บไซต์ใช้ ไอคอนใด ๆ ที่ยากต่อ การจดจาหรื อ ไม่ พึงจาไว้ ว่าใน การใช้ ไอคอน เราควรตังค ้ าถามเสมอว่า แต่ละไอคอนสามารถสื่อ ความหมายที่ชดั เจนหรื อไม่ และไอคอนนัน้ ๆ มีความเกี่ยวข้ องกับ การสื่อความหมายที่ต้องการหรื อไม่ 3.8 รายวิช าใช้ สี ข องลิ ง ค์ ที่ เ คยเข้ า แล้ ว กับ ลิ ง ค์ ที่ ยัง ไม่ เ คยเข้ า อย่ า ง เหมาะสมหรื อ ไม่ พึง จ าไว้ ว่า สี ม าตรฐานของลิ ง ค์ เช่ น น า้ เงิ น สาหรับลิงค์ที่ยงั ไม่เคยเข้ าและสีม่วงหรื อแดงสาหรับลิงค์ที่เข้ าแล้ ว สามารถใช้ ได้ ทกุ หน้ าในเว็บไซต์ของรายวิชา 3.9 รายวิชามีโครงสร้ างยืดหยุ่น เพื่อให้ ผ้ เู รี ยนมีทางเลือกที่หลากหลาย ในการเรี ยนการสอนหรื อไม่ 3.10 รายวิ ช ามี ฟั ง ก์ ชั่น การแนะน าเส้ นทางเข้ าสู่ บ ทเรี ย นให้ กับ ผู้ ใช้ หรื อไม่ จาไว้ ว่าผู้เรี ยนมีแนวโน้ มที่จะปฏิบตั ิตามลิงค์ต่าง ๆ ที่มีใน รายวิชา ดังนัน้ ลิงค์หลายมิติในหน้ าเว็บไซต์ควรจะถูกพิจารณาให้ ดีก่อนที่จะใช้ แนะนาเส้ นทางสู่บทเรี ยนให้ กบั ผู้ใช้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

189

3.11 การนาทางในเว็บไซต์ของรายวิชาใช้ ง่ายหรื อไม่ ผู้ใช้ สามารถย้ าย จากหน้ าหนึง่ ไปยังอีกหน้ าหนึ่ง หรื อจากลิงค์หนึ่งไปยังอีกลิงค์หนึ่ง โดยไม่หลงทางหรื อสับสนหรื อไม่ 3.12 มี ส่ว นใดของลิง ค์ร ายวิช าที่ จะน าไปยัง หน้ า เว็บ ที่อ ยู่ในระหว่า ง การปรับปรุ งหรื อไม่ พึงจาไว้ ว่าควรหลีกเลี่ยงการลิงค์รายวิชาที่ยัง ไม่สมบูรณ์ 3.13 เว็บไซต์มีฟังก์ชนั่ การค้ นหาหรื อไม่ ถ้ ามีทาเครื่ องหมายทุกที่ที่ใช้ 3.14 รายวิชามีการใช้ สัญลักษณ์ และข้ อความที่ช่วยในการนาทางผู้ใช้ อย่างเหมาะสมหรื อไม่ 3.15 ทุก ๆ หน้ าในรายวิชามี การทาลิงค์ เพื่ อ กลับ ไปยังหน้ าหลักของ รายวิชาหรื อไม่ 3.16 ลิ ง ค์ ที่ ใ ช้ ภายในรายวิ ช า สามารถเชื่ อ มไปสู่ห น้ าเว็ บ ที่ ถูก ต้ อ ง หรื อไม่ 3.17 ลิงค์ที่นาไปยังเว็บไซต์อื่น ๆ ภายนอกรายวิชา สามารถเชื่อมไปสู่ หน้ าเว็บที่ถกู ต้ องหรื อไม่ 3.18 รายวิช าหรื อ เว็บ ไซต์ มี ลิ ง ค์ ที่ ไ ม่ ส ามารถใช้ ง านได้ ห รื อ ไม่ ถ้ า มี มีระบบหรื อกลไกที่จะตรวจสอบลิงค์ที่ไม่สามารถใช้ งานได้ เพื่อให้ เนือ้ หาภายในคงอยู่และมีการปรั บปรุ งมันอย่างสม่าเสมอหรื อไม่ ถ้ ามี มีการตรวจสอบบ่อยครัง้ เพียงใด 3.19 มีการใช้ ลิงค์หลายมิตมิ ากเกินไปในหน้ ารายวิชาหรื อไม่ 3.20 คุณภาพของเสียงและวิดีโอที่ใช้ ในรายวิชาเป็ นอย่างไร

www.ThaiCyberU.go.th

190

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

4. การเข้ าถึงข้ อมูล 4.1 เว็บไซต์ของรายวิชาได้ ถูกออกแบบมาให้ สามารถเข้ าถึงโดยกลุ่ม ผู้ใช้ ที่หลากหลายหรื อไม่ 4.2 รายวิชาได้ ใช้ Alternate text สาหรับรู ปภาพหรื อไม่ พึงจาไว้ ว่า alternate text ที่ใช้ แ ทนองค์ป ระกอบส่วนที่ไ ม่เป็ นข้ อ ความ ทังหมดนั ้ น้ สามารถอ่านออกเสียงโดยโปรแกรมสังเคราะห์เสียง ซึง่ จาเป็ นต่อผู้เรี ยนที่มีปัญหาเรื่ องการมองเห็น 4.3 รายวิชามีคาบรรยายสาหรับบทเรี ยนที่เป็ นเสียงให้ หรื อไม่ พึงจาไว้ ว่าคนที่มีปัญหาการได้ ยินนันสามารถเรี ้ ยนเนื ้อหาที่เป็ นเสียงจาก คาบรรยายเหล่านันได้ ้ 4.4 หน้ า จอที่ ห ลากหลายของรายวิช าสามารถที่ จ ะปรั บ ขนาดเพื่ อ อานวยความสะดวกให้ กบั ผู้ใช้ ที่มีปัญหาด้ านสายตาหรื อไม่ พึงจา ไว้ ว่าแม้ แต่หน้ าเว็บเพจที่ถูกออกแบบให้ มีขนาดที่เฉพาะเจาะจง ผู้ ใช้ ยั ง สามารถที่ จ ะปรั บ ขนาดจอภาพได้ โดยใช้ ฟั งก์ ชั่ น maximize และ minimize ของเบราเซอร์ 4.5 สีทงหมดที ั้ ่ใช้ ในหน้ าจอที่หลากหลายของรายวิชานัน้ ถูกแยกได้ อย่างชัดเจน โดยผู้ใช้ ที่มีปัญหาทางสายตาหรื อไม่ 4.6 ผู้ ใช้ ที่ ไ ม่ ส ามารถใช้ เมาส์ น าทางในการเรี ยนอิ เ ล็ ก ทรอนิ ก ส์ สามารถใช้ คีย์บอร์ ดนาทางแทนได้ หรื อไม่ 5. การทดสอบการใช้ งาน 5.1 มีการทดลองก่อนการใช้ งานจริ งกับตัวแทนผู้ใช้ หรื อไม่ 5.2 ผู้ใช้ สามารถหาคาตอบสาหรับคาถามที่พบบ่อยในเว็บไซต์รายวิชา ภายในเวลาที่กาหนดได้ หรื อไม่ 5.3 ผู้ใช้ ร้ ู หรื อไม่ว่าตนเองอยู่ที่หน้ าใดในเว็บไซต์และจะไปหน้ าเว็บใด ต่อโดยไม่ต้องใช้ การคาดเดา 5.4 รายวิชาใช้ คาศัพท์ที่ง่ายต่อการเข้ าใจหรื อไม่ 5.5 ผู้เรี ยนสามารถที่จะดูตวั อย่างบางส่วนของรายวิชาได้ หรื อไม่

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

191

5.6 เว็บไซต์ถกู ออกแบบมาเพื่อให้ ผ้ เู รี ยนสามารถเข้ าไปยังเนื ้อหาส่วน ที่เฉพาะได้ ง่ายหรื อไม่ (ไม่ควรกดเกิน 3 ครัง้ ) แนวทางในการประเมินสื่อเว็บสาหรับการเรียนการสอนแบบที่ 3 นอกจากนี ้ การประเมิน Website สาหรั บการเรี ยนการสอน e-learning โดยได้ ดัดแปลงมาจากแนวทางการประเมินเว็บไซต์ของ Waterhouse (2005) จากหนังสือ The Power of eLearning: the essential guide for teaching in the digital age ในหัวข้ อ Website Design ประกอบด้ วย checklist ซึ่งมี 3 ประเด็นหลัก ๆ คือ (1) เรื่ องของความ น่าเชื่อถือ (Website Credibility) 5 ประเด็น (2) คุณภาพในการออกแบบ (Design Quality) 15 ประเด็น และ (3) คุณภาพของเนื ้อหา (Content Quality) 5 ประเด็น โดยมีรายละเอียด ดังนี ้ รายการสาหรับประเมินเว็บไซต์ (Website Evaluation Checklist) ของ Waterhouse (2005) โปรดตอบคาถามในแต่ละรายการโดยเลือกคาตอบ ใช่ หรื อ ไม่ใช่ จากนันใช้ ้ เกณฑ์ ต่อ ไปนี ใ้ นการให้ ค ะแนนในเรื่ อ ง ความน่ า เชื่ อ ถื อ โดยรวม การออกแบบ และคุณ ภาพ : 0 = แย่มาก; 1 = แย่; 2 = ปานกลาง; 3 = ดี; 4 = ดีเยี่ยม ข้ อมูลพืน้ ฐาน (General Information) 1) ชื่อเว็บไซต์: 2) ที่อยู่เว็บไซต์ (URL): 3) ผู้แต่งหรื อผู้สนับสนุน: 4) ข้ อมูลติดต่อ: 5) วันที่ก่อตัง:้ 6) วันที่ปรับปรุ งล่าสุด: 7) ประเภทของเว็บไซต์: (พาณิชย์, วิชาการ, ข้ อมูลข่าวสาร ฯลฯ) 8) วัตถุประสงค์ของเว็บไซต์:

www.ThaiCyberU.go.th

192

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

ความน่ าเชื่อถือของเว็บไซต์ (Website Credibility) 1) การค้ นหาข้ อมูลผู้แต่งหรื อผู้สนับสนุนได้ ระบุถงึ งานวิจยั ทีเ่ กี่ยวข้ องอื่น ๆ ของพวกเขาหรื อไม่ 2) สามารถติดต่อผู้แต่งหรื อผู้สนับสนุนเว็บไซต์เพื่อไข ข้ อข้ องใจได้ หรื อไม่ 3) มีลิงค์ที่เชื่อมต่อไปยังข้ อมูลเพิ่มเติมเกี่ยวกับผู้แต่งหรื อ ผู้สนับสนุนหรื อไม่ 4) เว็บไซต์ที่น่าเชื่อถืออื่น ๆ ได้ ลิงค์มายังเว็บไซต์นี ้หรื อไม่ 5) ข้ อมูลที่ปรากฏในเว็บไซต์นนถู ั ้ กต้ องหรื อไม่ คะแนนสาหรับคุณภาพโดยรวมใน เรื่ องความน่าเชื่อถือของเว็บไซต์:

(ความเห็น ใช่ /ไม่ ใช่ ) _______ _______ _______ _______ _______ _______ _______ _______ _______ _______ _______ _______

คุณภาพในการออกแบบ (Design Quality) (ความเห็น ใช่ /ไม่ ใช่ ) 1) การใช้ กราฟิ กต่าง ๆ ในเว็บไซต์เหมาะสมหรื อไม่ _______ _______ 2) การเข้ าถึงข้ อมูลต่าง ๆ ในเว็บไซต์ทาได้ โดยง่ายหรื อไม่ _______ _______ 3) เนื ้อหาในเว็บไซต์อ่านง่ายหรื อไม่ _______ _______ 4) การเข้ าไปยังข้ อมูลที่ต้องการนันอาศั ้ ยการคลิกเมาส์ เพียง 2-3 ครัง้ หรื อไม่ _______ _______ 5) ลิงค์ทื่เชื่อมต่อไปยังเว็บไซต์อื่นนันเป็ ้ นปั จจุบนั และ ถูกรักษาไว้ อย่างดีหรื อไม่ _______ _______ 6) เว็บไซต์นี ้มีฟังก์ชนั่ แสดงเฉพาะตัวอักษรเพียงอย่างเดียว ให้ เลือกใช่หรื อไม่ _______ _______ 7) สามารถค้ นหาเว็บไซต์นี ้พบหรื อไม่ _______ _______ 8) เว็บไซต์นี ้ถูกออกแบบสาหรับการค้ นหาและอ่าน อย่างรวดเร็ วหรื อไม่ _______ _______ 9) การใช้ สีในเว็บไซต์เหมาะสมหรื อไม่ _______ _______ 10) มีการหลีกเลี่ยงการใช้ แสงวูบวาบ การที่ต้องเลื่อนแถบเลื่อน หรื อกราฟิ กที่รบกวนสายตาต่าง ๆ หรื อไม่ _______ _______

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

11) AIT tags นันถู ้ กนามาใช้ สาหรับการอ่านข้ อความแทน การดูภาพหรื อไม่ 12) มีการจัดทาแผนที่เว็บไซต์หรื อไม่ 13) ในทุก ๆ หน้ าเว็บไซต์ มีวธิ ีการที่จะกลับไปยังหน้ า หลักได้ หรื อไม่ 14) เว็บไซต์นี ้สามารถใช้ ได้ ตลอดเวลาโดยมีช่วงเวลาที่ไม่สามารถ เข้ าถึงเว็บได้ (downtime periods) น้ อยครัง้ ใช่หรื อไม่ 15) เว็บไซต์นี ้แสดงข้ อมูลได้ อย่างรวดเร็ วหรื อไม่ คะแนนคุณภาพโดยรวมในเรื่ องการออกแบบ:

193

_______ _______ _______ _______ _______ _______ _______ _______ _______ _______ _______ _______

คุณภาพของเนือ้ หา (Quality of Content): (ความเห็น ใช่ /ไม่ ใช่ ) 1) ข้ อมูลในเว็บไซต์นี ้ปราศจากอคติหรื อไม่ _______ _______ 2) ข้ อมูลในเว็บไซต์นี ้เป็ นต้ นฉบับหรื อไม่ _______ _______ 3) เว็บไซต์นี ้ได้ ให้ ข้อมูลที่เป็ นสาระสาคัญหรื อไม่ (เว็บไซต์สามารถ ที่จะใช้ อ้างอิงโดยไม่ต้องพึง่ พาการลิงค์ไปยังเว็บไซต์อื่น) _______ _______ 4) แหล่งข้ อมูลอื่น ๆ ได้ ถกู ระบุและมีเอกสารประกอบ อย่างชัดเจนหรื อไม่ _______ _______ 5) คุณได้ เข้ าเยี่ยมชมเว็บไซต์อีกครัง้ สาหรับข้ อมูลเพิ่มเติมหรื อไม่ _______ _______ คะแนนสาหรับคุณภาพโดยรวมในเรื่ องเนื ้อหา: _______ _______ คะแนนโดยรวม (คะแนนทัง้ หมดจากหัวข้ อความ น่ าเชื่อถือการออกแบบ และคุณภาพ):

________

www.ThaiCyberU.go.th

194

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

2. ตัวอย่ างแบบสอบถามรูปแบบเว็บไซต์ ทางการศึกษา จากตัวอย่างแบบสอบถาม 2 ตัวอย่าง คือ แบบสอบถามเกี่ยวกับเว็บไซต์ทาง ด้ านการศึกษาระดับอุดมศึกษา (เจนจิรา อนันตกาล, 2548) และตัวอย่างแบบสอบถาม การประเมินเว็บไซต์สาหรับการเรี ยนการสอนอีเลิร์นนิง (Khan, 2005) สรุ ปได้ วา่ 2.1 แบบสอบถามเกี่ ยวกั บเว็บไซต์ ทางด้ านการศึกษาระดับอุ ดมศึกษา (เจนจิรา อนั นตกาล, 2548) มี 3 ตอนประกอบด้ วย ตอนที่ 1 สถานภาพของผู้ตอบ แบบสอบถามและการเข้ าใช้ เว็ บ ไซต์ ท างด้ านการศึก ษาระดับ อุ ด มศึ ก ษา จ านวน 9 ข้ อ ตอนที่ 2 ความคิด เห็ น เกี่ ย วกับ รู ป แบบโฮมเพจเว็ บ ไซต์ ท างด้ า นการศึก ษา ระดับอุดมศึกษา แบ่งเป็ นข้ อสอบถามด้ านองค์ประกอบ 11 ข้ อ ข้ อสอบถามด้ านสี 5 ข้ อ ข้ อสอบถามด้ านตัวอักษร 10 ข้ อ ข้ อสอบถามด้ านภาพประกอบ 3 ข้ อ และข้ อสอบถามด้ าน เสียง 2 ข้ อ ตอนที่ 3 ข้ อคิดเห็นและข้ อเสนอแนะเกี่ยวกับรู ปแบบโฮมเพจเว็บไซต์ทางด้ าน การศึกษาระดับอุดมศึกษา ได้ แก่ 1) แบบสอบถามเกี่ยวกับข้ อคิดเห็นว่า ควรให้ ความสาคัญ ในการจัดรู ปแบบของหน้ าแรก (Homepage) ในด้ านต่าง ๆ อย่างไร โดยให้ เรี ยงลาดับตาม ความส าคัญ ทัง้ 5 ด้ า นคื อ ด้ า นองค์ ป ระกอบ ด้ า นสี ด่ า นตัว อัก ษร ด้ า นภาพประกอบ และด้ านเสี ยง มีจานวน 6 ข้ อ และ 2) แบบสอบถามเกี่ยวกับหัวข้ อที่ควรแสดงในหน้ าแรก (Homepage) มี จ านวน 14 ข้ อ โดยแบบสอบถามเกี่ ย วกับเว็บ ไซต์ ท างด้ า นการศึก ษา ระดับอุดมศึกษา (เจนจิรา อนันตกาล. 2548) มีรายละเอียดดังนี ้ แบบสอบถามเกี่ยวกับเว็บไซต์ ทางด้ านการศึกษาระดับอุดมศึกษา (ที่มา : เจนจิรา อนันตกาล. 2548) ตอนที่ 1 สถานภาพของผู้ ตอบแบบสอบถามและการเข้ าใช้ เว็ บ ไซต์ ทางด้ าน การศึกษาระดับอุดมศึกษา คาชี ้แจงในการตอบแบบสอบถาม : กรุ ณาทาเครื่ องหมาย  หน้ าข้ อความที่ตรงกับข้ อมูล ของท่าน 1. เพศ

 ชาย

 หญิง

2. อายุ

 ต่ากว่า 16 ปี  26-35 ปี  มากกว่า 45 ปี

 16-25 ปี  36-45 ปี

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

195

3. ที่ทางานปั จจุบนั  จังหวัดในภาคเหนือ เช่น เชียงใหม่ เชียงราย ลาปาง ลาพูน แม่ฮ่องสอน แพร่ น่าน  จังหวัดในภาคตะวันออกเฉียงเหนือ เช่น นครราชสีมา ขอนแก่น ร้ อยเอ็ด อุบลราชธานี  จังหวัดในภาคกลาง เช่น กรุ งเทพมหานคร นนทบุรี ปทุมธานี สมุทรปราการ  จังหวัดในภาคตะวันออก เช่น ชลบุรี ระยอง จันทบุรี ตราด  จังหวัดในภาคใต้ เช่น สุราษฎร์ ธานี ชุมพร นครศรี ธรรมราช ภูเก็ต พังงา กระบี่ 4. ระดับการศึกษาและสาขาที่สาเร็ จการศึกษาสูงสุด  ประถมศึกษา  มัธยมศึกษาหรื อเทียบเท่า สาขา  อนุปริ ญญาหรื อเทียบเท่า สาขา  ปริ ญญาตรี หรื อเทียบเท่า สาขา  ปริ ญญาโทหรื อเทียบเท่า สาขา  ปริ ญญาเอกหรื อเทียบเท่า สาขา 5. อาชีพ     

นักเรี ยน พนักงานเอกชน พนักงานของรัฐ พนักงานรัฐวิสาหกิจ ประกอบธุรกิจ

   

ครู /อาจารย์/บุคลากรทางการศึกษา รับราชการ (โปรดระบุ) รับจ้ าง อื่น ๆ (โปรดระบุ)

6. ท่านทราบที่อยู่เว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษาจากที่ใด (ตอบได้ มากกว่า 1 ข้ อ)  บุคคลรู้ จกั เช่น เพื่อน ญาติ  บุคคลในองค์กร เช่น บุคลากร นักศึกษา ในสถานศึกษานัน้ ๆ  จดหมายอิเล็กทรอนิกส์ (E-mail)  การเชื่อมโยงเว็บไซต์อื่น ๆ  สื่อสิ่งพิมพ์  โทรทัศน์/วิทยุ  อื่น ๆ (โปรดระบุ) www.ThaiCyberU.go.th

196

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

7. ท่านเข้ าใช้ เว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา ณ สถานที่ใด (ตอบได้ มากกว่า 1 ข้ อ)  บ้ าน  ที่ทางาน  สถานศึกษา  ร้ านบริ การอินเทอร์ เน็ต  สถานที่ มี จุด บริ ก ารอิ น เทอร์ เ น็ ต เช่ น ห้ า งสรรพสิ น ค้ า หน่ ว ยงานบริ ก าร อินเทอร์ เน็ต  อื่น ๆ (โปรดระบุ) 8. ท่านเข้ าใช้ เว็บไซต์ทางการศึกษาระดับอุดมศึกษาในช่วงเวลาใดมากที่สดุ  เวลา 01.01 – 07.00 น.  เวลา 07.01 - 13.00 น.  เวลา 13.01 - 19.00 น.  เวลา 19.01 - 01.00 น. 9. เหตุผลที่ทา่ นเข้ าใช้ เว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา (ตอบได้ มากกว่า 1 ข้ อ)  เพื่อค้ นหาข้ อมูลหลักสูตรการศึกษา  เพื่อค้ นหาข้ อมูลเกี่ยวกับสถานศึกษา/ หน่วยงานในสถานศึกษา  เพื่อค้ นหาข้ อมูลทางการเรี ยนการสอน/ข้ อมูลทางวิชาการ  เพื่อค้ นหาข้ อมูลบุคลากร/นักศึกษา  เพื่อใช้ กระดานข่าว, กระดานสนทนา (Webboard)  เพื่อการเรี ยนแบบออนไลน์ (e-Learning)  อื่น ๆ (โปรดระบุ) ตอนที่ 2 ความคิดเห็นเกี่ยวกับรูปแบบโฮมเพจเว็บไซต์ ทางด้ านการศึกษาระดับอุดมศึกษา คาชี ้แจงในการตอบแบบสอบถาม : กรุ ณาทาเครื่ องหมาย  หน้ าข้ อความที่ตรงกับข้ อมูล ของท่าน (ด้ านองค์ ประกอบ) 1. ท่านต้ องการให้ หน้ าแรก (Homepage) มีความยาวในการแสดงเท่าใดเทียบกับความยาว ของหน้ าจอภาพ  หนึง่ หน้ าจอภาพ  สองหน้ าจอภาพ  สามหน้ าจอภาพ  ตามความเหมาะสมของเนื ้อหา

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

197

2. ท่านต้ องการให้ หน้ าแรก (Homepage) มีโครงสร้ างเป็ นแนวใด  แนวตัง้ (มี Scroll Bar เลื่อนขึ ้น-ลง)  แนวนอน (มี Scroll Bar เลื่อนซ้ าย-ขวา) 3. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงสัญลักษณ์ของสถาบันในตาแหน่งใด  ด้ านบนชิดซ้ าย  ด้ านบนกึง่ กลาง  ด้ านบนชิดขวา  กึง่ กลางหน้ า  ด้ านล่างชิดซ้ าย  ด้ านล่างกึง่ กลาง  ด้ านล่างชิดขวา  อื่น ๆ (โปรดระบุ) ________ 4. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงเมนูหลักในแนวใด  แนวตัง้ (ข้ ามไปตอบข้ อ 5)  แนวนอน (ข้ ามไปตอบข้ อ 6)  ทังแนวตั ้ งและแนวนอน ้ (ข้ ามไปตอบข้ อ 7) 5. กรณีเลือกแนวตัง้ ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงเมนูหลักในจุดใดของจอภาพ  ด้ านซ้ ายของจอภาพ  ด้ านขวาของจอภาพ  ทังด้ ้ านซ้ ายและด้ านขวาของจอภาพ 6. กรณีเลือกแนวนอน ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงเมนูหลักในจุดใดของจอภาพ  ด้ านบนของจอภาพ  ด้ านล่างของจอภาพ  ทังด้ ้ านบนและด้ านล่างของจอภาพ 7. กรณีเลือกทังแนวตั ้ งและแนวนอน ้ ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงเมนูหลัก ในจุดใดของจอภาพ  แนวตังอยู ้ ่ด้านซ้ าย แนวนอนอยู่ด้านบน  แนวตังอยู ้ ่ด้านซ้ าย แนวนอนอยู่ด้านล่าง  แนวตังอยู ้ ่ด้านขวา แนวนอนอยู่ด้านบน  แนวตังอยู ้ ่ด้านขวา แนวนอนอยู่ด้านล่าง

www.ThaiCyberU.go.th

198

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

8. ท่านต้ องการให้ หน้ าแรก (Homepage) มีเมนูในรู ปแบบใด  แบบแถบบาร์ (Navigation Bar)  แบบ Pop-Up Menu  แบบ Pull-Down Menu  อื่น ๆ (โปรดระบุ) 9. ท่านต้ องการให้ หน้ าแรก (Homepage) มีการเชื่อมโยงจากเมนูหลักไปสู่เนื ้อหาในรู ปแบบใด  แบบตัวอักษรข้ อความ  แบบกาหนดตาแหน่งลงในภาพ (Image map)  ภาพกราฟิ กหรื อปุ่ มสัญรู ป (Icon)  แบบเลือกหัวข้ อ (Search Box)  ใช้ สีแสดงสถานการณ์ใช้ งาน  อื่น ๆ (โปรดระบุ) ______ 10. ท่านต้ องการให้ หน้ าแรก (Homepage) จัดวางเนื ้อหาในรู ปแบบใด  ชิดขอบซ้ าย  จัดกลาง  ชิดขอบขวา  เสมอขอบซ้ ายและขวา  ตามความเหมาะสมของเนื ้อหา 11. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงข้ อความในรู ปแบบใด  คอลัมน์เดียวในหนึง่ จอภาพ  สองคอลัมน์ในหนึง่ จอภาพ  สามคอลัมน์ในหนึง่ จอภาพ  อื่น ๆ (โปรดระบุ) ______ (ด้ านสี) 1. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงสีของพื ้นหลังกี่สี  น้ อยกว่า 2 สี  2-3 สี  4-5 สี  มากกว่า 5 สี  ตามความเหมาะสมของเนื ้อหา 2. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงสีของตัวอักษรกี่สี  น้ อยกว่า 2 สี  2-3 สี  4-5 สี  มากกว่า 5 สี  ตามความเหมาะสมของเนื ้อหา

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

199

3. ท่านต้ องการให้ หน้ าแรก (Homepage) มีพื ้นหลังเป็ นลักษณะใด  เป็ นสีขาว  เป็ นลวดลาย  เป็ นภาพ  เป็ นโทนสี  อื่น ๆ (โปรดระบุ) 4. ในกรณีที่หน้ าแรก (Homepage) มีพื ้นหลัง ท่านต้ องการให้ สีของพื ้นหลังและสีของตัวอักษร ข้ อความเป็ นแบบใด  พื ้นหลังสีเข้ ม ตัวอักษรข้ อความสีอ่อน  พื ้นหลังสีอ่อน ตัวอักษรข้ อความสีเข้ ม  อื่น ๆ (โปรดระบุ) 5. ท่านต้ องการให้ หน้ าแรก (Homepage) ใช้ สีในโทนใด  โทนสีร้อน เช่น แดง ส้ ม เหลือง  โทนสีเย็น เช่น ฟ้า น ้าเงิน ม่วง  โทนสีตรงข้ าม เช่น เขียวกับส้ ม  อื่น ๆ (โปรดระบุ) (ตัวอักษร) 1. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงชนิดของตัวอักษรกี่ชนิด  น้ อยกว่า 2 ชนิด  2 – 3 ชนิด  4 – 5 ชนิด  มากกว่า 5 ชนิด  ตามความเหมาะสมของเนื ้อหา 2. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงตัวอักษรของหัวเรื่ องแตกต่างจากตัวอักษร ของเนื ้อหาหรื อไม่  ต้ องการ  ไม่ต้องการ  ขึ ้นอยู่กบั เนื ้อหา 3. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงตัวอักษรของ หัวเรื่ อง ขนาดเท่าใด  ขนาด 16 พอยท์  ขนาด 18 พอยท์  ขนาด 20 พอยท์  ขนาด 24 พอยท์  อื่น ๆ (โปรดระบุ) _______________

www.ThaiCyberU.go.th

200

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

4. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงตัวอักษรของเนื ้อหา ขนาดเท่าใด  ขนาด 14 พอยท์  ขนาด 16 พอยท์  ขนาด 18 พอยท์  ขนาด 20 พอยท์  อื่น ๆ (โปรดระบุ) _______ 5. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงลักษณะตัวอักษรของหัวเรื่ องแบบใด  ตัวปกติ  ตัวหนา  ตัวเอี ยง  ตัวขีดเส้ นใต้  ตามความเหมาะสมของเนื ้อหา 6. ท่านต้ องการให้ หน้ าแรก (Homepage) แสดงลักษณะตัวอักษรของเนื ้อหาแบบใด  ตัวปกติ  ตัวหนา  ตัวเอี ยง  ตัวขีดเส้ นใต้  ตามความเหมาะสมของเนื ้อหา 7. ถ้ า หัว เรื่ อ งเป็ นภาษาไทย ท่านต้ อ งการให้ หน้ าแรก (Homepage) แสดงตัวอัก ษรของ หัวเรื่ องรู ปแบบใด  มีหวั เช่น หัวเรื่ อง  ไม่มีหวั เช่น หัวเรื่ อง  ลายมือ เช่น หัวเรื่ อง  ตามความเหมาะสมของเนื ้อหา 8. ถ้ าเนื ้อหาเป็ นภาษาไทย ท่านต้ องการให้ แสดงตัวอักษรของหัวเรื่ องรู ปแบบใด  มีหวั เช่น เนื ้อหา  ไม่มีหวั เช่น เนื ้อหา  ลายมือ เช่น เนื ้อหา  ตามความเหมาะสมของเนื ้อหา 9. ถ้ าหัวเรื่ องเป็ นภาษาอังกฤษ ท่านต้ องการให้ แสดงตัวอักษรของหัวเรื่ องรู ปแบบใด  มีเชิง เช่น HEADING  ไม่มีเชิง เช่น HEADING  ลายมือ เช่น HEADING  ตามความเหมาะสมของเนื ้อหา 10. ถ้ า เนื ้อหาเป็ นภาษาอังกฤษ ท่านต้ องการให้ แสดงตัวอักษรของหัวเรื่ องรู ปแบบใด  มีเชิง เช่น BODY TEXT  ไม่มีเชิง เช่น BODY TEXT  ลายมือ เช่น BODY TEXT  ตามความเหมาะสมของเนื ้อหา

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

(ด้ านภาพประกอบ) 1. ท่านต้ องการให้ มีภาพประกอบในหน้ าแรก (Homepage) หรื อไม่  ต้ องการ  ไม่ต้องการ

201

 ขึ ้นอยู่กบั เนื ้อหา

2. ในกรณี ที่ มี ภ าพประกอบ ท่ า นต้ อ งการให้ ห น้ าแรก (Homepage) แสดงจ านวนภาพ ประกอบกี่ภาพ  น้ อยกว่า 2 ภาพ  2 – 3 ภาพ  4 – 5 ภาพ  มากกว่า 5 ภาพ  ขึ ้นอยู่กบั เนื ้อหา 3. ในกรณีที่มีภาพประกอบ ท่านต้ องการให้ หน้ าแรก (Homepage) ใช้ ภาพประกอบแบบใด  ภาพถ่าย  ภาพกราฟิ ก  ภาพวีดทิ ศั น์ (Video)  ภาพเคลื่อนไหว (Animation)  ตามความเหมาะสมของเนื ้อหา (ด้ านเสียง) 1. ท่านต้ องการให้ มีเสียงประกอบในหน้ าแรก (Homepage) หรื อไม่  ต้ องการ  ไม่ต้องการ

 ขึ ้นอยู่กบั เนื ้อหา

2. ในกรณีที่มีเสียงประกอบ ท่านต้ องการให้ หน้ าแรก (Homepage) ใช้ เสียงประกอบแบบใด  เสียงบรรยาย  เสียงสนทนา  เสียงดนตรี  เสียงประกอบ (Effect)  ตามความเหมาะสมของเนื ้อหา

www.ThaiCyberU.go.th

202

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

ตอนที่ 3 ข้ อคิ ด เห็ น และข้ อเสนอแนะเกี่ ยวกั บ รู ป แบบโฮมเพจเว็ บ ไซต์ ทาง ด้ านการศึกษา ระดับอุดมศึกษา คาชี ้แจงในการกรอกแบบสอบถาม : กรุ ณาจัดลาดับความสาคัญจากมากไปหาน้ อย ในข้ อที่ ท่ า นเห็ น ว่ า เหมาะสมในรู ป แบบ โฮมเพจเว็ บ ไซต์ ทางด้ านการศึกษาระดับอุดมศึกษา โดย รายการที่มีความสาคัญมากที่สุด ให้ เป็ นลาดับที่ 1 ถึง รายการที่มีความสาคัญน้ อย ที่สุด ให้ เป็ นลาดับที่ 5 ท่ านเห็นว่ าควรให้ ความสาคัญในการจัดรู ปแบบของหน้ าแรก (Homepage) ในด้ าน ต่ าง ๆ อย่ างไร (กรุณาเรียงลาดับความสาคัญจากมากไปน้ อย) ลาดับ รายการ  1. ด้ านองค์ประกอบ  2. ด้ านสี  3. ด้ านตัวอักษร  4. ด้ านภาพประกอบ  5. ด้ านเสียง การจัดรูปแบบของหน้ าแรก (Homepage) ด้ านองค์ ประกอบ ลาดับ รายการ  1. ขนาดของหน้ าแรก (Homepage) ควรพอดีกบั จอภาพ  2. หน้ าแรก (Homepage) ควรมีส่วนประกอบที่สาคัญอย่างครบถ้ วน เช่น ชื่อ  สถาบัน, เมนู และเนื ้อหา  3. ตราสัญลักษณ์และชื่อสถาบันควรวางในที่ที่สงั เกตง่าย อ่านได้ ชดั เจนและ  แสดงในทุก ๆ หน้ าของเว็บไซต์ 4. เมนูหลัก ควรใช้ ง านสะดวก ชัด เจน เข้ า ใจง่ า ย แสดงในทุก ๆ หน้ า ของ เว็บไซต์ 5. รู ปแบบหน้ าแรก (Homepage) ควรมีความคล้ ายคลึงกันตลอดทังเว็ ้ บไซต์

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

การจัดรูปแบบของหน้ าแรก (Homepage) ด้ านสี ลาดับ รายการ  1. ใช้ สีสวยงาม สบายตา ไม่หลากหลายเกินไป  2. ใช้ สีสื่อความหมายได้ ตรงตามจุดประสงค์  3. ใช้ สีได้ เหมาะสม กลมกลืน ระหว่างสีพื ้นหลังและสีตวั อักษร  4. ใช้ สีให้ คล้ ายคลึงกันในทุก ๆ หน้ าของเว็บไซต์  5. ใช้ สีอย่างเหมาะสมกับลักษณะของเว็บไซต์ การจัดรูปแบบของหน้ าแรก (Homepage) ด้ านตัวอักษร ลาดับ รายการ  1. ใช้ ตวั อักษรเป็ นมาตรฐานที่มีอยู่ในทุกเครื่ อง  2. ใช้ ตวั อักษรแบบที่อ่านง่าย ชัดเจน กลมกลืน กับทุกหน้ า  3. ใช้ ตวั อักษรในรู ปแบบที่แตกต่างกันอย่างเหมาะสม เช่น ระหว่างหัวข้ อกับ  เนื ้อหา  4. ใช้ ขนาดตัวอักษรที่เหมาะสมกับกลุ่มเป้าหมาย 5. ใช้ ตวั อักษรให้ คล้ ายคลึงกันในทุก ๆ หน้ าของเว็บไซต์ การจัดรูปแบบของหน้ าแรก (Homepage) ด้ านภาพประกอบ ลาดับ รายการ  1. ใช้ ภาพประกอบเพื่อความสวยงาม  2. ใช้ ภาพประกอบเพื่ออธิบายเพิ่มเติมจากตัวอักษร  3. ใช้ ภาพประกอบเพื่อให้ เหมาะสมกับกลุ่มเป้าหมาย  4. ชนิดและขนาดของภาพต้ องเหมาะสมกับจอภาพมาตรฐาน ไม่ใหญ่เกินไป  5. กรณีเป็ นภาพวีดทิ ศั น์ ควรมีการบอกวิธีการแสดงภาพหรื อบอกโปรแกรมที่ ใช้ เปิ ดดู

www.ThaiCyberU.go.th

203

204

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

การจัดรูปแบบของหน้ าแรก (Homepage) ด้ านเสียงประกอบ ลาดับ รายการ  1. ใช้ เสียงประกอบที่ไพเราะและชัดเจนในการฟั ง  2. ใช้ เสียงประกอบเพื่ออธิบายเพิ่มเติมจากตัวอักษร  3. ใช้ เสียงประกอบเหมาะสมกับกลุ่มเป้าหมาย  4. ใช้ เสียงประกอบสอดคล้ อง, สมจริ ง, กับเนื ้อหา  5. บอกวิธีการแสดงเสียงและการเปิ ด-ปิ ด เสียง หัวข้ อที่ควรแสดงในหน้ าแรก (Homepage) คาชี แ้ จงในการกรอกแบบสอบถาม : กรุ ณ าใส่เครื่ อ งหมาย  ในช่อ งที่ท่านเห็นว่า เหมาะสมในรู ปแบบโฮมเพจเว็บไซต์ทางด้ านการศึกษา ระดับอุดมศึกษา รายการแสดงความเห็น 1. ชื่อเรียกเว็บไซต์ (www) 2. ชื่อสถาบัน 3. ตราสถาบัน 4. ประวัติสถาบัน 5. โครงสร้ างสถาบัน 6. ข้ อมูลจาเป็ นสาหรับผู้เข้ าใช้ 7. ข้ อมูลพิเศษเกี่ ยวกับ สถาบัน เช่น ประกาศ 8. การสืบค้ นข้ อมูล (Search engine) 9. การเชื่อมโยงไปยังหน่วย งานอื่น ในสถาบัน 10. การเชื่ อ มโยงไปยั ง หน่ ว ย งาน ภายนอกที่เกี่ยวข้ อง 11. การนับจานวนผู้เข้ าใช้ 12. ข่าวสารของสถาบัน 13. ที่อยู่, e-mail และชื่อเว็บไซต์ของ สถาบัน 14. การเลือกใช้ ภาษาไทย/อังกฤษ ในเว็บไซต์

มาก มาก ปาน น้ อย ที่สุด กลาง

น้ อย ที่สุด

ไม่ มี ความเห็น

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

205

2.2 แบบสอบถามการประเมินเว็บไซต์ สาหรั บการเรี ยนการสอนอีเลิร์นนิง (Khan, 2005) มี 5 ตอนประกอบด้ วย ตอนที่ 1 แบบสอบถามเกี่ยวกับการประเมิน การออกแบบส่วนต่อประสาน จานวน 17 ข้ อ ตอนที่ 2 แบบสอบถามเกี่ยวกับการประเมิน การออกแบบเนื ้อหา จานวน 10 ข้ อ ตอนที่ 3 แบบสอบถามเกี่ยวกับการประเมินการออกแบบ ระบบนาทาง จานวน 20 ข้ อ ตอนที่ 4 แบบสอบถามเกี่ยวกับการประเมินการเข้ าถึงข้ อมูล จานวน 6 ข้ อ ตอนที่ 5 แบบสอบถามเกี่ยวกับการประเมินการทดสอบการใช้ งาน จานวน 6 ข้ อ โดยแบบสอบถามการประเมินเว็บไซต์สาหรับการเรี ยนการสอนอีเลิร์นนิง (Khan, 2005) มีรายละเอียดดังนี ้ แบบสอบถามการประเมินเว็บไซต์ สาหรับการเรียนการสอนอีเลิร์นนิง (ที่มา : Khan, 2005) 1. การออกแบบส่ วนต่ อประสาน 1.1 หน้ าจอเว็บไซต์แสดงผลสภาพปกติหรื อไม่ เมื่อเปิ ดใช้ กบั โปรแกรมค้ นหาเว็บอื่น ๆ  ใช่  ไม่ใช่ 1.2 เนื ้อหาบทเรี ยนมีองค์ประกอบต่อไปนี ้หรื อไม่  ภาพและวัตถุ  เสียง  วีดโิ อ  ภาพเคลื่อนไหว 1.3 เนื ้อหาเว้ นช่องว่างอย่างเหมาะสม (ประมาณ 20%) ช่วยให้ ผ้ อู ่านผ่อนคลายสายตา ในขณะอ่าน หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 1.4 หน้ าเว็บเพจน่าสนใจและสามารถดึงดูดความสนใจหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

1.5 ข้ อความในเว็บไซต์หรื อบทเรี ยนอ่านได้ ง่ายและชัดเจนหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

1.6 สีพื ้นหลังและสีส่วนหน้ ากลมกลืนกันหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

www.ThaiCyberU.go.th

206

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

1.7 เว็บไซต์มีรูปแบบนาเสนอเหมือนกับเอกสารประกอบบทเรี ยนหรื อไม่ ซึง่ ช่วยให้ ผ้ เู รี ยนเห็น ความสัมพันธ์ระหว่างบทเรี ยนบนเครื อข่ายอินเทอร์ เน็ตกับเอกสารประกอบบทเรี ยน  ใช่  ไม่ใช่  ระบุไม่ได้ 1.8 องค์ประกอบในการนาเสนอ เช่น ชื่อเรื่ อง เนื ้อหา การเชื่อมโยง และอื่น ๆ บนเว็บไซต์หรื อ บทเรี ยนใช้ รูปแบบอักษรเดียวกันหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 1.9 เว็บ ไซต์ ห รื อ บทเรี ย นใช้ รู ป แบบอัก ษรมาตรฐานทั่ว ไปหรื อ ไม่ โดยแบบอัก ษรจะไม่ เปลี่ยนแปลง เมื่อแสดงผลบนจอคอมพิวเตอร์ และโปรแกรมค้ นหาเว็บอื่น ๆ  ใช่  ไม่ใช่  ระบุไม่ได้ 1.10 เว็บไซต์หรื อบทเรี ยนมีรู ปแบบโครงสร้ างการใช้ สี ตาแหน่งการวางชื่ อเรื่ องและเนื อ้ หา รู ปแบบ เดียวกันหรื อไม่ในแต่ละหน้ า  ใช่  ไม่ใช่  ระบุไม่ได้ 1.11 ภาพช่วยให้ ผ้ เู รี ยนบรรลุวตั ถุประสงค์ของบทเรี ยนหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

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

ใช่

ไม่ ใช่

ระบุไม่ ได้

อื่น ๆ

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

207

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

 ระบุไม่ได้

1.16 ภาพและเนื ้อหามีความชัดเจนเมื่อพิมพ์  ใช่  ไม่ใช่

 ระบุไม่ได้

1.17 แต่ละหน้ าการแสดงบทเรี ยนบนจอคอมพิวเตอร์ สามารถพิมพ์ออกมาได้ ขนาดพอดีใน หนึง่ หน้ าเอกสาร  ใช่  ไม่ใช่  ระบุไม่ได้ 2. การออกแบบเนือ้ หา 2.1 ในบทเรี ยนมีการใช้ กลวิธีดงั ต่อไปนี ้เพื่อกระตุ้นความสนใจของผู้เรี ยนหรื อไม่  ภาพเคลื่อนไหว (ภาพเหตุการณ์สนั ้ ๆ)  วัตถุเคลื่อนไหว (เช่น วัตถุเคลื่อนไหวชนิด GIFs)  ภาพและวัตถุประกอบการบรรยาย  เห็นความแตกต่างระหว่างส่วนที่เป็ นจุดเด่นและส่วนประกอบอื่น ๆ  มีการใช้ สี เสียง และสัญลักษณ์ที่เกี่ยวข้ องกับเนื ้อหา  อื่น ๆ (ระบุ) www.ThaiCyberU.go.th

208

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

2.2 ในบทเรี ยนมีการใช้ กลวิธีดงั ต่อไปนี ้เพื่อพัฒนาความคงทนในการเรี ยนรู้ ของผู้เรี ยนหรื อไม่  หน้ าจอการนาเสนอจัดเป็ นลาดับ  เนื ้อหาบทเรี ยนจัดเป็ นระบบ เกี่ยวข้ องกันอย่างมีความหมาย  มีบทเกริ่ นนาเข้ าสู่เนื ้อหา  รู ป แบบโครงสร้ างการน าเสนอเดี ย วกัน ของแต่ล ะหน้ าการน าเสนอ เช่ น การวางชื่อ เรื่ อง ภาพ บทความ และส่วนประกอบอื่น ๆ  มีเครื่ องมือที่แบ่งเนื ้อหาเป็ นออกส่วน ๆอย่างเหมาะสม  มีคานาและบทสรุ ป  อื่น ๆ (ระบุ) 2.3 บทเรี ยนนาเสนอใจความสาคัญเพียงประเด็นเดียวในหนึง่ ย่อหน้ าหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 2.4 บทความแบ่งออกเป็ นช่วง ๆและอานวยต่อการอ่านแบบกวาดสายตาเพื่อความเข้ าใจหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 2.5 บทเรี ยนใช้ องค์ประกอบของสื่อประสมดังต่อไปนี ้หรื อไม่  ข้ อความ  ภาพนิ่ง  ภาพเคลื่อนไหว  เสียง  วิดีโอ  อื่น ๆ (ระบุ) 2.6 ถ้ าตอบ “ใช่” ในข้ อ 22 การผสมผสานของสื่อประสมเอื ้อให้ เกิดการเรี ยนรู้ บทเรี ยนอย่างมี ประสิทธิภาพหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

2.7 สื่อประสมที่ใช้ ในบทเรี ยนมีประสิทธิภาพในการสร้ างการเรี ยนรู้ อย่างมีความหมายมากเท่าใด การใช้ ส่ ือประสม ข้ อความ ภาพนิ่ง ภาพเคลื่อนไหว เสียง วิดีโอ อื่น ๆ (ระบุ)

ประสิทธิภาพในการนามาใช้ ในบทเรียน มาก ปานกลาง น้ อย อื่น ๆ

2.8 บทเรี ยนมีการนาเสนอองค์ประกอบทางภาษาดังต่อไปนี ้อย่างถูกต้ องหรื อไม่  ไวยากรณ์  เครื่ องหมายวรรคตอน  การสะกดคา  ไม่สามารถระบุได้  อื่น ๆ (ระบุ) 2.9 บทเรี ยนมีการนาเสนอองค์ประกอบสื่อประสมต่อไปนี ้อย่างเหมาะสมและสอดคล้ องกันหรื อไม่  ข้ อความ  ภาพนิ่ง  ภาพเคลื่อนไหว  เสียง  วิดีโอ  อื่น ๆ (ระบุ) ________ 2.10 มีวธิ ีการทางเทคนิคง่าย ๆ สาหรับบทเรี ยนออนไลน์แก่ผ้ เู รี ยนและผู้สอนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3. การออกแบบระบบนาทาง 3.1 บทเรี ยนมีโครงสร้ างเนื ้อหา เช่น หน่วยการเรี ยนรู้ สาระความรู้ กิจกรรมการเรี ยนรู้ และ อื่น ๆ เพื่อนาทางให้ ผ้ เู รี ยนศึกษาบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ)

www.ThaiCyberU.go.th

209

210

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3.2 บทเรี ยนมีแผนผังเว็บไซต์ เช่น ภาพรวมของบทเรี ยน เพื่อนาทางให้ ผ้ เู รี ยนศึกษาบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.3 บทเรี ยนเว็บไซต์ให้ ผ้ เู รี ยนถ่ายข้ อมูลเสียง วิดีโอ และภาพที่มีขนาดใหญ่ลงในหน่วย ความจาหลักก่อนเรี ยน เพื่อหลีกเลี่ยงปั ญหาติดขัดในการถ่ายข้ อมูลขณะเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.4 การเชื่อมโยงหลายมิตมิ ีสญ ั ลักษณ์และบอกจุดหมายในการเชื่อมโยงแก่ผ้ เู รี ยนเพียงพอ ในการตัดสินใจทาการเชื่อมโยงหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.5 บทเรี ยนมีการเชื่อมโยงภายในเว็บไซต์มากเกินไปส่งผลให้ ผ้ เู รี ยนสับสนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.6 บทเรี ยนมีการเชื่อมโยงภายนอกเว็บไซต์มากเกินไปส่งผลให้ ผ้ เู รี ยนสับสนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.7 สัญลักษณ์ที่ใช้ แทนการทางานในโปรแกรม (icon) เป็ นที่ค้ นุ เคยต่อผู้เรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.8 บทเรี ยนมี ก ารใช้ สี รู ป แบบเดี ย วกัน แสดงการเชื่ อ มโยงที่ ผ้ ู เรี ยนได้ เข้ าถึ ง แล้ วและ การเชื่อมโยงที่ผ้ เู รี ยนยังไม่ได้ เข้ าถึงหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.9 บทเรี ยนมีความยืดหยุ่นในการเรี ยนผ่านคาสั่งในบทเรี ยน โดยผู้เรี ยนมีทางเลือกต่าง ๆ ในการศึกษาบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ)

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3.10 บทเรี ยนมีการแนะนาแนวทางการเรี ยนบทเรี ยนแก่ผ้ เู รี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.11 เว็บไซต์มีการนาทางเข้ าสู่บทเรี ยนได้ ง่ายเท่าใด ผู้เรี ยนเชื่อมโยงไปยังหน้ าการนาเสนอ ต่าง ๆ ได้ สะดวก ไม่หลงหรื อสับสนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.12 บทเรี ยนมีการเชื่อมโยงไปยังหน้ าเว็บไซต์ที่กาลังปรับปรุ งอยู่หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.13 เว็บไซต์มีช่องทางการค้ นหาข้ อมูลหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) ถ้ ามี ระบุช่องทางการค้ นหาข้ อมูล  ช่องทางการค้ นหาข้ อมูลภายในเว็บไซต์บทเรี ยน  ช่องทางการค้ นหาข้ อมูลจากเว็บไซต์ภายนอกอื่น ๆ 3.14 ใช้ รูปแบบสัญลักษณ์และคาเดียวกันเพื่อช่วยนาทางการเรี ยนในบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.15 ทุกหน้ าการนาเสนอบทเรี ยนบนเว็บไซต์มีการเชื่อมโยงกลับมายังหน้ าหลักหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.16 การเชื่อมโยงภายในบทเรี ยนทังหมดได้ ้ เชื่อมโยงไปยังจุดหมายที่ถกู ต้ องหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ)

www.ThaiCyberU.go.th

211

212

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3.17 การเชื่อมโยงภายนอกบทเรี ยนทังหมดได้ ้ เชื่อมโยงไปยังจุดหมายที่ถกู ต้ องหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.18 บทเรี ยนหรื อเว็บไซต์มีการเชื่อมโยงที่ยกเลิกใช้ งานแล้ วหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 3.19 มีการเชื่อมโยงหลายมิตใิ นบทเรี ยนมากเกินไปในแต่ละหน้ าการนาเสนอบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.20 ระบบการฟั งเสียงและดูวดิ ีโอโดยตรงบนเว็บไซต์มีประสิทธิภาพมากเท่าใด ระดับคุณภาพ ระบบ การรับชมโดยตรง มากที่สุด มาก ปานกลาง น้ อย น้ อยมาก เสียง วิดีโอ อื่น ๆ (ระบุ)

4. การเข้ าถึงข้ อมูล 4.1 เว็บไซต์ได้ ออกแบบมาให้ ผ้ เู รี ยนจานวนมากเข้ าถึงบทเรี ยนได้ หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.2 บทเรี ยนมีข้อความสารองอธิบายภาพและวัตถุหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

4.3 บทเรี ยนมีข้อความบรรยายประกอบการฟั งหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

4.4 หน้ าจอการนาเสนอบทเรี ยนสามารถปรับขนาดให้ เหมาะกับผู้บกพร่ องทางสายตาได้ หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

4.5 สามารถมองเห็นความแตกต่างของสีที่ใช้ ในการนาเสนอบทเรี ยนอย่างชัดเจนเพื่ออานวย แก่ผ้ บู กพร่ องทางสายตาหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 4.6 ผู้เรี ยนสามารถใช้ แป้นพิมพ์อกั ษรแทนการใช้ เมาส์หรื ออุปกรณ์เคลื่อนตาแหน่งในการนา ทางศึกษาบทเรี ยนการเรี ยนรู้ ผ่านสื่ออิเล็กทรอนิกส์ (e- Learning) ได้ หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 5.การทดสอบการใช้ งาน 5.1 มีการทดลองใช้ งานกับผู้เรี ยนกลุ่มตัวอย่างหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 5.2 ผู้เรี ยนตอบคาถามต่าง ๆในบทเรี ยนได้ ภายในเวลาที่เหมาะสมหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 5.3 ผู้เรี ยนรู้ วา่ กาลังอยู่ตาแหน่งใดในบทเรี ยนและนาทางการเรี ยนรู้ ได้ โดยไม่ต้องคาดเดาหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 5.4 การใช้ คาศัพท์เฉพาะทางในบทเรี ยนสามารถทาความเข้ าใจได้ ง่ายหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 5.5 ผู้เรี ยนเห็นตัวอย่างบทเรี ยนที่จะศึกษาหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

5.6 เว็บไซต์ออกแบบมาเพื่ออานวยให้ ผ้ เู รี ยนเข้ าถึงเนื ้อหาเฉพาะที่ต้องการได้ อย่างสะดวก หรื อไม่ภายในการเชื่อมโยงไม่เกิน 3 ครัง้  ใช่  ไม่ใช่  ระบุไม่ได้ 

www.ThaiCyberU.go.th

213

214

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3. ตัวอย่ างแบบประเมินประสิทธิภาพเว็บไซต์ ทางการศึกษาและแบบสอบถาม ความพึงพอใจเว็บไซต์ ทางการศึกษา ตัวอย่างแบบประเมินประสิทธิภาพเว็บไซต์ทางการศึกษาที่นามาเสนอเป็ นแนวทาง นี ้ แปลและปรับปรุ งจาก Khan, 2005 และ Gary et al., 2008 โดยจินตวีร์ คล้ ายสังข์ (2553) และสาหรั บแบบสอบถามความพึงพอใจเว็บไซต์ทางการศึกษา ที่นามาเสนอเป็ นแนวทาง เป็ นแบบสอบถามที่ปรับปรุ งจาก เอกบุรุษ แฉ่งใจ, 2549; ณัฐพล ราไพ, 2548; สมพร สุขะ, 2545; และ ถนอมพร เลาหจรัสแสง, 2545 โดยจินตวีร์ คล้ ายสังข์ (2553) มีรายละเอียดดังนี ้ แบบประเมินประสิทธิภาพเว็บไซต์ ทางการศึกษา ตอนที่ 1 ข้ อมูลส่ วนตัวของผู้ตอบแบบสอบถาม คาอธิบาย โปรดทาเครื่ องหมาย  ในช่องที่ตรงกับความเป็ นจริ งและความคิดเห็นของ ท่านมากที่สดุ 1. เพศ  ชาย  หญิง 2. อายุ...................ปี 3. หลักสูตรที่กาลังศึกษาในมหาวิทยาลัยไซเบอร์ ไทย  หลักสูตรผู้สอนอีเลิร์นนิง  หลักสูตรผู้ออกแบบคอร์ สแวร์ อีเลิร์นนิง  หลักสูตรผู้บริ หารโครงการอีเลิร์นนิง ตอนที่ 2 ความคิดเห็นเกี่ยวกับประสิทธิภาพเว็บไซต์ ทางการศึกษา 1. การออกแบบมัลติมีเดีย 1.1 เนื ้อหาของบทเรี ยนมีองค์ประกอบต่อไปนี ้หรื อไม่  ภาพและวัตถุ  เสียง  วิดีโอ  ภาพเคลื่อนไหว 1.2 ภาพประกอบในบทเรี ยนช่วยสนับสนุนให้ ผ้ เู รี ยนสามารถบรรลุวตั ถุประสงค์ของบทเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

1.3 เว็บไซต์ใช้ รูปแบบตัวอักษรที่อ่านง่าย ชัดเจนและสม่าเสมอ  ใช่  ไม่ใช่

 ระบุไม่ได้

1.4 เว็บไซต์ใช้ เสียงประกอบสม่าเสมอ  ใช่  ไม่ใช่

 ระบุไม่ได้

215

1.5 เว็บไซต์ วีดิทศั น์ที่ใช้ บนบทเรี ยน แสดงผลอย่างไร  เร็ ว  เร็ วปานกลาง  ค่อนข้ างช้ า  ช้ ามาก 1.6 สีพื ้นหลังและสีข้อความของเว็บไซต์กลมกลืนกันหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

1.7 เว็บไซต์มีโครงสร้ างการใช้ สี ตาแหน่งการวางชื่อเรื่ องและเนื ้อหารู ปแบบเดียวกันหรื อไม่ใน แต่ละหน้ า  ใช่  ไม่ใช่  ระบุไม่ได้ 2. การออกแบบส่ วนต่ อประสาน 2.1 หน้ าจอของเว็บไซต์แสดงผลสภาพปกติหรื อไม่ เมื่อเปิ ดใช้ กบั โปรแกรมค้ นหาเว็บอื่น ๆ  ใช่  ไม่ใช่ 2.2 เนื ้อหาเว้ นช่องว่างอย่างเหมาะสม (ประมาณ 20% ของพื ้นที่หน้ าจอ) ช่วยให้ ผ้ อู ่านผ่อนคลาย สายตาในขณะอ่านหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 2.3 หน้ าเว็บไซต์น่าสนใจและสามารถดึงดูดความสนใจหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

2.4 ข้ อความในเว็บไซต์อ่านได้ ง่ายและชัดเจนหรื อไม่  ใช่  ไม่ใช่

 ระบุไม่ได้

www.ThaiCyberU.go.th

216

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

2.5 เว็บไซต์ใช้ รูปแบบอักษรมาตรฐานทัว่ ไปหรื อ ไม่ โดยแบบอักษรจะไม่เปลี่ ยนแปลงเมื่ อ แสดงผลบนจอคอมพิวเตอร์ และโปรแกรมค้ นหาเว็บอื่น ๆ (Browser)  ใช่  ไม่ใช่  ระบุไม่ได้ 2.6 เว็บไซต์มีรูปแบบนาเสนอเหมือนกับเอกสารประกอบบทเรี ยนหรื อไม่ ซึง่ ช่วยให้ ผ้ เู รี ยนเห็น ความสัมพันธ์ระหว่างบทเรี ยนบนเครื อข่ายอินเทอร์ เน็ตกับเอกสารประกอบบทเรี ยน  ใช่  ไม่ใช่  ระบุไม่ได้ 2.7 องค์ประกอบในการนาเสนอ เช่น ชื่อเรื่ อง เนื ้อหา การเชื่อมโยง และอื่น ๆ บนเว็บไซต์ใช้ รู ปแบบอักษรเดียวกันหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 2.8 เว็บไซต์ใช้ เวลาในการถ่ายข้ อมูล (load) และแสดงผลบนหน้ าจอนานเท่าไร  เร็ ว  เร็ วปานกลาง  ค่อนข้ างช้ า  ช้ ามาก 2.9 เว็บไซต์มีการอ้ างอิงผู้เกี่ยวข้ องกับการออกแบบและพัฒนาบทเรี ยนต่อไปนี ้หรื อไม่ ผู้สร้ างบทเรี ยน ผู้สอน ผู้เชี่ยวชาญในสาระวิชา นักออกแบบการสอน นักเขียนโปรแกรม นักออกแบบภาพและวัตถุ นักพัฒนาสื่อประสม หัวหน้ าการจัดการเรียนการสอน อื่น ๆ (ระบุ)

ใช่

ไม่ ใช่

ระบุไม่ ได้

อื่น ๆ

2.10 เว็บไซต์/บทเรี ยนมีการเชื่อมโยงหน้ าอื่นหรื อไปยังเว็บไซต์อื่น ๆ หรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 2.11 เว็บไซต์/บทเรี ยนมีการเชื่อมโยงไปยังหน้ าประวัติของผู้เชี่ยวชาญในสาระวิชา  ใช่  ไม่ใช่  ระบุไม่ได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

2.12 ภาพและเนื ้อหามีความชัดเจนเมื่อพิมพ์  ใช่  ไม่ใช่

217

 ระบุไม่ได้

2.13 แต่ละหน้ าการแสดงบทเรี ยนบนจอคอมพิวเตอร์ สามารถพิมพ์ออกมาได้ ขนาดพอดีใน หนึง่ หน้ าเอกสาร  ใช่  ไม่ใช่  ระบุไม่ได้ 3. การออกแบบเนือ้ หา 3.1 ในบทเรี ยนมีการใช้ กลวิธีดงั ต่อไปนี ้เพื่อกระตุ้นความสนใจของผู้เรี ยนหรื อไม่  ภาพเคลื่อนไหว (ภาพเหตุการณ์สนั ้ ๆ)  วัตถุเคลื่อนไหว (เช่น วัตถุเคลื่อนไหวชนิด GIFs)  ภาพและวัตถุประกอบการบรรยาย  การแสดงให้ เห็นความแตกต่างระหว่างส่วนที่เป็ นจุดเด่นและส่วนประกอบอื่น ๆ  มีการใช้ สี เสียง และสัญลักษณ์ที่เกี่ยวข้ องกับเนื ้อหา  อื่น ๆ (ระบุ) 3.2 ในบทเรี ยนมีการใช้ กลวิธีดงั ต่อไปนี ้เพื่อพัฒนาความคงทนในการเรี ยนรู้ ของผู้เรี ยนหรื อไม่  หน้ าจอการนาเสนอจัดเป็ นลาดับ  เนื ้อหาบทเรี ยนจัดเป็ นระบบ เกี่ยวข้ องกันอย่างมีความหมาย  การใช้ บทเกริ่ นนาเข้ าสู่เนื ้อหา  รู ปแบบโครงสร้ างการนาเสนอเดียวกันของแต่ละหน้ าการนาเสนอ เช่น การวาง ชื่อเรื่ อง ภาพ บทความ และส่วนประกอบอื่น ๆ  การใช้ เครื่ องมือที่แบ่งเนื ้อหาเป็ นออกส่วน ๆอย่างเหมาะสม  การใช้ คานาและบทสรุ ป  อื่น ๆ (ระบุ) 3.3 เว็บไซต์นาเสนอใจความสาคัญเพียงประเด็นเดียวในหนึง่ ย่อหน้ าหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.4 เว็บไซต์แบ่งออกเป็ นช่วง ๆ และอานวยต่อการอ่านแบบกวาดสายตาเพื่อความเข้ าใจหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ www.ThaiCyberU.go.th

218

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

3.5 เว็บไซต์ใช้ องค์ประกอบของสื่อประสมดังต่อไปนี ้หรื อไม่  ข้ อความ  ภาพนิ่ง  เสียง  วิดีโอ

 ภาพเคลื่อนไหว  อื่น ๆ (ระบุ)

3.6 ถ้ าตอบ “ใช่” ในข้ อ 3.5 การผสมผสานของสื่อประสมเอื ้อให้ เกิดการเรี ยนรู้ บทเรี ยนอย่างมี ประสิทธิภาพหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 3.7 สื่อประสมที่ใช้ ในเว็บไซต์มีประสิทธิภาพในการสร้ างการเรี ยนรู้ อย่างมีความหมายมากเท่าใด การใช้ ส่ อื ประสม

ประสิทธิภาพในการนามาใช้ ในบทเรียน มาก ปานกลาง น้ อย อื่น ๆ

ข้ อความ ภาพนิ่ง ภาพเคลื่อนไหว เสียง วิดีโอ อื่น ๆ (ระบุ)

3.8 เว็บไซต์มีการนาเสนอองค์ประกอบทางภาษาดังต่อไปนี ้อย่างถูกต้ องหรื อไม่  ไวยากรณ์  เครื่ องหมายวรรคตอน  การสะกดคา  ไม่สามารถระบุได้  อื่น ๆ (ระบุ) 3.9 เว็บไซต์มีการนาเสนอองค์ประกอบสื่อประสมต่อไปนี ้อย่างเหมาะสมและสอดคล้ องกันหรื อไม่  ข้ อความ  ภาพนิ่ง  ภาพเคลื่อนไหว  เสียง  วิดีโอ  อื่น ๆ (ระบุ) 3.10 มีวธิ ีการใช้ /เทคนิคง่าย ๆ สาหรับบทเรี ยนออนไลน์แก่ผ้ เู รี ยนและผู้สอนหรื อไม่  มี  ไม่มี  ระบุไม่ได้

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

219

4. การออกแบบระบบนาทาง 4.1 เว็บไซต์มีโครงสร้ างเนื ้อหา เช่น หน่วยการเรี ยนรู้ สาระความรู้ กิจกรรมการเรี ยนรู้ และ อื่น ๆ เพื่อนาทางให้ ผ้ เู รี ยนศึกษาบทเรี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.2 เว็บไซต์มีแผนผัง เช่น ภาพรวมของบทเรี ยน เพื่อนาทางให้ ผ้ เู รี ยนศึกษาบทเรี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.3 เว็บไซต์ให้ ผ้ เู รี ยนถ่ายข้ อมูลเสียง วิดีโอ และภาพที่มีขนาดใหญ่ลงในหน่วยความจาหลัก ก่อนเรี ยน เพื่อหลีกเลี่ยงปั ญหาติดขัดในการถ่ายข้ อมูลขณะเรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.4 การเชื่อมโยงหลายมิตมิ ีสญ ั ลักษณ์และบอกจุดหมายในการเชื่อมโยงแก่ผ้ เู รี ยนเพียงพอ ในการตัดสินใจทาการเชื่อมโยงหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.5 เว็บไซต์มีการเชื่อมโยงภายในเว็บไซต์มากเกินไปซึง่ ส่งผลให้ ผ้ เู รี ยนสับสนหรื อไม่  มี  ไม่มี  ระบุไม่ได้ 4.6 เว็บไซต์มีการเชื่อมโยงภายนอกเว็บไซต์มากเกินไปซึง่ ส่งผลให้ ผ้ เู รี ยนสับสนหรื อไม่  มี  ไม่มี  ระบุไม่ได้ 4.7 สัญรู ป (Icon) ที่ใช้ แทนการทางานในโปรแกรมเป็ นสิ่งที่ค้ นุ เคยสาหรับผู้เรี ยนหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 4.8 เว็ บ ไซต์ มี ก ารใช้ สี รู ป แบบเดี ย วกั น แสดงการเชื่ อ มโยงที่ ผ้ ู เรี ยนได้ เข้ าถึ ง แล้ วและ การเชื่อมโยงทีผ่ ้ เู รี ยนยังไม่ได้ เข้ าถึงหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ)

www.ThaiCyberU.go.th

220

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

4.9 เว็บไซต์มีความยืดหยุ่นในการเรี ยนผ่านคาสัง่ ในบทเรี ยน โดยผู้เรี ยนมีทางเลือกต่าง ๆ ในการศึกษาบทเรี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.10 เว็บไซต์มีการชี ้แจง/แนะนาวิธีการเรี ยนบทเรี ยนแก่ผ้ เู รี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.11 เว็บไซต์มีการนาทางเข้ าสู่บทเรี ยนได้ ง่าย ผู้เรี ยนสามารถเชื่อมโยงไปยังหน้ าการนาเสนอ ต่าง ๆ ได้ สะดวก ไม่หลงทางหรื อสับสนหรื อไม่  สับสน  ไม่สบั สน  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.12 เว็บไซต์มีการเชื่อมโยงไปยังหน้ าเว็บไซต์ที่กาลังปรับปรุ งอยู่หรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.13 เว็บไซต์มีช่องทางการค้ นหาข้ อมูลหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) ถ้ ามี ระบุช่องทางการค้ นหาข้ อมูล  ช่องทางการค้ นหาข้ อมูลภายในเว็บไซต์บทเรี ยน  ช่องทางการค้ นหาข้ อมูลจากเว็บไซต์ภายนอกอื่น ๆ 4.14 ใช้ รูปแบบสัญลักษณ์และคาเดียวกันเพื่อช่วยนาทางการเรี ยนในบทเรี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.15 ทุกหน้ าการนาเสนอบทเรี ยนมีการเชื่อมโยงกลับมายังหน้ าหลักหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.16 การเชื่อมโยงภายในบทเรี ยนทังหมดได้ ้ เชื่อมโยงไปยังจุดหมายที่ถูกต้ องหรื อไม่  ถูกต้ อง  ไม่ถกู ต้ อง  ระบุไม่ได้  อื่น ๆ (ระบุ)

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

4.17 การเชื่อมโยงภายนอกบทเรี ยนทังหมดได้ ้ เชื่อมโยงไปยังจุดหมายที่ถกู ต้ องหรื อไม่  ถูกต้ อง  ไม่ถกู ต้ อง  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.18 เว็บไซต์มีการเชื่อมโยงที่ยกเลิกใช้ งานแล้ วหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 4.19 มีการเชื่อมโยงหลายมิตใิ นบทเรี ยนมากเกินไปในแต่ละหน้ าการนาเสนอบทเรี ยนหรื อไม่  มี  ไม่มี  ระบุไม่ได้ 4.20 ระบบการฟั งเสียงและดูวดิ ีโอโดยตรงบนเว็บไซต์มีประสิทธิภาพมากเท่าใด ระบบ การรับชมโดยตรง เสียง วิดีโอ อื่น ๆ (ระบุ)

มากที่สุด

มาก

ระดับคุณภาพ ปานกลาง

น้ อย

น้ อยมาก

4.21 ผู้เรี ยนรู้ ว่ากาลังอยู่ตาแหน่งใดในบทเรี ยนและนาทางการเรี ยนรู้ ได้ โดยไม่ต้องคาดเดาหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้ 5. การทดสอบการใช้ งาน 5.1 มีการทดลองใช้ งานกับผู้เรี ยนกลุ่มตัวอย่างหรื อไม่  มี  ไม่มี  ระบุไม่ได้  อื่น ๆ (ระบุ) 5.2 ผู้เรี ยนตอบคาถามต่าง ๆในบทเรี ยนได้ ภายในเวลาที่เหมาะสมหรื อไม่  ใช่  ไม่ใช่  ระบุไม่ได้  อื่น ๆ (ระบุ) 5.3 การใช้ คาศัพท์เฉพาะทางในบทเรี ยนสามารถทาความเข้ าใจได้ ง่ายหรื อไม่  ง่าย  ไม่ง่าย  ระบุไม่ได้ 5.4 ผู้เรี ยนเห็นตัวอย่างบทเรี ยนที่จะศึกษาหรื อไม่  เห็น  ไม่เห็น

 ระบุไม่ได้ www.ThaiCyberU.go.th

221

222

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

5.5 เว็บไซต์ออกแบบมาเพื่ออานวยให้ ผ้ เู รี ยนเข้ าถึงเนื ้อหาเฉพาะที่ต้องการได้ อย่างสะดวก หรื อไม่ภายในการเชื่อมโยงไม่เกิน 3 ครัง้  ใช่  ไม่ใช่  ระบุไม่ได้ 6. การเข้ าถึงข้ อมูล 6.1 เว็บไซต์ได้ ออกแบบมาให้ ผ้ เู รี ยนจานวนมากเข้ าถึงบทเรี ยนได้ หรื อไม่  ได้  ไม่ได้  ระบุไม่ได้  อื่น ๆ (ระบุ) 6.2 เว็บไซต์ออกแบบมาให้ ผ้ เู รี ยนสามารถเข้ าถึงได้ อย่างรวดเร็ ว  ใช่  ไม่ใช่

 ระบุไม่ได้

6.3 เว็บไซต์มีข้อความสนับสนุนเพื่ออธิบายภาพและวัตถุหรื อไม่  มี  ไม่มี

 ระบุไม่ได้

6.4 บทเรี ยนมีข้อความบรรยายประกอบการฟั งหรื อไม่  มี  ไม่มี

 ระบุไม่ได้

6.5 หน้ าจอการนาเสนอบทเรี ยนสามารถปรับขนาดให้ เหมาะกับผู้บกพร่ องทางสายตาได้ หรื อไม่  ได้  ไม่ได้  ระบุไม่ได้ 6.6 สามารถมองเห็นความแตกต่างของสีที่ใช้ ในการนาเสนอบทเรี ยนอย่างชัดเจนเพื่ออานวย แก่ผ้ บู กพร่ องทางสายตาหรื อไม่  สามารถ  ไม่สามารถ  ระบุไม่ได้ 6.7 ผู้เรี ยนสามารถใช้ แป้นพิมพ์อกั ษรแทนการใช้ เมาส์หรื ออุปกรณ์เคลื่อนตาแหน่งในการนา ทางสาหรับศึกษาบทเรี ยนผ่านการเรี ยนอิเล็กทรอนิกส์ (e- Learning) ได้ หรื อไม่  ได้  ไม่ได้  ระบุไม่ได้  อื่น ๆ (ระบุ) 

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

223

แบบสอบถามความพึงพอใจเว็บไซต์ ทางการศึกษา คาชีแ้ จง ให้ นกั ศึกษาทาเครื่ องหมาย  ในช่องว่างที่ตรงกับระดับความคิดเห็น คาถาม

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

ด้ านการจัดรูปแบบ 1. เว็บไซต์มีรูปแบบการนาเสนอที่เหมาะสมและมี ความน่าสนใจ 2. เว็บไซต์มีรูปแบบการจัดวางในตาแหน่งที่เหมาะสม 3. เว็บไซต์มีรูปแบบการจัดปริมาณเนื ้อหาในแต่ละ หน้ าที่เหมาะสม 4. เว็บไซต์มีรูปแบบการจัดลาดับ ขันตอน ้ ของเนื ้อหาที่ เหมาะสมและเข้ าใจง่าย ด้ านเนือ้ หาบทเรียน 1. เนื ้อหามีความสอดคล้ องและครอบคลุม วัตถุประสงค์ 2. เนื ้อหาบทเรียนมีการแบ่งหัวข้ อที่ถกู ต้ องเหมาะสม 3. เนื ้อหาบทเรียนมีการจัดเรียงลาดับขันตอน ้ อย่าง ต่อเนื่อง เข้ าใจง่าย 4. เนื ้อหาบทเรียนในแต่ละส่วนมีความสัมพันธ์กนั 5. เนื ้อหาบทเรียนมีความยาก ง่าย เหมาะสมกับระดับ ความรู้ของผู้เรียน 6. ภาษาที่ใช้ เหมาะสม ชัดเจน ถูกต้ องสามารถสื่อให้ ผู้ชมเข้ าถึงอารมณ์และ บรรยากาศในการเรียน 7. เนื ้อหาบทเรียนมีประโยชน์ตอ่ การค้ นคว้ าเพิ่มเติม และให้ ความรู้ทวั่ ไปในวงกว้ าง

www.ThaiCyberU.go.th

224

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

คาถาม

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

ด้ านการออกแบบ 1.รูปแบบตัวอักษรทีใ่ ช้ อา่ นง่าย เหมาะสมและกลมกลืน 2. ภาพประกอบสื่อความหมายตรงวัตถุประสงค์ของ เนื ้อหาบทเรียน 3. ใช้ สีกลมกลืนในทุก ๆ หน้ า และสามารถสื่อ ความหมายชัดเจน 4.ใช้ ปมุ่ และไอคอน ที่สื่อความหมายชัดเจนและวางใน ตาแหน่งที่เหมาะสม 5.มีการจัดองค์ประกอบโดยรวมอย่างกลมกลืน มี เอกลักษณ์ที่ชดั เจน 6. มีการเชื่อมโยงข้ อมูลภายในที่เหมาะสม 7. มีการเชื่อมโยงข้ อมูลภายนอกที่เหมาะสม ด้ านการประเมินผล 1. มีการกาหนดวิธีการประเมินผลที่ชดั เจน 2. มีการประเมินผลที่เหมาะสม 3. มีการประเมินผลที่หลากหลาย 4. มีการใช้ ประโยชน์จากเทคโนโลยีในการประเมินผล อย่างเหมาะสม

ข้ อเสนอแนะเพิ่มเติม

_______________ ________________________________ ________________________________ ________________________________

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

225

บทสรุป แนวทางในการประเมินเว็บไซต์ทางการศึกษานัน้ ควรให้ ความสาคัญทังกั ้ บเนื ้อหา และเทคโนโลยีทางการศึกษาในสัดส่วนที่เท่า ๆ กัน จากการยกตัวอย่างเกณฑ์การประเมิน เว็บไซต์ทางการศึกษา ตัวอย่างแบบสอบถามรู ปแบบเว็บไซต์ทางการศึกษา ตัวอย่างแบบ ประเมินประสิทธิ ภาพเว็บไซต์ทางการศึกษาและแบบสอบถามความพึงพอใจเว็บไซต์ทาง การศึกษา เพื่อเป็ นแนวทางในการประเมินนัน้ สรุ ปได้ วา่ 1. ตัวอย่างเกณฑ์การประเมินเว็บไซต์ทางการศึกษาแบบที่ 1 เรื่ องการพัฒนา เกณฑ์ ก ารประเมิ น โปรแกรมการเรี ย นการสอนผ่ า นเว็บ โดย อัก ษรา แสงอร่ า ม (2543) ผลการวิจยั พบว่าเกณฑ์การประเมินโปรแกรมการเรี ยนการสอนผ่านเว็บประกอบด้ วย 2 ด้ าน ใหญ่ 20 ด้ านย่อยดังนี ้ (1) ด้ านการออกแบบ ประกอบด้ วย 11 ด้ านย่อย คือ ตัวอักษร ภาพ ภาพเคลื่ อ นไหว ภาพวี ดิทัศน์ เสี ย ง สี รายการ สัญ รู ป และปุ่ ม และโปรแกรมค้ นผ่า นเว็บ ด้ านการสอน ประกอบด้ วย 9 ด้ านย่อ ย คือ วัตถุประสงค์บทเรี ยน การนาเสนอเนื อ้ หา กิจกรรมการเรี ยนรู้ กิจกรรมการเรี ยนรู้ (Synchronous) กิจกรรมการเรี ยนรู้ (Asynchronous) บทบาทของผู้สอน บทบาทของผู้เรี ยน การให้ ผลย้ อนกลับ และการทดสอบ สาหรับแบบที่ 2 หนังสือ e-Learning Quick Checklist โดย Badrual Khan (2005) ได้ กล่าวถึงหัวข้ อใน การพิจารณาต่าง ๆ คือ การออกแบบส่วนต่อประสาน การออกแบบเนือ้ หา การออกแบบ ระบบนาทาง การเข้ าถึงข้ อมูล และการทดสอบการใช้ งาน และ แบบที่ 3 หนังสือ The Power of eLearning: the essential guide for teaching in the digital age โดย Waterhouse (2005) ได้ กล่าวถึงหัวข้ อหัวข้ อ Website Design ว่าประกอบด้ วย checklist ซึง่ มี 3 ประเด็น หลัก ๆ คือ เรื่ อ งของความน่าเชื่ อ ถื อ (Website Credibility) คุณ ภาพในการออกแบบ (Design Quality) และคุณภาพของเนื ้อหา (Content Quality) 2. จากตัว อย่ า งแบบสอบถามรู ป แบบเว็ บ ไซต์ ท างการศึก ษา สรุ ป ได้ ว่ า แบบสอบถามเกี่ ยวกับเว็ บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา (เจนจิร า อนันตกาล, 2548) มี 3 ตอนประกอบด้ วย ตอนที่ 1 สถานภาพของผู้ตอบแบบสอบถามและการเข้ าใช้ เว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา ตอนที่ 2 ความคิดเห็นเกี่ยวกับรู ปแบบโฮมเพจ เว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา ตอนที่ 3 ข้ อคิดเห็นและข้ อเสนอแนะเกี่ ยวกับ รู ปแบบโฮมเพจเว็บไซต์ทางด้ านการศึกษาระดับอุดมศึกษา ได้ แก่ 1) แบบสอบถามเกี่ยวกับ ข้ อคิดเห็นว่าควรให้ ความสาคัญในการจัดรู ปแบบของหน้ าแรก (Homepage) ในด้ านต่าง ๆ อย่ า งไร โดยให้ เรี ยงล าดับ ตามความส าคัญ ทัง้ 5 ด้ าน คื อ ด้ านองค์ ป ระกอบ ด้ านสี www.ThaiCyberU.go.th

226

บทที่ 5 การประเมินเว็บไซต์ทางการศึกษา

ด้ านตัวอักษร ด้ านภาพประกอบ และด้ านเสียง และ 2) แบบสอบถามเกี่ยวกับหัวข้ อที่ควร แสดงในหน้ าแรก (Homepage) และแบบสอบถามการประเมินเว็บไซต์สาหรั บการเรี ยน การสอนอีเลิร์นนิง (Khan, 2005) มี 5 ตอนประกอบด้ วย ตอนที่ 1 แบบสอบถามเกี่ยวกับ การประเมินการออกแบบส่วนต่อ ประสาน ตอนที่ 2 แบบสอบถามเกี่ ยวกับการประเมิน การออกแบบเนื ้อหา ตอนที่ 3 แบบสอบถามเกี่ยวกับการประเมินการออกแบบระบบนาทาง ตอนที่ 4 แบบสอบถามเกี่ยวกับการประเมินการเข้ าถึงข้ อมูล และตอนที่ 5 แบบสอบถาม เกี่ยวกับการประเมินการทดสอบการใช้ งาน 3. ตัวอย่างแบบประเมินประสิทธิภาพเว็บไซต์ทางการศึกษาและแบบสอบถาม ความพึงพอใจเว็บไซต์ทางการศึกษา โดยจากตัวอย่างแบบประเมินประสิทธิ ภาพเว็บไซต์ ทางการศึกษาที่แ ปลและปรั บปรุ งจาก Khan, 2005 และ Gary et al., 2008 โดย จินตวีร์ คล้ ายสังข์ (2553)ซึ่งประกอบด้ วย ตอนที่ 1 ข้ อมูลส่วนตัวของผู้ตอบแบบสอบถาม ตอนที่ 2 ความคิดเห็นเกี่ ยวกับประสิทธิ ภ าพเว็บไซต์ทางการศึกษาได้ แ ก่ การออกแบบ มัลติมีเดีย การออกแบบส่วนต่อ ประสาน การออกแบบเนื อ้ หา การออกแบบระบบนาทาง การทดสอบการใช้ งาน และการเข้ าถึงข้ อมูล สาหรับแบบสอบถามความพึงพอใจเว็บไซต์ทาง การศึกษา ที่ปรับปรุ งจาก เอกบุรุษ แฉ่งใจ, 2549; ณัฐพล ราไพ, 2548; สมพร สุขะ, 2545; และ ถนอมพร เลาหจรัสแสง, 2545 โดยจินตวีร์ คล้ ายสังข์ (2553) ซึง่ เป็ นการสอบถามระดับ ความคิด เห็น เกี่ ย วกับ ด้ า นการจัด รู ป แบบ ด้ า นเนื อ้ หาบทเรี ย น ด้ า นการออกแบบ และ ด้ านการประเมินผล

บทที่ 6 การนาเสนอกิจกรรมเพื่อส่งเสริ มความรู้และทักษะการออกแบบเว็บไซต์ทางการศึกษา

227

เพื่ อ เป็ นการค้ นคว้ าอย่า งต่อ เนื่ อ งและส่ ง เสริ ม ความรู้ และทักษะการออกแบบ เว็บไซต์ทางการศึกษา จึงขอเสนอ 13 กิจกรรมดังต่อไปนี ้ กิจกรรมที่ 1 การร่ วมระดมความคิดและแลกเปลี่ยนประสบการณ์ จากข้ อมูลในบทเรี ยน คอร์ สแวร์ ให้ ทุกท่านร่ วมระดมความคิดถึงวิธีการสอนแบบใด และเครื่ องมืออะไรที่ทา่ นเคยมีประสบการณ์มาบ้ างแล้ ว และใช้ ในกิจกรรมการเรี ยนการสอนวิชา อะไร (ท่านอาจเคยอยู่ในบทบาทของผู้สอนหรื อผู้เรี ยนก็ได้ ) จากนันอธิ ้ บาย และเปรี ยบเทียบถึง ข้ อดีและข้ อจากัดของปฏิสัมพันธ์ ในการเรี ยนการ สอนบนเว็บและเครื่ องมือที่เคยใช้ แต่ละแบบ ตัวอย่างเช่น การใช้ Discussion Board ซึง่ เป็ นปฏิสมั พันธ์ในการเรี ยนการสอนบนเว็บแบบไม่ ประสานเวลา (Asynchronous) ในรายวิชา …. การใช้ Blog ในรายวิชา …. เป็ นต้ น สุดท้ ายให้ ผู้เรี ยนเสนอแนวทาง พร้ อมระบุถงึ ความเป็ นไปได้ ในการนาเทคโนโลยีและเครื่ องมือสื่อสารต่าง ๆ โดยเฉพาะ web 2.0 tools มาใช้ เพื่อเพิ่มประสิทธิภาพในการเรี ยนการสอน เช่น PodCast, VodCast, MSN Messenger, Skype, Facebook, Blog, Micro Blog (เช่น Twitter), Wiki เป็ นต้ น กิจกรรมที่ 2 การร่ วมระดมความคิดเว็บไซต์ ทางการศึกษา ขอให้ ทุกท่านน าเสนอเว็บไซต์ ทางการศึกษาอย่างน้ อย 1 เว็บไซต์ พร้ อมระบุ (1) แหล่งที่มา (URL) (2) ข้ อมูลพืน้ ฐานของเว็บไซต์ (เช่น วัตถุประสงค์ของเว็บไซต์ กลุ่มเป้าหมาย เนือ้ หา ผู้จัดทา/เผยแพร่ ) เพื่อเป็ นการแลกเปลี่ ยนเรี ยนรู้ ในชัน้ เรี ยนออนไลน์ และ (3) จุดเด่น และ/หรื อ ข้ อจากัดของเว็บไซต์ จากนันขอให้ ้ แต่ละท่านเข้ าเยี่ยมชมเว็บไซต์ ที่เพื่อนร่ วมชันเรี ้ ยน ได้ นาเสนออย่างน้ อย 5 เว็บไซต์ พร้ อมระบุสิ่งที่ได้ เรี ยนรู้ จากเว็บไซต์นนั ้ ๆ พร้ อมแลกเปลี่ยน ความคิดเชิงสร้ างสรรค์ (Constructive Feedback) กับผู้ร่วมชันเรี ้ ยน โดยการ Reply ตอบที่ กระทู้นัน้ ๆ ในการ Reply ขอให้ ระบุชื่อเจ้ าของกระทู้ด้วย (ขอให้ เปรี ยบกับการอภิปรายใน www.ThaiCyberU.go.th

228

ชันเรี ้ ยน ที่เราสามารถเสริ ม/ต่อบทสนทนานัน้ ๆ ได้ เช่น คุณ…. ครับ ผมได้ เยี่ยมชมเว็บไซต์ที่ คุณ….... นาเสนอแล้ ว และมีความเห็นว่า…....) ดังตัวอย่างตารางวิเคราะห์เว็บไซต์ตอ่ ไปนี ้ ตัวอย่ างการวิเคราะห์ เว็บไซต์ ตัวอย่างที่ 1 วิเคราะห์ เว็บไซต์ http://www.thaiteachers.tv

ตัวอย่ างหน้ าจอ เว็บไซต์

วัตถุประสงค์

กลุ่มเป้าหมาย เนือ้ หาใน website

จุดเด่ น

เป็ นแหล่งเรี ยนรู้ เพื่อครู ไทย เป้ าหมายหลัก คื อ การผลิตรายการโทรทัศน์ เพื่อ นาเสนอการปฏิบัติ ที่ ดี (Good practice) ทัง้ ด้ านการจัดการเรี ยนรู้ ด้ าน การบริหารการศึกษา และการแก้ ปัญหาอื่น ๆ ในระบบการศึกษา สิ่งที่คาดหวัง คือ การสร้ างแรงบันดาลใจให้ แก่ครูและบุคลากรทางการศึกษาที่ชมรายการเกิด การปรั บเปลี่ยนพฤติ กรรม การจัดกิ จกรรมการเรี ยนการสอน ได้ แนวคิดใหม่ ๆ หรือแนวทางบริหารจัดการ การแก้ ไขปั ญหาการศึกษาได้ อย่างมีประสิทธิภาพ กลุ่ ม เป้ าหมายหลัก : ครู ผ้ ู สอนในระดั บ ปฐมวั ย ประถมศึ ก ษา และ มัธยมศึกษา รวมถึงบุคลากรทางการศึกษา กลุ่มเป้ าหมายรอง : นักเรี ยน ผู้ปกครอง ชุมชน รวมทัง้ ประชาชนบุค คล ทัว่ ไปที่มีความสนใจ เว็บไซต์ที่นาเสนอวิธีการจัดการเรี ยนการสอน นวัตกรรมของครูที่สอนดี มา ถ่า ยทอดให้ ค รู ด้ว ยกัน ได้ ใช้ เป็ นแนวทางในการจัด การเรี ยนการสอน เพื่อ พัฒนาแวดวงครู โดยเนือ้ หาจะครอบคลุมการเรี ยนรู้ในกลุ่มสาระการเรี ยนรู้ ของชันปฐมวั ้ ย ประถมศึกษา และมัธยมศึกษา ครอบคลุมกลุ่มบุคลากรทาง การศึก ษาในทุก ระดับ ทัง้ ครู ป ระจ าการ ครู ใ หม่ ครู ฝึ กปฏิ บัติ ก ารสอน ผู้อานวยการ นักเรียน ผู้ปกครอง ชุมชน „ เป็ นนวัตกรรมใหม่ในแวดวงการศึกษา ที่เป็ นแหล่งการเรี ยนรู้สาหรับครู จะ อบรมและถ่ายทอดความรู้ที่เป็ นแนวปฏิบตั ิที่ดี „ มีลกั ษณะเช่นเดียวกับ IP TV ที่สามารถชมรายการย้ อนหลังได้ „ การออกแบบลักษณะของ font และสีสนั สอดคล้ องกับการทางาน „ มีการทา Social networking ผ่านทาง FaceBook และ twitter

ข้ อจากัด

229

วิเคราะห์ เว็บไซต์ http://www.thaiteachers.tv „ การตอบคาถามเชิงวิชาการ ควรมีผ้ เู ชี่ยวชาญหลาย ๆ คน เข้ าร่วมตอบ คาถาม „ เนือ้ หาที่มียงั มีอยู่ค่อนข้ างน้ อย และส่วนใหญ่เป็ นรายการจากต่างประเทศ อาจไม่เข้ ากับบริบทของสังคมไทย „ ควรมีประเมิน website ในแบบ online เพื่อเก็บข้ อมูล จากผู้ใช้ งาน โดยตรง และยังไม่พบการแสดงสถิติผ้ ใู ช้ งาน

ตัวอย่างที่ 2 วิเคราะห์ เว็บไซต์ http://www.e-learningforkids.org/index.html

ตัวอย่ างหน้ าจอ เว็บไซต์

วัตถุประสงค์ กลุ่มเป้าหมาย เนือ้ หาใน website จุดเด่ น

ข้ อจากัด

ใช้ ส าหรั บ การเรี ยนการสอน โดยผู้ส อนสามารถน าไปสอนเสริ มได้ ด้ ว ย การเลือกเนื ้อหาวิชาที่สอดคล้ องกับรายวิชาของตนเอง กลุ่มเป้ าหมายหลัก : ผู้เรียนในระดับชันประถม ้ และครู บทเรี ยนการสอนออนไลน์ ในวิชาต่าง ๆ เช่น คณิต ศาสตร์ วิ ทยาศาสตร์ คอมพิวเตอร์ ภาษาอังกฤษ ฯลฯ เป็ นต้ น „ มีการแบ่งระดับผู้เรียนเป็ นระดับชันอย่ ้ างชัดเจน „ มีบทเรียนให้ เลือกเรียนหลายวิชา แต่ละวิชามีเนื ้อหาที่หลากหลาย „ มีการใช้ สีสนั ดึงดูดผู้เรียน และมีเสียงประกอบกระตุ้นการเรียนรู้ „ มี ก ารใช้ เทคนิ ค การ์ ตู น อนิ เ มชั่ น ในการโต้ ตอบกั น เป็ นช่ อ งทาง การมีปฏิสมั พันธ์กบั ผู้เรียนได้ เป็ นอย่างดี „ การแสดงบทเรี ยนที่เป็ นอนิเมชัน่ จะแสดงผลได้ ดีต้องใช้ ระบบเครื อข่าย ที่มีความเร็วที่ดีด้วย

www.ThaiCyberU.go.th

230

กิจกรรมที่ 3 ADDIE Step1 ขอให้ ทา่ น เลือก 3 เว็บไซต์ที่เกี่ยวกับ e-Learning จากกิจกรรมในสัปดาห์ที่ 1 แล้ ว ระบุวตั ถุประสงค์ของการทาเว็บไซต์และกลุ่มเป้าหมาย (ขันที ้ ่ 1 ของ ADDIE MODEL: Analysis (วิเคราะห์)) ดังตัวอย่าง วิเคราะห์

e-Learning Websites Website 2

Website 1

Website 3

วัตถุประสงค์ กลุม่ เป้าหมาย

ตัวอย่ างตารางวิเคราะห์ ตัวอย่ างเว็บไซต์ ตัวอย่างที่ 1 e-learning websites วิเคราะห์

http://www.learn square.com/

วัตถุ 1. เพื่อเผยแพร่ระบบ ประสงค์ บริหาร จัดการเรียนรู้ด้วย สื่ออิเล็กทรอนิกส์ (e-Learning) ในระบบ OpenSource ที่พฒ ั นา โดยคนไทย 2. สร้ างเครือข่ายผู้ใช้ และ ผู้ร่วมพัฒนา learnsquare 3. รวบรวมความรู้ เกี่ยวกับสื่อเทคโนโลยี สารสนสนเทศในเรื่อง ต่าง ๆ เปิ ดโอกาสให้ เรียน โดยไม่ต้องสมัครสมาชิก

http://pld.nectec.or.th/emc/

http://www.neutron. rmutphysics.com/ physics/

1. เพื่อเป็ นศูนย์กลางในการรวบรวมสื่อ การเรี ยนการสอน และข้ อมูลที่เป็ น ประโยชน์ เพื่อการแลก เปลีย่ นสื่อร่วมกันในอนาคต 2. เพื่อเป็ นศูนย์กลางในการแลกเปลี่ยน ความคิดเห็นเกี่ยวกับสื่อและข้ อมูลที่มี ประโยชน์ อันจะนาไปสูก่ ารคัดเลือก สื่อที่ดี และมีคณ ุ ภาพต่อไป 3. เป็ นศูนย์กลางในการประสานงาน ระหว่างครูที่เข้ าร่วมโครงการนาร่อง ต่าง ๆ เช่น โครงการพัฒนาการเรียน การสอนด้ วยสื่อ Physics Cyber Lab ตลอดจนเพื่อนครูอื่น ๆ ที่สนใจ 4. เพื่อแจ้ งข่าวสาร ข้ อมูล ตลอดจน เทคโนโลยีที่ทนั สมัย และมีประโยชน์ ต่อผู้เยี่ยมชมเว็บไซต์

เพื่อเผยแพร่ ความรู้ สื่อ และ บทความทาง ฟิ สิกส์ ให้ นักศึกษาใช้ เป็ น แหล่งเรียนรู้เสริม การเรียนการสอน ในชันเรี ้ ยนปกติ

กลุ่ม บุคลากรทางการศึกษา ครู และผู้สนใจทัว่ ไป เป้าหมาย และผู้สนใจทัว่ ไป

นักศึกษา และ ผู้สนใจทัว่ ไป

231

ตัวอย่างที่ 2 e-learning Website http://e-learning. วิเคราะห์ http://webquest.org/ thaihealth.or.th/ e-learning/ วัตถุประสงค์ เพื่อเป็ นแหล่งให้ ข้อมูล เพื่อเป็ นสื่อในการเสริ มสร้ าง ข่าวสาร งานวิจยั ที่ ความรู้เรื่องการบริหาร เกี่ยวข้ องเกี่ยวกับเว็บ แผนงาน/โครงการ เควสต์ แนวทาง การบริหารการเงิน การพัฒนาเว็บเควสต์ การบัญชีและการพัสดุ เพื่อนาไปใช้ ใน โดยผู้เรียนสามารถเรียน การเรียนการสอน และ ที่ใด เวลาใดก็ได้ เข้ าไป เป็ นสื่อกลางใน ศึกษา เรียนรู้แหล่งข้ อมูล การแลกเปลี่ยนตัวอย่าง ต่าง ๆ ร่วมกิจกรรมต่าง ๆ เว็บเควสต์ ข้ อมูล ได้ ทกุ ที่ ทุกเวลา ติดต่อกับ เครื่องมือ งานวิจยั ใน ผู้สอนได้ หลายช่องทาง การปรับปรุงและพัฒนา ค้ นหาเอกสาร อ้ างอิงและ เว็บเควสต์ระหว่างกัน download แบบฟอร์ ม สาคัญ กลุ่มเป้าหมาย บุคลากรทางการศึกษา ภาคี บุคลากรของ สสส. และผู้สนใจทัว่ ไป ผู้ตรวจสอบ และผู้สนใจ ร่วมงานกับ สสส.

http://www.learnsquare. com/ เพื่อพัฒนา LMS ของคน ไทยเพื่อนาไปใช้ ใน การจัดการเรียนการสอน อีเลิร์นนิง และเป็ นแหล่ง รวบรวมเนื ้อหาและสื่อ ต่าง ๆ โดยเฉพาะทางด้ าน เทคโนโลยีสารสนเทศ เพื่อให้ ผ้ ทู ี่สนใจสามารถ เข้ ามาศึกษา ได้ ตาม อัธยาศัย

หน่วยงาน สถาบันที่ เกี่ยวข้ องกับการศึกษา บุคลากรทางการศึกษา และ ผู้สนใจทัว่ ไป

www.ThaiCyberU.go.th

232

ตัวอย่างที่ 3 e-learning Website วิเคราะห์ วัตถุประสงค์

http:// e-learning.thaihealth. or.th/e-learning/ นาเสนอหลักสูตร การเรี ยนการสอน ออนไลน์ (Multimedia e-Learning) ของ สานักงานกองทุน สนับสนุนการสร้ างเสริม สุขภาพ (สสส.) เพื่อเป็ น แหล่งเรียนรู้ประกอบ การดาเนินงานแผนงาน/ โครงการเชิงรุก ของ สสส.

กลุ่มเป้าหมาย บุคคลทัว่ ไป

http://webquest.org/

http://www.neutron. rmutphysics.com/physics/

เป็ นเว็บที่เน้ นการเรียน แบบสืบสอบ (Inquiry) ที่ น่าสนใจและทาได้ งา่ ย สามารถนาไปใช้ ใน การจัดการเรียนการสอน ในห้ องเรียนได้ ออกแบบ เรียบง่าย สบายตา

จุดเด่นอยูท่ ี่การรวบรวมสื่อ การสอนจานวนพอสมควร เช่น วีดีโอการเรียนการสอน เอกสารการสอน PDF และ ยังมีผลสอบทาให้ สามารถ ตรวจสอบภายหลังได้

นิสิต นักศึกษา บุคคล ทัว่ ไป

นักศึกษาภาควิชาฟิ สิกส์ คณะวิทยาศาสตร์ และ เทคโนโลยี มหาวิทยาลัย เทคโนโลยีราชมงคลธัญบุรี และบุคคลทัว่ ไป

233

กิจกรรมที่ 4 ADDIE Step2 จากข้ อมูลในกิจกรรมการเรียนที่ 3 ขอให้ ทา่ นประเมิน วิเคราะห์ และจัดระบบโครงสร้ าง ข้ อมูล (Information Architecture) ซึง่ ประกอบด้ วย 1. แผนผังโครสร้ าง website (Site Structure) * 2. Table of Content, Storyboard, Flowchart 3. Navigation 4. ลักษณะ รูปแบบของ Webpage 5. คุณลักษณะของ Web server โดยในวิชานี ้กาหนดให้ ทาเฉพาะ Site Structure (โดย เลือก 1 เว็บไซต์จากกิจกรรมที่ 1-จัดทา SITE STRUCTURE โดยพิมพ์ 1 หน้ ากระดาษ -- save เป็ น WORD, POWERPOINT, PDF หรื ออาจจัดทาด้ วย Mind Mapping tool ต่าง ๆ เช่น จากโปรแกรม Freemind, MindMapper ตาม ถนัด) และส่งผ่านทางกระดานเสวนาโดยแนบไฟล์ดงั กล่าวมาในกระทู้ของท่าน ดังตัวอย่าง Site Structure จาก Mind Mapping tool และเพื่อเป็ นการแลกเปลี่ยนเรี ยนรู้ ขอให้ ทกุ ท่านเข้ าเยี่ยม ชม SITE STRUCTURE เว็บไซต์ที่เพื่อนร่วมชันเรี ้ ยนได้ นาเสนออย่างน้ อย 5 ท่าน พร้ อมแลกเปลี่ยน ความคิดเชิงสร้ างสรรค์ (Constructive Feedback) กับผู้ร่วมชันเรี ้ ยน โดยการ Reply ตอบที่กระทู้ นัน้ ๆ ในการ Reply ขอให้ ระบุชื่อเจ้ าของกระทู้ด้วย (ขอให้ เปรี ยบกับการอภิปรายในชันเรี ้ ยน ที่เรา สามารถเสริม/ต่อบทสนทนานัน้ ๆ ได้ ) Activity 4: ADDIE Step2 (ตัวอย่ าง site structure จาก Mind Mapping tool)

www.ThaiCyberU.go.th

234

ตัวอย่ าง Site Structure เว็บตัวอย่ าง ตัวอย่างที่ 1

ตัวอย่างที่ 2

ตัวอย่างที่ 3

www.ThaiCyberU.go.th

235

236

ตัวอย่างที่ 4

ตัวอย่างที่ 4 ผลงานของคุณพัชริ ดา วิสยั เกตุ ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง ตัวอย่างที่ 5

ตัวอย่างที่ 5 ผลงานของคุณสิทธิชยั มาทามา ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง

237

วิธีการใช้ งานโปรแกรม MindMapper สาหรับสร้ าง Site Structure MindMapper เป็ นโปรแกรมที่ช่วยในการจัดการความคิด สามารถ download ได้ จาก www.mindjet.com (สนับสนุนทังระบบปฏิ ้ บตั ิการ Windows และ Mac) ตัวอย่าง Site structure ที่พฒ ั นาด้ วยโปรแกรม MindMapper ดังนี ้

www.ThaiCyberU.go.th

238

โปรแกรม MindMapper มีรายละเอียดวิธีการใช้ งานดังนี ้ 1. เมื่อเปิ ดโปรแกรมจะพบหน้ าแสดงขันตอนวิ ้ ธีการใช้ งานต่าง ๆ ถ้ าต้ องการเปิ ดหน้ า เอกสารใหม่ ให้ คลิก “NEW”

2. ดับเบิลคลิกที่คาว่า “Title” ถ้ าต้ องการพิมพ์ชื่อหัวเรื่ อง

3. คลิกที่ FORMAT> เลือก Style menu เพื่อปรับแต่งรู ปแบบตามต้ องการ

4. หรื อถ้ าต้ องการใช้ รูปภาพแทนกล่องข้ อคาม ให้ คลิกที่ไอคอน Image... > จากนันให้ ้ browse และ insert รู ปภาพตามต้ องการ

www.ThaiCyberU.go.th

239

240

5. ไปที่ Insert เมนู จากนันสามารถเลื ้ อกที่จะเพิ่มหัวข้ อย่อยทีละหัวข้ อ (Single Sub-Topic หรื อเพิ่มหัวข้ อย่อยทีละหลายหัวข้ อ (Multiple Topics...)

6. ในกรณีที่เลือก Insert Multiple Topics ให้ พิมพ์ชื่อหัวข้ อแล้ วคลิก enter จากนันใส่ ้ หัวข้ อใหม่ตามที่ต้องการ

241

7. ผลลัพธ์ที่ได้ ดงั ภาพ

8. ในกรณีที่ต้องการเพิ่มหัวข้ อย่อยในลาดับต่อ ๆ ไป ให้ คลิกที่หวั ข้ อย่อยในแขนงที่ต้องการ ดังตัวอย่างเช่น คลิกที่แขนงหัวข้ อย่อยที่ 1 ถ้ าต้ องการเพิ่มหัวข้ อย่อยที่ 1.1 และ 1.2 ดังภาพ

www.ThaiCyberU.go.th

242

9. ผลลัพธ์ที่ได้ ดงั ภาพ

10. นอกจากนี ้ การเพิ่มหัวข้ อสามารถทาได้ โดยคลิกปุ่ ม “Insert” บนคีย์บอร์ ด และคลิก “Enter” เพื่อเพิ่มหัวข้ อ หรื อในกรณีที่ต้องการเพิ่มหัวข้ อย่อยเพื่อเชื่อมโยงต่อไปเรื่ อย ๆ ให้ คดั ลอกที่หวั ข้ อย่อยนัน้ ๆ แล้ วคลิก “Insert” 11. จากนัน้ คลิกที่ Format เพื่อเลือกทิศทางของหัวเรื่ องย่อยต่าง ๆ

243

12. คลิกที่ Format > Branch Shape เพื่อปรับเปลี่ยนรู ปแบบของลักษณะเส้ นที่ใช้ เชื่อมโยง mindmap

13. ไปที่ File > Save As... เมนู เพื่อบันทึกไฟล์งาน

www.ThaiCyberU.go.th

244

14. เลือก Save as > MindMapper file (.twd) สาหรับการแก้ ไข

15. เลือกบันทึกเป็ น JPEG File (*.jpeg,*jpg) สาหรับการนาไปใช้

16. นอกจากนี ้ ในโปรแกรมสามารถเพิ่มรู ปภาพจาก Clip Art ที่เมนูด้านขวามือ โดยคลิก เลือกแขนงที่ต้องการใส่ภาพและคลิกเลือกรู ปภาพที่ต้องการ

245

กิจกรรมที่ 5 วิเคราะห์ สังเคราะห์ องค์ ประกอบที่สาคัญของอีเลิร์นนิงเว็บไซต์ ท่ มี ีประสิทธิภาพ ขอให้ ทกุ ท่าน เข้ าเยี่ยมชม website ของมหาวิทยาลัยต่าง ๆ ทีจ่ ดั การเรี ยนการสอน แบบอีเลิร์นนิงที่ได้ กล่าวถึงในเนื ้อหาข้ างต้ น โดยคัดเลือกมหาวิทยาลัยในประเทศต่าง ๆ 2 ที่ เช่น MIT OCW (Open Courseware) http://ocw.mit.edu/index.html , University of Phoenix Online ( http://www.uopxonline.com ) และในประเทศไทย 1 ที่ เช่น College of Internet Distance Education of Assumption University, Thailand Cyber University (TCU) จากนัน้ ผู้เรี ยนแสดงความคิดเห็นว่าองค์ประกอบใดเป็ นองค์ประกอบสาคัญที่ขาด ไม่ได้ ของเว็บไซต์สาหรับการจัดการเรี ยนการสอนแบบอีเลิร์นนิ ง (วิเคราะห์เฉพาะโฮมเพจ -หน้ าเว็บหน้ าแรก) และสุดท้ ายคือการสังเคราะห์ "องค์ประกอบที่สาคัญที่ข าดไม่ได้ " ของ เว็บไซต์สาหรับการจัดการเรี ยนการสอนแบบอีเลิร์นนิง ดังตัวอย่างตารางสังเคราะห์อีเลิร์นนิ ง เว็บไซต์

Components องค์ ประกอบ

ตัวอย่ างตารางเปรียบเทียบ e-Learning Website ต่างประเทศ Website ในประเทศ

องค์ประกอบ สาคัญที่ http://ocw.mit.e http://www.uopxo http://www.thaicy อื่น ๆ du/index.html nline.com beru.go.th ขาดไม่ได้

Banner Navigation bar Log-in Announcement ….. …..

www.ThaiCyberU.go.th

246

ตัวอย่ าง ตารางสังเคราะห์ องค์ ประกอบเว็บตัวอย่ าง ตัวอย่างที่ 1 Website ต่ างประเทศ Website ในประเทศ Components องค์ ประกอบ Banner Navigation bar Courses list Donate About us Contact us Help Search Engine Email this page Finder RSS Sign up Resources Site map Announcement Chat Login Loss password News Statistics

/ / / / / / / / / / / / / / /

/ / /

/ / / / / / / / / / / / /

/ /

/ / / / /

องค์ ประกอบ สาคัญ ที่ขาดไม่ ได้ / / / / / /

/ / / / / / / / /

/ / /

/ /

/ / / / / / /

ตัวอย่างที่ 2

www.ThaiCyberU.go.th

247

248

ตัวอย่างที่ 3 องค์ ประกอบของเว็บ 1. ข้ อความทักทายต้ อนรับ 2. กล่องสาหรับใส่ชื่อผู้เรียนและ รหัสผ่าน 3. รายวิชาต่าง ๆ 4. การใช้ สีสนั 5. ขนาดของข้ อความ 6. ภาพกราฟิ ก 7. ภาพเคลื่อนไหวแบบไฟล์วิดีโอ 8. แบนเนอร์ 9. จุดเชื่อมโยงหลายมิติ 10. โลโก้ ประจาสถาบัน 11. เมนูหลัก/หน้ าหลัก 12. เมนูยอ่ ย 13. รายชื่อผู้เรียนที่กาลังออนไลน์ 14. ปฏิทิน 15. กล่องค้ นหา 16. ข้ อมูลข่าวสาร/ประกาศ 17. ภาษาอื่น ๆ นอกเหนือจาก ภาษาที่ใช้ ในประเทศนัน้ ๆ 18. การติดต่อกับเว็บมาสเตอร์ 19. การเชื่อมโยงกับหน่วยงานอื่น ๆ 20. การสงวนลิขสิทธิ์

University of Alberta

เว็บไซต์ University of Tokyo

Rangsit University

องค์ ประกอบ สาคัญ ที่ขาดไม่ ได้

         

      

     

    

  

 



 

  



249

ตัวอย่างที่ 4 Web 1 MIT

Web 2 Utah State

Web 3 Chula

องค์ ประกอบ สาคัญ ที่ขาดไม่ ได้

1. เนือ้ หา (Content) - คาประกาศ/คาแนะนาการเรียน โดยใช้ Open Course Ware



- ระบบสาหรับใส่ชื่อผู้เรียนและรหัสลับสาหรับเข้ า ใช้ ระบบ (Login)

- รายละเอียดเกี่ยวกับโปรแกรมที่จาเป็ นสาหรับ การเรียกดูเนื ้อหาอย่างสมบูรณ์ (Technical Requirements)



- ชื่อหน่วยงาน และวิธีการติดต่อกับหน่วยงาน ที่รับผิดชอบ



- การแสดงวันที่และเวลาที่ทาการปรับปรุงแก้ ไข เว็บไซต์ครัง้ ล่าสุด



- เคาน์เตอร์ เพื่อนับจานวนผู้เรียนที่เข้ ามาเรียน

- รายชื่อรายวิชาที่บรรจุอยูใ่ น Open Course Ware



- รายชื่อผู้สอนรายละเอียดรวมทังวิ ้ ธีการติดต่อผู้สอน



- ประมวลรายวิชา (Syllabus) จุดประสงค์รายวิชา



- ห้ องเรียน (Class) ได้ แก่ บทเรียนหรือ คอร์ สแวร์



- เว็บเพจสนับสนุนการเรียน (Resources)



- ความช่วยเหลือ (Help)



- รายวิชาอื่น ๆ (Other Course)



- เว็บเพจคาถามคาตอบที่พบบ่อย (FAQs)



- การออกจากระบบ (Logout)

องค์ ประกอบของเว็บ

www.ThaiCyberU.go.th

250

Web 1 MIT

Web 2 Utah State



- ประเภทช่วงเวลาเดียวกัน (synchronous)



- ประเภทช่วงเวลาต่างกัน (asynchronous)



- การอธิบายลักษณะของการประเมินผล



- การแบ่งน ้าหนักของคะแนนในแต่ละกิจกรรม



- การแปลภาษาเพื่อเอื ้อต่อผู้เรียนจากประเทศอื่น ๆ



- การจูงใจให้ สนับสนุนหรือบริจาคให้ แก่เว็บไซต์



- การเปิ ดโอกาสให้ แสดงความคิดเห็นด้ านผลป้อน กลับ FEED BACK ให้ แก่ทางเว็บไซต์



องค์ ประกอบของเว็บ

Web 3 องค์ ประกอบ Chula สาคัญ ที่ขาดไม่ ได้

2. ระบบบริหารการเรียน หรื อ LMS - ลิงค์ไปยังส่วนของการจัดการการสอนด้ านอื่น ๆ (Management) 3. การติดต่ อสื่อสาร

4. การสอบ/วัดผลการเรียน

5. ข้ อสังเกต อื่น ๆ - มีการแนะนาลง credit ลงเรียน

251

กิจกรรมที่ 6 การออกแบบและพัฒนาหน้ าโฮมเพจสาหรับการเรี ยนการสอนอีเลิร์นนิง จากการวิเ คราะห์ สัง เคราะห์ องค์ ป ระกอบที่ ส าคัญ ของอี เ ลิ ร์ น นิ ง เว็บ ไซต์ ที่ มี ประสิทธิภาพ ขอให้ (1) ออกแบบและพัฒนาหน้ าโฮมเพจ (หน้ าแรกของเว็บไซต์ ) ถ้ าท่าน ทางานอยู่ในสถาบัน การศึกษาอยู่แล้ ว ท่านอาจลองออกแบบเว็บไซต์สาหรับองค์กรของท่าน หรื อ อาจใช้ ชื่ อ /สมมติ ชื่ อ สถาบัน การศึก ษาขึ น้ มาได้ ส่ ว นโปรแกรมที่ ท่า นสามารถใช้ ใ น การพัฒนาหน้ า homepage ท่านอาจพิจารณาโปรแกรม Web Page Maker, Courselab (freeware) หรื อโปรแกรมอื่น ๆ ที่ท่านมีความถนัด เช่น MS WORD (save as webpage), exe, Macromedia Dreamweaver, Macromedia Flash, SwishMax, และอื่ น ๆ ( ท่านสามารถ download program Web Page Maker ได้ ที่ www.webpage-maker.com และศึกษาคูม่ ือการใช้ โปรแกรมได้ ที่เอกสารอ่านเพิ่มเติม ) หรื อท่านอาจศึกษา TCU Tutorials สาหรั บโปรแกรม Adobe Photoshop, Macromedia Flash, Macromedia Captivate และ Macromedia Dreamweaver ได้ จากเว็บไซต์http://www.training.thaicyberu.go.th/ TCU/main/default.asp จากนัน้ ขอให้ ทุก ท่ า นอภิ ป รายถึ ง องค์ ป ระกอบที่ ท่ า นเห็ น เป็ นส าคัญ ส าหรั บ อีเลิร์นนิงเว็บไซต์ของท่าน และหลักการออกแบบต่าง ๆ และเพื่อเป็ นการแลกเปลี่ยนเรี ยนรู้ ขอให้ ทุก ท่านเข้ า เยี่ ยมชมงานที่ เ พื่ อ นร่ วมชัน้ เรี ย นของท่า นได้ นาเสนออย่ าง น้ อ ย 5 ท่า น พร้ อมแลกเปลี่ยนความคิดเชิงสร้ างสรรค์ (Constructive Feedback) กับผู้ร่วมชันเรี ้ ยน โดย การตอบที่กระทู้นนั ้ ๆ (ขอให้ เปรี ยบกับการอภิปรายในชันเรี ้ ยน ที่เราสามารถเสริ ม ให้ มมุ มอง แง่คดิ เพื่อเป็ นการแลกเปลี่ยนเรี ยนรู้ ) ในกิจ กรรมนี ้ ขอให้ ท่านจัด ท าในโปรแกรม PowerPoint โดยในงานของท่า น จะประกอบด้ วย 3 หน้ าคือ 1) หน้ าแรกระบุ วัตถุประสงค์ของการทาเว็บไซต์และกลุ่มเป้าหมาย (ขันที ้ ่ 1 ของ ADDIE MODEL: Analysis (วิเคราะห์)) 2) หน้ าที่ 2 ขอให้ นา Site Structure ที่ได้ สร้ างจาก Mind Mapping tool มาใส่ไว้ ในส่วนนี ้ 3) หน้ าที่ 3 ขอให้ ท่านออกแบบรู ปแบบหน้ าจอ (Interface Design) ดังตัวอย่าง พร้ อมทังอภิ ้ ปรายถึงหลักการออกแบบที่ทา่ นได้ นามาประยุกต์ใช้ โดยท่านอาจเลือกใช้ กราฟิ ก ในโปรแกรม PowerPoint เพื่ออกแบบรู ปแบบหน้ าจอหรื ออาจทดลองใช้ โปรแกรม Webpage Maker หรื อ Google Site ในการออกแบบรู ปแบบหน้ าจอได้ โดย Google Site เป็ นโปรแกรม www.ThaiCyberU.go.th

252

ที่ใช้ งานง่าย มีเทมเพลตให้ และมีฟังค์ชนั่ การใช้ งานที่หลากหลาย ซึ่งสามารถนามาปรับใช้ กับ กิจ กรรมการออกแบบหน้ าโฮมเพจตามหลักการการออกแบบเว็บ ไซต์ ได้ อ ย่ า งดี โดย สามารถศึ ก ษารายละเอี ย ดการใช้ งานได้ ที http://www.google.com/sites/help/intl/th/ overview.html ถ้ าท่านสนใจโปรแกรม Webpage Maker สามารถศึกษาวิธีการใช้ งานได้ ดังต่อไปนี ้ ตัวอย่ างการออกแบบรูปแบบหน้ าจอ (Interface Design)

ตัวอย่ างการออกแบบและพัฒนาหน้ าโฮมเพจ ตัวอย่างที่ 1

ตัวอย่างที่ 1 ผลงานของคุณสุวรรณ โชติการ ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง

www.ThaiCyberU.go.th

253

254

ตัวอย่ างที่ 2

ตัวอย่างที่ 2 ผลงานของคุณสิทธิชยั มาทามา ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง

255

กิจกรรมที่ 7 การออกแบบและพัฒนาหน้ าเว็บเพจสาหรับการเรี ยนการสอนอีเลิร์นนิง กิจกรรมที่ 7 นี ้ คือ การออกแบบและพัฒนาหน้ าเว็บเพจสาหรับการเรี ยนการสอน อีเลิร์นนิง (โดยอาจมีอ งค์ประกอบ เช่น หน้ าหลักสูตร, หน้ าแสดงข้ อ มูลช่วยเหลื อผู้เรี ยน (ส่วน Support การเรี ยนการสอน e-Learning เช่น หน้ าแสดงข้ อมูลวิธีการเรี ยน, คาถาม ‟ ตอบ, ติดต่อ), ส่วนของ online community สาหรับผู้เรี ยน ผู้สอน เป็ นต้ น) และการเขียน Site Structure สาหรับ webpage ตัวอย่างหน้ าเว็บเพจบทเรี ยน

ตัวอย่างที่ 1 ผลงานของคุณวิเชียร พุ่มพวง ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง

www.ThaiCyberU.go.th

256

ตัวอย่างหน้ าเพจกระดานสนทนา

ตัวอย่างที่ 2 ผลงานของคุณสุวรรณ โชติการ ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง กิจกรรมที่ 8 แลกเปลี่ยนเรี ยนรู้ การออกแบบและพัฒนาเว็บเพจ สาหรับการเรียนการสอนอีเลิร์นนิง เมื่อเข้ าร่ วมกิจกรรมที่ 2 แล้ วขอให้ ทกุ ท่านเขียนอภิปรายถึงอีเลิร์นนิงเว็บไซต์ของ ท่านประกอบหน้ า homepage และ หน้ า webpage e-Learning, และ site structure (ส่วนรายละเอียดประเด็นอภิปราย ‟ ท่านสามารถตรวจสอบได้ ที่กระทู้กิจกรรมค่ะ ) พร้ อมทัง้ เข้ าเยี่ยมชมผลงานของเพื่อนร่ วมชันเรี ้ ยนและให้ constructive feedback (ความคิดเห็นเชิง สร้ างสรรค์ ) ส าหรั บ งานชิ น้ นี ้ ขอให้ แ ต่ ล ะท่ า นเข้ าร่ ว ม comment งานของทุก ท่ า น โดยเป้าหมายหลักคือ การเป็ นชุมชนแห่งการเรี ยนรู้ และเพื่อให้ งานของท่านดียิ่ง ๆ ขึ ้นไป

257

กิจกรรมที่ 9 Review of CMS & LMS: What are Pros & Cons? ขอให้ ทุกท่านเข้ าเยี่ ย มชมเว็บ ไซต์ที่ พัฒ นาขึน้ จากระบบบริ ห ารจัด การเว็บ ไซต์ (Course Management System) Joomla! จากนันลองศึ ้ กษาข้ อดี ข้ อจากัดของระบบบริ หาร จัดการดังกล่าว (ดูตัวอย่าง ๆได้ จาก http://www.joomla.org) และขอให้ ท่านเข้ าเยี่ ยมชม เว็บไซต์ที่พฒ ั นาขึ ้นจากระบบบริ หารจัดการการเรี ยนการสอน (Learning Management System) ต่าง ๆ เช่น http://www.blackboard.com, http://www.ucompass.com, http://www.webct.com และ http://www.moodle.com ศึก ษาข้ อ ดี ข้ อ จากัด ของระบบบริ ห ารจัด การดังกล่า ว.. จากนัน้ ขอให้ ท่านลองเปรี ยบเทียบ website ที่พัฒนาขึน้ จากระบบบริ หารจัดการเว็บไซต์ (Course Management System) และระบบบริ หารจัดการการเรี ยนการสอน (Learning Management System)

www.ThaiCyberU.go.th

258

ตัวอย่ างการศึกษาข้ อดี ข้ อจากัด และเปรี ยบเทียบ LMS และ CMS

ตัวอย่างที่ 1 ผลงานของคุณประทีป อินทรสิทธิ์

ตัวอย่ างการศึกษาเว็บไซต์ ท่ พ ี ัฒนาขึน้ จากระบบบริหารจัดการการเรียนการสอน

ตัวอย่างที่ 2 ผลงานของคุณณฤดี โอวาทวรัญญู

www.ThaiCyberU.go.th

259

260

กิจกรรมที่ 10 Effective Website for e-Learning จากการออกแบบหน้ า Homepage สาหรั บองค์กรทางการศึกษาที่มีการเรี ยน การสอน e-Learning เป็ นส่วนหนึ่ง/เป็ นส่วนใหญ่ ที่ได้ จดั ทาขึ ้นในกิจกรรมที่ 2 ขอให้ ทกุ ท่าน เข้ าร่ วมกิจกรรมเพื่อต่อยอดเพิ่มเติมดังนี ้ - ขอให้ ทกุ ท่านออกแบบและพัฒนาหน้ าเว็บเพจสาหรับการเรี ยนการสอนอีเลิร์นนิง (โดยอาจมีองค์ประกอบ เช่น หน้ าหลักสูตร, หน้ าแสดงข้ อมูลช่วยเหลือผู้เรี ยน (ส่วนสนับสนุน การเรี ยนการสอนอีเลิร์นนิง เช่น หน้ าแสดงข้ อมูลวิธีการเรี ยน, คาถาม ‟ ตอบ, ติดต่อ, ส่วน ของชุมชนออนไลน์ (online community) สาหรับผู้เรี ยนและผู้สอน เป็ นต้ น) - ขอให้ ทา่ นเขียน Site Structure ของเว็บเพจสาหรับรายวิชา โดยท่านอาจกล่าวถึง การใช้ ระบบ CMS (Joomla!) สาหรับ 1 รายวิชา หรื อทังหลั ้ กสูตรก็ได้ ก็ได้ - จากนัน้ ขอให้ ทา่ นเขียนอธิบายถึงอีเลิร์นนิงเว็บไซต์ของท่านประกอบหน้ าโฮมเพจ และหน้ าอีเลิร์นนิงเว็บเพจ และ site structure (โดยท่านอาจอภิปรายถึงจุดเด่นของเว็บไซต์ ของท่าน สิ่งที่ท่านได้ พบ/ ประสบการณ์ในการเข้ าชมอีเลิร์นนิงเว็บไซต์ต่าง ๆ ท่านเห็นว่ามี ข้ อ จากัดคือ …. ดังนัน้ ในอี เลิร์ นนิงเว็บไซต์ของท่าน ๆ จึงปรั บแก้ โดย…. หรื อ อาจเป็ น ประสบการณ์ ทางบวก เช่น ท่านพบว่าอีเลิร์นนิงเว็บไซต์ของ…. มีจุดเด่นคือ …. ท่านจึงมี แนวทางในการพัฒนาดังเช่น อีเลิร์นนิงเว็บไซต์นี ้โดยนามาปรับให้ เข้ ากับบริ บทคือ…. - สุดท้ าย ขอให้ ท่านเข้ าเยี่ยมชมผลงานของเพื่อนร่ วมชันเรี ้ ยนและให้ ความคิดเห็น เชิงสร้ างสรรค์ (Constructive feedback) สาหรั บงานชิน้ นี ้ ขอให้ แต่ละท่านเข้ าร่ วมแสดง ความคิดเห็นงานของทุกท่าน โดยเป้าหมายหลักคือ การเป็ นชุมชนแห่งการเรี ยนรู้ และเพื่ อให้ งานของท่านดียิ่ง ๆ ขึ ้นไป

261

กิจกรรมที่ 11 The effective website project: SUMMARY 1) ทุกท่านจะสร้ าง WEBPAGE 2 หน้ า คือ (1.1) HOMEPAGE สถาบัน คือหน้ าเว็บของสถาบันการศึกษาที่มีการจัดการ เรี ย นการสอนแบบอี เ ลิ ร์ น นิ ง ทัง้ นี ก้ ารสอนอี เ ลิ ร์ น นิ ง อาจเป็ นส่ ว นหนึ่ง หรื อ ทัง้ หมดของ หลัก สูต รที่ ส ถาบัน นัน้ ๆ มี โ ดยจุด ประสงค์ ห ลัก ของหน้ า นี ค้ ื อ การให้ ป ระชาสัม พัน ธ์ แ ละ เผยแพร่ ข้อมูลข่าว สารของสถาบันค่ะ (1.2) WEBPAGE หน้ า E-LEARNING สาหรับการเรี ยนการสอน e-Learning (โดยอาจมีองค์ประกอบ เช่น หน้ าหลักสูตร, หน้ าแสดงข้ อมูลช่วยเหลือผู้เรี ยน (ส่วน Support การเรี ยนการสอน e-Learning เช่น หน้ าแสดงข้ อมูลวิธีการเรี ยน, คาถาม ‟ ตอบ, ติดต่อ), ส่วนของ online community สาหรับผู้เรี ยน ผู้สอน) เป็ นต้ น) (สร้ างเป็ น links ไว้ เฉย ๆ ยังไม่ ต้ องมีข้อมูลค่ะ ‟ แต่ทงนี ั ้ ้ สาหรับท่านที่ออกแบบและพัฒนาเพื่อเตรี ยมไปใช้ จริ ง ๆ ก็ได้ นะคะ ถือว่ายิงปื นครัง้ เดียวได้ นก 2 ตัว ‟ ได้ ทงโปรเจ็ ั้ คในวิชานี ้ และได้ วชิ าเป็ น e-Learning…. 2) ทุกท่านจะออกแบบ SITE STRUCTURE -- โครงสร้ างเว็บของรายวิชาซึง่ เรี ยน ผ่าน CMS หรื อ LMS ขอย ้าว่าให้ สร้ างเฉพาะ SITE STRUCTURE นะคะ -- ยังไม่ต้องถึงกับ พัฒนาระบบ (ในหน้ า webpage ขอแค่ links เฉย ๆ เท่านัน้ และ site structure เพื่อแสดง รายละเอียดโครงสร้ างของรายวิชาของแต่ละท่านค่ะ เพราะเชื่อว่าส่วนใหญ่ทกุ ๆ สถาบันจะมี LMS อยู่แ ล้ ว ตรงนีข้ อแค่ในส่วนของ design เท่านัน้ คะ ต่อไปภายหลั งเราสามารถเอา site structure นี ้ไปพัฒนาต่อยอดใน LMS ตัวใดตัวหนึง่ ค่ะ

www.ThaiCyberU.go.th

262

ตัวอย่ าง โปรเจคและ Site Structure

ตัวอย่างที่ 2 ผลงานของคุณปิ ยพจน์ ตัณฑะผลิน ผลงานในรายวิชาการออกแบบเว็บไซต์สาหรับอีเลิร์นนิง หลักสูตรผู้เชี่ยวชาญอีเลิร์นนิง www.ThaiCyberU.go.th

263

264

กิจกรรมที่ 12 ประเมินเว็บไซต์ ผู้เรี ยนหลาย ๆ ท่านที่เป็ นอาจารย์คงทราบกันดีว่าการประเมินผลงานนัน้ ‟ ควรดู ทังจาก ้ (output) และจากกระบวนการทางาน (process) ดังนัน้ จึงอยากขอให้ ทกุ ท่านสรุ ป กระบวนการ/ขันตอนในการท ้ าโปรเจ็คชิ ้นนี ้ รวมถึงลองประเมิน อีเลิร์นนิงเว็บไซต์ของตนเอง (self evaluation) โดยกรอบในการประเมินอีเลิร์นนิงเว็บไซต์นนั ้ จะมาจากเนื ้อหาในบทที่ 3 สรุ ปได้ ดงั นี ้ การประเมินเว็บไซต์สาหรับการเรี ยนการสอนอีเลิร์นนิงนันจะเกี ้ ่ยวข้ องกับมิติของ การออกแบบส่วนต่อประสาน (Interface Design) ที่ Khan (2005) ได้ พูดถึงในหนังสือ E-Learning Quick Checklist ‟ ใน section ของเรื่ อง checklist for E-learning interface design ซึง่ ประกอบด้ วยหัวข้ อในการพิจารณาต่าง ๆ ดังนี ้ (1) การออกแบบส่วนต่อประสาน (Page and site design) 17 ประเด็น (2) การออกแบบเนื อ้ หา (content design) 10 ประเด็น 3. การออกแบบระบบนาทาง (Navigation) 20 ประเด็น (4) การเข้ าถึงข้ อมูล (Accessibility) 6 ประเด็น และ (5) การทดสอบการใช้ งาน (Usability testing) 6 ประเด็น นอกจากนี ้ การประเมินเว็บไซต์สาหรับการเรี ยนการสอนอีเลิร์นนิง โดยได้ ดดั แปลง มาจากแนวทางการประเมิน เว็บไซต์ของ Waterhouse (2005) จากหนังสือ The Power of eLearning: the essential guide for teaching in the digital age ในหัวข้ อ Website Design ประกอบด้ วย checklist ซึง่ มี 3 ประเด็นหลัก ๆ คือ (1) ความน่าเชื่อถือ ( Website credibility ) 5 ประเด็น (2) คุณภาพในการออกแบบ (Design quality) 15 ประเด็น และ (3) คุณภาพของเนื ้อหา (Content quality) 5 ประเด็น จากข้ อ มูลเกณฑ์ในการประเมิน Website ทัง้ 2 นี ้ ขอให้ แ ต่ละท่านลองนามา พิจารณาเว็บไซต์ที่ท่านได้ พฒ ั นาขึ ้น พร้ อมหยิบบางประเด็นในแต่ละหัวข้ อที่สามารถ apply ได้ กับเว็บไซต์ของท่าน (จะเห็นว่าบางประเด็นอาจเกิน ขอบข่ายของงานของท่าน เนื่องจาก เว็บไซต์ที่เราพัฒนานัน้ ถือเป็ นเพียงร่ างต้ นแบบ (prototype) เท่านัน้ ยังไม่ถือว่าพัฒนาเต็ม รู ปแบบ

265

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

www.ThaiCyberU.go.th

266

หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

บรรณานุกรม กรมวิชาการ. (2544). ความรู้เกี�ยวกับสื�อมัลติมีเดียเพื�อการศึกษา. กรุ งเทพฯ: ศูนย์พฒ ั นา หนังสือ, กรมวิชาการ กระทรวงศึกษาธิการ. จิตเกษม พัฒนาศิริ. (2539). เริ�มสร้ างโฮมเพจด้ วย HTML. กรุ งเทพฯ: วิตตี � กรุ๊ ป. จินตวีร์ มัน� สกุล. (2551). เอกสารประกอบการสอนวิชาการออกแบบเว็บไซต์ สําหรับอีเลิร์นนิง. หลักสูตรผู้เชี�ยวชาญอีเลิร์นนิง. โครงการมหาวิทยาลัยไซเบอร์ ไทย สํานักงาน คณะกรรมการอุดมศึกษา กระทรวงศึกษาธิการ. จินตวีร์ คล้ ายสังข์ และประกอบ กรณีกิจ. (2552). PEDAGOGY-BASED HYBRID LEARNING: จากแนวคิดสู่การปฏิบัต.ิ วารสารครุ ศาสตร์ (ผ่านการพิจารณาจาก ผู้ทรงคุณวุฒแิ ล้ ว อยู่ในระหว่างตีพิมพ์) จินตวีร์ คล้ ายสังข์. (2553). โครงการวิจัยรูปแบบเว็บไซต์ และรูปแบบบทเรียนอิเล็กทรอนิกส์ ที�เหมาะสมสําหรับการเรี ยนการสอนแบบอีเลิร์นนิงในระดับอุดมศึกษา. สํานักงานคณะกรรมการการอุดมศึกษา กระทรวงศึกษาธิการ. เจนจิรา อนันตกาล. (2548). การศึกษารูปแบบโฮมเพจเว็บไซต์ ทางด้ านการศึกษาระดับ อุดมศึกษาที�ตรงตามความต้ องการของผู้ใช้ . วิทยานิพนธ์ปริ ญญามหาบัณฑิต สาขาวิชาคอมพิวเตอร์ และเทคโนโลยีสารสนเทศ คณะครุ ศาสตร์ อตุ สาหกรรม และเทคโนโลยี มหาวิทยาลัยเทคโนโลยีพระจอมเกล้ าธนบุรี. ใจทิพย์ ณ สงขลา. (2547). การออกแบบการเรียนการสอนบนเว็บในระบบการเรียน อิเล็กทรอนิกส์ . กรุ งเทพฯ: ศูนย์ตําราและเอกสารทางวิชาการ คณะครุ ศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย. . (2550). วิธีวทิ ยาการออกแบบการเรียนการสอนอิเล็กทรอนิกส์ . กรุ งเทพฯ: โรงพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย.

หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

267

ณัฐพล ราไพ. (2548). รูปแบบของเว็บเพจที่มีต่อผลสัมฤทธิ์ทางการเรียนของนักศึกษา ระดับปริญญาตรี . วิทยานิพนธ์ปริ ญญามหาบัณฑิต สาขาเทคโนโลยีการศึกษา มหาวิทยาลัยเกษตรศาสตร์ . ถนอมพร เลาหจรัสแสง. (2545). Designing e-learning หลักการออกแบบและการสร้ างเว็บ เพื่อการเรี ยนการสอน. เชียงใหม่ : องค์การค้ าครุ สภา. ปราวีณยา สุวรรณณัฐโชติ และจินตวีร์ มัน่ สกุล. 2550. การจัดการเรี ยนการสอนแบบ ผสมผสานด้ วยระบบบริหารจัดการเรี ยนรู้ Blackboard ของสาขาวิชาเทคโนโลยี การศึกษาสาหรับนิสิตระดับปริญญาตรี คณะครุ ศาสตร์ . เอกสารประกอบ การประชุมวิชาการคณะครุ ศาสตร์ วันที่ 10 - 11 กรกฎาคม 2550 ปทีป เมธาคุณวุฒิ. (2544). เทคโนโลยีสารสนเทศเพื่อการบริหารสถาบันอุดมศึกษา. กรุ งเทพฯ: โรงพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย. ปิ ยพจน์ ตัณฑะผลิน . (2009). Web 2.0 tools. (ออนไลน์). เข้ าถึงใน http://lms.thaicyberu.go.th/officialtcu/main/advcourse/presentstu/course/ bm521/kurokung_2/kurokung-web2/index.html (20 มีนาคม 2553). ไพฑูรย์ ศรี ฟ้า. (2542). Webpage. วารสารเทคโนโลยีส่ ือสารการศึกษา. 6(4)(พฤษภาคม) : หน้ า 97-99. สรวงสุดา ปานสกุล. (2545). การนาเสนอรูปแบบการเรียนรู้กระบวนการแก้ ปัญหาเชิง สร้ างสรรค์ แบบร่ วมมือในองค์ กรบนอินเทอร์ เน็ต. วิทยานิพนธ์ปริ ญญาดุษฏี บัณฑิต สาขาวิชาเทคโนโลยีและสื่อสารการศึกษา จุฬาลงกรณ์มหาวิทยาลัย . สุนิตย์ เชรษฐาและชิตพงษ์ กิตตินราดร. Web 2.0 กับการการเรียนรู้ เพื่อสร้ างปั ญญา สาธารณะ. Thai RuralNet (TRN). [ออนไลน์]. เข้ าถึงใน http://www.trnlab.org/data/web2.0-whitepaper.pdf. (20 มีนาคม 2553).

www.ThaiCyberU.go.th

268

หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

สมคิด เอนกทวีผล. Web2.0 ถึงยุคแบ่ งปั น .Positioning Magazine มิถนุ ายน 2550. [ออนไลน์]. เข้ าถึงใน: http://www.positioningmag.com/Magazine/ Details.aspx?id=60894 (20 มีนาคม 2553). ศรี ศกั ดิ์ จามรมาน. (2549). อีเลิร์นนิงระดับปริญญาผุดขึน้ มามากมาย: การศึกษาออนไลน์ ในสหรัฐอเมริ กา พ.ศ. 2548 โดยมูลนิธิ อัลเฟรด พี สโลน. สมุทรปราการ : สานักพิมพ์มหาวิทยาลัยอัสสัมชัญ ศรี ศกั ดิ์ จามรมาน สถานเทคโนโลยีสารสนเทศ มหาวิทยาลัยอัสสัมชัญ ศรี ศกั ดิ์ จามรมาน อุทมุ พร จามรมาน และ จินตวีร์ มัน่ สกุล. (2549). เอกสารประกอบ การบรรยายเรื่อง“บทบาทของ E-Learning กับการศึกษาไทยยุค ICT” จัดโดยโครงการจัดฝึ กอบรมเพื่อเตรี ยมผู้บริ หาร CEO รุ่ น 3 คณะแพทย์ศาสตร์ ศิริราชพยาบาล มหาวิทยาลัยมหิดล ในวันจันทร์ ที่ 3 กรกฎาคม พ.ศ. 2549 Bi, X.J. (2000). Instruction Design Attributes of Web-Based Course. [Online]. Available from: www.lib.umi.com/desertations/fullcit/9980399 (December 3, 2009). Davidson-Shivers, G.V. & Rasmussen, K. L. (2006). Web-Based Learning: Design, Implementation, and Evaluation. New Jersey: Pearson, Merrill Prentice Hall. Graham,L. (2002). Basic of design: Layout and typography for Beginners. New York: Delma, Thomson Learning Inc. Khan, B. H. (2005). E-Learning: Quick checklist. Hershey, PA: Information Science Publishing. Larisa Thomason. (2004). Web Site Usability Checklist. Netmechanic. (Part 2) 7(4)(February 2004). [online]. Available from: http://www.netmechanic.com/news/vol7/design_no4.htm

หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

269

Lynch, P. and S. Horton. (1999). Web Style Guide: Basic design principles for creating Web sites. New Haven: Yale University Press. NECTEC. (2545). เทคนิคการพัฒนาเว็บเพจ. [ออนไลน์]. เข้ าถึงใน: http://www.nectec.or.th/courseware/internet/webtech/0023.html. (20 มีนาคม 2553). Paul Boutin, (2006). Web 2.0: The new Internet “boom” doesn’t live up to its name. [Online]. Available from: http://www.slate.com/id/2138951/. (March 14, 2010) Paolo T, Filippo R., Pianta E., Girardi C., Lucca G. Di, Fasolino A. R., Tramontana P. (2003). Evaluation Methods for Web Application Clustering Proc. Of WSE. 2003.International Workshop on Web Site Evolution, Amsterdam, The Netherlands. September 2003. SLOAN, Consortium. 2005. Growing by Degrees Online Education in the United States [Online]. Available from: http://www.sloanc.org/resources/ growing_by_degree.pdf (2008, November) Tim O.R. and John B. (2009). What's next for Web 2.0? in Web Squared: Web 2.0 Five Years . [online]. Available from: http://oreilly.com/web2/archive/ what-is-web-20.html (March 15, 2010) Waterhouse, S. (2005). The Power of E-Learning: The essential guide for teaching in the digital age. Boston, MA: Pearson Education, Inc.

www.ThaiCyberU.go.th

270

หลักการออกแบบเว็บไซต์ทางการศึกษา: ทฤษฎีสกู่ ารปฏิบตั ิ

คณะผู้จัดทา ที่ปรึกษา ดร.สุเมธ ผศ. ดร.เชาวเลิศ ผศ. สุพรรรณี ผศ. ดร.ฐาปนีย์ ผศ. ดร.อนุชยั

แย้ มนุน่ เลิศชโลฬาร สมบุญธรรม ธรรมเมธา ธีระเรื องไชยศรี

เลขาธิการคณะกรรมการการอุดมศึกษา ที่ปรึกษาโครงการมหาวิทยาลัยไซเบอร์ ไทย ที่ปรึกษาโครงการมหาวิทยาลัยไซเบอร์ ไทย ผู้อานวยการโครงการมหาวิทยาลัยไซเบอร์ ไทย รองผู้อานวยการโครงการมหาวิทยาลัยไซเบอร์ ไทย

จัดทาเนือ้ หา ผศ. ดร. จินตวีร์ คล้ ายสังข์ หน่ วยงานรับผิดชอบ โครงการมหาวิทยาลัยไซเบอร์ ไทย สานักงานคณะกรรมการการอุดมศึกษา



   

                                                                                                                                                                                 