Instructional Design for e-Learning

ศู�นย์�เทคโนโลย์�อิ เล�กทรอิน กส์�และคอิมพิ วเตอิร�แห่�งชาต

1

Instructional Design Instructional Design for e-Learningfor e-Learning

บุ�ญเลิ�ศ อรุ�ณพิ�บุ ลิย์�NECTEC

[email protected]://elearning.nectec.or.th


2

ee--Learning Learning ท��ดี� ท��ดี� ??• ต้�องได้�รุ�บุการุออกแบุบุ แลิะพิ�ฒนา• มี�มีาต้รุฐานอ�างอ�ง• เพิ� อ Learning Process ของผู้ �เก� ย์วข�อง (ผู้ �

สอน ผู้ �เรุ�ย์น ต้�วเต้อรุ� ...)

• โด้ย์ใช้�เทคโนโลิย์�ช้*วย์จั�ด้การุ การุน,าเสนอ การุเข�าถึ.งข�อมี ลิ การุมี�ปฏิ�ส�มีพิ�นธ์� การุมี�ส*วนรุ*วมี แลิะการุเรุ�ย์นรุ �


3

ข้!อิค"าน#งในการพิ%ฒนาระบบข้!อิค"าน#งในการพิ%ฒนาระบบ e-e-LearningLearning

• การุรุะบุ�ต้�วบุ�คคลิ แลิะอ,านาจัหน�าท� (Authentication & Authorization )

• การุรุ�กษาความีลิ�บุของข�อมี ลิ (Confidentiality)• การุรุ�กษาความีถึ กต้�องของข�อมี ลิ (Integrity)• การุป4องก�นการุปฏิ�เสธ์ หรุ�ออ�างความีรุ�บุผู้�ด้ช้อบุ (Non-

repudiation)• ส�ทธ์�ส*วนบุ�คคลิ (Privacy)• การุออกแบุบุกรุะบุวนการุเรุ�ย์นรุ �แลิะส� อการุเรุ�ย์นการุสอน

(Instructional Design)


4

