e-courseware with microsoft producer & hotpotatoes

ee--Courseware Courseware ดวยดวยMicrosoft Producer & Hot PotatoesMicrosoft Producer & Hot Potatoes

บญเลศ อรณพบลยรก.หวหนางานบรหารวชาการ/รก.หวหนางานสนบสนนทางเทคนค

โครงการพฒนาบคลากรไอซทศนยเทคโนโลยอเลกทรอนกสและคอมพวเตอรแหงชาต

boonlert@nectec.or.thhttp://elearning.nectec.or.th

http://www.nectec.or.th/courseware

การประยกตใชงานการประยกตใชงาน

PPT/PPS

HTML

VDO

Capture

Sound

Quiz

ee--Courseware for WebCourseware for Web

• File Name

• Image for Web

• Sound for Web

WindowsXPIE

Windows2000IE

Macintosh

Windows98Netscape

พฒนาเวบดวยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

File nameFile name

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

• ใชเครองหมายเฉพาะ –

• ไมควรมชองวาง

• ไมควรยาวมากเกนไป

• ก าหนดรหสควบคมแตละงานใหเหมาะสม

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

Website Preview

Format PNG / JPEG / GIF PNG

Resolution 72 dpi 72 dpi

Size 300 250 pixel 100 100 pixel

FormatFormat

• รปแบบของไฟลภาพทใชในการจดเกบภาพ

• การเลอกรปแบบทเหมาะสมตอการน าเสนอจะชวยใหภาพมขนาด (File Size) เลกลง โดยคงความคมชดไวในระดบด

• เปนการประหยดพนทของสอบนทกขอมลไดเปนอยางด

7272//300 300 dpidpi

• 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

GIFGIF

• Graphics Interlace File

• จ านวนสและความละเอยดของภาพไมสงมากนก

• ตองการพนแบบโปรงใส

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

• ตองการน าเสนอภาพแบบภาพเคลอนไหว

• สวนขยายคอ .gif

Transparent GIFTransparent GIF

Animation GIFAnimation GIF

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

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

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

JPEGJPEG

• Joint Photographer's Experts Group

• เหมาะสมกบการน าเสนอทงระบบสอมลตมเดย และเวบไซต

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

• สามารถก าหนดคณสมบตการแสดงผลแบบหยาบ แลวคอยๆ ละเอยดเมอเวลาผานไป ทเรยกวาคณสมบต Progressive

• สวนขยายของไฟลรปแบบนคอ .jpg หรอ .jpeg

JPEG File FormatJPEG File Format

JPEG - 19K

Low Quality

JPEG - 60K

Max Quality

PNGPNG

• Portable Network Graphics

• รปแบบลาสดในการน าเสนอภาพผานเครอขายอนเทอรเนต

• สามารถแสดงผลไดในระบบสเตมพกด (True Color)

• ขนาดไฟลเลก

• ควบคมคณภาพไดตามทตองการ

• การก าหนดใหพนภาพเปนพนโปรงใสได (Transparent)

• การแสดงผลแบบหยาบสละเอยด (Interlaced)

• สวนขยายของไฟลรปแบบนคอ .png

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

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

– ภาพทไมตองการความคมชดมากนก สไมมาก

– มลกษณะพนโปรงใส

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

– ภาพทตองการความคมชดสง มสมาก

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

– ภาพทตองการความคมชดสง มสมาก

– พนโปรงใสได

GIF / JPEGGIF / JPEG

GIF or JPEG?GIF or JPEG?

Sound : PCMSound : PCM• .wav

• 8-bit or 16-bit sound data

• Mono Preprocessing

• Sample Rate– 8 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 : MPSound : MP33

• 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 Text 2 2 SoundSound

• Microsoft Narrator

– Start, Program, Accessories, Accessibility, Narrator

• Text2Sound

• สารกา

• IBM HomePage Reader

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

Software PlayerSoftware Player

• RM RealPlayer

• MOV QuickTime

• AVI, WMV, Windows Media Player

WMA, MPEG

เรมตนดวย เรมตนดวย Wizard Wizard จาก จาก PPTPPT

• เตรยมไฟล PPT

• เรยกใชงานโปรแกรม MS Producer

