1

e-Learning สำ��นั�กง�นัป้องก�นัควบค�มโรคที่�� 8จ.นัครสำวรรค�

บ�ญเลิ�ศ อร�ณพิ�บ�ลิย์�ศ�นัย์�บร�ก�รคว�มร� !ที่�งว�ที่ย์�ศ�สำตร�แลิะ

เที่คโนัโลิย์� (STKS)สำ��นั�กง�นัพิ�ฒนั�ว�ที่ย์�ศ�สำตร�แลิะเที่คโนัโลิย์�แห่'ง

ช�ต� (สำวที่ช.)www.stks.or.th

2

Web-Based Instruction (WBI)

• Web-Based Training (WBT)• Web-Based Learning (WBL)• บที่เร�ย์นัที่��อย์�'บนัฐ�นัของเว+บ • นั��เสำนัอผ่'�นัโป้รโที่คอลิ TCP/IP แลิะ HTTP • เป้-นัได้!ที่�0งในัร�ป้แบบป้ระสำ�นัเวลิ� (chat,

video conference) แลิะไม'ป้ระสำ�นัเวลิ� (e-Mail)

3

WBI/WBT/WBL

Web & Conte

nt Server

คร�ผ่�!สำอนัสำร!�งห่ลิ�กสำ�ตร/เนั20อห่�

FTP

นั�กเร�ย์นั

ผ่�!เร�ย์นั

ช'องที่�งก�รต�ด้ต'อสำ2�อสำ�รร�ป้แบบต'�งๆ

4

นั�ย์�ม E-Learning อ�ง ICT

• ระบบที่��พิ�ฒนั�ต'อเนั2�องม�จ�ก WBI (Web Based Instruction)

• ม�ระบบบร�ห่�รจ�ด้ก�รก�รเร�ย์นั (Learning Management System : LMS) เข!�ม�บร�ห่�รควบค�มก�รจ�ด้ก�รก�รสำอนั

• (อ�จจะ ) ม�ระบบบร�ห่�รจ�ด้ก�รเนั20อห่�ก�รเร�ย์นัร� ! (Content Management System : CMS) เพิ2�ออ��นัวย์คว�มสำะด้วกในัก�รสำร!�งเนั20อห่�ก�รเร�ย์นัร� !

• นั��เสำนัอได้!ที่�0งระบบ Online แลิะ Offline• นั��เสำนัอได้!ที่�0งระบบ Synchronous แลิะ Asynchronous

5

E-Learning

6

E-Learning

• Electronics Learning• ก�รเร�ย์นัก�รสำอนัที่��อ�ศ�ย์สำ2�ออ�เลิ+กที่รอนั�กสำ�

(คว�มห่ม�ย์ที่��วไป้)

7

นั�ย์�ม E-Learning อ�ง ICT

• ระบบที่��พิ�ฒนั�ต'อเนั2�องม�จ�ก WBI (Web Based Instruction)

• ม�ระบบบร�ห่�รจ�ด้ก�รก�รเร�ย์นั (Learning Management System : LMS) เข!�ม�บร�ห่�รควบค�มก�รจ�ด้ก�รก�รสำอนั

• (อ�จจะ ) ม�ระบบบร�ห่�รจ�ด้ก�รเนั20อห่�ก�รเร�ย์นัร� ! (Content Management System : CMS) เพิ2�ออ��นัวย์คว�มสำะด้วกในัก�รสำร!�งเนั20อห่�ก�รเร�ย์นัร� !

• นั��เสำนัอได้!ที่�0งระบบ Online แลิะ Offline• นั��เสำนัอได้!ที่�0งระบบ Synchronous แลิะ Asynchronous

8

e-Learning System Framework

Learning Learning Management Management

SystemSystem

ContentContentManagementManagement

SystemSystem

Learning Learning ToolsTools

9

LMS – Learning Management System

