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

การออกแบบเนื้อหา Mooc

Embed Size (px)

Citation preview

Page 1: การออกแบบเนื้อหา Mooc

รองศาสตราจารย ดร.ปรชญนนท นลสข

สาขาเทคโนโลยสารสนเทศและการสอสารเพอการศกษา คณะครศาสตรอตสาหกรรม

มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครหนอ

การออกแบบเนอหา MOOC เพอการเรยนการสอน

Page 2: การออกแบบเนื้อหา Mooc

ประเดนสนทนา

การออกแบบเนอหา

ขนตอนการวางแผนและออกแบบ

การออกแบบเนอหาดจทล

องคประกอบเนอหาของ MOOC

Page 3: การออกแบบเนื้อหา Mooc

การออกแบบเนอหา MOOCs X&C

Page 4: การออกแบบเนื้อหา Mooc

Digital Content

[email protected]

www.prachyanun.com

Page 5: การออกแบบเนื้อหา Mooc

Digital Content • ADDIE

• Digital Content / Learning Object

• Brainstorming/Concept Mapping

• Content Network

• Flowchart / Course Flowchart

• Module Presentation

• GUI / HCI

• Script / Storyboard

Page 6: การออกแบบเนื้อหา Mooc

Learning Object : LO

[email protected]

www.prachyanun.com

Page 7: การออกแบบเนื้อหา Mooc

Learning Object Metadata : LOM

[email protected]

Page 8: การออกแบบเนื้อหา Mooc

Content Design

[email protected]

Page 9: การออกแบบเนื้อหา Mooc

ขนตอนการวางแผนและออกแบบการเรยนร

• ขนตอนการระดมสมอง

• ขนตอนการเขยนโครงขายเนอหา

• ขนตอนการเขยนโฟลชารต

• ขนตอนการเขยนแผนการน าเสนอ

• ขนตอนการเขยนสครปต

• ขนตอนการเขยนสตอรบอรด

• การสรางเนอหาการเรยนร

• การประเมนผลบทเรยน

Page 10: การออกแบบเนื้อหา Mooc

Brainstorming

Page 11: การออกแบบเนื้อหา Mooc

Concept Mapping /Mind Map

[email protected]

www.prachyanun.com

Page 12: การออกแบบเนื้อหา Mooc

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

• ตวอกษรและขนาดตวอกษร คอ การก าหนดตวอกษรจะตองเปนตวอกษรมาตรฐานทใชงานทวไปในมาตรฐานของเครองคอมพวเตอร ถาใชแบบตวอกษรพเศษจะเกดปญหาเมอเครองบางเครองไมมตวอกษรพเศษนน จะท าใหการแสดงผลตวอกษรกลายเปนตวประหลาดหรอเปนรปเหลยม ขณะเดยวกนกตองค านงถงแบบตวอกษรเชน ตวหนา ตวเอน ฯลฯ

Page 13: การออกแบบเนื้อหา Mooc

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 ,

[email protected]

Page 14: การออกแบบเนื้อหา Mooc

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 Complex , Easy to Difficult , Adaptive

Page 15: การออกแบบเนื้อหา Mooc

Human Computer Interaction : HCI

• ปฏสมพนธโตตอบกบผใชงาน (Interaction) เชน Skip , Beep , Prompt, Confirm , Alert ,

• การสะทอนกลบใหผใช (Feedback) ไดแก Reward .. , Comments , Score , Energy, Power ,

• แรงจงใจในบทเรยน ( Motivation) ไดแก Graphics, Animation , Sound Effect ,

• ขอบเขตการควบคม (Locus of Control) ไดแก Program Control / Learner Control

• การสอสารในบทเรยน (Communication) เชน Sound, Effects, Hello ! , Good bye , Congratulation , ....เปนตน

Page 16: การออกแบบเนื้อหา Mooc

Script

[email protected]

Page 17: การออกแบบเนื้อหา Mooc

Storyboard

Page 18: การออกแบบเนื้อหา Mooc

Storyboard Scenes

[email protected]

Page 19: การออกแบบเนื้อหา Mooc

องคประกอบเนอหา MOOC

• Jasnani (2013)

• Franka Grünewald and others (2013)

• Grover and others, 2013

• Guàrdia , Maina, & Sangrà, (2013)

• Scagnoli (2012)

• Lackner, Kopp & Ebner (2014)

Ja

sna

ni

(20

13)

Fra

nk

a G

rün

ewa

ld

an

d o

ther

s (2

01

3)

Gro

ver

an

d o

ther

s,

20

13

Gu

àrd

ia ,

Ma

ina

, &

Sa

ng

rà,

2013

)

Sca

gn

oli

(2

012)

La

ckn

er,

Ko

pp

&

Eb

ner

(20

14)

Syllabus

Learning

groups

Readings

material

Video

lectures

Discussion

forums

Quizzes

Assignments

Practical

tasks

Projects

Certification

Page 20: การออกแบบเนื้อหา Mooc

หนาจอภาพ

www.prachyanun.com

course syllabus group management

readings material video lectures

discussions forums

quizzes assignments

practical tasks projects

Page 21: การออกแบบเนื้อหา Mooc

The first element : course syllabus

Page 22: การออกแบบเนื้อหา Mooc

The second element : Group Management

Page 23: การออกแบบเนื้อหา Mooc

The third element : lecture notes www.prachyanun.com

Page 24: การออกแบบเนื้อหา Mooc

The fourth element : video lectures

Page 25: การออกแบบเนื้อหา Mooc

The fifth element : discussions forums

Page 26: การออกแบบเนื้อหา Mooc

The sixth element : exercises or quizzes

www.prachyanun.com

Page 27: การออกแบบเนื้อหา Mooc

The seventh element : assessment www.prachyanun.com

Page 28: การออกแบบเนื้อหา Mooc

The eighth element : practical tasks

Page 29: การออกแบบเนื้อหา Mooc

The ninth element : Project

Page 30: การออกแบบเนื้อหา Mooc

The final element : certificates www.prachyanun.com

Page 31: การออกแบบเนื้อหา Mooc

Conclusion

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

Page 32: การออกแบบเนื้อหา Mooc

ค าถาม

Page 33: การออกแบบเนื้อหา Mooc

วทยากร

รองศาสตราจารย ดร.ปรชญนนท นลสข ภาควชาครศาสตรเทคโนโลย คณะครศาสตรอตสาหกรรม มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ [email protected] http://www.prachyanun.com 081-7037515 หวหนาศนยวจยเทคโนโลยทางอาชวศกษา ส านกวจยวทยาศาสตรและเทคโนโลย มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