Media Integration in Website Design: Formats, Accessibility, Study notes of Web Application Development

Download Media Integration in Website Design: Formats, Accessibility and more Study notes Web Application Development in PDF only on Docsity!

Designing and Developing a

Website

Topic 5:

Integrating Media

Scope and Coverage

This topic will cover:

• Image file types

• Inserting images

• Audio and video file types

• The object tag

• HTML 5 video and audio tags

• Accessibility and media types

• Describe different approaches for integrating video

and audio into web pages

• Explain strategies for addressing accessibility

issues associated with using images, video and

audio in web pages

Learning Outcomes - 2

• Three image file formats are supported by web

browsers.

– GIF (Graphic Interchange Format)

– JPEG (Joint Photographic Experts Group)

– PNG (Portable Network Graphic)

• All three file formats are bitmapped images.

Image File Formats

• Image file formats use compression to reduce the

size of images.

– Lossless compression

• The exact pixels can be recreated.

– Lossy compression

• Some information is lost.

• An estimation of the original can be recreated.

Bitmap Images - 2

• Colour depth refers to the number of possible

colours an image can feature.

– E.g. 8-bit

• A pixel can be one of 28 (256) possible colours.

Bitmap Images - 3

• JPEGs are 24-bit images

– A pixel can be one of over 16 million colours.

– Lossy compression

– Apparent in areas of flat colour.

– Appropriate for images that feature a wide range of

colours

– Photographs

– Cannot be transparent

JPEG

• 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

PNG

• Commonly used image editing applications

– PhotoShop

– Fireworks

– GIMP (GNU Image Manipulation Program)

Preparing Images for the Web - 2

• The 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 - 1

The iris is a

common garden plant. It has distinctive drooping petals and comes in many

colours.

• The width and height attributes allow the browser

to set out the page.

– Should not be used to resize the image.

Inserting Images - 3

• Images can easily act as hyperlinks

– Nest the element inside an anchor element.

Images as Links

• Download speed is one of the most important

factors in website usability.

– Images are a big factor in download speed.

– Does the image add value?

Using Images - 2

• The element can be targeted using CSS.

– 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.

Images and CSS

img{

border:1px solid black;

float:left;

padding:5px;

margin-right:10px;