• ระบบบร�ห่�รจ�ด้ก�รก�รจ�ด้ก�รเร�ย์นัก�รสำอนั• ห่�วใจสำ��ค�ญของ E-Learning • สำร!�งสำภ�พิแวด้ลิ!อมเป้ร�ย์บเสำม2อนัก�บก�รเร�ย์นัในั

ห่!องเร�ย์นัป้กต� – ตรวจสำอบก�รเข!�เร�ย์นั, ช2�อผ่�!ที่��เข!�เร�ย์นั, คว�มก!�วห่นั!�ในัก�ร

เร�ย์นั, บที่ที่��เร�ย์นั, เวลิ�ที่��เร�ย์นั, ช2�อผ่�!ที่��ลิงที่ะเบ�ย์นัเร�ย์นั, ก�รสำม�ครเร�ย์นั, ก�รแลิกเป้ลิ��ย์นัคว�มค�ด้เห่+นั, ก�รถ�มตอบ, ระบบป้ระเม�นัผ่ลิ, ห่!องสำม�ด้อ�เลิ+กที่รอนั�กสำ�สำ��ห่ร�บค!นัคว!�, เอกสำ�รอ!�งอ�ง ระบบต�ว ระบบพิ��เลิ�0ย์ง

10

11

Progress Report

12

Student Management

Class Status

Study Pass Drop

13

Student History

14

15

16

17

18

19

20

21

22

Content Management System

• บร�ห่�รจ�ด้ก�รสำ'วนัก�รที่��ง�นัเก��ย์วก�บเนั20อห่�• เนั!นัก�รจ�ด้ก�รระบบผ่'�นัเว+บ (Web interface )

– เช'นั ก�รนั��เสำนัอบที่คว�ม (Articles), เว+บได้เรคที่อร� (Web directory), เผ่ย์แพิร'ข'�วสำ�รต'�งๆ (News), ห่�วข!อข'�ว (Headline), ถ�ม/ตอบป้6ญห่� (FAQs), ห่!องสำนัที่นั� (Chat), กระด้�นัข'�ว (Forums), ก�รจ�ด้ก�รไฟลิ�ในัสำ'วนัด้�วนั�โห่ลิด้ (Downloads), แบบสำอบถ�ม (Polls), ข!อม�ลิสำถ�ต�ต'�งๆ (Statistics )

23

HTML Editor (Cont.)

24

Content Construction

25

Sample Content Page

26

Adobe Acrobat Style

27

Text Document Style

28

Flash Animation Style

29

Test Page

30

File Management

31

Import / Export Content

32

33

LMS/CMSLMS CMS

Who benefits?

All learners; organization

Content developers; learners who need personalized content

Provides primary management of

Learner performance Learning content

Manages system

Yes Yes

Tracks results

Yes Yes

Creates test questions

No Yes

34

Learning Tools

• เคร2�องม2อในัก�รต�ด้ต'อสำ2�อสำ�ร– ม�ระบบระบ�ต�วบ�คคลิ– ม�ระบบร�กษ�คว�มป้ลิอด้ภ�ย์

35

Web board

36

Chat room

37

Private Messages

38

ป้ระเภที่แลิะก�รใช!ง�นัก�รสำ2�อสำ�รประเภท ความหมาย ลั�กษณะการใช้�งานE-mail ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�งผ่�!ที่��เป้-นั

สำม�ช�กเที่'�นั�0นั (Two Way)ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�งอ�จ�รย์� ห่ร2อเพิ2�อนัร'วมช�0นัเร�ย์นัด้!วย์ก�นั ใช!สำ'งก�รบ!�นัห่ร2อง�นัที่��ได้!ร�บมอบห่ม�ย์

Webboard ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั อ�จ�รย์� แลิะผ่�!เร�ย์นั (Three Way)

