1106 211 web design and implementation

17
+ 1106 211 Web Design and Implementation Week 13 : Multimedia on web

Upload: gaura

Post on 14-Feb-2016

32 views

Category:

Documents


0 download

DESCRIPTION

1106 211 Web Design and Implementation. Week 13 : Multimedia on web. Multimedia. สิ่งสำคัญที่ทำให้ Computing Technology มีประสิทธิภาพมากคือความสามารถในการรวมเอาข้อความ รูป เสียง และภาพเคลื่อนไหวมานำเสนอในทางที่มีการสื่อความหมายได้. Web Multimedia Strategies. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 1106 211 Web Design and Implementation

+

1106 211 Web Design and Implementation

Week 13 : Multimedia on web

Page 2: 1106 211 Web Design and Implementation

+Multimediaสงสำ�คญททำ�ให Computing Technology มประสทธภ�พม�กคอคว�มส�ม�รถในก�รรวมเอ�ขอคว�ม รป เสยง และภ�พเคลอนไหวม�นำ�เสนอในท�งทมก�รสอคว�มหม�ยได

Page 3: 1106 211 Web Design and Implementation

+Web Multimedia Strategiesมลตมเดยสามารถจำาแนกองคประกอบของสอตางๆ ไดเปน 5 ชนด ประกอบดวย ขอความหรอตวอกษร(Text) ภาพนง (Still Image) ภาพเคลอนไหว (Animation) เสยง (Sound) และภาพวดโอ (Video)

การนำาเสนอสอมลตมเดยใหประสบความสำาเรจบนเวบไซตสงสำาคญทตองพจารณาคอการปรบใหเนอหาใหเหมาะสมกบเวบไซต

Page 4: 1106 211 Web Design and Implementation

+Web Multimedia : AudioAudio

เสยง (Audio) เปนการเขยนทใชสำาเนาทเปนภาษาพดสำาหรบอานและบนทกลงในแถบบนทกเสยงหรอเทปคาสเซท โดยอาจ ใหมเสยงประกอบอนๆ ไดตามความตองการ เชน เสยงดนตร หรอเสยงสตวรอง การใชเสยงประกอบ หากผออกแบบเจาะจงทจะใชเสยงใดเปนกรณเฉพาะกควรจะทำาการบนทกเสยงนนแยกตางหาก เสยงทอานบนทกลงในเทปคาสเซทจะถกนำามาแปลงใหเปนสญญาณดจตอล เพอใชกบคอมพวเตอร

Page 5: 1106 211 Web Design and Implementation

+Web Multimedia : AudioAudio

สงทตองพจารณาจะใสไฟลใหญแคไหน คณภาพไฟลเปนอยางไร ยง

ไฟลใหญๆ ละเอยดๆ เสยงกจะด แตวาปญหาคอมนโหลดนาน

จะใหมนโหลดแบบไหน ใชแบบ stream ดไหม คนไดฟง ไดเหนรปไปดวยขณะทกำาลงโหลด แตวาเสยงหรอรปอาจจะกระตกๆ ขาดๆ ตองรอจนกวาโหลดครบถงจะชด

ตองไมลมวาไมใชทกคนจะใช IE บางคนกใช firefox, netscape, opera หรอ avant ดงนนคำาสงทใชตองดใหดวา browser สวนใหญจะรบได

เวลาเราเขยนคำาสงเพลงทเราใสมนเรยกโปรแกรมอะไรมาใชบาง

Page 6: 1106 211 Web Design and Implementation

+Web Multimedia : Audioรปแบบไฟล *.mp3 เกบไฟล audio เปนรปแบบการเกบไฟลททกคนคงรจกกนด ถาบบขนาดไฟลใหลดลงดวยการปรบ bit ใหนอยลงคณภาพกจะดอยลง*.wav หมกใชกบคอมทเปน window ไฟลจะใหญมากเนองจากเปนไฟลทยงไมไดบบใหขนาดเลกลงเลย

Page 7: 1106 211 Web Design and Implementation

