Instructional Design for e-Learning

1. Instructional Design for e-Learning บุญเลิศ อรุณพิบูลย์ NECTEC [email_address] http://elearning.nectec.or.th

4. Online Learning Online Learning is the marriage of education and technology.

5. Online Learning

9. WBI/WBT/WBL ครูผู้สอน สร้างหลักสูตร / เนื้อหา FTP นักเรียน ผู้เรียน ช่องทางการติดต่อสื่อสาร รูปแบบต่างๆ Web & Content Server

12. e-Learning

13. e-Learning System Framework Learning Management System Learning Content Management System Learning Tools

17. Progress Report

18. Student Management Class Status  Study  Pass  Drop

19. Student History

31. http://www.school.net.th/library/create-web/

33. HTML Editor

34. HTML Editor (Cont.)

35. Content Construction

36. Sample Content Page

37. Adobe Acrobat Style

38. Text Document Style

39. Flash Animation Style

40. Test Page

41. File Management

42. Import / Export Content

44. LMS/LCMS Yes No Creates test questions Yes Yes Tracks results Yes Yes Manages system Learning content Learner performance Provides primary management of Content developers; learners who need personalized content All learners; organization Who benefits? LCMS LMS

46. Web board

47. Chat room

48. Private Messages

49. ประเภทและการใช้งานการสื่อสาร ใช้โปรแกรมร่วมกันด้วยซอฟต์แวร์ช่วย เช่น NetMeeting หรือการถ่ายโอนไฟล์ การใช้ข้อมูลร่วมกันทั้งโปรแกรม และไฟล์ข้อมูล Share Data ใช้สนทนา ระหว่างผู้เรียนและอาจารย์ในห้องเรียนหรือชั่วโมงเรียนนั้นๆ เสมือนว่ากำลังคุยกันอยู่ในห้องเรียนจริงๆ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) โดยการสนทนาแบบ Real Time มีทั้ง Text Chat และ Voice Chat Chat ใช้กำหนดประเด็นหรือกระทู้ ตามที่อาจารย์กำหนด หรือตามแต่นักเรียนจะกำหนด เพื่อช่วยกันอภิปรายตอบประเด็นหรือกระทู้นั้น ทั้งอาจารย์และผู้เรียน ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) Webboard ใช้ติดต่อสื่อสารระหว่างอาจารย์ หรือเพื่อนร่วมชั้นเรียนด้วยกัน ใช้ส่งการบ้านหรืองานที่ได้รับมอบหมาย ใช้ติดต่อสื่อสารระหว่างผู้ที่เป็นสมาชิกเท่านั้น ( Two Way ) E-mail ลักษณะการใช้งาน ความหมาย ประเภท

50. ประเภทและการใช้งานการสื่อสาร ใช้บรรยายให้ผู้เรียนกับที่อยู่หน้าเครื่อง เสมือนว่ากำลังนั่งเรียนอยู่ในห้องเรียนจริงๆ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) แบบ Real Time โดยที่ผู้เรียนและอาจารย์ สามารถเห็นหน้ากันได้ โดยผ่านทางกล้องโทรทัศน์ที่ติดอยู่กับเครื่องคอมพิวเตอร์ทั้งสองฝ่าย Conference บันทึกข้อมูลการเรียนและรายละเอียดที่จำเป็นต่างๆ ใช้บันทึกข้อมูลการเรียน Memo/Note ใช้ส่งงานตามที่อาจารย์กำหนด เช่น ให้เขียนรายงาน โดยที่อาจารย์สามารถเปิดดู Electronic Home Work ของนักเรียนและเขียนบันทึกเพื่อตรวจงานและให้คะแนนได้ แต่นักเรียนด้วยกันจะเปิดดูไม่ได้ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ เป็นเสมือนสมุดประจำตัวนักเรียน โดยที่นักเรียนไม่ต้องถือสมุดการบ้านจริงๆ เป็นสมุดการบ้านที่ติดตัวตลอดเวลา Electronic Home Work ลักษณะการใช้งาน ความหมาย ประเภท

56. Install AppServ #1 Double Click

57. Install AppServ #2 เลือกไดร์ฟ / โฟลเดอร์ ถือว่าเป็น Root Directory

58. Install AppServ #3 Server Name : กรณีที่เป็นเครื่องทดสอบ ใช้ localhost แต่เครื่อง Server จริง ให้ระบุ IP Address ของ Server Administrator’s Email Address ระบุอีเมล์ของผู้ดูแลระบบ

59. Install AppServ #4 ระบุ User Name, Password ขอบผู้ดูแลระบบ Server และ ฐานข้อมูล MySQL การเข้ารหัสอักขระ กรณีภาษาไทยให้เลือกเป็น TIS620

67. Install AppServ #5

68. Start/Reset/Stop AppServ

70. ติดตั้ง LearnSquare ห้ามเปลี่ยนแปลงแก้ไข Database Name รายการสำคัญ แต่ละเว็บ ห้ามใช้ชื่อเดียวกัน

71. รายการสำคัญ ที่ต้องกำหนด

82. มาตรฐานเกี่ยวกับ e-Learning

86. API Adapter SCORM API Delivery Service Tracking Service Sequencing Service Content Management Service Learner Profiles Service Testing/ Assessment Service Course Administration Service Local Content Repository Remote Content Repositories SCORM Content Packages Browser (Presentation) Generalized Learning Management System Model Selection Launch SCORM Tracking Data SCORM Content (SCOs & Assets)