ใช!ก��ห่นัด้ป้ระเด้+นัห่ร2อกระที่�! ต�มที่��อ�จ�รย์�ก��ห่นัด้ ห่ร2อต�มแต'นั�กเร�ย์นัจะก��ห่นัด้ เพิ2�อช'วย์ก�นัอภ�ป้ร�ย์ตอบป้ระเด้+นัห่ร2อกระที่�!นั� 0นั ที่�0งอ�จ�รย์�แลิะผ่�!เร�ย์นั

Chat ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั อ�จ�รย์� แลิะผ่�!เร�ย์นั (Three Way ) โด้ย์ก�รสำนัที่นั�แบบ Real Time ม�ที่�0ง Text Chat แลิะ Voice Chat

ใช!สำนัที่นั� ระห่ว'�งผ่�!เร�ย์นัแลิะอ�จ�รย์�ในัห่!องเร�ย์นัห่ร2อช��วโมงเร�ย์นันั�0นัๆ เสำม2อนัว'�ก��ลิ�งค�ย์ก�นัอย์�'ในัห่!องเร�ย์นัจร�งๆ

Share Data

ก�รใช!ข!อม�ลิร'วมก�นัที่�0งโป้รแกรม แลิะไฟลิ�ข!อม�ลิ

ใช!โป้รแกรมร'วมก�นัด้!วย์ซอฟต�แวร�ช'วย์ เช'นั NetMeeting ห่ร2อก�รถ'�ย์โอนัไฟลิ�

39

ป้ระเภที่แลิะก�รใช!ง�นัก�รสำ2�อสำ�รประเภท ความหมาย ลั�กษณะการใช้�งานConference ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั

อ�จ�รย์� แลิะผ่�!เร�ย์นั (Three Way ) แบบ Real Time โด้ย์ที่��ผ่�!เร�ย์นัแลิะอ�จ�รย์� สำ�ม�รถเห่+นัห่นั!�ก�นัได้! โด้ย์ผ่'�นัที่�งกลิ!องโที่รที่�ศนั�ที่��ต�ด้อย์�'ก�บเคร2�องคอมพิ�วเตอร�ที่� 0งสำองฝ่;�ย์

ใช!บรรย์�ย์ให่!ผ่�!เร�ย์นัก�บที่��อย์�'ห่นั!�เคร2�องเสำม2อนัว'�ก��ลิ�งนั��งเร�ย์นัอย์�'ในัห่!องเร�ย์นัจร�งๆ

Electronic Home Work

ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั อ�จ�รย์� เป้-นัเสำม2อนัสำม�ด้ป้ระจ��ต�วนั�กเร�ย์นั โด้ย์ที่��นั�กเร�ย์นัไม'ต!องถ2อสำม�ด้ก�รบ!�นัจร�งๆ เป้-นัสำม�ด้ก�รบ!�นัที่��ต�ด้ต�วตลิอด้เวลิ�

ใช!สำ'งง�นัต�มที่��อ�จ�รย์�ก��ห่นัด้ เช'นั ให่!เข�ย์นัร�ย์ง�นั โด้ย์ที่��อ�จ�รย์�สำ�ม�รถเป้<ด้ด้� Electronic Home Work ของนั�กเร�ย์นัแลิะเข�ย์นับ�นัที่=กเพิ2�อตรวจง�นัแลิะให่!คะแนันัได้! แต'นั�กเร�ย์นัด้!วย์ก�นัจะเป้<ด้ด้�ไม'ได้!

Memo/Note ใช!บ�นัที่=กข!อม�ลิก�รเร�ย์นั บ�นัที่=กข!อม�ลิก�รเร�ย์นัแลิะร�ย์ลิะเอ�ย์ด้ที่��จ��เป้-นัต'�งๆ

40

ซอฟต�แวร� E-Learning

• LCMS Software– Blackboard– Learning Space– Edugator– Moodle– ATutor– LearnSquare

ต!องซ20อ

ฟร� : Open Source Software

41

Open Source Software

