1

การฝึ�กอบรมเชิ�งปฏิ�บ�ติ�การพั�ฒนาบ�คลากรที�ม

SRRT/หน�วยงานพั��นที� (e-Learning)บ�ญเล�ศ อร�ณพั�บ$ลย%คมสั�น ร�ตินถาวรก�ล

ศ$นย%บร�การความร$ (ทีางว�ทียาศาสัติร%และเทีคโนโลย� (STKS)

สั,าน�กงานพั�ฒนาว�ทียาศาสัติร%และเทีคโนโลย�แห�งชิาติ� (สัวทีชิ.)

www.stks.or.th

2

การเร�ยนร$ (ร$ปแบบใหม�• อย$�บนฐานของ

สั�งคมดิ�จิ�ที�ล• สั�งคมแห�งการเร�ยน

ร$ (• การเร�ยนร$ (ติลอดิ

ชิ�ว�ติ• การเร�ยนร$ (ที� ผู้$(เร�ยน

เป3นศ$นย%กลาง

การเร�ยนร$ (แบบกล��มในชิ��นเร�ยน

การเร�ยนร$ (รายบ�คคลAny where, any time

3

การหลอมรวมก�นของเทีคโนโลย� C+C

Appliance

TV

Broadcasting

Electronic Games and Embedded Systems

PC

Computers

Mobile and Wireless

Telecommunications

Broadband and cable services

Connected to networks

Cable changes to wireless

4

ย�คแห�ง E & M

• ดิ(านธุ�รก�จิ– E-Commerce, E-Industry, M-Commerce

• ดิ(านร�ฐบาล– E-Government

• ดิ(านการศ5กษา– E-Learning, M-Learning

• …

5

•IT2010พั�จิารณาและเห7นชิอบโดิยคณะกรรมการเทีคโนโลย�สัารสันเทีศแห�งชิาติ� เม� อ ๓ ติ�ลาคม ๒๕๔๔

• พั�จิารณาและเห7นชิอบโดิยคณะร�ฐมนติร� เม� อ ๑๙ ม�นาคม ๒๕๔๕

กรอบนโยบายเพื่��อการพื่ ฒนาเทคโนโลย�สารสนเทศและการ

ส��อสารของประเทศไทย ระยะ พั.ศ -. 2544 2553

6

การพื่ ฒนาเทคโนโลย�สารสนเทศและการส��อสาร ระยะ ๒๕๔๔-๒๕๕๓

เศรษฐก"จเศรษฐก"จ ส งคมส งคม

ปร"มาณปร"มาณ ค&ณภาพื่ค&ณภาพื่

โครงสร(างพื่�)นฐานโทรคมนาคม

นวั ตกรรม, วั"ทยาศาสตร,และเทคโนโลย�,การวั"จ ยและพื่ ฒนา,ควัามร-(

การพื่ ฒนาสารสนเทศ, ท กษะพื่�)นฐานของประชาชน และบ&คลากรด้(านไอท�

e-Industrye-Industrye-Commercee-Commerce

e-Societye-Education

e-Government

7

eCommerce eIndustry eGovernment eSociety eEducation

กลย�ทีธุ ติามนโยบาย IT2010

มาติรการและแนวทีาง

สั�งเสัร�มการสั�งออก

สั�งเสัร�มการค(าบร�การ

สั�งเสัร�มการบร�โภคจิากผู้$(ประกอบการภายในประเทีศ

กฎหมายพัาณ�ชิย%อ�เล7กทีรอน�กสั%

ระบบการชิ,าระเง�นผู้�านสั� ออ�เล7กทีรอน�กสั%ที� ปลอดิภ�ย

สัร(างความติระหน�กและความเข(าใจิ

สั�งเสัร�มว�สัาหก�จิขนาดิกลางและย�อม

สัร(างติลาดิให(ภาคเอกชินผู้�าน e-Procurement ของภาคร�ฐ

พั�ฒนาบ�คลากร

จิ�ดิให(ม�โครงสัร(างพั��นฐานสัารสันเทีศที� เหมาะสัมและสั�งเสัร�มอ�ติสัาหกรรมไอที�ของไทีย

ยกระดิ�บประสั�ทีธุ�ภาพัในการผู้ล�ติโดิยใชิ(ไอที�ขยายฐานการติลาดิโดิยใชิ(ไอที�

ใชิ(ไอที�เพั� อเพั� มผู้ลผู้ล�ติทีางดิ(านการเกษติร

เน(นการพั�ฒนาอ�ติสัาหกรรมไอที�ที� ม�ศ�กยภาพั

จิ�ดิให(ม� Thailand Exchange

สั�งเสัร�มการใชิ(ไอที�ในภาคการผู้ล�ติ

จิ�ดิให(ม�ข(อม$ลทีางดิ(านการติลาดิ

สั�งเสัร�มการว�จิ�ยและพั�ฒนาในภาคเอกชิน

สั�งเสัร�มการพั�ฒนาบ�คลากรในภาคการผู้ล�ติให(ม�และแลกเปล� ยนความร$ (

สั�งเสัร�มอ�ติสัาหกรรมไอที�เพั� อลดิการน,าเข(าและเพั� อการสั�งออก

สั�งเสัร�มการใชิ(ไอที�ในภาคการเกษติร

สัร(างม$ลค�าเพั� มให(ก�บอ�ปกรณ% ที� ม�อย$�แล(ว (Value-added)

ลดิความเหล� อมล,�าโดิยลงที�น อย�างเหมาะสัม (Equity)

วางแผู้นก(าวกระโดิดิในระยะยาว(Quantum-jump)

ยกระดิ�บคร$ให(ม�ที�กษะดิ(านไอที� (Teachers’ Training)

เร�งผู้ล�ติฐานความร$ ( (Content Development)

สัร(างเคร�อข�ายการศ5กษาที� ม�ระบบบร�หารจิ�ดิการที� ดิ� (Networking)

สัน�บสัน�นการใชิ(ไอที�เพั� อยกระดิ�บความสัามารถทีางว�ทียาศาสัติร%และเทีคโนโลย�

จิ�ดิให(ม�โครงสัร(างพั��นฐานสัารสันเทีศและสั�งเสัร�มอ�ติสัาหกรรมไอที�ของไทีย

ลดิความเหล� อมล,�าของการเข(าถ5งสัารสันเทีศและความร$ ( (Digital Divide)

เพั� มค�ณภาพัชิ�ว�ติให(ก�บประชิาชิน (Quality of Life)

สั�งเสัร�มการเร�ยนร$ ((Learning Society)

สัร(างโอกาสัในการเข(าถ5งสัารสันเทีศและความร$ (

สั�งเสัร�มชิ�มชินและองค%กรแห�งการเร�ยนร$ (ติลอดิชิ�ว�ติ

พั�ฒนาที�กษะของประชิาชินในการเข(าถ5งและใชิ(เทีคโนโลย�เพั� อการเร�ยนร$ (

สั�งเสัร�มการใชิ(ไอที�เพั� อการพั�ฒนาค�ณภาพัชิ�ว�ติ

สัน�บสัน�นการใชิ(ไอที�เพั� อ ว�ฒนธุรรม และความเอ��ออาทีร

ในสั�งคม

สั�งเสัร�มการจิ�ดิให(ม�โครงสัร(างพั��นฐานสัารสันเทีศที� เหมาะสัมและสัน�บสัน�นอ�ติสัาหกรรมไอที�ของไทีย

จิ�ดิที,าแผู้นแม�บทีจิ�ดิให(ม�หน�วยงานติ�ดิติามและสัน�บสัน�นปร�บปร�งระบบงานและการจิ�ดิระบบข(อม$ลที��งในสั�วนกลางและองค%กรที(องถ� นพั�ฒนาข(าราชิการให(ม�ที�กษะปร�บกฎหมายและกฎระเบ�ยบให(เอ��ออ,านวยจิ�ดิให(ม�โครงสัร(างพั��นฐานสัารสันเทีศและสั�งเสัร�มอ�ติสัาหกรรมสัารสันเทีศของไทียสัร(างความติระหน�กและความเชิ� อม� นของประชิาชิน

พั�ฒนาประสั�ทีธุ�ภาพัภายใน องค%กร (Back Office)

พั�ฒนาระบบบร�การประชิาชิน (Front Office)ปร�บปร�งระบบบร�หารราชิการเพั� อน,าไปสั$� Good Governance

8

E-Learning

9

M-Learning

พั�ฒนาการของ E-Learning

E-Learning WBI Distance LearningCAI

10

CAI

• Computer-aided Instruction (CAI)• Computer-aided Learning (CAL)• บทีเร�ยนคอมพั�วเติอร%ชิ�วยสัอน• เน(นการน,าเสันอแบบ Stand Alone

– Macromedia Authorware– Macromedia Director– Show Partner F/X

11

Distance Learning

• การเร�ยนทีางไกล• อาศ�ยว�ทีย� โทีรที�ศน% ไปรษณ�ย%น,าเสันอเน��อหา

12

Web-Based Instruction (WBI)

• Web-Based Training (WBT)• Web-Based Learning (WBL)• บทีเร�ยนที� อย$�บนฐานของเว7บ • น,าเสันอผู้�านโปรโทีคอล TCP/IP และ HTTP • เป3นไดิ(ที��งในร$ปแบบประสัานเวลา (chat,

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

13

WBI/WBT/WBL

Web & Conte

nt Server

คร$ผู้$(สัอนสัร(างหล�กสั$ติร/เน��อหา

FTP

น�กเร�ยน

ผู้$(เร�ยน

ชิ�องทีางการติ�ดิติ�อสั� อสัารร$ปแบบติ�างๆ

14

น�ยาม E-Learning อ�ง ICT

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

• ม�ระบบบร�หารจิ�ดิการการเร�ยน (Learning Management System : LMS) เข(ามาบร�หารควบค�มการจิ�ดิการการสัอน

• (อาจิจิะ ) ม�ระบบบร�หารจิ�ดิการเน��อหาการเร�ยนร$ ( (Content Management System : CMS) เพั� ออ,านวยความสัะดิวกในการสัร(างเน��อหาการเร�ยนร$ (

• น,าเสันอไดิ(ที��งระบบ Online และ Offline• น,าเสันอไดิ(ที��งระบบ Synchronous และ Asynchronous

15

E-Learning

16

E-Learning

• Electronics Learning• การเร�ยนการสัอนที� อาศ�ยสั� ออ�เล7กทีรอน�กสั%

(ความหมายที� วไป)

17

น�ยาม E-Learning อ�ง ICT

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

• ม�ระบบบร�หารจิ�ดิการการเร�ยน (Learning Management System : LMS) เข(ามาบร�หารควบค�มการจิ�ดิการการสัอน

• (อาจิจิะ ) ม�ระบบบร�หารจิ�ดิการเน��อหาการเร�ยนร$ ( (Content Management System : CMS) เพั� ออ,านวยความสัะดิวกในการสัร(างเน��อหาการเร�ยนร$ (

• น,าเสันอไดิ(ที��งระบบ Online และ Offline• น,าเสันอไดิ(ที��งระบบ Synchronous และ Asynchronous

18

e-Learning System Framework

Learning Learning Management Management

SystemSystem

ContentContentManagementManagement

SystemSystem

Learning Learning ToolsTools

19

LMS – Learning Management System

• ระบบบร�หารจิ�ดิการการจิ�ดิการเร�ยนการสัอน• ห�วใจิสั,าค�ญของ E-Learning • สัร(างสัภาพัแวดิล(อมเปร�ยบเสัม�อนก�บการเร�ยนใน

ห(องเร�ยนปกติ� – ติรวจิสัอบการเข(าเร�ยน, ชิ� อผู้$(ที� เข(าเร�ยน, ความก(าวหน(าในการ

เร�ยน, บทีที� เร�ยน, เวลาที� เร�ยน, ชิ� อผู้$(ที� ลงทีะเบ�ยนเร�ยน, การสัม�ครเร�ยน, การแลกเปล� ยนความค�ดิเห7น, การถามติอบ, ระบบประเม�นผู้ล, ห(องสัม�ดิอ�เล7กทีรอน�กสั%สั,าหร�บค(นคว(า, เอกสัารอ(างอ�ง ระบบติ�ว ระบบพั� เล��ยง

20

21

Progress Report

22

Student Management

Class Status

Study Pass Drop

23

Student History

24

25

26

27

28

29

30

31

32

Content Management System

• บร�หารจิ�ดิการสั�วนการที,างานเก� ยวก�บเน��อหา• เน(นการจิ�ดิการระบบผู้�านเว7บ (Web interface )

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

33

HTML Editor (Cont.)

34

Content Construction

35

Sample Content Page

36

Adobe Acrobat Style

37

Text Document Style

38

Flash Animation Style

39

Test Page

40

File Management

41

Import / Export Content

42

43

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

44

Learning Tools

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

45

Web board

46

Chat room

47

Private Messages

48

ประเภทีและการใชิ(งานการสั� อสัารประเภท ควัามหมาย ล กษณะการใช(งานE-mail ใชิ(ติ�ดิติ�อสั� อสัารระหว�างผู้$(ที� เป3น

สัมาชิ�กเที�าน��น (Two Way)ใชิ(ติ�ดิติ�อสั� อสัารระหว�างอาจิารย% หร�อเพั� อนร�วมชิ��นเร�ยนดิ(วยก�น ใชิ(สั�งการบ(านหร�องานที� ไดิ(ร�บมอบหมาย

Webboard ใชิ(ติ�ดิติ�อสั� อสัารระหว�าง ผู้$(เร�ยน อาจิารย% และผู้$(เร�ยน (Three Way)

ใชิ(ก,าหนดิประเดิ7นหร�อกระที$( ติามที� อาจิารย%ก,าหนดิ หร�อติามแติ�น�กเร�ยนจิะก,าหนดิ เพั� อชิ�วยก�นอภ�ปรายติอบประเดิ7นหร�อกระที$(น� �น ที��งอาจิารย%และผู้$(เร�ยน

Chat ใชิ(ติ�ดิติ�อสั� อสัารระหว�าง ผู้$(เร�ยน อาจิารย% และผู้$(เร�ยน (Three Way ) โดิยการสันทีนาแบบ Real Time ม�ที��ง Text Chat และ Voice Chat

ใชิ(สันทีนา ระหว�างผู้$(เร�ยนและอาจิารย%ในห(องเร�ยนหร�อชิ� วโมงเร�ยนน��นๆ เสัม�อนว�าก,าล�งค�ยก�นอย$�ในห(องเร�ยนจิร�งๆ

Share Data

การใชิ(ข(อม$ลร�วมก�นที��งโปรแกรม และไฟล%ข(อม$ล

ใชิ(โปรแกรมร�วมก�นดิ(วยซอฟติ%แวร%ชิ�วย เชิ�น NetMeeting หร�อการถ�ายโอนไฟล%

49

ประเภทีและการใชิ(งานการสั� อสัารประเภท ควัามหมาย ล กษณะการใช(งานConference ใชิ(ติ�ดิติ�อสั� อสัารระหว�าง ผู้$(เร�ยน

อาจิารย% และผู้$(เร�ยน (Three Way ) แบบ Real Time โดิยที� ผู้$(เร�ยนและอาจิารย% สัามารถเห7นหน(าก�นไดิ( โดิยผู้�านทีางกล(องโทีรที�ศน%ที� ติ�ดิอย$�ก�บเคร� องคอมพั�วเติอร%ที� �งสัองฝึFาย

ใชิ(บรรยายให(ผู้$(เร�ยนก�บที� อย$�หน(าเคร� องเสัม�อนว�าก,าล�งน� งเร�ยนอย$�ในห(องเร�ยนจิร�งๆ

Electronic Home Work

ใชิ(ติ�ดิติ�อสั� อสัารระหว�าง ผู้$(เร�ยน อาจิารย% เป3นเสัม�อนสัม�ดิประจิ,าติ�วน�กเร�ยน โดิยที� น�กเร�ยนไม�ติ(องถ�อสัม�ดิการบ(านจิร�งๆ เป3นสัม�ดิการบ(านที� ติ�ดิติ�วติลอดิเวลา

ใชิ(สั�งงานติามที� อาจิารย%ก,าหนดิ เชิ�น ให(เข�ยนรายงาน โดิยที� อาจิารย%สัามารถเปGดิดิ$ Electronic Home Work ของน�กเร�ยนและเข�ยนบ�นที5กเพั� อติรวจิงานและให(คะแนนไดิ( แติ�น�กเร�ยนดิ(วยก�นจิะเปGดิดิ$ไม�ไดิ(

Memo/Note ใชิ(บ�นที5กข(อม$ลการเร�ยน บ�นที5กข(อม$ลการเร�ยนและรายละเอ�ยดิที� จิ,าเป3นติ�างๆ

50

ซอฟติ%แวร% E-Learning

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

ติ(องซ��อ

ฟร� : Open Source Software

51

Open Source Software

• ซอฟติ%แวร%โอเพันซอร%สัค�ออะไร– ซอฟติ%แวร%เปGดิเผู้ยติ(นฉบ�บ– ดิาวน%โหลดิใชิ(งานไดิ(ฟร�– ม�เสัร�ภาพัในการ

• ที,าซ,�า (copy )• ศ5กษา (study)• แก(ไขปร�บปร�ง (modify)• แจิกจิ�ายติ�อ (distribute)

– เน(นการติรวจิสัอบ, แก(ไข, ร�วมพั�ฒนา– ใชิ(อ�นเทีอร%เน7ติ เป3นเคร� องม�อ

52

Open Source e-Learning System

• เนคเทีค ร�วมก�บฝึFายก�อสัร(างพัล�งงานความร(อน การไฟฟIาฝึFายผู้ล�ติแห�งประเทีศไทีย พั�ฒนา Open Source e-Learning System

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

• ติ�ดิติ�อไดิ(ที� – www.learnsquare.com

53

54

ซอฟติ%แวร% E-Learning

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

55

Instructional design

• การออกแบบการสัอน• ร$ปแบบการสัอนที� ม�ล,าดิ�บข��นติอนและหล�กการ• การวางแผู้นการสัอนอย�างม�ระบบระเบ�ยบแบบแผู้น• การจิ�ดิที,าแผู้นการสัอน• การพั�ฒนาเน��อหาการสัอน การประเม�นผู้ล• การว�เคราะห%เปIาหมาย การพั�ฒนาเพั� อติอบสันอง

ความติ(องการดิ(านการเร�ยน การพั�ฒนาเน��อหา การ ทีบทีวนและปร�บปร�ง

และการประเม�นผู้ล

56

ISD =Instructional System Development

Forecasting

Planning

ExecutingGathering

Reporting

Follow-up

Analysis

DevelopmentImplementation

Evaluation Design

57

ข��นการว�เคราะห%เน��อหาความร$ (• ศ5กษา/สั,ารวจิกล��มเปIา

หมาย• ศ5กษา/สั,ารวจิเน��อหา• ศ5กษา/สั,ารวจิความ

พัร(อมดิ(านเทีคโนโลย�• ศ5กษา/สั,ารวจิเคร� องม�อ

• ศ5กษาจิากแหล�งข(อม$ล• สัอบถาม• สั�มภาษณ%

58

กล��มเปIาหมาย

• ประเภที• ความร$ (เดิ�ม/ความร$ (พั��นฐาน• ร$ปแบบว�ธุ�การเร�ยนร$ (• เพัศ/อาย�• ข(อจิ,าก�ดิการเร�ยนร$ (

59

เน��อหา

• แหล�งข(อม$ล• ล�กษณะการไดิ(มา• ความถ$กติ(องของเน��อหา• ล�ขสั�ทีธุ�J• ร$ปแบบการน,าเสันอ

60

เทีคโนโลย�

ผู้$(พั�ฒนา• ระบบคอมพั�วเติอร%• ระบบเคร�อข�าย• ระบบการผู้ล�ติ

ผู้$(เร�ยน• ระบบคอมพั�วเติอร%• ระบบเคร�อข�าย• ระบบการน,าเสันอ

61

การออกแบบ

• ก,าหนดิว�ติถ�ประสังค%เฉพัาะ– อะไรค�อสั� งที� ผู้$(เร�ยนติ(องการ– อะไรค�อสั� งที� ติ(องการถ�ายทีอดิ

• ออกแบบโครงร�าง• ออกแบบกราฟGก• ออกแบบบทีเร�ยน

ArtisticTechnology

SocialActivities

62

ออกแบบบทีเร�ยน

• บทีเร�ยนย�อย• เน��อหาจิบในติ�วเอง• ผู้$(เร�ยนม�โอกาสัโติ(ติอบก�บบทีเร�ยนไดิ(• ผู้$(เร�ยนเป3น พัระเอก“ ”• ติอบค,าถามไดิ(โดิยไม�ผู้�ดิ หร�อม�โอกาสัแก(ติ�ว

– ผู้�ดิเป3นคร$• แสัดิงผู้ลการทีดิสัอบที�นที�

63

Digital Media

• Text– Document– Web Document– PDF

• Image– Metadata– Watermark

• E-Book– Text format– Multimedia

format

• Sound• Video• Flash

64

File name

• ภาษาอ�งกฤษ ผู้สัมติ�วเลข

• ใชิ(เคร� องหมายเฉพัาะ –• ไม�ควรม�ชิ�องว�าง• ไม�ควรยาวมากเก�นไป

65

Server & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พั�ฒนาเว7บดิ(วยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

66

Text

• Document• Web• PDF

– เอกสัารคงสัภาพัติ(นฉบ�บ– ปIองก�นการละเม�ดิ

ล�ขสั�ทีธุ�Jไดิ(

• เล�อกใชิ(ฟอนติ%มาติรฐาน– ติระก$ล New– Tahoma– MS Sans Serif,

Microsoft Sans Serif, Thonburi

67

Server & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พั�ฒนาเว7บดิ(วยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

68

มาติรฐานร$ปแบบการน,าเสันอภาพั

Website PreviewFormat PNG / JPEG / GIF PNGResoluti

on72 dpi 72 dpi

Size 300 250 pixels

100

100

pppppp

69

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

70

เว7บกราฟGก

ร-ปภาพื่ท��แสด้งในโหมด้ปกต"

การแสด้งผลภาพื่แบบ Interlacedการแสด้งผลภาพื่แบบ Progressive

71

Format

• ร$ปแบบของไฟล%ภาพัที� ใชิ(ในการจิ�ดิเก7บภาพั • การเล�อกร$ปแบบที� เหมาะสัมติ�อการน,าเสันอจิะ

ชิ�วยให(ภาพัม�ขนาดิ (File Size ) เล7กลง โดิยคงความคมชิ�ดิไว(ในระดิ�บดิ�

• เป3นการประหย�ดิพั��นที� ของสั� อบ�นที5กข(อม$ลไดิ(เป3นอย�างดิ�

72

GIF

• Graphics Interlace File• จิ,านวนสั�และความละเอ�ยดิของภาพัไม�สั$งมาก

น�ก• ติ(องการพั��นแบบโปร�งใสั• ติ(องการแสัดิงผู้ลแบบโครงร�างก�อน แล(วค�อย

แสัดิงผู้ลแบบละเอ�ยดิ• ติ(องการน,าเสันอภาพัแบบภาพัเคล� อนไหว• สั�วนขยายค�อ .gif

73

Transparent GIFs

74

เว7บกราฟGก

ร-ปภาพื่ท��แสด้งในโหมด้ปกต"

การแสด้งผลภาพื่แบบ Interlacedการแสด้งผลภาพื่แบบ Progressive

75

Animation GIF

76

JPEG

• Joint Photographer's Experts Group • เหมาะสัมก�บการน,าเสันอที��งระบบสั� อม�ลติ�ม�เดิ�ย และ

เว7บไซติ% • สัามารถก,าหนดิขนาดิของไฟล%ไดิ(ติามความเหมาะสัม

(File Compression )• สัามารถก,าหนดิค�ณสัมบ�ติ�การแสัดิงผู้ลแบบหยาบ แล(ว

ค�อยๆ ละเอ�ยดิเม� อเวลาผู้�านไป ที� เร�ยกว�าค�ณสัมบ�ติ� Progressive

• สั�วนขยายของไฟล%ร$ปแบบน��ค�อ .jpg หร�อ .jpeg

77

JPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

78

เว7บกราฟGก

ร-ปภาพื่ท��แสด้งในโหมด้ปกต"

การแสด้งผลภาพื่แบบ Interlacedการแสด้งผลภาพื่แบบ Progressive

79

PNG

• Portable Network Graphics • ร$ปแบบล�าสั�ดิในการน,าเสันอภาพัผู้�านเคร�อข�าย

อ�นเทีอร%เน7ติ • สัามารถแสัดิงผู้ลไดิ(ในระบบสั�เติ7มพั�ก�ดิ (True

Color), ม�ขนาดิไฟล%เล7ก และควบค�มค�ณภาพัไดิ(ติามที� ติ(องการ ม�การก,าหนดิให(พั��นภาพัเป3นพั��นโปร�งใสัไดิ( (Transparent ) รวมที��งการแสัดิงผู้ลแบบหยาบสั$�ละเอ�ยดิ (Interlaced )

• สั�วนขยายของไฟล%ร$ปแบบน��ค�อ .png

80

สัร�ปการเล�อกใชิ(ฟอร%แมติภาพั– ไฟล%สัก�ล GIF (Graphics Interlace File)

• ภาพัที� ไม�ติ(องการความคมชิ�ดิมากน�ก สั�ไม�มาก• ม�ล�กษณะพั��นโปร�งใสั

– ไฟล%สัก�ล JPG (Joint Photographer’s Experts Group)• ภาพัที� ติ(องการความคมชิ�ดิสั$ง ม�สั�มาก

– ไฟล%สัก�ล PNG (Portable Network Graphics)• ภาพัที� ติ(องการความคมชิ�ดิสั$ง ม�สั�มากที,าพั��นโปร�งใสัไดิ(

81

GIF / JPEG

82

GIF or JPEG?

83

แหล�งเอกสัารเพั� มเติ�ม

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

courseware