• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Instructional Design for e-Learning
 

Instructional Design for e-Learning

on

  • 6,539 views

Instructional Design for e-Learning

Instructional Design for e-Learning

Statistics

Views

Total Views
6,539
Views on SlideShare
6,388
Embed Views
151

Actions

Likes
5
Downloads
0
Comments
1

3 Embeds 151

http://www.scoop.it 129
http://www.slideshare.net 20
http://www.stks.or.th 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Instructional Design for e-Learning Instructional Design for e-Learning Presentation Transcript

  • 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 )
  • Learning Content Management System
    • ใช้ในการบริหารจัดการส่วนการทำงานต่างๆ ในเว็บไซต์
    • บริหารจัดการเนื้อหาได้อย่างรวดเร็ว
    • เน้นการจัดการระบบผ่านเว็บ ( Web interface )
      • เช่น การนำเสนอบทความ ( Articles ) , เว็บไดเรคทอรี ( Web directory ) , เผยแพร่ข่าวสารต่างๆ ( News ) , หัวข้อข่าว ( Headline ) , ถาม / ตอบปัญหา ( FAQs ) , ห้องสนทนา ( Chat ) , กระดานข่าว ( Forums ) , การจัดการไฟล์ในส่วนดาวน์โหลด ( Downloads ) , แบบสอบถาม ( Polls ) , ข้อมูลสถิติต่างๆ ( Statistics )
  • Learning Content Management System
    • ส่วนติดต่อกับผู้ใช้งาน 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
  • Character set คืออะไร
    • ต่อมาคอมพิวเตอร์ได้แพร่หลายไปยังประเทศที่ไม่ได้ใช้แค่ภาษาอังกฤษ ได้มีวิธีการแก้ไขแบบเฉพาะหน้า โดยการเพิ่มความยาวของรหัสที่เก็บจาก 7 ตัว ให้เป็น 8 ตัว ก็จะสามารถเก็บอักษรได้ทั้งหมดเป็น 2^8 = 256 ตัว
    • ประเทศต่างๆ ก็สามารถใช้ส่วนที่เกินมาอีก 128 ตัวนั้น ใช้เก็บรหัสอักขระเพิ่มเติม ที่เป็นเฉพาะของภาษาตนเอง เช่น กลุ่มประเทศยุโรปแถบตะวันตก ก็จะใช้เก็บอักขระเช่น พวก ที่มีลักษณะคล้าย a, e, i แต่มันจุดหรือมีขีดอยู่บนตัวอักษรเหล่านั้น ( ซึ่งใช้กันในภาษาของพวกเขา ) ตัวอย่างเช่น รหัส 228 จะเป็นตัว a umlaut คือ a แล้วมีจุดอยู่ข้างบน 2 จุด ใช้กันในภาษาเยอรมันเป็นต้น
    • ประเทศไทยก็ได้ใช้ประโยชน์ของรหัส 128 ตัวที่เกินมานี้เช่นกัน เช่น เราเก็บรหัส ก ไก่ ไว้ที่หมายเลข 161, เราเก็บไม้มลาย " ไ " ไว้ที่รหัสหมายเลข 228 เป็นต้น
  • Character set คืออะไร
    • ดังที่กล่าวมาแล้วนั้น เราจำเป็นต้องมีตารางที่จะแสดงว่า หมายเลขอะไร หมายถึงตัวอักษรอะไร ตารางนี้ ก็จะแตกต่างกันไปในแต่ละภาษา ซึ่งมีอักขระซึ่งต่างๆ กัน
    • ดูๆ ไปแล้ว ก็ยังไม่เห็นว่าจะมีปัญหาอะไร ตราบใดที่ในเครื่องคอมพิวเตอร์ของท่าน มีใช้งาน แค่ 2 ภาษา เช่น ภาษาไทย กับ ภาษาอังกฤษ ถ้าท่านได้รับรหัสมามีค่า 228 ก็สรุปได้เลยว่าผู้ส่งต้องการจะส่งไม้มลาย มา
    • แต่หากท่านต้องการจะส่งข้อมูล ไปยังเครื่องคอมพิวเตอร์เครื่องอื่น หรือเปิด Web Site ให้ผู้คนจากทั่วโลกเข้ามาดู ที่ไม่ได้ใช้ภาษาไทย อยู่ด้วย ผู้คนเหล่านั้น จะเข้าใจได้อย่างไรว่า ท่านต้องการส่ง ไม้มลาย ซึ่งเป็นอักขระหนึ่งของภาษาไทย ?
    • ถ้าคนเยอรมันได้รับรหัสนั้น ย่อมต้องแปลความหมายของรหัส 228 ที่ท่าน ส่งไปว่าเป็นอักขระ a umlaut ที่พวกเขาใช้กัน ? เขาควรจะรู้ได้อย่างไรว่า เขาควรจะหยิบตารางที่ใช้แปลงค่ารหัสเป็นภาษาไทย แทนที่จะใช้ตารางของภาษาเยอรมัน ?
  • Character set คืออะไร
    • วิธีแก้ปัญหานั้นก็ง่ายดาย เพียงแต่ระบุแปะหน้าไปว่าข้อมูลของท่านนั้น ขอให้ใช้ตารางสำหรับภาษาไทยในการถอดรหัส
    • สิ่งที่ระบุแปะหน้าไปนั้น ก็เป็นที่เรียกกันว่า character set
    สงวนลิขสิทธิ์แบบ GPL โดย ภัทระ เกียรติเสวี ....
  • ประโยชน์
    • 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
  • มาตรฐานเกี่ยวกับ 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
  • Template & Layout Design TITLE 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
  • Styles of Word
  • Styles of Word
  • 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=&quot;description&quot; content=“meta tags.&quot;> <meta name=&quot;keywords&quot; content=&quot;meta data, metadata, meta tag, meta-tag, search-engine&quot;> <meta name=&quot;author&quot; content=&quot;Keith Brooke&quot;> <meta name=&quot;reply-to&quot; content=&quot;kbrooke&quot;> <meta name=&quot;robots&quot; content=&quot;all&quot;> <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 ก่อน โดยอาจจะใช้รูปภาพตัวนี้เป็นสื่อ
    • สามารถสร้างลิงก์ โดยอาศัยรหัส ดังนี้
    <A HREF=”http://www.nectec.or.th/courseware/ d ownload/ar40eng.exe&quot;> <IMG SRC=&quot; http://www.nectec.or.th/courseware/image/getacro.gif&quot; BORDER=&quot;0&quot; ALT=&quot;Get Acrobat Reader”><A>
  • กำหนดค่า 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
  • 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=“ ชื่อไฟล์ &quot; width=“ ความกว้างของ Movie &quot; height=“ ความสูงของ Movie &quot; pluginspage=&quot;http://www.microsoft.com/windows/windowsmedia/download/default.asp&quot;></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 2
    • สร้าง Movie 3
    สร้าง Movie Main สร้าง Blank MC 3 ชิ้น กำหนด Instance Name เป็น mc01, mc02, mc03 กำหนดตำแหน่งการวางตามต้องการ สร้างเลเยอร์ Action ป้อนคำสั่ง loadMovie (“ movie 1 . swf &quot; , “ mc01 &quot;) ; loadMovie (“ movie 2 . swf &quot; , “ mc02 &quot;) ; loadMovie (“ movie 3 . swf &quot; , “ mc03 &quot;) ;
  • โหลดข้อมูลจาก Text File message1 = ข้อความที่ 1& message2 = ข้อความที่ 2 สร้าง Text Box แบบ Dynamic 2 ชิ้น กำหนดค่า Var เป็น message1 และ message2 ตามลำดับ สร้างเลเยอร์ใหม่ เฟรม 1 กำหนด Action เป็น loadVariablesNum (&quot; 2flash . txt &quot; , &quot;&quot;) ; 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
    • Contact to learner
      • Delaying 1 week from a learner’s plan
      • No access (log in) to LMS during 3 or more day
      • Sending his/her questions
    • Reply rules
      • Be sure to reply for questions within 1or 2 days
    • Collecting the information
      • collect any information of learning situations
  • Resource
    • elearning.nectec.or.th
    • www.nectec.or.th/courseware
    • www.learnsquare.com