DDW Topic 5

Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 1

Designingand Developing a
NCC Education Limited V1.0
Designing and Developing a
Website
Topic 5:
Integrating Media
Integrating Media Topic 5 - 5.2
Scope and Coverage
This topic will cover:
Image file types
Inserting images
Audio and video file types
Audio and video file types
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 images into HTML documents
Learning Outcomes - 1
Insert images into HTML documents
Define CSS rules that use images in the design of
web pages
Discuss different audio and video file formats used
on the web
Describe different approaches for integrating video
and audio into web pages
Explain strategies for addressing accessibility
issues associated with using images, video and
Learning Outcomes - 2
audio in web pages
Three image file formats are supported by web
browsers.
GIF (Graphic Interchange Format)
J PEG (J oint Photographic Experts Group)
Image File Formats
( g p p p)
PNG (Portable Network Graphic)
All three file formats are bitmapped images.
Bitmap Images - 1
Bitmap images consist of pixels
Tiny squares
Each square is a single colour.
Image file formats use compression to reduce the
size of images.
Lossless compression
The exact pixels can be recreated.
Bitmap Images - 2
p
Lossy compression
Some information is lost.
An estimation of the original can be recreated.
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
p ( ) p
GIFs are 8-bit images.
Well suited to images that feature a limited number
of colours
GIF
Logos
Buttons
Diagrams
Can be transparent
J PEGs are 24-bit images
A pixel can be one of over 16 million colours.
Lossycompression
Apparent in areas of flat colour.
J PEG
Apparent in areas of flat colour.
Appropriate for images that feature a wide range of
colours
Photographs
Cannot be transparent
PNGs can be 8-bit, 16-bit or 24-bit
PNG is a W3C recommendation.
The 8-bit PNG offers some advantages over GIF
images.
PNG
Variable levels of transparency
Smaller file size than the equivalent GIF
The 24-bit PNG is larger in file size than the
equivalent J PEG.
J PEG still a better choice for photographic
images
Images taken with a digital camera often have very
high resolutions.
Too big for the web
Graphics editing applications can be used to
Preparing Images for the Web - 1
Graphics editing applications can be used to
perform simple operations.
Cropping
Resizing
Converting between different file types
Commonly used image editing applications
PhotoShop
Fireworks
GIMP (GNU Image Manipulation Program)
Preparing Images for the Web - 2
GIMP (GNU Image Manipulation Program)
The <img/>element is a standalone element
The src attribute specifies the URL of the image file.
Inserting Images - 1

<img src=" iris.jpg" width=" 400" height=" 523" alt=" Iris" />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.
In XHTML Strict 1 0 the <img/>element is an

<img src="iris.jpg" width="400" height="523" alt="Iris"/>The iris is a
common garden plant. It has distinctive drooping petals and comes in
many colours.

In XHTML Strict 1.0, the <img/>element is an
inline element.
It must be nested inside a block level element for
the page to be valid.
HTML 5 defines additional <figure>and
<figcaption>elements for marking up images.
The width and height attributes allow the browser
to set out the page.
Should not be used to resize the image.
Images can easily act as hyperlinks
Images as Links
<a href="http://en.wikipedia.org/wiki/Iris_(plant)">
<img src="iris.jpg" width="400" height="523" alt="Iris"/>
</a>
Images can easily act as hyperlinks
Nest the <img/>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
g y
needed for presentation reasons.
Should add information
A photograph, an illustration, a logo
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
g
Th i / l t b t t d i CSS
Images and CSS
img{
border:1px solid black;
float:left;
padding:5px;
margin-right:10px;
}
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.
UsingCSS we can specifybackgroundimages for
CSS Background Images
body{
background-image:url('bg.png');
background-repeat:repeat;
}
Using CSS, we can specify background images for
elements.
We can set the position of the image
Whether or not it repeats
Whether or not it should scroll with the contents
Image Replacement Techniques - 1
#flowerHeading{
background-image:url('flower_heading.png');
background-repeat:no-repeat;
height:100px;
<h1 id="flowerHeading">Garden Flowers</h1>
Often, designers want to replace text with images.
Use fonts that may not be on the users machine
g p ;
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.
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
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 having correct player for the file
Playing Media on the Web
Reliant on user having correct player for the file
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>.
When the link is clicked
Browser downloads the file
Link to a Media File
<a href="birdsong.mp3">bird song</a>
Opens an application to run the file
This may run as a plug-in inside the browser
window
The <object>element specifies three things:
The <object>Element - 1
<object type="video/mp4" data="leopard.mp4" width="544"
height="304">
Leopard in its natural habitat.
</object>
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
E.g. whether a video should autoplay
The text content is used to specify alternative
content.
For users that cannot view the video
<object width="544" height="304"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="leopard.mp4">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="leopard.mp4" width="544" height="304"
autoplay="true" controller="false"
autoplay true controller false
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
Leopard in its natural habitat.
</object>
There is limited browser support for the <object>
element
To get media files to play cross browser
Use the non-standard <embed>element!
Use the classid attribute to specify the
implementation
HTML 5 provides <video>and <audio>elements to
easilyembed media into a web page
The HTML 5 <video>and <audio>
Elements
<video src="leopard.ogv" width="544" height="304"
controls="controls"></video>
easily embed media into a web page.
Both elements can feature attributes for controlling
playback.
autoplay, preload, looping
Not reliant on external media players
Only modern browsers
Different browsers support different video file
formats.
The <video>Element
<video controls="controls" width="544" height="304">
<source src="leopard.mp4" type="video/mp4" />
<source src="leopard.ogv" type="video/ogg" />
</video>
formats.
There is not a single format supported by all browsers.
The <video>element can feature nested <source>
elements.
Each source element specifies a different file format.
The browser uses the format they can play.
The <audio>element works in a very similar way to
The <audio>Element
<audio controls="controls">
<source src="birdsong.mp3" type="audio/mpeg" />
<source src="birdsong.ogg" type="audio/ogg" />
</audio>
The <audio>element works in a very similar way to
the <video>element.
Again we need different <source>elements for
different browsers.
Accessibility and Media
<video controls="controls" width="544" height="304">
<source src="leopard.mp4" type="video/mp4" />
<source src="leopard.ogv" type="video/ogg" />
Your browser does not support the video element. Download the
<a href="leopard.mp4">leopard video</a>or view the <a href="leopard.txt">
transcript of the leopard video.</a>

</video>
Many disabled users cannot use audio and video
Provide alternatives for important content
There is no alt attribute for the <audio>and
<video>elements.
Ideally, we should provide transcripts.
</video>
The issue of file size and download speed is even
more important.
Slower network speeds
Pay for data transfer
Mobile Devices and Media
y
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

<video src="leopard.ogv" width="544" height="304" controls="controls">
</video>

<a href="http://www.archive.org/details/WildlifeVideoMedia">Leopard.ogv</a>
by Earth-Touch.com available under a <a
href="http://www.creativecommons.org/licenses/by-sa/3.0">Creative
Commons Attribution ShareAlike 3 0 license</a>
This simple attribution identifies
Link back to the original
The creator
The license the work has been released under
Commons Attribution-ShareAlike 3.0 license</a>

Lawson, B and Sharp, R. (2010). Introducing
HTML5. Pearson.
Niederst, J . (2006). Web Design in a Nutshell: A
References
, ( ) g
Desktop Quick Reference. O'Reilly Media.
Topic 5 Integrating Media
Any Questions?

DDW Topic 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DDW Topic 5

Uploaded by

Copyright:

Available Formats

Topic 5 Integrating Media Designing and Developing a Website

V1.0 Visuals Handout Page 1

You might also like