IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 1 รายวิชา คอมพิวเตอร์เพื่อการ เรียนรู้ หน่วยที่ 5 “ แนวคิดและหลักการ ออกแบบ บทเรียนช่วยสอนบนเว็บ ”

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข สื่อในระบบการศึกษา ทางไกล 5.2 Web - based Instruction (WBI)

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข สื่อในระบบการศึกษา ทางไกล Same Time / Same Place Same Time / Different Place Different Time / Same Place Different Time / Different Place (The 4-Square Map of Groupware Option-Johansen et al.)

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข ความรู้เบื้องต้น เกี่ยวกับ WBI ปฏิสัมพันธ์ใน WBI หลักและเทคนิคการ ออกแบบ WBI 5.2 Web-based Instruction (WBI)

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข ความรู้เบื้องต้น เกี่ยวกับ WBI 1) ความหมายของ WBI 2) ลักษณะการใช้ Web เพื่อการเรียนการสอน ในปัจจุบัน 3) ลักษณะสำคัญของ WBI

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 6 The instruction delivered via the Web to a remote audience is called web-based instruction (Relan & Gillani, 1997). ก. ความหมายของ WBI

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 7 การสอนบนเว็บเป็น โปรแกรมการเรียนการสอน ในรูปของสื่อหลายมิติ (hypermedia) ที่นำ คุณลักษณะและทรัพยากร ต่าง ๆ ที่มีอยู่ใน Web มาใช้ ประโยชน์ในการจัด สภาพแวดล้อมที่สนับสนุนให้ เกิดการเรียนรู้ (Khan,1997)

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 8 ข. ลักษณะการใช้ Web เพื่อ การเรียนการสอนในปัจจุบัน 1. The Web as Source of Information 2. The Web as Electronic Book 3. The Web as Teacher 4. The Web as a Communication Medium between Teacher and Students

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 9 ค. ลักษณะสำคัญ ของ WBI - Simply developing a Website with links to other webpages does not constitute instruction (Ritchie & Hoffman, 1997).

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 10 3) ลักษณะสำคัญ ของ WBI ต่อ - What is unique about WBI is not its rich mix of media features such as text, graphics, sound, animation, and video, nor its linkages to information resources around the world, but the pedagogical dimensions that WBI can be designed to deliver (Reeves, 1997).

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 11 คุณลักษณะเฉพาะของ บทเรียนช่วยสอนบนเว็ป (Web- based Instruction-WBI) มิได้ อยู่ที่การนำเสนอคุณลักษณะ ต่างๆ ของสื่อเป็นจำนวนมาก เช่น ข้อความ ภาพกราฟิก เสียง ภาพเคลื่อนไหวและภาพทัศน์ หรือแม้แต่การเชื่อมโยงไปยัง แหล่งสารสนเทศต่างๆ ทั่วโลก หากแต่เป็นมิติทางการสอนที่ บทเรียนช่วยสอนบนเว็ปได้รับการ ออกแบบให้สามารถส่งไปยัง ผู้เรียนได้

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข ปฏิสัมพันธ์ใน WBI 1) Instructional Interaction - ปฏิสัมพันธ์ระหว่าง ผู้เรียนกับบทเรียน 2) Social Interaction - ผู้สอนกับผู้เรียน ผู้เรียนกับผู้เรียน

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 13 WBI with Instruction- only Interaction Mode --A WBI that provides features for instructional interaction including hyperlinks, FAQs, exercises, and with instructor.

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 14 WBI with Social and Instructional Interaction Mode --A WBI that provides features for social interaction and instructional interaction including , distribution lists, chatgroups, bulletin boards, hyperlinks, FAQs, and exercises.

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข หลักและเทคนิคการ ออกแบบ WBI 1) Links 2) HCI

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 16 Links ความหมายของ Links Links คือช่องทางที่เชื่อมต่อข้อมูล ระหว่าง page, field ลักษณะของ Links 1. บอกทิศทาง (Directionality: one - way links, two-way links) 2. มีข้อความอธิบาย (Labeling: names, standard icons) 3. ขนาดเหมาะสม 4. ได้รับการจัดกลุ่ม (grouped together) 5. มองเห็นชัดเจน (Visibility)

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 17 ข้อแนะนำในการใช้ Links 1. ใช้ลูกศรซ้าย - ขวา หรือบน - ล่าง แสดงการเรียงลำดับของเนื้อหา 2. เมื่อใช้ลูกศรซ้าย - ขวา แสดงความ ต่อเนื่องของเนื้อหาเรื่อง เดียวกันแต่มีหลายหน้า ให้ลบลูกศร ซ้ายของหน้าแรก และ ลูกศรขวาหน้าสุดท้าย 3. หลีกเลี่ยงการ scrolling ในกรณีที่ เนื้อหาไม่จบในหนึ่งหน้า ให้ใช้ หลัก x of y strategy 4. ใช้แผนภาพแสดงให้ทราบว่าผู้เรียน กำลังอยู่ตรงเนื้อหาส่วนไหน

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 18 Human-Computer Interface (HCI) Design ความหมายของ HCI - The layer of the software that communicates directly to and interacts with users (Marra, 1996). องค์ประกอบสำคัญของ HCI - all messages to users; - interactions, flow, or navigation between screens or other various parts of the program; - interrelationship between messages within the program; and screen designs.

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 19 หลักพื้นฐานของ HCI 1. วิเคราะห์กลุ่มผู้เรียนเพื่อเป็น แนวทางในการพัฒนา HCI 2. พยายามทำให้ Interface มี ลักษณะเรียบง่ายโดยจำกัด ทางเลือกให้ผู้เรียน 3. ออกแบบ Interface ให้ส่งเสริม ผู้เรียนมีความกระตือรือล้น ที่จะทำแต่ละงานให้สำเร็จ 4. ออกแบบ Interface ให้มีระดับ ความยากง่ายสอดคล้องกับ ระดับการเรียนรู้ของผู้เรียน

IS คอมพิวเตอร์เพื่อการเรียนรู้ c อ. ดร. นฤมล รักษาสุข 20 กฎพื้นฐานการออกแบบหน้าจอ สำหรับ WBI - choose a style and stick to it - avoid too much text - only use graphics for a purpose - don ’ t have lots of hyperlinks scattered through the text - use meaningful headings and subheadings - complex graphics will take time to load so put a simple text explanation - avoiding using too many fonts (no more than two) - edit text thoroughly