+Web Multimedia : Audioรปแบบไฟล *.mid หรอ *.midi (Musical Instrumental Digital Interface) เปนการเกบไฟลในระบบดจตอล ถาเปดไฟลประเภทนดวยโปรแกรม note editing จะเหนเปนตวโนต ขนาดไฟลมกจะไมใหญนก *.aif (Audio Interchange File Format--AIFF) มขนาดใหญ เสยงด เอาไวใชกบเครอง MacIntosh

Page 8: 1106 211 Web Design and Implementation

+Web Multimedia : AudioDownloadable vs Streaming

Downloadable : โหลดใหเสรจแลวคอยเปดไฟลทเดยว เสยเวลา เพราะตองรอใหดาวโหลดเสรจกอน

Streming : ฟงไฟลเสยงพรอมกบดาวโหดไปพรอมๆกน

Page 9: 1106 211 Web Design and Implementation

+Web Multimedia : Audioวธเอา audio ลงเวบ

<EMBED ALIGN="CENTER" SRC=".....url ของเพลงนน.... " HEIGHT="60" WIDTH="280" AUTOSTART="FALSE" VOLUME="50%" MASTERSOUND></EMBED>

Page 10: 1106 211 Web Design and Implementation

+Web Multimedia : Audioวธเอา audio ลงเวบ

<!DOCTYPE html><html><body>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>

</body></html>

Page 11: 1106 211 Web Design and Implementation

+Web Multimedia : VideoVideo : เปนการนำาภาพเคลอนไหวเขามาผสมกบเสยงทำาใหเกดเปนสอทมทงภาพและ เสยง โดยขอมลภาพเคลอนไหวเกดจากการนำาภาพนง (Frame) หลายๆ ภาพมาแสดงผลทจอภาพทละภาพดวยความเรวสงทำาใหมองเหนเปนภาพเคลอนไหว ได ไฟลสวนใหญอยในรป .FLV .SW

ตวอยาง http://www.bigbuckbunny.org/index.php/download/

Page 12: 1106 211 Web Design and Implementation

+Web Multimedia : Video*.avi (Audio / Video Interleave) เปนฟอรแมตทพฒนาโดยบรษทไมโครซอฟต เรยกวา Video for Windows มนามสกลเปน . avi ปจจบนมโปรแกรมแสดงผลตดตงมาพรอมกบชด Microsoft Windows คอ Windows Media Player AVI เปนรปแบบทวไปของขอมลภาพและเสยงใน PC ซงมความยดหยนดานสถาปตยกรรมทำาใหมการนำาไปใชเปนพนฐานในการเขา รหสแบบอนๆ เชน DivX, XviD ซงมคณภาพเทาเทยมหรอมากกวา DVD นามสกลของไฟลคอ .AVI

Page 13: 1106 211 Web Design and Implementation

+Web Multimedia : VideoMPEG-4 : เปนสวนขยายของ MPEG-1 เพอรบรปแบบมลตมเดยตางๆ เชน 3D หรอการเขารหสทมประสทธภาพมากขน MPEG-4 แบงออกเปนหลายสวนตามหนาทแตละสวน และทาง MPEG จะปลอยใหผผลตซอพทแวรเปนผพฒนาโปรแกรมทใชจรงๆ เอง ไมจำาเปนตองตาม MPEG-4 เตมชดกได พฒนาไดเปนบางสวนกพอ (แบบเดยวกบ MP3 ทหยบแตสวนออดโอไปทำา)

Page 14: 1106 211 Web Design and Implementation

+

Page 15: 1106 211 Web Design and Implementation

+

Page 16: 1106 211 Web Design and Implementation

+Web Multimedia : animationภาพเคลอนไหว หมายถง ภาพกราฟกทมการเคลอนไหวเพอแสดงขนตอนหรอปรากฏ การณตางๆ ทเกดขนอยางตอเนอง เชน การเคลอนทของอะตอมในโมเลกล หรอการเคลอนทของลกสบของเครองยนต เปนตน ทงนเพอสรางสรรคจนตนาการใหเกดแรงจงใจจากผชม การผลตภาพเคลอนไหวจะตองใชโปรแกรมทมคณสมบตเฉพาะทางซงอาจมปญหาเกดขนอยบางเกยวกบขนาดของไฟลทตองใชพนทในการจดเกบมากกวาภาพนงหลายเทานนเองhttp://mcdonalds.com.au