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

LOGO

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

มหาวิ�ท์ย์าล ย์เท์คโนัโลย์�พระจอมเกล าพระนัครเหนั!อ

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

มหาวิ�ท์ย์าล ย์เท์คโนัโลย์�พระจอมเกล าพระนัครเหนั!อ

การออกแบบเนั!$อหา ด�จ�ตอล

(Digital Content Design)

การออกแบบเนั!$อหา ด�จ�ตอล

(Digital Content Design)

www.prachyanun.com [email protected]

[email protected]@hotmail.comwww.prachyanun.comwww.prachyanun.com

Contents

Brainstorming /Concept Mapping1

Content Network / Learning Object Point2

Flowchart / Module / Course Flowchart3

Script / Storyboard4

Digital Content


Learning Object : LO


Learning Object Metadata : LOM


Learning Object Design


ข $นัตอนัการวิางแผนัและออกแบบการเร�ย์นัร& เช�งวิ ตถุ�

ข $นัตอนัการระดมสมอง ข $นัตอนัการเข�ย์นัโครงข(าย์เนั!$อหา ข $นัตอนัการเข�ย์นัโฟลชารต ข $นัตอนัการเข�ย์นัแผนัการนั*าเสนัอ ข $นัตอนัการเข�ย์นัสคร�ปต ข $นัตอนัการเข�ย์นัสตอร�+บอรด การสร างการเร�ย์นัร& เช�งวิ ตถุ� การประเม�นัผลบท์เร�ย์นัการเร�ย์นัร& เช�ง

วิ ตถุ�[email protected]@hotmail.comwww.prachyanun.comwww.prachyanun.com

Brainstorming


Concept Mapping /Mind Map


การออกแบบระบบการเร�ย์นัการสอนั

Instructional Design (ID) ADDIE การวิ�เคราะห (Analysis) การออกแบบ (Design) การพ ฒนัา (Development) การนั*าไปใช (Implement) การประเม�นัผล (Evaluation)

การวิ�เคราะหเนั!$อหา(Analysis)

1. สร างแผนัภู&ม�ระดมสมอง(Brain Storm Chart)

2. สร างแผนัภู&ม�ห วิเร!+องส มพ นัธ์(Concept Chart)

3. สร างแผนัภู&ม�โครงข(าย์เนั!$อหา(Content Network Chart)

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

ก*าหนัดเร!+องท์�+จะสร างแผนัภูาพมโนัท์ ศนัวิ�เคราะหหล กส&ตรและค*าอธ์�บาย์ราย์วิ�ชา ก*าหนัดห วิข อหล ก / ห วิข อรองเข�ย์นัแผนัภูาพมโนัท์ ศนัแสดงการเช!+อม

โย์งสร�ปแผนัภูาพมโนัท์ ศนัท์�+ได นั*าเสนัอผ& เช�+ย์วิชาญเนั!$อหาพ�จารณา


LOGO

ฮารดแวิรคอมพ�วิเตอรInput Unit

CPU

Memory

Output Unit

Mouse

MicrophoneJoyst

ick

Scanner

Keyboard

Digital Camera

ALU

CU

Main Memory

Secondary Memory

RAM

ROM

Floppy Disk Hard

Disk

CD ROM

DVD ROM

Tape

Monitor

Temporary

Permanent

Printer

Plotter

Speaker

Projector

Brain Storm Chart

P.WiparaP.WiparattP.WiparaP.Wiparatt


2. สร างแผนัภู&ม�ห วิเร!+องส มพ นัธ์(Concept Chart)

จากแผนัภู&ม�ระดมสมองนั*ามาวิ�เคราะหควิามถุ&กต อง

ตามท์ฤษฎี�หล กการและเหต�ผลควิามส มพ นัธ์ก นัอย์(าง

ละเอ�ย์ดอ�กคร $ง อาจม�การต ด-เพ�+มห วิเร!+องตามเหต�ผล

และควิามเหมาะสม

จากแผนัภู&ม�ระดมสมองนั*ามาวิ�เคราะหควิามถุ&กต อง

ตามท์ฤษฎี�หล กการและเหต�ผลควิามส มพ นัธ์ก นัอย์(าง

ละเอ�ย์ดอ�กคร $ง อาจม�การต ด-เพ�+มห วิเร!+องตามเหต�ผล

และควิามเหมาะสม

LOGO

Temporary

Permanent

ฮารดแวิรคอมพ�วิเตอรInput Unit

CPU

Memory

Output Unit

Mouse

MicrophoneJoyst

ick

Scanner

Keyboard

Digital Camera

ALU

CU

Main Memory

Secondary Memory

RAM

ROM

Floppy Disk Hard

Disk

CD ROM

DVD ROM

Tape

Monitor

Printer

Plotter

Speaker

Projector

Concept Chart

P.WiparaP.WiparattP.WiparaP.Wiparatt


3. สร างแผนัภู&ม�โครงข(าย์เนั!$อหา(Content Network Chart)

จากแผนัภู&ม�ห วิเร!+องส มพ นัธ์ นั*ามาเข�ย์นัเป8นัโครงข(าย์

เนั!$อหาโดย์ค*านั9งถุ9งควิามก(อนั- หล งควิามต(อเนั!+องหร!อ

ขนัานัก นั ตามหล กการเท์คนั�คโครง ข(าย์

จากแผนัภู&ม�ห วิเร!+องส มพ นัธ์ นั*ามาเข�ย์นัเป8นัโครงข(าย์

เนั!$อหาโดย์ค*านั9งถุ9งควิามก(อนั- หล งควิามต(อเนั!+องหร!อ

ขนัานัก นั ตามหล กการเท์คนั�คโครง ข(าย์

1

ฮารดแวิร

คอมพ�วิเตอร

2

Input Unit3 Digital

Camera4

5

6

7

8

9

10

Keyboard

MouseScan

ner

JoystickMicrophone

13

15

14ALU

CU

2930

Output Unit 3731

32

33

35

36

34

Monitor

Printer

Speaker

Plotter

Projecto

r

Floppy DiskHard Disk

17

19

23

18

22

20

21

24

25

26

27

28

Main

Memor

y

Secondar

yMemory

RamRom

CD RomDVD RomTape

12

16

CPU

Memory

11

Content Network Chart

การออกแบบบท์เร�ย์นั(Design)

4. ก*าหนัดกลวิ�ธ์�การนั*าเสนัอและวิ ตถุ�ประสงค เช�งพฤต�กรรม(Strategic Presentation Plan

And Behavior Objective)5. สร างแผนัภู&ม�การนั*าเสนัอในัแต(ละหนั(วิย์ (Module Presentation Chart)


4. ก*าหนัดกลวิ�ธ์�การนั*าเสนัอและวิ ตถุ�ประสงคเช�งพฤต�กรรม(Strategic Presentation Plan And Behavior

Objective)

จากแผนัภู&ม�โครงข(าย์เนั!$อหานั*ามาพ�จารณากล�(มห วิเร!+องท์�+สามารถุจ ด

ไวิ ในัหนั(วิย์เด�ย์วิก นัได ต�เป8นักรอบๆไวิ ก*าหนัด เป8นัหนั(วิย์ๆ และอ นัด บไวิ

แล วิเข�ย์นัก*าก บด วิย์วิ ตถุ�ประสงคเช�งพฤต�กรรมจากนั $นันั*ากรอบหนั(วิย์มา

ล*าด บการนั*าเสนัอตามอ นัด บและควิามส มพ นัธ์แนัวิเด�ย์วิก บโครงข(าย์

เนั!$อหาซึ่9+งจะได เป8นัแผนัภู&ม�บท์เร�ย์นั

จากแผนัภู&ม�โครงข(าย์เนั!$อหานั*ามาพ�จารณากล�(มห วิเร!+องท์�+สามารถุจ ด

ไวิ ในัหนั(วิย์เด�ย์วิก นัได ต�เป8นักรอบๆไวิ ก*าหนัด เป8นัหนั(วิย์ๆ และอ นัด บไวิ

แล วิเข�ย์นัก*าก บด วิย์วิ ตถุ�ประสงคเช�งพฤต�กรรมจากนั $นันั*ากรอบหนั(วิย์มา

ล*าด บการนั*าเสนัอตามอ นัด บและควิามส มพ นัธ์แนัวิเด�ย์วิก บโครงข(าย์

เนั!$อหาซึ่9+งจะได เป8นัแผนัภู&ม�บท์เร�ย์นั

หนั(วิย์เร�ย์นัท์�+ 1 หนั(วิย์ร บข อม&ล(Input Unit)

ราย์ละเอ�ย์ดเนั!$อหา

วิ ตถุ�ประสงคเช�งพฤต�กรรม

1. หนั(วิย์ร บข อม&ล (Input Unit) 1.1 Keyboard 1.2 Mouse 1.3 Scanner 1.4 Joystick 1.5 Digital Camera 1.6 Microphone

1.1 อธ์�บาย์ควิามหมาย์ของอ�ปกรณ ท์างด านัอ�นัพ�ท์ได 1.2 บอกได วิ(าอ�ปกรณชนั�ดใดเป8นัอ�ปกรณ ท์างด านัอ�นัพ�ท์1.3 เข าใจหนั าท์�+การท์*างานัของอ�ปกรณ อ�นัพ�ท์แต(ละต วิ1.4 อธ์�บาย์ข อแตกต(างของการนั*าอ�ปกรณ อ�นัพ�ท์ไปใช งานัได 1.5 อธ์�บาย์ข อแตกต(างระหวิ(างอ�ปกรณอ�นัพ�ท์แต(ละต วิได 1.6 สามารถุเล!อกใช อ�ปกรณได อย์(างถุ&กต อง

หนั(วิย์เร�ย์นัท์�+ 2 หนั(วิย์ประมวิลผลกลาง(Central Processing Unit)



2. หนั(วิย์ประมวิลผลกลาง (CPU) 2.1 ALU

2.2 CU 2.1 อธ์�บาย์หล กการท์*างานัของ CPU ได 2.2 อธ์�บาย์หนั าท์�+หล กการท์*างานัของ ALUได 2.3 อธ์�บาย์หนั าท์�+หล กการท์*างานัของ CUได

หนั(วิย์เร�ย์นัท์�+ 3 หนั(วิย์ควิามจ*า(Memory)



3. หนั(วิย์ควิามจ*า(Memory) 3.1 Main Memory 3.1.1 Ram 3.1.2 Rom 3.2 Secondary Memory 3.2.1 Floppy Disk 3.2.2 Hard Disk 3.2.3 CD ROM 3.2.4 DVD ROM 3.2.5 Tape

3.1 อธ์�บาย์หนั าท์�+หล กการท์*างานัของ หนั(วิย์ควิามจ*า ได 3.2 สามารถุอธ์�บาย์ได วิ(าอะไรเป8นัหนั(วิย์ ควิามจ*าหล กอะไรเป8นัหนั(วิย์ควิามจ*าส*ารอง3.3 อธ์�บาย์หล กการท์*างานัของอ�ปกรณเก<บ ข อม&ลแต(ละชนั�ดได 3.4 สามารถุเล!อกใช อ�ปกรณเก<บข อม&ลแต(ละชนั�ด ได อย์(างถุ&กต อง3.5 สามารถุบอกได วิ(าหนั(วิย์ควิามจ*าชนั�ดใดเป8นัหนั(วิย์ ควิามจ*าช +วิคราวิและหนั(วิย์ควิามจ*าชนั�ดใดเป8นั หนั(วิย์ควิามจ*าถุาวิร

หนั(วิย์เร�ย์นัท์�+ 4 หนั(วิย์แสดงผล(Output Unit)



4. หนั(วิย์แสดงผล(Output Unit) 4.1 Monitor 4.2 Printer 4.3 Plotter 4.4 Projector 4.5 Speaker

4.1 อธ์�บาย์ควิามหมาย์แลของอ�ปกรณท์างด านั เอ าท์พ�ท์ได 4.2 บอกได วิ(าอ�ปกรณชนั�ดใดเป8นัอ�ปกรณแสดงผล4.3 เข าใจหนั าท์�+การท์*างานัของอ�ปกรณเอ าท์พ�ท์แต(ละต วิ4.4 อธ์�บาย์ข อแตกต(างของการนั*าอ�ปกรณเอ าท์พ�ท์ ไปใช งานัได 4.5 สามารถุเล!อกใช อ�ปกรณเอ าท์พ�ท์ได อย์(างถุ&กต อง

ล*าด บการนั*าเสนัอเนั!$อหาบท์เร�ย์นั

(Course Flow Chart)

Module2 หนั(วิย์ประมวิลผลกลาง(CPU)

หนั(วิย์ร บข อม&ล

(Input Unit)

แบบท์ดสอบก(อนัเร�ย์นั(Pre-Test)

KeyboardMicrophone

Scanne

r

แบบท์ดสอบหล งเร�ย์นั(Posttest)

กล บเมนั&หล ก

MouseJoystick

Digital Camera

การนั*าเสนัอเนั!$อหา

Module 1

หนั(วิย์ประมวิลผลกลาง(CPU)แบบท์ดสอบก(อนัเร�ย์นั(Pre-Test)

ALU CU


กล บเมนั&หล ก การนั*าเสนัอเนั!$อหา

Module 2

หนั(วิย์ควิามจ*า(Memo

ry) แบบท์ดสอบก(อนัเร�ย์นั(Pre-Test)

Main Memory

Floppy Disk


กล บเมนั&หล ก การนั*าเสนัอเนั!$อหา

Module 3

Secondary Memory

RAM

ROM

Hard Disk

CD ROM

DVD ROM

Tape

หนั(วิย์แสดงผล(Output

Unit)แบบท์ดสอบก(อนัเร�ย์นั(Pre-Test)

MonitorProjec

torPlotter


กล บเมนั&หล ก

PrinterSpeake

r

การนั*าเสนัอเนั!$อหา

Module 4


5. สร างแผนัภู&ม�การนั*าเสนัอในัแต(ละหนั(วิย์ (Module Presentation Chart)

ก*าหนัดกลวิ�ธ์�การนั*าเสนัอในัแต(ละหนั(วิย์เร�ย์นั

วิ(าจะให ม�ร&ปแบบเช(นัไรจะต องออกแบบล*าด บ

การนั*าเสนัอเนั!$อหาบท์เร�ย์นัตามหล กการ

สอนัจร�ง

ก*าหนัดกลวิ�ธ์�การนั*าเสนัอในัแต(ละหนั(วิย์เร�ย์นั

วิ(าจะให ม�ร&ปแบบเช(นัไรจะต องออกแบบล*าด บ

การนั*าเสนัอเนั!$อหาบท์เร�ย์นัตามหล กการ

สอนัจร�ง

เร�+มเข าส&(บท์เร�ย์นั

นั*าเสนัอเนั!$อหา อธ์�บาย์ด วิย์ข อควิาม ต วิหนั งส!อ (Text) และเส�ย์ง ย์กต วิอย์(างประกอบ

ด วิย์ภูาพนั�+งหร!อ ภูาพเคล!+อนัไหวิ

นั*าเข าส&(บท์เร�ย์นั อธ์�บาย์ด วิย์ข อควิาม ต วิหนั งส!อ (Text) ด วิย์ภูาพนั�+งหร!อ ภูาพเคล!+อนัไหวิ

แบบฝึ>กห ดเป8นัแบบถุามตอบนั*าเสนัอและให ผลย์ อนักล บด วิย์ข อควิาม

ต วิหนั งส!อ ภูาพนั�+งหร!อ ภูาพเคล!+อนัไหวิ

แบบท์ดสอบหล งเร�ย์นั เป8นัแบบท์ดสอบแบบ 4 ต วิเล!อกใช วิ�ธ์�การส�(มข อสอบ

นั*าเสนัอด วิย์ข อควิามต วิหนั งส!อ

จบบท์เร�ย์นั

แบบท์ดสอบก(อนัเร�ย์นั เป8นัแบบท์ดสอบแบบ 4 ต วิเล!อก

ใช วิ�ธ์�การส�(ม

แผนัภู&ม�การนั*าเสนัอบท์เร�ย์นั

(Module Presentation

Chart)

Module


Module Presentation


Module Presentation Chart


การพ ฒนัาบท์เร�ย์นั(Developme

nt)6. เข�ย์นัราย์ละเอ�ย์ดเนั!$อหา(Script

Development)

7. จ ดท์*าล*าด บเนั!$อหา(Story Board Development)- Flow chart

8. ตรวิจสอบควิามถุ&กต องของเนั!$อหา(Content Correctness)

9. สร างแบบท์ดสอบส(วินัต(างๆ

ข $นัตอนัการเข�ย์นัสคร�ปตการเร�ย์นัร& เช�งวิ ตถุ�

ก*าหนัดควิามต องการท์�+หนั าจอภูาพจ�ดประสงคของหนั าจอภูาพการเช!+อมโย์งก�จกรรมหนั าจอภูาพข อควิามหนั าจอภูาพกราฟ?กสและภูาพเส�ย์งบรรย์าย์ผ& เข�ย์นัสคร�ปตและผ& ตรวิจท์านั


Imagineeringจ�นัตวิ�ศวิกรรม

Imagine + EngineeringScript

Screen DesignGraphic User InterfaceHuman Computer Interaction


Graphic User Interface : GUI

พ!$นัหล งและพ!$นัหนั า (Background /Foreground) ค!อ การนั*ากราฟ?กมาใช ท์*าเป8นัพ!$นัหล งของหนั าจอภูาพ และกราฟ?กท์�+อย์&(

ด านัหนั าต องม�ควิามส มพ นัธ์และกลมกล!นัก นั การก*าหนัดส�ในัการออกแบบกราฟ?ก ค!อ การใช ส�ส*าหร บจอภูาพ

คอมพ�วิเตอรจะต องเป8นัการก*าหนัดส�แบบ RGB (Red Green Blue) เนั!+องจากเป8นัแม(ส�ของแสงส*าหร บจอภูาพ ถุ าจะออกแบบ

กราฟ?กเพ!+องานัพ�มพก<จะต องใช แบบ 4 ส� ค!อ CMYK- Color >> 256 , 8 , 16 , 32 , RGB , CMYK

Red Green Blue : RGBCyan , Magenta , Yellow , blacK : CMYK

ต วิอ กษรและขนัาดต วิอ กษร ค!อ การก*าหนัดต วิอ กษรจะต องเป8นัต วิ อ กษรมาตรฐานัท์�+ใช งานัท์ +วิไปในัมาตรฐานัของเคร!+องคอมพ�วิเตอร ถุ า

ใช แบบต วิอ กษรพ�เศษจะเก�ดปAญหาเม!+อเคร!+องบางเคร!+องไม(ม�ต วิอ กษร พ�เศษนั $นั จะท์*าให การแสดงผลต วิอ กษรกลาย์เป8นัต วิประหลาดหร!อเป8นั ร&ปเหล�+ย์ม ขณะเด�ย์วิก นัก<ต องค*านั9งถุ9งแบบต วิอ กษรเช(นั ต วิหนัา ต วิเอนั

ฯลฯ [email protected]@hotmail.comwww.prachyanun.comwww.prachyanun.com

Graphic User Interface : GUI

ภูาพนั�+งส*าหร บบท์เร�ย์นัคอมพ�วิเตอร ได แก( ร&ปภูาพเฉพาะท์�+ใช ก บคอมพ�วิเตอร ประเภูท์นัามสก�ล JPG, GIF , PNG , BMP , TIF

ภูาพเคล!+อนัไหวิ ค!อ วิ�ด�โอหร!อแอนั�เมช +นั ม�ไฟลประเภูท์ AVI, Mpage , Wav, Wmv , Mp4

ไอคอนั ค!อ ป�Dมท์*างานัต(าง ๆ ได แก( Home , Next , Back (Previous) , FF , RF , End. ,

เมนั&หร!อป�Dมต(าง ๆ เช(นั Help , Drop down , Radio , Button , Checklist ,...

เส นัหร!อร&ปช�$นังานัต(าง ๆ ได แก( Line / Cure / 3D / Graphic >> Sharp

การก*าหนัดแบบหนั าจอ หร!อ Lay out / Size >> Center, Point , View , 800 * 600, 1024 * 768 , 1280 * 768, pixels

ส ญล กษณพ�เศษต(าง ๆ หร!อ Symbolic เช(นั ! , ? , หร!อ การส!+อควิาม หมาย์ในัเช�งส ญล กษณต(าง ๆ เช(นั ^_^ , T_T ,


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..)

การก*าหนัดช(วิงเวิลาท์�+เหมาะสมในัการแสดงผล เช(นั Time >> Speed , pacing ,

การเร�ย์งล*าด บควิามย์ากง(าย์ของเนั!$อหา เช(นั 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 , ....เป8นัต นั


Script


Storyboard


Storyboard Scenes


บท์สร�ปADDIEDigital Content / Learning ObjectBrainstorming/Concept MappingContent NetworkFlowchart / Course FlowchartModule PresentationGUI / HCIScript / Storyboard



ค*าถุาม ???


ขอบพระคุ�ณทุ�กทุ�าน

Education

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