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

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

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

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

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

ประเดนสนทนา

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

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

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

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

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

Digital Content

prachyanun@hotmail.com

www.prachyanun.com

Digital Content • ADDIE

• Digital Content / Learning Object

• Brainstorming/Concept Mapping

• Content Network

• Flowchart / Course Flowchart

• Module Presentation

• GUI / HCI

• Script / Storyboard

Learning Object : LO

prachyanun@hotmail.com

www.prachyanun.com

Learning Object Metadata : LOM

prachyanun@hotmail.com

Content Design

prachyanun@hotmail.com

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

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

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

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

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

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

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

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

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

Brainstorming

Concept Mapping /Mind Map

prachyanun@hotmail.com

www.prachyanun.com

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

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

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@hotmail.com

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

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 , ....เปนตน

Script

prachyanun@hotmail.com

Storyboard

Storyboard Scenes

prachyanun@hotmail.com

องคประกอบเนอหา 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

หนาจอภาพ

www.prachyanun.com

course syllabus group management

readings material video lectures

discussions forums

quizzes assignments

practical tasks projects

The first element : course syllabus

The second element : Group Management

The third element : lecture notes www.prachyanun.com

The fourth element : video lectures

The fifth element : discussions forums

The sixth element : exercises or quizzes

www.prachyanun.com

The seventh element : assessment www.prachyanun.com

The eighth element : practical tasks

The ninth element : Project

The final element : certificates www.prachyanun.com

Conclusion

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

ค าถาม

วทยากร

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