e-learning : srrt - 01
DESCRIPTION
e-Learning สำนักงานป้องกันควบคุมโรคที่ 8 จ.นครสวรรค์TRANSCRIPT
![Page 1: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/1.jpg)
1
e-Learning สำ��นั�กง�นัป้องก�นัควบค�มโรคที่�� 8จ.นัครสำวรรค�
บ�ญเลิ�ศ อร�ณพิ�บ�ลิย์�ศ�นัย์�บร�ก�รคว�มร� !ที่�งว�ที่ย์�ศ�สำตร�แลิะ
เที่คโนัโลิย์� (STKS)สำ��นั�กง�นัพิ�ฒนั�ว�ที่ย์�ศ�สำตร�แลิะเที่คโนัโลิย์�แห่'ง
ช�ต� (สำวที่ช.)www.stks.or.th
![Page 2: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/2.jpg)
2
Web-Based Instruction (WBI)
• Web-Based Training (WBT)• Web-Based Learning (WBL)• บที่เร�ย์นัที่��อย์�'บนัฐ�นัของเว+บ • นั��เสำนัอผ่'�นัโป้รโที่คอลิ TCP/IP แลิะ HTTP • เป้-นัได้!ที่�0งในัร�ป้แบบป้ระสำ�นัเวลิ� (chat,
video conference) แลิะไม'ป้ระสำ�นัเวลิ� (e-Mail)
![Page 3: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/3.jpg)
3
WBI/WBT/WBL
Web & Conte
nt Server
คร�ผ่�!สำอนัสำร!�งห่ลิ�กสำ�ตร/เนั20อห่�
FTP
นั�กเร�ย์นั
ผ่�!เร�ย์นั
ช'องที่�งก�รต�ด้ต'อสำ2�อสำ�รร�ป้แบบต'�งๆ
![Page 4: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/4.jpg)
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
![Page 5: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/5.jpg)
5
E-Learning
![Page 6: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/6.jpg)
6
E-Learning
• Electronics Learning• ก�รเร�ย์นัก�รสำอนัที่��อ�ศ�ย์สำ2�ออ�เลิ+กที่รอนั�กสำ�
(คว�มห่ม�ย์ที่��วไป้)
![Page 7: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/7.jpg)
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
![Page 8: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/8.jpg)
8
e-Learning System Framework
Learning Learning Management Management
SystemSystem
ContentContentManagementManagement
SystemSystem
Learning Learning ToolsTools
![Page 9: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/9.jpg)
9
LMS – Learning Management System
• ระบบบร�ห่�รจ�ด้ก�รก�รจ�ด้ก�รเร�ย์นัก�รสำอนั• ห่�วใจสำ��ค�ญของ E-Learning • สำร!�งสำภ�พิแวด้ลิ!อมเป้ร�ย์บเสำม2อนัก�บก�รเร�ย์นัในั
ห่!องเร�ย์นัป้กต� – ตรวจสำอบก�รเข!�เร�ย์นั, ช2�อผ่�!ที่��เข!�เร�ย์นั, คว�มก!�วห่นั!�ในัก�ร
เร�ย์นั, บที่ที่��เร�ย์นั, เวลิ�ที่��เร�ย์นั, ช2�อผ่�!ที่��ลิงที่ะเบ�ย์นัเร�ย์นั, ก�รสำม�ครเร�ย์นั, ก�รแลิกเป้ลิ��ย์นัคว�มค�ด้เห่+นั, ก�รถ�มตอบ, ระบบป้ระเม�นัผ่ลิ, ห่!องสำม�ด้อ�เลิ+กที่รอนั�กสำ�สำ��ห่ร�บค!นัคว!�, เอกสำ�รอ!�งอ�ง ระบบต�ว ระบบพิ��เลิ�0ย์ง
![Page 10: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/10.jpg)
10
![Page 11: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/11.jpg)
11
Progress Report
![Page 12: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/12.jpg)
12
Student Management
Class Status
Study Pass Drop
![Page 13: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/13.jpg)
13
Student History
![Page 14: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/14.jpg)
14
![Page 15: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/15.jpg)
15
![Page 16: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/16.jpg)
16
![Page 17: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/17.jpg)
17
![Page 18: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/18.jpg)
18
![Page 19: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/19.jpg)
19
![Page 20: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/20.jpg)
20
![Page 21: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/21.jpg)
21
![Page 22: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/22.jpg)
22
Content Management System
• บร�ห่�รจ�ด้ก�รสำ'วนัก�รที่��ง�นัเก��ย์วก�บเนั20อห่�• เนั!นัก�รจ�ด้ก�รระบบผ่'�นัเว+บ (Web interface )
– เช'นั ก�รนั��เสำนัอบที่คว�ม (Articles), เว+บได้เรคที่อร� (Web directory), เผ่ย์แพิร'ข'�วสำ�รต'�งๆ (News), ห่�วข!อข'�ว (Headline), ถ�ม/ตอบป้6ญห่� (FAQs), ห่!องสำนัที่นั� (Chat), กระด้�นัข'�ว (Forums), ก�รจ�ด้ก�รไฟลิ�ในัสำ'วนัด้�วนั�โห่ลิด้ (Downloads), แบบสำอบถ�ม (Polls), ข!อม�ลิสำถ�ต�ต'�งๆ (Statistics )
![Page 23: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/23.jpg)
23
HTML Editor (Cont.)
![Page 24: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/24.jpg)
24
Content Construction
![Page 25: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/25.jpg)
25
Sample Content Page
![Page 26: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/26.jpg)
26
Adobe Acrobat Style
![Page 27: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/27.jpg)
27
Text Document Style
![Page 28: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/28.jpg)
28
Flash Animation Style
![Page 29: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/29.jpg)
29
Test Page
![Page 30: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/30.jpg)
30
File Management
![Page 31: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/31.jpg)
31
Import / Export Content
![Page 32: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/32.jpg)
32
![Page 33: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/33.jpg)
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
![Page 34: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/34.jpg)
34
Learning Tools
• เคร2�องม2อในัก�รต�ด้ต'อสำ2�อสำ�ร– ม�ระบบระบ�ต�วบ�คคลิ– ม�ระบบร�กษ�คว�มป้ลิอด้ภ�ย์
![Page 35: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/35.jpg)
35
Web board
![Page 36: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/36.jpg)
36
Chat room
![Page 37: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/37.jpg)
37
Private Messages
![Page 38: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/38.jpg)
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อก�รถ'�ย์โอนัไฟลิ�
![Page 39: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/39.jpg)
39
ป้ระเภที่แลิะก�รใช!ง�นัก�รสำ2�อสำ�รประเภท ความหมาย ลั�กษณะการใช้�งานConference ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั
อ�จ�รย์� แลิะผ่�!เร�ย์นั (Three Way ) แบบ Real Time โด้ย์ที่��ผ่�!เร�ย์นัแลิะอ�จ�รย์� สำ�ม�รถเห่+นัห่นั!�ก�นัได้! โด้ย์ผ่'�นัที่�งกลิ!องโที่รที่�ศนั�ที่��ต�ด้อย์�'ก�บเคร2�องคอมพิ�วเตอร�ที่� 0งสำองฝ่;�ย์
ใช!บรรย์�ย์ให่!ผ่�!เร�ย์นัก�บที่��อย์�'ห่นั!�เคร2�องเสำม2อนัว'�ก��ลิ�งนั��งเร�ย์นัอย์�'ในัห่!องเร�ย์นัจร�งๆ
Electronic Home Work
ใช!ต�ด้ต'อสำ2�อสำ�รระห่ว'�ง ผ่�!เร�ย์นั อ�จ�รย์� เป้-นัเสำม2อนัสำม�ด้ป้ระจ��ต�วนั�กเร�ย์นั โด้ย์ที่��นั�กเร�ย์นัไม'ต!องถ2อสำม�ด้ก�รบ!�นัจร�งๆ เป้-นัสำม�ด้ก�รบ!�นัที่��ต�ด้ต�วตลิอด้เวลิ�
ใช!สำ'งง�นัต�มที่��อ�จ�รย์�ก��ห่นัด้ เช'นั ให่!เข�ย์นัร�ย์ง�นั โด้ย์ที่��อ�จ�รย์�สำ�ม�รถเป้<ด้ด้� Electronic Home Work ของนั�กเร�ย์นัแลิะเข�ย์นับ�นัที่=กเพิ2�อตรวจง�นัแลิะให่!คะแนันัได้! แต'นั�กเร�ย์นัด้!วย์ก�นัจะเป้<ด้ด้�ไม'ได้!
Memo/Note ใช!บ�นัที่=กข!อม�ลิก�รเร�ย์นั บ�นัที่=กข!อม�ลิก�รเร�ย์นัแลิะร�ย์ลิะเอ�ย์ด้ที่��จ��เป้-นัต'�งๆ
![Page 40: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/40.jpg)
40
ซอฟต�แวร� E-Learning
• LCMS Software– Blackboard– Learning Space– Edugator– Moodle– ATutor– LearnSquare
ต!องซ20อ
ฟร� : Open Source Software
![Page 41: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/41.jpg)
41
Open Source Software
• ซอฟต�แวร�โอเพินัซอร�สำค2ออะไร– ซอฟต�แวร�เป้<ด้เผ่ย์ต!นัฉบ�บ– ด้�วนั�โห่ลิด้ใช!ง�นัได้!ฟร�– ม�เสำร�ภ�พิในัก�ร
• ที่��ซ�0� (copy )• ศ=กษ� (study)• แก!ไขป้ร�บป้ร�ง (modify)• แจกจ'�ย์ต'อ (distribute)
– เนั!นัก�รตรวจสำอบ, แก!ไข, ร'วมพิ�ฒนั�– ใช!อ�นัเที่อร�เนั+ต เป้-นัเคร2�องม2อ
![Page 42: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/42.jpg)
42
Open Source e-Learning System
• เนัคเที่ค ร'วมก�บฝ่;�ย์ก'อสำร!�งพิลิ�งง�นัคว�มร!อนั ก�รไฟฟ�ฝ่;�ย์ผ่ลิ�ตแห่'งป้ระเที่ศไที่ย์ พิ�ฒนั� Open Source e-Learning System
• พิ�ฒนั�โด้ย์ – PHP– MySQL
• ต�ด้ต'อได้!ที่��– www.learnsquare.com
![Page 43: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/43.jpg)
43
![Page 44: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/44.jpg)
44
ซอฟต�แวร� E-Learning
• ซอฟต�แวร�สำร!�งบที่เร�ย์นั– Microsoft Office, OpenOffice.org– GIMP โป้รแกรมง�นักร�ฟ<ก– Windows Movie Maker โป้รแกรมสำร!�งว�ด้�ที่�ศนั�– Audacity โป้รแกรมด้!�นัเสำ�ย์ง– Freemind ผ่�งคว�มค�ด้– PDF Creator สำร!�งเอกสำ�ร PDF– Microsoft Producer เช2�อม PPT แลิะ Video– Macromedia Captivate บที่เร�ย์นัออนัไลินั�
![Page 45: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/45.jpg)
45
Instructional design
• ก�รออกแบบก�รสำอนั• ร�ป้แบบก�รสำอนัที่��ม�ลิ��ด้�บข�0นัตอนัแลิะห่ลิ�กก�ร• ก�รว�งแผ่นัก�รสำอนัอย์'�งม�ระบบระเบ�ย์บแบบแผ่นั• ก�รจ�ด้ที่��แผ่นัก�รสำอนั• ก�รพิ�ฒนั�เนั20อห่�ก�รสำอนั ก�รป้ระเม�นัผ่ลิ• ก�รว�เคร�ะห่�เป้�ห่ม�ย์ ก�รพิ�ฒนั�เพิ2�อตอบสำนัอง
คว�มต!องก�รด้!�นัก�รเร�ย์นั ก�รพิ�ฒนั�เนั20อห่� ก�ร ที่บที่วนัแลิะป้ร�บป้ร�ง
แลิะก�รป้ระเม�นัผ่ลิ
![Page 46: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/46.jpg)
46
ISD =Instructional System Development
Forecasting
Planning
ExecutingGathering
Reporting
Follow-up
Analysis
DevelopmentImplementation
Evaluation Design
![Page 47: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/47.jpg)
47
ข�0นัก�รว�เคร�ะห่�เนั20อห่�คว�มร� !• ศ=กษ�/สำ��รวจกลิ�'มเป้�
ห่ม�ย์• ศ=กษ�/สำ��รวจเนั20อห่�• ศ=กษ�/สำ��รวจคว�ม
พิร!อมด้!�นัเที่คโนัโลิย์�• ศ=กษ�/สำ��รวจเคร2�องม2อ
• ศ=กษ�จ�กแห่ลิ'งข!อม�ลิ• สำอบถ�ม• สำ�มภ�ษณ�
![Page 48: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/48.jpg)
48
กลิ�'มเป้�ห่ม�ย์
• ป้ระเภที่• คว�มร� !เด้�ม/คว�มร� !พิ20นัฐ�นั• ร�ป้แบบว�ธี�ก�รเร�ย์นัร� !• เพิศ/อ�ย์�• ข!อจ��ก�ด้ก�รเร�ย์นัร� !
![Page 49: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/49.jpg)
49
เนั20อห่�
• แห่ลิ'งข!อม�ลิ• ลิ�กษณะก�รได้!ม�• คว�มถ�กต!องของเนั20อห่�• ลิ�ขสำ�ที่ธี�@• ร�ป้แบบก�รนั��เสำนัอ
![Page 50: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/50.jpg)
50
เที่คโนัโลิย์�
ผ่�!พิ�ฒนั�• ระบบคอมพิ�วเตอร�• ระบบเคร2อข'�ย์• ระบบก�รผ่ลิ�ต
ผ่�!เร�ย์นั• ระบบคอมพิ�วเตอร�• ระบบเคร2อข'�ย์• ระบบก�รนั��เสำนัอ
![Page 51: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/51.jpg)
51
ก�รออกแบบ
• ก��ห่นัด้ว�ตถ�ป้ระสำงค�เฉพิ�ะ– อะไรค2อสำ��งที่��ผ่�!เร�ย์นัต!องก�ร– อะไรค2อสำ��งที่��ต!องก�รถ'�ย์ที่อด้
• ออกแบบโครงร'�ง• ออกแบบกร�ฟ<ก• ออกแบบบที่เร�ย์นั
ArtisticTechnology
SocialActivities
![Page 52: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/52.jpg)
52
ออกแบบบที่เร�ย์นั
• บที่เร�ย์นัย์'อย์• เนั20อห่�จบในัต�วเอง• ผ่�!เร�ย์นัม�โอก�สำโต!ตอบก�บบที่เร�ย์นัได้!• ผ่�!เร�ย์นัเป้-นั พิระเอก“ ”• ตอบค��ถ�มได้!โด้ย์ไม'ผ่�ด้ ห่ร2อม�โอก�สำแก!ต�ว
– ผ่�ด้เป้-นัคร�• แสำด้งผ่ลิก�รที่ด้สำอบที่�นัที่�
![Page 53: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/53.jpg)
53
Digital Media
• Text– Document– Web Document– PDF
• Image– Metadata– Watermark
• E-Book– Text format– Multimedia
format
• Sound• Video• Flash
![Page 54: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/54.jpg)
54
File name
• ภ�ษ�อ�งกฤษ ผ่สำมต�วเลิข
• ใช!เคร2�องห่ม�ย์เฉพิ�ะ –• ไม'ควรม�ช'องว'�ง• ไม'ควรย์�วม�กเก�นัไป้
![Page 55: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/55.jpg)
55
Server & ClientWindowsXP
IE
Windows2000IE
Macintosh
Windows98Netscape
พิ�ฒนั�เว+บด้!วย์HTML Editor,
HTML Generatorบนั
Windows
Server :Unix/NT
upload
![Page 56: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/56.jpg)
56
Text
• Document• Web• PDF
– เอกสำ�รคงสำภ�พิต!นัฉบ�บ– ป้องก�นัก�รลิะเม�ด้
ลิ�ขสำ�ที่ธี�@ได้!
• เลิ2อกใช!ฟอนัต�ม�ตรฐ�นั– ตระก�ลิ New– Tahoma– MS Sans Serif,
Microsoft Sans Serif, Thonburi
![Page 57: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/57.jpg)
57
Server & ClientWindowsXP
IE
Windows2000IE
Macintosh
Windows98Netscape
พิ�ฒนั�เว+บด้!วย์HTML Editor,
HTML Generatorบนั
Windows
Server :Unix/NT
upload
![Page 58: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/58.jpg)
58
ม�ตรฐ�นัร�ป้แบบก�รนั��เสำนัอภ�พิ
Website PreviewFormat PNG / JPEG / GIF PNGResoluti
on72 dpi 72 dpi
Size 300 250 pixels
100
100
pppppp
![Page 59: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/59.jpg)
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
![Page 60: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/60.jpg)
60
เว+บกร�ฟ<ก
ร�ปภาพท��แสดงในโหมดปกติ
การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive
![Page 61: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/61.jpg)
61
Format
• ร�ป้แบบของไฟลิ�ภ�พิที่��ใช!ในัก�รจ�ด้เก+บภ�พิ • ก�รเลิ2อกร�ป้แบบที่��เห่ม�ะสำมต'อก�รนั��เสำนัอจะ
ช'วย์ให่!ภ�พิม�ขนั�ด้ (File Size ) เลิ+กลิง โด้ย์คงคว�มคมช�ด้ไว!ในัระด้�บด้�
• เป้-นัก�รป้ระห่ย์�ด้พิ20นัที่��ของสำ2�อบ�นัที่=กข!อม�ลิได้!เป้-นัอย์'�งด้�
![Page 62: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/62.jpg)
62
GIF
• Graphics Interlace File• จ��นัวนัสำ�แลิะคว�มลิะเอ�ย์ด้ของภ�พิไม'สำ�งม�ก
นั�ก• ต!องก�รพิ20นัแบบโป้ร'งใสำ• ต!องก�รแสำด้งผ่ลิแบบโครงร'�งก'อนั แลิ!วค'อย์
แสำด้งผ่ลิแบบลิะเอ�ย์ด้• ต!องก�รนั��เสำนัอภ�พิแบบภ�พิเคลิ2�อนัไห่ว• สำ'วนัขย์�ย์ค2อ .gif
![Page 63: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/63.jpg)
63
Transparent GIFs
![Page 64: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/64.jpg)
64
เว+บกร�ฟ<ก
ร�ปภาพท��แสดงในโหมดปกติ
การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive
![Page 65: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/65.jpg)
65
Animation GIF
![Page 66: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/66.jpg)
66
JPEG
• Joint Photographer's Experts Group • เห่ม�ะสำมก�บก�รนั��เสำนัอที่�0งระบบสำ2�อม�ลิต�ม�เด้�ย์ แลิะ
เว+บไซต� • สำ�ม�รถก��ห่นัด้ขนั�ด้ของไฟลิ�ได้!ต�มคว�มเห่ม�ะสำม
(File Compression )• สำ�ม�รถก��ห่นัด้ค�ณสำมบ�ต�ก�รแสำด้งผ่ลิแบบห่ย์�บ แลิ!ว
ค'อย์ๆ ลิะเอ�ย์ด้เม2�อเวลิ�ผ่'�นัไป้ ที่��เร�ย์กว'�ค�ณสำมบ�ต� Progressive
• สำ'วนัขย์�ย์ของไฟลิ�ร�ป้แบบนั�0ค2อ .jpg ห่ร2อ .jpeg
![Page 67: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/67.jpg)
67
JPEG File Format
JPEG - 19KLow Quality
JPEG - 60KMax Quality
![Page 68: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/68.jpg)
68
เว+บกร�ฟ<ก
ร�ปภาพท��แสดงในโหมดปกติ
การแสดงผลัภาพแบบ Interlacedการแสดงผลัภาพแบบ Progressive
![Page 69: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/69.jpg)
69
PNG
• Portable Network Graphics • ร�ป้แบบลิ'�สำ�ด้ในัก�รนั��เสำนัอภ�พิผ่'�นัเคร2อข'�ย์
อ�นัเที่อร�เนั+ต • สำ�ม�รถแสำด้งผ่ลิได้!ในัระบบสำ�เต+มพิ�ก�ด้ (True
Color), ม�ขนั�ด้ไฟลิ�เลิ+ก แลิะควบค�มค�ณภ�พิได้!ต�มที่��ต!องก�ร ม�ก�รก��ห่นัด้ให่!พิ20นัภ�พิเป้-นัพิ20นัโป้ร'งใสำได้! (Transparent ) รวมที่�0งก�รแสำด้งผ่ลิแบบห่ย์�บสำ�'ลิะเอ�ย์ด้ (Interlaced )
• สำ'วนัขย์�ย์ของไฟลิ�ร�ป้แบบนั�0ค2อ .png
![Page 70: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/70.jpg)
70
สำร�ป้ก�รเลิ2อกใช!ฟอร�แมตภ�พิ– ไฟลิ�สำก�ลิ GIF (Graphics Interlace File)
• ภ�พิที่��ไม'ต!องก�รคว�มคมช�ด้ม�กนั�ก สำ�ไม'ม�ก• ม�ลิ�กษณะพิ20นัโป้ร'งใสำ
– ไฟลิ�สำก�ลิ JPG (Joint Photographer’s Experts Group)• ภ�พิที่��ต!องก�รคว�มคมช�ด้สำ�ง ม�สำ�ม�ก
– ไฟลิ�สำก�ลิ PNG (Portable Network Graphics)• ภ�พิที่��ต!องก�รคว�มคมช�ด้สำ�ง ม�สำ�ม�กที่��พิ20นัโป้ร'งใสำได้!
![Page 71: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/71.jpg)
71
GIF / JPEG
![Page 72: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/72.jpg)
72
GIF or JPEG?
![Page 73: e-Learning : SRRT - 01](https://reader035.vdocuments.mx/reader035/viewer/2022081413/54642144b4af9f5d3f8b486f/html5/thumbnails/73.jpg)
73
แห่ลิ'งเอกสำ�รเพิ��มเต�ม
• http://www.boonlert.net• http://elearning.nectec.or.th• http://www.nectec.or.th/
courseware