Download - 1106 211 Web Design and Implementation
![Page 1: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/1.jpg)
+
1106 211 Web Design and Implementation
Week 13 : Multimedia on web
![Page 2: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/2.jpg)
+Multimediaสงสำ�คญททำ�ให Computing Technology มประสทธภ�พม�กคอคว�มส�ม�รถในก�รรวมเอ�ขอคว�ม รป เสยง และภ�พเคลอนไหวม�นำ�เสนอในท�งทมก�รสอคว�มหม�ยได
![Page 3: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/3.jpg)
+Web Multimedia Strategiesมลตมเดยสามารถจำาแนกองคประกอบของสอตางๆ ไดเปน 5 ชนด ประกอบดวย ขอความหรอตวอกษร(Text) ภาพนง (Still Image) ภาพเคลอนไหว (Animation) เสยง (Sound) และภาพวดโอ (Video)
การนำาเสนอสอมลตมเดยใหประสบความสำาเรจบนเวบไซตสงสำาคญทตองพจารณาคอการปรบใหเนอหาใหเหมาะสมกบเวบไซต
![Page 4: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/4.jpg)
+Web Multimedia : AudioAudio
เสยง (Audio) เปนการเขยนทใชสำาเนาทเปนภาษาพดสำาหรบอานและบนทกลงในแถบบนทกเสยงหรอเทปคาสเซท โดยอาจ ใหมเสยงประกอบอนๆ ไดตามความตองการ เชน เสยงดนตร หรอเสยงสตวรอง การใชเสยงประกอบ หากผออกแบบเจาะจงทจะใชเสยงใดเปนกรณเฉพาะกควรจะทำาการบนทกเสยงนนแยกตางหาก เสยงทอานบนทกลงในเทปคาสเซทจะถกนำามาแปลงใหเปนสญญาณดจตอล เพอใชกบคอมพวเตอร
![Page 5: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/5.jpg)
+Web Multimedia : AudioAudio
สงทตองพจารณาจะใสไฟลใหญแคไหน คณภาพไฟลเปนอยางไร ยง
ไฟลใหญๆ ละเอยดๆ เสยงกจะด แตวาปญหาคอมนโหลดนาน
จะใหมนโหลดแบบไหน ใชแบบ stream ดไหม คนไดฟง ไดเหนรปไปดวยขณะทกำาลงโหลด แตวาเสยงหรอรปอาจจะกระตกๆ ขาดๆ ตองรอจนกวาโหลดครบถงจะชด
ตองไมลมวาไมใชทกคนจะใช IE บางคนกใช firefox, netscape, opera หรอ avant ดงนนคำาสงทใชตองดใหดวา browser สวนใหญจะรบได
เวลาเราเขยนคำาสงเพลงทเราใสมนเรยกโปรแกรมอะไรมาใชบาง
![Page 6: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/6.jpg)
+Web Multimedia : Audioรปแบบไฟล *.mp3 เกบไฟล audio เปนรปแบบการเกบไฟลททกคนคงรจกกนด ถาบบขนาดไฟลใหลดลงดวยการปรบ bit ใหนอยลงคณภาพกจะดอยลง*.wav หมกใชกบคอมทเปน window ไฟลจะใหญมากเนองจากเปนไฟลทยงไมไดบบใหขนาดเลกลงเลย
![Page 7: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/7.jpg)
+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](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/8.jpg)
+Web Multimedia : AudioDownloadable vs Streaming
Downloadable : โหลดใหเสรจแลวคอยเปดไฟลทเดยว เสยเวลา เพราะตองรอใหดาวโหลดเสรจกอน
Streming : ฟงไฟลเสยงพรอมกบดาวโหดไปพรอมๆกน
![Page 9: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/9.jpg)
+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](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/10.jpg)
+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](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/11.jpg)
+Web Multimedia : VideoVideo : เปนการนำาภาพเคลอนไหวเขามาผสมกบเสยงทำาใหเกดเปนสอทมทงภาพและ เสยง โดยขอมลภาพเคลอนไหวเกดจากการนำาภาพนง (Frame) หลายๆ ภาพมาแสดงผลทจอภาพทละภาพดวยความเรวสงทำาใหมองเหนเปนภาพเคลอนไหว ได ไฟลสวนใหญอยในรป .FLV .SW
ตวอยาง http://www.bigbuckbunny.org/index.php/download/
![Page 12: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/12.jpg)
+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](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/13.jpg)
+Web Multimedia : VideoMPEG-4 : เปนสวนขยายของ MPEG-1 เพอรบรปแบบมลตมเดยตางๆ เชน 3D หรอการเขารหสทมประสทธภาพมากขน MPEG-4 แบงออกเปนหลายสวนตามหนาทแตละสวน และทาง MPEG จะปลอยใหผผลตซอพทแวรเปนผพฒนาโปรแกรมทใชจรงๆ เอง ไมจำาเปนตองตาม MPEG-4 เตมชดกได พฒนาไดเปนบางสวนกพอ (แบบเดยวกบ MP3 ทหยบแตสวนออดโอไปทำา)
![Page 14: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/14.jpg)
+
![Page 15: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/15.jpg)
+
![Page 16: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/16.jpg)
+Web Multimedia : animationภาพเคลอนไหว หมายถง ภาพกราฟกทมการเคลอนไหวเพอแสดงขนตอนหรอปรากฏ การณตางๆ ทเกดขนอยางตอเนอง เชน การเคลอนทของอะตอมในโมเลกล หรอการเคลอนทของลกสบของเครองยนต เปนตน ทงนเพอสรางสรรคจนตนาการใหเกดแรงจงใจจากผชม การผลตภาพเคลอนไหวจะตองใชโปรแกรมทมคณสมบตเฉพาะทางซงอาจมปญหาเกดขนอยบางเกยวกบขนาดของไฟลทตองใชพนทในการจดเกบมากกวาภาพนงหลายเทานนเองhttp://mcdonalds.com.au
![Page 17: 1106 211 Web Design and Implementation](https://reader031.vdocuments.net/reader031/viewer/2022013004/56815e7e550346895dcd0906/html5/thumbnails/17.jpg)
+Web linkshttp://www.enjoyday.net/webtutorial/html/html_chapter17.html
http://www.learners.in.th/blogs/posts/21509?locale=en <ex flash>
http://www.thaigoodview.com/library/contest2551/tech04/21/standard/f01.html add features to web sitehttp://www.trendyflash.com/template.asp?t=Caterer-flash-template&design_id=272 web multimedia