เรมตนดวย เรมตนดวย Wizard Wizard จาก จาก PPTPPT

เรมตนดวย เรมตนดวย Wizard Wizard จาก จาก PPTPPT

เรมตนดวย เรมตนดวย Wizard Wizard จาก จาก PPTPPT

PreviewPreview

Table of ContentsTable of Contents

MediaMedia

เวลาในการแสดงผล เวลาในการแสดงผล (Duration)(Duration)

• การปรบเปลยนชวงเวลาในการแสดงผลแตละสไลด

หรอ •คลกปมขวาของเมาสท Slide •เลอกค าสง Duration•ปรบคาเวลา

บนทกไฟล บนทกไฟล ProjectProject

• เลอกค าสง File, Save

• จะไดไฟลทมสวนขยายเปน .MSProducer

Publish PresentationPublish Presentation

• เลอกค าสง File, Publish Presentation

Publish PresentationPublish Presentation

• โปรแกรมจะสรางไฟล .htm ตามชอไฟลทก าหนด พรอมโฟลเดอรชอเดยวกนทเกบไฟลตางๆ ทเกยวของ

เพมสไลดใหมเพมสไลดใหม

• คลกขวาทสไลดใดๆ แลวเลอกค าสง Edit, Slide

เรมตนสรางงานเรมตนสรางงาน

• สรางโฟลเดอรเฉพาะงาน 1 งานตอ 1 โฟลเดอรทไดรฟ C:

• สราง/คดลอกไฟล PowerPoint มาไวในโฟลเดอร

• สราง/คดลอกไฟลประกอบ เชน VDO, เสยง, รปภาพ, HTML มาไวรวมกนในโฟลเดอรเดยวกน– ไมตองสรางโฟลเดอรยอยเพอแบงหมวดหม

– ตรวจสอบชอไฟลประกอบตางๆ ใหอยในกฎทก าหนดเกยวกบ File Name

เรมตนสรางงานเรมตนสรางงาน

• เรยกใชงาน MS Producer

• บนทก Project ดวยค าสง File, Save Project

– ก าหนดโฟลเดอรเดยวกบโฟลเดอรเกบขอมลทเตรยมไว

– ชอไฟลอยในกฎ

• ภาษาองกฤษ ตวพมพเลก

• ไมมชองวาง

• ใชเครองหมายเฉพาะ –

• จะไดสวนขยายเปน .MSProducer

Font for WebFont for Web

• การเลอกใชฟอนตส าหรบสอบนเวบ

– Tahoma

– MS Sans Serif

– Microsoft Sans Serif

ขอแนะน าการพฒนา ขอแนะน าการพฒนา ee--CoursewareCourseware

• e-Courseware แตละชด/เรอง ควรจบในตวเอง

• แบงเนอหาเปนเนอหายอยๆ

• ความยาวไมเกน 15 นาท

• ใชเทคนคการออกแบบทอยบนพนฐานของเวบไซต ประเพณลอยกระทง

ประวต ประเพณ ท ากระทง กระทงสาย

เชยงใหมตาก ...

งานชนท งานชนท 22

• สรางโฟลเดอรชอ workshop2

• คดลอกไฟลสอน าเสนอ (PPT) ทออกแบบไว มาเกบไวในโฟลเดอร

• บนทก VDO ภาษามอ แลวคดลอกมาไวในโฟลเดอรเดยวกน

• เลอกไฟลรปภาพประกอบหนา Introduction และคดลอกมาไวในโฟลเดอร

• ใช MS Producer น าเขา PPT, VDO และควบคมการน าเสนอเนอหา

Character set 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 Character set คออะไรคออะไร• ตอมาคอมพวเตอรไดแพรหลายไปยงประเทศทไมไดใชแคภาษาองกฤษ ไดมวธการแกไขแบบเฉพาะหนา โดยการเพมความยาวของรหสทเกบจาก 7 ตว ใหเปน 8 ตว กจะสามารถเกบอกษรไดทงหมดเปน 2^8 = 256 ตว

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

• ประเทศไทยกไดใชประโยชนของรหส 128 ตวทเกนมานเชนกน เชน เราเกบรหส ก ไก ไวทหมายเลข 161, เราเกบไมมลาย "ไ" ไวทรหสหมายเลข 228 เปนตน

