Instructional Design for e-Learning

Instructional Design for e-Learning บุญเลิศ อรุณพิบูลย์ NECTEC [email_address] http://elearning.nectec.or.th

การเรียนรู้รูปแบบใหม่

สังคมดิจิทัล

สังคมแห่งการเรียนรู้

การเรียนรู้ตลอดชีวิต

การเรียนรู้ที่ผู้เรียนเป็นศูนย์กลาง

การเรียนรู้ในห้องเรียนปกติ การเรียนรู้แบบส่วนบุคคล

การเรียนรู้ส่วนบุคคล (Individual Learning)

เทคโนโลยีคอมพิวเตอร์

เทคโนโลยีการสื่อสาร

เทคโนโลยีเครือข่าย

เทคโนโลยีอินเทอร์เน็ต

Online Learning

Online Learning Online Learning is the marriage of education and technology.

Online Learning

รูปแบบของ Online Learning

WBI, WBL, WBT

e-Learning

ศึกษาเว็บไซต์

www . nectec . or . th / courseware

elearning . nectec . or . th / princess - it

www . thaiwbi . com

http :// www . chulaonline . com /

หาความเหมือน ความแตกต่าง ของแต่ละเว็บไซต์

กรณีศึกษา

ระบบสมาชิก

รูปแบบเนื้อหา

ช่องทางการสื่อสาร

ระบบการเรียน

Web - Based Training ( WBT )

Web-Based Learning (WBL)

Web-Based Instruction (WBI)

The training delivered using TCP / IP and HTTP protocols, the protocols that define the World Wide Web .

delivered in real time (synchronous), or it may be delayed (asynchronous).

WBI/WBT/WBL ครูผู้สอน สร้างหลักสูตร / เนื้อหา FTP นักเรียน ผู้เรียน ช่องทางการติดต่อสื่อสาร รูปแบบต่างๆ Web & Content Server

e-Learning

Electronics Learning

ความหมายของ e-Learning อิงเทคโนโลยีอินเทอร์เน็ต

ความนิยมของ e-Learning เกิดขึ้นมาพร้อมกับความสามารถของอินเทอร์เน็ต

การเข้าถึงด้วยความเร็วสูง จะเป็นกุญแจสำคัญที่จะก่อให้เกิด การเติบโตในการใช้ e-Learning

นิยาม e-Learning อิง ICT

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

เพิ่มเติมระบบจัดการ / บริหารหลักสูตรและการเรียนรู้ (Course/Learning Management System: CMS/LMS) เข้ามาเพื่อให้สามารถบริหารเนื้อหาและติดตามการเรียนรู้ของผู้เรียน

นำเสนอได้ทั้งระบบ Online และ Offline

นำเสนอได้ทั้งระบบ Synchronous และ Asynchronous

e-Learning

e-Learning System Framework Learning Management System Learning Content Management System Learning Tools

LMS – Learning Management System

ระบบการจัดการเรียนการสอนนับเป็นหัวใจสำคัญของการเรียน e- L earning

สามารถสร้างสภาพแวดล้อมเปรียบเสมือนกับการเรียนในห้องเรียนปกติ

ตรวจสอบการเข้าเรียน , ชื่อผู้ที่เข้าเรียน , ความก้าวหน้าในการเรียน , บทที่เรียน , เวลาที่เรียน , ชื่อผู้ที่ลงทะเบียนเรียน , การสมัครเรียน , การแลกเปลี่ยนความคิดเห็น , การถามตอบ , ระบบประเมินผล , ห้องสมุดอิเล็กทรอนิกส์สำหรับค้นคว้า , เอกสารอ้างอิง และระบบติว ระบบพี่เลี้ยง

LMS – Learning Management System

ลดทรัพยากรในการพัฒนา ( Development ) และบริหาร ( Management ) เว็บไซต์ ไม่ว่าจะเป็นเรื่องของกำลังคน ระยะเวลา และเงินทอง ที่ใช้ในการสร้างและควบคุมดูแลไซต์

มักจะนำเอา ภาษาสคริปต์ ( Script languages ) ต่างๆ มาใช้ เพื่อให้วิธีการทำงานเป็นแบบอัตโนมัติ ไม่ว่าจะเป็น PHP, Perl, ASP ซึ่งมักต้องใช้ควบคู่กันกับโปรแกรมเว็บเซิร์ฟเวอร์ ( เช่น Apache ) และดาต้าเบสเซิร์ฟเวอร์ ( เช่น MySQL )

Progress Report

Student Management Class Status  Study  Pass  Drop

Student History

Learning Content Management System

ระบบบริหารจัดการเรียนการสอน และเนื้อหาวิชา

ลดทรัพยากรในการพัฒนา ( Development ) และบริหาร ( Management ) เว็บไซต์ ไม่ว่าจะเป็นเรื่องของกำลังคน ระยะเวลา และเงินทอง ที่ใช้ในการสร้างและควบคุมดูแลไซต์

มักจะนำเอา ภาษาสคริปต์ ( Script languages ) ต่างๆ มาใช้ เพื่อให้วิธีการทำงานเป็นแบบอัตโนมัติ ไม่ว่าจะเป็น PHP, Perl, ASP ซึ่งมักต้องใช้ควบคู่กันกับโปรแกรมเว็บเซิร์ฟเวอร์ ( เช่น Apache ) และดาต้าเบสเซิร์ฟเวอร์ ( เช่น MySQL )

ใช้ในการบริหารจัดการส่วนการทำงานต่างๆ ในเว็บไซต์

บริหารจัดการเนื้อหาได้อย่างรวดเร็ว

เน้นการจัดการระบบผ่านเว็บ ( Web interface )

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

ส่วนติดต่อกับผู้ใช้งาน User Interface

ระบบจัดการบริหารข้อมูล

ระบบปรับปรุงแก้ไขข้อมูล

http://www.school.net.th/library/create-web/

กรณีศึกษา

ศึกษาฟังก์ชัน LCMS ของ LearnSquare

HTML Editor

HTML Editor (Cont.)

Content Construction

Sample Content Page

Adobe Acrobat Style

Text Document Style

Flash Animation Style

Test Page

File Management

Import / Export Content

LMS/LCMS Yes No Creates test questions Yes Yes Tracks results Yes Yes Manages system Learning content Learner performance Provides primary management of Content developers; learners who need personalized content All learners; organization Who benefits? LCMS LMS

Learning Tools

เครื่องมือในการติดต่อสื่อสาร

มีระบบระบุตัวบุคคล

มีระบบรักษาความปลอดภัย

Web board

Chat room

Private Messages

ประเภทและการใช้งานการสื่อสาร ใช้โปรแกรมร่วมกันด้วยซอฟต์แวร์ช่วย เช่น NetMeeting หรือการถ่ายโอนไฟล์ การใช้ข้อมูลร่วมกันทั้งโปรแกรม และไฟล์ข้อมูล Share Data ใช้สนทนา ระหว่างผู้เรียนและอาจารย์ในห้องเรียนหรือชั่วโมงเรียนนั้นๆ เสมือนว่ากำลังคุยกันอยู่ในห้องเรียนจริงๆ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) โดยการสนทนาแบบ Real Time มีทั้ง Text Chat และ Voice Chat Chat ใช้กำหนดประเด็นหรือกระทู้ ตามที่อาจารย์กำหนด หรือตามแต่นักเรียนจะกำหนด เพื่อช่วยกันอภิปรายตอบประเด็นหรือกระทู้นั้น ทั้งอาจารย์และผู้เรียน ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) Webboard ใช้ติดต่อสื่อสารระหว่างอาจารย์ หรือเพื่อนร่วมชั้นเรียนด้วยกัน ใช้ส่งการบ้านหรืองานที่ได้รับมอบหมาย ใช้ติดต่อสื่อสารระหว่างผู้ที่เป็นสมาชิกเท่านั้น ( Two Way ) E-mail ลักษณะการใช้งาน ความหมาย ประเภท

