Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

77การเรียนการสอนบนเว็บ

3,513 views

Published on

การเรียนการสอนบนเว็บ

Published in: Education, Technology
  • Login to see the comments

  • Be the first to like this

77การเรียนการสอนบนเว็บ

  1. 1. การเรียนการสอนบนเว็บ ระบบการเรียนอิเล็กทรอนิกส์ สาขาเทคโนโลยีและสื่อสารการศึกษา มหาวิทยาลัยมหาสารคาม
  2. 2. การจัดการเรียนการสอนโดยใช้เครือข่ายอินเทอร์เน็ต 2 เทคโนโลยีสารสนเทศ 1 การเรียนการสอนผ่านเว็บ 2 การจัดการเรียนการสอนในลักษณะ e-Learning 3 องค์ประกอบของ e-Learning 4 ประเภทของ e-Learning คอร์สแวร์ 5 ระบบบริหารจัดการรายวิชา 6
  3. 3. การจัดการเรียนการสอนโดยใช้เครือข่ายอินเทอร์เน็ต 3 การออกแบบโครงสร้างเว็บไซต์ 8 การออกแบบทางทัศนะ 10 การออกแบบ e-Learning คอร์สแวร์ 7 การออกแบบส่วนนำทาง 9 ฮาร์ดแวร์และซอฟต์แวร์ที่ใช้ในการสร้างบทเรียน 11
  4. 4. 1. การเรียนการสอนผ่านเว็บ <ul><ul><li>2.1 ความหมายการเรียนการสอนผ่านเว็บ </li></ul></ul><ul><ul><li>ราชบัณฑิตสถานได้บัญญัติคำศัพท์ &quot;Web-Based Instruction&quot; ไว้ว่า &quot; การสอนโดยใช้เว็บเป็นฐาน &quot; หรือ &quot; การสอนบนเว็บ &quot; เนื่องจากคำว่า &quot; การสอนบนเว็บ &quot; เป็นคำที่นิยมใช้กันมาก </li></ul></ul><ul><ul><li>สรรรัชต์ ห่อไพศาล (2544) กล่าวว่า “ เป็นการนำเอาระบบอินเทอร์เน็ตมาออกแบบ เพื่อใช้ในการศึกษาการจัดการเรียนการสอนผ่านเว็บ (Web-Based Instruction)” </li></ul></ul>4
  5. 5. การนำเสนอ (Presentation) การสื่อสาร (Communication) การก่อเกิดปฏิสัมพันธ์ การเรียนการสอนผ่านเว็บ จะต้องอาศัยคุณลักษณะของอินเทอร์เน็ต 3 ประการ 5
  6. 6. 2.2 ประโยชน์ของการเรียนการสอนผ่านเว็บ ไม่ต้องเสียค่าใช้จ่ายในการเรียนการสอน เช่น ค่าที่พัก ค่าเดินทาง 6 การเรียนการสอนสามารถเข้าถึงทุกหน่วยงานที่มีอินเทอร์เน็ตติดตั้งอยู่ 1 การเรียนการสอนกระทำได้โดยผู้เข้าเรียนไม่ต้องทิ้งงานประจำเพื่อมาเข้าชั้นเรียน 2 3
  7. 7. ประโยชน์ของการเรียนการสอนผ่านเว็บ การเรียนการสอนกระทำได้ตลอด 24 ชั่วโมง การจัดสอนหรืออบรมมีลักษณะที่ผู้เข้าเรียนเป็นศูนย์กลาง การเรียนรู้เกิดกับผู้เข้าเรียนโดยตรง การเรียนรู้เป็นไปตามความก้าวหน้าของผู้รับการเรียนการสอนเอง 7 4 5 6
  8. 8. 2.3 ประเภทของการเรียนการสอนผ่านเว็บ เว็บรายวิชา (Stand-alone Courses) 8 1 3 เว็บทรัพยากรการศึกษา (Web Pedagogical Resources) 2 เว็บสนับสนุนรายวิชา (Web Supported Courses)
  9. 9. 3. การจัดการเรียนการสอนในลักษณะ e-Learning <ul><li>ความหมายของ e-Learning สามารถแบ่งออกเป็น 2 ลักษณะด้วยกัน ได้แก่ ความหมายโดยทั่วไป และความหมายเฉพาะเจาะจง สำหรับความหมายโดยทั่ว ๆ ไป e-Learning จะครอบคลุมความหมายที่กว้างมาก กล่าวคือ จะหมายถึง การเรียนในลักษณะใดก็ได้ ซึ่งใช้การถ่ายทอดเนื้อหาผ่านทางอุปกรณ์อิเล็กทรอนิกส์ ไม่ว่าจะเป็นคอมพิวเตอร์ เครือข่ายอินเตอร์เน็ต อินทราเน็ต </li></ul>ความหมายของ e-Learning 9
  10. 10. <ul><li>- e-Learning, คอมพิวเตอร์ช่วยสอน (CAI) และการสอนบนเว็บ (WBI) </li></ul><ul><li>ในปัจจุบันมีคาศัพท์ต่าง ๆ ที่เกี่ยวข้องกับการเรียนจากสื่ออิเล็กทรอนิกส์อยู่มากมาย อาทิเช่น คอมพิวเตอร์ช่วยสอน (CAI) </li></ul><ul><li>e-Learning กับ CAI (Computer-Assisted Instruction) </li></ul><ul><li>บทเรียนคอมพิวเตอร์ช่วยสอนหรือ CAI ย่อมาจาก Computer-Assisted Instruction ภาษาไทยเรียกว่า &quot; คอมพิวเตอร์ช่วยสอน &quot; CAI </li></ul><ul><li>e-Learning กับ WBI </li></ul><ul><li>ทั้ง e-Learning และ WBI ต่างก็เป็นผลจากการผสมผสานระหว่างเว็บเทคโนโลยีกับกระบวนการออกแบบการเรียนการสอน เพื่อเพิ่มประสิทธิภาพทางการเรียนรู้และแก้ปัญหาในเรื่องข้อจากัดทางด้านสถานที่และเวลาในการเรียน </li></ul>10
  11. 11. บริบทที่เกี่ยวกับ e-Learning 11 การถ่ายทอดเนื้อหา การนำ e-Learning ไปใช้ประกอบการเรียน ตอบสนองการเรียน มิติการนำ เสนอเนื้อหา มิติการนำไปใช้ใน การเรียนการสอน มิติเกี่ยวกับผู้เรียน
  12. 12. ข้อได้เปรียบของ e-Learning 12 1) e-Learning ช่วยให้การจัดการเรียนการสอนมีประสิทธิภาพมากยิ่งขึ้น 2) e-Learning ช่วยทำให้ผู้สอนสามารถตรวจสอบความก้าวหน้าพฤติกรรมการเรียนของผู้เรียนได้อย่างละเอียดและตลอดเวลา 3) e-Learning ช่วยทำให้ผู้เรียนสามารถควบคุมการเรียนของตนเองได้
  13. 13. ลักษณะสำคัญของ e-Learning e-Learning ที่ดีควรประกอบด้วย 13 ลักษณะสำคัญ 1) Anywhere, Anytime 2) Multimedia 3) Non–linear 4) Interaction 5) Intermediate Response
  14. 14. ข้อพึงระวัง 14 1 ผู้สอนที่นำ e-Learning ไปใช้ในลักษณะของสื่อเสริม โดยไม่มีการปรับเปลี่ยนวิธีการสอนเลย 2 ผู้สอนจะต้องเปลี่ยนจากบทบาทการเป็นผู้ให้ (impart) เนื้อหาแก่ผู้เรียนมาเป็น ผู้ช่วยเหลือ (facilitator) 3 การลงทุนในด้านของ e-Learning ต้องคลอบคลุมถึงการจัดการให้ผู้สอนและผู้เรียนสามารถเข้าถึงเนื้อหา
  15. 15. แนวคิดเกี่ยวกับ e-Learning <ul><li>e-Learning เป็นรูปแบบการเรียนที่เกิดขึ้นเพื่อตอบสนองการเรียน </li></ul><ul><li>ในลักษณะทางไกล (Distance Learning) เพื่อลดปัญหาในด้าน </li></ul><ul><li>ต้นทุน การเรียนการสอนและการอบรม โดยผู้เรียนจะต้องศึกษา </li></ul><ul><li>เนื้อหาจาก e-Learning คอร์สแวร์ (Courseware) ซึงหมายถึงสื่อ </li></ul><ul><li>การสอนทางคอมพิวเตอร์ที่ได้รับการออกแบบและพัฒนาอย่างมี </li></ul><ul><li>ประสิทธิภาพเพื่อใช้ในการนำเสนอเนื้อหา </li></ul>15
  16. 16. ความรู้ ซึ่งแบ่งได้เป็น 3 ลักษณะ เน้นความเป็น มัลติมีเดีย เชิงโต้ตอบ 16 ความรู้ เน้นข้อความ เน้นสื่อประสม อย่างง่าย
  17. 17. 4. องค์ประกอบของ e-Learning 17 เนื้อหา ระบบบริหารจัดการรายวิชา โหมดการติดต่อสื่อสาร แบบฝึกหัด
  18. 18. องค์ประกอบของ e-Learning โฮมเพจ หรือเว็บเพจแรกของเว็บไซต์ หน้าแสดงรายชื่อวิชา เว็บเพจแรกของแต่ละวิชา 18 4.1 เนื้อหา
  19. 19. 4.2 ระบบบริหารจัดการรายวิชา <ul><li>องค์ประกอบที่สำคัญ มากสำหรับ e-Learning ได้แก่ ระบบบริหารจัดการรายวิชา ซึ่งเป็นเสมือนระบบที่รวบรวมเครื่องมือซึ่งออกแบบไว้เพื่อให้ความสะดวกแก่ผู้ใช้ในการจัดการกับการเรียนการสอนออนไลน์นั่นเอง ซึ่งผู้ใช้ในที่นี้อาจแบ่งได้เป็น 3 กลุ่ม ได้แก่ ผู้สอน (instructors) ผู้เรียน (students) และผู้บริหารระบบเครือข่าย (network administrators) </li></ul>19
  20. 20. 4.3 โหมดการติดต่อสื่อสาร (Modes of Communication) 20 ไปรษณีย์ อิเล็กทรอนิกส์ การประชุมทางคอมพิวเตอร์ เครื่องมือที่ e-Learning ควรจัดหาให้ผู้เรียน
  21. 21. 4.4 แบบฝึกหัด / แบบทดสอบ การจัดให้มีแบบฝึกสำหรับผู้เรียน การจัดให้มีแบบทดสอบผู้เรียน แบบฝึกหัด / แบบทดสอบ 21
  22. 22. 5. ประเภทของ e-Learning คอร์สแวร์ <ul><li>1. กระบวนการในการเรียนการสอน </li></ul><ul><li>ถนอมพร เลาหจรัสแสง (2545) ได้กล่าวเกี่ยวกับการออกแบบการเรียนการสอนทางคอมพิวเตอร์ว่าคล้ายกันกับการออกแบบการเรียนการสอนในชั้นเรียนนั่นเอง กล่าวคือ จะต้องประกอบด้วยขั้นตอนต่าง ๆ ซึ่งคอยช่วยผู้เรียนแต่ละคนให้เกิดการเรียนรู้ตามวัตถุประสงค์ที่ได้มีการกำหนดไว้ </li></ul>22
  23. 23. ประเภทของ e-Learning คอร์สแวร์ <ul><li>2. รูปแบบของ e-Learning คอร์สแวร์ </li></ul><ul><li>e-Learning คอร์สแวร์สามารถแบ่งออกคร่าว ๆ ได้เป็น 4 ประเภท ได้แก่ ประเภทเรียงลำดับการนำเสนอ แบบฝึกหัด การทดลองเสมือนจริง และเกม ดังนี้ ( ถนอมพร เลาหจรัสแสง 2545) การเรียงลำดับการนำเสนอ (Presentation Sequence) ความหมาย คอร์สแวร์การเรียงลำดับการนำเสนอ หมายถึงคอร์สแวร์ที่ออกแบบในลักษณะที่ผู้เรียนศึกษาเนื้อหาโดยการอ่าน ฟัง และสังเกต การบรรยาย และ / หรือการสาธิตต่าง ๆ ตามเวลาและจังหวะการเรียนของตน </li></ul><ul><li>เนื้อหาที่เหมาะสม การเรียงลำดับการนำเสนอเหมาะสำหรับการจัดเนื้อหาการบรรยาย (Lecture) ในลักษณะคุณภาพสูงที่มีความคงที่สำหรับผู้เรียนทุกคน </li></ul>23
  24. 24. รูปแบบการเรียนที่เหมาะสม <ul><li>ผู้เรียนรายบุคคลโต้ตอบกับคอร์สแวร์เพื่อศึกษาเนื้อหาในแต่ละหัวข้อของการเรียน โดยผู้เรียนจะได้รับการชี้แจงเกี่ยวกับวัตถุประสงค์ของการเรียน รวมทั้งการแนะนำเกี่ยวกับเนื้อหาที่จะเรียน ผู้เรียนศึกษาเนื้อหาและบทสรุป หลังจากนั้นผู้เรียนทดสอบความรู้ของตนที่ได้ศึกษามา </li></ul>24
  25. 25. คำแนะนำสำหรับการออกแบบ 2) ออกแบบให้ผู้เรียนมีความกระตือรือร้น 3) เลือกใช้สื่อที่หลากหลาย 25 1) ให้ผู้เรียนเป็นผู้ควบคุมการนำเสนอ 4) เชื่อมโยงมากกว่าการเขียน 5) ออกแบบให้อ่านง่าย
  26. 26. แบบฝึกหัด (Drill and Practice) <ul><li>คอร์สแวร์แบบฝึกหัด หมายถึงคอร์สแวร์ที่อนุญาตให้ผู้เรียนฝึกฝนซ้าแล้วซ้าอีกเพื่อประยุกต์ใช้ความรู้ใดความรู้หนึ่ง หรือทักษะใดทักษะหนึ่ง โดยความรู้และทักษะนั้น ๆ จะเป็นความรู้และทักษะขั้นพื้นฐาน เช่น คอร์สแวร์ฝึกการคำนวณอย่างง่าย โครงสร้างของคอร์สแวร์จะคล้ายกับวงจรแบบทดสอบ (testing cycle) นั่นเอง กล่าวคือจะเริ่มด้วยการนำเสนอปัญหาหรือคำถามให้ผู้เรียนตอบ </li></ul>26
  27. 27. รูปแบบการเรียนที่เหมาะสม <ul><li>รูปแบบการเรียนที่เหมาะสม คอร์สแวร์ประเภทแบบฝึกหัดจะเริ่มจากการนำเข้าสู่บทเรียน ซึ่งรวมถึงการต้อนรับผู้เรียนเข้าสู่เนื้อหา และอธิบายวิธีการที่ผู้เรียนต้องปฏิบัติ รวมทั้งวัตถุประสงค์ของการเรียน หลังจากนั้นจะมีการเสนอคำถาม ผู้เรียนจะคอยตอบคำถามและได้รับผลป้อนกลับ หลังจากได้ผลป้อนกลับก็จะมีข้อคำถามนำเสนอต่อไปเรื่อย ๆ จนกระทั่งครบทุกข้อ </li></ul>27
  28. 28. คำแนะนำสำหรับนักออกแบบ <ul><li>สร้างคลังคำถาม </li></ul><ul><li>/ คำตอบ </li></ul>2) จัดให้มีคำถามที่มี ระดับความง่าย – ความยาก คำแนะนำ 28
  29. 29. การทดลองเสมือนจริง (Virtual Lab) <ul><li>ความหมาย การทดลองเสมือนจริง เป็นคอร์สแวร์ประเภทหนึ่งซึ่งเป็นการนำเสนอการจำลองบนหน้าจอ (on-screen simulator) ผู้เรียนสามารถใช้การทดลองเสมือนจริงในการทดสอบสมมติฐานที่ได้ตั้งไว้ รวมทั้งสังเกตผลที่ได้จากการทดสอบ เนื้อหาที่เหมาะสม คอร์สแวร์ในลักษณะการทดลองเสมือนจริง </li></ul>29
  30. 30. คำแนะนำสำหรับนักออกแบบ <ul><li>เน้นในสิ่งที่ต้องการสอน ในการ </li></ul><ul><li>ออกแบบคอร์สแวร์ </li></ul>2) ใช้การทดลองเสมือนจริง ในหลาย ๆ กิจกรรม คำแนะนำ 30
  31. 31. 6. ระบบบริหารจัดการรายวิชา <ul><li>6.1 ความหมายของระบบบริหารจัดการรายวิชา ระบบบริหารจัดการรายวิชาหมายถึงระบบที่ได้รวบรวมเครื่องมือหลาย ๆ ประเภทที่เกี่ยวกับกระบวนการเรียนการสอนออนไลน์เข้าไว้ด้วยกัน โดยมีจุดประสงค์เพื่อช่วยสนับสนุนผู้ใช้ 3 กลุ่ม ได้แก่ ผู้เรียน ผู้สอน และผู้เชี่ยวชาญด้านเทคนิค </li></ul>31
  32. 32. 6.2 ส่วนประกอบหลักของระบบบริหารจัดการรายวิชา <ul><li>6.2.1 ส่วนในการใส่เนื้อหาการบรรยายของผู้สอน (Slots for lecture note) </li></ul><ul><li>6.2.2 กระดานข่าวเพื่อการอภิปราย (Asynchronous bulletin board) </li></ul><ul><li>6.2.3 ห้องสนทนา (Synchronous chat) </li></ul><ul><li>6.2.4 การทดสอบออนไลน์ (Online testing) </li></ul><ul><li>6.2.5 อิเล็กทรอนิกส์เมล์ (Electronics mails) </li></ul><ul><li>6.2.6 การจัดการแฟ้มข้อมูล (File management) </li></ul>32
  33. 33. 6.3 ส่วนประกอบรองของระบบบริหารจัดการรายวิชา <ul><li>6.3.1 ส่วนประกอบพิเศษอื่น (Many other tools) </li></ul><ul><li>6.3.2 ส่วนจัดการการลงทะเบียนของผู้เรียน (Manage student enrollment) </li></ul><ul><li>6.3.3 ส่วนของการเรียกดูและบันทึกคะแนนของผู้เรียนโดยผู้สอน (View and record student score – faculty) </li></ul><ul><li>6.3.4 ส่วนของการเรียกดูคะแนนของผู้เรียนโดยผู้เรียน (View student score – individual student) </li></ul><ul><li>6.3.5 ส่วนของการเรียกดูสถิติการเข้าเรียน (View student progress tracking) </li></ul>33
  34. 34. 7. การออกแบบ e-Learning คอร์สแวร์ <ul><li>7.1 ความหมายของคอร์สแวร์ </li></ul><ul><li>ถนอมพร เลาหจรัสแสง (2545) กล่าวถึงความหมายของคอร์สแวร์ไว้ว่า หมายถึงสื่ออิเล็กทรอนิกส์ ( คอมพิวเตอร์ ) ซึ่งเป็นการแลกเปลี่ยนรูปแบบการนำเสนอบทเรียนจากเอกสารตำราให้อยู่ในรูปของสื่อการเรียนการสอนทางคอมพิวเตอร์ </li></ul><ul><li>7.2 การออกแบบและพัฒนา e-Learning คอร์สแวร์ รูปแบบการเรียนการสอนที่เหมาะสมได้แก่ รูปแบบการออกแบบการเรียนการสอนในลักษณะพัฒนาชุดการเรียนและในลักษณะเชิงระบบเนื่องจากเหตุผลสำคัญคือ เป็นรูปแบบซึ่งเหมาะสำหรับงานซึ่งใช้วิธีการในการออกแบบพัฒนาสื่อขึ้นมาใหม่ </li></ul>34
  35. 35. การออกแบบคอร์สแวร์ e-Learning ประกอบด้วย 7 ขั้น ดังนี้ ขั้นที่ 1 ขั้นเตรียมตัว ขั้นที่ 2 ขั้นเลือกเนื้อหา ขั้นที่ 4 : ขั้นออกแบบหลักสูตร ขั้นที่ 3 : ขั้นการวิเคราะห์หลักสูตร ขั้นที่ 5 : ขั้นการพัฒนาการเรียนการสอน ขั้นที่ 6 : ขั้นการประเมินผล ขั้นที่ 7 : ขั้นบำรุงรักษา 35
  36. 36. 8. การออกแบบโครงสร้างเว็บไซต์ <ul><li>การออกแบบโครงสร้างเว็บไซต์ ผู้ออกแบบเว็บส่วนใหญ่จะมีรูปแบบการสร้างที่แตกต่างกัน โดยทั่วไปจะขึ้นอยู่กับความถนัด และความพอใจของตนเป็นหลัก (Arvanistis, 1997 อ้างจาก ถนอมพร เลาหจรัสแสง 2545) โดยไม่ได้คำนึงถึงหลักในการออกแบบที่ถูกต้อง เท่าที่ควร ลินช์และฮอร์ตัน (Lynch and Horton, 1999 อ้างจากถนอมพร เลาหจรัสแสง 2545) จึงได้เสนอแนวคิดสำหรับการออกแบบเว็บไซต์ ว่า การออกแบบเว็บไซต์ที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุล มีการเชื่อมต่อสัมพันธ์กัน ระหว่างรายการ (Menu) หรือโฮมเพจ กับหน้าเนื้อหาอื่น ๆ </li></ul>36
  37. 37. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ <ul><li>8.1 เว็บที่มีโครงสร้างแบบเรียงลำดับ (Sequential Structure) </li></ul>37
  38. 38. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ <ul><li>8.2 เว็บที่มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) </li></ul>38
  39. 39. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ <ul><li>8.3 เว็บที่มีโครงสร้างแบบตาราง (Grid Structure) </li></ul>39
  40. 40. โครงสร้างของเว็บสรุปออกเป็น 4 รูปแบบใหญ่ ๆ ได้ดังนี้ <ul><li>8.4 เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure) </li></ul>40
  41. 41. 9. การออกแบบส่วนนำทาง <ul><li>9.1 การนำทาง (Navigation) </li></ul><ul><li>9.2 การใช้ไอคอนและเมนูเพื่อการนำทาง </li></ul><ul><li>9.3 พฤติกรรมการใช้เว็บกับการออกแบบเว็บไซต์ </li></ul><ul><li>9.4 หลักการในการออกแบบส่วนต่อประสานกับผู้ใช้ </li></ul>41
  42. 42. 10. การออกแบบทางทัศนะ <ul><li>10.1 ความหมายของการออกแบบทางทัศนะ การออกแบบทางทัศนะ (Visual Design) หมายถึง การออกแบบภาพและสีสันบนหน้าจอ ซึ่งคำว่าภาพในที่นี้ไม่จำกัดเฉพาะภาพถ่าย ภาพ กราฟิก 3D แอนิเมชัน หรือ วีดิทัศน์ เท่านั้นแต่รวมถึงข้อความ แผนที่ กราฟ ฯลฯ ที่ปรากฏบนหน้าเว็บด้วย ( ถนอมพร เลาหจรัสแสง 2545) </li></ul>42
  43. 43. 10. การออกแบบทางทัศนะ <ul><li>10.2 หลักการในการออกแบบทางทัศนะ ถนอมพร เลาหจรัสแสง (2545) กล่าวถึงหลักการในการออกแบบทางทัศนะไว้ว่า การออกแบบทางทัศนะนั้น หลักการที่ดูเหมือนจะธรรมดา ๆ แต่มักจะถูกมองข้าม ได้แก่ หลักการในการสร้างสมดุล ผู้ออกแบบต้องพิจารณาให้รอบคอบในด้านของการสร้างความสมดุลบนเว็บไซต์ของตนใน 3 มิติด้วยกัน ได้แก่ 1) มิติของเป้าหมายของเว็บไซต์ 2) มิติด้านความต้องการของผู้ใช้ ( ผู้เรียน ) และ 3) มิติทางด้านข้อจากัดด้านฮาร์ดแวร์ ตัวอย่างเช่น สมมติว่าเป้าหมายของเว็บไซต์ของเรา ได้แก่ การออกแบบพัฒนาเว็บไซต์เพื่อการเรียนการสอน </li></ul>43
  44. 44. 10. การออกแบบทางทัศนะ <ul><li>10.3 ความหมายของ Functional Areas Functional Areas คือ การแบ่งส่วนติดต่อระหว่างโปรแกรมกับผู้ใช้ออกเป็นส่วน ๆ อย่างชัดเจนตามหน้าที่การทางานของมัน เพื่อให้ง่ายต่อการทาความเข้าใจของผู้ใช้ ( ถนอมพร เลาหจรัสแสง 2545) </li></ul>44
  45. 45. 10. การออกแบบทางทัศนะ <ul><li>10.4 การออกแบบ Functional Areas </li></ul><ul><li>ถนอมพร เลาหจรัสแสง (2545) ได้เสนอวิธีการออกแบบ Functional area ไว้ดังนี้ </li></ul><ul><li>10.4.1 ผู้ออกแบบควรออกแบบชื่อหัวข้อบริเวณส่วนบนของหน้าจอ </li></ul><ul><li>10.4.2 การออกแบบ Functional Areas ที่ดีนั้นต้องเน้นในเรื่องของความชัดเจนและความสหม่ำเสมอ (Clarity and Consistency) </li></ul>45
  46. 46. 10. การออกแบบทางทัศนะ <ul><li>10.5 การออกแบบเว็บเพจอย่างสมดุล </li></ul><ul><li>ในการออกแบบเว็บเพจนั้นต้องคำนึงถึงความสมดุลระหว่างการใช้ </li></ul><ul><li>ภาพกราฟิกและข้อความเพื่อให้ผู้ใช้สามารถเปิดเว็บเพจได้รวดเร็วไม่ต้อง </li></ul><ul><li>เสียเวลาในการรอมากเกินไป นอกจากนี้ให้คำนึงอยู่เสมอว่าพื้นที่บนหน้าจอ </li></ul><ul><li>คอมพิวเตอร์นั้นเล็กกว่าหน้าที่พิมพ์ออกมาผู้ออกแบบควรคำนึงว่าผู้เรียน </li></ul><ul><li>สามารถเปิดดูเว็บเพจได้พอดี </li></ul>46
  47. 47. 10. การออกแบบทางทัศนะ <ul><li>10.6 การออกแบบกริด (grid) ในการออกแบบเว็บเพจ ความสหม่ำเสมอเป็นสิ่งสำคัญ เพราะผู้เรียนสามารถคาดเดาว่าจะทำสิ่งใดได้อย่างง่ายดาย การออกแบบกริดเป็นสิ่งสำคัญสาหรับการออกแบบสิ่งพิมพ์ที่ดีเช่นใด การออกแบบกริดก็สาคัญสำหรับการออกแบบเว็บเพจที่ดีเช่นนั้น กริดมีลักษณะเป็นเส้นตรงในแนวตั้งและแนวนอน กริดเป็นเสมือนโครงของเว็บเพจซึ่งจะช่วยให้เว็บเพจในเว็บไซต์เดียวกันมีความเป็นระเบียบและมีความคงที่ </li></ul>47
  48. 48. 10. การออกแบบทางทัศนะ <ul><li>10.7 หลักการสำหรับการออกแบบกราฟิกบนเว็บเพจ ในการออกแบบต้อง </li></ul><ul><li>คำนึงถึงปัจจัย 2 ข้อ คือ ( ถนอมพร เลาหจรัสแสง 2545) 1. ขนาดของ </li></ul><ul><li>จอคอมพิวเตอร์ที่ใช้ในการแสดงผลซึ่งมีความละเอียดที่ 800x600 pixels 2) </li></ul><ul><li>หากต้องการให้ผู้ใช้พิมพ์หน้าจอลงบนกระดาษในการออกแบบต้องให้อยู่ใน </li></ul><ul><li>พื้นที่ 595x842 pixels ซึ่งพื้นที่ในการแสดงผลที่มากที่สุดในการออกแบบ </li></ul><ul><li>กราฟิก คือ 760x420 pixels </li></ul>48
  49. 49. 10. การออกแบบทางทัศนะ <ul><li>10.8 การออกแบบตัวเพื่อการอ่านที่ชัดเจน (Readability) ข้อควรพิจารณาที่สำคัญที่สุดในการออกแบบและพัฒนาส่วนต่อประสานและการออกแบบทางทัศนะ ได้แก่ ความสามารถในการอ่านเนื้อหาของผู้เรียน (readability) เพราะการจัดเนื้อหาบทเรียนให้แก่ผู้เรียนเป็นประเด็นหนึ่ง แต่การชักชวนให้ผู้เรียนอ่านเนื้อหาบทเรียนนั้น ๆ เป็นอีกประเด็นหนึ่ง ดังนั้นจึงเป็นสิ่งสำคัญมากสำหรับเว็บไซต์เพื่อการเรียนการสอนที่จะต้องออกแบบให้อยู่ในรูปที่อ่านได้ง่ายและชัดเจนที่สุดเท่าที่จะทำได้ ( ถนอมพร เลาหจรัสแสง 2545) </li></ul>49
  50. 50. 10. การออกแบบทางทัศนะ <ul><li>10.9 เทคนิคในการเพิ่มศักยภาพในการอ่านของผู้เรียน มีเทคนิคบาง </li></ul><ul><li>ประการที่มีส่วนช่วยในการเพิ่มศักยภาพในการอ่านของผู้เรียน เทคนิค </li></ul><ul><li>เหล่านั้น ได้แก่ ( ถนอมพร เลาหจรัสแสง 2545) </li></ul><ul><li>10.9.1 ตัวพิมพ์ (Typeface) </li></ul><ul><li>10.9.2 ฟอนต์และตัวอักษรใหญ่ - เล็ก (Font and Case) </li></ul><ul><li>10.9.3 การจัดความ (Justification) </li></ul><ul><li>10.9.4 ความยาวของข้อความแต่ละบรรทัด (Line Length) </li></ul><ul><li>10.9.5 ความตัดกัน (Contrast) </li></ul><ul><li>10.9.6 การเบี่ยงเบนสมาธิของผู้เรียน (Distractions) </li></ul>50
  51. 51. 10. การออกแบบทางทัศนะ <ul><li>10.10 เทคนิคในการจูงใจผู้เรียน </li></ul><ul><li>นอกจากเทคนิคในการออกแบบเพื่อเพิ่มประสิทธิภาพในการอ่านของผู้เรียน </li></ul><ul><li>ในการออกแบบทางทัศนะยังมีเทคนิคบางประการซึ่งอาจช่วยจูงใจผู้เรียนให้ </li></ul><ul><li>ต้องการเข้ามาเรียนในเว็บไซต์มากขึ้น เทคนิคเหล่านั้นได้แก่ ( ถนอมพร </li></ul><ul><li>เลาหจรัสแสง 2545) </li></ul><ul><li>10.10.1 พื้นที่ว่าง (Blank Space) </li></ul><ul><li>10.10.2 สี (Colors) </li></ul><ul><li>10.10.3 การย่อยเนื้อหา (Chunking) </li></ul>51
  52. 52. เทคนิคในการออกแบบ ( ต่อ ) <ul><li>10.10.4 กราฟิก (Graphic) </li></ul><ul><li>10.10.5 ลำดับเลข (Numbering) </li></ul><ul><li>10.10.6 ตาราง (Table) </li></ul><ul><li>10.10.7 รูปแบบการมอง (Viewing Pattern) </li></ul><ul><li>10.10.8 จำนวนส่วนประกอบ (Number of Elements) </li></ul><ul><li>10.10.9 เสียง (Audio) </li></ul><ul><li>10.10.10 วีดิทัศน์ (Video) </li></ul>52
  53. 53. 11. ฮาร์ดแวร์และซอฟต์แวร์ที่ใช้ในการสร้างบทเรียน <ul><li>ในการสร้างบทเรียนอิเล็กทรอนิกส์ ต้องมีคอมพิวเตอร์ที่มีประสิทธิภาพสูง </li></ul><ul><li>เพื่อความสะดวกในการสร้างบทเรียนที่ประกอบด้วยข้อความตัวอักษร ภาพ </li></ul><ul><li>ภาพเคลื่อนไหว และงานกราฟิกอื่น ๆ นอกจากนี้ยังต้องมีการเชื่อมต่อ </li></ul><ul><li>เครือข่ายอินเทอร์เน็ต ซึ่งจะทำให้สามารถตรวจสอบผลการทางานของ </li></ul><ul><li>บทเรียนที่สร้างขึ้น เพราะบทเรียนที่สร้างขึ้นอาจทางานได้ดีเมื่อข้อมูลยังอยู่ </li></ul><ul><li>ในเครื่องคอมพิวเตอร์ แต่เมื่อนาข้อมูลขึ้นสู่เครือข่ายอินเทอร์เน็ต (upload) </li></ul><ul><li>อาจมีปัญหาก็ได้ จึงต้องมีการตรวจสอบตลอดเวลา ดังนั้นจึงต้องมี </li></ul><ul><li>ฮาร์ดแวร์และซอฟต์แวร์พื้นฐานที่จาเป็นดังนี้ </li></ul>53
  54. 54. 11.1 ฮาร์ดแวร์ (Hardware) <ul><li>11.1.1 ระบบบริหารจัดการ ( Course Management System : CMS ) </li></ul><ul><li>1 ) เซอร์ฟเวอร์ ( Server ) </li></ul><ul><li>2) คอมพิวเตอร์ปฏิบัติงาน </li></ul><ul><li>11.1.2 คอมพิวเตอร์เครือข่าย ( client network ) </li></ul><ul><li>1) คอมพิวเตอร์สาหรับการเรียนการสอน </li></ul><ul><li>2) คอมพิวเตอร์สาหรับการสืบค้นข้อมูลนอกเวลาเรียน </li></ul><ul><li>3) คอมพิวเตอร์ส่วนบุคคลที่ใช้ตามบ้านเรือน ( Home used ) และศูนย์บริการต่าง ๆ สาหรับการสืบค้นข้อมูลนอกเวลาเรียน </li></ul>54
  55. 55. 11.2 ซอฟต์แวร์ (Software) <ul><li>ในการสร้างบทเรียนบนเครือข่ายที่ผู้วิจัยได้สร้างขึ้นนี้ ได้ใช้ซอฟต์แวร์ </li></ul><ul><li>หลายชนิด ซึ่งตอบสนองานแต่ละประเภท ดังนี้ </li></ul><ul><li>11.2.1 ซอฟต์แวร์สาหรับสร้างเว็บเพจ เช่น FrontPage, Namo </li></ul><ul><li>WebEditor, Macromedia Dreamweaver เป็นต้น </li></ul><ul><li>11.2.2 ซอฟต์แวร์สร้างงานกราฟิก เช่น Adobe Photoshop, Adobe </li></ul><ul><li>Illustrator, Image Ready , Macromedia Flash, ChemDraw เป็นต้น </li></ul><ul><li>11.2.3 ซอฟต์แวร์สร้างฐานข้อมูล เช่น Microsoft Access </li></ul><ul><li>11.2.4 ซอฟต์แวร์สนับสนุนอื่น ๆ เช่น Microsoft Word, Excel, Windows </li></ul><ul><li>movie maker เป็นต้น </li></ul>55
  56. 56. ตอนที่ 2 ทฤษฎีการเรียนรู้ของมนุษย์ 1. ทฤษฎีพฤติกรรมนิยม 2. ทฤษฎีปัญญานิยม 3. ทฤษฎีโครงสร้างความรู้ 4. ทฤษฎีความยืดหยุ่นทางปัญญา 56
  57. 57. สาขาเทคโนโลยีและสื่อสารการศึกษา มหาวิทยาลัยมหาสารคาม Thank You ! 57
  58. 58. แบบฝึกหัดท้ายบท <ul><li>1. จงอธิบายความหมายของการเรียนการสอนผ่านเว็บมาพอเข้าใจ </li></ul><ul><li>2. จงบอกลักษณะสำคัญของ e-Learning ที่ดี ควรจะประกอบด้วย </li></ul><ul><li>ลักษณะสำคัญ อะไรบ้าง </li></ul><ul><li>3. เมื่อนิสิตเรียนเรื่อง e-Learning แล้ว นิสิตได้อะไรบ้างจงอธิบาย </li></ul>

×