• ซอฟต�แวร�โอเพินัซอร�สำค2ออะไร– ซอฟต�แวร�เป้<ด้เผ่ย์ต!นัฉบ�บ– ด้�วนั�โห่ลิด้ใช!ง�นัได้!ฟร�– ม�เสำร�ภ�พิในัก�ร

• ที่��ซ�0� (copy )• ศ=กษ� (study)• แก!ไขป้ร�บป้ร�ง (modify)• แจกจ'�ย์ต'อ (distribute)

– เนั!นัก�รตรวจสำอบ, แก!ไข, ร'วมพิ�ฒนั�– ใช!อ�นัเที่อร�เนั+ต เป้-นัเคร2�องม2อ

42

Open Source e-Learning System

• เนัคเที่ค ร'วมก�บฝ่;�ย์ก'อสำร!�งพิลิ�งง�นัคว�มร!อนั ก�รไฟฟ�ฝ่;�ย์ผ่ลิ�ตแห่'งป้ระเที่ศไที่ย์ พิ�ฒนั� Open Source e-Learning System

• พิ�ฒนั�โด้ย์ – PHP– MySQL

• ต�ด้ต'อได้!ที่��– www.learnsquare.com

43

44

ซอฟต�แวร� E-Learning

• ซอฟต�แวร�สำร!�งบที่เร�ย์นั– Microsoft Office, OpenOffice.org– GIMP โป้รแกรมง�นักร�ฟ<ก– Windows Movie Maker โป้รแกรมสำร!�งว�ด้�ที่�ศนั�– Audacity โป้รแกรมด้!�นัเสำ�ย์ง– Freemind ผ่�งคว�มค�ด้– PDF Creator สำร!�งเอกสำ�ร PDF– Microsoft Producer เช2�อม PPT แลิะ Video– Macromedia Captivate บที่เร�ย์นัออนัไลินั�

45

Instructional design

• ก�รออกแบบก�รสำอนั• ร�ป้แบบก�รสำอนัที่��ม�ลิ��ด้�บข�0นัตอนัแลิะห่ลิ�กก�ร• ก�รว�งแผ่นัก�รสำอนัอย์'�งม�ระบบระเบ�ย์บแบบแผ่นั• ก�รจ�ด้ที่��แผ่นัก�รสำอนั• ก�รพิ�ฒนั�เนั20อห่�ก�รสำอนั ก�รป้ระเม�นัผ่ลิ• ก�รว�เคร�ะห่�เป้�ห่ม�ย์ ก�รพิ�ฒนั�เพิ2�อตอบสำนัอง

คว�มต!องก�รด้!�นัก�รเร�ย์นั ก�รพิ�ฒนั�เนั20อห่� ก�ร ที่บที่วนัแลิะป้ร�บป้ร�ง

แลิะก�รป้ระเม�นัผ่ลิ

46

ISD =Instructional System Development

Forecasting

Planning

ExecutingGathering

Reporting

Follow-up

Analysis

DevelopmentImplementation

Evaluation Design

47

ข�0นัก�รว�เคร�ะห่�เนั20อห่�คว�มร� !• ศ=กษ�/สำ��รวจกลิ�'มเป้�

ห่ม�ย์• ศ=กษ�/สำ��รวจเนั20อห่�• ศ=กษ�/สำ��รวจคว�ม

พิร!อมด้!�นัเที่คโนัโลิย์�• ศ=กษ�/สำ��รวจเคร2�องม2อ

• ศ=กษ�จ�กแห่ลิ'งข!อม�ลิ• สำอบถ�ม• สำ�มภ�ษณ�

48

กลิ�'มเป้�ห่ม�ย์

• ป้ระเภที่• คว�มร� !เด้�ม/คว�มร� !พิ20นัฐ�นั• ร�ป้แบบว�ธี�ก�รเร�ย์นัร� !• เพิศ/อ�ย์�• ข!อจ��ก�ด้ก�รเร�ย์นัร� !

49

เนั20อห่�

• แห่ลิ'งข!อม�ลิ• ลิ�กษณะก�รได้!ม�• คว�มถ�กต!องของเนั20อห่�• ลิ�ขสำ�ที่ธี�@• ร�ป้แบบก�รนั��เสำนัอ

50

เที่คโนัโลิย์�

ผ่�!พิ�ฒนั�• ระบบคอมพิ�วเตอร�• ระบบเคร2อข'�ย์• ระบบก�รผ่ลิ�ต

ผ่�!เร�ย์นั• ระบบคอมพิ�วเตอร�• ระบบเคร2อข'�ย์• ระบบก�รนั��เสำนัอ

51

ก�รออกแบบ

• ก��ห่นัด้ว�ตถ�ป้ระสำงค�เฉพิ�ะ– อะไรค2อสำ��งที่��ผ่�!เร�ย์นัต!องก�ร– อะไรค2อสำ��งที่��ต!องก�รถ'�ย์ที่อด้

• ออกแบบโครงร'�ง• ออกแบบกร�ฟ<ก• ออกแบบบที่เร�ย์นั

ArtisticTechnology

SocialActivities

52

ออกแบบบที่เร�ย์นั

• บที่เร�ย์นัย์'อย์• เนั20อห่�จบในัต�วเอง• ผ่�!เร�ย์นัม�โอก�สำโต!ตอบก�บบที่เร�ย์นัได้!• ผ่�!เร�ย์นัเป้-นั พิระเอก“ ”• ตอบค��ถ�มได้!โด้ย์ไม'ผ่�ด้ ห่ร2อม�โอก�สำแก!ต�ว

– ผ่�ด้เป้-นัคร�• แสำด้งผ่ลิก�รที่ด้สำอบที่�นัที่�

53

Digital Media

• Text– Document– Web Document– PDF

• Image– Metadata– Watermark

• E-Book– Text format– Multimedia

format

• Sound• Video• Flash

54

File name

• ภ�ษ�อ�งกฤษ ผ่สำมต�วเลิข

• ใช!เคร2�องห่ม�ย์เฉพิ�ะ –• ไม'ควรม�ช'องว'�ง• ไม'ควรย์�วม�กเก�นัไป้

55

Server & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พิ�ฒนั�เว+บด้!วย์HTML Editor,

HTML Generatorบนั

Windows

Server :Unix/NT

upload

56

Text

• Document• Web• PDF

– เอกสำ�รคงสำภ�พิต!นัฉบ�บ– ป้องก�นัก�รลิะเม�ด้

ลิ�ขสำ�ที่ธี�@ได้!

• เลิ2อกใช!ฟอนัต�ม�ตรฐ�นั– ตระก�ลิ New– Tahoma– MS Sans Serif,

Microsoft Sans Serif, Thonburi

57

Server & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พิ�ฒนั�เว+บด้!วย์HTML Editor,

HTML Generatorบนั

Windows

Server :Unix/NT

upload

58

ม�ตรฐ�นัร�ป้แบบก�รนั��เสำนัอภ�พิ

Website PreviewFormat PNG / JPEG / GIF PNGResoluti

on72 dpi 72 dpi

Size 300 250 pixels

100

100

pppppp

59

72 & 300 dpi

• 72 dpi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch

• 300 dpi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

60

เว+บกร�ฟ<ก

ร�ปภาพท��แสดงในโหมดปกติ

การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive

61

Format

• ร�ป้แบบของไฟลิ�ภ�พิที่��ใช!ในัก�รจ�ด้เก+บภ�พิ • ก�รเลิ2อกร�ป้แบบที่��เห่ม�ะสำมต'อก�รนั��เสำนัอจะ

ช'วย์ให่!ภ�พิม�ขนั�ด้ (File Size ) เลิ+กลิง โด้ย์คงคว�มคมช�ด้ไว!ในัระด้�บด้�

• เป้-นัก�รป้ระห่ย์�ด้พิ20นัที่��ของสำ2�อบ�นัที่=กข!อม�ลิได้!เป้-นัอย์'�งด้�

62

GIF

• Graphics Interlace File• จ��นัวนัสำ�แลิะคว�มลิะเอ�ย์ด้ของภ�พิไม'สำ�งม�ก

นั�ก• ต!องก�รพิ20นัแบบโป้ร'งใสำ• ต!องก�รแสำด้งผ่ลิแบบโครงร'�งก'อนั แลิ!วค'อย์

แสำด้งผ่ลิแบบลิะเอ�ย์ด้• ต!องก�รนั��เสำนัอภ�พิแบบภ�พิเคลิ2�อนัไห่ว• สำ'วนัขย์�ย์ค2อ .gif

63

Transparent GIFs

64

เว+บกร�ฟ<ก

ร�ปภาพท��แสดงในโหมดปกติ

การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive

65

Animation GIF

66

JPEG

• Joint Photographer's Experts Group • เห่ม�ะสำมก�บก�รนั��เสำนัอที่�0งระบบสำ2�อม�ลิต�ม�เด้�ย์ แลิะ

เว+บไซต� • สำ�ม�รถก��ห่นัด้ขนั�ด้ของไฟลิ�ได้!ต�มคว�มเห่ม�ะสำม

(File Compression )• สำ�ม�รถก��ห่นัด้ค�ณสำมบ�ต�ก�รแสำด้งผ่ลิแบบห่ย์�บ แลิ!ว

ค'อย์ๆ ลิะเอ�ย์ด้เม2�อเวลิ�ผ่'�นัไป้ ที่��เร�ย์กว'�ค�ณสำมบ�ต� Progressive

• สำ'วนัขย์�ย์ของไฟลิ�ร�ป้แบบนั�0ค2อ .jpg ห่ร2อ .jpeg

67

JPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

68

เว+บกร�ฟ<ก

ร�ปภาพท��แสดงในโหมดปกติ

การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive

69

PNG

• Portable Network Graphics • ร�ป้แบบลิ'�สำ�ด้ในัก�รนั��เสำนัอภ�พิผ่'�นัเคร2อข'�ย์

อ�นัเที่อร�เนั+ต • สำ�ม�รถแสำด้งผ่ลิได้!ในัระบบสำ�เต+มพิ�ก�ด้ (True

Color), ม�ขนั�ด้ไฟลิ�เลิ+ก แลิะควบค�มค�ณภ�พิได้!ต�มที่��ต!องก�ร ม�ก�รก��ห่นัด้ให่!พิ20นัภ�พิเป้-นัพิ20นัโป้ร'งใสำได้! (Transparent ) รวมที่�0งก�รแสำด้งผ่ลิแบบห่ย์�บสำ�'ลิะเอ�ย์ด้ (Interlaced )

• สำ'วนัขย์�ย์ของไฟลิ�ร�ป้แบบนั�0ค2อ .png

70

สำร�ป้ก�รเลิ2อกใช!ฟอร�แมตภ�พิ– ไฟลิ�สำก�ลิ GIF (Graphics Interlace File)

• ภ�พิที่��ไม'ต!องก�รคว�มคมช�ด้ม�กนั�ก สำ�ไม'ม�ก• ม�ลิ�กษณะพิ20นัโป้ร'งใสำ

– ไฟลิ�สำก�ลิ JPG (Joint Photographer’s Experts Group)• ภ�พิที่��ต!องก�รคว�มคมช�ด้สำ�ง ม�สำ�ม�ก

– ไฟลิ�สำก�ลิ PNG (Portable Network Graphics)• ภ�พิที่��ต!องก�รคว�มคมช�ด้สำ�ง ม�สำ�ม�กที่��พิ20นัโป้ร'งใสำได้!

71

GIF / JPEG

72

GIF or JPEG?

73

แห่ลิ'งเอกสำ�รเพิ��มเต�ม

• http://www.boonlert.net• http://elearning.nectec.or.th• http://www.nectec.or.th/

courseware