1106 211 web design and implementation
Download
1 / 17

1106 211 Web Design and Implementation - PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '1106 211 Web Design and Implementation' - gaura


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
1106 211 web design and implementation

1106 211 Web Design and Implementation

Week 13 : Multimedia on web


Multimedia
Multimedia

  • สิ่งสำคัญที่ทำให้ Computing Technology มีประสิทธิภาพมากคือความสามารถในการรวมเอาข้อความ รูป เสียง และภาพเคลื่อนไหวมานำเสนอในทางที่มีการสื่อความหมายได้


Web multimedia strategies
Web Multimedia Strategies

มัลติมีเดียสามารถจำแนกองค์ประกอบของสื่อต่างๆ ได้เป็น 5 ชนิด ประกอบด้วย ข้อความหรือตัวอักษร(Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และภาพวิดีโอ (Video)

การนำเสนอสื่อมัลติมีเดียให้ประสบความสำเร็จบนเว็บไซต์สิ่งสำคัญที่ต้องพิจารณาคือการปรับให้เนื้อหาให้เหมาะสมกับเว็บไซต์


Web multimedia audio
Web Multimedia : Audio

  • Audio

    • เสียง (Audio) เป็นการเขียนที่ใช้สำเนาที่เป็นภาษาพูดสำหรับอ่านและบันทึกลงในแถบบันทึกเสียงหรือเทปคาสเซ็ท โดยอาจ ให้มีเสียงประกอบอื่นๆ ได้ตามความต้องการ เช่น เสียงดนตรี หรือเสียงสัตว์ร้อง การใช้เสียงประกอบหากผู้ออกแบบเจาะจงที่จะใช้เสียงใดเป็นกรณีเฉพาะก็ควรจะทำการบันทึกเสียงนั้นแยกต่างหาก เสียงที่อ่านบันทึกลงในเทปคาสเซ็ทจะถูกนำมาแปลงให้เป็นสัญญาณดิจิตอล เพื่อใช้กับคอมพิวเตอร์


Web multimedia audio1
Web Multimedia : Audio

  • Audio

    • สิ่งที่ต้องพิจารณา

      • จะใส่ไฟล์ใหญ่แค่ไหน คุณภาพไฟล์เป็นอย่างไร ยิ่งไฟล์ใหญ่ๆ ละเอียดๆ เสียงก็จะดี แต่ว่าปัญหาคือมันโหลดนาน

      • จะให้มันโหลดแบบไหน ใช้แบบ stream ดีไหม คนได้ฟัง ได้เห็นรูปไปด้วยขณะที่กำลังโหลด แต่ว่าเสียงหรือรูปอาจจะกระตุกๆ ขาดๆ ต้องรอจนกว่าโหลดครบถึงจะชัด

      • ต้องไม่ลืมว่าไม่ใช่ทุกคนจะใช้ IE บางคนก็ใช้ firefox, netscape, opera หรือ avant ดังนั้นคำสั่งที่ใช้ต้องดูให้ดีว่า browser ส่วนใหญ่จะรับได้

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


Web multimedia audio2
Web Multimedia : Audio

รูปแบบไฟล์

*.mp3 เก็บไฟล์ audio เป็นรูปแบบการเก็บไฟล์ที่ทุกคนคงรู้จักกันดี ถ้าบีบขนาดไฟล์ให้ลดลงด้วยการปรับ bit ให้น้อยลงคุณภาพก็จะด้อยลง

*.wav หมักใช้กับคอมที่เป็น window ไฟล์จะใหญ่มากเนื่องจากเป็นไฟล์ที่ยังไม่ได้บีบให้ขนาดเล็กลงเลย


Web multimedia audio3
Web Multimedia : Audio

รูปแบบไฟล์

*.mid หรือ *.midi (Musical Instrumental Digital Interface) เป็นการเก็บไฟล์ในระบบดิจิตอล ถ้าเปิดไฟล์ประเภทนี้ด้วยโปรแกรม note editing จะเห็นเป็นตัวโน้ต ขนาดไฟล์มักจะไม่ใหญ่นัก

*.aif (Audio Interchange File Format--AIFF) มีขนาดใหญ่ เสียงดี เอาไว้ใช้กับเครื่อง MacIntosh


Web multimedia audio4
Web Multimedia : Audio

Downloadable vs Streaming

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

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


Web multimedia audio5
Web Multimedia : Audio

วิธีเอา audio ลงเว็บ

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


Web multimedia audio6
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>


Web multimedia video
Web Multimedia : Video

Video :เป็นการนำภาพเคลื่อนไหวเข้ามาผสมกับเสียงทำให้เกิดเป็นสื่อทีมีทั้งภาพและ เสียง โดยข้อมูลภาพเคลื่อนไหวเกิดจากการนำภาพนิ่ง (Frame) หลายๆ ภาพมาแสดงผลที่จอภาพทีละภาพด้วยความเร็วสูงทำให้มองเห็นเป็นภาพเคลื่อนไหว ได้

ไฟล์ส่วนใหญ่อยู่ในรูป .FLV .SW

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


Web multimedia video1
Web Multimedia : Video

*.avi(Audio / Video Interleave) เป็นฟอร์แมตที่พัฒนาโดยบริษัทไมโครซอฟต์ เรียกว่า Video for Windows มีนามสกุลเป็น . avi ปัจจุบันมีโปรแกรมแสดงผลติดตั้งมาพร้อมกับชุด Microsoft Windows คือ Windows Media Player AVI เป็นรูปแบบทั่วไปของข้อมูลภาพและเสียงใน PC ซึ่งมีความยืดหยุ่นด้านสถาปัตยกรรมทำให้มีการนำไปใช้เป็นพื้นฐานในการเข้า รหัสแบบอื่นๆ เช่น DivX, XviD ซึ่งมีคุณภาพเท่าเทียมหรือมากกว่า DVD นามสกุลของไฟล์คือ .AVI


Web multimedia video2
Web Multimedia : Video

MPEG-4 :เป็นส่วนขยายของ MPEG-1 เพื่อรับรูปแบบมัลติมีเดียต่างๆ เช่น 3D หรือการเข้ารหัสที่มีประสิทธิภาพมากขึ้น MPEG-4 แบ่งออกเป็นหลายส่วนตามหน้าที่แต่ละส่วน และทาง MPEG จะปล่อยให้ผู้ผลิตซอพท์แวร์เป็นผู้พัฒนาโปรแกรมที่ใช้จริงๆ เอง ไม่จำเป็นต้องตาม MPEG-4 เต็มชุดก็ได้ พัฒนาได้เป็นบางส่วนก็พอ (แบบเดียวกับ MP3 ที่หยิบแต่ส่วนออดิโอไปทำ)


Web multimedia animation
Web Multimedia : animation

ภาพเคลื่อนไหว หมายถึง ภาพกราฟิกที่มีการเคลื่อนไหวเพื่อแสดงขั้นตอนหรือปรากฏ การณ์ต่างๆ ที่เกิดขึ้นอย่างต่อเนื่อง เช่น การเคลื่อนที่ของอะตอมในโมเลกุล หรือการเคลื่อนที่ของลูกสูบของเครื่องยนต์ เป็นต้น ทั้งนี้เพื่อสร้างสรรค์จินตนาการให้เกิดแรงจูงใจจากผู้ชม การผลิตภาพเคลื่อนไหวจะต้องใช้โปรแกรมที่มีคุณสมบัติเฉพาะทางซึ่งอาจมีปัญหาเกิดขึ้นอยู่บ้างเกี่ยวกับขนาดของไฟล์ที่ต้องใช้พื้นที่ในการจัดเก็บมากกว่าภาพนิ่งหลายเท่านั่นเอง

http://mcdonalds.com.au


Web links
Web links

  • http://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=272web multimedia