9.8 แนวทาง(หลัก)การพัฒนาสื่อเอกสารเว็บและบทเรียนออนไลน์

แนวทาง(หลัก)การพัฒนาสื่อเอกสารเว็บและบทเรียนออนไลน์

โครงสร้างเว็บไซท์ (Site Structure) เป็นแผนผังของการลำดับเนื้อหาหรือการจัดวางตำแหน่งเว็บเพจทั้งหมด ซึ่งจะทำให้เรารู้ว่าเว็บไซท์ประกอบไปด้วยเนื้อหาอะไรบ้าง และมีเว็บเพจหน้าไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซท์จึงเป็นเรื่องสำคัญ เปรียบเสมือนการเขียนแบบอาคารต่างๆ ก่อนที่จะลงมือสร้าง เพราะจะทำให้เราสามารถมองเห็นหน้าตาเว็บไซท์เป็นรูปธรรมมากขึ้น สามารถออกแบบเนวิเกชั่นได้เหมาะสมได้เหมาะสม และมีแนวทางการทำงานที่ชัดเจนสำหรับขั้นตอนต่อๆ ไป นอกจากนี้โครงสร้างเว็บไซท์ที่ดียังช่วยให้ผู้ชมไปสับสน และค้นหาข้อมูลที่ต้องการได้รวดเร็ว.
ในการจัดทำเว็บไซต์การศึกษา ไม่ว่าจะเป็นแบบ web-based หรือแบบ e-learning(e-training) สิ่งสำคัญนั่นคือการจัดวางโครงสร้างของเว็บ ซึ่งการจัดโครงสร้างเว็บไซต์ สามารถทำได้หลายแบบ

แต่แนวคิดหลักๆ ที่นิยมใช้กันมีอยู่ 2 แบบคือ (ในทางปฏิบัติอาจมีการใช้หลายแนวคิดผสมผสานกันก็ได้)
จัดตามกลุ่มเนื้อหา (Content-based Structure)
จัดตามกลุ่มผู้ชม (User- based Structure)

ขั้นตอน..การออกแบบสื่อเอกสารเว็บไซต์ (web document) เและบทเรียนออนไลน์ให้น่าสนใจ

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

ดังนั้นเรามาดูสรุปกันว่า ความพร้อมตามที่กล่าวมานี้ จะมีองค์ประกอบ อะไรบ้าง

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

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

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

การออกแบบหน้าเนื้อหาบทเรียนที่ดี หากได้มีการวางแบบที่ดีด้วยหน้าที่สอดคล้องกันทั้งฉากหลัง สีตัวอักษร ภาพประกอบ จะทำให้หน้าเอกสารเว็บบทเรียนนั้น ดูน่าสนใจ น่าเรียนรู้มากยิ่งขึ้น ดู.. ตัวอย่างการวางโทนสี จากแบบจำลองหน้าเอกสารเว็บด้านล่าง ให้ท่านลองคลิกเลือรายการสีเพื่อดูการเปลี่ยนแปลง

วิธีการที่ดีที่สุดในการออกแบบหน้าเอกสารเว็บหรือบทเรียนก็คือการใช้หน้าแม่แบบหรือ template นั่นเอง

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

8. มีส่วนช่วยเหลือ
หากบทเรียนที่สร้างมีความสลับซับซ้อน มีกิจกรรมการเรียนรู้หลากหลาย เพื่อการเรียนรู้ด้วยตนเองที่มีประสิทธิผล ผู้สร้างควรมีหน้าคำแนะนำการเรียนรู้ รวมถึง ชี้แจงกระบวนการ หรือขั้นตอนการเรียนรู้ ไว้ด้วย

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

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

Sequences
ลักษณะโครงสร้าง
เป็นรูปแบบพื้นฐานทั่วไป ที่ผู้เริ่มเรียนรู้การสร้าง web มัก นิยมเป็นรูปแบบเบื้องต้นในการฝึกหัด หรือใช้กับ web ที่นำเสนอข้อมูลแบบเรียงหน้าไปตาม ลำดับหรือเป็นการเสนอเนื้อหาเดี่ยวต่อเนื่องกันไป รูปแบบนี้บางที่เรียกว่าแบบ Linear โดยมีทั้ง การออกแบบไปหน้าทางเดียวและการออกแบบที่สามารถย้อนกลับหน้าได้
แบบ เดินไปทางเดียว (Straight line or sequential links)
เป็นลักษณะการดำเนินเรื่องจากหน้าแรกไปยังหน้าถัดไปเรื่อยๆจนจบการย้อนกลับหน้าที่ผ่านมา จะอาศัยคุณลักษณะของ โปรแกรม web browser ที่ปุ่ม back ได้เท่านั้น
แบบย้อนกลับได้ (Linear reciprocal links)
เป็นลักษณะคล้ายแบบแรก แต่จะมีส่วนควบคุมการเดินหน้าและถอยหลัง ไปยังหน้าแรก หรือหน้า สุดท้ายในหน้า web ที่สร้างได้เลย
ข้อจำกัด
การย้อนกลับไปสู่หน้าแรกหรือหน้าสุดท้ายทำได้ลำบาก