Character set Character set คออะไรคออะไร• ดงทกลาวมาแลวนน เราจ าเปนตองมตารางทจะแสดงวา หมายเลขอะไร หมายถงตวอกษรอะไร ตารางน กจะแตกตางกนไปในแตละภาษา ซงมอกขระซงตางๆ กน

• ดๆ ไปแลว กยงไมเหนวาจะมปญหาอะไร ตราบใดทในเครองคอมพวเตอรของทาน มใชงาน แค 2 ภาษา เชน ภาษาไทย กบ ภาษาองกฤษ ถาทานไดรบรหสมามคา 228 กสรปไดเลยวาผสงตองการจะสงไมมลาย มา

• แตหากทานตองการจะสงขอมล ไปยงเครองคอมพวเตอรเครองอน หรอเปด Web Site ใหผคนจากทวโลกเขามาด ทไมไดใชภาษาไทย อยดวย ผคนเหลานน จะเขาใจไดอยางไรวา ทานตองการสง ไมมลาย ซงเปนอกขระหนงของภาษาไทย?

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

Character set Character set คออะไรคออะไร

• วธแกปญหานนกงายดาย เพยงแตระบแปะหนาไปวาขอมลของทานนน ขอใหใชตารางส าหรบภาษาไทยในการถอดรหส

• สงทระบแปะหนาไปนน กเปนทเรยกกนวา character set

สงวนลขสทธแบบ GPL โดย ภทระ เกยรตเสว....

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=TIS-620">

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=TIS-620">

ประโยชนประโยชน• Browser ทเปนทนยมใชในปจจบน สามารถจะรบร

character-set ททานตงไว และเลอกแสดงเปนภาษาไทยไดอยางถกตองโดยทไมตองตดตงคาอะไรเพมเตม

• Search engine ทมาคนขอมลในเพจของทาน สามารถจะแยกแยะไดทนทวานคอภาษาไทย ไมมลายในเพจของทานจะมความหมายไมมลาย Search engine จะไมคดวามนเปน a umlaut อยางแนนอน

• ปจจบน ในทกระบบปฏบตการมการใชฟอนตแบบ Unicode (2 byte) กนอยางแพรหลาย ฟอนตแบบ Unicode สามารถเกบรหสอกขระไดถง 2^16 = 65,536 ตว เกบไดเกอบทกภาษาในโลก การใชฟอนต Unicode ในการแสดงผลนน จ าเปนอยางยงท จะตองทราบวา เอกสารนเปนภาษาใด เพอจะ Browser จะไดเลอกสวนภาษานนๆ จาก ฟอนต Unicode (ซงมหลายภาษามาก) ออกมาแสดงผล

TISTIS--620620/Windows/Windows--874874

• ประเทศไทยมมาตรฐานอกขระซงก าหนดโดย ส านกงานมาตรฐานอตสาหกรรม ดงทเรยกกนโดยทวไปวารหส สมอ. แตรหส สมอ. หรอทมชอทางการวา มอก.620 หรอ TIS-620 น เปนมาตรฐานของประเทศไทย ซงเมอน าไปใชบนเครอขายอนเทอรเนต กอาจเกดความเขาใจไมตรงกนได ดงนนจงมความพยายามทจะจดทะเบยน รหส สมอ. ท Internet Assigned Numbers Authority (IANA) ซงเปนผควบคมมาตรฐานของเครอขายอนเทอรเนต และไดด าเนนการจดทะเบยนจนส าเรจ เมอวนท 22 กนยายน 2541

TISTIS--620620/Windows/Windows--874874

• windows-874 เปน character set ทใชภายในระบบปฏบตการทผลตโดยบรษท ไมโครซอฟต เทานน ไมไดเปน character set ทใชในการแลกเปลยนขอมลระหวางเครอง

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

• tis-620 เปน character set ทจดทะเบยนถกตอง เปนทรบรกนทวโลก ทกระบบปฏบตการ (แมแตระบบปฏบตการของไมโครซอฟตเอง)

Font FaceFont Face

• Stand alone

– Tahoma

• Web

– MS Sans Serif, Microsoft Sans Serif, Thonburi