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

1,027 views
926 views

Published on

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

Published in: Education
3 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,027
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
45
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. การออกแบบเนื้อ หาLOGO ดิจ ิต อล (Digital Content Design)รองศาสตราจารย์ดร.ปรัช ญนัน ท์ นิล สุขมหาวิท ยาลัย เทคโนโลยีพระจอมเกล้า พระนครเหนือwww.prachyanun.com prachyanun@hotmail.com
  2. 2. Contents 1 Brainstorming /Concept Mapping 2 Content Network / Learning Object Point 3 Flowchart / Module / Course Flowchart 4 Script / Storyboardwww.prachyanun.com prachyanun@hotmail.com
  3. 3. Digital Contentwww.prachyanun.com prachyanun@hotmail.com
  4. 4. Learning Object : LOwww.prachyanun.com prachyanun@hotmail.com
  5. 5. Learning Object Metadata : LOMwww.prachyanun.com prachyanun@hotmail.com
  6. 6. Learning Object Designwww.prachyanun.com prachyanun@hotmail.com
  7. 7. ขั้น ตอนการวางแผนและออกแบบการ เรีย นรู้เ ชิง วัต ถุ  ขัน ตอนการระดมสมอง ้  ขัน ตอนการเขีย นโครงข่า ยเนื้อ หา ้  ขัน ตอนการเขีย นโฟล์ช าร์ต ้  ขัน ตอนการเขีย นแผนการนำา ้ เสนอ  ขัน ตอนการเขีย นสคริป ต์ ้  ขัน ตอนการเขีย นสตอรี่บ อร์ด ้  การสร้า งการเรีย นรู้เ ชิง วัต ถุwww.prachyanun.com prachyanun@hotmail.com
  8. 8. Brainstormingwww.prachyanun.com prachyanun@hotmail.com
  9. 9. Concept Mapping /Mind Mapwww.prachyanun.com prachyanun@hotmail.com
  10. 10. การออกแบบระบบการเรีย นการสอน Instructional Design (ID) ADDIE การวิเ คราะห์ (Analysis) การออกแบบ (Design) การพัฒ นา (Development) การนำา ไปใช้ (Implement) การประเมิน ผล (Evaluation)
  11. 11. การวิเ คราะห์ เนื้อ หา(Analysis)1. สร้า งแผนภูม ิร ะดมสมอง(Brain Storm Chart)2. สร้า งแผนภูม ิห ัว เรื่อ ง สัม พัน ธ์(Concept Chart)3. สร้า งแผนภูม ิโ ครงข่า ย
  12. 12. ขั้น ตอนการระดมสมอง กำา หนดเรื่อ งที่จ ะสร้า ง แผนภาพมโนทัศ น์ วิเ คราะห์ห ลัก สูต รและคำา อธิบ ายรายวิช า กำา หนดหัว ข้อ หลัก / หัว ข้อ รอง เขีย นแผนภาพมโนทัศ น์แ สดงwww.prachyanun.com prachyanun@hotmail.com
  13. 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. 14. การวิเ คราะห์ เนื้อ หา(Analysis)จากแผนภูม ิร ะดมสมองนำา มาจากแผนภูม ิร ะดมสมองนำา มา วิเเคราะห์ค วามถูก ต้อ ง วิ คราะห์ค วามถูก ต้อ ง2. สร้า งแผนภูม ิห ัว เรื่อ ง ตามทฤษฎีConcept Chart) ผ ล ตามทฤษฎีห ลัก การและเหตุ ผ ล สัม พัน ธ์( ห ลัก การและเหตุ ความสัม พัน ธ์ก ัน อย่า ง ความสัม พัน ธ์ก ัน อย่า ง ละเอีย ดอีก ครั้ง อาจมีก ารตัด -- ละเอีย ดอีก ครั้ง อาจมีก ารตัด เพิ่ม หัว เรื่อ งตามเหตุผ ล เพิ่ม หัว เรื่อ งตามเหตุผ ล และความเหมาะสม และความเหมาะสม
  15. 15. ConceptLOGOChart 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. 16. การวิเ คราะห์ เนื้อ หา(Analysis)จากแผนภูม ิห ัว เรื่อ งสัม พัน ธ์ นำาจากแผนภูม ิห ัว เรื่อ งสัม พัน ธ์ นำา มาเขีย นเป็ม ิโโครงข่ย ย มาเขีย นเป็น โครงข่า ย3. สร้า งแผนภู น ครงข่า าเนืเนืหาโดยคำา นึง ถึง ความก่อ น -- เนื้อ หาโดยคำา นึง ถึง ความก่อ น ้อ ้อ หา(Content Network หลัง ความต่อ เนื่อ งหรือ หลัง ความต่อ เนื่อ งหรือ Chart)ขนานกัน ตามหลัก การเทคนิค ขนานกัน ตามหลัก การเทคนิค โครงข่า ย โครงข่า ย
  17. 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. 18. การออกแบบบท เรีย น(Design)4. กำา หนดกลวิธ ีก ารนำา เสนอ และวัต ถุป ระสงค์ เชิง พฤติก รรม(Strategic Presentation Plan And Behavior Objective)5. สร้า งแผนภูม ิก ารนำา เสนอ
  19. 19. การออกแบบบทจากแผนภูเรีย น(Design)จากแผนภูม ิโ ครงข่า ยเนื้อ หานำา มา ม ิโ ครงข่า ยเนื้อ หานำา มา พิจ ารณากลุ่ม หัว เรื่อ งที่ส ามารถจัด พิจ ารณากลุ่ม หัว เรื่อ งที่ส ามารถจัด 4. กำา หนดกลวิธ ก ารนำเ ป็น กรอบๆไว้ ี ได้ ตี า เสนอและไว้ใ นหน่ว ยเดีย วกัน ได้ ตีเ ป็น กรอบๆไว้ไว้ใ นหน่ว ยเดีย วกัน วัต ถุป ระสงค์เ ชิง พฤติก รรม กำา หนดเป็น หน่ว ยๆ และอัน ดับ ไว้ กำา หนดเป็น หน่ว ยๆ และอัน ดับ ไว้แล้(Strategic บ ด้ว ยวัต ถุป ระสงค์เเชิง Presentation Plan ว เขีย นกำา กั บ ด้ว ยวัต ถุป ระสงค์ ชิงแล้ว เขีย นกำา กั And รรมจากนั้นObjective)ว ยมา Behavior นำา กรอบหน่ พฤติก รรมจากนั้น นำา กรอบหน่ว ยมา พฤติกลำา ดับ การนำา เสนอตามอัน ดับ และความลำา ดับ การนำา เสนอตามอัน ดับ และความ สัม พัน ธ์แ นวเดีย วกับ โครงข่า ย สัม พัน ธ์แ นวเดีย วกับ โครงข่า ยเนื้อ หาซึ่ง จะได้เเป็น แผนภูม ิบ ทเรีย นเนื้อ หาซึ่ง จะได้ ป็น แผนภูม ิบ ทเรีย น
  20. 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. 21. หน่ว ยเรีย นที่ 2 หน่ว ยประมวลผลก ลาง(Central Processing Unit) ราย วัต ถุป ระสงค์เ ชิง ละเอีย ด พฤติก รรม 2. หน่ว ยประมวล เนื้อ หา ผลกลาง (CPU) 2.1 ALU 2.1 อธิบ ายหลัก การทำา งาน 2.2 CU ของ CPU ได้ 2.2 อธิบ ายหน้า ที่ห ลัก การ ทำา งานของ ALUได้  2.3 อธิบ ายหน้า ที่ห ลัก การ ทำา งานของ CUได้
  22. 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. 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. 24. ลำา ดับ การนำา เสนอ เนื้อ หาบทเรีย น (Course Flow Chart) Module 2 หน่ว ยประมวลผลกลาง(CPU)
  25. 25. หน่ว ยรับ ข้อ มูล (Input Unit) แบบทดสอบก่อ นเรีย น (Pre-T Scan Digital Joys MicropKeyboard Mouse ner Camera tick hone แบบทดสอบหลัง เรีย น (Posttest) กลับ เมนูห ลัก การนำา เสนอ
  26. 26. หน่ว ย ประมวลผลก ลาง (CPU) แบบทดสอบก่อ นเรีย น (Pre-TALU CU แบบทดสอบหลัง เรีย น (Posttest) กลับ เมนูห ลัก การนำา เสนอ
  27. 27. หน่ว ย ความจำา (Memor y) แบบทดสอบก่อ นเรีย น (Pre-Test)Main Memory Secondary MemoryRA RO Floppy Hard CD DVD TaM M Disk Disk ROM ROM pe แบบทดสอบหลัง เรีย น (Posttest) กลับ เมนูห ลัก การนำา เสนอ
  28. 28. หน่ว ย แสดงผล (Output Unit) แบบทดสอบก่อ นเรีย น (Pre-T Plott ProjectMonitorPrinter Speaker er or แบบทดสอบหลัง เรีย น (Posttest) กลับ เมนูห ลัก การนำา เสนอ
  29. 29. การออกแบบบท เรีย น(Design)5.กำา หนดกลวิธม ิก ารนำา เสนอ กำสร้า งแผนภู ีก ารนำา เสนอ า หนดกลวิธ ีก ารนำา เสนอ ในแต่ล ะหน่ว ย ยเรีย น ในแต่ล ะหน่ว ยเรีย น ในแต่ล ะหน่ว ว่า จะให้ม ีร ูป แบบเช่น ไรจะ ว่(Module Presentation า จะให้ม ีร ูป แบบเช่น ไรจะ ต้อ งออกแบบลำา ดับ ต้อ งออกแบบลำา ดับ Chart) การนำา เสนอเนื้อ หาบท การนำา เสนอเนื้อ หาบท เรีย นตามหลัก การ เรีย นตามหลัก การ สอนจริง สอนจริง
  30. 30. เริ่ม เข้า สู่บ ทเรีย น นำา เข้า สู่บ ทเรีย นธิบ ายด้ว ยข้อ ความ ตัว หนัง สือ (Text)ด้ว ยภาพนิ่ง หรือ ภาพเคลื่อ นไหว แบบทดสอบก่อ นเรีย น เป็น แบบทดสอบแบบ 4 ตัว เล ใช้ว ิธ ีก ารสุ่ม นำา เสนอเนื้อ หาอธิบ ายด้ว ยข้อ ความ ตัว หนัง สือ (Text) และเสีย ง ยกตัว อย่า งประกอบ ด้ว ยภาพนิ่ง หรือ ภาพเคลื่อ นไหว แบบฝึก หัด เป็น แบบถามตอบนำา เสนอและให้ผ ลย้อ นกลับ ด้ว ยข้อ ความ ตัว หนัง สือ ภาพนิ่ง หรือ ภาพเคลื่อ นไห ว แบบทดสอบหลัง เรีย น เป็น แบบทดสอบแบบ 4 ตัว เลือ กใช้ว ิธ ก ารสุ่ม ข้อ สอบ ี นำา เสนอด้ว ยข้อ ความตัว หนัง สือ แผนภูม ิก ารนำา จบบทเรีย น เสนอบทเรีย น
  31. 31. Modulewww.prachyanun.com prachyanun@hotmail.com
  32. 32. Module Presentationwww.prachyanun.com prachyanun@hotmail.com
  33. 33. Module Presentation Chartwww.prachyanun.com prachyanun@hotmail.com
  34. 34. การพัฒ นาบท เรีย น(Developmen t)6. เขีย นรายละเอีย ดเนื้อ หา (Script Development)7. จัด ทำา ลำา ดับ เนื้อ หา(Story Board Development) - Flow chart8. ตรวจสอบความถูก ต้อ งของ เนื้อ หา(Content Correctness)
  35. 35. ขั้น ตอนการเขีย นสคริป ต์ก ารเรีย นรู้ เชิง วัต ถุ กำา หนดความต้อ งการที่ห น้า จอภาพ จุด ประสงค์ข องหน้า จอภาพ การเชื่อ มโยง กิจ กรรมหน้า จอภาพ ข้อ ความหน้า จอภาพ กราฟิก ส์แ ละภาพ เสีย งบรรยาย ผู้เ ขีย นสคริป ต์แ ละผู้ต รวจทานwww.prachyanun.com prachyanun@hotmail.com
  36. 36. Imagineering จิน ตวิศ วกรรม Imagine + Engineering Script  Screen Design  Graphic User Interface  Human Computer Interaction Storyboardwww.prachyanun.com prachyanun@hotmail.com
  37. 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. 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, pixelswww.prachyanun.com พ ิเ ศษต่า ง ๆ หรือ Symbolic เช่น ! , prachyanun@hotmail.com  สัญ ลัก ษณ์ ? , หรือ การ
  39. 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. 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 Controlwww.prachyanun.com prachyanun@hotmail.com
  41. 41. Scriptwww.prachyanun.com prachyanun@hotmail.com
  42. 42. Storyboardwww.prachyanun.com prachyanun@hotmail.com
  43. 43. Storyboard Sceneswww.prachyanun.com prachyanun@hotmail.com
  44. 44. บทสรุป ADDIE Digital Content / Learning Object Brainstorming/Concept Mapping Content Network Flowchart / Course Flowchart Module Presentation GUI / HCI Script / Storyboardwww.prachyanun.com prachyanun@hotmail.com
  45. 45. คำา ถาม ???www.prachyanun.com prachyanun@hotmail.com
  46. 46. ขอบพระคุณทุกท่านwww.prachyanun.com prachyanun@hotmail.com

×