แนวทางการพัฒนา e-Learning

แนวทางพัฒนาแนวทางพัฒนา EE--LearningLearningสําหรับนสิิตสาขาเทคโนโลยีการศึกษาสําหรับนสิิตสาขาเทคโนโลยีการศึกษา

คณะศึกษาศาสตรคณะศึกษาศาสตร มหาวิทยาลัยศิลปากรพระราชวังสนามจันทรมหาวิทยาลัยศิลปากรพระราชวังสนามจันทร

บุญเลิศ อรุณพิบูลย

ศูนยเทคโนโลยีอิเล็กทรอนิกสและคอมพิวเตอรแหงชาติ (NECTEC)

[email protected]://www.boonlert.net

9 สิงหาคม 2550

นิยามนิยาม EE--LearningLearning

Software MoodleLearnSquare

EdugatorBlackboard

Learning Space

Content CoursewareLearning Object

PDFPPT

HTMLFlash

Learning Theory Child-centredConstructivism

Constructionism

Web-based…

นิยามนิยาม EE--LearningLearning

Software MoodleLearnSquare

EdugatorBlackboard

Learning Space

Content CoursewareLearning Object

PDFPPT

HTMLFlash

Learning Theory Child-centredConstructivism

Constructionism

Web-based…

E-Learning

EE--Learning ContentLearning Content

Web Document

HTML/XHTML + CSS

E-Book

PDF, Flash Paper

3D-Flip e-Book: Desktop Author/Flip Album/FlipFlash

E-Presentation

Flash

XML PowerPoint

Streaming Presentation

• Microsoft Producer

• Macromedia Breeze

FlashLearning Movie

Learning Object

Learning Asset

Java Technology

Courseware from AuthoringAuthorware

Director

Quiz/Exam/Simulation/Exercise

SCORM Courseware

Adobe Acrobat StyleAdobe Acrobat Style

Text Document StyleText Document Style

Flash Animation StyleFlash Animation Style

Test/Quiz StyleTest/Quiz Style

สิ่งจาํเปนสําหรับนิสิตสิ่งจาํเปนสําหรับนิสิต

รูจริง

รูกวาง

รูลึก

ประยุกตใชเปน

Artistic Technology

Social

ActivitiesWeb Board, IM,

Chat, Blog, Wiki

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

ประเภท

Reference

Learning

Training

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

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

เพศ/อายุ

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

ตัวอยางแบบสาํรวจเกีย่วกับผูเรียนตัวอยางแบบสาํรวจเกีย่วกับผูเรียน

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

บทเรียนยอย

จบในตวัเอง

มีความยาวไมเกิน 5 นาที

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

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

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

ผิดเปนครู

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

บทเรียนยอย

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

Server & ClientServer & ClientWindowsXP

IE

Windows2000

IE

Macintosh

Windows98

Netscape

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

HTML Editor,

HTML Generator

บน

WindowsServer :

Unix/NT

upload

ปญหาปญหา

การแสดงผลภาษา

การแสดงผล Web Layout

ความเร็วการโหลดวตัถุบนเว็บ

การสืบคน

การละเมิดลิขสิทธิ์

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

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

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

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

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

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

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

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

·

iso-8859-1

Fonts & EncodingFonts & Encoding

Fonts

ตระกูล NEW

Tahoma, MS Sans Serif, Thonburi

<FONT FACE=“Tahoma, MS Sans Serif, Thonburi”>…</FONT>

Encoding

TIS-620

<meta http-equiv=“content-type” content=“text/html; charset=………..”>

TISTIS--620/Windows620/Windows--874874

มาตรฐานอกัขระประเทศไทย

สํานักงานมาตรฐานอตุสาหกรรม

รหัส สมอ. (มอก.620/TIS-620)

จดทะเบียนกับ Internet Assigned Numbers Authority

(IANA: ผูควบคุมมาตรฐานของเครือขายอนิเทอรเนต็) -

22 กันยายน 2541

TISTIS--620/Windows620/Windows--874874

Windows-874 เปน character set ที่ใชภายใน

ระบบปฏบิัติการที่ผลิตโดยบรษิัท ไมโครซอฟต

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

dash ฯลฯ

TIS-620 เปน character Set ที่จดทะเบียนถูกตอง เปนที่

รับรูกันทั่วโลก ทุกระบบปฏิบตัิการ (แมแต

ระบบปฏบิัติการของไมโครซอฟตเอง)

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

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

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