ประเภทและการใช้งานการสื่อสาร ใช้บรรยายให้ผู้เรียนกับที่อยู่หน้าเครื่อง เสมือนว่ากำลังนั่งเรียนอยู่ในห้องเรียนจริงๆ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ และผู้เรียน ( Three Way ) แบบ Real Time โดยที่ผู้เรียนและอาจารย์ สามารถเห็นหน้ากันได้ โดยผ่านทางกล้องโทรทัศน์ที่ติดอยู่กับเครื่องคอมพิวเตอร์ทั้งสองฝ่าย Conference บันทึกข้อมูลการเรียนและรายละเอียดที่จำเป็นต่างๆ ใช้บันทึกข้อมูลการเรียน Memo/Note ใช้ส่งงานตามที่อาจารย์กำหนด เช่น ให้เขียนรายงาน โดยที่อาจารย์สามารถเปิดดู Electronic Home Work ของนักเรียนและเขียนบันทึกเพื่อตรวจงานและให้คะแนนได้ แต่นักเรียนด้วยกันจะเปิดดูไม่ได้ ใช้ติดต่อสื่อสารระหว่าง ผู้เรียน อาจารย์ เป็นเสมือนสมุดประจำตัวนักเรียน โดยที่นักเรียนไม่ต้องถือสมุดการบ้านจริงๆ เป็นสมุดการบ้านที่ติดตัวตลอดเวลา Electronic Home Work ลักษณะการใช้งาน ความหมาย ประเภท

Open Source e-Learning System

ซอฟต์แวร์โอเพนซอร์สคืออะไร

ซอฟต์แวร์เป็นสมบัติร่วมของมนุษยชาติ

ควรมีเสรีภาพในการ

ทำซ้ำ ( copy )

ศึกษา ( study )

แก้ไขปรับปรุง ( modify )

แจกจ่ายต่อ ( distribute )

เน้นการตรวจสอบ , แก้ไข , ร่วมพัฒนา

ใช้อินเทอร์เน็ต เป็นเครื่องมือ

Open Source e-Learning System

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

พัฒนาโดย

PHP

MySQL

ติดต่อได้ที่งาน RDI3 – NECTEC

www.learnsquare.com

Required

Apache

MySQL

PHP

AppServe

Windows 2000

Windows XP Professional + Service Pack 1

Linux

IE 6.0

ติดตั้ง LearnSquare

Install AppServe

สร้างโฟลเดอร์ไว้ใน appserv/www

คลายไฟล์ LearnSquare ไปไว้ในโฟลเดอร์ ที่สร้างไว้ก่อนหน้า

เปิด IE

http://localhost/ ชื่อโฟลเดอร์ /install.php

Install AppServ #1 Double Click

Install AppServ #2 เลือกไดร์ฟ / โฟลเดอร์ ถือว่าเป็น Root Directory

Install AppServ #3 Server Name : กรณีที่เป็นเครื่องทดสอบ ใช้ localhost แต่เครื่อง Server จริง ให้ระบุ IP Address ของ Server Administrator’s Email Address ระบุอีเมล์ของผู้ดูแลระบบ

Install AppServ #4 ระบุ User Name, Password ขอบผู้ดูแลระบบ Server และ ฐานข้อมูล MySQL การเข้ารหัสอักขระ กรณีภาษาไทยให้เลือกเป็น TIS620

Character set คืออะไร

คอมพิวเตอร์เก็บข้อมูลโดยรหัสดิจิตอล 0 กับ 1

รหัส 1 ตัว เรียกว่าเป็น 1 bit, รหัส 8 bit เรียกว่าเป็น 1 byte

พยัญชนะภาษาอังกฤษ มี 26 ตัว คิดแยกเป็นตัวใหญ่ตัวเล็ก รวมตัวเลขและอักษรพิเศษต่างๆ แล้ว ก็ยังมีจำนวนไม่มาก ( ไม่มากคือประมาณ 100 ตัว )

ผู้ที่คิดค้นคอมพิวเตอร์ในยุคแรกๆ นั้นเป็นผู้ที่ใช้ภาษาอังกฤษ ดังน้นจึงคิดค้น ระบบการเก็บข้อมูลโดยใช้รหัสยาว 7 บิต ( ASCII ) สามารถเก็บอักขระต่างๆ ได้ แตกต่างกันทั้งหมด 2^7 ตัว = 128 ตัว นับว่าเพียงพอสำหรับการใช้งานทั่วไป เช่น ตัวอักษร A จะตรงกับรหัส ASCII 65 เขียนเป็นเลขฐาน 2 เรียงกัน 7 ตัวได้ดังนี้ 100 0001

ต่อมาคอมพิวเตอร์ได้แพร่หลายไปยังประเทศที่ไม่ได้ใช้แค่ภาษาอังกฤษ ได้มีวิธีการแก้ไขแบบเฉพาะหน้า โดยการเพิ่มความยาวของรหัสที่เก็บจาก 7 ตัว ให้เป็น 8 ตัว ก็จะสามารถเก็บอักษรได้ทั้งหมดเป็น 2^8 = 256 ตัว

ประเทศต่างๆ ก็สามารถใช้ส่วนที่เกินมาอีก 128 ตัวนั้น ใช้เก็บรหัสอักขระเพิ่มเติม ที่เป็นเฉพาะของภาษาตนเอง เช่น กลุ่มประเทศยุโรปแถบตะวันตก ก็จะใช้เก็บอักขระเช่น พวก ที่มีลักษณะคล้าย a, e, i แต่มันจุดหรือมีขีดอยู่บนตัวอักษรเหล่านั้น ( ซึ่งใช้กันในภาษาของพวกเขา ) ตัวอย่างเช่น รหัส 228 จะเป็นตัว a umlaut คือ a แล้วมีจุดอยู่ข้างบน 2 จุด ใช้กันในภาษาเยอรมันเป็นต้น

ประเทศไทยก็ได้ใช้ประโยชน์ของรหัส 128 ตัวที่เกินมานี้เช่นกัน เช่น เราเก็บรหัส ก ไก่ ไว้ที่หมายเลข 161, เราเก็บไม้มลาย " ไ " ไว้ที่รหัสหมายเลข 228 เป็นต้น

ดังที่กล่าวมาแล้วนั้น เราจำเป็นต้องมีตารางที่จะแสดงว่า หมายเลขอะไร หมายถึงตัวอักษรอะไร ตารางนี้ ก็จะแตกต่างกันไปในแต่ละภาษา ซึ่งมีอักขระซึ่งต่างๆ กัน

