DDW Topic 5
-
Upload
sarge-chisanga -
Category
Documents
-
view
223 -
download
0
Transcript of 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
NCC Education LimitedV1.0
The object tag
HTML 5 video and audio tags Accessibility and media types
Integrating Media Topic 5 -5.3
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
NCC Education LimitedV1.0
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 5
Integrating Media Topic 5 -5.13
Commonly used image editing applications PhotoShop
Fireworks
GIMP GNU Ima e Mani ulation Pro ram
Preparing Images for the Web - 2
NCC Education LimitedV1.0
Integrating Media Topic 5 -5.14
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.
NCC Education LimitedV1.0
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.
Integrating Media Topic 5 -5.15
< >
Inserting Images - 2
The iris is a
common garden plant. It has distinctive drooping petals and comes in
many colours.
NCC Education LimitedV1.0
. ,
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 6
Integrating Media Topic 5 -5.16
The width and height attributes allow the browserto set out the page.
Should not be used to resize the image.
Inserting Images - 3
NCC Education LimitedV1.0
Integrating Media Topic 5 -5.17
Images as Links
NCC Education LimitedV1.0
Nest the element inside an anchor element.
Integrating Media Topic 5 -5.18
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
NCC Education LimitedV1.0
needed for presentation reasons.
Should add information
A photograph, an illustration, a logo
-
8/11/2019 DDW Topic 5
7/14
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 7
Integrating Media Topic 5 -5.19
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
NCC Education LimitedV1.0
Integrating Media Topic 5 -5.20
Images and CSSimg{
border:1px solid black;
float:left;
padding:5px;margin-right:10px;
}
NCC Education LimitedV1.0
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.
Integrating Media Topic 5 -5.21
CSS Background Imagesbody{
background-image:url('bg.png');
background-repeat:repeat;}
NCC Education LimitedV1.0
,
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 8
Integrating Media Topic 5 -5.22
Image Replacement Techniques - 1
#flowerHeading{
background-image:url('flower_heading.png');
background-repeat:no-repeat;
hei ht :100 x;
Garden Flowers
NCC Education LimitedV1.0
Often, designers want to replace text with images.
Use fonts that may not be on the users machine
text-indent:-9999px;
}
Integrating Media Topic 5 -5.23
There are a number of established techniques for
doing this.
The above example uses the Rundle-Phark
method.
Image Replacement Techniques - 2
NCC Education LimitedV1.0
The text-indent property is used to remove the
HTML text from view.
Screen readers can still read the contents.
Integrating Media Topic 5 -5.24
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
NCC Education LimitedV1.0
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 9
Integrating Media Topic 5 -5.25
Codec Software that compresses and decompresses a
video/audio stream
Commonly used video codecs on the web
Video and Audio Compression
NCC Education LimitedV1.0
H.264, Theora, VP8
Commonly used audio codecs on the web MP3, Vorbis, AAC
Integrating Media Topic 5 -5.26
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
NCC Education LimitedV1.0
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
Integrating Media Topic 5 -5.27
Video container formats used on the web
MPEG Part 14 (MP4), Flash Video, Ogg (OGV),
WebM
Container Formats - 2
NCC Education LimitedV1.0
-
8/11/2019 DDW Topic 5
10/14
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 10
Integrating Media Topic 5 -5.28
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
NCC Education LimitedV1.0
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
.
Integrating Media Topic 5 -5.29
When the link is clicked
Browser downloads the file
Link to a Media File
bird song
NCC Education LimitedV1.0
Opens an application to run the file
This may run as a plug-in inside the browser
window
Integrating Media Topic 5 -5.30
The element s ecifies three thin s:
The Element - 1
Leopard in its natural habitat.
NCC Education LimitedV1.0
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 11
Integrating Media Topic 5 -5.31
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
NCC Education LimitedV1.0
For users that cannot view the video
Integrating Media Topic 5 -5.32
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
Integrating Media Topic 5 -5.33
HTML 5 provides and elements to
The HTML 5 and Elements
NCC Education LimitedV1.0
. 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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 12
Integrating Media Topic 5 -5.34
Different browsers support different video file
formats.
The Element
NCC Education LimitedV1.0
. 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.
Integrating Media Topic 5 -5.35
The Element
NCC Education LimitedV1.0
the element.
Again we need different elements fordifferent browsers.
Integrating Media Topic 5 -5.36
Accessibility and Media
Your browser does not support the video element. Download theleopard video or view the
transcript of the leopard video.
NCC Education LimitedV1.0
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
Topic 5 Integrating Media Designing and Developing a Website
V1.0 Visuals Handout Page 13
Integrating Media Topic 5 -5.37
The issue of file size and download speed is evenmore important.
Slower network speeds
Pa for data transfer
Mobile Devices and Media
NCC Education LimitedV1.0
Images should be small.
Many mobile devices have screens less than 200px
in width.
Integrating Media Topic 5 -5.38
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
NCC Education LimitedV1.0
Public domain images, video and audio
Media licensed for copying and adaptation
Usually require attribution
Wikimedia Commons
Some images on Flickr
Integrating Media Topic 5 -5.39
Sourcing Media - 2
Leopard.ogv
by Earth-Touch.com available under a Creative
i i li li
NCC Education LimitedV1.0
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
Topic 5 Integrating Media Designing and Developing a Website
Integrating Media Topic 5 -5.40
Lawson, B and Sharp, R. (2010). IntroducingHTML5. Pearson.
Niederst, J. 2006 . Web Desi n in a Nutshell: A
References
NCC Education LimitedV1.0
Desktop Quick Reference. O'Reilly Media.
Integrating Media Topic 5 -5.41
Topic 5 Integrating Media
NCC Education LimitedV1.0
Any Questions?