Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integrating media


Published on

Integrating media

Published in: Education
  • Login to see the comments

  • Be the first to like this

Integrating media

  1. 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 5: Integrating Media
  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.  Eg : Gif, PNG 2. Lossy compression  Some information is lost.  An estimation of the original can be recreated.  Eg: JPEG
  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. Inserting Images
  7. 7. 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.
  8. 8. 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.
  9. 9. Images as Links  Images can easily act as hyperlinks  Nest the <img/> element inside an anchor element
  10. 10. Images and CSS
  11. 11. Images and CSS
  12. 12. 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.
  13. 13. 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
  14. 14. Image Replacement Techniques  Often, designers want to replace text with images.  Use fonts that may not be on the user’s machine
  15. 15. Image Replacement Techniques  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. /ImageReplacement/
  16. 16. 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 -Diagrams  Can be transparent
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Preparing Images for the Web  Commonly used image editing applications  Photoshop  Fireworks  GIMP (GNU Image Manipulation Program)
  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  MP3, Vorbis, AAC
  23. 23. Container Formats  Codec vs Container  a container is what holds the grouping of compressed video as defined by the codec.  A container is also referred to as a format. The container takes care of packaging, transport, and presentation. The container is usually represented by a file extension. For example the MPEG4 container is usually represented by a .mp4 file type  Video files consist of multiple data types.  A video stream  One or more audio streams  Other data such as captions and cover picture 1/13/whats-difference-codecs- containers/
  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-      difference-codecs-containers/
  32. 32. Topic 5 – Integrating Media Any Questions?