ดูๆ ไปแล้ว ก็ยังไม่เห็นว่าจะมีปัญหาอะไร ตราบใดที่ในเครื่องคอมพิวเตอร์ของท่าน มีใช้งาน แค่ 2 ภาษา เช่น ภาษาไทย กับ ภาษาอังกฤษ ถ้าท่านได้รับรหัสมามีค่า 228 ก็สรุปได้เลยว่าผู้ส่งต้องการจะส่งไม้มลาย มา

แต่หากท่านต้องการจะส่งข้อมูล ไปยังเครื่องคอมพิวเตอร์เครื่องอื่น หรือเปิด Web Site ให้ผู้คนจากทั่วโลกเข้ามาดู ที่ไม่ได้ใช้ภาษาไทย อยู่ด้วย ผู้คนเหล่านั้น จะเข้าใจได้อย่างไรว่า ท่านต้องการส่ง ไม้มลาย ซึ่งเป็นอักขระหนึ่งของภาษาไทย ?

ถ้าคนเยอรมันได้รับรหัสนั้น ย่อมต้องแปลความหมายของรหัส 228 ที่ท่าน ส่งไปว่าเป็นอักขระ a umlaut ที่พวกเขาใช้กัน ? เขาควรจะรู้ได้อย่างไรว่า เขาควรจะหยิบตารางที่ใช้แปลงค่ารหัสเป็นภาษาไทย แทนที่จะใช้ตารางของภาษาเยอรมัน ?

วิธีแก้ปัญหานั้นก็ง่ายดาย เพียงแต่ระบุแปะหน้าไปว่าข้อมูลของท่านนั้น ขอให้ใช้ตารางสำหรับภาษาไทยในการถอดรหัส

สิ่งที่ระบุแปะหน้าไปนั้น ก็เป็นที่เรียกกันว่า character set

ประโยชน์

Browser ที่เป็นที่นิยมใช้ในปัจจุบัน สามารถจะรับรู้ character - set ที่ท่านตั้งไว้ และเลือกแสดงเป็นภาษาไทยได้อย่างถูกต้องโดยที่ไม่ต้องติดตั้งค่าอะไรเพิ่มเติม

Search engine ที่มาค้นข้อมูลในเพจของท่าน สามารถจะแยกแยะได้ทันทีว่านี่คือภาษาไทย ไม้มลายในเพจของท่านจะมีความหมายไม้มลาย Search engine จะไม่คิดว่ามันเป็น a umlaut อย่างแน่นอน

ปัจจุบัน ในทุกระบบปฏิบัติการมีการใช้ฟอนต์แบบ Unicode ( 2 byte ) กันอย่างแพร่หลาย ฟอนต์แบบ Unicode สามารถเก็บรหัสอักขระได้ถึง 2^16 = 65,536 ตัว เก็บได้เกือบทุกภาษาในโลก การใช้ฟอนต์ Unicode ในการแสดงผลนั้น จำเป็นอย่างยิ่งที่ จะต้องทราบว่า เอกสารนี้เป็นภาษาใด เพื่อจะ Browser จะได้เลือกส่วนภาษานั้นๆ จาก ฟอนต์ Unicode ( ซึ่งมีหลายภาษามาก ) ออกมาแสดงผล

TIS-620/Windows-874

ประเทศไทยมีมาตรฐานอักขระซึ่งกำหนดโดย สำนักงานมาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปว่ารหัส สมอ . แต่รหัส สมอ . หรือที่มีชื่อทางการว่า มอก . 620 หรือ TIS-620 นี้ เป็นมาตรฐานของประเทศไทย ซึ่งเมื่อนำไปใช้บนเครือข่ายอินเทอร์เน็ต ก็อาจเกิดความเข้าใจไม่ตรงกันได้ ดังนั้นจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ . ที่ Internet Assigned Numbers Authority ( IANA ) ซึ่งเป็นผู้ควบคุมมาตรฐานของเครือข่ายอินเทอร์เน็ต และได้ดำเนินการจดทะเบียนจนสำเร็จ เมื่อวันที่ 22 กันยายน 2541

TIS-620/Windows-874

windows-874 เป็น character set ที่ใช้ภายในระบบปฏิบัติการที่ผลิตโดยบริษัท ไมโครซอฟต์ เท่านั้น ไม่ได้เป็น character set ที่ใช้ในการแลกเปลี่ยนข้อมูลระหว่างเครื่อง

มีส่วนขยายเพื่อการแสดงผล เช่น bullet, smart quote, dash ฯลฯ

tis-620 เป็น character set ที่จดทะเบียนถูกต้อง เป็นที่รับรู้กันทั่วโลก ทุกระบบปฏิบัติการ ( แม้แต่ระบบปฏิบัติการของไมโครซอฟต์เอง )

Install AppServ #5

Start/Reset/Stop AppServ

AppServ Testing

Start IE

Typing 127.0.0.1 then press Enter key

Ready to go

ติดตั้ง LearnSquare ห้ามเปลี่ยนแปลงแก้ไข Database Name รายการสำคัญ แต่ละเว็บ ห้ามใช้ชื่อเดียวกัน

รายการสำคัญ ที่ต้องกำหนด

e - Learning ที่ดี ?

ต้องได้รับการออกแบบ และพัฒนา

มีมาตรฐานอ้างอิง

เพื่อ Learning Process ของผู้เกี่ยวข้อง ( ผู้สอน ผู้เรียน ติวเตอร์ ...)

โดยใช้เทคโนโลยีช่วยจัดการ การนำเสนอ การเข้าถึงข้อมูล การมีปฏิสัมพันธ์ การมีส่วนร่วม และการเรียนรู้

ข้อคำนึงในการพัฒนาระบบ e-Learning

การระบุตัวบุคคล และอำนาจหน้าที่ ( Authentication & Authorization )

การรักษาความลับของข้อมูล ( Confidentiality )

การรักษาความถูกต้องของข้อมูล ( Integrity )

การป้องกันการปฏิเสธ หรืออ้างความรับผิดชอบ ( Non - repudiation )

สิทธิส่วนบุคคล ( Privacy )

การออกแบบกระบวนการเรียนรู้และสื่อการเรียนการสอน (Instructional Design)

การระบุตัวบุคคล

กระบวนการกำหนดลักษณะส่วนบุคคลของผู้ใช้ทั่วไป

แจ้งชื่อผู้ใช้ และรหัสผ่าน

เมื่อผู้ใช้ต้องการเข้าระบบ ให้ระบุชื่อผู้ใช้ และรหัสผ่าน

ถ้าข้อมูลตรงกับแฟ้มของ Server ก็จะได้รับอนุญาตเข้าถึง

เปรียบเหมือนการแสดงตัวด้วยประจำตัวซึ่งมีรูปติดอยู่ด้วย หรือการล๊อค ซึ่งผู้ที่จะเปิดได้จะต้องมีกุญแจเท่านั้น หรือบัตรเข้าออกอาคาร , เจ้าหน้าที่รักษาความปลอดภัย

อำนาจหน้าที่ คือ แต่ละบุคคลมีสิทธิใด อย่างไร

การรักษาความลับของข้อมูล

การเข้ารหัส , การใช้บาร์โค๊ด , การใส่รหัสลับ ( password ) , Firewall

การรักษาความลับของข้อมูลที่เก็บไว้ หรือส่งผ่านทางเครือข่าย

ป้องกันไม่ให้ผู้อื่นที่ไม่มีสิทธิ์ลักลอบดูได้