Linear with side blanches
ลักษณะโครงสร้าง
ลักษณะโครงสร้างของ web เป็นรูปแบบ Sequences ที่แสดง เนื้อหาต่อเนื่องมาตามลำดับ รูปแบบนี้ ส่วนใหญ่จะใช้กระบวน การควบคุมหน้าด้วยการกำหนดปุ่ม หรือตัวนำทางเพื่อควบคุม การเดินหน้าและถอยหลังเมื่อถึงส่วนอ้างอิง หรือเนื้อหาพิเศษ (หน้าสีน้ำตาลและสีชมพู) จะมีหน้าที่แยกเป็นสาขาออกจากหน้า เนื้อหาหลัก



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




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

ข้อจำกัด
รูปแบบนี้หากลำดับชั้นข้อมูลมีความลึกมาก การกลับสู่ หน้าเมนูหลักจะทำได้ลำบาก จึงควรหา navigation รูป แบบอื่นมาสนับสนุน




Webs
ลักษณะโครงสร้าง
เป็นรูปแบบที่ใช้ลักษณะการผสมผสานระหว่าง Sequences และ Hierarchies เข้าด้วยกันตลอดทั้งโครงสร้าง ทำให้รูปแบบนี้มีประสิทธิภาพในการเชื่อมเข้าหาเนื้อหาในทุกส่วนของ web site ได้อย่างอิสระ
ข้อสังเกต
การสร้างต้องทำการออกแบบและวางแผนอย่างละเอียด เพราะ อาจทำให้ระบบการวางคำสั่งการเชื่อมโยงผิดพลาดได้ง่าย

แนะนำโปรแกรมสร้างสื่อเอกสารเว็บไซต์และโปรแกรมสนับสนุน 1. Adobe Dreamweaver เป็นโปรแกรมยอดนิยมที่มีผู้ใช้งานมากที่สุดดปรแกรมหนึ่ง ด้วยระบบเครื่องมือที่ทันสมัย รองรับการทำงานที่หลากหลาย สามารถนำไฟล์สื่อแบบต่างๆนำมาวางได้อย่างรวดเร็ว รองรับการใช้ภาษาสคริป นอกจากนี้ Adobe ยังมีการปรับปรุงอย่างต่อเนื่อง หากท่านเป็นสาวกของ Dreamweaver มาจากอดีต ก็คิดว่าคงคุ้นเคยกับสภาพแวดล้อมของโปรแกรมนี้ได้เป็นอย่างดี 2. WebEasy เป็นโปรแกรมสร้างเว็บง่ายๆใน 3 ขั้นตอน สะดวกในการสร้างงานด้วย หน้าแม่แบบมากกว่า 500 แบบ 3. Web Studio เป็นอีกดปรแกรมหนึ่ง ที่สนับสนุนให้ท่านสามารถสร้างงานได้ค่อนข้างง่าย มีหน้าแม่แบบหลัก โปรแกรมสนับสนุนการสร้างเมนูได้หลายแบบ นอกจากนี้ ยังแนะนำการสร้างตั้งแต่ระดับพื้นฐาน ไปจนถึงระดับมืออาชีพด้วยวิดีทัศน์ทั้งแบบออนไลนื และภายในแผ่นโปรแกรมด้วย 4. Editplus เป็นอีกโปรแกรมหนึ่งในเชิง Editor ที่มีคุณภาพไม่ด้วยไปกว่าโปรแกรมที่กล่าวผ่านมาข้างต้น แต่ ผู้ใช้โปรแกรมนี้ ท่านต้องเข้าใจภาษาสคริปเป็นอย่างดีด้วย 5. Adobe PhotoShop เว็บไซต์ที่ดี องค์ประกอบความสวยงาม สีสันที่น่าสนใจ ก็คงไม่พ้นเรื่องของภาพและกราฟิก ดั้งนั้นโปรแกรมออกแบบ ตกแต่งภาพและสร้างงานกราฟิกจึงเป็นโปรแกรมที่มีความสำคัญอย่างยิ่ง PhotoShop เป็นโปรแกรมของค่าย Adobe ที่ผู้ใช้งานกราฟิกทั่วโลกยกย่องให้เป็นโปรแกรมขั้นเทพเลยทีเดียว 6. AppServ เป็นชุดโปรแกรมในการสร้างเว็บเซิร์ฟเวอร์สำเร็จรูปบนระบบปฏิบัติการไมโครซอฟท์ วินโดวส์ เป็นการรวมโปรแกรมจำนวน 4 ตัวในการสร้างเว็บเซิร์ฟเวอร์ ได้แก่ Apache HTTP Server, PHP, MySQL, และ phpMyAdmin 7. XAMPP โปรแกรม XAMPP เป็นโปรแกรมจำลองเครื่องคอมพิวเตอร์ตัวเอง ให้กลายเป็น เว็บเซิร์ฟเวอร์สำเร็จรูปเช่นเดียวกับ AppServ ที่มาพร้อม MySQL, PHP และ Perl โปรแกรม XAMPP ติดตั้งง่าย มีประสิทธิภาพในการทดสอบการเขียนโปรแกรมบนเว็บไซด์ได้ดีอีกโปรแกรมหนึ่ง นอกจากนี้ท่านยังจะต้องมีโปรแกรมสร้างชิ้นส่วนงานประกอบหน้าเว็บจำพวกสื่อภาพเคลื่อนไหวต่างๆ ไม่ว่าจะเป็น Animated GIF หรือ Flash ซึ่งก็มีซอฟท์แวร์ใช้งานอีกหลากหลายก็เลือกหาทั้งฟรี และทดลองใช้งานบนอินเทอร์เน็ต http://www.alleywebdesign.com/Pictures.htm

คุณลักษณะของผู้ออกแบบสื่อเอกสารเว็บและบทเรียนออนไลน์

 

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

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