Screen Area ของจอภาพที่กลุมเปาหมายใช

Screen Area ที่เหมาะสมในปจจุบัน คือ 1024 × 768 pixels

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

ความยาวไมเกิน 1000 pixel

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

1024 pixels768 pixels

1000 × 100

120 × 450

350 × 200

Truehits.netTruehits.net

มาตรฐานรูปแบบการนําเสนอภาพมาตรฐานรูปแบบการนําเสนอภาพ

≈ 100 ×100 pixels

≈ 300 ×250 pixels

≈ 300 × 250

pixels

++ 1024 × 768

pixels

++ 1024 × 768

pixels

++ 1840 ×1232 pixels

++ 1840 ×1232 pixels

Size

72 dpi72 dpi72 dpi72 dpi72 dpi++ 350 dpi++ 350 dpiResolution

GIF

JPG

PNG

GIF

JPG

PNG

TIF

JPEGJPEGJPEGTIFFJPEG, TIFFFormat

PreviewWebsiteDatabasePresentationภาพสาํหรบั

Digital Archive

ภาพ

สื่อสิ่งพิมพ

ภาพ

ตนฉบับ

เว็บกราฟกเว็บกราฟก

รูปภาพทีแ่สดงในโหมดปกติ

การแสดงผลภาพแบบ Interlacedการแสดงผลภาพ

แบบ Progressive

Interlaced GIFInterlaced GIF

JPEG Quality & ProgressiveJPEG Quality & Progressive

คา Quality ไมควรต่าํ

หรือสูงเกนิไป

กําหนดรูปแบบการแสดงผล

เปนแบบ Progressive ดวย

สําหรับภาพที่มีขนาดโต

JPEG File FormatJPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

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

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

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

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

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

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

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

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

GIF / JPEGGIF / JPEG

IllustrationIllustration

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

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

สรางแนวคิด ชวยจดจํา

สรางความสัมพันธของวัตถุแตละชิ้น

Audience Audience

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

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

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

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

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

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

กลุมใหญ

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

AudienceAudience

Small Group Interactive Group

Specific Group Large Group

Focus Audience Content Content & Speaker Speaker

Effect Full Full Simple Text/BG Color

Content LifecycleContent Lifecycle

Design/Develop

Assemble

Deploy

Import

Deliver/Track

Report

ตัวอยางการปรับแตงตัวอยางการปรับแตง ##11Design/Develop

Assemble

Deploy

Import

Deliver/Track

Report

Design/Develop


Deploy

Import

Deliver/Track

Report Assemble

Design/Develop

Deploy

Import

Deliver/Track

Report

Assemble


ยุคของสือ่การเรียนการสอนดวยยุคของสือ่การเรียนการสอนดวย

คอมพวิเตอรคอมพวิเตอรCAI

WBI

E-Learning

M-Learning

ยุคของสือ่การเรียนการสอนดวยยุคของสือ่การเรียนการสอนดวย

คอมพวิเตอรคอมพวิเตอร

CAI WBI E-Learning M-Learning

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

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.

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

Streaming TechnologyStreaming Technology

เทคโนโลยีการถายทอดสัญญาณผานเครือขายอินเทอรเน็ต

การสงขอมูลผานเครือขายอินเทอรเน็ตอยางตอเนื่อง คลายการไหลของกระแสน้ํา

การสงขอมูลแบบ Real time

ปองกันการละเมิดลิขสิทธิ์ เพราะขอมูลจะถูกลบทันทีหลังการแสดงผล

สื่อประสมสายธาร

48

PDF FormatPDF Format

Portable Document

Format

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

FlashFlash

Assets

Movie File

Sound

VDO

Application

LO Learning Object

SCO Sharable Content

Object

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

SCO Flash SCO Flash

AnimationAnimationPanelPanel PanelPanel PanelPanelAnimationAnimation AnimationAnimation

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

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

AnimationAnimation

SCO Flash TemplateSCO Flash Template

Web AccessibilityWeb Accessibility

การสนับสนุนการเขาถึง

Accessibility ไมไดเนนเฉพาะผูที่มีความบกพรองตางๆ เทานั้น แตหมายถึงโอกาสในการเขาถงึของทุกคน (All users) ผานมาตรฐาน WAI

http://webxact.watchfire.com/

Alternate TextAlternate Text

ปญหาเกี่ยวกับลขิสิทธิ์ปญหาเกี่ยวกับลขิสิทธิ์

PDF Security

Image Watermark

Copyright, Creative Common