เปรียบเหมือนการปิดผนึกซองจดหมาย หรือการใช้ซองจดหมายที่ทึบแสง หรือการเขียนหมึกที่มองไม่เห็น

มักจะใช้เทคโนโลยีการเข้ารหัสข้อมูล

การเข้ารหัส ( Encryption )

ประกอบด้วยฝ่ายผู้รับ และฝ่ายผู้ส่ง

ตกลงกฎเกณฑ์เดียวกัน ในการเปลี่ยนข้อความต้นฉบับให้เป็นข้อความอ่านไม่รู้เรื่อง ( cipher text )

ใช้สมการ หรือสูตรทางคณิตศาสตร์ที่ซับซ้อน

กฎการเพิ่มค่า 13

แฮชฟังก์ชัน ( Hash function )

ตัวอย่างโปรแกรมการเข้ารหัส โดยใช้กฎ 13 1

การเข้ารหัสจะทำโดยการเปลี่ยนตัวอักษร จากตำแหน่งเดิมเป็นตัวอักษรตำแหน่งที่ 13 ของชุดตัวอักษรนั้น เช่น

… . … . เช่น เข้ารหัส I LOVE YOU ----> V YBIR LBH HARRY POTTER ---> UNEEL CBGGRE

Encode 2nd

Pen = Qfo

Pen = Rgp

การรักษาความถูกต้องของข้อมูล

การป้องกันไม่ให้ข้อมูลถูกแก้ไข

เปรียบเหมือนกับการเขียนด้วยหมึกซึ่งถ้าถูกลบแล้วจะก่อให้เกิดรอยลบ หรือ การใช้โฮโลแกรมกำกับบนบัตรเครดิต หรือ ลายน้ำบนธนบัตร

เป็นการป้องกันการละเมิดลิขสิทธิ์

การป้องกันการปฏิเสธ หรืออ้างความรับผิดชอบ

การป้องกันการปฏิเสธว่าไม่ได้มีการส่ง หรือรับข้อมูลจากฝ่ายต่าง ๆ ที่เกี่ยวข้อง

การป้องกันการอ้างที่เป็นเท็จว่าได้รับ หรือส่งข้อมูล

สิทธิส่วนบุคคล

การรักษาสิทธิส่วนตัวของข้อมูลส่วนตัว เพื่อปกป้องข้อมูลจากการลอบดูโดยผู้ที่ไม่มีสิทธิ์ในการใช้ข้อมูล

ข้อมูลที่ส่งมาถูกดัดแปลงโดยผู้อื่นก่อนถึงเราหรือไม่

มาตรฐานเกี่ยวกับ e-Learning

Airline Industry CBT Committee (AICC)

Focus on standards for airline training e.g. tests, lessons, modules ect. (www.aicc.org)

EDUCAUSE Institutional Management System Project (IMS)

Vendor group working to build standards for e-learning based on work of AICC (www.imsglobal.org)

Advanced Distributed Learning (ADL)

US Federal government initiative (www.adl.org)

Development of SCORM

Allince of Remote Institutiopnal Authoring and Distribution Network for Europe (ARIADNE)

An industry association focusing on e-learning standards issues (ariadne.unil.ch)

มาตรฐานเกี่ยวกับ e-Learning

IEEE Learning Technology Standards Committee (IEEE LTSC)

Accredits the standards for the US that emerge from the other groups (ltsc.ieee.org)

ISO/IEC JTC1 SC36 (ITLET)

IT for Learning, Education and Training

Advanced Learning Infrastructure Consortium (ALIC)

Japanese Consortium for promotion of e-leaning technology and infrastructure (www.alic.gr.jp)

e-Learning Consortium Japan (eLC)

Vendor/User company working to promote e-learning business and technology (www.elc.or.jp)

The SCORM

A “Reference Model” that:

Integrates industry specifications from many other organizations

AICC, IMS, IEEE, ARIADNE, etc.

Provides a unified learning content model

Defines a standardized web “run-time” environment

Takes the first step on the path to defining a true learning architecture

API Adapter SCORM API Delivery Service Tracking Service Sequencing Service Content Management Service Learner Profiles Service Testing/ Assessment Service Course Administration Service Local Content Repository Remote Content Repositories SCORM Content Packages Browser (Presentation) Generalized Learning Management System Model Selection Launch SCORM Tracking Data SCORM Content (SCOs & Assets)

e-Learning Team

Project managers

Subject matter experts

Instructional designers

Graphic artists

Videographers

Animators

Writers

Sound Editor

Programmers

Administrator/Web Master

Teacher/Instructor

Mentor/TA

Student / Learner

Quality controllers

Instructional Design & e-Learning

e-Learning is the marriage of technology and education.

The Instructional designer's greatest role is that of "bridging" concepts between the two worlds.

This vital role ensures that a subject matter expert's (SME) concepts are properly developed by graphic designers and programmers.

Instructional design

การออกแบบการสอน

รูปแบบการสอนที่มีลำดับขั้นตอนและหลักการ

การวางแผนการสอนอย่างมีระบบระเบียบแบบแผน

การจัดทำแผนการสอน

การพัฒนาเนื้อหาการสอน การประเมินผล

การวิเคราะห์เป้าหมาย การพัฒนาเพื่อตอบสนองความต้องการด้านการเรียน การพัฒนาเนื้อหา การทบทวนและปรับปรุง และการประเมินผล

ISD = I nstructional S ystem D evelopment Forecasting Planning Executing Gathering Reporting Follow-up Analysis Development Implementation Evaluation Design

ADDIE model

Analysis

target group, content, job

Design

objectives, strategies, tactics, assessment, motivation

Development

materials, tools, tests

Implementation

pilot test, tutor training, marketing

Evaluation

formative, summative

ขั้นการวิเคราะห์

ศึกษา / สำรวจกลุ่มเป้าหมาย

ศึกษา / สำรวจเนื้อหา

ศึกษา / สำรวจความพร้อมด้านเทคโนโลยี

ศึกษา / สำรวจเครื่องมือ

ศึกษาจากแหล่งข้อมูล

สอบถาม

สัมภาษณ์

กลุ่มเป้าหมาย

ประเภท

ความรู้เดิม / ความรู้พื้นฐาน

รูปแบบวิธีการเรียนรู้

เพศ / อายุ

ข้อจำกัดการเรียนรู้

เนื้อหา

แหล่งข้อมูล

ลักษณะการได้มา

ความถูกต้องของเนื้อหา

ลิขสิทธิ์

รูปแบบการนำเสนอ

เทคโนโลยี

ผู้พัฒนา

ระบบคอมพิวเตอร์

ระบบเครือข่าย

ระบบการผลิต

ผู้เรียน

ระบบคอมพิวเตอร์

ระบบเครือข่าย

ระบบการนำเสนอ

Web Server/Mail Server/ Database Server

Windows Based

HTML

XML

MS Access, MS SQL

ASP, VB.Net

Multimedia

Linux Based

HTML

XML

MySQL

PHP

Multimedia

Tools

OpenSource

Moodle

PHPNuke

PostNuke

Atutor

Commercial

Blackboard

IBM Sphere

Authorware

Macromedia Suits

กลุ่มเป้าหมาย

เรื่องยาก ที่จะพัฒนาเว็บที่รองรับกลุ่มเป้าหมายได้ทุกระดับ

การวิจัย / สำรวจ เป็นเรื่องจำเป็น

http://truehits.net/

