Hide Notes 

Slide 1: การฝึกอบรมเชิงปฏิบัติการ พัฒนาบุคลากรทีม SRRT/ หน่วยงานพื้นที่ (e-Learning) บุญเลิศ อรุณพิบูลย์ คมสัน รัตนถาวรกุล ศูนย์บริการความรู้ทางวิทยาศาสตร์และ เทคโนโลยี (STKS) สำานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยี แห่งชาติ (สวทช.) 1
Slide 2: การเรียนรู้รูปแบบใหม่ • อยู่บนฐานของ สังคมดิจิทัล • สังคมแห่งการเรียน รู้ • การเรียนรู้ตลอด การเรียนรู้รายบุคคล ชีวิต Any where, any time • การเรียนรู้ที่ผู้เรียน เป็นศูนย์กลาง การเรียนรู้แบบกลุ่ม ในชั้นเรียน 2
Slide 3: การหลอมรวมกันของเทคโนโลยี C+C Computers Broadcasting Connected to networks Broadband and cable services TV Appliance PC Mobile and Wireless Cable changes to wireless Telecommunications 3 Electronic Games and Embedded Systems
Slide 4: ยุคแห่ง E & M • ด้านธุรกิจ – E-Commerce, E-Industry, M-Commerce • ด้านรัฐบาล – E-Government • ด้านการศึกษา – E-Learning, M-Learning •… 4
Slide 5: กรอบนโยบายเพื่อ การพัฒนาเทคโนโลยีสารสนเทศและ การสื่อสารของประเทศไทย ระยะ พ.ศ. 2544-2553 • IT2010 พิจารณาและเห็นชอบโดยคณะกรรมการ เทคโนโลยีสารสนเทศแห่งชาติ เมื่อ ๓ ตุลาคม ๒๕๔๔ • พิจารณาและเห็นชอบโดยคณะรัฐมนตรี เมื่อ ๑๙ มีนาคม ๒๕๔๕ 5
Slide 6: การพัฒนาเทคโนโลยีสารสนเทศและการ สื่อสาร ระยะ ๒๕๔๔-๒๕๕๓ เศรษฐกิจ e-Industry e-Commerce e-Government สังคม e-Society e-Education นวัตกรรม, วิทยาศาสตร์และเทคโนโลยี,การวิจัยและพัฒนา,ความรู้ การพัฒนาสารสนเทศ, ทักษะพื้นฐานของประชาชน และบุคลากรด้านไอที โครงสร้างพื้นฐานโทรคมนาคม ปริมาณ 6 คุณภาพ
Slide 7: ยกระดับประสิทธิภาพในการ ผลิตโดยใช้ไอที ส่งเสริมการส่งออก ส่งเสริมการค้าบริการ ขยายฐานการตลาดโดยใช้ไอที ใช้ไอทีเพื่อเพิ่มผลผลิตทางด้าน ส่งเสริมการบริโภคจาก การเกษตร ผู้ประกอบการภายใน เน้นการพัฒนาอุตสาหกรรม ประเทศ ไอทีที่มีศักยภาพ กลยุทธ ตามนโยบาย IT2010 eCommerce eIndustry eGovernment eSociety eEducation พัฒนาประสิทธิภาพ ภายในองค์กร (Back Office) พัฒนาระบบบริการ ประชาชน (Front Office) ปรับปรุงระบบบริหาร ราชการเพื่อนำาไปสู่ Good Governance ลดความเหลื่อมลำ้าของการ เข้าถึงสารสนเทศและความรู้ (Digital Divide) เพิ่มคุณภาพชีวิตให้กับ ประชาชน (Quality of Life) ส่งเสริมการเรียนรู้ (Learning Society) สร้างมูลค่าเพิ่มให้กับอุปกรณ์ ที่มีอยูแล้ว (Value-added) ่ ลดความเหลื่อมลำ้าโดยลงทุน อย่างเหมาะสม (Equity) วางแผนก้าวกระโดดในระยะ ยาว(Quantum-jump) มาตรการและแนวทาง กฎหมายพาณิชย์ อิเล็กทรอนิกส์ จัดให้มี Thailand Exchange ส่งเสริมการใช้ไอทีในภาคการ ระบบการชำาระเงินผ่านสื่อ ผลิต อิเล็กทรอนิกส์ที่ปลอดภัย จัดให้มีขอมูลทางด้านการ ้ สร้างความตระหนักและ ตลาด ความเข้าใจ ส่งเสริมการวิจัยและพัฒนาใน ส่งเสริมวิสาหกิจขนาด ภาคเอกชน กลางและย่อม ส่งเสริมการพัฒนาบุคลากรใน สร้างตลาดให้ภาคเอกชน ภาคการผลิตให้มีและแลก ผ่าน e-Procurement เปลี่ยนความรู้ ของภาครัฐ ส่งเสริมอุตสาหกรรมไอทีเพื่อ พัฒนาบุคลากร ลดการนำาเข้าและเพื่อการส่ง จัดให้มีโครงสร้างพื้นฐาน ออก สารสนเทศที่เหมาะสม ส่งเสริมการใช้ไอทีในภาค และส่งเสริมอุตสาหกรรม การเกษตร ไอทีของไทย จัดทำาแผนแม่บท จัดให้มีหน่วยงานติดตาม และสนับสนุน ปรับปรุงระบบงานและการ จัดระบบข้อมูลทั้งในส่วน กลางและองค์กรท้องถิ่น พัฒนาข้าราชการให้มี ทักษะ ปรับกฎหมายและกฎ ระเบียบให้เอื้ออำานวย จัดให้มีโครงสร้างพื้นฐาน สารสนเทศและส่งเสริม อุตสาหกรรมสารสนเทศ ของไทย สร้างความตระหนักและ ความเชี่อมั่นของประชาชน สร้างโอกาสในการเข้าถึง สารสนเทศและความรู้ ยกระดับครูให้มีทักษะด้าน ไอที (Teachers’ Training) ส่งเสริมชุมชนและองค์กรแห่ง เร่งผลิตฐานความรู้ (Content Development) การเรียนรู้ตลอดชีวต ิ พัฒนาทักษะของประชาชนใน สร้างเครือข่ายการศึกษาที่มี การเข้าถึงและใช้เทคโนโลยี ระบบบริหารจัดการที่ดี (Networking) เพื่อการเรียนรู้ ส่งเสริมการใช้ไอทีเพื่อการ พัฒนาคุณภาพชีวต ิ สนับสนุนการใช้ไอทีเพื่อ วัฒนธรรม และความเอื้อ อาทรในสังคม ส่งเสริมการจัดให้มีโครงสร้าง พื้นฐานสารสนเทศที่เหมาะ สมและสนับสนุนอุตสาหกรรม ไอทีของไทย สนับสนุนการใช้ไอทีเพื่อยก ระดับความสามารถทาง วิทยาศาสตร์และเทคโนโลยี จัดให้มีโครงสร้างพื้นฐาน สารสนเทศและส่งเสริม อุตสาหกรรมไอทีของไทย 7
Slide 8: E-Learning 8
Slide 9: พัฒนาการของ E-Learning CAI Distance Learning WBI E-Learning M-Learning 9
Slide 10: CAI • • • • Computer-aided Instruction (CAI) Computer-aided Learning (CAL) บทเรียนคอมพิวเตอร์ช่วยสอน เน้นการนำาเสนอแบบ Stand Alone – Macromedia Authorware – Macromedia Director – Show Partner F/X 10
Slide 11: Distance Learning • การเรียนทางไกล • อาศัยวิทยุ โทรทัศน์ ไปรษณีย์นำาเสนอ เนือหา ้ 11
Slide 12: Web-Based Instruction (WBI) • • • • • Web-Based Training (WBT) Web-Based Learning (WBL) บทเรียนที่อยู่บนฐานของเว็บ นำาเสนอผ่านโปรโทคอล TCP/IP และ HTTP เป็นได้ทั้งในรูปแบบประสานเวลา (chat, video conference) และไม่ประสานเวลา (e-Mail) 12
Slide 13: WBI/WBT/WBL นักเรียน FTP ครูผู้สอน ร้างหลักสูตร/เนื้อหา Web & Conten t Server ช่องทางการติดต่อสื่อสาร รูปแบบต่างๆ ผูเรียน ้ 13
Slide 14: นิยาม E-Learning อิง ICT • ระบบที่พัฒนาต่อเนื่องมาจาก WBI (Web Based Instruction) • มีระบบบริหารจัดการการเรียน (Learning Management System : LMS) เข้ามาบริ หารควบคุมการจัดการการสอน • (อาจจะ) มีระบบบริหารจัดการเนือหาการ ้ เรียนรู้ (Content Management System : CMS) เพื่ออำานวยความสะดวกในการสร้าง เนือหาการเรียนรู้ ้ 14
Slide 15: E-Learning 15
Slide 16: E-Learning • Electronics Learning • การเรียนการสอนที่อาศัยสืออิเล็กทรอนิกส์ ่ (ความหมายทั่วไป) 16
Slide 17: นิยาม E-Learning อิง ICT • ระบบที่พัฒนาต่อเนื่องมาจาก WBI (Web Based Instruction) • มีระบบบริหารจัดการการเรียน (Learning Management System : LMS) เข้ามาบริ หารควบคุมการจัดการการสอน • (อาจจะ) มีระบบบริหารจัดการเนือหาการ ้ เรียนรู้ (Content Management System : CMS) เพื่ออำานวยความสะดวกในการสร้าง เนือหาการเรียนรู้ ้ 17
Slide 18: e-Learning System Framework Learning Management System Content Management System Learning Tools 18
Slide 19: LMS – Learning Management System • ระบบบริหารจัดการการจัดการเรียนการสอน • หัวใจสำาคัญของ E-Learning • สร้างสภาพแวดล้อมเปรียบเสมือนกับการ เรียนในห้องเรียนปกติ 19 – ตรวจสอบการเข้าเรียน, ชื่อผู้ทเข้าเรียน, ความ ี่ ก้าวหน้าในการเรียน, บทที่เรียน, เวลาทีเรียน, ชื่อผู้ทลงทะเบียนเรียน, ่ ี่ การสมัครเรียน, การแลกเปลี่ยนความคิดเห็น, การถามตอบ, ระบบประเมินผล, ห้องสมุดอิเล็กทรอนิกส์สำาหรับค้นคว้า, เอกสาร
Slide 20: 20
Slide 21: Progress Report 21
Slide 22: Student Management Class Status Study  Pass  Drop 22
Slide 23: Student History 23
Slide 24: 24
Slide 25: 25
Slide 26: 26
Slide 27: 27
Slide 28: 28
Slide 29: 29
Slide 30: 30
Slide 31: 31
Slide 32: Content Management System • บริหารจัดการส่วนการทำางานเกี่ยวกับ เนื้อหา • เน้นการจัดการระบบผ่านเว็บ (Web interface) – เช่น การนำาเสนอบทความ (Articles), เว็บ ไดเรคทอรี (Web directory), เผยแพร่ ข่าวสารต่างๆ (News), หัวข้อข่าว (Headline), ถาม/ตอบปัญหา (FAQs), ห้องสนทนา (Chat), กระดานข่าว 32
Slide 33: HTML Editor (Cont.) 33
Slide 34: Content Construction 34
Slide 35: Sample Content Page 35
Slide 36: Adobe Acrobat Style 36
Slide 37: Text Document Style 37
Slide 38: Flash Animation Style 38
Slide 39: Test Page 39
Slide 40: File Management 40
Slide 41: Import / Export Content 41
Slide 42: 42
Slide 43: LMS/CMS LMS Who benefits? All learners; organization CMS Content developers; learners who need personalized content Learning content Provides primary management of Manages system 43 Learner performance Yes Yes
Slide 44: Learning Tools • เครื่องมือในการติดต่อสือสาร ่ – มีระบบระบุตวบุคคล ั – มีระบบรักษาความปลอดภัย 44
Slide 45: Web board 45
Slide 46: Chat room 46
Slide 47: Private Messages 47
Slide 48: ประเภทและการใช้งานการสื่อสาร ประเภท E-mail ความหมาย ใช้ตดต่อสื่อสารระหว่างผู้ทเป็น ิ ี่ สมาชิกเท่านั้น (Two Way) ใช้ตดต่อสื่อสารระหว่าง ผู้ ิ เรียน อาจารย์ และผู้เรียน (Three Way) ใช้ตดต่อสื่อสารระหว่าง ผู้ ิ เรียน อาจารย์ และผู้เรียน (Three Way) โดยการ สนทนาแบบ Real Time มี ทัง Text Chat และ Voice ้ Chat การใช้ข้อมูลร่วมกันทั้ง โปรแกรม และไฟล์ข้อมูล ลักษณะการใช้งาน ใช้ติดต่อสื่อสารระหว่างอาจารย์ หรือเพื่อน ร่วมชั้นเรียนด้วยกัน ใช้ส่งการบ้านหรืองานที่ ได้รับมอบหมาย ใช้กำาหนดประเด็นหรือกระทู้ ตามที่อาจารย์ กำาหนด หรือตามแต่นักเรียนจะกำาหนด เพื่อ ช่วยกันอภิปรายตอบประเด็นหรือกระทูนั้น ้ ทังอาจารย์และผู้เรียน ้ ใช้สนทนา ระหว่างผู้เรียนและอาจารย์ใน ห้องเรียนหรือชั่วโมงเรียนนั้นๆ เสมือนว่า กำาลังคุยกันอยู่ในห้องเรียนจริงๆ Webboard Chat Share Data 48 ใช้โปรแกรมร่วมกันด้วยซอฟต์แวร์ช่วย เช่น NetMeeting หรือการถ่ายโอนไฟล์
Slide 49: ประเภทและการใช้งานการสื่อสาร ประเภท Conference ความหมาย ใช้ตดต่อสื่อสารระหว่าง ผู้ ิ เรียน อาจารย์ และผู้เรียน (Three Way) แบบ Real Time โดยทีผู้เรียนและ ่ อาจารย์ สามารถเห็นหน้ากัน ได้ โดยผ่านทางกล้อง โทรทัศน์ทติดอยู่กับเครือง ี่ ่ คอมพิวเตอร์ทงสองฝ่าย ั้ ใช้ตดต่อสื่อสารระหว่าง ผู้ ิ เรียน อาจารย์ เป็นเสมือน สมุดประจำาตัวนักเรียน โดยที่ นักเรียนไม่ตองถือสมุดการ ้ บ้านจริงๆ เป็นสมุดการบ้านที่ ติดตัวตลอดเวลา ใช้บันทึกข้อมูลการเรียน ลักษณะการใช้งาน ใช้บรรยายให้ผู้เรียนกับที่อยู่หน้าเครื่อง เสมือนว่ากำาลังนั่งเรียนอยู่ในห้องเรียนจริงๆ Electronic Home Work ใช้ส่งงานตามทีอาจารย์กำาหนด เช่น ให้ ่ เขียนรายงาน โดยที่อาจารย์สามารถเปิดดู Electronic Home Work ของนักเรียน และเขียนบันทึกเพื่อตรวจงานและให้ คะแนนได้ แต่นักเรียนด้วยกันจะเปิดดูไม่ ได้ บันทึกข้อมูลการเรียนและรายละเอียดที่ จำาเป็นต่างๆ Memo/Note 49
Slide 50: ซอฟต์แวร์ E-Learning • LCMS Software – Blackboard – Learning Spaceต้องซื้อ – Edugator – Moodle ฟรี : Open Source Software – ATutor – LearnSquare 50
Slide 51: Open Source Software • ซอฟต์แวร์โอเพนซอร์สคืออะไร – ซอฟต์แวร์เปิดเผยต้นฉบับ – ดาวน์โหลดใช้งานได้ฟรี – มีเสรีภาพในการ • • • • ทำาซำ้า (copy ) ศึกษา (study) แก้ไขปรับปรุง (modify) แจกจ่ายต่อ (distribute) – เน้นการตรวจสอบ, แก้ไข, ร่วมพัฒนา – ใช้อนเทอร์เน็ต เป็นเครื่องมือ ิ 51
Slide 52: Open Source e-Learning System • เนคเทค ร่วมกับฝ่ายก่อสร้างพลังงานความร้อน การ ไฟฟ้าฝ่ายผลิตแห่งประเทศไทย พัฒนา Open Source e-Learning System • พัฒนาโดย – PHP – MySQL • ติดต่อได้ที่ – www.learnsquare.com 52
Slide 53: 53
Slide 54: ซอฟต์แวร์ E-Learning • ซอฟต์แวร์สร้างบทเรียน – Microsoft Office, OpenOffice.org – GIMP โปรแกรมงานกราฟิก – Windows Movie Maker โปรแกรมสร้างวีดิ ทัศน์ – Audacity โปรแกรมด้านเสียง – Freemind ผังความคิด – PDF Creator สร้างเอกสาร PDF – Microsoft Producer เชื่อม PPT และ Video – Macromedia Captivate บทเรียนออนไลน์ 54
Slide 55: Instructional design • • • • • • การออกแบบการสอน รูปแบบการสอนที่มีลำาดับขันตอนและหลักการ ้ การวางแผนการสอนอย่างมีระบบระเบียบแบบแผน การจัดทำาแผนการสอน การพัฒนาเนื้อหาการสอน การประเมินผล การวิเคราะห์เป้าหมาย การพัฒนาเพื่อตอบสนอง ความต้องการด้านการเรียน การพัฒนาเนื้อหา การ ทบทวนและปรับปรุง และการประเมินผล 55
Slide 56: ISD =Instructional System Development Analysis Follow-up Evaluation Forecasting Planning Design Reporting Gathering Implementation 56 Executing Development
Slide 57: ขั้นการวิเคราะห์เนื้อหาความรู้ • ศึกษา/สำารวจกลุ่มเป้า หมาย • ศึกษา/สำารวจเนื้อหา • ศึกษา/สำารวจความ พร้อมด้านเทคโนโลยี • ศึกษา/สำารวจเครื่องมือ • ศึกษาจากแหล่งข้อมูล • สอบถาม • สัมภาษณ์ 57
Slide 58: กลุ่มเป้าหมาย • • • • • ประเภท ความรู้เดิม/ความรู้พนฐาน ื้ รูปแบบวิธีการเรียนรู้ เพศ/อายุ ข้อจำากัดการเรียนรู้ 58
Slide 59: เนื้อหา • แหล่งข้อมูล • ลักษณะการได้มา • ความถูกต้องของเนื้อหา • ลิขสิทธิ์ • รูปแบบการนำาเสนอ 59
Slide 60: เทคโนโลยี ผู้พัฒนา • ระบบคอมพิวเตอร์ • ระบบเครือข่าย • ระบบการผลิต ผูเรียน ้ • ระบบคอมพิวเตอร์ • ระบบเครือข่าย • ระบบการนำาเสนอ 60
Slide 61: การออกแบบ • กำาหนดวัตถุประสงค์เฉพาะ – อะไรคือสิ่งที่ผู้เรียนต้องการ Technology Artistic – อะไรคือสิ่งที่ต้องการถ่ายทอด • ออกแบบโครงร่าง • ออกแบบกราฟิก • ออกแบบบทเรียน Social Activities 61
Slide 62: ออกแบบบทเรียน • • • • • บทเรียนย่อย เนือหาจบในตัวเอง ้ ผู้เรียนมีโอกาสโต้ตอบกับบทเรียนได้ ผู้เรียนเป็น “พระเอก” ตอบคำาถามได้โดยไม่ผิด หรือมีโอกาสแก้ตัว – ผิดเป็นครู • แสดงผลการทดสอบทันที 62
Slide 63: Digital Media • Text – Document – Web Document – PDF • E-Book – Text format – Multimedia format • Image – Metadata – Watermark • Sound • Video • Flash 63
Slide 64: File name • ภาษาอังกฤษ ผสมตัวเลข • ใช้เครื่องหมายเฉพาะ – • ไม่ควรมีช่องว่าง • ไม่ควรยาวมากเกินไป 64
Slide 65: Server & Client upload WindowsXP IE Windows2000 IE Server : Unix/NT Windows98 Netscape Macintosh 65 พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows
Slide 66: Text • Document • Web • PDF – เอกสารคงสภาพ ต้นฉบับ – ป้องกันการละเมิด ลิขสิทธิได้ ์ • เลือกใช้ฟอนต์ มาตรฐาน – ตระกูล New – Tahoma – MS Sans Serif, Microsoft Sans Serif, Thonburi 66
Slide 67: Server & Client upload WindowsXP IE Windows2000 IE Server : Unix/NT Windows98 Netscape Macintosh 67 พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows
Slide 68: มาตรฐานรูปแบบการนำาเสนอภาพ Website Preview Format PNG / JPEG / GIF PNG Resolution 72 dpi 72 dpi Size ≈ 300 × 250 pixels ≈ 100 × 100 pixels 68
Slide 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 69
Slide 70: เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ แบบ Progressive 70 การแสดงผลภาพแบบ Interlaced
Slide 71: Format • รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ • การเลือกรูปแบบที่เหมาะสมต่อการนำาเสนอ จะช่วยให้ภาพมีขนาด (File Size) เล็กลง โดยคงความคมชัดไว้ในระดับดี • เป็นการประหยัดพื้นที่ของสือบันทึกข้อมูลได้ ่ เป็นอย่างดี 71
Slide 72: GIF • Graphics Interlace File • จำานวนสีและความละเอียดของภาพไม่สูงมาก นัก • ต้องการพื้นแบบโปร่งใส • ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อย แสดงผลแบบละเอียด • ต้องการนำาเสนอภาพแบบภาพเคลื่อนไหว • ส่วนขยายคือ .gif 72
Slide 73: Transparent GIFs 73
Slide 74: เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ แบบ Progressive 74 การแสดงผลภาพแบบ Interlaced
Slide 75: Animation GIF 75
Slide 76: JPEG • Joint Photographer's Experts Group • เหมาะสมกับการนำาเสนอทังระบบสื่อมัลติมเดีย และ ้ ี เว็บไซต์ • สามารถกำาหนดขนาดของไฟล์ได้ตามความเหมาะ สม (File Compression) • สามารถกำาหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมือเวลาผ่านไป ทีเรียกว่า ่ ่ คุณสมบัติ Progressive • ส่วนขยายของไฟล์รูปแบบนี้คือ .jpg หรือ .jpeg 76
Slide 77: JPEG File Format JPEG - 60K Max Quality JPEG - 19K Low Quality 77
Slide 78: เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ แบบ Progressive 78 การแสดงผลภาพแบบ Interlaced
Slide 79: PNG • Portable Network Graphics • รูปแบบล่าสุดในการนำาเสนอภาพผ่านเครือข่าย อินเทอร์เน็ต • สามารถแสดงผลได้ในระบบสีเต็มพิกัด (True Color), มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ ตามทีต้องการ มีการกำาหนดให้พนภาพเป็นพืน ่ ื้ ้ โปร่งใสได้ (Transparent) รวมทังการแสดงผล ้ แบบหยาบสูละเอียด (Interlaced) ่ • ส่วนขยายของไฟล์รูปแบบนี้คือ .png 79
Slide 80: สรุปการเลือกใช้ฟอร์แมตภาพ – ไฟล์สกุล GIF (Graphics Interlace File) • ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก • มีลักษณะพืนโปร่งใส ้ – ไฟล์สกุล JPG (Joint Photographer’s Experts Group) • ภาพที่ต้องการความคมชัดสูง มีสีมาก – ไฟล์สกุล PNG (Portable Network Graphics) • ภาพที่ต้องการความคมชัดสูง มีสีมากทำาพื้นโปร่งใส ได้ 80
Slide 81: GIF / JPEG 81
Slide 82: GIF or JPEG? 82
Slide 83: แหล่งเอกสารเพิ่มเติม • http://www.boonlert.net • http://elearning.nectec.or.th • http://www.nectec.or.th/courseware 83