โครงการสัมมนาทางวิชาการ เรื่อง การแลกเปลี่ยนเรียนรู้ผ่าน Massive Open Online Course (MOOC) ตอน การออกแบบเนื้อหา MOOC เพื่อการเรียนการสอน วันที่ 19 – 20 พฤษภาคม 2558 ห้อง 5209 อาคารสัมมนา 1 ชั้น 2 มหาวิทยาลัยสุโขทัยธรรมาธิราช วิทยากรเสวนา ผศ.ดร.อนุชัย ธีระเรืองไชยศรี รอง ผอ. Thaicyber University รศ.ดร.ปรัชญนันท์ นิลสุข มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ อ.ดร.ทัดทอง พราหมณี ผู้ช่วยอธิการบดี มหาวิทยาลัยราชภัฏเพชรบุรี อ.ดร.ฐิติมา ศรีวัฒนกุล ผู้ดำเนินการเสวนา อาจารย์ประจำสาขาวิชาศิลปศาสตร์ แขนงวิชาสารสนเทศศาสตร์ มหาวิทยาลัยสุโขทัยธรรมาธิราช รศ.ดร.น้ำทิพย์ วิภาวิน ผู้ประสานงาน

1. รองศาสตราจารย์ ดร.ปรัชญนันท์ นิลสุข
สาขาเทคโนโลยีสารสนเทศและการสื่อสารเพื่อการศึกษา
คณะครุศาสตร์อุตสาหกรรม
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครหนือ
การออกแบบเนื้อหา MOOC เพื่อการเรียนการสอน

2. ประเด็นสนทนา
การออกแบบเนื้อหา
ขั้นตอนการวางแผนและออกแบบ
การออกแบบเนื้อหาดิจิทัล
องค์ประกอบเนื้อหาของ MOOC

3. การออกแบบเนื้อหา MOOCs X&C

4. Digital Content
prachyanun@hotm
ail.com
www.prachyanun.c

5. Digital Content
• ADDIE
• Digital Content / Learning Object
• Brainstorming/Concept Mapping
• Content Network
• Flowchart / Course Flowchart
• Module Presentation
• GUI / HCI
• Script / Storyboard

6. Learning Object : LO
prachyanun@hotm
ail.com
www.prachyanun.c

7. Learning Object Metadata : LOM
prachyanun@hotm
ail.com

8. Content Design
prachyanun@hotm
ail.com

9. ขั้นตอนการวางแผนและออกแบบการเรียนรู้
• ขั้นตอนการระดมสมอง
• ขั้นตอนการเขียนโครงข่ายเนื้อหา
• ขั้นตอนการเขียนโฟล์ชาร์ต
• ขั้นตอนการเขียนแผนการนาเสนอ
• ขั้นตอนการเขียนสคริปต์
• ขั้นตอนการเขียนสตอรี่บอร์ด
• การสร้างเนื้อหาการเรียนรู้
• การประเมินผลบทเรียน

10. Brainstorming

11. Concept Mapping /Mind Map
prachyanun@hotm
ail.com
www.prachyanun.c

12. Graphic User Interface : GUI
• พื้นหลังและพื้นหน้า (Background /Foreground)
คือ การนากราฟิกมาใช้ทาเป็นพื้นหลังของหน้าจอภาพ และกราฟิกที่อยู่ด้านหน้าต้องมี
ความสัมพันธ์และกลมกลืนกัน
• การกาหนดสีในการออกแบบกราฟิก คือ การใช้สีสาหรับจอภาพคอมพิวเตอร์
จะต้องเป็นการกาหนดสีแบบ RGB (Red Green Blue) เนื่องจากเป็นแม่สีของ
แสงสาหรับจอภาพ ถ้าจะออกแบบกราฟิกเพื่องานพิมพ์ก็จะต้องใช้แบบ 4 สี คือ CMYK
- Color >> 256 , 8 , 16 , 32 , RGB , CMYK
Red Green Blue : RGB
Cyan , Magenta , Yellow , blacK : CMYK
• ตัวอักษรและขนาดตัวอักษร คือ การกาหนดตัวอักษรจะต้องเป็นตัวอักษรมาตรฐานที่
ใช้งานทั่วไปในมาตรฐานของเครื่องคอมพิวเตอร์ ถ้าใช้แบบตัวอักษรพิเศษจะเกิดปัญหาเมื่อ
เครื่องบางเครื่องไม่มีตัวอักษรพิเศษนั้น จะทาให้การแสดงผลตัวอักษรกลายเป็นตัวประหลาด
หรือเป็นรูปเหลี่ยม ขณะเดียวกันก็ต้องคานึงถึงแบบตัวอักษรเช่น ตัวหนา ตัวเอน ฯลฯ