http://www.cc.gatech.edu/gvu/user_surveys/

http://www.survey.net/inet1r.html

การออกแบบ

กำหนดวัตถุประสงค์เฉพาะ

อะไรคือสิ่งที่ผู้เรียนต้องการ

อะไรคือสิ่งที่ต้องการถ่ายทอด

ออกแบบโครงร่าง

ออกแบบเว็บ

Artistic Technology Social Activities

วัตถุประสงค์การเรียนรู้

ด้านพุทธิพิสัย (Cognitive) – ความรู้

ความรู้ ความเข้าใจ การนำไปใช้ การวิเคราะห์ การสังเคราะห์ การประเมิน

ด้านจิตพิสัย (Affective) – อารมย์ ความรู้สึก

การยอมรับ , ปฏิกิริยาตอบสนอง , การสร้างค่านิยม , การรวบรวม , การปรับตัว

ด้านทักษะพิสัย (Psychomotor) – การเคลื่อนไหวทางร่างกาย

วัตถุประสงค์การเรียนรู้

ด้านพุทธิพิสัย (Cognitive) – ความรู้

ผู้เรียนสามารถอธิบายองค์ประกอบของคอมพิวเตอร์ได้

ด้านจิตพิสัย (Affective) – อารมย์ ความรู้สึก

ผู้เรียนเห็นประโยชน์ของการใช้คอมพิวเตอร์ในการทำงาน

ด้านทักษะพิสัย (Psychomotor) – การเคลื่อนไหวทางร่างกาย

ผู้เรียนสามารถออกแบบนามบัตรได้ภายใน 1 ชั่วโมง

วัตถุประสงค์ กิจกรรมการเรียนรู้ รวบยอดความคิด สร้างความรู้ ตอบโต้ เว็บไซต์นำเสนอความรู้ เว็บไซต์กิจกรรม / ทดสอบ / ประเมิน เว็บไซต์ Interactive & Communication

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

ผู้เรียนมีโอกาสโต้ตอบกับบทเรียนได้ทันที

ตอบคำถามได้โดยไม่ผิด หรือมีโอกาสแก้ตัว

ผิดเป็นครู

แสดงผลการทดสอบทันที

บทเรียนย่อย

ผู้เรียนเป็น “พระเอก”

บทเรียนสำเร็จรูป อ่านวัตถุประสงค์ ทำกิจกรรม บททบทวน ข้อสอบ เนื้อหาใหม่ เนื้อหาเก่า ขั้นนำ ขั้นสอน ขั้นสอบ

กิจกรรม

ขั้นนำ

เร้าผู้เรียน รู้หรือไม่รู้

ขั้นสอน

เสนอความรู้ใหม่

ขั้นสอบ

เป็นการสอบท้ายเนื้อหากิจกรรม วัดว่าผู้เรียนบรรลุวัตถุประสงค์หรือไม่

ขั้นนำ

สินค้าออกสำคัญของไทย ได้แก่ ข้าว ยาง ปลา ไม้สัก เพชรพลอย ศิลปกรรม

สินค้าออกสำคัญของไทย 2 ชนิด ได้แก่

ขั้นลอกเลียน

ขั้นนำ

รูปแบบการเขียนเศษส่วน 1/3

เลข 1 เป็นเลขที่อยู่บนเส้น เรียกว่า เศษ

เลข 3 เป็นเลขที่อยู่ใต้เส้น เรียกว่า ส่วน

ถ้าเขียนเศษส่วนเป็น 5/7

เลข เป็น เรียกว่า

เลข เป็น เรียกว่า

โครงร่าง เนื้อหาซับซ้อน โครงสร้างเว็บซับซ้อน

Design

ประชุมทีม

ผู้บริหาร / คณะผู้บริหาร

ผู้เชี่ยวชาญด้านเนื้อหา

ผู้เชี่ยวชาญด้านเทคนิค

นักออกแบบกราฟิก

นักเรียน นิสิต นักศึกษา

พัฒนาแนวคิด

ท่องเว็บอื่นๆ

แหล่งข้อมูลใหม่ๆ

กำหนดรูปแบบหลัก

Design

ร่างโครงสร้าง (Storyboard)

วางแผนการนำทาง (Navigator)

พัฒนาต้นแบบ

อ่านง่าย

ข้อมูลกะทัดรัด

บ่งชี้เป้าหมายอย่างชัดเจน

ออกแบบกราฟิก / สื่อต่างๆ

ชื่อไฟล์เอกสารเว็บ

กำหนดชื่อไฟล์ของเอกสารเว็บ

ชื่อไฟล์และนามสกุลของไฟล์เอกสารเว็บ จะถูกควบคุมจาก Web Administor

นามสกุลของไฟล์เอกสาร HTML มี 2 แบบคือ .htm, .html

ชื่อและนามสกุลที่ใช้ เป็นภาษาอังกฤษตัวพิมพ์เล็ก ไม่มีช่องว่าง ( มีโปรแกรมช่วยแปลงชื่อไฟล์จาก www.nectec.or.th/courseware)

ไม่ควรใช้สัญลักษณ์พิเศษใดๆ ยกเว้นเครื่องหมาย “ขีด -”

ลักษณะของหน้าเว็บที่เหมาะสม

หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง

กลุ่มเป้าหมาย (Personal/Business)

ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ )

Screen Area ที่เหมาะสมในปัจจุบัน คือ 800 x 600 pixels

Web Area ที่เหมาะสมคือ

ความยาวไม่เกิน 780 pixel

ความสูงไม่มีข้อกำหนดตายตัว แต่ส่วน Header ของเว็บไม่ควรเกินครึ่งหนึ่งของพื้นที่ที่เหลือ

ลักษณะของหน้าเว็บที่เหมาะสม Web Area 780 pixel Screen Area 600 pixel web Area

Template & Layout Design TITLE Menu History Duty Project

Template & Layout Design TITLE History Duty Project

Develop

Setup Server

Setup LCMS

Content

Text

Graphics

Multimedia

Digital Media

Text

Document

Web Document

PDF

Image

Metadata

Watermark

E-Book

Text format

Multimedia format

Sound

Video

Flash

File name

ภาษาอังกฤษ ผสมตัวเลข

ใช้เครื่องหมายเฉพาะ –

ไม่ควรมีช่องว่าง

ไม่ควรยาวมากเกินไป

กำหนดรหัสควบคุมแต่ละงานให้เหมาะสม

Text

Document

Web

PDF

Acrobat 5 : PDF 1.4 format.

ป้องกันลิขสิทธิ์ด้วย PDF Security System

เลือกใช้ฟอนต์มาตรฐาน

ตระกูล New

Tahoma

MS Sans Serif, Microsoft Sans Serif, Thonburi

กำหนด Metadata

เชื่อมโยงกับเอกสารอื่น ได้ง่าย

Metadata

Data about data

ข้อมูลแสดงคุณสมบัติของไฟล์ หรือวัตถุต่างๆ

แสดงข้อมูลสรุปเกี่ยวกับรายละเอียดของไฟล์

แสดงลิขสิทธิ์ความเป็นเจ้าของ

แยกกลุ่มได้ตามประเภทของไฟล์หรือวัตถุ

Subject Metadata

Title Metadata

Category Metadata

Keyword Metadata

Author Metadata

Description Metadata

Publisher Metadata

Resource Metadata

การกำหนดคุณสมบัติของเอกสาร