การระบ(ต%วบ(คคล การระบ(ต%วบ(คคล• กรุะบุวนการุก,าหนด้ลิ�กษณะส*วนบุ�คคลิของผู้ �ใช้�ท� วไป• แจั�งช้� อผู้ �ใช้� แลิะรุห�สผู้*าน• เมี� อผู้ �ใช้�ต้�องการุเข�ารุะบุบุ ให�รุะบุ�ช้� อผู้ �ใช้� แลิะรุห�สผู้*าน• ถึ�าข�อมี ลิต้รุงก�บุแฟ้4มีของ Server ก6จัะได้�รุ�บุอน�ญาต้

เข�าถึ.ง– เปรุ�ย์บุเหมี�อนการุแสด้งต้�วด้�วย์ปรุะจั,าต้�วซึ่. งมี�รุ ปต้�ด้อย์ *ด้�วย์

หรุ�อการุลิ8อค ซึ่. งผู้ �ท� จัะเป9ด้ได้�จัะต้�องมี�ก�ญแจัเท*าน�:น หรุ�อบุ�ต้รุเข�าออกอาคารุ, เจั�าหน�าท� รุ �กษาความีปลิอด้ภั�ย์

• อ,านาจัหน�าท� ค�อ แต้*ลิะบุ�คคลิมี�ส�ทธ์�ใด้ อย์*างไรุ


5

การร%กษาความล%บข้อิงข้!อิม�ล การร%กษาความล%บข้อิงข้!อิม�ล• การุเข�ารุห�ส, การุใช้�บุารุ�โค8ด้, การุใส*รุห�สลิ�บุ

(password), Firewall• การุรุ�กษาความีลิ�บุของข�อมี ลิท� เก6บุไว� หรุ�อส*งผู้*าน

ทางเครุ�อข*าย์• ป4องก�นไมี*ให�ผู้ �อ� นท� ไมี*มี�ส�ทธ์�<ลิ�กลิอบุด้ ได้�

– เปรุ�ย์บุเหมี�อนการุป9ด้ผู้น.กซึ่องจัด้หมีาย์ หรุ�อการุใช้� ซึ่องจัด้หมีาย์ท� ท.บุแสง หรุ�อการุเข�ย์นหมี.กท� มีองไมี*เห6น

• มี�กจัะใช้�เทคโนโลิย์�การุเข�ารุห�สข�อมี ลิ


6

การเข้!ารห่%ส์ การเข้!ารห่%ส์ ((EncryptionEncryption))

• ปรุะกอบุด้�วย์ฝ่>าย์ผู้ �รุ�บุ แลิะฝ่>าย์ผู้ �ส*ง• ต้กลิงกฎเกณฑ์�เด้�ย์วก�น ในการุเปลิ� ย์น

ข�อความีต้�นฉบุ�บุให�เปBนข�อความีอ*านไมี*รุ �เรุ� อง(cipher text)

• ใช้�สมีการุ หรุ�อส ต้รุทางคณ�ต้ศาสต้รุ�ท� ซึ่�บุซึ่�อน• กฎการุเพิ� มีค*า 13• แฮช้ฟ้Dงก�ช้�น (Hash function)


7

ต%วอิย์�างโปรแกรมการเข้!ารห่%ส์ ต%วอิย์�างโปรแกรมการเข้!ารห่%ส์ โดีย์ใช!กฎ โดีย์ใช!กฎ 131311

การุเข�ารุห�สจัะท,าโด้ย์การุเปลิ� ย์นต้�วอ�กษรุ จัากต้,าแหน*งเด้�มี เปBนต้�วอ�กษรุต้,าแหน*งท� 13 ของช้�ด้ต้�วอ�กษรุน�:น เช้*น

A B C D E F G H I G K L M N O P Q R S T U V W X Y Z

N O P Q R S T U V W X Y Z A B C D E F G H I G K L M

….

…. เช้*น เข�ารุห�ส I LOVE YOU ---->

V YBIR LBH

HARRY POTTER ---> UNEEL CBGGRE


8

Encode 2ndEncode 2nd

•Pen = Qfo•Pen = Rgp


9

การร%กษาความถู�กต!อิงข้อิงการร%กษาความถู�กต!อิงข้อิง ข้!อิม�ล ข้!อิม�ล

• การุป4องก�นไมี*ให�ข�อมี ลิถึ กแก�ไข– เปรุ�ย์บุเหมี�อนก�บุการุเข�ย์นด้�วย์หมี.กซึ่. งถึ�าถึ ก

ลิบุแลิ�วจัะก*อให�เก�ด้รุอย์ลิบุ หรุ�อ การุใช้�โฮโลิ แกรุมีก,าก�บุบุนบุ�ต้รุเครุด้�ต้ หรุ�อ ลิาย์น,:าบุน

ธ์นบุ�ต้รุ• เปBนการุป4องก�นการุลิะเมี�ด้ลิ�ขส�ทธ์�<


10

การป-อิงก%นการปฏิ เส์ธ ห่ร0อิอิ!าง การป-อิงก%นการปฏิ เส์ธ ห่ร0อิอิ!าง ความร%บผิ ดีชอิบ ความร%บผิ ดีชอิบ

• การุป4องก�นการุปฏิ�เสธ์ว*าไมี*ได้�มี�การุส*ง หรุ�อรุ�บุข�อมี ลิจัากฝ่>าย์ต้*าง ๆ ท� เก� ย์วข�อง

• การุป4องก�นการุอ�างท� เปBนเท6จัว*าได้�รุ�บุ หรุ�อส*งข�อมี ลิ


11

ส์ ทธ ส์�วนบ(คคล ส์ ทธ ส์�วนบ(คคล• การุรุ�กษาส�ทธ์�ส*วนต้�วของข�อมี ลิส*วนต้�ว

เพิ� อปกป4องข�อมี ลิจัากการุลิอบุด้ โด้ย์ผู้ �ท� ไมี*มี�ส�ทธ์�<ในการุใช้�ข�อมี ลิ

• ข�อมี ลิท� ส*งมีาถึ กด้�ด้แปลิงโด้ย์ผู้ �อ� นก*อนถึ.งเรุาหรุ�อไมี*


12

มาตรฐานเก��ย์วก%บ มาตรฐานเก��ย์วก%บ e-e-LearningLearning


13


• 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)


14


• 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)


15

The SCORMThe SCORMA “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


16

APIAdapter

SCORMAPI

DeliveryService

TrackingService

SequencingService

ContentManagement

Service

LearnerProfilesService

Testing/Assessment

Service

CourseAdministration

Service

LocalContent

Repository

RemoteContent

Repositories

SCORMContent

Packages

Browser(Presentation)

GeneralizedLearning Management

System Model

Selection

Launch

SCORMTracking

Data

SCORMContent

(SCOs & Assets)


17

e-Learning Teame-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


18

Instructional Design Instructional Design & e-Learning& 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.


19

Instructional design Instructional design

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

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


20

ISD =ISD =IInstructional nstructional SSystem ystem DDevelopmentevelopment

Forecasting

Planning

ExecutingGathering

Reporting

Follow-up

Analysis

DevelopmentImplementation

Evaluation Design


21

ADDIE ADDIE modelmodel• Analysis

– target group, content, job• Design

– objectives, strategies, tactics, assessment, motivation

• Development– materials, tools, tests

• Implementation– pilot test, tutor training, marketing

• Evaluation– formative, summative


22

ข้%3นการว เคราะห่�ข้%3นการว เคราะห่�• ศ.กษา/ส,ารุวจักลิ�*มี

เป4าหมีาย์• ศ.กษา/ส,ารุวจัเน�:อหา• ศ.กษา/ส,ารุวจัความี

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

มี�อ

• ศ.กษาจัากแหลิ*งข�อมี ลิ

• สอบุถึามี• ส�มีภัาษณ�


23

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


24

เน03อิห่าเน03อิห่า•แหลิ*งข�อมี ลิ•ลิ�กษณะการุได้�มีา•ความีถึ กต้�องของเน�:อหา•ลิ�ขส�ทธ์�<•รุ ปแบุบุการุน,าเสนอ


25

เทคโนโลย์�เทคโนโลย์�ผู้ �พิ�ฒนา

• รุะบุบุคอมีพิ�วเต้อรุ�• รุะบุบุเครุ�อข*าย์• รุะบุบุการุผู้ลิ�ต้

ผู้ �เรุ�ย์น• รุะบุบุคอมีพิ�วเต้อรุ�• รุะบุบุเครุ�อข*าย์• รุะบุบุการุน,าเสนอ


26

Web Server/Mail Web Server/Mail Server/ Database Server/ Database

ServerServerWindows Based• HTML• XML• MS Access, MS

SQL• ASP, VB.Net• Multimedia

Linux Based• HTML• XML• MySQL• PHP• Multimedia


27

ToolsTools

OpenSource• Moodle• PHPNuke• PostNuke• Atutor

Commercial• Blackboard• IBM Sphere• Authorware• Macromedia

Suits


28

กล(�มเป-าห่มาย์กล(�มเป-าห่มาย์• เรุ� องย์าก ท� จัะพิ�ฒนาเว6บุท� รุองรุ�บุกลิ�*มีเป4า

หมีาย์ได้�ท�กรุะด้�บุ• การุว�จั�ย์/ส,ารุวจั เปBนเรุ� องจั,าเปBน

– http://truehits.net/– http://www.cc.gatech.edu/gvu/

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


29


30


31


32


33


34


35


36

การอิอิกแบบการอิอิกแบบ• ก,าหนด้ว�ต้ถึ�ปรุะสงค�เฉพิาะ

– อะไรุค�อส� งท� ผู้ �เรุ�ย์นต้�องการุ– อะไรุค�อส� งท� ต้�องการุถึ*าย์ทอด้

• ออกแบุบุโครุงรุ*าง• ออกแบุบุเว6บุ

ArtisticTechnology

SocialActivities


37

ว%ตถู(ประส์งค�การเร�ย์นร�!ว%ตถู(ประส์งค�การเร�ย์นร�!• ด้�านพิ�ทธ์�พิ�ส�ย์ (Cognitive) – ความีรุ �

– ความีรุ � ความีเข�าใจั การุน,าไปใช้� การุว�เครุาะห� การุส�งเครุาะห� การุปรุะเมี�น

• ด้�านจั�ต้พิ�ส�ย์ (Affective) – อารุมีย์� ความีรุ �ส.ก– การุย์อมีรุ�บุ , ปฏิ�ก�รุ�ย์าต้อบุสนอง , การุสรุ�างค*า

น�ย์มี , การุรุวบุรุวมี , การุปรุ�บุต้�ว• ด้�านท�กษะพิ�ส�ย์ (Psychomotor) – การุ

เคลิ� อนไหวทางรุ*างกาย์


38

ว%ตถู(ประส์งค�การเร�ย์นร�!ว%ตถู(ประส์งค�การเร�ย์นร�!


39

ว%ตถู(ประส์งค�การเร�ย์นร�!ว%ตถู(ประส์งค�การเร�ย์นร�!• ด้�านพิ�ทธ์�พิ�ส�ย์ (Cognitive) – ความีรุ �

– ผู้ �เรุ�ย์นสามีารุถึอธ์�บุาย์องค�ปรุะกอบุของคอมีพิ�วเต้อรุ�ได้�• ด้�านจั�ต้พิ�ส�ย์ (Affective) – อารุมีย์� ความีรุ �ส.ก

– ผู้ �เรุ�ย์นเห6นปรุะโย์ช้น�ของการุใช้�คอมีพิ�วเต้อรุ�ในการุท,างาน

• ด้�านท�กษะพิ�ส�ย์ (Psychomotor) – การุเคลิ� อนไหวทางรุ*างกาย์ – ผู้ �เรุ�ย์นสามีารุถึออกแบุบุนามีบุ�ต้รุได้�ภัาย์ใน 1 ช้� วโมีง


40

ว�ต้ถึ�ปรุะสงค�

ก�จักรุรุมีการุเรุ�ย์นรุ �

รุวบุย์อด้ความีค�ด้

สรุ�างความีรุ �

ต้อบุโต้�

เว6บุไซึ่ต้�น,าเสนอความีรุ �

เว6บุไซึ่ต้�ก�จักรุรุมี/ทด้สอบุ/ปรุะเมี�น

เว6บุไซึ่ต้� Interactive & Communication


41

อิอิกแบบบทเร�ย์นอิอิกแบบบทเร�ย์น• ผู้ �เรุ�ย์นมี�โอกาสโต้�ต้อบุก�บุบุทเรุ�ย์นได้�ท�นท�• ต้อบุค,าถึามีได้�โด้ย์ไมี*ผู้�ด้ หรุ�อมี�โอกาสแก�ต้�ว

– ผู้�ด้เปBนครุ • แสด้งผู้ลิการุทด้สอบุท�นท�• บุทเรุ�ย์นย์*อย์• ผู้ �เรุ�ย์นเปBน พิรุะเอก“ ”


42

บทเร�ย์นส์"าเร�จร�ปบทเร�ย์นส์"าเร�จร�ป

อ*านว�ต้ถึ�ปรุะสงค� ท,าก�จักรุรุมี บุททบุทวน ข�อสอบุ

เน�:อหาใหมี* เน�:อหาเก*า

ข�:นน,า ข�:นสอน ข�:นสอบุ


43

ก จกรรมก จกรรม• ข�:นน,า

– เรุ�าผู้ �เรุ�ย์น รุ �หรุ�อไมี*รุ � • ข�:นสอน

– เสนอความีรุ �ใหมี*• ข�:นสอบุ

– เปBนการุสอบุท�าย์เน�:อหาก�จักรุรุมี ว�ด้ว*าผู้ �เรุ�ย์นบุรุรุลิ�ว�ต้ถึ�ปรุะสงค�หรุ�อไมี*


44

ข้%3นน"าข้%3นน"า• ส�นค�าออกส,าค�ญของไทย์ ได้�แก* ข�าว ย์าง

ปลิา ไมี�ส�ก เพิช้รุพิลิอย์ ศ�ลิปกรุรุมี• ส�นค�าออกส,าค�ญของไทย์ 2 ช้น�ด้ ได้�แก*

––

ข�:นลิอกเลิ�ย์น


45

ข้%3นน"าข้%3นน"า• รุ ปแบุบุการุเข�ย์นเศษส*วน 1/3

– เลิข 1 เปBนเลิขท� อย์ *บุนเส�น เรุ�ย์กว*า เศษ– เลิข 3 เปBนเลิขท� อย์ *ใต้�เส�น เรุ�ย์กว*า ส*วน

• ถึ�าเข�ย์นเศษส*วนเปBน 5/7– เลิข เปBน เรุ�ย์กว*า – เลิข เปBน เรุ�ย์กว*า


46

DevelopDevelop

• Setup Server• Setup LCMS• Content

– Text– Graphics– Multimedia


47

Digital MediaDigital Media

• Text– Document– Web Document– PDF

• Image– Metadata– Watermark

• E-Book– Text format– Multimedia

format

• Sound• Video• Flash


48

File nameFile name

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

• ใช้�เครุ� องหมีาย์เฉพิาะ –• ไมี*ควรุมี�ช้*องว*าง• ไมี*ควรุย์าวมีากเก�นไป• ก,าหนด้รุห�สควบุค�มีแต้*ลิะงานให�เหมีาะสมี


49

TextText

• Document• Web• PDF

– Acrobat 5 : PDF 1.4 format.

– ป4องก�นลิ�ขส�ทธ์�<ด้�วย์PDF Security System

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

Microsoft Sans Serif, Thonburi

• ก,าหนด้ Metadata• เช้� อมีโย์งก�บุเอกสารุอ� น

ได้�ง*าย์


50

Server & ClientServer & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พิ�ฒนาเว6บุด้�วย์HTML Editor,

HTML Generatorบุน

Windows

Server :Unix/NT

upload


51

ภาษาไทย์ ก%บการพิ%ฒนา ภาษาไทย์ ก%บการพิ%ฒนา• ด้�านพิ�ฒนาเว6บุ

– HTML Editor, Generator แสด้งผู้ลิภัาษาไทย์?

– HTML Editor, Generator เข�ารุห�สภัาษาไทย์ ?

• ด้�านเรุ�ย์กด้ เว6บุ– ฟอินต� ไมี*ควรุสรุ�างภัารุะให�ก�บุผู้ �ใช้�งาน– แสด้งผู้ลิอ�กขรุะได้�ถึ กต้�อง ท�ก (เก�อบุท�ก )

platform


52

ภาษาไทย์ ก%บการพิ%ฒนา ภาษาไทย์ ก%บการพิ%ฒนาเว�บเพิจเว�บเพิจ


53

Acrobat WriterAcrobat Writer

• ต้�ด้ต้�:งโปรุแกรุมี Acrobat Writer• เป9ด้โปรุแกรุมี MS-Word• เป9ด้ไฟ้ลิ�เอกสารุท� ต้�องการุแปลิงเปBน PDF• เลิ�อกเมีน ค,าส� ง File, Print• เลิ�อก Printer เปBน Acrobat PDF คลิ�ก

ป�>มี OK• ปรุากฏิจัอภัาพิก,าหนด้ช้� อไฟ้ลิ� .pdf แลิะ

โฟ้ลิเด้อรุ�


54

เอิกส์ารเส์ม0อิน เอิกส์ารเส์ม0อิน PDF PDF FormatFormat

• - PDF Portable DocumentFormat

• เอกสารุเสมี�อนจัรุ�ง• ท,างานแบุบุ Cross platform• ขนาด้ไฟ้ลิ�เลิ6ก


55

การใช!เอิกส์าร การใช!เอิกส์าร PDF PDF บนเว�บบนเว�บ• ควรุท,าลิ�งก�ให�ผู้ �ด้ ทรุาบุว*าควรุต้�ด้ต้�:ง

Acrobat Reader ก*อน โด้ย์อาจัจัะใช้�รุ ปภัาพิต้�วน�:เปBนส� อ

• สามีารุถึสรุ�างลิ�งก� โด้ย์อาศ�ย์รุห�ส ด้�งน�:<A HREF=”http://www.nectec.or.th/courseware/download/ar40eng.exe">

<IMG SRC=" http://www.nectec.or.th/courseware/image/getacro.gif" BORDER="0" ALT="Get Acrobat Reader”><A>


56

ก"าห่นดีค�า ก"าห่นดีค�า Config # 1Config # 1

• คลิ�กป�>มี Properties จัากหน�าต้*างPrint


57

ก"าห่นดีค�า ก"าห่นดีค�า Config # 2Config # 2

คลิ�ก Edit..ปรุ�บุค*าฟ้อนต้�

ภัาษาไทย์ท� ใช้�ในเอกสารุ


58

Security DocumentSecurity Document

เลิ�อก Reconfirm Security for

each jobแลิ�วคลิ�กป�>มี Edit เพิ� อปรุ�บุแต้*งค*าท�

ต้�องการุ


59

ImagesImages

• จั�ด้หาภัาพิ หรุ�อสรุ�างภัาพิท� เก� ย์วข�องก�บุเน�:อหา– สรุ�างด้�วย์โปรุแกรุมีกรุาฟ้9ก เช้*น Adobe

PhotoShop– ค�ด้เลิ�อกจัาก ClipArt for Web เช้*น CD-ROM

รุวมีภัาพิส,าหรุ�บุเว6บุ• ภัาพิท� เลิ�อกใช้�ท� :งหมีด้ ต้�องเก6บุไว�ในโฟ้ลิเด้อรุ�ท�

สรุ�างไว�ก*อนแลิ�ว Copy to….


60

ป8ญห่าการอิ!างอิ ง ป8ญห่าการอิ!างอิ ง PathPath


61

มาตรฐานร�ปแบบการน"าเส์นอิมาตรฐานร�ปแบบการน"าเส์นอิภาพิภาพิภาพิ

ต!นฉบ%บภาพิ

ส์0�อิส์ �งพิ มพิ�

ภาพิส์"าห่ร%บDigital

Archive

Presentation

Database

Website

Preview

Format

JPEG, TIFF

TIFF JPEG JPEG JPEG GIFJPGPNGTIF

GIFJPGPNG

Resolution

Up to 350 dpi

Up to 350 dpi

72 dpi 72 dpi 72 dpi 72 dpi

72 dpi

Size Up to184

0 123

2pi xel s

Up to184

0 123

2pi xel s

Up to102

4 768

pi xel s

Up to102

4 768

pi xel s

300

25

0pi xel s

30

0 25

0pi xel s

10

0 10

0pi xel s

From Digital Camera

, Scanner

ActionScript ของโปรุแกรุมี Adobe PhotoShop 7.0

Folder

original dtp archive present database

web preview

File Name

ต้ามีจัรุ�ง เปลิ� ย์นต้ามีข�อก,าหนด้ โด้ย์แย์กเปBนโฟ้ลิเด้อรุ�เฉพิาะ


62

IllustrationIllustration

• การุเข�ย์นภัาพิปรุะกอบุ ภัาพิต้�วอย์*าง• ห�วใจัส,าค�ญของการุน,าเสนอส� อ• สรุ�างแนวค�ด้ ช้*วย์จัด้จั,า• สรุ�างความีส�มีพิ�นธ์�รุะหว*าง element

แต้*ลิะช้�:น


63

Elements of Elements of IllustrationIllustration

• Object– Attributes

•Color, format, font

– Position•Position, Distance

• Arrow– Type, Attribute, Direction


64

Concept of Concept of IllustrationIllustrationTime Axis Space Axis


65

Audience Audience • กลิ�*มีขนาด้เลิ6ก • ส� อน,าเสนอควรุมี�ลิ�กษณะท� ให�ความีส,าค�ญก�บุผู้ �ฟ้Dงมีากกว*าเน�:อหา สามีารุถึ

น,าเทคน�ค หรุ�อ Effect ต้*างๆ ของโปรุแกรุมีสรุ�างส� อมีาใช้�ได้�อย์*างเต้6มีท� • กลิ�*มีท� มี�ลิ�กษณะการุโต้�ต้อบุ • เช้*น การุน,าเสนอทางว�ช้าการุ, การุบุรุรุย์าย์ หรุ�อฝ่Hกอบุรุมี ส� อน,าเสนอควรุ

ให�ความีส,าค�ญก�บุเน�:อหา แลิะย์�งสามีารุถึน,าเทคน�ค หรุ�อ Effect ต้*างๆ ของโปรุแกรุมีสรุ�างส� อมีาใช้�ได้�อย์*างเต้6มีท� เช้*นก�น

• กลิ�*มีเฉพิาะก�จั • เช้*น ผู้ �บุรุ�หารุ, น�กว�ช้าการุ ให�ความีส,าค�ญก�บุเน�:อหา แลิะต้�วผู้ �น,าเสนอเปBน

ส,าค�ญ เน�:อหาควรุมี�*งเฉพิาะเป4าหมีาย์ของการุน,าเสนอ ไมี*เน�น Effect มีาก น�ก

• กลิ�*มีใหญ* • ให�ความีส,าค�ญก�บุผู้ �บุรุรุย์าย์มีากกว*าเน�:อหาท� น,าเสนอ ไมี*ควรุเน�นท� Effect

แต้*ควรุให�ความีส,าค�ญก�บุขนาด้ต้�วอ�กษรุ ส�ต้�วอ�กษรุ แลิะ Background Color


66

AudienceAudienceSmall Group

Interactive Group

Specific Group

Large Group

Focus Audience ContentContent &

SpeakerSpeaker

Effect Full Full Simple Text/BG Color


67

Content LifecycleContent Lifecycle

• Design/Develop

• Assemble

• Deploy

• Import

• Deliver/Track

• Report


68

ต%วอิย์�างการปร%บแต�ง ต%วอิย์�างการปร%บแต�ง #1#1Design/Develop

Assemble

Deploy

Import

Deliver/Track

Report


69

Design/Develop


Deploy

Import

Deliver/Track

Report Assemble


70

Design/Develop

Deploy

Import

Deliver/Track

Report

Assemble



71

ส์%งคมแห่�งภ�ม ป8ญญาและการส์%งคมแห่�งภ�ม ป8ญญาและการเร�ย์นร�!เร�ย์นร�!

• “การุพิ�ฒนาปรุะเทศไทย์ให�ก�าวส * ส�งคมีแห*ง ภั มี�ปDญญาแลิะการุเรุ�ย์นรุ � จั,าเปBนต้�องอาศ�ย์

กลิย์�ทธ์� ต้*างๆ อ�นได้�แก*e-Government, e-Education, e-Society, e-Commerce, e-Industry ท�:งน�:รุ �ฐบุาลิจัะต้�องส*งเสรุ�มี

บุ�คลิากรุของปรุะเทศในท�กด้�าน พิรุ�อมีๆ ก�บุการุพิ�ฒนาโครุงสรุ�างพิ�:นฐานของปรุะเทศ


72

ต%วอิย์�างการปร%บแต�ง ต%วอิย์�างการปร%บแต�ง #1#1

• ส�งคมีแห*งภั มี�ปDญญาแลิะการุเรุ�ย์นรุ � – e-Government– e-Education– e-Society– e-Commerce– e-Industry– พิ�ฒนาบุ�คลิากรุ– พิ�ฒนาโครุงสรุ�างพิ�:นฐาน


73


74

Sound FormatSound Format

• MP3• WMA• WAV• OGG• AU• RA

SWF


75

Sound : PCMSound : 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


76

Sound : MP3Sound : 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.


77

Text 2 SoundText 2 Sound

• Microsoft Narrator– Start, Program, Accessories,

Accessibility, Narrator• Text2Sound• สารุ�กา• IBM HomePage Reader


78

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


79

VDO formatsVDO 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


80

Software CreatorSoftware Creator

• Macromedia Flash

• Ulead Video • Windows

Movie Maker• Pinnacle

• Apple iMovie 2

• Apple Final Cut Pro 3

• Adobe Premiere 6.5


81

Software PlayerSoftware Player

• RM RealPlayer• MOV QuickTime• AVI, WMV, Windows Media

Player• WMA, MPEG Windows Media

Player


82

ความพิร!อิมข้อิงเคร0�อิงม0อิความพิร!อิมข้อิงเคร0�อิงม0อิ• 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


83

เผิย์แพิร�ผิ�านอิ นเทอิร�เน�ตเผิย์แพิร�ผิ�านอิ นเทอิร�เน�ต<embed src=“ช้� อไฟ้ลิ�" width=“ ความีกว�างของ Movie " height=“ ความีส งของ Movie" pluginspage="http://www.microsoft.com/windows/windowsmedia/download/default.asp"></embed>


84

FlashFlash

• Assets• Movie File• Sound• VDO

• Application• LO Learning

Object• SCO Sharable

Content Object


85

•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

Flash Screen Flash Screen


86

Frame template Frame template Main movie Main movie Narration script Narration script Navigation Navigation

SCO Flash SCO Flash


87

ควบค(ม ควบค(ม VideoVideo• น,าเข�า Video• แปลิง Video เปBน Symbol แบุบุ MC• ต้�:งช้� อ Instance ของ Video เช้*น mc_video• สรุ�างป�>มีควบุค�มี

– Playon (press ) {mc_video.play()}

– Stopon (press ) {mc_video.stop()}


88

Macromedia Flash Macromedia Flash Video Video ((FLVFLV))

• น,าเข�า Video• คลิ�กเลิ�อก Video จัาก Library• คลิ�กป�>มีขวา เลิ�อก Properties แลิ�วคลิ�ก

ป�>มี Export • ต้�:งช้� อไฟ้ลิ� เลิ�อกฟ้อรุ�แมีต้เปBน flv


89

PresentationPresentationเลิ�อกเฟ้รุมี 1 แลิ�วใส*ค,าส� ง

Stop()

สรุ�างป�>มีถึอย์กลิ�บุ แลิ�วใส*ค,าส� งon (press ) {

prevFrame();

}

สรุ�างป�>มีเด้�นหน�า แลิ�วใส*ค,าส� งon (press ) {

nextFrame();

}


90

Movie Movie ซ้!อิน ซ้!อิน MovieMovie

• สรุ�าง Movie 1• สรุ�าง Movie 2• สรุ�าง Movie 3

สรุ�าง Movie Main

สรุ�าง Blank MC 3 ช้�:น ก,าหนด้ Instance Name เปBน mc01, mc02,

mc03

ก,าหนด้ต้,าแหน*งการุวางต้ามีต้�องการุ

สรุ�างเลิเย์อรุ� Action ป4อนค,าส� ง

loadMovie(“movie 1.swf",“mc01");




91

โห่ลดีข้!อิม�ลจาก โห่ลดีข้!อิม�ลจาก Text FileText File

message1=ข�อความีท�

1&message2=ข�อความีท� 2

สรุ�าง Text Box แบุบุ Dynamic 2 ช้�:น ก,าหนด้ค*า Var เปBน message1 แลิะ

message2 ต้ามีลิ,าด้�บุ

สรุ�างเลิเย์อรุ�ใหมี* เฟ้รุมี 1 ก,าหนด้ Action เปBน

loadVariablesNum("2flash.txt","");

2flash.txt


92

MC Text MC Text จากข้!อิม�ลจากข้!อิม�ลภาย์นอิกภาย์นอิก

• สรุ�าง Text File ก,าหนด้ต้�วแปรุ แลิะค*าต้�วแปรุ เช้*น– Message= สรุ�าง Movie ด้�วย์ Flash MX

• สรุ�าง Movie File• สรุ�าง Text Box แบุบุ Dynamic ก,าหนด้ค*า Var ให�

ต้รุงก�บุท� รุะบุ�ใน Text File• แปลิงเปBน Symbol แบุบุ Movie Clip• ก,าหนด้ค*า Instance Name• น,า Text MC ท� สรุ�าง แปลิงเปBน Motion ต้ามีต้�องการุ• สรุ�าง Layer ใหมี* ก,าหนด้ Action เปBน

LoadVariable(“text file”,”instance name”)


93

AnimationAnimationPanelPanel PanelPanel PanelPanelAnimationAnimation AnimationAnimation

・・・・・・・・・・・・

Example) approximately material of page 3 - > 16 scenes: 6 minute narration Example) approximately material of page 3 - > 16 scenes: 6 minute narration

AnimationAnimation

SCO Flash TemplateSCO Flash Template


94

Mentoring processMentoring 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