13. Graphic User Interface : GUI
• ภาพนิ่งสาหรับบทเรียนคอมพิวเตอร์ ได้แก่ รูปภาพเฉพาะที่ใช้กับคอมพิวเตอร์ ประเภท
นามสกุล JPG, GIF , PNG , BMP , TIF
• ภาพเคลื่อนไหว คือ วีดิโอหรือแอนิเมชั่น มีไฟล์ประเภท AVI, Mpage , Wav, Wmv ,
Mp4
• ไอคอนคือ ปุ่มทางานต่าง ๆ ได้แก่ Home , Next , Back (Previous) , FF , RF , En
d. ,
• เมนูหรือปุ่มต่าง ๆ เช่น Help , Drop down , Radio , Button , Checklist ,
...
• เส้นหรือรูปชิ้นงานต่าง ๆ ได้แก่ Line / Cure / 3D / Graphic >> Sharp
• การกาหนดแบบหน้าจอ หรือ Lay out / Size >> Center, Point , View , 800 * 6
00, 1024 * 768 , 1280 * 768, pixels
• สัญลักษณ์พิเศษต่าง ๆ หรือ Symbolic เช่น ! , ? , หรือ การสื่อความหมายในเชิงสัญลักษณ์ต่าง ๆ เช่น
^_^ , T_T ,
prachyanun@hotm
ail.com

14. Human Computer Interaction : HCI
• การดาเนินตามคาสั่ง (Order)
• การเรียงลาดับขั้นตอน (Sequence)
• - Start >> Programs >> Microsoft Office >> Word2007
• - Auto run >> Title (Logo) >> Menu >> ... Game >> End
• การออกแบบเส้นทาง เช่น Linear / Brach / Hybrid
• การรับรู้ของผู้ใช้งานเมื่อสื่อความหมาย Perception >> Image (Picture/Vid
eo) / Text / Sound (Effect, Voice..)
• การกาหนดช่วงเวลาที่เหมาะสมในการแสดงผล เช่น Time >> Speed , pac
ing , การเรียงลาดับความยากง่ายของเนื้อหา เช่น Level >> Simple to Co
mplex , Easy to Difficult , Adaptive

15. Human Computer Interaction : HCI
• ปฏิสัมพันธ์โต้ตอบกับผู้ใช้งาน (Interaction) เช่น Skip , Beep , Prompt,
Confirm , Alert ,
• การสะท้อนกลับให้ผู้ใช้ (Feedback) ได้แก่ Reward .. , Comments , Scor
e , Energy, Power ,
• แรงจูงใจในบทเรียน ( Motivation) ได้แก่ Graphics, Animation , Sound
Effect ,
• ขอบเขตการควบคุม (Locus of Control) ได้แก่ Program Control / Learn
er Control
• การสื่อสารในบทเรียน (Communication) เช่น Sound, Effects, Hello ! ,
Good bye , Congratulation , ....เป็นต้น

16. Script
prachyanun@hotm
ail.com

17. Storyboard

18. Storyboard Scenes
prachyanun@hotm
ail.com

19. องค์ประกอบเนื้อหา MOOC
• Jasnani (2013)
• Franka Grünewald and others (201
3)
• Grover and others, 2013
• Guàrdia , Maina, & Sangrà, (2013)
• Scagnoli (2012)
• Lackner, Kopp & Ebner (2014)
Jasnani(2013)
FrankaGrünewald
andothers(2013)
Groverandothers,
2013
Guàrdia,Maina,&
Sangrà,2013)
Scagnoli(2012)
Lackner,Kopp&
Ebner(2014)
Syllabus 
Learning
groups
 
Readings
material
    
Video
lectures
     
Discussion
forums
   
Quizzes    
Assignments    
Practical
tasks
 
Projects  
Certification  

20. หน้าจอภาพ
www.prachyanun.c
om
course syllabus
group management
readings material
video lectures
discussions forums
quizzes
assignments
practical tasks projects

21. The first element : course syllabus

22. The second element : Group Management

23. The third element : lecture notes
www.prachyanun.c
om

24. The fourth element : video lectures

25. The fifth element : discussions forums

26. The sixth element : exercises or quizzes
www.prachyanun.c
om

27. The seventh element : assessment
www.prachyanun.c
om

28. The eighth element : practical tasks

29. The ninth element : Project

30. The final element : certificates
www.prachyanun.c
om

31. Conclusion
• MOOCs elements include course
syllabus, learning group management
, readings material , video lectures,
discussions forums , quizzes,
assignments, practical tasks, projects,
certification

32. คาถาม

33. วิทยากร
รองศาสตราจารย์ ดร.ปรัชญนันท์ นิลสุข
ภาควิชาครุศาสตร์เทคโนโลยี คณะครุศาสตร์อุตสาหกรรม
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ
prachyanun@hotmail.com
http://www.prachyanun.com
081-7037515
หัวหน้าศูนย์วิจัยเทคโนโลยีทางอาชีวศึกษา
สานักวิจัยวิทยาศาสตร์และเทคโนโลยี
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