MS – Office

File, Properties..

ประโยชน์ของ Metadata

เพิ่มประสิทธิภาพการสืบค้นเอกสาร

เป็นข้อมูลให้กับ Search Engine ต่างๆ

การเผยแพร่ในระบบอินเทอร์เน็ต เป็นไปอย่างรวดเร็ว

ตัวอย่างการตรวจสอบ Metadata

ติดตั้งโปรแกรม Catalogue

ดาวน์โหลดได้จาก www.download.com

เรียกใช้งานโปรแกรม Catalogue

เลือกโฟลเดอร์ไฟล์เอกสาร เช่น MS Word format, Web format โปรแกรมจะตรวจสอบ Metadata และแสดงผลโดยอัตโนมัติ

Styles of Word

เอกสารเว็บ

ไฟล์ข้อความ (Text File)

ควบคุมการแสดงผลด้วยคำสั่ง ภาษา HTML ที่เรียกว่า “แท็ก - Tag”

มีส่วนขยายเฉพาะ . html หรือ .htm

ทำงานได้ทุกระบบปฏิบัติการ

แสดงผลผ่านโปรแกรมเฉพาะ เรียกว่า “เว็บเบราเซอร์”

ทำความรู้จักกับเอกสารเว็บ Home Page

ภาษา HTML

HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง

มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย

อาศัยตัวกำกับ เรียกว่า แท็ก ( Tag ) ควบคุมการแสดงผลของ ข้อความ , รูปภาพหรือวัตถุอื่นๆ

เว็บเบราเซอร์ (Web Browser)

โปรแกรมแปลคำสั่ง HTML และแสดงผลบนจอภาพ

มีผู้พัฒนาหลายค่าย ได้แก่

Microsoft พัฒนา Internet Explorer

Netscape พัฒนา Netscape Navigator

เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น รู้จักภาษา HTML ไม่เท่ากัน

การพัฒนาเว็บเพจ

ใช้ภาษา HTML

ป้อนคำสั่งภาษา HTML ด้วย โปรแกรม Text Editor เช่น NotePad

ใส่คำสั่งได้ตามต้องการ

ไม่เหมาะสำหรับผู้พัฒนา ในระดับต้น

ใช้โปรแกรมช่วยในการลง รหัส HTML Editor

เช่นโปรแกรม Hot Dog Professional,Home SiteX

มีปุ่มคำสั่งควบคุมรหัสคำสั่ง HTM ใช้งานได้ง่ายและรวดเร็ว

จุดด้อยคือ โปรแกรมจะไม่รู้จัก คำสั่ง HTML ใหม่ๆ

ใช้โปรแกรมสร้างเอกสารเว็บ (Web Generator)

เช่นโปรแกรม Microsoft Office 2000, Macromedia Dreamweaver

ไม่ต้องศึกษาภาษา HTML

จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ

ใช้บริการ Content Management System (CMS)

ไม่ต้องผู้ภาษา HTML

ไม่ต้องยุ่งยากเรื่องครุภัณฑ์ / ค่าใช้จ่ายด้าน Server

ไม่ต้องมีความรู้ด้านเทคนิค

ไม่ต้องอาศัยทีมงานเฉพาะด้าน

แล้วจะเลือกเครื่องมือตัวใด ดีครับ ?

ระดับต้น ควรใช้ HTML Generator/CMS

ระดับกลาง ศึกษาภาษา HTML แล้วใช้ผสมผสานกันระหว่าง HTML Generator กับ HTML Editor

ระดับสูง ศึกษาภาษา HTML และภาษา Script ต่างๆ ใช้เครื่องมือทุกประเภทผสมผสานกัน เพื่อให้การพัฒนาเป็นไปอย่างมีประสิทธิภาพ และรวดเร็ว

เครื่องมือแต่ละตัว ควรสนับสนุน ภาษาไทยน่ะครับ

Server & Client WindowsXP IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload

ภาษาไทย กับการพัฒนาเว็บเพจ

ด้านพัฒนาเว็บ

HTML Editor, Generator แสดงผลภาษาไทย ?

HTML Editor, Generator เข้ารหัสภาษาไทย ?

ด้านเรียกดูเว็บ

ฟอนต์ ไม่ควรสร้างภาระให้กับผู้ใช้งาน

แสดงผลอักขระได้ถูกต้อง ทุก ( เกือบทุก ) platform

ภาษาไทย กับการพัฒนาเว็บเพจ

Meta Tags

Metadata สำหรับการนำเสนอบนเว็บ

บรรจุไว้ใน Head

รูปแบบทั่วไป

<META NAME=“dataname” CONTENT=“datavalue”>

ตัวอย่าง

<head> <meta name="description" content=“meta tags."> <meta name="keywords" content="meta data, metadata, meta tag, meta-tag, search-engine"> <meta name="author" content="Keith Brooke"> <meta name="reply-to" content="kbrooke"> <meta name="robots" content="all"> <title>Meta Tags-Metadata Elements</title>

</head>

www.truehits.net

Robots

Robots

<META NAME=“robots” CONTENT=“all”>

All- Robots can index the pages

None- Robots should ignore the page

Noindex-Prevents indexing of a page

Follow-Robots can follow links from this page

Nofollow-Robots cannot follow links from this page

Meta Analyst

http://www.theemiratesnetwork.com/computers/webmaster/analyzer.htm

http://www.submitexpress.com/analyzer/

Acrobat Writer

ติดตั้งโปรแกรม Acrobat Writer

เปิดโปรแกรม MS-Word

เปิดไฟล์เอกสารที่ต้องการแปลงเป็น PDF

เลือกเมนูคำสั่ง File, Print

เลือก Printer เป็น Acrobat PDF คลิกปุ่ม OK

ปรากฏจอภาพกำหนดชื่อไฟล์ .pdf และโฟลเดอร์

เอกสารเสมือน PDF Format

PDF - Portable Document Format

เอกสารเสมือนจริง

ทำงานแบบ Cross platform

ขนาดไฟล์เล็ก

การใช้เอกสาร PDF บนเว็บ

ควรทำลิงก์ให้ผู้ดูทราบว่าควรติดตั้ง Acrobat Reader ก่อน โดยอาจจะใช้รูปภาพตัวนี้เป็นสื่อ

สามารถสร้างลิงก์ โดยอาศัยรหัส ดังนี้

กำหนดค่า Config # 1

คลิกปุ่ม Properties จากหน้าต่าง Print

กำหนดค่า Config # 2 คลิก Edit.. ปรับค่าฟอนต์ ภาษาไทยที่ ใช้ในเอกสาร

Security Document เลือก Reconfirm Security for each job แล้วคลิกปุ่ม Edit เพื่อปรับแต่งค่าที่ต้องการ

Images

จัดหาภาพ หรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา

สร้างด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop

คัดเลือกจาก ClipArt for Web เช่น CD-ROM รวมภาพสำหรับเว็บ

ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดอร์ที่สร้างไว้ก่อนแล้ว

Copy to….

ปัญหาการอ้างอิง Path

ขั้นตอนการพัฒนาเว็บเพจ

จัดหาภาพจากเว็บไซต์

Image

ภาพต้นฉบับ

ภาพสำหรับสื่อสิ่งพิมพ์

ภาพสำหรับสื่อ Presentation ระบบมัลติมีเดีย ( Multimedia Presentation )