90. ISD = I nstructional S ystem D evelopment Forecasting Planning Executing Gathering Reporting Follow-up Analysis Development Implementation Evaluation Design

108. วัตถุประสงค์การเรียนรู้

110. วัตถุประสงค์ กิจกรรมการเรียนรู้ รวบยอดความคิด สร้างความรู้ ตอบโต้ เว็บไซต์นำเสนอความรู้ เว็บไซต์กิจกรรม / ทดสอบ / ประเมิน เว็บไซต์ Interactive & Communication

112. บทเรียนสำเร็จรูป อ่านวัตถุประสงค์ ทำกิจกรรม บททบทวน ข้อสอบ เนื้อหาใหม่ เนื้อหาเก่า ขั้นนำ ขั้นสอน ขั้นสอบ

116. โครงร่าง เนื้อหาซับซ้อน โครงสร้างเว็บซับซ้อน

121. ลักษณะของหน้าเว็บที่เหมาะสม Web Area 780 pixel Screen Area 600 pixel web Area

122. Template & Layout Design TITLE Menu History Duty Project

123. Template & Layout Design TITLE History Duty Project

124. Template & Layout Design TITLE History Duty Project

125. Template & Layout Design TITLE History Duty Project

134. Styles of Word

135. Styles of Word

136. Styles of Word

137. Styles of Word

139. ทำความรู้จักกับเอกสารเว็บ Home Page

148. Server & Client WindowsXP IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload

150. ภาษาไทย กับการพัฒนาเว็บเพจ

153. www.truehits.net

160. กำหนดค่า Config # 2 คลิก Edit.. ปรับค่าฟอนต์ ภาษาไทยที่ ใช้ในเอกสาร

161. Security Document เลือก Reconfirm Security for each job แล้วคลิกปุ่ม Edit เพื่อปรับแต่งค่าที่ต้องการ

163. ปัญหาการอ้างอิง Path

166. มาตรฐานรูปแบบการนำเสนอภาพ เปลี่ยนตามข้อกำหนด โดยแยกเป็นโฟลเดอร์เฉพาะ ตามจริง File Name preview web database present archive dtp original Folder ActionScript ของโปรแกรม Adobe PhotoShop 7.0 Digital Camera, Scanner From  100  100 pixels  300  250 pixels  300  250 pixels Up to 1024  768 pixels Up to 1024  768 pixels Up to 1840  1232 pixels Up to 1840  1232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution GIF JPG PNG GIF JPG PNG TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Preview Website Database Presentation ภาพสำหรับ Digital Archive ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ

167. มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels Size 72 dpi 72 dpi Resolution PNG PNG / JPEG / GIF / TIF Format Preview Website

170. Bit Depth 256 colors 16 colors 2 colors 1-bit 4 colors 2-bit 8 colors 3-bit 16 colors 4-bit 32 colors 5-bit 64 colors 6-bit 128 colors 7-bit 256 colors 8-bit 32.8 thousand colors 15-bit 65.5 thousand colors 16-bit 16.7 million colors 24-bit 16.7 million colors + 8 bit grayscale mask 32-bit

171. Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k

172. Transparent GIFs

173. Animation GIF

175. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality

178. Pixel - Your eye perceives Continuity dpi = dot per inch

180. GIF / JPEG

181. GIF or JPEG?

182. เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

185. การทำงานกับกราฟิกไฟล์สำหรับเว็บ สำหรับภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป และกำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต

197. The Watermark Embedding Process

198. The Watermark Detection Process

201. Concept of Illustration Time Axis Space Axis

203. Audience Small Group Interactive Group Specific Group Large Group Focus Audience Content Content & Speaker Speaker Effect Full Full Simple Text/BG Color

205. ตัวอย่างการปรับแต่ง #1 Design/Develop Assemble Deploy Import Deliver/Track Report

206. Content Lifecycle Design/Develop Deploy Import Deliver/Track Report Assemble

207. Content Lifecycle Design/Develop Deploy Import Deliver/Track Report Assemble

210. e-Society สังคมแห่งภูมิปัญญา และการเรียนรู้ e-Education e-Govenment e-Industry e-Commerce Infrastructure HRD

215. ข้อความ พิมพ์ด้วย NotePad Convert

226. Presentation เลือกเฟรม 1 แล้วใส่คำสั่ง Stop() สร้างปุ่มถอยกลับ แล้วใส่คำสั่ง on ( press ) { prevFrame () ; } สร้างปุ่มเดินหน้า แล้วใส่คำสั่ง on ( press ) { nextFrame () ; }

228. โหลดข้อมูลจาก Text File message1 = ข้อความที่ 1& message2 = ข้อความที่ 2 สร้าง Text Box แบบ Dynamic 2 ชิ้น กำหนดค่า Var เป็น message1 และ message2 ตามลำดับ สร้างเลเยอร์ใหม่ เฟรม 1 กำหนด Action เป็น loadVariablesNum (" 2flash . txt " , "") ; 2flash.txt

230. SCO Flash Template Animation Panel Panel Panel Animation Animation ・・・・・・・・・・・・ Example) approximately material of page 3 - > 16 scenes: 6 minute narration Animation