DDW Topic 5

8/11/2019 DDW Topic 5

1/14

Topic 5 Integrating Media Designing and Developing a Website

V1.0 Visuals Handout Page 1

NCC Education LimitedV1.0

Website

Topic 5:

Integrating Media

Integrating Media Topic 5 -5.2

Scope and Coverage

This topic will cover:

Image file types

Inserting images


The object tag

HTML 5 video and audio tags Accessibility and media types


By the end of this topic, students will be able to:

Select appropriate file formats for using images in

web pages

Insert ima es into HTML documents

Learning Outcomes - 1


Define CSS rules that use images in the design of

web pages

Discuss different audio and video file formats used

on the web

8/11/2019 DDW Topic 5

2/14

8/11/2019 DDW Topic 5

3/14

8/11/2019 DDW Topic 5

4/14

8/11/2019 DDW Topic 5

5/14




Commonly used image editing applications PhotoShop

Fireworks

GIMP GNU Ima e Mani ulation Pro ram

Preparing Images for the Web - 2



The element is a standalone element The src attribute specifies the URL of the image file.

Inserting Images - 1

The iris is a

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

colours.


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.


< >


The iris is a

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

many colours.


. ,

inline element. It must be nested inside a block level element for

the page to be valid.

HTML 5 defines additional and

elements for marking up images.

8/11/2019 DDW Topic 5

6/14




The width and height attributes allow the browserto set out the page.

Should not be used to resize the image.




Images as Links


Nest the element inside an anchor element.


Images inserted into HTML should be part of the

document content.

Not inserted for design purposes

We can include images in the CSS if they are

Using Images - 1


needed for presentation reasons.

Should add information

A photograph, an illustration, a logo

8/11/2019 DDW Topic 5

7/14




Download speed is one of the most importantfactors in website usability.

Images are a big factor in download speed.

Does the ima e add value?

Using Images - 2



Images and CSSimg{

border:1px solid black;

float:left;

padding:5px;margin-right:10px;

}


e < mg > e ement can e targete us ng . 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 Imagesbody{

background-image:url('bg.png');

background-repeat:repeat;}


,

elements.

We can set the position of the image

Whether or not it repeats

Whether or not it should scroll with the contents

8/11/2019 DDW Topic 5

8/14




Image Replacement Techniques - 1

#flowerHeading{

background-image:url('flower_heading.png');

background-repeat:no-repeat;

hei ht :100 x;

Garden Flowers


Often, designers want to replace text with images.

Use fonts that may not be on the users machine

text-indent:-9999px;

}


There are a number of established techniques for

doing this.

The above example uses the Rundle-Phark

method.

Image Replacement Techniques - 2


The text-indent property is used to remove the

HTML text from view.

Screen readers can still read the contents.


In comparison to HTML documents, video and

audio files are very large.

In the early days of the web, use of audio and video

was limited.

Audio and Video


Bandwidth limitations

Video is now an important part of the web.

Video/audio files are compressed to be delivered

over the web.

8/11/2019 DDW Topic 5

9/14




Codec Software that compresses and decompresses a

video/audio stream

Commonly used video codecs on the web

Video and Audio Compression


H.264, Theora, VP8

Commonly used audio codecs on the web MP3, Vorbis, AAC


Video files consist of multiple data types.

A video stream

One or more audio streams

Other data such as captions and cover art

Container Formats - 1


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

Container Formats - 2


8/11/2019 DDW Topic 5

10/14




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

Reliant on user havin correct la er for the file

Playing Media on the Web


As developers we have two options: Link to the media file using an anchor ()

element.

Embed a media player in the web page using the

.


When the link is clicked

Browser downloads the file

Link to a Media File

bird song


Opens an application to run the file

This may run as a plug-in inside the browser

window


The element s ecifies three thin s:

The Element - 1

Leopard in its natural habitat.


The implementation

Specifies the application used to display the file

The data

The URL of the audio/video file

8/11/2019 DDW Topic 5

11/14




Parameters or settings for the embedded file E.g. whether a video should autoplay

The text content is used to specify alternative

content.

The Element - 2


For users that cannot view the video


Leopard in its natural habitat.

There is limited browser support for the

elementTo get media files to play cross browser

Use the non-standard element!

Use the classid attribute to specify the

implementation


HTML 5 provides and elements to

The HTML 5 and Elements


. Both elements can feature attributes for controlling

playback.

autoplay, preload, looping

Not reliant on external media players

Only modern browsers

8/11/2019 DDW Topic 5

12/14




Different browsers support different video file

formats.

The Element


. There is not a single format supported by all browsers.

The element can feature nested

elements. Each source element specifies a different file format.

The browser uses the format they can play.


The Element


the element.

Again we need different elements fordifferent browsers.


Accessibility and Media

Your browser does not support the video element. Download theleopard video or view the

transcript of the leopard video.


Many disabled users cannot use audio and video Provide alternatives for important content

There is no alt attribute for the and

elements.

Ideally, we should provide transcripts.

i

8/11/2019 DDW Topic 5

13/14




The issue of file size and download speed is evenmore important.

Slower network speeds

Pa for data transfer

Mobile Devices and Media


Images should be small.

Many mobile devices have screens less than 200px

in width.


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.

Sourcing Media - 1


Public domain images, video and audio

Media licensed for copying and adaptation

Usually require attribution

Wikimedia Commons

Some images on Flickr


Sourcing Media - 2

Leopard.ogv

by Earth-Touch.com available under a Creative

i i li li


This simple attribution identifies Link back to the original

The creator

The license the work has been released under

i i - li . li

8/11/2019 DDW Topic 5

14/14



Lawson, B and Sharp, R. (2010). IntroducingHTML5. Pearson.

Niederst, J. 2006 . Web Desi n in a Nutshell: A

References


Desktop Quick Reference. O'Reilly Media.


Topic 5 Integrating Media


Any Questions?

DDW Topic 5

Documents

Transcript of DDW Topic 5