การศกษาการนา Web-based Interface

มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร

ธนวชญ โกสวสด

โครงการศกษาคนควาดวยตนเองนเปนสวนหนงของการศกษา ตามหลกสตรปรญญาวทยาศาสตรมหาบณฑต

สาขาวชาการจดการเทคโนโลยสารสนเทศและการสอสาร บณฑตวทยาลย มหาวทยาลยหอการคาไทย

ปการศกษา 2551

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

หวขอโครงการศกษาดวยตนเอง : การศกษาการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร

โดย : ธนวชญ โกสวสด

อาจารยทปรกษา : อาจารย ดร.ยอดธง รอดแกว

อาจารย ดร.ชนะกญจน ศรรตนบลล

ผชวยศาสตราจารย ดร.สมพร ปนโภชา

สาขาวชา : การจดการเทคโนโลยสารสนเทศและการสอสาร

ปการศกษา : 2551

บทคดยอ

การศกษาการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตรนเพอพฒนาระบบการเรยนการสอนของนกศกษาคณะวทยาศาสตร มหาวทยาลยหอการคาไทย และเพอเพมประสทธภาพในการเรยนรของนกศกษา ใหไดรบการเรยนรทถกวธ สามารถเรยนรไดทกททกเวลา ไมวาจะอยทบาน หรอทใดกตาม ซงการเรยนจะเปนแบบการมสวนรวมระหวางเนอหาบทเรยนและผเรยน ซงจะทาใหผเรยนเขาใจบทเรยน และมสมาธตอการเรยนมากขน เนอหาบทเรยนประกอบกนหลายสวนคอ สวนเนอหาบทเรยนแบบมปฏสมพนธกบผเรยน สวนการแสดงผลเชงเสนกราฟทผเรยนสามารถกาหนดคาเองได สวนแบบทดสอบและวดผลแบบขนบนได สงผลใหเกดการเรยนรอยางเปนระบบ และเกดประโยชนกบผเรยน การนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร ผพฒนาไดลกษณะการทางานมาจากระบบเดม และนารปแบบการเรยนการสอนของอาจารยผสอนมาพฒนาใหมความทนสมย พรอมทงปรบปรงจากระบบเดม โดยจะทาใหการเรยนการสอนในรปแบบของ e-Learning มความนาสนใจมากขน ทาใหผเรยนเกดความอยากเรยนร ทงนการออกแบบเนอหา การแสดงกราฟตางๆ หรอการทาแบบฝกหด จะถกออกแบบ และวางรปแบบใหโตตอบกบผเรยนได จงทาใหผเรยนเรยนรอยางมประสทธผล รขอผดพลาดของตนเองทเกดขนขณะเรยนร ซงจะนาไปสการแกไขปรบปรง และประสบความสาเรจในการเรยนรเรองอนพนธ ในวชาแคลคลส ของนกศกษาคณะวทยาศาสตร มหาวทยาลยหอการคาไทย ตอไปในอนาคต

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

กตตกรรมประกาศ

ขอขอบพระคณ บดา มารดา ครอบครว และเพอนๆ ทใหกาลงใจ ใหความชวยเหลอในดานตางๆ มาโดยตลอด การศกษาคนควาครงนสาเรจลงไดดวยความกรณาจากคณาจารยหลายทาน ขอกราบขอบพระคณอาจารย ดร.ชนะกญจน ศรรตนบลล อาจารย ดร.ยอดธง รอดแกว และผชวยศาสตราจารย ดร.สมพร ปนโภชา ผซงกรณาใหความร คาแนะนาตางๆ ใหคาปรกษา ทายสละเวลาอนมคาของทานเพอตรวจทานในสวนทตองการแกไขนจนเสรจสมบรณ หากการศกษาคนควาดวยตนเองฉบบนมขอบกพรองประการใดผจดทาตองขออภยมา ณ ทนดวย

นายธนวชญ โกสวสด

พฤศจกายน 2551

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญ

หนา

บทคดยอ ง

กตตกรรมประกาศ จ

สารบญ ฉ

สารบญรปภาพ ซ

สารบญแผนภม ฎ

บทท 1 บทนา 1

บทท 2 แนวคดและทฤษฎ

2.1 แนวคดทเกยวกบ e-Learning 5

2.2 แนวคดการนา Web-based มาใชกบการเรยนการสอน 15

2.3 แนวคดการออกแบบ Web-based Interface 17

2.4 เครองมอในการออกแบบ e-Learning แบบ interactive 22

บทท 3 ขนตอนการออกแบบ และพฒนาระบบ

3.1 สวนประกอบของ e-Learning แบบ Interactive (Requirement) 28

3.2 ขนตอนการออกแบบโครงสรางบทเรยน 31

3.2.1 การเตรยมเนอหาบทเรยน 31

3.2.2 การวางโครงสรางการแสดงผล 33

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญ (ตอ)

หนา

3.2.3 การออกแบบและสรางสวนของบทเรยน 34

3.3 ขนตอนการออกแบบเนอหาเวบไซต (Web-based) 40

3.4 ทดสอบ (Testing) 42

บทท 4 วตถประสงคและประโยชนการนาไปใช

4.1 ระบบ e-Learning แบบ Interactive 43

4.2 วตถประสงคการออกแบบในสวน Web-based interface 44

4.3 สวนเนอหาบทเรยน 48

บทท 5 สรปผลและขอเสนอแนะ 59

บรรณานกรม 63

ภาคผนวก 64

ประวตผวจย 68

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญรปภาพ

หนา

รป 2.1 ระบบ e-Commerce e-Education และ e-Learning 16

รป 2.2 รปแบบการสอสารของ WBI 17

รป 2.3 ภาพโปรแกรม Macromedia Dreamweaver 22

รป 2.4 ภาพโปรแกรม Adobe Photoshop CS3 23

รป 2.5 ภาพโปรแกรม Macromedia Flash 8 24

รป 2.6 ภาพโปรแกรม Adobe Captivate 3 27

รปท 3.1 หนาจอแสดงผลในสวนบทนา 30

รปท 3.2 หนาจอแสดงผลในสวนเนอหา 30

รปท 3.3 หนาจอแสดงผลในสวนแบบทดสอบ 31

รปท 3.4 เนอหาทไดจากการ Scan 32

รปท 3.5 รปทไดจากตดภาพดวยโปรแกรม Adobe Photoshop 33

รปท 3.6 การสรางหนาจอแสดงผลในสวนหนาแรก โดยโปรแกรม Macromedia Flash 8 35

รปท 3.7 ชนงานหนาแสดงผลในสวนหนาแรก 36

รปท 3.8 การเชอมโยงของเนอหาในแตละหวขอ 36

รปท 3.9 การออกแบบในสวนทางเลอกเมน ของเนอหาบทเรยน 37

รปท 3.10 การออกแบบในสวนของเนอหาบทเรยนแบบ Rollover 37

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญรปภาพ (ตอ)

หนา

รปท 3.11 โครงสรางเวบไซตสาหรบใสเนอหาในสวนแบบฝกหด 38

รปท 3.12 แสดงการจดเรยงเนอหา กอนการสงออกสวนประสาน Web-based 39

รปท 3.13 ขนตอนการสงออกสวนประสาน Web-based ในรปแบบ Flash (swf) 39

รปท 3.14 รปแบบโปรแกรม Macromedia Dreamweaver 8 40

รปท 3.15 การออกแบบโครงสรางเวบไซต (Template) 40

รปท 3.16 การออกแบบเนอหาโครงสรางเวบไซต (Template) 41

รปท 3.17 หนาโครงสรางเวบไซตทเชอมโยงกบสวนเนอหาบทเรยน 41

รปท 3.18 การทดสอบการเชอมโยงของเนอหาบทเรยนกบทางเลอกเมน 42

รปท 4.1 การออกแบบโครงสรางเวบไซต (Web-Template) 45

รปท 4.2 ตาแหนงการจดวางภายในโครงสรางเวบไซต (Web Template) 45

รปท 4.3 สวนประกอบฟงกชนทางเลอกเมนหลก และฟงกชนทางเลอกเมนรอง 46

รปท 4.4 การจดวางรปแบบเนอหาในบทเรยน 48

รปท 4.5 ตวอยางบทเรยนในบทท 1 49

รปท 4.6 ตวอยางวธทาแบบฝกหดในบทท 1 49

รปท 4.7 ตวอยางบทเรยนในบทท 2 50

รปท 4.8 ตวอยางวธทาแบบฝกหดในบทท 2 50

รปท 4.9 ตวอยางบทเรยนในบทท 3 51

รปท 4.10 ตวอยางวธทาแบบฝกหดในบทท 3 51

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญรปภาพ (ตอ)

หนา

รปท 4.11 ตวอยางบทเรยนในบทท 4 52

รปท 4.12 ตวอยางวธทาแบบฝกหดในบทท 4 52

รปท 4.13 ตวอยางบทเรยนในบทท 5 53

รปท 4.14 ตวอยางวธทาแบบฝกหดในบทท 5 53

รปท 4.15 ตวอยางบทเรยน และวธทาแบบฝกหดในบทท 6 54

รปท 4.16 ตวอยางบทเรยนในบทท 7 54

รปท 4.17 แสดงตวอยางวธทาแบบฝกหดในบทท 7 55

รปท 4.18 ตวอยางบทเรยนในบทท 8 55

รปท 4.19 ตวอยางวธทาแบบฝกหดในบทท 8 56

รปท 4.20 เนอหาบทเรยนกอนแสดงเนอหา 57

รปท 4.21 เนอหาบทเรยนหลงการวางเมาส จะแสดงเนอหา 57

รปท 4.22 ตาแหนงฟงกชนทางเลอกเมนสวนเนอหาบทเรยน 58

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

สารบญแผนภม

หนา

แผนภมท 3.1 วเคราะหสวนประกอบ e-Learning 28

แผนภมท 3.2 โครงสรางการแสดงผลในสวนเนอหา 34

แผนภมท 4.1 การวเคราะหวตถประสงค และประโยชนการนาไปใช 43

แผนภมท 4.2 โครงสรางสวนประกอบฟงกชนทางเลอกเมน 47

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บทท 1 บทนา

ความเปนมาและความสาคญของปญหา ในอดตการเรยนการสอนนกศกษาระดบปรญญาตรทกระดบตองเรยนในชนเรยน และตองจดบนทกสงทไดเรยนดวยตนเอง หรอจากเพอนรวมชนเรยน จงทาใหเกดความลาชาในการเรยนการสอน และหากมนกศกษาบางคนไมสามารถเขาเรยนในวชาเรยนนนๆ อาจจะทาใหไมเขาใจในเนอหาบทเรยน โดยเฉพาะวชาทตองอาศยการเรยนร ประกอบกบการฝกปฏบต เชน วชาคณตศาสตร กยงจะทาใหเขาใจไดยาก ฉะนนรปแบบการเรยนรดวยตนเอง (e-Learning) จงเขามามบทบาทและเปนชองทางในการเพมโอกาสทางการเรยนของนกศกษาระดบปรญญาตรมากขน

