Published on March 7, 2014
Topic 5: Integrating Media Er. Pradip Kharbuja
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.
Bitmap Images Bitmap images consist of pixels – Tiny squares – Each square is a single colour.
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.
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.
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
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
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
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
Preparing Images for the Web ▪ Commonly used image editing applications – Photoshop – Fireworks – GIMP (GNU Image Manipulation Program)
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.
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.
Images as Links ▪ Images can easily act as hyperlinks – Nest the <img/> element inside an anchor element
Images and CSS
Images and CSS
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.
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
Image Replacement Techniques ▪ Often, designers want to replace text with images. – Use fonts that may not be on the user’s machine
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.
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.
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
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
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
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>.
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
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
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.
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
Sourcing Media ▪ This simple attribution identifies – Link back to the original – The creator – The license the work has been released under
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
Q&A: Integrating Social Media and Business Intelligence. We explore the benefits and drawbacks of integrating data from social media with your existing BI ...
Hier sollte eine Beschreibung angezeigt werden, diese Seite lässt dies jedoch nicht zu.
Systematic Planning for ICT Integration in Topic Learning ... Integrating Information and ... State the objective; Select method, media and ...
What Is Integrated Curriculum? ... Defining integrated curriculum has been a topic of ... We noticed that people seemed to approach integrating ...
Browse by Topic; Media ... Join the conversation about integrating universal design in social media. ... "It's in the best interest of social media ...
Integrating to TinyMCE Media (1 post) filipekiss Member Posted 7 years ago # ... Topic Closed. This topic has been closed to new replies. About this Topic.
Integrating social media into the classroom. Recently, BoardBuzz came across an interesting post from Mashable that suggests there is a place for social ...
Topic and Role Discovery in Social Networks Andrew McCallum, Andres Corrada-Emmanuel, Xuerui Wang´ Department of Computer Science University of ...
140 The Evolution (Revolution) of Social Media and Social Networking as a Necessary Topic in the Marketing . Curriculum: A Case for Integrating Social ...
- Forum für Suchmaschinenoptimierung (SEO) & Suchmaschinenmarketing (SEM) & Social Media Optimierung (SMO), Google Adwords und andere Suchmaschinenwerbung ...