Topic 05 : Integrating Media

706 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
706
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Topic 05 : Integrating Media

  1. 1. Topic 5: Integrating Media Er. Pradip Kharbuja
  2. 2. Image File Formats ▪ Three image file formats are supported by web browsers. 1. GIF (Graphics Interchange Format) 2. JPEG (Joint Photographic Experts Group) 3. PNG (Portable Network Graphics) ▪ All three file formats are bitmapped images.
  3. 3. Bitmap Images Bitmap images consist of pixels – Tiny squares – Each square is a single colour.
  4. 4. Bitmap Images ▪ Image file formats use compression algorithms to reduce the size of images. 1. Lossless compression ▪ The exact pixels can be recreated. 2. Lossy compression ▪ Some information is lost. ▪ An estimation of the original can be recreated.
  5. 5. Bitmap Images ▪ Colour depth refers to the number of possible colours an image can feature. – E.g. 8-bit ▪ A pixel can be one of 2^8 (256) possible colours.
  6. 6. GIF ▪ Graphics Interchange Format ▪ GIFs are 8-bit images. ▪ Lossless compression ▪ It is limited to 256 colors ▪ Well suited to images that feature a limited number of colours – Logos -Buttons ▪ Can be transparent -Diagrams
  7. 7. JPEG • Joint Photographic Experts Group • JPEGs are 24-bit images – A pixel can be one of over 16 million colours. ▪ Lossy compression ▪ Appropriate for images that feature a wide range of colours – Photographs ▪ Cannot be transparent
  8. 8. PNG (Portable Network Graphics) ▪ ▪ ▪ ▪ PNGs can be 8-bit, 16-bit or 24-bit Lossless compression PNG is a W3C recommendation. The 8-bit PNG offers some advantages over GIF images.  Variable levels of transparency  Smaller file size than the equivalent GIF ▪ The 24-bit PNG is larger in file size than the equivalent JPEG.  JPEG still a better choice for photographic images
  9. 9. Preparing Images for the Web ▪ Images taken with a digital camera often have very high resolutions. – Too big for the web ▪ Graphics editing applications can be used to perform simple operations. – Cropping – Resizing – Converting between different file types
  10. 10. Preparing Images for the Web ▪ Commonly used image editing applications – Photoshop – Fireworks – GIMP (GNU Image Manipulation Program)
  11. 11. Inserting Images
  12. 12. Inserting Images ▪ The <img/> element is a standalone element – The src attribute specifies the URL of the image file. – The alt attribute specifies alternative text. ▪ Displayed if the image file is corrupted or cannot be found ▪ Accessibility –Screen Readers will read out the alternative text.
  13. 13. Inserting Images ▪ In XHTML Strict 1.0, the <img/> element is an inline element. – So, it must be nested inside a block level element for the page to be valid.
  14. 14. Images as Links ▪ Images can easily act as hyperlinks – Nest the <img/> element inside an anchor element
  15. 15. Images and CSS
  16. 16. Images and CSS
  17. 17. Images and CSS ▪ The <img/> element can be targeted using CSS. – <img/> is an inline element. – By default, text aligns with the bottom of an image. ▪ The float property is used to move an element to the left or right. – Text then wraps around the floated image.
  18. 18. CSS Background Images ▪ Using CSS, we can specify background images, color for elements. – We can set the position of the image – Whether or not it repeats – Whether or not it should scroll with the contents Demo
  19. 19. Image Replacement Techniques ▪ Often, designers want to replace text with images. – Use fonts that may not be on the user’s machine
  20. 20. Image Replacement Techniques http://css-tricks.com/examples /ImageReplacement/ ▪ There are a number of established techniques for replacing image. – The above example uses the Rundle-Phark method. – The text-indent property is used to remove the HTML text from view. ▪ Screen readers can still read the contents.
  21. 21. Audio and Video ▪ A video is a sequence of images (frames). ▪ Each second of video consists of many frames, often as many as 30 frames per second. ▪ Video and audio files are very large. ▪ In the early days of the web, use of audio and video was limited due to bandwidth limitations. ▪ Video is now an important part of the web. ▪ Video/audio files are compressed to be delivered over the web.
  22. 22. Video and Audio Compression ▪ Codec – Software that compresses and decompresses a video/audio stream – The compression is usually lossy. ▪ Commonly used video codecs on the web – H.264, Theora, VP8, Microsoft codecs ▪ Commonly used audio codecs on the web http://en.wikipedia.org/wiki/Video_codec – MP3, Vorbis, AAC http://en.wikipedia.org/wiki/List_of_codecs
  23. 23. Container Formats ▪ Codec vs Container ▪ Video files consist of multiple data types. – A video stream – One or more audio streams – Other data such as captions and cover picture
  24. 24. Container Formats ▪ The video file is simply a container. – Brings together different video and audio streams – Specifies how they are arranged and work together – e.g. The Flash video format is container for H.264 video and either MP3 or AAC audio ▪ Video container formats used on the web – MPEG – Part 14 (MP4), Flash Video, Ogg (OGV), Webm
  25. 25. Playing Media on the Web ▪ Older web browsers have no in-built way to play media files. – Audio and video files are played by media players. – Flash Player, Windows Media Player, iTunes ▪ As developers we have two options: – Link to the media file using an anchor (<a>) element. – Embed a media player in the web page using the <object>.
  26. 26. Link to a Media File ▪ <a href="birdsong.mp3">bird song</a> ▪ When the link is clicked – Browser downloads the file – Opens an application to run the file
  27. 27. The <object> Element ▪ The <object> element specifies three things: – The implementation ▪ Specifies the application used to display the file – The data ▪ The URL of the audio/video file – Parameters or settings for the embedded file ▪ The text content is used to specify alternative content. – For users that cannot view the video
  28. 28. Mobile Devices and Media ▪ The issue of file size and download speed is even more important. – Slower network speeds – Pay for data transfer – Images should be small. ▪ Many mobile devices have small screens.
  29. 29. Sourcing Media ▪ Most text, images, video and audio files found on the web are copyrighted. – Cannot be used without permission ▪ There are also many files that we can use. – Public domain images, video and audio – Media licensed for copying and adaptation ▪ Usually require attribution ▪ Some images on Flickr
  30. 30. Sourcing Media ▪ This simple attribution identifies – Link back to the original – The creator – The license the work has been released under
  31. 31. References ▪ http://css-tricks.com/examples/ImageReplacement/ ▪ http://css-tricks.com/css-image-replacement/ ▪ http://en.wikipedia.org/wiki/Video_codec ▪ http://en.wikipedia.org/wiki/List_of_codecs ▪ http://en.wikipedia.org/wiki/Mp4

×