สาหรบความหมายของ e-Learning มผใหนยามในลกษณะตางๆ กน แตองบนพนฐานเดยวกนดงน - เปนนวตกรรมทางการศกษาทเปลยนแปลงวธเรยนทเปนอยเดม เปนการเรยนทใชเทคโนโลยทกาวหนา เชน อนเทอรเนต อนทราเนต เอกซทราเนต ดาวเทยม วดโอเทป แผนซด ฯลฯ คาวา e-Learning ใชในสถานการณการเรยนรทมความหมายกวางขวาง มความหมายรวมถง การเรยนทางไกล การเรยนผานเวบ หองเรยนเสมอนจรง และอนๆ มากมาย โดยสถานการณดงกลาวมสงทมเหมอนกนอยประการหนงคอ การใชเทคโนโลยการสอสารเปนสอสารของการเรยนร (http://www.capella.edu/elearning/) - เคอรตส (Kurtus. 2000) กลาววา e-Learning เปนรปแบบของเนอหาสาระทสรางเปนบทเรยนสาเรจภาพประกอบ อาจใชซดรอมเปนสอกลางในการสงผาน หรอใชการสงผานเครอขายภายใน หรอเครอขายอนเทอรเนต ทงน e-Learning อาจอยในรปแบบของคอมพวเตอรชวยการฝกอบรม (Computer-Based Training: CBT) และการใชเวบเพอการฝกอบรม (Web-Based Training: WBT) หรอใชการเรยนทางไกล

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

2

- แคมปเบล (Campbell. 1999) ใหความหมายของ e-Learning วาเปนการใชเทคโนโลยทมอยในอนเทอรเนต เพอสรางการศกษาทมปฏสมพนธ และการศกษาทมคณภาพสง ทผคนทวโลกมความสะดวกและสามารถเขาถงไดไมจาเปนตองจดการศกษาทตองกาหนดเวลาและสถานท เปดประตของการเรยนรตลอดชวตใหกบประชากร กลาวโดยสรป e-Learning เปนทางเลอกและรปแบบดานการศกษา ทอาศยการผสมผสานของเทคโนโลยตางๆ เพอพฒนา และเสรมสรางทกษะการเรยนร

ในชวงตนศตวรรษท 21 การพฒนาเทคโนโลยดานตางๆ โดยเฉพาะอยางยงเทคโนโลยดานคอมพวเตอร เทคโนโลยทางดานการสอสาร (ICT – Information and Communication Technology) และเทคโนโลยอนเทอรเนต ไดพฒนาอยางตอเนอง รวดเรว สงผลใหเกดความพยายามในการนาเทคโนโลย เหลานมาประยกตใชกบการจดการศกษาทงในภาคการศกษา ตลอดจนหนวยงานตางๆ ทตระหนกถงองคความรในองคกร เพอใหรปแบบการศกษามคณภาพ หลากหลาย และมประสทธภาพมากยงขน ดงจะเหนไดจากการมระบบการศกษาผานดาวเทยมไทยคม หรอระบบการเรยนดวยตนเอง e-Learning อยางไรกตาม ระบบการเรยนรดวยตนเองนนสวนใหญยงเปนการเรยนรทางเดยว (One way learning) ซงผเรยนยงคงเรยนรผานระบบถายทอดทาง Cable T.V. หรอ เครอขายอนเทอรเนต เหมอนนงเรยนในหองเรยนกบอาจารย โดยไมมปฏสมพนธ กบเนอหาบทเรยนนน ปจจบนการพฒนารปแบบ UI (User Interface) ของเวบไซตไดเปลยนแปลงไป ดงจะเหนไดจากการพฒนาภาษาสาหรบเทคโนโลยอนเทอรเนตจาก HTML (Hypertext Markup Language) มาสภาษา JAVA และ AJAX (Asynchronous JavaScript and XML) เพอใหเวบไซต สามารถตอบสนองกบผใชงาน จงทาให e-Learning แบบทางเดยว เปลยนไปเปน e-Learning แบบ Interactive ทเหมะกบวชาทางดานคณตศาสตร โดยผเรยนสามารถวเคราะห และใสตวแปรตางๆ เพอดผลลพธทเกดขนดวยตนเอง ทงนเพอการพฒนาทรพยากรมนษยดานสตปญญา อกทงสรางขดความสามารถทางการแขงขนดานสงคม และเศรษฐกจฐานความร คาถามนาการวจย

1. การนา Web-based Interface มาใชกบ e-Learning แบบ Interactive ทางคณตศาสตรควรมลกษณะแบบใด

2. ลกษณะการออกแบบ e-Learning แบบ Interactive ทางคณตศาสตรควรออกมาในรปแบบไหน

3. e-Learning แบบ Interactive สามารถใชกบโจทยทางคณตศาสตรไดหรอไม

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

3

วตถประสงคในการศกษา 1. เพอศกษาการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ

Interactive ทางคณตศาสตร 2. เพอศกษารปแบบการออกแบบ Web-based Interface ใหตอบสนองกบ e-Learning

แบบ Interactive ทางคณตศาสตร ขอบเขตของการวจย การวจยครงน เปนการศกษาโดยมงเนนไปทการนา Web-based Interface มาใชกบ e-Learning แบบ Interactive ทางคณตศาสตร เฉพาะเนอหาบทเรยนของนกศกษาระดบปรญญาตร มหาวทยาลยหอการคาไทย ในวชาแคลคลส เรองอนพนธของฟงกชน ประโยชนทคาดวาจะไดรบ

1. เพอทราบรปแบบการนา Web-based Interface มาใชกบ e-Learning แบบ Interactive ทางคณตศาสตร

2. เพอทราบถงวธ และลกษณะการออกแบบ Web-based Interface ใหสอดคลองกบ e-Learning แบบ Interactive ทางคณตศาสตร

3. นกศกษาระดบปรญญาตร มหาวทยาลยหอการคาไทย ทลงเรยนวชาคณตศาสตร และไดใช e-Learning ทางคณตศาสตร สามารถเรยนรโจทย เขาใจ และแกปญหาไดมากขน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

4

ระยะเวลาในการดาเนนงาน

ระยะเวลาในการดาเนนงาน

เดอน สงหาคม กนยายน ตลาคม พฤศจกายน

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

รวบรวมขอมลของระบบ

วเคราะหระบบงาน

ออกแบบระบบงาน

พฒนาระบบงาน

ตดตงระบบงาน

ทดสอบระบบงาน

รายการ สปดาห

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บทท 2 แนวคดและทฤษฎ

2.1 แนวคดทเกยวกบ e-Learning

e-Learning หรอ Electronic Learning เปนคาทกลาวถงกนมากในวงการศกษาในขณะนทงในบานเราและในตางประเทศ สอการเรยนการสอนในรปแบบ e-Learning สามารถกลาวไดวาเปนรปแบบทพฒนาตอเนองมาจาก WBI โดยมจดเรมตนจากแผนเทคโนโลยเพอการศกษาของชาต สหรฐอเมรกา (The National Educational Technology Plan'1996) ของกระทรวงศกษาธการสหรฐอเมรกา ทตองการพฒนารปแบบการเรยนของนกเรยนใหเขากบศตวรรษท 21 การพฒนาระบบการเรยนรจงมการนาเทคโนโลยอนเทอรเนตมาชวยเสรมอยางเปนจรงเปนจง ดงนนสามารถกลาวไดวา e-Learning คอ การนาเทคโนโลยอนเทอรเนต โดยเฉพาะบรการดานเวบเพจเขามาชวยในการเรยนการสอน การถายทอดความร และการอบรม ทงนสามารถแบงยคของสออเลกทรอนกสได ดงน

- ยคคอมพวเตอรชวยสอนและฝกอบรม (Instructor Led Training Era) เปนยคทอยในชวงเรมใชคอมพวเตอรในวงการศกษา จนถงป ค.ศ. 1983

- ยคมลตมเดย (Multimedia Era) อยในชวงป ค.ศ. 1984 - 1993 ตรงกบชวงทมการ

ใช Microsoft Windows 3.1 อยางกวางขวาง มการใชซดรอมในการเกบบนทกขอมล มการใชโปรแกรม PowerPoint สรางสอนาเสนอ ทงทางธรกจ และการศกษา โดยนามาประยกตสรางสอการสอน บทเรยน พรอมบนทกในแผนซด สามารถนาไปใชสอนและเรยนไดตามเวลาและสถานททมความสะดวก

- ยคเวบเรมตน (Web Infancy) อยในชวงป ค.ศ. 1994 - 1999 มการนาเทคโนโลย

เวบเขามาเปนบรการหนงของอนเทอรเนต มการประยกตใชเทคโนโลยเวบสรางบทเรยนชวยสอนและฝกอบรม รวมทงเทคโนโลยมลตมเดยบนเวบ

- ยคเวบใหม (Next Generation Web) เรมตงแตป ค.ศ. 2000 เปนตนไป มการนา

สอขอมล และเครองมอตางๆ มาประยกตสรางบทเรยน เปนการกาวสระบบ e-Learning อยางแทจรง (www.mediapl3.com/text1.html)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

6

2.1.1 วตถประสงคของ e-Learning - เพอพฒนา และปรบปรงกระบวนการจดการเรยนการสอนใหทนสมย และกวางไกล

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

(www.mediapl3.com/text1.html) 2.1.2 ความหมายของ e-Learning

ศภชย สขะนนทร (2545) ไดใหคาจากดความของคาวา e-Learning วามาจากElectronic(s) Learning ซงกคอการเรยนรทางอเลกทรอนกส และยงหมายถง Computer Learningทางคอมพวเตอรหรอเปนการเรยนรทางใหมโดยใชคอมพวเตอรมาชวยสอนแทนรปแบบการสอนเดม ซงอาจจะเปนการเรยนรในรปแบบของการใชคอมพวเตอร วดโอ ซดรอม สญญาณดาวเทยม แลน อนเทอรเนต อนทราเนต หรอแมแตลกษณะของเอกซทราเนตและสญญาณโทรทศนกได นอกจากนการเรยนในลกษณะของ e-Learning ยงเปนลกษณะการเรยนแบบออนไลน ซงการเรยนในลกษณะทเปนขอมลทางคอมพวเตอรหรออเลกทรอนกสอยในสภาพทพรอมจะใชงานอยตลอดเวลา จงทาใหเปนการเรยนการสอนทสามารถโตตอบกนไดเหมอนการเรยนในหองเรยนปกต (Interactive Technology) การเรยนแบบ e-Learningสามารถทาใหการเรยนมประสทธภาพมากยงขน ประหยดเวลาและคาใชจาย

ผศ.ดร.ถนอมพร เลาหจรสแสง (2545) ไดใหความหมายของ e-Learning ไวโดยทวๆ

ไปจะครอบคลมความหมายทกวางมากกลาวคอจะหมายถงการเรยนในลกษณะใดกได ซงใชการถายทอดเนอหาผานทางอปกรณอเลกทรอนกสไมวาจะเปนคอมพวเตอรเครอขายอนเทอรเนต อนทราเนต เอกซทราเนต หรอ ทางสญญาณโทรทศน หรอ สญญาณดาวเทยมกได ซงเนอหาสารสนเทศ อาจอยในรปแบบการเรยนทเราคนเคยกนมาพอสมควร เชน คอมพวเตอรชวยสอน (Computer-Assisted Instruction) การสอนบนเวบ (Web-Based Instruction) การเรยนออนไลน (On-line Learning) การเรยนทางไกลผานดาวเทยม หรอ อาจอยในลกษณะทยงไมคอยเปนทแพรหลายนก เชนการเรยนจากวดทศนตามอธยาศย VideoOn-Demand เปนตน

ความหมายเฉพาะเจาะจงของ e-Learning หมายถง การเรยนเนอหาหรอสอสารสนเทศสาหรบการสอนหรอการอบรม ซงใชการนาเสนอดวยอกษรภาพนง ผสมผสานกบการใชภาพเคลอนไหว วดทศน และเสยงโดยอาศยเทคโนโลยของเวบ (Web Technology) ในการถายทอดเนอหา รวมทงการใชเทคโนโลยระบบจดการคอรส (Course Management System) ในการบรหารจดการงานสอนดานตางๆ เชน การจดใหมเครองมอการสอสารตางๆ เชน E-mail,

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

7

Web board สาหรบตงคาถาม หรอแลกเปลยนแนวคดระหวางผเรยนดวยกนหรอกบวทยากร การจดใหมแบบทดสอบหลงจากเรยนจบเพอวดผลการเรยน รวมทงจดระบบใหมระบบบนทกตดตาม ตรวจสอบ และประเมนผลการเรยน โดยผเรยนทเรยนจาก E-Learning น สวนใหญแลวจะศกษาเนอหาในลกษณะออนไลน ซงหมายถงจากเครองมอทมการเชอมตอกบระบบเครอขายคอมพวเตอร

ศ.ดร.เกรยงศกด เจรญวงศกด (2544) ไดใหความหมายของการเรยนรผานสออเลกทรอนกส หรอ e-Learning วาหมายถงการเรยนรบนฐานเทคโนโลย ซงครอบคลมวธการเรยนรจากหลากหลายรปแบบ อาท การเรยนรบนคอมพวเตอร (Computer-Based Learning) การเรยนรบนเวบ (Web-Based Learning) หองเรยนเสมอนจรง (Virtual Classroom) และความรวมมอกนผานระบบดจตอล (Digital Collaboration) ผเรยนสามารถเรยนผผานสออเลกทรอนกสทกประเภท อาท อนเทอรเนต อนทราเนต เอกซทราเนต การถายทอดผานดาวเทยม (Interactive TV) และซดรอม (CD-ROM)

อ.ไพฑรย ศรฟา (SriThai.com): e-Learning คอ การเรยนการสอนทางไกลทใชสออเลกทรอนกสผานทาง World Wide Web ซงผเรยนและผสอน ใชเปนชองทาง ในการตดตอสอสารระหวางกน ผเรยนสามารถเขาถงแหลงขอมลมากมายทมอยทวโลกอยางไรขอบเขตจากด ผเรยนสามารถทากจกรรมหรอแบบฝกปฏบตตางๆ แบบออนไลน โดยใชเครองมอทชวยอานวยความสะดวกอยใน World Wide Web เปนการเรยนการสอนออนไลนทไดรบความนยมอยางมากในปจจบน เพราะไมมขดจากดเรองระยะทาง เวลา และสถานท อกทงยงสนองตอบตอศกยภาพและความสามารถของผเรยนไดเปนอยางด

บปผชาต ทฬหกรณ (2544) e-Learning ใชในสถานการณการเรยนรทมความหมาย

กวางขวาง มความหมายรวมถง การเรยนทางไกล การเรยนผานเวบ หองเรยนเสมอนจรง เปนตน โดยในสถานการณดงกลาว มสงทเหมอนกน ประการหนงคอ การใชเทคโนโลยการสอสารเปนสอกลางของการเรยน

Krutus (2000) ไดใหความหมายวา e-Learning เปนรปแบบของเนอหาสาระทสราง

เปนบทเรยนสาเรจรป ทอาจใชซดรอม เปนสอกลางในการสงผาน หรอใชการสงผานเครอขายภายใน หรออนเทอรเนต ทงนอาจจะอยในรปแบบคอมพวเตอรชวยการฝกอบรม (Computer Based Training: CBT) และการใชเวบเพอการฝกอบรม (Web Based Training: WBT) หรอการเรยนการสอนทางไกลผานดาวเทยมกได

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

8

Campbell (1999) ไดใหความหมายวา e-Learning เปนการใชเทคโนโลยทมอยในเครอขายอนเทอรเนต สรางการศกษาทมปฏสมพนธ และการศกษาทมคณภาพสง ทผคนทวโลกมความสะดวก และสามารถเขาถงไดอยางรวดเรว ไมจากดสถานทและเวลา เปนการเปดประตการศกษาตลอดชวตใหกบประชากร

ชฎล เกษมสนต e-Learning หรอ Electronic Learning คอ การสงความรไปสผเรยนโดยใช สออเลกทรอนกส(electronic media) เชน computer ทเชอมตอเครอขาย internet หรอ intranet ในหลกการทวาดวย "การเรยนการสอนทางไกล" การเรยนการสอนแบบ e-Learning นสามารถเรยนไดจาก web, CD ดวยเครองคอมพวเตอร และผสอนกบผเรยนสามารถตดตอสอสารกนไดโดยทาง e-mail, Web board และ Chat room ได 2.1.3 องคประกอบของ e-Learning

การใหบรการการเรยนแบบออนไลน หรอ e-learning มองคประกอบทสาคญ 4 สวน โดยแตละสวนจะตองไดรบการออกแบบมาเปนอยางด เพราะเมอนามาประกอบเขาดวยกนแลวระบบทงหมดจะตองทางานประสานกนไดอยางลงตว

1. เนอหาของบทเรยน สาหรบการเรยน การศกษาแลวไมวาจะเรยนอยางไรกตามเนอหาถอวาเปนสงทสาคญ

ทสด e-Learning กเชนกน อยางไรกตามเนองจาก e-learning นนถอวาเปนการเรยนรแบบใหมสาหรบวงการการศกษาในประเทศไทย ดงนนเนอหาของการเรยนแบบนทพฒนาเสรจเรยบรอยแลว จงมอยนอยมากทาใหไมเพยงพอกบความตองการในการฝกอบรม เพมพนความร พฒนาศกยภาพทงของบคคลโดยสวนตวและของหนวยงานตางๆ จงไดมการสรางเครอขายความรวมมอกบมหาวทยาลยชนนาของประเทศตางๆ ชวยกนพฒนาบทเรยนออนไลน

2. ระบบบรหารการเรยน เนองจากการเรยนแบบออนไลนหรอ e-learning นนเปนการเรยนทสนบสนนใหผเรยน

ไดศกษา เรยนรไดดวยตวเอง ระบบบรหารการเรยนททาหนาทเปนศนยกลาง กาหนดลาดบของเนอหาในบทเรยน นาสงบทเรยนผานเครอขายคอมพวเตอรไปยงผเรยน ประเมนผลความสาเรจของบทเรยน ควบคม และสนบสนนการใหบรการทงหมดแกผเรยน จงถอวาเปนองคประกอบของ e-Learning ทสาคญมาก เราเรยกระบบนวาระบบบรหารการเรยน (LMS : e-Learning Management System) ถาจะกลาวโดยรวม LMS จะทาหนาทตงแตผเรยนเรมเขามาเรยน โดยจดเตรยมหลกสตร, บทเรยนทงหมดเอาไวพรอมทจะใหผเรยนไดเขามาเรยน เมอผเรยนได

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

9

เรมตนบทเรยนแลวระบบจะเรมทางานโดยสงบทเรยนตามคาขอของผเรยนผานเครอขายคอมพวเตอร (อนเทอรเนต, อนทราเนต หรอเครอขายคอมพวเตอรอนๆ) ไปแสดงท Web browser ของผเรยน จากนนระบบกจะตดตามและบนทกความกาวหนา รวมทงสรางรายงานกจกรรมและผลการเรยนของผเรยนในทกหนวยการเรยนอยางละเอยด จนกระทงจบหลกสตร

3. การตดตอสอสาร การเรยนทางไกลโดยทวไปแลวมกจะเปนการเรยนดวยตวเอง โดยไมตองเขาชนเรยน

ปกต ซงผเรยนจะเรยนจากสอการเรยนการสอนประเภทสงพมพ วทยกระจายเสยง วทยโทรทศน และสออน การเรยนแบบ e-Learning กเชนกนถอวาเปนการเรยนทางไกลแบบหนง แตสงสาคญททาให e-Learning มความโดดเดนและแตกตางไปจากการเรยนทางไกลทวๆไปกคอการนารปแบบการตดตอสอสารแบบ 2 ทาง มาใชประกอบในการเรยนเพอเพมความสนใจความตนตวของผเรยนทมตอบทเรยนใหมากยงขน เชนในระหวางเรยนถามคาถามซงเปนการทดสอบยอยในบทเรยนเมอคาถามปรากฏขนมาผเรยนกจะตองเลอกคาตอบและสงคาตอบกลบมายงระบบในทนท เหตการณดงกลาวจะทาใหผเรยนรกษาระดบความสนใจในการเรยนไดเปนระยะเวลามากขน นอกจากนวตถประสงคสาคญอกประการของการตดตอแบบ 2 ทางกคอใชเปนเครองมอทจะชวยใหผเรยนไดตดตอ สอบถาม ปรกษาหารอ และแลกเปลยนความคดเหนระหวางตวผเรยนกบคร อาจารยผสอน และระหวางผเรยนกบเพอนรวมชนเรยนคนอนๆ โดยเครองมอทใชในการตดตอสอสารอาจแบงไดเปน 2 ประเภทดงน

- ประเภท Real-time ไดแก Chat (message, voice), White board/Text slide, Real-time Annotations, Interactive poll, Conferencing และอนๆ

- ประเภท Non real-time ไดแก Web-board, e-mail

4. การสอบ/วดผลการเรยน โดยทวไปแลวการเรยนไมวาจะเปนการเรยนในระดบใด หรอเรยนวธใด กยอมตองมการ

สอบ/การวดผลการเรยนเปนสวนหนงอยเสมอ การสอบ/วดผลการเรยนจงเปนสวนประกอบสาคญทจะทาใหการเรยนแบบ e-Learning เปนการเรยนทสมบรณ กลาวคอในบางวชาจาเปนตองวดระดบความรกอนเขาสมครเขาเรยน เพอใหผเรยนไดเลอกเรยนในบทเรยน หลกสตรท เหมาะสมกบเขามากทสด ซงจะทาใหการเรยนทจะเกดขนเปนการเรยนท มประสทธภาพสงสด เมอเขาสบทเรยนในแตละหลกสตรกจะมการสอบยอยทายบท และการสอบใหญกอนทจะจบหลกสตร ระบบบรหารการเรยนจะเรยกขอสอบทจะใชมากจากระบบบรหารคลงขอสอบ (Test Bank System) ซงเปนสวยยอยทรวมอยในระบบบรหารการเรยน (LMS : e-Learning Management System) สาหรบระบบบรหารคลงขอสอบททางโครงการฯไดพฒนาขนมานน มขดความสามารถดงน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

10

- สอบออนไลนผาน Web browser นาสอมลตมเดยมาประกอบในการสรางขอสอบ - การรกษาความปลอดภยทงในดานการรบ-สงขอสอบ - การกาหนดสทธการใชงานระบบทาไดหลายระดบ - ผสอนเปนผกาหนดรปแบบรายงานผลการสอบ - การนาคาทางสถตมาวเคราะหผลการสอบของผเรยน - สามารถวเคราะหตวขอสอบได (www.mediapl3.com/text1.html)

2.1.4 ระดบการถายทอดเนอหา

สาหรบ e-Learning แลว การถายทอดเนอหาสามารถแบงไดคราวๆ เปน 3 ระดบ ดวยกนคอ

1. ระดบเนนขอความออนไลน (Text Online) หมายถง เนอหาของ e-Learning ใน

ระดบนจะอยในรปของขอความเปนหลก e-Learning ในลกษณะนจะเหมอนกบการสอนบนเวบ (WBI) ซงเนนเนอหาทเปนขอความ ตวอกษรเปนหลก ซงมขอด กคอ การประหยดเวลาและคาใชจายในการผลตเนอหาและการบรหารจดการคอรส

2. ระดบ Low Cost Interactive Online Course หมายถง เนอหาของ e-Learning ในระดบนจะอยในรปของตวอกษร ภาพ เสยงและวดทศน ทผลตขนมาอยางงายๆ ประกอบการเรยนการสอน e-Learning ในระดบนจะตองมการพฒนา CMS ทด เพอชวยผใชในการปรบเนอหาใหทนสมยไดอยางสะดวก

3. ระดบ High Quality Online Course หมายถง เนอหาของ e-Learning ในระดบนจะอยในรปของมลตมเดยทมลกษณะมออาชพ กลาวคอ การผลตตองใชทมงานในการผลตทประกอบดวย ผเชยวชาญเนอหา ผเชยวชาญการออกแบบการสอน (instructional designers) และ ผเชยวชาญการผลตมลตมเดย (multimedia experts) ซงหมายถง โปรแกรมเมอร (programmers) นกออกแบบ กราฟก (graphic designers)และ/หรอผเชยวชาญในการผลต แอนเมชน (animation experts) เปนตน e-Learning ในลกษณะนจะตองมการใชเครองมอ (Tools) เพมเตมในการผลตและเรยกดเนอหาดวย

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

11

2.1.5 ระดบของการนา e-Learning ไปใช การนา e-Learning ไปใชประกอบกบการเรยนการสอน สามารถทาได 3 ระดบ ดงน 1. สอเสรม (Supplementary) หมายถงการนา e-Learning ไปใชในลกษณะสอเสรม

กลาวคอ นอกจากเนอหาทปรากฏในลกษณะ e-Learning แลว ผเรยนยงสามารถศกษาเนอหาเดยวกนนในลกษณะอนๆ เชน จากเอกสาร (sheet) ประกอบการสอน จากวดทศน (Videotape) ฯลฯ การใช E-Learning ในลกษณะนเทากบวาผสอนเพยงตองการ จดหาทางเลอกใหมอกทางหนงสาหรบผเรยนในการเขาถงเนอหาเพอใหประสบการณพเศษเพมเตมแกผเรยนเทานน

2. สอเตม (Complementary) หมายถงการนา e-Learning ไปใชในลกษณะเพมเตม

จากวธการสอนในลกษณะอนๆ เชน นอกจากการบรรยายในหองเรยนแลว ผสอนยงออกแบบเนอหาใหผเรยนเขาไปศกษาเนอหาเพมเตมจาก e-Learning ในความคดของผเขยนแลว ในประเทศไทย หากสถาบนใด ตองการทจะลงทนในการนา e-Learning ไปใชกบการเรยน การสอนตามปกต (ทไมใชทางไกล) แลว อยางนอยควรตงวตถประสงคในลกษณะของสอเตม (Complementary) มากกวาแคเปนสอเสรม (Supplementary) เชน ผสอนจะตองใหผเรยนศกษาเนอหาจาก E-Learning เพอวตถประสงค ใดวตถประสงคหนง เปนตน ทงนเพอใหเหมาะสมกบลกษณะของผเรยนในบานเราซงยงตองการคาแนะนาจากคร ผสอนรวมทงการทผเรยนสวนใหญยงขาดการปลกฝงใหมความใฝรโดยธรรมชาต

3. สอหลก (Comprehensive Replacement) หมายถงการนา e-Learning ไปใชใน

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

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

12

แมวาการเรยนรายบคคลผานสออเลกทรอนกสเปนเรองทมมานานหลายสบปแลว แตคาวา e-Learning กลบเปนเรองทนกการศกษาในบานเราเพงหนมาใหความสนใจกนในขณะน ทงนสวนหนงอาจเปนเพราะในวงการศกษา ระบบสาธารณปโภคและเทคโนโลยทเกยวของกบการเรยนจาก e-Learning นเพงจะมความพรอมและไดรบความนยม เปนทแพรหลายในเวลาไมนาน กอปรกบราคาของเทคโนโลยเหลานเพงจะมราคาลดลง e-Learning เปนรปแบบการเรยน ทสามารถนาไปใชไดหลายระดบ ครผสอนควรพจารณานาไปประยกตใชใหเหมาะสมกบความพรอม ความถนด ความ สนใจและความตองการของตน แตอยางไรกด ผสอนทสนใจจะนา e-Learning ไปใชกบการสอนในลกษณะสอเตม หรอ สอหลก จะตองใหความรวมมอในชวงของการออกแบบและการพฒนาอยางเตมท ทงนเพอใหไดมาซงสออเลกทรอนกสท สามารถถายทอดการสอนไดใกลเคยงกบการสอนจรงมากทสดเสยกอน นอกจากน ผสอนควรทจะตองมการศกษาหา รปแบบทเหมาะสมสาหรบการเรยนการสอนจาก e-Learning ของตนเพอใหเกดทงประสทธภาพและประสทธผลตอการ ศกษาของผเรยนอยางแทจรง 2.1.6 ประโยชนของ e-Learning 1. ยดหยนในการปรบเปลยนเนอหา และสะดวกในการเรยน การเรยนการสอนผานระบบ e-Learning นนงายตอการแกไขเนอหา และกระทาไดตลอดเวลา เพราะสามารถกระทาไดตามใจของผสอน เนองจากระบบการผลตจะใช คอมพวเตอรเปนองคประกอบหลก นอกจากนผเรยนกสามารถเรยนโดยไมจากดเวลา และสถานท

2. เขาถงไดงาย ผเรยนและผสอนสามารถเขาถง e-Learning ไดงาย โดยมากจะใช Web browser ของคายใดกได (แตทงนตองขนอยกบผผลตบทเรยน อาจจะแนะนาใหใช Web browser แบบใดทเหมาะกบสอการเรยนการสอนนนๆ) ผเรยนสามารถเรยนจากเครองคอมพวเตอรทใดกได และในปจจบนน การเขาถงเครอขายอนเตอรเนตกระทาไดงายขนมาก และยงมคาเชอมตออนเตอรเนตทมราคาตาลงมากวาแตกอนอกดวย

3. ปรบปรงขอมลใหทนสมยกระทาไดงาย

เนองจากผสอน หรอผสรางสรรคงาน e-Learning จะสามารถเขาถง server ไดจากทใดกได การแกไขขอมล และการปรบปรงขอมล จงทาไดทนเวลาดวยความรวดเรว

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

13

4. ประหยดเวลา และคาเดนทาง ผเรยนสามารถเรยนโดยใชเครองคอมพวเตอรเครองใดกได โดยจาเปนตองไปโรงเรยน หรอททางาน รวมทงไมจาเปนตองใชเครองคอมพวเตอรเครองประจากได ซงเปนการประหยดเวลามาก การเรยน การสอน หรอการฝกอบรมดวยระบบ E-Learning น จะสามารถประหยดเวลาถง 50% ของเวลาทใชครสอน หรออบรม 5. การจดการเรยนการสอนมประสทธภาพมากยงขน การถายทอดเนอหาผานทางมลตมเดยสามารถทาใหผเรยนเกดการเรยนรไดดกวาการเรยนจากสอขอความเพยงอยางเดยว หรอจากการสอนภายในหองเรยนของผสอนซงเนนการบรรยายในลกษณะ Chalk and Talk แตเพยงอยางเดยวโดยไมใชสอใด ๆ ซงเมอเปรยบเทยบกบ e-Learning ทไดรบการออกแบบและผลตมาอยางมระบบ e-Learning สามารถชวยทาใหผเรยนเกดการเรยนรไดอยางมประสทธภาพมากกวา ในเวลาทเรวกวา นอกจากนยงเปนการสนบสนนใหเกดการเรยนรทผเรยนเปนศนยกลางไดเปนอยางด เพราะผสอนจะสามารถใช e-Learning ในการจดการเรยนการสอนทลดการบรรยาย (lecture) ได และสามารถใช e-Learning ในการจดการเรยนการสอนทเนนใหผเรยนไดเปนผรบผดชอบในการจดการเรยนรดวยตนเอง (autonomous learning) ไดดยงขน 6. ผเรยนสามารถเรยนรไดตามจงหวะของตน (Self-paced Learning)

เนองจากการนาเสนอเนอหาในรปแบบของ Hypermedia เปดโอกาสใหผเรยนสามารถควบคมการเรยนรของตนในดานของลาดบการเรยนได (Sequence) ตามพนฐานความร ความถนด และความสนใจของตน นอกจากนผเรยนยงสามารถ ทดสอบทกษะตนเองกอนเรยนไดทาใหสามารถชชดจดออนของตน และเลอกเนอหาใหเขากบรปแบบการเรยนของตวเอง เชนการเลอกเรยนเนอหาเฉพาะบางสวนทตองการทบทวนได โดยไมตองเรยนในสวนทเขาใจแลว ซงถอวาผเรยนไดรบอสระในการควบคมการเรยนของตนเอง จงทาใหผเรยนไดเรยนรตามจงหวะของตนเอง 7. เกดปฏสมพนธระหวางผเรยนกบครผสอน และกบเพอนๆ ได e-Learning มเครองมอตาง ๆ มากมาย เชน Chat Room, Web Board, E-mail เปนตน ทเออตอการโตตอบ (Interaction) ทหลากหลาย และไมจากดวาจะตองอยในสถาบนการศกษาเดยวกน (Global Choice) นอกจากนน E-Learning ทออกแบบมาเปนอยางดจะเออใหเกดปฏสมพนธระหวางผเรยนกบเนอหาไดอยางมประสทธภาพ เชน การออกแบบเนอหาในลกษณะเกม หรอการจาลอง เปนตน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

14

8. สงเสรมใหเกดการเรยนรทกษะใหมๆ รวมทงเนอหาทมความทนสมย และตอบสนองตอเรองราวตางๆ ในปจจบนไดอยางทนท เพราะการทเนอหาการเรยนอยในรปของขอความอเลกทรอนกส (E-text) ซงไดแกขอความซงไดรบการจดเกบ ประมวลผล นาเสนอ และเผยแพรทางคอมพวเตอรทาใหมขอไดเปรยบสออนๆ หลายประการ โดยเฉพาะอยางยงในดานของความสามารถในการปรบปรงเนอหาสารสนเทศใหทนสมยไดตลอดเวลา การเขาถงขอมลทตองการดวยความสะดวกและรวดเรว และความคงทนของขอมล (http://learners.in.th/blog/uraithadrat/49759) 2.1.7 ปญหา e-Learning ในประเทศไทย

ปญหาของประเทศไทยอยทลกษณะของการนาเทคโนโลยทงในดานระบบและเครองมอใหมๆ เขามาใชแทนทเทคโนโลยเดม โดยพฒนาการของทงผเรยนและผสอนซงถอเปนหวใจสาคญของการพฒนา e-Learning แตในบานเรากลบยงไมไดรบความสนใจเทาทควร จงเปนเหตใหการนา e-Learning มาใชงานยงอยในวงจากด

e-Learning ควรมทศทางไปทางไหนจงจะเกดประโยชนกบสงคมอยางแทจรง จงเปนประเดนทคานงถง ซงหากพจารณาจากปญหาและอปสรรคของการใช e-Learning จากผมประสบการณมากอนอยางสหรฐอเมรกาโดยเสนอแนวทางไว 6 แนวทางในการใช e-Learning ใหเกดประโยชนสงสดคอ

- e-Learning ตองเปนมากกวาการนาเอามาใชเปนเครองมอในการนาเสนอเนอหาการ

ฝกอบรมทมการออกแบบเนอหาไวแบบเดมๆ ขณะท e-Learning ควรนามาสรางบรรยากาศการเรยนรทหลากหลายใสไวความรทนามาเสนอสามารถเชอมโยงถงการทางาน มกลไกผเรยนรสามารถเรยนรดวยตนเองไมยงยากซบซอน สามารถตอบคาถาม สาธตหรอใหคาแนะนาแนวทางแกปญหาใหผเรยนไดทนท

- ตองผลกดน e-Learning เขาสสถานประกอบการ ขยายความนาสนใจไปยงกลมผ

ทางานโดยตรง - ตองมการผสมผสานกนระหวางการใหความรในรปแบบตางๆ เพราะบางครงบางเรอง

การใหความรดวยระบบใหผานออนไลน แตในบางสถานการณกใชรวมกนไดซงกขนอยกบปจจยหลายอยางประกอบกน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

15

- องคการทจดการฝกอบรม e-Learning ควรใหความสาคญการใหความรผทเขามาในระบบมากกวาการใหความสาคญกบการออกแบบสรางคาอธบายหลกสตรใหนาสนใจหรอพฒนารปแบบวธการใหเขาถงหลกสตรของตนเองไดอยางรวดเรว

- ตองพฒนาหลกสตรใหสามารถใชประโยชนกบผเรยนซงมความสามารถในการเรยนร

ทตางกน - ตองระลกไวเสมอวาเทคโนโลยเปนปจจยรองเปนเครองมอในการสนบสนนใหการ

จดการเรยนรทาไดอยางมประสทธภาพมากขนไมใชเปนเปาหมายของความสาเรจในการเรยนรดวยระบบ e-Learning

แมวาจดเรมตนของ e-Learning จะเรมจากสถาบนการศกษาและมการดาเนนการมาก

วา 10 ป แลวกตาม แตปญหาทพบไดในประเทศทพฒนาดานนมากอนประเทศไทยคอการมแนวคดทคลาดเคลอนเกยวกบ e-Learning การทมงไปทการผลตเนอหาในรปแบบดจตอลมากกวาการจดเตรยมเนอหาและสภาพแวดลอมทเออตอการเรยนรดวยตนเองอนเปนประเดนสาคญของ e-Learning การสรางความเขาใจทตรงกนและสรางวฒนธรรมการเรยนรดวย e-Learning ใหเกดขนในระดบผสอนและผเรยนจงเปนสงทควรทาเปนลาดบแรก

ในประเทศทพฒนาแลว e-Learning อาจไมไดผลตอบแทนทคมคาหากใหความสาคญเปนเพยงแคการวงตามกระแสเทคโนโลยของสงคมโดยปราศจากความเขาใจทถกตองและปรบใชใหเหมาะสมกบสงคมไทยเพอมให e-Learning กลายเปนแคของประดบ-ตกแตงสถาบนหรอองคกรใหดทนสมยโดยปราศจากความเขาใจทถกตองของคณประโยชนแทจรงของ e-Learning 2.2 แนวคดการนา Web-based มาใชกบการเรยนการสอน

ในปจจบนเทคโนโลยนบวามบทบาทตอการศกษาเปนอยางมาก อนเทอรเนตเปนระบบเครอขาย NETWORK ทเชอมโยงเครอขายมากมายหลายเครอขายเขาดวยกน มนษยพยายามทจะใชงานเครองคอมพวเตอรใหไดประโยชนสงสด จงไดทาการเชอมโยงคอมพวเตอรหลายๆ เครองเขาดวยกนเพอใหสามารถสอสาร แลกเปลยน และใชงานขอมลตางๆ รวมกนได โดยผานทางสายสงสญญาณในระบบ จงเกดเปนระบบเครอขายคอมพวเตอรและการเชอมโยงระบบเครอขายคอมพวเตอรหลายๆ จด จนในปจจบนกลายเปนเครอขายทครอบคลมองคกรทวโลกทรจกกนในนาม อนเทอรเนต (Internet)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

16

2.2.1 ความหมายของ WBI (Web-based Instruction) ปจจบนมผใหความสาคญและมการนาเอาเวบมาใชประโยชนเพอการศกษา การจดการ

เรยนการสอนผานเวบ(Web-Based Instruction) นอกจากจะเรยกวาการจดการเรยนการสอนผานเวบ (Web-Based Learning) แลวยงม เวบฝกอบรม (Web-Based Training) อนเทอรเนตฝกอบรม (Inter-Based Training) และเวลดไวดเวบชวยสอน (WWW-Based Instruction)

กอนอนจะตองทาความเขาใจกอนวา WBI คออะไร WBI ยอมาจาก Web based instruction WBI ไมใช CAI WBI เปนเครองมอสาหรบ การจดการเรยนการสอนในรปแบบ E-Learningซงเปนสวน

หนงของ E Education และเปนสวนยอยของระบบใหญ E Commerce ดงภาพ

รป 2.1 ระบบ e-Commerce e-Education และ e-Learning

WBI เปนการจดการศกษาในรปแบบ Web Knowledge Based on Line เปนการจดสภาวการณการเรยนการสอน ในรปแบบ On Lineโดยมขอกาหนด การจะเปน WBI จะตองมสงตอไปนอยางสมบรณ ไดแก

- ความเปนระบบ - ความเปนเงอนไข - การสอสารหรอกจกรรม

- Learning Root

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

17

การสอสารและกจกรรม

รป 2.2 รปแบบการสอสารของ WBI

กจกรรมจะเปนตวกระตนใหนกเรยนเกดการปฏสมพนธ หรอการสอสารขนภายในสถานการณการเรยน โดยไมตางจากหองเรยนปกตอาจเรยกวา Virtual Classroom กจกรรมจะเปนตวชวยใหการเรยนเขาสเปาหมาย ไดงายขน เชน ใช Mail Chat Webboard Search ฯลฯ ตดตออาจารยหรอเพอนรวมชนเรยนเพอถามขอสงสย (http://www.thaiwbi.com/topic/WBI)

2.3 แนวคดการออกแบบ Web-based Interface 2.3.1 ความหมายเวบไซต

ดวงพร เกยงคา (2549) ไดใหความหมาย เวบไซต (Web Site) คอ กลมของเวบเพจทเกยวของสมพนธกน เชน กลมของเวบเพจทใหขอมลเกยวกบประวต รวมทงสนคาและบรการของบรษทหนง เปนตน ภายในเวบไซตนอกจากเวบเพจหรอไฟล HTML แลว ยงประกอบดวยไฟลชนดอนๆ ทจาเปนสาหรบสรางเปนหนาเวบเพจ เชน รปภาพ, มลตมเดย, ไฟลโปรแกรมภาษาสครปต และไฟลขอมลสาหรบดาวนโหลด เปนตน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

18

2.3.2 ความหมายโฮมเพจ ดวงพร เกยงคา (2549) ไดใหความหมาย โฮมเพจ (Home Page) คอ หนาแรกซงเปนทางเขาหลกของเวบไซต ปกตเวบเพจทกๆ หนาในเวบไซตจะถกลงค (โดยตรงหรอโดยออมกตาม) มาจากโฮมเพจ ดงนนบางครงจงมผใชคาวาโฮมเพจโดยหมายถงเวบไซตทงหมด แตความจรงแลวโฮมเพจหมายถงหนาแรกเทานน ถาเปรยบเทยบกบรานคา โฮมเพจกเปนเสมอนหนารานนนเอง ดงนนจงมกถกออกแบบใหโดดเดนและนาสนใจมากทสด 2.3.3 ความหมายเวบเพจ ดวงพร เกยงคา (2549) ไดใหความหมาย เวบเพจ (Web Page) คอ หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบอยในรปแบบไฟล HTML (HyperText Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนานนเอง ภายในเวบเพจอาจประกอบไปดวยขอความ ภาพ เสยง วดโอ และภาพเคลอนไหวแบบมลตมเดย นอกจากนเวบเพจแตละหนาจะมการเชอมโยงหรอ “ลงค” (Link) กน เพอใหผชมเรยกดเอกสารหนาอนๆ ทเกยวของไดสะดวกอกดวย 2.3.4 ววฒนาการของเวบไซต

ในปจจบนเทคโนโลยเวบไซต มความกาวหนาไปมาก เมอเทยบกบยคแรกๆขอการพฒนาเวบไซตจะเหนไดวาผศกษาทางดานนจะตองใชความพยายามเปนอยางมากตองใชเวลานานและเครองมอหลายตวในการพฒนาเวบขนมาแตละเวบไซต แตในปจจบนสามารถทาไดรวดเรวมากยงขนและสามารถเรยนรไดงายและมเครองมอชวยสรางทงายและสะดวก สาหรบยคตางๆของเทคโนโลยเวบไซต สามารถแบงไดเปน 3 ยคใหญๆ ดงน (http://gotoknow.org/blog/toshikung/60481)

- ยคท1 Static Web เปนการเขยนเวบโดยใชภาษา HTML ลวนๆ อยางมากกมการใชสครปตฝงไคลเอนต เชน JavaScript VBScript หรอ Java Applet สวนใหญจะนยมใชในหมนกเรยน และใชสรางโฮมเพจสวนตว บทความทางวชาการ เปนตน

- ยคท 2 Dynamic Web ไดรบการพฒนามาจากยคท 1 มการใชสครปตทางฝงเซรฟเวอร มาชวยในการเพมความสามารถของ HTML ในการตดตอกนระหวางเซรฟเวอร อยางฐานขอมล หรออาศยพลงในการประมวลผลของเวบเซรฟเวอรเพอทางานบางอยาง เชน Search Webboard Guestbook Chat room Webmail โดยทเทคโนโลยในการพฒนาเวบในชวงแรกคอ CGI ภาษาทใชเขยนสครปตนเชน C Perl ตอมาไดมการพฒนาเทคโนโลยทมการทาคลายๆ CGI เพอทางานทางฝงเซรฟเวอร อาทเชน ASP PHP JSP เปนตน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

19

-ยคท 3 Web services เปนรปแบบบรการยคใหมในวงการเวบ ตวอยาง Web service ทเหนเดนชด เชน Microsoft Passport ทใชบรการตรวจสอบความเปนตวตนจรง ผานเวบ ภาษาทใชเปนตวกลางในการพฒนาเวบเซอรวสคอ XML นนเอง IBM ไดนยามความหมายอยางเปนทางการของ Web Serviceวาเวบเซอรวส คอ Web Application ยคใหมทประกอบดวยสวนยอยๆมความสมบรณในตวเอง สามารถตดตง คนหา เรมทางานไดผานเวบ Web Service สามารถทาอะไรกไดตงแตงานงายๆ เชนดงขอมล จนถงกระบวนการทางธรกจทซบซอน เมอ Web Service ตวใดตวหนงเรมทางาน Web Service ตวอนกสามารถรบรและเรมทางานไดอกดวย 2.3.5 ขนตอนการออกแบบเวบไซต ดวงพร เกยงคา (2549) ไดอธบายขนตอนการออกแบบเวบไซตวา ในการพฒนาเวบไซตเราควรกาหนดเปาหมาย และวางแผนไวลวงหนา เพอใหการทางานในขนตอๆ ไปมแนวทางทชดเจน เรองหลกๆ ทเราควรทาในขนตอนนประกอบดวย

1. กาหนดวตถประสงคของเวบไซต วาจะจดทาเวบไซตเกยวกบอะไร เชนการศกษา เปนตน

2. กาหนดกลมผชมเปาหมาย เพอทจะไดจดโทนส รปภาพ กราฟก หนาตาของเวบเพจใหเหมาะสมกบกลมเปาหมาย

3. เตรยมแหลงขอมล เพอทจะไดนาเนอหาสาระมานาเสนอไดอยางครบถวนและสมบรณ

4. เตรยมทกษะหรอบคลากร เนองจากเวบไซตทมเนอหามากๆ กจาเปนตองมบคลากรเพอพฒนาเวบไซต ไมวาจะเปนการดแลเวบเซรฟเวอร กราฟกดไซน ทมความรความสามารถเฉพาะดาน เปนตน

5. เตรยมทรพยากรตางๆ เทาทมความจาเปน เชน โปรแกรมตางๆ ทงในดานระบบฐานขอมล และมลตมเดย โปรแกรมสรางภาพเคลอนไหว เปนตน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

20

2.3.6 องคประกอบของการออกแบบเวบไซต ตองคานงถง 1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใชงานไดสะดวก ไมม

กราฟกหรอตวอกษรทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไมมากจนเกนไปทาใหวนวาย

2. ความสมาเสมอ ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนา

สไตลของกราฟก ระบบเนวเกชนและโทนส ควรมความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ การออกแบบเวบไซตควรคานงถงลกษณะขององคกร เพราะ

รปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนน ๆ เชน ถาเปนเวบไซตของทาง ราชการ จะตองดนาเชอถอไมเหมอนสวนสนก ฯลฯ

4. เนอหาทมประโยชน เนอหาเปนสงทสาคญทสดในเวบไซต ดงนนควร จดเตรยม

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

5. ระบบเนวเกชนทใชงานงาย ตองออกแบบใหผใชเขาใจงายและใชงานสะดวก ใช

กราฟกทสอความหมายรวมกบคาอธบายทชดเจน มรปแบบและลาดบของรายการทสมาเสมอ เชน วางไว ตาแหนงเดยวกนของทกหนา

6. ลกษณะทนาสนใจ หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพของ

องคประกอบตางๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชส การใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากน ลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล

7. การใชงานอยางไมจากด ผใชสวนใหญสามารถเขาถงไดมากทสด เลอกใช

บราวเซอรชนดใดกไดในการเขาถงเนอหา สามารถแสดงผลไดทกระบบปฏบตการและความละเอยดหนาจอตางๆ กนอยางไมมปญหา เปนลกษณะสาคญสาหรบผใชทมจานวนมาก

8. คณภาพในการออกแบบ การออกแบบและเรยบเรยงเนอหาอยางรอบคอบ สราง

ความรสกวาเวบไซตม….คณภาพ ถกตอง และเชอถอได

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

21

9. ระบบการใชงานทถกตอง การใชแบบฟอรมสาหรบกรอกขอมลตองสามารถกรอกไดจรงใชงานไดจรง ลงคตางๆ จะตองเชอมโยงไปหนาทมอยจรงและถกตอง ระบบการทางานตางๆ ในเวบไซตจะตองมความแนนอนและทาหนาทไดอยางถก (http://anntaro.blogspot.com/2008/10/blog-post_6839.html) 2.3.7 ทฤษฎสในการออกแบบเวบไซต

สดา (Black) เปนสแหงความตาย ความมด ความนากลว ความผด พลงแหงปศาจ สงเรนลบอานาจ ความเขม เปนตน ซงสวนใหญคณสามารถเหนงานออกแบบทใชสดาในโปสเตอรหนงมกจะออกแบบใหดลกลบ นากลว หรอชวนใหเขาไปคนหาความจรง

สทอง หรอ สเหลอง (Gold) เปนสทแสดงถงความมงคง มงม อบอน เปนมตร

สรางสรรค หรอนกคดคน ประดษฐสงใหมๆ อสระ ความเมตตา การมองโลกในแงด เปนตน แตในบางครงอาจใชในความหมายทางดานลบ เชน ความหงหวง ขอจฉา ความพรธ ความขสงสย หรอ การหลอกลวง กไดในวงการวารสาร สเหลองยงหมายถง ความไมรบผดชอบ อกดวย

สแดง (Red) เปนสทแสดงถง ความรอนแรง อนตราย เรองเรงดวน ฉกเฉน ความตนเตนความรก โรแมนตก ความเจบปวด ความเผดรอน ความทรงจา ความกลาหาญ ความเปนเจาของความทะเยอทะยาน พลงแหง Sex ในหลายประเทศจะใชสแดงในความหมายตางกน เชน ประเทศกรก สแดงจะหมายถง การตอสรบราฆาฟน แตประเทศแอฟรกาใต จะหมายถง ความเศราโศก

สเทา (Gray) เปนสทแสดงถง ความมนคง ปลอดภย สมาเสมอ ผทมอานาจ บคลกทแขงแกรงความคลาสสค ความตกตา ความรสกหดห มวหมอง

สขาว (White) เปนสทแสดงถงความบรสทธ สะอาด ผองใส ความหวง ความถกตอง

ความจรงการไวทกข ความชวยเหลอ ความเรยบงาย ความเรยบรอย

สนาเงน (Blue) เปนสทแสดงถง ความมนคง ความสมาเสมอ เสถยรภาพ ความแนนอน ความแขงแรง ความเปนผนา นา ความเยน ความสะอาดสะอาน ความสบาย ความไววางใจ คลาสสค ความรสกออนไหว หวงอารมณ ในประเทศจน สนาเงน หมายถง เดกผหญงตวเลกๆ ในขณะทในอหราน จะหมายถง การไวทกข

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

22

สมวง (Purple) เปนสทแสดงถง ความเปนเจานาย กษตรย การทต แฟชน เกย ในสหรฐจะใชสมวงสาหรบทหารทถกฆา ในขณะทลโอนาโด นาวนซ จตกรชอดง กลาววาสมวงออนจะทาใหเขามพลงทางความคดมากขน และหากนาสมวงเปนสหองสาหรบเดก จะทาใหเดกเกดจนตนการ

สนาตาล (Rust) เปนสทแสดงถง ความสมบกสมบน ดน สนม ความแหงแลง ความ

เปนมตรความซอสตย การไวใจ นาราคาญ ทรมาน เหนแกตว แขงแกรง สเขยว (Green) เปนสทแสดงถงความสดชน ตนไม การเจรญเตบโต เงน ความหนม

สาวสงแวดลอม การผอนคลาย ความเปนธรรมชาต และสเขยวยงเปนสประจาชาตของประเทศไอรแลนด อกดวย

สชมพ (Pink) เปนสทแสดงถง ความเปนผหญง ออนไหว ความรก ความนมนวล นารก วยหวานสภาพออนโยน ทะนถนอม ขอาย

สสม (orange) เปนสทแสดงถง แรงบนดาลใจเตมเปยม พลง ความสาคญ ความอบอน

ความกรณา หยงยโส จองหอง มทฐ (http://www.dek-d.com/board/view.php?id=808866)

2.4 เครองมอในการออกแบบ e-Learning แบบ interactive 2.4.1 โปรแกรม Macromedia Dreamwaver 8

รป 2.3 โปรแกรม Macromedia Dreamweaver

อะโดบ ดรมวฟเวอร (Adobe Dreamweaver) หรอชอเดมคอ แมโครมเดย ดรมวฟเวอร

(Macromedia Dreamweaver[1]) เปนโปรแกรมแกไข HTML พฒนาโดยบรษทแมโครมเดย (ปจจบนควบกจการรวมกบบรษท อะโดบซสเตมส) สาหรบการออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML ในการพฒนาโปรแกรมทมการรวมทงสองแบบเขาดวยกนแบบน ทาให ดรมวฟเวอรเปนโปรแกรมทแตกตางจากโปรแกรมอนๆ ใน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

23

ประเภทเดยวกน ในชวงปลายปทศวรรษ 2533 จนถงปพ.ศ. 2544 ดรมวฟเวอรมสดสวนตลาดโปรแกรมแกไข HTML อยมากกวา 70%

ดรมวฟเวอรมทงในระบบปฏบตการแมคอนทอช และไมโครซอฟทวนโดวส ดรมวฟเวอรยงสามารถทางานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจาลองอยาง WINE ได รนลาสดคอ ดรมวฟเวอร CS3

ดรมวฟเวอร สามารถทางานกบภาษาคอมพวเตอรในการเขยนเวบไซตแบบไดนามคซงมการใช HTML เปนตวแสดงผลของเอกสาร เชน ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถงการจดการฐานขอมลตางๆ อกดวย และในเวอรชนลาสด (เวอรชน 8) ยงสามารถทางานรวมกบ XML และ CSS ไดอยางงายดาย (http://www.webthaidd.com/dreamweaver/) 2.4.2 โปรแกรม Adobe Photoshop CS3

รป 2.4 โปรแกรม Adobe Photoshop CS3

Photoshop เปนโปรแกรมทางดานกราฟกทคดคนโดยบรษท Adobe ทใชกนใน

อตสาหกรรมการพมพระดบโลก เปนทรจกกนดในกลมนกออกแบบสอสงพมพทวไป โปรแกรม Photoshop สามารถแลกเปลยนไฟลตาง ๆ และนาไปใชงานรวมกบโปรแกรมอน ๆ ไดอกอาทเชน Illustrator, PageMaker, ImageReady, Acrobat ซงโปรแกรมเปลานกอยในตระกล Adobe เชนเดยวกน โปรแกรม Photoshop เรมออกมาเวอรชนแรก คอ Photoshop 2 และมการพฒนามาเปนเวอรชน 2.5, เวอรชน 3, เวอรชน 4, เวอรชน 5, เวอรชน 5.5, เวอรชน 6, เวอรชน 7 และไดพฒนาตอเนองมาจนกระทงรนปจจบน รน CS2 (เวอรชน 9) ซงยงรวมเอาโปรแกรม Adobe ImageReady รวมเขาไวในโปรแกรม Photoshop นดวย กลาวคอเมอลงโปรแกรม Photoshop แลวกจะมโปรแกรม ImageReady เขามาโดยอตโนมต เพอใหสอดคลองกนในการใชงาน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

24

โปรแกรมโฟโตชอปเปนโปรแกรมทมความสามารถในการจดการไฟลขอมลรปภาพทมประสทธภาพ การทางานกบไฟลขอมลรปภาพของโฟโตชอปนน สวนใหญจะทางานกบไฟลขอมลรปภาพทจดเกบขอมลรปภาพแบบRaster โฟโตชอปสามารถใชในการตกแตงภาพเลกนอย เชน ลบตาแดง, ลบรอยแตกของภาพ, ปรบแกส, เพมสและแสง หรอการใสเอฟเฟกตใหกบรป เชน ทาภาพสซเปย, การทาภาพโมเซค, การสรางภาพพาโนรามาจากภาพหลายภาพตอกน นอกจากนยงใชไดในการตดตอภาพ และการซอนฉากหลงเขากบภาพ

โฟโตชอปสามารถทางานกบระบบส RGB, CMYK, Lab และ Grayscale และสามารถจดการกบไฟลรปภาพทสาคญได เชน ไฟลนามสกล JPG, GIF, PNG, TIF, TGA โดยไฟลทโฟโตชอปจดเกบในรปแบบเฉพาะของตวโปรแกรมเอง จะใชนามสกลของไฟลวา PSD จะสามารถจดเกบคณลกษณะพเศษของไฟลทเปนของโฟโตชอป เชน เลเยอร, ชนแนล, โหมดส รวมทงสไลส ไดครบถวน

โฟโตชอปสามารถใชในการสรางเวบเพจไดโดยใชโปรแกรมรวมทมาพรอมกบโฟโตชอป ชอ อมเมจเรดด Adobe ImageReady โดยการออกแบบสามารถทาไดในทงโฟโตชอปหรออมเมจเรดด และความสามารถในการทาเวบ เชน การใสลงก, การทาภาพเคลอนไหว, การทาปมบงคบ สามารถทาไดในอมเมจเรดด และเซฟออกมาในรปแบบเวบเพจในนามสกล HTML(www.wikipedia.org) 2.4.3 โปรแกรม Macromedia Flash 8

รป 2.5 โปรแกรม Macromedia Flash 8

อะโดบ แฟลช (Adobe Flash) (ในชอเดม ชอกเวฟแฟลช - Shockwave Flash และ แมโครมเดยแฟลช - Macromedia Flash) เปนโปรแกรมทใชในการเขยนสอมลตมเดยทเอาไวใชสรางเนอหาเกยวกบ Flash ซงตว Flash Player พฒนาและเผยแพรโดย อะโดบซสเตมส

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

25

(เรมตนพฒนาโดยบรษท ฟวเจอรแวร ตอนหลงเปลยนเปน แมโครมเดย ซงภายหลงถกควบรวมกจการเขากบ อะโดบ ) ซงเปนโปรแกรมททาให เวบเบราวเซอร สามารถแสดงตวมนได ซงมนมความสามารถในการรองรบ ภาพแบบเวกเตอร และ ภาพแบบแรสเตอร และมภาษาสครปตทเอาไวใชเขยนโดยเฉพาะเรยกวา แอกชนสครปต (ActionScript) และยงสามารถเลนเสยงและวดโอ แบบสเตรโอได

แตในความหมายจรงๆ แลว แฟลช คอโปรแกรมแบบ integrated development environment (IDE) และ Flash Player คอ virtual machine ทใชในการทางานงานของไฟล แฟลชซงในภาษาพดเราจะเรยกทงสองคานในความหมายเดยวกน: "แฟลช" ยงสามารถความความถงโปรแกรมเครองมอตางๆตวแสดงไฟลหรอ ไฟลโปรแกรม

แฟลชเรมมชอเสยงประมาณป ค.ศ. 1996 หลงจากนน เทคโนโลยแฟลชไดกลายมาเปนทนยมในการเสนอ แอนเมชน และ อนเตอรแอกทฟ ในเวบเพจ และในโปรแกรมหลายๆ โปรแกรมระบบ และ เครองมอตางๆ ทมความสามารถในการแสดง แฟลชได และ แฟลชยงเปนทนยมในการใชสราง แคอมพวเตอรแอนเมชนโฆษณาออกแบบสวนตางๆ ของเวบเพจใสวดโอบนเวบ และอนๆ อกมากมาย (www.wikipedia.org)

ไฟล Flashในบางครงอาจเรยกวา "flash movies"โดยทวไปกบไฟลทมนามสกล .swf และ .flv แฟลชเปนโปรแกรมทมชอเสยงมากของทางบรษทแมโครมเดย ซงตอมาไดถกซอโดยอะโดบ (http://www.adobe.com/) ประวต

ในเดอนธนวาคม ป ค .ศ . 1996 แมโครมเดยไดเปดตวโปรแกรม vector-based animation ชอวา FutureSplash แลวหลงจากนนไดเผยแพรมนในฐานะ Flash 1.0. Macromedia Flash 2 ไดถกวางจาหนายในป ค.ศ. 1997 พรอมเพมความสามารถในการรองรบ เสยงสเตอรโอ และ การใสภาพแบบ bitmap.

ไมนานนกปลกอน Flash Player ถกปลอยใหดาวนโหลดผานหนาเวบของ แมโครมเดย แตในป ค.ศ. 2000 Flash Player ไดตดตงมาพรอมกบโปรแกรมคนดเวบ อยาง Netscape และ Internet Explorer. สองปถดมา ไดตดตงมาพรอมกบ Windows และ Mac OS

ในเดอนกนยายน ค.ศ. 2001, ผลสารวจเกยวกบแมคโครมเดยซงสารวจโดย Media Metrix แสดงใหเหนวาจาก 10 ในเวบไซตยกษใหญในอเมรกา 7 เวบไซตมการใชเนอหาจากแฟลช แมโครมเดย เจเนเรเตอร เปนจดเรมตนจดแรกจากแมโครมเดยทแบงการดไซนจากเนอหาในไฟลแฟลช เจเนเรเตอร 2.0 ไดออกวางจาหนายในเดอนเมษายน ค.ศ. 2000 และมความสามารถในการเปนตวจาลองเซรฟเวอรแบบเรยลไทมในการสรางเนอหาแฟลชใน รน Enterprise. เจเนเรเตอร ถกยกเลกจากแผนงานในป ค.ศ. 2002 โดยเขาไปรวมเทคโนโลยใหม เชน Flash Remoting และ เซรฟเวอร โคลดฟวชน (http://www.wikipedia.com)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

26

รปแบบไฟลและนามสกลไฟลทเกยวของ - ไฟล .swf เปนไฟลทสมบรณ, ถก compiled และ published ไฟลแลว ซงไมสามารถ

แกไขดวย Macromedia Flash ไดอกตอไป. อยางไรกตาม, ยงมโปรแกรม '.swf decompilers' อยดวย.

- ไฟล .fla เปนไฟลตนฉบบของโปรแกรม Flash. โปรแกรมทใชเขยน Flash สามารถแกไขไฟล FLA และ compile มนใหเปนไฟล .swf ได. อยางไรกตาม รปแบบไฟล FLA ยงคงไมกาหนดเปนแบบ "เปด

- ไฟล .flv เปนไฟลวดโอ Flash, ซงสรางโดย Macromedia Flash, Sorenson Squeeze, หรอ On2 Flix.

- ไฟล AVI เปนไฟลวดโอ, เปนคายอของ Audio Video Interleave. ซง Flash สามารถสรางไฟลในรปแบบนได.

- ไฟล .spa คอไฟลเอกสารของ FutureSplash. -ไฟล .xml คอไฟล configuration ของ flash ซงใชเกบขอมลทไมตองการคอมไพลใหม

เชน link เปนตน. 2.4.3 โปรแกรม Adobe Captivate 3.0

รป 2.6 โปรแกรม Adobe Captivate 3

บณฑต พฤฒเศรณ (2551) ไดอธบายรายละเอยดโปรแกรม Adobe Captivate วาเปนโปรแกรมทพฒนามาจากคาย Macromedia โดยเรมจากเวอรชน 1.0 ตอมาไดพฒนารวมกบบรษท Adobe พรอมไดออกเวอรชน 2.0 และเวอรชน 3 ในปจจบน ซงโปรแกรมถกพฒนาขนเพอตอบสนองการจดทาบทเรยนอเลกทรอนกส (e-Learning) ทมคณภาพ รวมถงการสรางมาตรฐานของการผลตสอบทเรยนแบบ SCORM มาดวย ในปจจบนโปรแกรม Adobe

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

27

Captivate มขดความสามารถสงในการพฒนาสอบทเรยนดวยตนเอง รวมถงรปแบบการจดทาขอสอบออนไลนแบบใหม จดเดนทสาคญของโปรแกรม Adobe Captivate

- สรางนวตกรรมสอการเรยนร หรอสอนาเสนอมลตมเดยไดอยางงาย - สามารถนา Slides หรอ PowerPoint มาสรางสอบทเรยนตอได - สามารถสรางสอแบบตดตอวดโอทงภาพนง และภาพเคลอนไหวได - สามารถทาการบนทกเสยงลงในสอบทเรยนและตดตอเสยงได - การจบหนาจอคอมพวเตอร (Screen Capture) ไดทงภาพและเสยงบรรยาย เหมาะ

สาหรบนาไปใชเปนสอการสอนโปรแกรมคอมพวเตอร - การสรางแบบวดประเมนผล หรอแบบทดสอบไดงาย - การนาเขารปแบบไฟลไดหลายประเภทเชน .jpg, .swf, .mp3 เปนตน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บทท 3

ขนตอนการออกแบบ และการพฒนาระบบ

ระบบ e-Learning แบบ Interactive ทางคณตศาสตร จะถกออกแบบใหแสดงผลบนเวบไซต โดยใชเครองมอในการสรางคอ โปรแกรม Adobe Photoshop CS3, Adobe Captivate

3.0, Macromedia Flash 8, Macromedia Dreamweaver 8 และใชภาษา HTML (HyperText

Markup Language) ในการแสดงผลโครงสรางสวนประกอบตางๆ ซงการออกแบบมงเนนใหแสดงผลเชงปฏสมพนธกบผเรยนวชาคณตศาสตรในหวขอเรองอนพนธ

3.1 สวนประกอบของ e-Learning แบบ Interactive (Requirement)

e-Learning แบบ Interactive จะศกษาสวนประกอบตงแตเนอหาในบทเรยนในเรองอนพนธ เพอเชอมโยงการวางรปแบบการแสดงผล โดยไดกาหนดรปแบบการแสดงผลใหนาสนใจ และทางเลอกเมนทจะแสดงไวในเวบไซต

แผนภมท 3.1 วเคราะหสวนประกอบ e-Learning

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  29

3.1.1 หนาจอแสดงผลในสวนหนาแรกของ e-Learning

เนอหาหนาแรกจะกาหนดใหแสดงผลโดยรปแบบของ HTML (HyperText

Markup Language) โดยใสรายละเอยดภาพเคลอนไหว (Flash animation) เพอสรางความหนาสนใจ พรอมทงขอความตอนรบเขาสบทเรยน และทาการใสทางเลอกเมนแบบ interactive ซงม 3 ทางเลอกดงน

- บทนา จะแนะนาถงวชาคณตศาสตรในเรอง “อนพนธ” วาเปนอยางไร

- เนอหา จะแสดงเนอหาบทเรยนตางๆ ทงตวอยาง และโจทยแบบ Interactive

เพอสรางความนาสนใจแกผเรยน โดยเนอหาจะถกจดแบงหมวดหมตามบทเรยน

- กราฟฟงกชน จะแสดงเสนกราฟทสอดคลองกบเนอหาบทเรยน โดยผเรยนสามารถกาหนดคาตวแปรตางๆไดเอง

- แบบฝกหด จะแสดงแบบฝกหดแบบ Interactive ซงผเรยนจะมสวนรวมในการใสคาถาม หรอตวอยางตวแปรทอยากทราบไดเอง

3.1.2 หนาจอแสงผลในสวนบทนา

หนาแสดงผลในสวนบทนา นน จะถกเชอมโยง (Link) มาจาก หนาแสดงผลในสวนหนาแรก และจะแนะนาเนอหาของบทเรยนในเรอง “อนพนธ” (Derivative) โดยจะบอกถงรปแบบ และการเปรยบเทยบอนพนธในแตละชนด ซงจะถกสรางใหผเรยนมปฏสมพนธรวมกบบทเรยน เชน การวางเมาสบนกลองขอความอนพนธทตองการทราบ กจะปรากฏกลองขอความอธบาย การสรางในสวนบทนาจะใชเครองมอโปรแกรม Macromedia Flash 8 เปนหลกในการสราง และบนทกเปนไฟล Flash โดยมนามสกลไฟลเปน .SWF สาหรบรปภาพกราฟกจะใชเครองมอโปรแกรม Adobe Photoshop CS3 ในการออกแบบ

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  30

รปท 3.1 หนาจอแสดงผลในสวนบทนา

3.1.3 หนาจอแสดงผลในสวนเนอหา

หนาจอแสดงผลในสวนเนอหา (ดงรปท 3.2) เมอเลอกฟงกชนทางเลอกเมนเนอหาบทเรยน ซงมเนอหาบทเรยนในเรองอนพนธ ทง 8 เรอง และในแตละบทเรยนจะออกแบบใหแตกยอยเมนหวขอลงไป โดยแตและหวขอยอยตลอดจนบทเรยน จะถกเชอมโยงใหผเรยนสามารถกลบมาในการแสดงผลกอนหนา หรอเลอกขามไปยงบทเรยนทตองการได จากการเลอกฟงกชนทางเลอกเมนเนอหาบทเรยนในแตละบทเรยนนน

รปท 3.2 หนาจอแสดงผลในสวนเนอหา

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  31

3.1.4 หนาจอแสดงผลในสวน แบบฝกหด

หนาแสดงผลในสวนแบบฝกหด จะถกออกแบบประสานกบการเขยนโปรแกรม เพอควบคมใหแบบฝกหดสามารถรบคาตวแปรทผเรยนตองการใสคาเพอหาคาตอบดวยตนเอง นอกจากนแบบทดสอบจะแสดงผลตามลาดบขน (Hierarchy) เพอใหผเรยนเกดความเขาใจเปนขนตอน พรอมทงรายงานการแนะนา และคะแนนในแตละสวน

รปท 3.3 หนาจอแสดงผลในสวนแบบทดสอบ

3.2 ขนตอนการออกแบบโครงสรางบทเรยน

ในการออกแบบโครงสรางบทเรยนจะแยกดาเนนการ 2 สวนคอ การออกแบบในสวนบทเรยน และการออกแบบในสวนของการประสานเขาส Web-base สาหรบเครองมอทใชในการออกแบบโครงสรางบทเรยนมดงน Adobe Photoshop CS3, Adobe Captivate 3.0,

Macromedia Flash 8 และMacromedia Dreamweaver 8 ขนตอนการออกแบบมดงน

3.2.1 การเตรยมเนอหาบทเรยน

การเตรยมเนอหาบทเรยน จะทาการแยกเนอหาในเรองอนพนธ และจดแบงหมวดหมหวขอยอย โดยการสแกน (Scan) บทเรยน เนองจากบทเรยนทางคณตศาสตรในเรองอนพนธ จะประกอบไปดวยสตรทางคณตศาสตรทมคาตวแปรตางๆ มากมาย อกทงยงมการแสดงเสนกราฟในการประกอบ หากนามาพมพขนใหม อาจทาใหสตรทางคณตศาสตร และรปประกอบเกดการผดพลาด และกนระยะเวลานาน จงทาการสแกน (Scan) เขาเปนไฟล

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  32

อเลกทรอนกส และจดหมวดหมสตรตวแปร พรอมรปประกอบทจะใชในการประกอบการอธบายในหนาเนอหา

รปท 3.4 เนอหาทไดจากการ Scan

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  33

หลงจากไดไฟลภาพทตองการ จะนาไฟลภาพเขาสโปรแกรม Adobe Photoshop CS3

เพอตดแยกระหวางสตรทางคณตศาสตร และรปภาพประกอบ พรอมทงลดขนาดไฟลภาพใหเลกลงแตยงคงไวซงคณภาพของรปเพอนาไปใชในการสรางบทเรยนตอไป

รปท 3.5 รปทไดจากตดภาพดวยโปรแกรม Adobe Photoshop

3.2.2 การวางโครงสรางการแสดงผล

การแสดงผลจะทาการวางโครงสรางตามเนอหาบทเรยน โดยจะออกแบบและสรางสวนตดตอกบผเรยนในสวนหนาแรก และจดเรยงตามเมนตางๆ

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  34

แผนภมท 3.2 โครงสรางการแสดงผลในสวนเนอหา

3.2.3 การออกแบบและสรางสวนของบทเรยน

การออกแบบ และสรางสวนของบทเรยนจะเรมจากหนาแสดงผลในสวนหนาแรก ตามการวางโครงสรางการแสดงผล เรยงไปตามเมนตางๆ

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  35

1. การออกแบบหนาแสดงผลในสวนหนาแรก การออกแบบหนาแสดงผลในสวน หนาแรกจะเรมจากการใชเครองมอ Macromedia Flash 8 ในการวางสวนประกอบใหหนาสนใจ โดยการสราง

- พนหลง จะเลอกใช wallpaper สขาวเพอสรางความสบายตาตอผเรยน

- ขอความแบบเคลอนไหว (Text Animation) เพอดงดดความนาสนใจ

- รปภาพเคลอนไหว (Picture Animation) เพอความสวยงาม

- ปมกดแบบ interactive เพอตอบสนองความตองการในการเขาสบทเรยนตางๆ และทาการเชอมโยง (Link) ไปยงหนาแสดงผลในสวน บทนา เนอหา และแบบทดสอบตามลาดบ

รปท 3.6 การสรางหนาจอแสดงผลในสวนหนาแรก โดยโปรแกรม Macromedia Flash 8

สาหรบการสรางสวนประกอบแบบเคลอนไหว (Animation) จะถกสรางแบบคลปภาพยนตร (Movie Clip) ซงสามารถแสดงการเคลอนไหว และจงหวะการแสดงผลทเปนอสระจากพนหลง เพองายตอการแกไข และการกาหนดชวงเวลาสาหรบนาเสนอ

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  36

รปท 3.7 ชนงานหนาแสดงผลในสวนหนาแรก

2. การออกแบบหนาแสดงผลในสวนเนอหา การออกแบบหนาแสดงผลในสวน เนอหา จะใชเครองมอ Adobe Captivate 3 โดยออกแบบตามการวางโครงสรางการแสดงผล และเรยงลาดบเขาสเนอหา ซงในเนอหาแตละสวนจะถกจดเรยงจามหวขอเรอง โดยสามารถเชอมโยงไปยงเนอหากอนหนา หรอสวนทตองการเรยน

รปท 3.8 การเชอมโยงของเนอหาในแตละหวขอ

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  37

ในการออกแบบโดยใชโปรแกรม Adobe Captivate 3 จะเลอกสรางชนงานแบบการใสพนหลง (Background Image) เพอนารปภาพทไดเตรยมไวมาใส และกาหนดขนาดความละเอยดของภาพเปน 800 x 600 หนวยเปน Pixel เพอสามารถประกอบเขากบตว Web-besed ซงในการออกแบบนนจะเรมจากในสวนทางเลอกเมน ของเนอหาบทเรยนกอนและทาการเชอมโยงไปสเนอหาถดไป โดยการออกแบบเมนแบบสมผส

รปท 3.9 การออกแบบในสวนทางเลอกเมน ของเนอหาบทเรยน

สาหรบการออกแบบเนอหานน จะออกแบบใหผเรยนมปฏสมพนธกบบทเรยน โดยเลอกใชการแสดงผลแบบสมผส (Rollover) ในการแสดงผล ซงจะทาใหผเรยนมปฏกรยาโตตอบกบบทเรยน พรอมทงแสดงปมควบคมในการเลอกบทเรยน เพอผเรยนสามารถเลอกเรยนบทเรยนทตนเองสนใจได

รปท 3.10 การออกแบบในสวนของเนอหาบทเรยนแบบ Rollover

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  38

3. การออกแบบหนาแสดงผลในสวนแบบฝกหด การออกแบบการแสดงผลในสวนแบบฝกหดจะเลอกใชการออกแบบโครงสรางเวบไซต (Template) เนองจากแบบทดสอบจะอาศยการเขยนโปรแกรม เพอแสดงผลแบบ Interactive ในการรบคาตวแปรจากผเรยน พรอมทงจะแสดงการหาคาตอบแบบลาดบขน จงทาใหการออกแบบเพอรองรบชดคาสงแบบทดสอบน ตองเปนแบบโครงสรางเวบไซต และเวนตาแหนงสาหรบลงรหสโคดคาสง

รปท 3.11 โครงสรางเวบไซตสาหรบใสเนอหาในสวนแบบฝกหด

4. การสงออกสวนประสาน Web-based การสรางเนอหาบทเรยน จะสรางโดยใชเครองมอ Adobe Captivate 3 ซงจะสรางแยกจากสวนของเวบไซต เพอการแสดงผลทสวยงาม การนาเนอหาบทเรยนทสรางเสรจแลวตดตงเขาสระบบเวบไซตจะถกบนทกในรปแบบ Flash

(SWF) โดยการแสดงผลนนจะเปนสวนหนงของโครงสรางเวบไซต

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  39

รปท 3.12 แสดงการจดเรยงเนอหา กอนการสงออกสวนประสาน Web-based

การสงออกสวนประสานเวบไซตในรปแบบ Flash (SWF) เพอใหรปแบบการแสดงผลมคณภาพของรปแบบทสวยงามและสมบรณ ในขณะทไฟลขอมลมขนาดทเหมาะสมนาเขาสเวบไซต

รปท 3.13 ขนตอนการสงออกสวนประสาน Web-based ในรปแบบ Flash (swf)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  40

3.3 ขนตอนการออกแบบเนอหาเวบไซต (Web-based)

การออกแบบเนอหาเวบไซต จะสรางโดยใชโปรแกรม Macromedia Dreamweaver 8

และใชภาษา HTML (HyperText Markup Language) ในการแสดงผล ซงการออกแบบจะสรางโครงสรางเวบสาเรจรป (Template) ในการเชอมโยงทกหนาการแสดงผล และรองรบสวนบทเรยน โดยจะกาหนดความกวางเวบไซตขนาด 1,024 ความระเอยดเปน Pixels

รปท 3.14 รปแบบโปรแกรม Macromedia Dreamweaver 8

ในการสรางจะกาหนดโครงสรางเวบไซต (Template) โดยเลอกใชสเขยว และวางสวนเมนเชอมโยงแบบสมผส (Rollover) ไวตาแหนงซาย พรอมกาหนดสวนวางเนอหาไวตรงกลาง

รปท 3.15 การออกแบบโครงสรางเวบไซต (Template)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  41

รปท 3.16 การออกแบบเนอหาโครงสรางเวบไซต (Template)

ทาการเชอมโยงทางเลอกเมนแตละสวนตามหนาแสดงผลในสวนตางๆ พรอมเชอมโยงสวนเนอหาเขาสเวบไซต

รปท 3.17 หนาโครงสรางเวบไซตทเชอมโยงกบสวนเนอหาบทเรยน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

  42

3.4 ทดสอบ (Testing)

การทดสอบการแสดงผล ไดทดสอบหลงจากทไดประสานสวนการออกแบบเนอหา เขากบการออกแบบโครงสรางเวบไซต โดยทดสอบการเชอมโยงของทางเลอกเมน เพอหาความถกตองของการเชอมโยง พรอมทดสอบการแสดงผลเนอหา ทเชอมโยงกบเมน และรปแบบปฏสมพนธของเนอหา สงทไดจากการทดสอบเนอหา และการเชอมโยงสามารถตอบสนองซงกนและกน โดยทเนอหาบทเรยนสามารถแสดงผลแบบปฏสมพนธกบผเรยนไดด

รปท 3.18 การทดสอบการเชอมโยงของเนอหาบทเรยนกบทางเลอกเมน

3.5 สรปขนตอนการออกแบบและพฒนาระบบ

ขนตอนการออกแบบและพฒนาระบบ จะศกษาสวนประกอบในเนอหาบทเรยน เพอวเคราะหสวนประกอบของ e-Learning และออกแบบตามขนตอน แบงออกเปน 2 สวนคอ สวน Web-based จะสรางเปนโครงสรางเวบไซต (Web Template) โดยจะประกอบดวยฟงกชนทางเลอกเมนตางๆ และสวนเนอหาบทเรยน ถกออกแบบใหมเนอหาบทเรยนแบบปฏสมพนธทง 8 เนอหา เมอออกแบบทง 2 สวนเสรจสมบรณ จะประกอบรวมกนและทดสอบความถกตอง

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บทท 4 วตถประสงค และประโยชนการนาไปใช

ระบบ e-Learning แบบ Interactive ทางคณตศาสตร ไดถกออกแบบแยกออกจากกน 2 ดานคอ ดานการออกแบบ Web-based และดานการออกแบบสวนเนอหาบทเรยน ซงวตถประสงคของการแยกออกแบบ เนองจากเครองมอทใชสาหรบการออกแบบระบบ Web-based และออกแบบเนอหาบทเรยนแบบปฏสมพนธ มความตางกน แตสามารถรวมเขาดวยกนเปนบทเรยนแบบ Interactive ไดอยางสมบรณ 4.1 ระบบ e-Learning แบบ Interactive วตถประสงคในการนา Web-based interface มาใชกบ e-Learning แบบ Interactive กเพอสรางเนอหาบทเรยนทแตกตางไปจากเดม มงเนนการแสดงผลทมปฏสมพนธ เพอผเรยนจะใหความสนใจ และมสวนรวมโตตอบกบบทเรยน โดยไดพจารณาถงฟงกชนการใชงานบนเวบไซต และฟงกชนการใชงานของเนอหาบทเรยนใหตอบสนองกบผเรยนมากขน

แผนภมท 4.1 การวเคราะหวตถประสงค และประโยชนการนาไปใช

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

44

การวเคราะหวตถประสงค ไดแบงออกเปน สวนการออกแบบ Web-base โดยพจารณาการวางโครงสรางเวบไซต (Web Template) ซงจะประกอบดวยตาแหนงการวางในสวนเนอหา และฟงกชนทางเลอกเมนตางๆ สาหรบสวนฟงกชนทางเลอกเมน จะถกแยกวเคราะหไปยงทางเลอกเมนหลก และทางเลอกเมนบทเรยน สาหรบการวเคราะหสวนเนอหาบทเรยน จะพจารณาตาแหนงของเนอหาบทเรยนแตละบท และฟงกชนทางเลอกเมนเนอหาบทเรยน 4.2 วตถประสงคการออกแบบในสวน Web-based interface การใชงานสวน Web-based interface จะพจารณาในสวนโครงสรางเวบไซต (Web Template) และฟงกชนทางเลอกเมน โดยมวตถประสงคเพอกาหนดตาแหนงการวางสวนเนอหาใหสอดคลองและความสะดวกในการใชงานของผเรยน 4.2.1 สวนโครงสรางเวบไซต (Web Template) การออกแบบโครงสรางเวบไซต (Web Template) จะถกสรางโดยใชเครองมอ โปรแกรม Macromedia Dreamweaver 8 เพอออกแบบหนาเวบไซต และโปรแกรม Adobe Photoshop CS3 เพอออกแบบในสวนรปกราฟก โดยการออกแบบโครงสรางเวบไซตใหอยในรปของ Template มวตถประสงคเพอ กาหนดการแสดงผลทเหมอนกนในทกๆ หนาเวบไซต เนองจากการสราง e-Learning แบบ interactive จะนาเสนอเนอหาบทเรยนทง 8 บทเรยน เรองอนพนธ ในวชาคณตศาสตร ซงการนาเสนอนนจะใชหนาเวบไซตทมความยาวไมเกน 1500 Pixels (หนวยวดความละเอยดของหนาจอคอมพวเตอร สาหรบการแสดงผล) ซงจะทาใหผไมตองเลอนหนาบทเรยนลงมามากจนเกนไป จงทาให จงทาใหตองกระจายเนอหาบทเรยนไปในแตละหนาของเวบไซต ทาใหตองมการวางโครงสรางเวบไซต (Web Template) ทเหมอนกน ทงนเมอมการวางโครงสรางเวบไซต (Web Template) แลวตาแหนงการวางของฟงกชนทางเลอกเมน และตาแหนงการแสดงผลในสวนเนอหาบทเรยนจะไมเปลยนแปลง ทาใหสะดวกตอการสรางหนาเวบไซตแตกออกมาไดไมจากด โดยยงคงรปแบบ และตาแหนงการวางทเหมอนเดม

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

45

รปท 4.1 การออกแบบโครงสรางเวบไซต (Web-Template)

สาหรบการวางโครงสรางเวบไซต จะกาหนดออกเปน 3 สวนใหญๆ คอ สวนหวของ

เวบไซต (Website Header) วตถประสงคเพอบงบอกความหมายโดยภาพรวมของเวบไซต วาเปนเวบไซตมเนอหาเกยวกบอะไร ตอมาคอตาแหนงการวางทางเลอกเมน (Menu Point) มวตถประสงคเพอสรางทางเชอมโยงภายในเวบไซต และตาแหนงสดทายคอ ตาแหนงเนอหาของเวบไซต (Web Content) มวตถประสงคเพอวางเนอหาบทเรยน ซงการกาหนดตาแหนงตางๆ จะคงท และถกใชไปในทกหนาของเวบไซต หากไมไดกาหนดโครงสรางเวบไซต จะทาใหการเพมหนาเวบไซตเปนไปไดยากลาบาก และไมเปนไปในรปแบบเดยวกน ซงการกาหนดโครงสรางเวบไซตนจะทาใหการออกแบบ Web-based interface ทาไดรวดเรว และยงสามารถเพมหนาเวบไซตเพอใสเนอหาบทเรยนไดอยางไมจากด

รปท 4.2 ตาแหนงการจดวางภายในโครงสรางเวบไซต (Web Template)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

46

4.2.2 สวนฟงกชนทางเลอกเมน การออกแบบ Web-based interface จะกาหนดตาแหนงฟงกชนทางเลอกเมนไวดาน

ซายมอ เนองจากเปนตาแหนงสอดคลองกบระดบสายตาทมกจะมองจากซายมายงขวา และแบงฟงกชนทางเลอกเมนออกเปน 2 สวนคอ

ฟงกชนทางเลอกเมนหลก (Main Menu) มวตถประสงคเพอเชอมโยงการแสดงผลในสวนหนาเวบไซตตางๆ เขาดวยกน เปรยบเสมอนเปนประตสาหรบการเขาถงเนอหาตางๆ โดยฟงกชนทางเลอกเมนหลกน สามารถเชอมโยงเนอหาเวบไซตทงภายในเวบไซตเดยวกน (Internal Website) หรอเชอมโยงไปยงเวบไซตภายนอกได (External Website) ทาใหการเขาถงเนอหาบทเรยนตางๆ เปนไปไดอยางสะดวก และการควบคมการแสดงผลทงหมดสามารถกระทาไดภายในหนาเดยว

ฟงกชนทางเลอกเมนบทเรยน จะเปนสวนหนงของฟงกชนทางเลอกเมนหลก แตจะเปนฟงกชนทางเลอกเมนรอง (Sub Menu) โดยจะใชวธการแสดงผลแบบเลอนลงมาดานลาง (Drop down Menu) เพอเชอมโยงไปยงเนอหาบทเรยนตางๆ โดยฟงกชนทางเลอกเมนบทเรยนนจะเชอมโยงเฉพาะบทเรยนเทานน ไมถกเชอมโยงไปยงเวบไซตภายนอก วตถประสงคของการสรางฟงกชนทางเลอกเมนบทเรยน มไวใหผเรยนสามารถเลอกบทเรยนทตองการเรยนไดอยางสะดวกไมวาจะเปนการเลอกบทเรยนกอนหนา หรอขามไปยงบทเรยนทตองการได

รปท 4.3 สวนประกอบฟงกชนทางเลอกเมนหลก และฟงกชนทางเลอกเมนรอง

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

47

แผนภมท 4.2 โครงสรางสวนประกอบฟงกชนทางเลอกเมน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

48

4.3 สวนเนอหาบทเรยน การออกแบบ Web-based interface มาประยกตใชกบ e-Learning แบบ interactive ทางคณตศาสตร ไดแยกการออกแบบเปน 2 สวนใหญๆ คอ การออกแบบสวน Web-based และการออกแบบสวนเนอหาบทเรยนทางคณตศาสตร โดยใชเครองมอโปรแกรมทแตกตางกน ในการสราง เพราะแตละเครองมอทเลอกใชมความสามารถทแตกตางกน แตสามารถประยกตใชใหสามารถทางานรวมกนไดเปนอยางด ทงนการสรางและออกแบบในสวนเนอหาบทเรยนจะพจารณาออกเปน 2 องคประกอบหลกคอ สวนเนอหาบทเรยนในแตละบทเรยน กบฟงกชนทางเลอกเมนในแตละเนอหาบทเรยน เพอแสดงรายละเอยดความสาคญของแตละองคประกอบ 4.3.1 การใชงานสวนบทเรยน การออกแบบในสวนเนอหาบทเรยน ไดถกออกแบบและกาหนดหวขอตามบทเรยนทางคณตศาสตร ซงจะกลาวถงหวขอเรอง “อนพนธ” ทมเนอหา 8 บทเรยน ทาใหการออกแบบสวนเนอหาบทเรยนจะม 8 เนอหา และจะวางรปแบบเนอหาบทเรยน ตามรปแบบเนอหาทตองการนาเสนอ ซงจะประกอบดวยสวนทฤษฎ และตวอยางแบบฝกหด

รปท 4.4 การจดวางรปแบบเนอหาในบทเรยน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

49

บทท 1 อนพนธของฟงกชน

รปท 4.5 ตวอยางบทเรยนในบทท 1

รปท 4.6 ตวอยางวธทาแบบฝกหดในบทท 1

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

50

บทท 2 ความเรวและอตราการเปลยนแปลง

\ รปท 4.7 ตวอยางบทเรยนในบทท 2

รปท 4.8 ตวอยางวธทาแบบฝกหดในบทท 2

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

51

บทท 3 กฎของอนพนธ

รปท 4.9 ตวอยางบทเรยนในบทท 3

รปท 4.10 ตวอยางวธทาแบบฝกหดในบทท 3

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

52

บทท 4 อนพนธอนดบสง

รปท 4.11 ตวอยางบทเรยนในบทท 4

รปท 4.12 ตวอยางวธทาแบบฝกหดในบทท 4

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

53

บทท 5 อนพนธของฟงกชนตรโกณมต

รปท 4.13 ตวอยางบทเรยนในบทท 5

รปท 4.14 ตวอยางวธทาแบบฝกหดในบทท 5

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

54

บทท 6 กฎลกโซ

รปท 4.15 ตวอยางบทเรยน และวธทาแบบฝกหดในบทท 6

บทท 7 การหาอนพนธโดยปรยาย

รปท 4.16 ตวอยางบทเรยนในบทท 7

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

55

รปท 4.17 แสดงตวอยางวธทาแบบฝกหดในบทท 7 บทท 8 การประมาณคาเชงเสน

รปท 4.18 ตวอยางบทเรยนในบทท 8

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

56

รปท 4.19 ตวอยางวธทาแบบฝกหดในบทท 8

โดยแตละเนอหาจะประกอบไปดวยสวนทฤษฏ และแบบฝกหด เมอจบแตละเนอหาบทเรยนจะทาการออกแบบเนอหาบทเรยนในบทถดไปใหม ซงการออกแบบเนอหาบทเรยนใหมนจะไมถกออกแบบใหใชไฟลเดยวกน แตจะสรางไฟลเนอหาบทเรยนเฉพาะบทเรยนนนใหมทงหมด วตถประสงคเพอการเชอมโยงกบฟงกชนทางเลอกเมนรอง (Sub Menu) ใหผเรยนสามารถเลอกเรยนเฉพาะเนอหาทตองการได และสะดวกตอการปรบปรงเปลยนแปลงเฉพาะเนอหาทตองการไดในอนาคต

สาหรบสวนเนอหาบทเรยนจะถกออกแบบใหมลกษณะแตะเมาสแลวแสดงผล (Mouse Rollover) วตถประสงคเพอใหผเรยนมการตดตามบทเรยน หรอมปฏสมพนธกบบทเรยน การออกแบบบทเรยนนจะแตกตางจาก e-Learning ในอดต ทผเรยนเปนฝายถกปอนเนอหาเพยงฝายเดยว ทาใหการเรยนรไมมประสทธภาพเทาทควร โดยเฉพาะวชาทางคณตศาสตรทตองอาศยการมสวนรวมในการคดตาม ทาใหการออกแบบบทเรยนจะคานงถงผลลพธของผเรยนเปนหลก

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

57

รปท 4.20 เนอหาบทเรยนกอนแสดงเนอหา

รปท 4.21 เนอหาบทเรยนหลงการวางเมาส จะแสดงเนอหา

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

58

ในการวางรปแบบเนอหาบทเรยน จะวางตามรปแบบเนอหาทตองการนาเสนอ ซงจะประกอบดวยสวนทฤษฎ และตวอยางแบบฝกหด 4.3.2 สวนฟงกชนทางเลอกเมนสวนเนอหาบทเรยน

การออกแบบสวนเนอหาบทเรยน นอกจากจะมฟงกชนทางเลอกเมนบทเรยน ซงเปนฟงกชนทางเลอกเมนรอง (Sub Menu) ในสวนการออกแบบโครงสรางเวบไซต (Web Template) แลว ในสวนเนอหาบทเรยนในแตหนาเวบไซต จะกาหนดใหมฟงกชนทางเลอกเมนสวนเนอหาบทเรยนดวยเชนกน ซงจะเปนปมกดเดนหนา และถอยหลง แตจะไมสามารถขามไปยงเนอหาบทเรยนถดไปไดทนท วตถประสงคเพอ ผเรยนสามารถขามไปยงเนอหาหนาถดไปเมอเรยนจบหนาบทเรยนนน หรอยอนกลบไปยงหนาบทเรยนกอนหนาไดอยางสะดวก

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

รปท 4.22 ตาแหนงฟงกชนทางเลอกเมนสวนเนอหาบทเรยน

ในการออกแบบเนอหาบทเรยน จะวางรปแบบการแสดงทคลายคลงกน คอมงเนนให

ผเรยนมปฏสมพนธกบเนอหาบทเรยนมากทสด ไมวาเนอหาบทเรยนนจะมลกษณะเปน สมการ หรอเสนกราฟ แตกจะอยในรปการแตะเมาสแลวแสดงผล (Mouse Rollover) วตถประสงคเพอผเรยนจะเขาใจเนอหาบทเรยน และรปแบบการแสดงผลทเหมอนกนทงหมด

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บทท 5

สรปผลและขอเสนอแนะ การศกษาการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร มวตถประสงคเพอเพมประสทธภาพในการเรยนการสอนเรอง อนพนธ ในวชาแคลคลส ของนกศกษาคณะวทยาศาสตร มหาวทยาลยหอการคาไทย โดยไดพฒนาบทเรยนใหสามารถแสดงผลบนเวบไซต เพอผลกดนใหการเรยนรไมถกจากดในเรองเวลา และสถานท พรอมทงออกแบบใหผเรยนมปฏสมพนธกบเนอหาบทเรยน สรปผลการวจย

การศกษาการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร ประกอบดวย

1. สวนโครงสรางเวบไซต (Web Template) เปนสวนหลกในการแสดงผลบนหนาเวบไซต ซงจะเปนตวกาหนดตาแหนงการวางสวนประกอบ การออกแบบจะกาหนดใหความกวางของหนาจอเทากบ 1024 Pixels ซงเปนความกวางมาตรฐานของหนาจอคอมพวเตอรทแสดงผลไดอยางสวยงาม พรอมทงใชภาษา HTML (HyperText Markup Language) ในการพฒนา การวางโครงสรางเวบไซตจะทาใหมแสดงผลทเหมอนกนทกหนาเวบไซต 2. สวนหวเวบไซต (Web Header) เปนตาแหนงการวางรปกราฟกดานบนเวบไซต มไวเพอความสวยงาม และสอถงความหมายของเวบไซต การออกแบบจะประกอบดวยขอความชอ เวบไซต และรปภาพ ซงตาแหนงจะอยดานบนสดของเวบไซต 3. สวนฟงกชนทางเลอกเมน (Web Menu) เปนสวนเชอมโยงเนอหาตางๆ เขาดวยกน โดยการออกแบบจะกาหนดตาแหนงการแสดงผลไวทางซายมอ ซงจะประกอบไปดวยเมนหลก (Main Menu) เพอเชอมโยงสวนสาคญตาง โดยประกอบดวยเมนหนาแรก เมนบทนา เมนเนอหาบทเรยน และเมนแบบทดสอบ สาหรบการในเมนเนอหาบทเรยนจะมเมนยอย (Sub Menu) ของเนอหาบทเรยนแตละบทตงแตบทท 1 – 8 อยภายใน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

60

4. สวนเนอหาบทเรยน เปนสวนทถกออกแบบแยกจากตวเวบไซต โดยจะกาหนดเนอหาบทเรยนใหมการแสดงผลอยในรปไฟล Flash และแยกแตละบทออกจากกนทง 8 บทเรยน เพอการเชอมโยงลง ทงนเนอหาบทเรยนแตละหนาจะประกอบดวยเนอหาทางทฤษฏ และวธทาโจทย โดยแตละหนาบทเรยนจะมปมทางเลอกเมนสวนเนอหาบทเรยนอยตาแหนงดานลาง เพอผเรยนสามารถเลอกเรยนไดตามบทเรยนทตองการ ทงนบทเรยนจะถกเรยงตอกนไปตามบทเรยน สวนประกอบตางๆ ขางตนนถกพฒนาดวยเครองมอโปรแกรมตางๆ ดงน • Adobe Captivate 3.0 สวนของการสรางเนอหาบทเรยนออนไลน สามารถกาหนดรปแบบการแสดงผลไดตามตองการ พรอมทงแยกเนอหาแตละบทเรยนใหอยในรปแบบไฟล Flash • Adobe Photoshop CS3 สวนของการสราง และออกแบบภาพกราฟกประกอบโครงสรางเวบไซต ปมฟงกชนทางเลอกเมน ตลอดจนเนอหาในบทเรยน • Macromedia Dreamweaver 8 สวนของการสราง และออกแบบโครงสรางเวบไซต การเชอมโยงลงเนอหาบทเรยน และการรวมไฟลตางๆ เพอสงเขาตวเกบขอมลของเวบไซต (Server) • Macromedia Flash 8 สวนของการสราง และออกแบบกราฟกแบบภาพเคลอนไหว (Animation) • Microsoft Office Word 2003 สวนของการสรางฟงกชนและสมการทางคณตศาสตร โดยใชเครองมอภายในชอ Microsoft Equation 3.0

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

61

ในการนา Web-based Interface มาประยกตใชกบ e-Learning แบบ Interactive ทางคณตศาสตร ไดถกออกแบบใหเนอหาบทเรยนทางคณตศาสตรเรองอนพนธ ในวชาแคลคลส แยกออกจาก การออกแบบ Web-based เพอการใชเครองมอใหตรงกบการพฒนา และเพอพฒนาใหสอดคลองกบผเรยน โดยคานงถงการมสวนรวม หรอมปฏสมพนธของผเรยนตอบทเรยน เครองมอทใชในการพฒนา ตางเปนโปรแกรมทมความสามารถเฉพาะ และถกใชกนอยางแพรหลาย พรอมทงการกาหนดรปแบบไฟลตางๆ จะถกกาหนดรปแบบ และขนาดตามมาตรฐาน ปญหาทพบ • การเกบ Requirement ยงทาไดชา ทาใหขนตอนการทางานอาจเรมตนชาเกนไปและ Requirement ทไดยงไมละเอยดมากทาใหยากตอการวเคราะห • การออกแบบเนอหาบทเรยน ทาไดคอนขางจากด เนองจากเครองมอทใชยงไมสมบรณในสวนของเนอหาสตรทางคณตศาสตร โดยเครองมอยงไมมในสวนการใสสตรทางคณตศาสตร • ในปจจบนมเครองมอในการเขาสหนาเวบเพจ (Web Browser) จานวนมากทาใหการพฒนา ตองเลอกใชภาษา หรอเครองมอใหรองรบกบการใชงานทแตกตางกน ขอเสนอแนะ • ผใชงานหรอผเรยนนนควรศกษาบทเรยนจากหนงสอ และบทเรยนออนไลนควบคกนไป เนองจากการศกษาทงสองแบบจะทาใหผเรยนมความร และความเขาใจมากขน • การออกแบบเนอหาบทเรยน ตองใชเครองมอจดทาเอกสารทมฟงกชนสตรทางคณตศาสตร และเครองมอสาหรบการออกแบบกราฟก ควบคกนเพอการจดทาบทเรยนในสวนการใสสตรทางคณตศาสตร • ในการออกแบบเนอหาบทเรยนควรกาหนดรปแบบในการแสดงผลบน Web-based โดยใชภาษา HTML (HyperText Markup Language) ซงเปนภาษาสาหรบการสรางเวบไซตสากล ทาใหผเรยนสามารถใชโปรแกรม Web Browser ใดๆ ในการเขาสบทเรยนไดอยางสะดวก

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

62

• รปแบบการพฒนาและออกแบบ Web-based สามารถนาไปพฒนากบระบบการเรยนการสอนแบบ e-Learning ในวชาเรยนตางๆ ของนกศกษาระดบปรญญาตร มหาวทยาลยหอการคาไทย ทาใหประหยดคาใชจายในการสรางบทเรยนออนไลน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

บรรณานกรม เกรยงศกด เจรญวงศกด. E-Learning: “ยทธศาสตรการเรยน” Economy. ปท 1 ฉบบท 26

(16-30 พ.ย. 2544) หนา 43 ดวงพร เกยงคา. 2549. คมอสรางเวบไซตดวนตนเอง. กรงเทพมหานคร: สานกพมพโปรวชน ถนอมพร เลาหจรสแสง. 2545. Design E-Learning: หลกการออกแบบและสรางเวบเพอการ

เรยนการสอน. เชยงใหม: มหาวทยาลยเชยงใหม บปผชาต ทฬหการณ. “E-Learning: การเรยนรในสงคมแหงการเรยนร”

วารสารศกษาศาสตร ปรทศน ปท 16 ฉบบท 1 หนา 7-15 บณฑต พฤฒเศรณ. 2551. นวตกรรมการสรางสอบทเรยนแบบสมพนธ ดวยAdobe

Captivate. กรงเทพมหานคร: สานกพมพเอมไอเอส ประโยชนของ E-Learning [ออนไลน].15 กรกฎาคม 2550. เขาถงไดจาก

http://learners.in.th/6138/urithadrat/49759 ววฒนาการของเวบ [ออนไลน]. 17 พฤศจกายน 2549. เขาถงไดจาก

http://gotoknow.org/ blog/toshikung/60481 อะโดบ ดรมวฟเวอร [ออนไลน]. 10 พฤศจกายน 2551 เขาถงไดจาก

http://th.wikipedia.org/wiki/อะโดบ_ดรมวฟเวอร อะโดบ แฟลช [ออนไลน]. 10 พฤศจกายน 2551 เขาถงไดจาก

http://th.wikipedia.org/wiki/อะโดบ_แฟลช อะโดบ โฟโตชอป [ออนไลน]. 10 พฤศจกายน 2551 เขาถงไดจาก

http://th.wikipedia.org/wiki/Photoshop

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

ภาคผนวก

สอประสานงาน (Interface) หมายถง การตอเชอม การเชอมโยง หรอการตดตอสอสาร ความหมายดานคอมพวเตอร แบงออกเปนกลมๆ ดงน

1. สอประสานงานผใช User Interface หมายถง สอประสานกบผใชในการตดตอและโตตอบระหวางผใชกบระบบคอมพวเตอร ไมวาจะเปนการตดตอทางดานฮารดแวรหรอซอฟตแวร หากเปนสอทางดานฮารดแวร จะประกอบไปดวยอปกรณคอมพวเตอรตางๆ เชน เมาส คยบอรด ลาโพง เครองพมพ เปนตน แตหากเปนสอทางดานซอฟตแวร จะหมายถงลกษณะการแสดงผลทางจอภาพ และทาใหเกดการปฏสมพนธกน

2. Extension Card Interface คอ มาตรฐานการเชอมตอกบเมนบอรดคอมพวเตอร

รปแบบตางๆ กบการดเพมความสามารถประเภทตางๆ เชน AGP Interface, PCI Express Interface, PCI 16bit/32bit/64bit Interface, ISA Interface เปนตน

3. External Communication Interface คอ การตอเชอมกบอปกรณคอมพวเตอร

หรอ อปกรณตอพวงตางๆ เชน 3.1 Parallel Interface เชน เครองพมพแบบใช Parallel port, เครองสแกนเนอร 3.2 Serial Interface (Com1, Com2, Com3, Com4) เชน โมเดม, เครองพมพ 3.3 USB Interface หรอ Universal Serial Bus Interface ทตออปกรณสมยใหม

ทาง USB Port

อเลรนนง (e-Learning “Electronic Learning”) มความหมายครอบคลมถงวธการใชและกระบวนการหลายชนด อนประกอบดวย การเรยนทมพนฐานหลกเปนการใชเวบ การใชคอมพวเตอร การมหองเรยนทเสมอนจรง และการมกจกรรมการเรยนรรวมกนผานระบบดจตล e-Learning ยงรวมถงการถายทอดขอมลผานอนเทอรเนต อนทราเนต (LAN หรอ WAN) เทปเสยงและเทปโทรทศน สญญาณดาวเทยม Interactive TV และซดรอมดวย อยางไรกตาม ความหมายของ E-Learning ยงไดถกอธบายไวหลากหลายรปแบบดงตอไปน:

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

66

1. e-Learning คอการรวมกนระหวางอนเทอรเนตและการเรยนร ซงหมายถงการใชเทคโนโลยเครอขาย เพอสราง ถายทอด และอานวยความสะดวกในการเรยนร ทกเวลาและสถานท

2. e-Learning คอการถายทอดเนอหาสาระของการเรยนรทลกซงและไมหยดนง เพอ

ชวยพฒนาแหลงความร และเปนการเชอมโยงระหวางผเรยน ผปฏบต และผเชยวชาญ 3. e-Learning คอปรากฏการณการถายทอดความนาเชอถอ การเขาถง และโอกาส ซง

เปนการชวยใหประชาชนและองคกร กาวทนกบความเปลยนแปลงอนรวดเรวของโลก ในบางครงคาวา Online Learning กถกนามาใชในความหมายเดยวกบ E-Learning คา

วา Online Learning นยงทาใหเหนภาพชดเจนถงการเรยนรทเกดขนโดยใชอนเทอรเนตเปนฐาน ในความหมายกวางๆแลว e-Learning ถอวาเปนเรองหนงของ Distance Learning หากแต Distance Learning ไดครอบคลมถงการสอนทางไปรษณย วดโอเทป การฝกอบรมทางคอมพวเตอรตามความตองการของผใชแบบไมออนไลน (ใชแผนดสกหรอซดรอม) การสอนสดไปยงจดตางๆทหางไกลกน รวมทงการประชมทางไกล

e-Learning ยงสามารถจดแบงไปไดหลายประเภท ขนอยกบวธการเรยนรท

เกดขน ขอมลจากเวบไซต Virtual business ไดกลาวถงรปแบบการเรยนรแบบ e-Learning ไวหลายแบบ ตวอยางเชน:

1. On-Demand E-Learning หมายถงการสรางเนอหาสาระของความรใหผเรยนไดเลอกใชตามความตองการ เหมอนการเลอกฟงเพลงจากตเพลง

2. Live On-Line E-Learning หมายถงการทมผเรยนหลายคน มกจกรรมการเรยน

พรอมกนจากสถานททแตกตางกน 3. Knowledge Bases หมายถงฐานขอมลเกยวกบสาระการเรยนรซงผเรยนสามารถ

เขาไปคนหาได 4. Simulation Based Learning หมายถงการเรยนในสภาพเหตการณจาลอง (พ.ต.ท. หญง ดร. ศรวรรณ อนนตโท)

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

67

อเลรนนง แบบ Interactive หมายถง ปฏสมพนธ แตในบรบทของ อเลรนนง หมายถง การมการโตตอบและใหแรงเสรม (Feedback และ Reinforcement) กบการกระทาของผเรยน เชน เวบเพจทประกอบดวยเนอหาทเอกสารทถกอพโหลดเอาไวเพอใหผเรยนอานอยางเดยว เชนนไมถอวาเปนเวบเพจทมปฏสมพนธกนได แตถาหากคาศพทหรอภาพบนเวบสามารถทจะอานคาอธบายเพมเตมได โดยผดเวบคลกลงคเพอไปหนาจอถดไป ซงเปนหนาจอทแสดงคาอธบายนน เวบเพจนนอาจจะเรยกไดวา เปนเวบเพจทมการโตตอบกบการกระทาของผเรยน (แตการทมลงคบนเวบเพจเปนเพยงแควธการเบองตนททาใหเวบมการโตตอบกบการกระทาของผเรยนเทานน) การทจะทาใหผเรยนมแรงจงใจในการเรยนไดมากนอยแคไหนกขนอยกบวา จะสรางโปรแกรมการโตตอบและใหแรงเสรมกบการกระทาของผเรยนเอาไวแบบไหนและอยางไร กลาวคอ การโตตอบและใหแรงเสรมกบการกระทาของผเรยนเปนปจจยสาคญทสดในการกระตนใหเกดแรงจงใจของผเรยน ดวยเหตนในการสรางระบบการเรยนแบบ WBT มความจาเปนทจะตองคดดวยวาจะสรางโปรแกรมการโตตอบและใหแรงเสรมกบการกระทาของผเรยนเอาไวอยางไร จงจะทาใหระบบการเรยนนนมประสทธภาพสงซงเปนความสาคญของการออกแบบสอการสอนในบรบทของหองเรยน ปฏสมพนธคอ การสรางความสมพนธระหวางบคคลในกลม ในกรจดการเรยนการสอนนยมสรางความสมพนธในหองเรยนดวยการใหผเรยนมสวนรวมในการเรยน กจกรรมประเภทตาง ๆ ทจะใหผเรยนมสวนรวมในการเรยนการสอนมดงตวอยางเชน

- ใหผเรยนอธบาย หรอออกมาแกปญหาโจทยบนกระดานดา การแกปญหานนอาจจะเปนงานเดยว หรองานกลมกได - ใหโอกาสถามตอบขอสงสย หรอแสดงความคดเหนขณะเรยน - ถามปญหาใหผเรยนตอบ - ใหผเรยนจบกลมทางานทผเรยนมองหมายในขณะสอน เชน ทาแบบฝกหด, อภปรายเพอหาคาตอบเปนตน โดยผสอนดแลอธบายขณะผเรยนทางาน - ใหผเรยนคนควาหาความรมารายงานตอเพอน - ใหผเรยนจดบอรดสาธตอปกรณ, เครองมอตางๆ รวมกบผสอน - ใหสอนแทนผสอนในบางหวขอ กจกรรมขางตนน ลกษณะของปฏสมพนธทใชม 2 แบบคอ ปฏสมพนธระหวางผสอนกบ

ผเรยน และผเรยนกบผเรยน สงสาคญทจะทาใหเกดปฏสมพนธในกลมผเรยนคอ จานวนผเรยนในกลม ความสามารถของผเรยน ลกษณะของผนากลม และความสามคค

สาหรบปฏสมพนธระหวางผสอนกบผเรยนนน ปฏสมพนธในทางตรงทผสอนใช ไดแกการพดตดตอกบผเรยน หรอใชตารา หรออปกรณการสอน หรอเครองมอ หรอวธการใหทางาน

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d

ประวตผเขยน นายธนวชญ โกสวสด เกดเมอวนท 26 กมภาพนธ 2523 สาเรจการศกษาปรญญาตร เศรษฐศาสตรบณฑต สาขาวชาเศรษฐศาสตรระหวางประเทศ จาก มหาวทยาลยกรงเทพ เ ม อปการศกษา 2547 และศกษาตอในระดบปรญญามหาบณฑต สาขาวชาการจดการเทคโนโลยสารสนเทศ บณฑตวทยาลย มหาวทยาลยหอการคาไทย

ลขสท

ธ มหาว

ทยาลย

หอการ

คาไท

ย

Copy

right@

by U

TCC

All rig

hts re

serve

d