การออกแบบเนื้อหาดิจิตอล

1. การออกแบบเนื้อ หา
LOGO
ดิจ ิต อล
(Digital Content Design)
รองศาสตราจารย์
ดร.ปรัช ญนัน ท์ นิล สุข
มหาวิท ยาลัย เทคโนโลยี
พระจอมเกล้า พระนครเหนือ
www.prachyanun.com prachyanun@hotmail.com

2. Contents
1 Brainstorming /Concept Mapping
2 Content Network / Learning Object Point
3 Flowchart / Module / Course Flowchart
4 Script / Storyboard
www.prachyanun.com prachyanun@hotmail.com

3. Digital Content
www.prachyanun.com prachyanun@hotmail.com

4. Learning Object : LO
www.prachyanun.com prachyanun@hotmail.com

5. Learning Object Metadata : LOM
www.prachyanun.com prachyanun@hotmail.com

6. Learning Object Design
www.prachyanun.com prachyanun@hotmail.com

7. ขั้น ตอนการวางแผนและออกแบบการ
เรีย นรู้เ ชิง วัต ถุ
 ขัน ตอนการระดมสมอง
้
 ขัน ตอนการเขีย นโครงข่า ยเนื้อ หา
้
 ขัน ตอนการเขีย นโฟล์ช าร์ต
้
 ขัน ตอนการเขีย นแผนการนำา
้
เสนอ
 ขัน ตอนการเขีย นสคริป ต์
้
 ขัน ตอนการเขีย นสตอรี่บ อร์ด
้
 การสร้า งการเรีย นรู้เ ชิง วัต ถุ
www.prachyanun.com prachyanun@hotmail.com

8. Brainstorming
www.prachyanun.com prachyanun@hotmail.com

9. Concept Mapping /Mind Map
www.prachyanun.com prachyanun@hotmail.com

10. การออกแบบระบบการเรีย นการสอน
 Instructional Design (ID)
 ADDIE
 การวิเ คราะห์ (Analysis)
 การออกแบบ (Design)
 การพัฒ นา (Development)
 การนำา ไปใช้ (Implement)
 การประเมิน ผล (Evaluation)

11. การวิเ คราะห์
เนื้อ หา(Analysis)
1. สร้า งแผนภูม ิร ะดมสมอง(Brain
Storm Chart)
2. สร้า งแผนภูม ิห ัว เรื่อ ง
สัม พัน ธ์(Concept Chart)
3. สร้า งแผนภูม ิโ ครงข่า ย

12. ขั้น ตอนการระดมสมอง
กำา หนดเรื่อ งที่จ ะสร้า ง
แผนภาพมโนทัศ น์
วิเ คราะห์ห ลัก สูต รและคำา
อธิบ ายรายวิช า
กำา หนดหัว ข้อ หลัก / หัว ข้อ
รอง
เขีย นแผนภาพมโนทัศ น์แ สดง
www.prachyanun.com prachyanun@hotmail.com

13. ain Storm Chart
LOGO
AL CU
U
Print
Microp CP Monit er
hone Mo U or Plott
Joysti
use er
ck
Input Unit ฮาร์ด แวร์ค อมพิว เตอร์ Output Unit Spea
Scann ker
er
Proje
Digital Keyb ctor
Camera oard Mem Tape
ory Secon
RA Main
dary DVD
M Memory
Memo ROM
RO Floppy ry CD
Disk Hard
M ROM
Tempor Perman Disk
ary ent
P.Wipara