ภาพสำหรับเว็บไซต์ทั้งภาพแบบย่อ ( Preview ) และภาพจริง

ภาพสำหรับระบบฐานข้อมูล

มาตรฐานรูปแบบการนำเสนอภาพ เปลี่ยนตามข้อกำหนด โดยแยกเป็นโฟลเดอร์เฉพาะ ตามจริง File Name preview web database present archive dtp original Folder ActionScript ของโปรแกรม Adobe PhotoShop 7.0 Digital Camera, Scanner From  100  100 pixels  300  250 pixels  300  250 pixels Up to 1024  768 pixels Up to 1024  768 pixels Up to 1840  1232 pixels Up to 1840  1232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution GIF JPG PNG GIF JPG PNG TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Preview Website Database Presentation ภาพสำหรับ Digital Archive ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ

มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels Size 72 dpi 72 dpi Resolution PNG PNG / JPEG / GIF / TIF Format Preview Website

Format

รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ

การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมีขนาด ( File Size ) เล็กลง โดยคงความคมชัดไว้ในระดับดี

เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี

GIF

Graphics Interlace File

จำนวนสีและความละเอียดของภาพไม่สูงมากนัก

ต้องการพื้นแบบโปร่งใส

ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด

ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว

ส่วนขยายคือ .gif

Bit Depth 256 colors 16 colors 2 colors 1-bit 4 colors 2-bit 8 colors 3-bit 16 colors 4-bit 32 colors 5-bit 64 colors 6-bit 128 colors 7-bit 256 colors 8-bit 32.8 thousand colors 15-bit 65.5 thousand colors 16-bit 16.7 million colors 24-bit 16.7 million colors + 8 bit grayscale mask 32-bit

Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k

Transparent GIFs

Animation GIF

JPEG

Joint Photographer's Experts Group

เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์

สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม ( File Compression )

สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive

ส่วนขยายของไฟล์รูปแบบนี้คือ . jpg หรือ . jpeg

JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality

PNG

Portable Network Graphics

รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต

สามารถแสดงผลได้ในระบบสีเต็มพิกัด ( True Color ) , มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ ( Transparent ) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด ( Interlaced )

ส่วนขยายของไฟล์รูปแบบนี้คือ . png

TIFF

Tagged - Image File Format

รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ ( Layer ) , Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ

เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์

ส่วนขยายของไฟล์รูปแบบนี้คือ . tif

Pixel - Your eye perceives Continuity dpi = dot per inch

สรุปการเลือกใช้ฟอร์แมตภาพ

ไฟล์สกุล GIF (Graphics Interlace File)

ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก

มีลักษณะพื้นโปร่งใส

ไฟล์สกุล JPG (Joint Photographer’s Experts Group)

ภาพที่ต้องการความคมชัดสูง มีสีมาก

ไฟล์สกุล PNG (Portable Network Graphics)

ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

GIF / JPEG

GIF or JPEG?

เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

Example of an image at 72-ppi and 300-ppi

72 ppi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch

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

การทำงานกับกราฟิกไฟล์สำหรับเว็บ

สร้าง / ตกแต่งภาพด้วย Resolution 72 dpi (pixel/inch)

เลือกฟอร์แมตที่เหมาะสม

ภาพขาว / ดำ , ภาพสีน้อย , ไม่มีการไล่เฉดสี ---- > GIF

ภาพสีต้องการความคมชัด , มีการไล่เฉดสี ---- > JPG

สำหรับภาพ Gif ที่มีขนาดใหญ่ ควรกำหนดคุณสมบัติของภาพ เป็น Interlaced

การทำงานกับกราฟิกไฟล์สำหรับเว็บ สำหรับภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป และกำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต

Color Mode

A color mode determines the color model used to display and print images.

Common models include

RGB (red, green, blue)

CMYK (cyan, magenta, yellow, black)

…

RGB model

RGB model used for lighting, video, and monitors

So, computer’s monitor only has 3 colors

Red Green Blue

CMYK model

The CMYK model is based on the light-absorbing quality of ink printed on paper.

มาตรฐาน Image Metadata

สนับสนุนระบบค้นคืนภาพ และการป้องกันลิขสิทธิ์ของภาพ

Image Metadata ระบบ XMP ( eXtensible Metadata Platform )

พัฒนาโดย The Newspaper Association of America ( NAA ) และ The International Press Telecommunications Council ( IPTC )

ใช้งานได้กับโปรแกรม Adobe PhotoShop 7.0 และสามารถนำเสนอข้อมูลต่างๆ เกี่ยวกับรูปภาพ เช่น Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org.

Watermark

ข้อมูลแสดงลิขสิทธิ์หรือคุณสมบัติของไฟล์

แสดงความเป็นเจ้าของ

แบ่งได้เป็น

Text Embedded Watermark

Image Embedded Watermark

มีประโยชน์อย่างสูงสำหรับ Digital Library, Digital Archive, E-Commerce

Text Embedded Watermark

มีลักษณะเป็นข้อความที่ผนวกกับไฟล์ภาพ

สามารถระบุได้จากโปรแกรม Adobe PhotoShop จากคำสั่ง File, File info, Copyright & URL

สามารถค้นหาได้จากคำสั่ง Search/Find ของ Windows

Image Embedded Watermark

มีลักษณะเป็นภาพที่ผนวกกับไฟล์ภาพ

อาจจะเป็นภาพโลโก้ของหน่วยงาน , ภาพข้อความลิขสิทธิ์

สามารถระบุได้จากซอฟต์แวร์ประเภท Watermarking Software

Watermark Processing

Encoding การเข้ารหัส

Decoding/Detect การตรวจสอบรหัส

ระบบ Detect สามารถกระทำได้กับภาพที่มีการลง Watermark และสั่งพิมพ์บนกระดาษ โดยนำภาพดังกล่าวมาสแกน แล้วใช้ Detecting Watermark Software ทำการตรวจสอบ

The Watermark Embedding Process

The Watermark Detection Process

Illustration

การเขียนภาพประกอบ ภาพตัวอย่าง

หัวใจสำคัญของการนำเสนอสื่อ

สร้างแนวคิด ช่วยจดจำ

สร้างความสัมพันธ์ระหว่าง element แต่ละชิ้น

Elements of Illustration

Object

Attributes

Color, format, font

Position

Position, Distance

Arrow

Type, Attribute, Direction

Concept of Illustration Time Axis Space Axis

Audience

กลุ่มขนาดเล็ก

สื่อนำเสนอควรมีลักษณะที่ให้ความสำคัญกับผู้ฟังมากกว่าเนื้อหา สามารถนำเทคนิค หรือ Effect ต่างๆ ของโปรแกรมสร้างสื่อมาใช้ได้อย่างเต็มที่

กลุ่มที่มีลักษณะการโต้ตอบ

เช่น การนำเสนอทางวิชาการ , การบรรยาย หรือฝึกอบรม สื่อนำเสนอควรให้ความสำคัญกับเนื้อหา และยังสามารถนำเทคนิค หรือ Effect ต่างๆ ของโปรแกรมสร้างสื่อมาใช้ได้อย่างเต็มที่เช่นกัน

กลุ่มเฉพาะกิจ