http://www.creativecommon.org

PDF Security DocumentPDF Security Document

Image WatermarkImage Watermark

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

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

แบงไดเปน

Text Embedded Watermark

Image Embedded Watermark

มีประโยชนอยางสูงสําหรับ Digital Library, Digital Archive, e-Commerce, e-Learning

Text Embedded WatermarkText Embedded Watermark

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

สามารถระบุไดจากโปรแกรม

Adobe PhotoShop จากคําสั่ง File, File info,

Copyright & URL

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

Windows

Image Embedded WatermarkImage Embedded Watermark

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

อาจจะเปนภาพโลโกของหนวยงาน, ภาพขอความ

ลิขสิทธิ์

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

Software

Watermark ProcessingWatermark Processing

Encoding

Decoding/Detect

ระบบ Detect สามารถกระทําไดกับภาพที่มีการลง

Watermark และสั่งพิมพบนกระดาษ โดยนําภาพดังกลาว

มาสแกน แลวใช Detecting Watermark Software

ตรวจสอบ

The Watermark Embedding Process The Watermark Embedding Process

The Watermark Detection ProcessThe Watermark Detection Process

ปญหาของปญหาของ ee--LearningLearning

ปญหาการผลิตสือ่การเรียนการสอนอเิลก็ทรอนกิส

การใชรวมกนั การปรับใช การเขาถึง

ปญหาของปญหาของ ee--LearningLearning

ปญหาการผลิตสือ่การเรียนการสอนอเิลก็ทรอนกิส

การใชรวมกนั การปรับใช การเขาถึง

SCORMSCORMมาตรฐานของ e-Learning

SCORMSCORM

กระทรวงกลาโหม (The Department of Defense - DoD)

สหรัฐอเมริกา

ศึกษาปญหาความไมเขากันของระบบ e-Learning และ

เนื้อหาวิชาอิเล็กทรอนิกสหลากแพลตฟอรม

ศึกษาขอกําหนดที่มีอยูเดิม

IMS - EDUCAUSE Institutional Management System project

AICC - Aviation Industry CBT Committee

ADL: Advanced Distributed LearningADL: Advanced Distributed Learning

ความรวมมอืระหวาง DoD กับหนวยงานตางๆ

AICC + IEEE + IMS + ADL = SCORM

ค.ศ. 1997

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)

Organization

5 5

5

Content Package

All the physicalfiles needed for

this package

Metadata

SCOsManifest(XML document)

Including the structure withsequencing behaviors/rules Content

Package

CD-ROM

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<metadata><schema>ADL SCORM</schema><schemaversion>1.2

</schemaversion><lom xmlns=”http://

www.imsglobal.org/imsd_rootv1p2"></metadata>

<manifestidentifier=”IRS_IFS_COURSE”>

<organizationsdefault=”xp_man0_toc1">

8

Package Interchange Format

Content Aggregation ModelContent Aggregation Model

AssetAsset

ทรัพยากรการเรยีนที่เล็กที่สุด

ภาพนิ่ง

ภาพเคลื่อนไหว

เสียง

เอกสารเว็บ

เอกสารอิเล็กทรอนิกสตางๆ

SCO: Sharable Content ObjectSCO: Sharable Content Object

กลุมของ Assets

มีขนาดเหมาะสมสําหรับการใชงานใน LMS

เนนการใชรวมกนัในระหวางการเรยีนที่มีวัตถุประสงคตางๆ กัน

Content AggregationContent Aggregation

แผนที่/โครงสรางของ

เนือ้หา

การกําหนดลําดับในการ

นําเสนอเนือ้หา

Course

Lesson 1

Lesson 2

Part A

Module 1

Glossary

Module 2

Lesson 1

Lesson 2

Assessment

Part B

Meta dataMeta data

Data about data

คําอธิบายทรัพยากรการเรียน

IEEE

IMS

เพื่อใหมีชื่อ/คําอธิบายเดียวกัน

ประโยชน

การขามแพลตฟอรม

การสืบคน

Content PackagingContent Packaging

การรวมทรัพยากรการเรียนรูทัง้หมด พรอมจดั

โครงสรางตามขอกําหนด

ควบคุมดวย LMS

เปนมาตรฐานการแลกเปลี่ยนทรพัยากรการเรียนรู

แหลงเอกสารเพิ่มเติมแหลงเอกสารเพิ่มเติม

http://www.boonlert.net

http://elearning.nectec.or.th

Education

แนวทางการพัฒนา e-Learning