14. การวิเ คราะห์
เนื้อ หา(Analysis)
จากแผนภูม ิร ะดมสมองนำา มา
จากแผนภูม ิร ะดมสมองนำา มา
วิเเคราะห์ค วามถูก ต้อ ง
วิ คราะห์ค วามถูก ต้อ ง
2. สร้า งแผนภูม ิห ัว เรื่อ ง
ตามทฤษฎีConcept Chart) ผ ล
ตามทฤษฎีห ลัก การและเหตุ ผ ล
สัม พัน ธ์( ห ลัก การและเหตุ
ความสัม พัน ธ์ก ัน อย่า ง
ความสัม พัน ธ์ก ัน อย่า ง
ละเอีย ดอีก ครั้ง อาจมีก ารตัด --
ละเอีย ดอีก ครั้ง อาจมีก ารตัด
เพิ่ม หัว เรื่อ งตามเหตุผ ล
เพิ่ม หัว เรื่อ งตามเหตุผ ล
และความเหมาะสม
และความเหมาะสม

15. Concept
LOGO
Chart AL CU
U
Print
Microp CP Monit er
hone Mo U or Plott
Joysti
use er
ck
Input Unit ฮาร์ด แวร์ค อมพิว เตอร์ Output Unit Spea
Scann ker
er
Proje
Digital Keyb ctor
Camera oard Mem Tape
ory Secon
RA Main
dary DVD
M Memory
Memo ROM
RO Floppy ry CD
Disk Hard
M ROM
Tempor Perman Disk
ary ent
P.Wipara

16. การวิเ คราะห์
เนื้อ หา(Analysis)
จากแผนภูม ิห ัว เรื่อ งสัม พัน ธ์ นำา
จากแผนภูม ิห ัว เรื่อ งสัม พัน ธ์ นำา
มาเขีย นเป็ม ิโโครงข่ย ย
มาเขีย นเป็น โครงข่า ย
3. สร้า งแผนภู น ครงข่า า
เนืเนืหาโดยคำา นึง ถึง ความก่อ น --
เนื้อ หาโดยคำา นึง ถึง ความก่อ น
้อ ้อ หา(Content Network
หลัง ความต่อ เนื่อ งหรือ
หลัง ความต่อ เนื่อ งหรือ
Chart)
ขนานกัน ตามหลัก การเทคนิค
ขนานกัน ตามหลัก การเทคนิค
โครงข่า ย
โครงข่า ย

17. Content
Network Chart AL
U 14
CP Moni
12 13
U CU tor 32
15
Keybo
ard 5 Print
Mous Main er 33
ฮาร์ด แ 6 Ra 20
e Mem
วร์ Input Scann 18 m Output Plott
7 ory 19 Ro 21
คอมพิว
1 2 Unit 3 4 er
Digital 11 Unit30 31 er 34 37
m
เตอร์ Camera8
Floppy 29
Mem
Joysti Disk 24 Spea
9 ory 16 17
ck Hard ker 35
Microph Secon Disk 25
one 10 dary CD Proje
Memo Rom 26
22 23
ctor 36
ry DVD
Rom 27
Ta
28
pe

18. การออกแบบบท
เรีย น(Design)
4. กำา หนดกลวิธ ีก ารนำา เสนอ
และวัต ถุป ระสงค์
เชิง พฤติก รรม(Strategic
Presentation Plan
And Behavior Objective)
5. สร้า งแผนภูม ิก ารนำา เสนอ

19. การออกแบบบท
จากแผนภูเรีย น(Design)
จากแผนภูม ิโ ครงข่า ยเนื้อ หานำา มา
ม ิโ ครงข่า ยเนื้อ หานำา มา
พิจ ารณากลุ่ม หัว เรื่อ งที่ส ามารถจัด
พิจ ารณากลุ่ม หัว เรื่อ งที่ส ามารถจัด
4. กำา หนดกลวิธ ก ารนำเ ป็น กรอบๆไว้
ี ได้ ตี า เสนอและ
ไว้ใ นหน่ว ยเดีย วกัน ได้ ตีเ ป็น กรอบๆไว้
ไว้ใ นหน่ว ยเดีย วกัน
วัต ถุป ระสงค์เ ชิง พฤติก รรม
กำา หนดเป็น หน่ว ยๆ และอัน ดับ ไว้
กำา หนดเป็น หน่ว ยๆ และอัน ดับ ไว้
แล้(Strategic บ ด้ว ยวัต ถุป ระสงค์เเชิง
Presentation Plan
ว เขีย นกำา กั บ ด้ว ยวัต ถุป ระสงค์ ชิง
แล้ว เขีย นกำา กั
And รรมจากนั้นObjective)ว ยมา
Behavior นำา กรอบหน่
พฤติก รรมจากนั้น นำา กรอบหน่ว ยมา
พฤติก
ลำา ดับ การนำา เสนอตามอัน ดับ และความ
ลำา ดับ การนำา เสนอตามอัน ดับ และความ
สัม พัน ธ์แ นวเดีย วกับ โครงข่า ย
สัม พัน ธ์แ นวเดีย วกับ โครงข่า ย
เนื้อ หาซึ่ง จะได้เเป็น แผนภูม ิบ ทเรีย น
เนื้อ หาซึ่ง จะได้ ป็น แผนภูม ิบ ทเรีย น

20. หน่ว ยเรีย นที่ 1 หน่ว ยรับ
ข้อ มูล (Input Unit)
ราย วัต ถุป ระสงค์เ ชิง
ละเอีย ด พฤติก รรม
1. หน่ว ยรับ ข้อ มูล 1.1 อธิบ ายความหมายของ
เนื้อ หา
(Input Unit)
1.1 อุป กรณ์
ทางด้า นอิน พุท ได้
Keyboard
1.2 บอกได้ว ่า อุป กรณ์ช นิด ใด
1.2 เป็น อุป กรณ์
Mouse ทางด้า นอิน พุท
1.3 1.3 เข้า ใจหน้า ที่ก ารทำา งาน
Scanner ของอุป กรณ์
1.4 อิน พุท แต่ล ะตัว
1.4 อธิบ ายข้อ แตกต่า งของ
Joystick
การนำา อุป กรณ์
1.5 อิน พุท ไปใช้ง านได้

21. หน่ว ยเรีย นที่ 2 หน่ว ยประมวลผลก
ลาง(Central Processing Unit)
ราย วัต ถุป ระสงค์เ ชิง
ละเอีย ด พฤติก รรม
2. หน่ว ยประมวล
เนื้อ หา
ผลกลาง (CPU)
2.1 ALU 2.1 อธิบ ายหลัก การทำา งาน
2.2 CU ของ CPU ได้
2.2 อธิบ ายหน้า ที่ห ลัก การ
ทำา งานของ ALUได้
2.3 อธิบ ายหน้า ที่ห ลัก การ
ทำา งานของ CUได้

22. หน่ว ยเรีย นที่ 3 หน่ว ยความ
จำา (Memory)
ราย วัต ถุป ระสงค์เ ชิง
ละเอีย ด พฤติก รรม
3. หน่ว ยความ
เนื้อ หา 3.1 อธิบ ายหน้า ที่ห ลัก การทำา งานขอ
จำา (Memory) หน่ว ยความจำา ได้
3.1 Main Memory สามารถอธิบ ายได้ว ่า อะไรเป็น
3.2
3.1.1 Ram หน่ว ย
3.1.2 Rom ความจำา หลัก อะไรเป็น หน่ว ย
3.2 Secondary ความจำา สำา รอง
Memory 3.3 อธิบ ายหลัก การทำา งานของ
3.2.1 Floppy ป กรณ์เ ก็บ
อุ
Disk ข้อ มูล แต่ล ะชนิด ได้
3.2.2 Hard 3.4 สามารถเลือ กใช้อ ุป กรณ์เ ก็บ
Disk ข้อ มูล แต่ล ะชนิด
3.2.3 CD ได้อ ย่า งถูก ต้อ ง

23. หน่ว ยเรีย นที่ 4 หน่ว ยแสดง
ผล(Output Unit)
ราย วัต ถุป ระสงค์เ ชิง
ละเอีย ด พฤติก รรม
4. หน่ว้อ หา
เนื ยแสดง
ผล(Output Unit) 4.1 อธิบ ายความหมายแลของ
4.1 Monitor อุป กรณ์ท างด้า น
4.2 Printer เอ้า ท์พ ุท ได้
4.2 บอกได้ว ่า อุป กรณ์ช นิด ใดเป็น
4.3 Plotter
อุป กรณ์แ สดงผล
4.4 Projector 4.3 เข้า ใจหน้า ที่ก ารทำา งานของ
4.5 Speaker อุป กรณ์เ อ้า ท์พ ุท แต่ล ะตัว
4.4 อธิบ ายข้อ แตกต่า งของ
การนำา อุป กรณ์เ อ้า ท์พ ุท
ไปใช้ง านได้

24. ลำา ดับ การนำา เสนอ
เนื้อ หาบทเรีย น
(Course Flow
Chart)
Module 2
หน่ว ยประมวลผลกลาง(CPU)

25. หน่ว ยรับ
ข้อ มูล
(Input
Unit)
แบบทดสอบก่อ นเรีย น (Pre-T
Scan Digital Joys Microp
Keyboard
Mouse
ner Camera tick hone
แบบทดสอบหลัง เรีย น
(Posttest)
กลับ เมนูห ลัก การนำา
เสนอ

26. หน่ว ย
ประมวลผลก
ลาง
(CPU)
แบบทดสอบก่อ นเรีย น (Pre-T
ALU CU
แบบทดสอบหลัง เรีย น
(Posttest)
กลับ เมนูห ลัก การนำา
เสนอ

27. หน่ว ย
ความจำา
(Memor
y)
แบบทดสอบก่อ นเรีย น (Pre-Test)
Main Memory Secondary Memory
RA RO Floppy Hard CD DVD Ta
M M Disk Disk ROM ROM pe
แบบทดสอบหลัง เรีย น
(Posttest)
กลับ เมนูห ลัก การนำา
เสนอ

28. หน่ว ย
แสดงผล
(Output
Unit)
แบบทดสอบก่อ นเรีย น (Pre-T
Plott Project
MonitorPrinter Speaker
er or
แบบทดสอบหลัง เรีย น
(Posttest)
กลับ เมนูห ลัก การนำา
เสนอ

29. การออกแบบบท
เรีย น(Design)
5.กำา หนดกลวิธม ิก ารนำา เสนอ
กำสร้า งแผนภู ีก ารนำา เสนอ
า หนดกลวิธ ีก ารนำา เสนอ
ในแต่ล ะหน่ว ย ยเรีย น
ในแต่ล ะหน่ว ยเรีย น
ในแต่ล ะหน่ว
ว่า จะให้ม ีร ูป แบบเช่น ไรจะ
ว่(Module Presentation
า จะให้ม ีร ูป แบบเช่น ไรจะ
ต้อ งออกแบบลำา ดับ
ต้อ งออกแบบลำา ดับ
Chart)
การนำา เสนอเนื้อ หาบท
การนำา เสนอเนื้อ หาบท
เรีย นตามหลัก การ
เรีย นตามหลัก การ
สอนจริง
สอนจริง

30. เริ่ม เข้า สู่บ ทเรีย น
นำา เข้า สู่บ ทเรีย น
ธิบ ายด้ว ยข้อ ความ ตัว หนัง สือ (Text)ด้ว ยภาพนิ่ง หรือ ภาพเคลื่อ นไหว
แบบทดสอบก่อ นเรีย น
เป็น แบบทดสอบแบบ 4 ตัว เล
ใช้ว ิธ ีก ารสุ่ม
นำา เสนอเนื้อ หา
อธิบ ายด้ว ยข้อ ความ ตัว หนัง สือ (Text) และเสีย ง ยกตัว อย่า งประกอบ
ด้ว ยภาพนิ่ง หรือ ภาพเคลื่อ นไหว
แบบฝึก หัด
เป็น แบบถามตอบนำา เสนอและให้ผ ลย้อ นกลับ ด้ว ยข้อ ความ
ตัว หนัง สือ ภาพนิ่ง หรือ ภาพเคลื่อ นไห ว
แบบทดสอบหลัง เรีย น
เป็น แบบทดสอบแบบ 4 ตัว เลือ กใช้ว ิธ ก ารสุ่ม ข้อ สอบ
ี
นำา เสนอด้ว ยข้อ ความตัว หนัง สือ
แผนภูม ิก ารนำา
จบบทเรีย น เสนอบทเรีย น

31. Module
www.prachyanun.com prachyanun@hotmail.com

32. Module Presentation
www.prachyanun.com prachyanun@hotmail.com

33. Module Presentation Chart
www.prachyanun.com prachyanun@hotmail.com

34. การพัฒ นาบท
เรีย น(Developmen
t)
6. เขีย นรายละเอีย ดเนื้อ หา (Script
Development)
7. จัด ทำา ลำา ดับ เนื้อ หา(Story Board
Development)
- Flow chart
8. ตรวจสอบความถูก ต้อ งของ
เนื้อ หา(Content Correctness)

35. ขั้น ตอนการเขีย นสคริป ต์ก ารเรีย นรู้
เชิง วัต ถุ
กำา หนดความต้อ งการที่ห น้า จอภาพ
จุด ประสงค์ข องหน้า จอภาพ
การเชื่อ มโยง
กิจ กรรมหน้า จอภาพ
ข้อ ความหน้า จอภาพ
กราฟิก ส์แ ละภาพ
เสีย งบรรยาย
ผู้เ ขีย นสคริป ต์แ ละผู้ต รวจทาน
www.prachyanun.com prachyanun@hotmail.com

36. Imagineering
จิน ตวิศ วกรรม
Imagine + Engineering
Script
 Screen Design
 Graphic User Interface
 Human Computer Interaction
Storyboard
www.prachyanun.com prachyanun@hotmail.com

37. 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
 ตัว อัก ษรและขนาดตัว อัก ษร คือ การกำา หนดตัว
อัก ษรจะต้อ งเป็น ตัว อัก ษรมาตรฐานที่ใ ช้ง านทั่ว ไปใน
www.prachyanun.com prachyanun@hotmail.com

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

39. Human Computer Interaction : HCI
 การดำา เนิน ตามคำา สั่ง (Order)
 การเรีย งลำา ดับ ขั้น ตอน (Sequence)
 - Start >> Programs >> Microsoft
Office >> Word2007
 - Auto run >> Title (Logo) >> Menu
>> ... Game >> End
 การออกแบบเส้น ทาง เช่น Linear / Brach /
Hybrid
 การรับ รู้ข องผู้ใ ช้ง านเมือ สื่อ ความหมาย
่
Perception >> Image (Picture/Video) /
Text / Sound (Effect, Voice..)
www.prachyanun.com prachyanun@hotmail.com


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

41. Script
www.prachyanun.com prachyanun@hotmail.com

42. Storyboard
www.prachyanun.com prachyanun@hotmail.com

43. Storyboard Scenes
www.prachyanun.com prachyanun@hotmail.com

44. บทสรุป
ADDIE
Digital Content / Learning Object
Brainstorming/Concept Mapping
Content Network
Flowchart / Course Flowchart
Module Presentation
GUI / HCI
Script / Storyboard
www.prachyanun.com prachyanun@hotmail.com

45. คำา ถาม ???
www.prachyanun.com prachyanun@hotmail.com

46. ขอบพระคุณทุกท่าน
www.prachyanun.com prachyanun@hotmail.com