เช่น ผู้บริหาร , นักวิชาการ ให้ความสำคัญกับเนื้อหา และตัวผู้นำเสนอเป็นสำคัญ เนื้อหาควรมุ่งเฉพาะเป้าหมายของการนำเสนอ ไม่เน้น Effect มากนัก

กลุ่มใหญ่

ให้ความสำคัญกับผู้บรรยายมากกว่าเนื้อหาที่นำเสนอ ไม่ควรเน้นที่ Effect แต่ควรให้ความสำคัญกับขนาดตัวอักษร สีตัวอักษร และ Background Color

Audience Small Group Interactive Group Specific Group Large Group Focus Audience Content Content & Speaker Speaker Effect Full Full Simple Text/BG Color

Content Lifecycle

Design/Develop

Assemble

Deploy

Import

Deliver/Track

Report

ตัวอย่างการปรับแต่ง #1 Design/Develop Assemble Deploy Import Deliver/Track Report

Content Lifecycle Design/Develop Deploy Import Deliver/Track Report Assemble

สังคมแห่งภูมิปัญญาและการเรียนรู้

การพัฒนาประเทศไทยให้ก้าวสู่ “สังคมแห่งภูมิปัญญาและการเรียนรู้ จำเป็นต้องอาศัยกลยุทธ ์ ต่างๆ อันได้แก่ e-Government, e-Education, e-Society, e-Commerce, e-Industry ทั้งนี้รัฐบาลจะต้องส่งเสริมบุคลากรของประเทศในทุกด้าน พร้อมๆ กับการพัฒนาโครงสร้างพื้นฐานของประเทศ

ตัวอย่างการปรับแต่ง #1

สังคมแห่งภูมิปัญญาและการเรียนรู้

e-Government

e-Education

e-Society

e-Commerce

e-Industry

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

พัฒนาโครงสร้างพื้นฐาน

e-Society สังคมแห่งภูมิปัญญา และการเรียนรู้ e-Education e-Govenment e-Industry e-Commerce Infrastructure HRD

Sound Format

MP3

WMA

WAV

OGG

AU

RA

SWF

Sound : PCM

.wav

8-bit or 16-bit sound data

Mono Preprocessing

Sample Rate

5 kHz is barely acceptable for speech.

11 kHz is the lowest recommended quality for a short segment of music and is one-quarter of the standard CD rate.

22 kHz is a popular choice for Web playback and is half the standard CD rate.

44 kHz is the standard CD audio rate

Sound : MP3

Bit Rate

8 Kbps through 160 Kbps CBR (constant bit rate).

16 Kbps or higher for the best results

Mono Preprocessing

Quality

Fast yields faster compression but lower sound quality.

Medium yields somewhat slower compression but higher sound quality.

Best yields the slowest compression and the highest sound quality.

Text 2 Sound

Microsoft Narrator

Start, Program, Accessories, Accessibility, Narrator

Text2Sound

สาริกา

IBM HomePage Reader

ข้อความ พิมพ์ด้วย NotePad Convert

VDO formats

.MOV Quicktime, an Apple standard. It is playable on Macintosh and Windows machines.

.AVI Microsoft standard that is playable on Windows and Macintosh machines.

.RM Real streaming. They are playable on Windows, MacOS, and Unix computers.

.ASF Microsoft streaming format, and play on Windows, MacOS, and Solaris.

.WMA/.WMV Microsoft format used in Microsoft MovieMaker

.flv Macromedia Flash Video

Software Creator

Macromedia Flash

Ulead Video

Windows Movie Maker

Pinnacle

Apple iMovie 2

Apple Final Cut Pro 3

Adobe Premiere 6.5

Software Player

RM RealPlayer

MOV QuickTime

AVI, WMV, Windows Media Player

WMA, MPEG Windows Media Player

ความพร้อมของเครื่องมือ

Digital camcorder

Video capture software

Video capture card or fire wire card

Matrox

Dazzle

Pinnacle

Video editing software

MovieMaker – free with Windows XP

Imovie – free with MacOS

Pinnacle Studio 8 - $99

Adobe Premiere Pro - $699

1 GB or more hard drive space

512 MB RAM

เผยแพร่ผ่านอินเทอร์เน็ต

<embed src=“ ชื่อไฟล์ " width=“ ความกว้างของ Movie " height=“ ความสูงของ Movie " pluginspage="http://www.microsoft.com/windows/windowsmedia/download/default.asp"></embed>

Flash

Assets

Movie File

Sound

VDO

Application

LO Learning Object

SCO Sharable Content Object

Flash Screen

It develops plural effective study methods

Explanation of important phrase regular reference possibility

Presentation window ● It develops the animation which parallels to text contents Learning activity button Control panel

Customization of window layout

Control of sound

Indication of each window / non- indication

Note window

SCO Flash

Frame template

Main movie

Narration script

Navigation

ควบคุม Video

นำเข้า Video

แปลง Video เป็น Symbol แบบ MC

ตั้งชื่อ Instance ของ Video เช่น mc_video

สร้างปุ่มควบคุม

Play

on ( press ) {mc_video . play ()

}

Stop

on ( press ) {mc_video . stop ()

}

Macromedia Flash Video ( FLV )

นำเข้า Video

คลิกเลือก Video จาก Library

คลิกปุ่มขวา เลือก Properties แล้วคลิกปุ่ม Export

ตั้งชื่อไฟล์ เลือกฟอร์แมตเป็น flv

Presentation เลือกเฟรม 1 แล้วใส่คำสั่ง Stop() สร้างปุ่มถอยกลับ แล้วใส่คำสั่ง on ( press ) { prevFrame () ; } สร้างปุ่มเดินหน้า แล้วใส่คำสั่ง on ( press ) { nextFrame () ; }

Movie ซ้อน Movie

สร้าง Movie 1

สร้าง Movie Main สร้าง Blank MC 3 ชิ้น กำหนด Instance Name เป็น mc01, mc02, mc03 กำหนดตำแหน่งการวางตามต้องการ สร้างเลเยอร์ Action ป้อนคำสั่ง loadMovie (“ movie 1 . swf " , “ mc01 ") ; loadMovie (“ movie 2 . swf " , “ mc02 ") ; loadMovie (“ movie 3 . swf " , “ mc03 ") ;

โหลดข้อมูลจาก Text File message1 = ข้อความที่ 1& message2 = ข้อความที่ 2 สร้าง Text Box แบบ Dynamic 2 ชิ้น กำหนดค่า Var เป็น message1 และ message2 ตามลำดับ สร้างเลเยอร์ใหม่ เฟรม 1 กำหนด Action เป็น loadVariablesNum (" 2flash . txt " , "") ; 2flash.txt

MC Text จากข้อมูลภายนอก

สร้าง Text File กำหนดตัวแปร และค่าตัวแปร เช่น

Message= สร้าง Movie ด้วย Flash MX

สร้าง Movie File

สร้าง Text Box แบบ Dynamic กำหนดค่า Var ให้ตรงกับที่ระบุใน Text File

แปลงเป็น Symbol แบบ Movie Clip

กำหนดค่า Instance Name

นำ Text MC ที่สร้าง แปลงเป็น Motion ตามต้องการ

สร้าง Layer ใหม่ กำหนด Action เป็น LoadVariable(“text file”,”instance name”)

SCO Flash Template Animation Panel Panel Panel Animation Animation ・・・・・・・・・・・・ Example) approximately material of page 3 - > 16 scenes: 6 minute narration Animation

Mentoring process