Advanced digital media concepts

DT2.42: Advanced Digital Media Concepts 1
Learner’s Guide 2a © ATC New Zealand Ltd
TECHNOLOGY
DIGITAL TECHNOLOGIES
Digital Technologies 2.42
Learner’s Guide
DT2.42 ADVANCED DIGITAL MEDIA CONCEPTS
Learning resource for:
Achievement Standard 91369 – Version 2
Demonstrate understanding of advanced concepts of digital media.
Level 2, Credits 4

This guide gives you the opportunity to investigate concepts of digital media. You are
introduced to a range of advanced concepts related to websites, videos, motion graphics
and other audio-visual media.
What you should already know
As this guide focuses on advanced concepts in digital media, it is expected that you will
already have a good basic understanding of digital media concepts. At the beginning of each
chapter you will be given a more detailed of list of what you should already know and
understand. If you are not familiar with any of topics listed, or if you need a refresher, make
sure you talk to your teacher about ways to get additional information before you start
learning about the advanced concepts.
Terminology
Key terms that you need to be familiar with are
given in glossary boxes at relevant places in the
text. These boxes look like the one on the right.
Learning purpose and outcome
The aim is to develop comprehensive understanding of advanced concepts of digital media.
We will look at the following.
 The legal, ethical and moral considerations related to digital media outcomes and the
potential implications of these outcomes within the wider community.
 Data integrity and testing procedures applied when developing digital media outcomes,
and their importance.
 The standards and conventions adhered to when developing digital media outcomes, and
the positive and negative implications of adhering to these standards and conventions.
 The advanced tools and techniques used to create digital media outcomes such as
websites, motion graphics, and video.
 Asset and file management procedures applied in the development of digital media
outcomes, and their importance.
 How the application of advanced tools and techniques, as well as standards and
conventions, impact on the quality of digital media outcomes.
 The relationship between standards and conventions, and the legal, ethical and moral
considerations related to digital media outcomes.
About this Guide
Terminology
Terminology refers to specialised words
relating to a particular subject.

Table of Contents
About this Guide............................................................................................ 2
Table of Contents........................................................................................... 3
NZQA Information ......................................................................................... 5
Introduction................................................................................................... 7
1. DMO Considerations ................................................................................. 9
Legal, ethical and moral considerations ................................................................................9
Digital ownership ...............................................................................................................9
Legal, ethical and moral responsibilities..........................................................................10
Social implications of your DMO......................................................................................12
Intellectual property ........................................................................................................12
Privacy..............................................................................................................................15
Data integrity and testing procedures.................................................................................18
Quality checking the DMO...............................................................................................20
2. Websites.................................................................................................. 21
Reviewing the basics............................................................................................................21
What is a ‘quality’ website?.................................................................................................22
The ‘look’..........................................................................................................................22
Web standards and conventions .........................................................................................23
Web standards organizations ..........................................................................................23
Constantly evolving standards.........................................................................................23
What are the key web standards?...................................................................................24
Separating content, presentation and behaviour ...........................................................27
Why are web standards important?....................................................................................27
Relationship between web standards and legal and ethical considerations ......................31
Advantages and disadvantages of adhering to standards...................................................32
Data integrity and testing ....................................................................................................34
Repair tools......................................................................................................................34
Automatic testing tools....................................................................................................35
Other types of data integrity and testing procedures.....................................................35
How is this testing applied?.............................................................................................36
Advanced tools and techniques in website creation...........................................................37

Semantic markup (HTML) and style sheets (CSS) ................................................................37
HTML to define the content (structure) ..........................................................................37
Advanced HTML tools and techniques ................................................................................41
Document structure.........................................................................................................41
Integrating digital media..................................................................................................42
Advanced CSS tools and techniques....................................................................................43
Screen layouts..................................................................................................................44
Font face (@font-face rule) ......................................................................................45
Visual style effects ...........................................................................................................45
File and asset management procedures..............................................................................46
Stay up to date with the latest developments ....................................................................48
3. Motion Graphics & Video........................................................................ 49
Legal, Ethical and Moral Considerations..............................................................................50
Legal considerations ........................................................................................................50
Ethical and moral considerations.....................................................................................52
Standards and Conventions.................................................................................................53
Standards .........................................................................................................................53
Implications of adhering to standards.............................................................................55
Conventions .....................................................................................................................55
Advanced Tools and Techniques..........................................................................................61
Workflow..............................................................................................................................61
Planning............................................................................................................................61
Importing, capturing and digitising......................................................................................65
Importing .........................................................................................................................65
Capturing..........................................................................................................................65
Digitising...........................................................................................................................65
Editing sequences ................................................................................................................66
Layering/compositing ......................................................................................................66
Multiple timelines............................................................................................................67
Transitions and effects.....................................................................................................67
Titles.................................................................................................................................71
Looping.............................................................................................................................72
Previewing............................................................................................................................73
Rendering and Exporting .....................................................................................................74

NZQA Information
Achievement Standard 91369 (Digital Technologies 2.42)
Demonstrate understanding of advanced concepts of digital media.
Level 2 Credits 4 Assessment: Internal
This achievement standard requires demonstrating understanding of advanced concepts of
digital media.
Achievement Criteria
Achievement Achievement with Merit Achievement with Excellence
Demonstrate understanding of
advanced concepts of digital
media.
Demonstrate in-depth
understanding of advanced
concepts of digital media.
Demonstrate comprehensive
understanding of advanced
concepts of digital media.
Explanatory Notes
1 This achievement standard is derived from Level 7 of the Technology learning area in The New Zealand
Curriculum, Learning Media, Ministry of Education, 2007; and is related to the material in the Teaching
and Learning Guide for Technology, Ministry of Education at http://seniorsecondary.tki.org.nz.
Further information can be found at http://www.technology.tki.org.nz/.
Appropriate reference information is available in Safety and Technology Education: A Guidance Manual
for New Zealand Schools, Ministry of Education at http://technology.tki.org.nz/Curriculum-
support/Safety-and-Technology-Education, and the Health and Safety in Employment Act 1992.
2 Demonstrate understanding of advanced concepts of digital media involves:
 explaining how advanced tools and techniques have been used to create, edit and integrate digital media
outcomes
 explaining the standards and conventions used to produce digital media outcomes
 explaining how asset management and file management are applied in the development of digital media
outcomes
 explaining legal, ethical and moral considerations in relation to the requirements of digital media
outcomes in the wider community
 explaining the data integrity and testing procedures used to ensure the outcome meets the specifications
 explaining how data integrity and testing procedures are applied when developing digital media
outcomes.
Demonstrate in-depth understanding of advanced concepts of digital media involves:
 discussing why advanced tools and techniques have been used to create, edit, and integrate digital
media, and how their use has enhanced the outcome
 discussing the positive and negative implications of adhering to digital media standards and
conventions when developing digital media outcomes
 discussing the importance of effective and appropriate asset management and file management in the
development of digital media outcomes
 discussing the importance of appropriate data integrity and testing procedures in the development of
digital media outcomes.

Demonstrate comprehensive understanding of advanced concepts of digital media involves:
 evaluating how the application of advanced tools, techniques, standards and conventions affect the
quality of digital media outcomes
 discussing the relationship between standards and conventions, and legal, ethical and moral
considerations in relation to the requirements of digital media outcomes.
3 Advanced tools and techniques may include but are not limited to:
 web design: writing and editing code using HTML and CSS, HTML to semantically structure content (eg
navigation, header, footer, external CSS for screen layout) and to style distinct elements (eg font face,
rotating elements, drop shadows, rounded corners, page layouts, validating)
 image manipulation (eg gradient fills, drop shadows, composition layer masks, converting colour
modes, correcting image distortion and noise, pixel selections, drawing, web graphics, functional
modeling and refining designs, wireframing, slicing and exporting for conceptual views)
 motion graphics (eg workflow, capturing and digitising, editing sequences, effects, transitions and
titling, multiple timelines, looping video, exporting, and simple interactive controls [stop, play])
 print media (eg linked and flowing data, threading, typography, indexing, drawing, and document
design using master pages colour management).
4 A digital media outcome may include but is not limited to: static images, websites, print design, motion
graphics, 3D modelling, and video and audio productions.
5 Standards and conventions refer to the technical specifications, guidelines and terminology
appropriate to a media type.
6 Design elements may include but are not limited to: colour, line, shape, texture, clarity, scale, contrast,
space, and proximity.
7 Asset management refers to the effective use of elements in the final outcome. Assets may include
but are not limited to: compressed sound files, flattened images and compressed video.
8 File management may include but is not limited to effective application of: naming conventions, folder
structures, and grouping of similar elements.
9 Legal, ethical and moral responsibilities refer to the social implications of the outcome within the wider
community: licensing, creative commons, copyright, attribution, digital ownership, privacy, access to
information, method of publication, and implication of the longevity of digital content on the internet.
10 Conditions of Assessment related to this achievement standard can be found at
http://ncea.tki.org.nz/Resources-for-aligned-standards/Technology/Level-2-Technology.

Introduction
The digital media industry is exciting, dynamic, and rapidly changing. Hardware and
software used to create and edit digital media is evolving at a dizzying rate. Things
believed impossible only a few months ago are now being achieved by industry leaders
such as Weta Digital1
and Apple Inc2
.
For anyone wanting to become part of the industry one day, or even just wanting to engage
in a meaningful way with digital media, an understanding of the key concepts is essential. So
that we are not just mindless users and consumers of digital media, we need to know “what
is going on under the hood”. In other words, it is important to know what goes into creating
a digital media outcome (DMO) and the considerations which the producers of these
outcomes need to keep in mind. That is the aim of this guide – to develop your awareness
and understanding of advanced concepts of digital media.
However, because things change so rapidly, what is written here today may be superseded
tomorrow. It is important that you play your part to stay up-to-date on the latest
developments.
In this regard the internet has the potential to be your best ‘information-friend’. The
internet contains the most up-to-date and relevant information about digital media. In most
cases, software developers no longer provide user’s manuals for their software in hard copy.
Instead, these resources are now found online.
However, if not used efficiently, the internet could be your worst enemy, rather than your
best source of information.
 There is SO much information available on the internet that it can be difficult to find
what you are looking for in amongst all the irrelevant/useless information.
 Not all information on the internet is quality information. The internet is open, meaning
that anyone can put (just about) anything they like on the internet. This means that in
some cases people who don’t really know the field well, or who are not up-to-date with
the most recent developments may post incorrect or out-dated information.
1
Weta Digital is a New Zealand-based digital visual effects company. Find out more at: http://www.wetafx.co.nz. Logo shown is ©
and/or ™ to Weta Digital.
2
Apple Inc is a technology company, probably best known for their so-called ‘post-PC devices’ such as the iPad, iPhone and other
i-devices. Find out more at: http://www.apple.com/. Logo shown is © and/or ™ to Apple Inc.

 There is always the danger of malicious content (viruses, etc). NEVER download
anything unless you trust the source, and make sure you have a robust virus protection
programme running.
To make sure you have the most up-to-date and accurate information, a good place to start
is to access the online user’s manual/help documentation provided for different digital
media outcomes. From there you will find further links to other sites which could prove
helpful. This way, you will soon learn which sites can be trusted to have relevant, up-to-date
and accurate information.
Using the correct terminology in your internet search will also help to ensure that the search
results are as relevant as possible.
In this guide we will introduce you to the key terminology, concepts, and issues that need to
be understood. You can use this as your starting point for further investigation and to stay
informed about this constantly changing field.
We begin by looking at some key considerations which apply to all DMO types:
 Legal, ethical and moral considerations.
 Data integrity and testing procedures.

1. DMO Considerations
In this chapter we look at the following issues which apply to all DMO types – whether it is a
website, movie, motion graphic or print media.
 Legal, ethical and moral considerations related to the requirements of DMOs in the
wider community.
 Data integrity and testing procedures applied when developing digital media outcomes,
and their importance.
Legal, ethical and moral considerations
By the time we reach our teens, we have already become stakeholders in many different
forms of digital media. For example, unlike our parents and grandparents, our first photo
was probably taken before we were even born (ie an ultra-sound scan). These pictures are
created digitally, sent via email to the family doctor, stored on disc, and sometimes, stored
on databases. Photos of us are created and stored digitally on school records, student
identity cards (eg Polytech or University), identity cards for work, for drivers’ licences, and
so on.
We also create our own media, and use other people’s digital media. We might use this for
school projects, or for personal purposes; and even in our paid or voluntary work. And let’s
not forget all the photos and clips of ourselves, our friends, and family that many of us
upload to social networking sites!
Digital ownership
The popularity of cloud computing dissolves the traditional concepts and activities
associated with owning certain types of information (eg books, magazines). It has also raised
concerns amongst privacy advocates that the media (and information) held there may be
more open to misuse by host organisations, as well as security breaches from hackers. This
could have serious implications in terms of privacy rights for individuals, organisations, and
whole nations if governments decide to utilise cloud computing.
Who ‘owns’ this digital media? How long can these owners hold it for? What are our rights
in terms of viewing, challenging/amending, or even retrieving this information? These
questions and issues centre around two key concepts.
 Intellectual property
 Privacy
Let’s find out what you already know about intellectual property and privacy.

Review
Review
1. What are intellectual property rights? How are these rights protected by law in New
Zealand? (Give examples as part of your explanation – for example: “Films are protected
by copyright”).
2. What are privacy rights? How are these rights protected by law in New Zealand? (Give
examples as part of your explanation.)
As you know, both law and ethics play an important role in intellectual property and privacy
issues.
Legal, ethical and moral responsibilities
Later in this section, we will look in detail at some of the laws and ethical guidelines that
apply to DMOs, as well as the broader social implications. First, let’s find out what you may
know already about the legal, ethical and moral responsibilities related to the creation and
use of a DMO.
Give a brief definition of each of the following responsibilities, and give examples of what
you think could be done to meet these responsibilities. To support your explanations, think
about DMOs you have looked at/used.

 Legal responsibilities
 Moral and ethical responsibilities
Legal responsibilities
Moral and ethical responsibilities

We have looked at legal, ethical and moral responsibilities in terms of the immediate
environment of the DMO (eg target audience, copyright holders). This topic also needs to be
seen in the context of social implications.
Social implications of your DMO
As you will know, digital technology allows individuals and organisations to receive
information from almost anywhere in the world, and to distribute it to a potential audience
of billions. We as individuals are a part of a wider community – local, national, and global.
Each of us has to choice, and the ability, to contribute to the well-being of this community.
When we create digital media, we need to consider its potential effects on the wider
community – and not just on us personally, or our close friends and family. Social
implications involve the effect of DMOs on the wider community. This could include the
local community, (eg where you live, and also people from your school and their families),
as well as the online/internet community.
Intellectual property
The laws surrounding the creation, use and
storage of digital media are often made long
after the technology has become ubiquitous (ie
everyone, everywhere is using it). Often, it is
largely up to developers and users of digital
media outcomes to rely on their own moral and
ethical ‘compass’.
Digital media outcomes such as static images, websites, print designs, motion graphics, 3D
modelling, and video and audio productions are covered by intellectual property laws.
Intellectual property also refers to ideas. If a person creates a cartoon and someone else
‘steals’ the concept, and pretends it is their own, they are infringing on the cartoon creator’s
intellectual property rights.
In New Zealand, intellectual property can be protected under the law through copyright,
trademark, or patents. Some forms of protection involve a formal registration process, for
example, when a company registers their logo as a trademark. However, certain types of
intellectual property, such as copyright, are automatically protected in New Zealand.
The purpose of intellectual property laws is, firstly, to protect the commercial interests and
reputation of whomever has created the intellectual property. These laws uphold the right
of the creator of the intellectual property to control how it is to be used, and to make
money from it. This means that no one else can alter the intellectual property, or use it in
any way other than that specified by the person (or group/organisation) that has created it.
However, the creator of intellectual property can also give up their rights to it. This could be
done by selling or even giving away these rights (eg to a person or organisation). The person
buying/receiving the intellectual property then gains partial or total rights to it under
intellectual property law. (The exact terms of ownership will depend on the conditions
agreed to by the creator and new owner of the work.) The creator of a work can also choose
to put their intellectual rights to that work into the public domain. This allows anyone to
Intellectual Property
Intellectual property is the right of the
creator of a work to own the rights to
that work.

use the work, without having to pay for it, for any lawful purpose (for more details, see
Creative Commons - Ethics-based approach, p. 15).
Let’s investigate
There are a number of symbols and/or titles that show that intellectual property is
protected by law. Find as many symbols as you can which indicate that intellectual property
is protected. Draw them in the space below. Give the name and a brief definition of what
each one means, and how it is commonly applied.
Copyright
It is important, both legally, morally and ethically to ensure that you follow copyright laws
when creating a DIO. The following is a list of key issues to keep in mind.
 In New Zealand any idea that has been written down, or recorded in some other way
(eg digital form) is protected automatically by copyright law.
 The creator of the ‘work’ (ie the idea that has been written down, drawn, recorded in
digital form, etc) holds the copyright to it – unless they are creating it for another
person or organisation.
 Some or all of an author’s copyrights can be assigned (transferred) to another party (ie
individual or organisation). This means that this second party now holds some or all of
the rights under copyright law to use that work. This practice is called ‘Licensing’, and
we will explore this in more detail later in this section.
There are some exceptions to copyright law. Whether or not these exceptions apply to the
content used in a digital media outcome will depend on a number of factors. Let’s explore
issues relating to copyright law now.

Let’s investigate
For this activity, you will need to access copies of the following Copyright Council of New
Zealand Information Sheets.
 Copyright (Infringing File Sharing) Amendment Act:
http://www.copyright.org.nz/viewInfosheet.php?sheet=525
 Copyright for film and television producers:
http://www.copyright.org.nz/viewInfosheet.php?sheet=335
Answer the questions that follow.
1. Would it be considered a copyright infringement to upload an advertisement or teaser
trailer for a film made by someone else onto YouTube or another video sharing
website?
2. What does “incidental copying” mean in relation to film making? When something that
someone has created is incidentally copied in a film, does the film maker need to get
permission from the copyright holder of that item?
Licensing
A creator of a work may deliberately give up
some or all of their copyright entitlements, but
only under specific conditions. Depending on
the licensing system involved, they may either
sell these rights or give them away for free. See
also the next section on Creative Commons -
Ethics-based approach. This process of
transferring some or all of the copyright
owner’s rights is called assignment.
For example, ClipArt is an organisation that ‘sells’ a large proportion of its copyrights to
subscribers. Once subscribers pay a fee to ClipArt (ie weekly, monthly, etc), they have full
access to the organisation’s database of images. The subscriber can then use ClipArt’s
Assignment
When a copyright owner transfers some
of all of their rights (as owner of a work)
to another party.

images for various (legal) purposes – such as illustrating educational workbooks like this
Learner’s Guide! (However, ClipArt does have some restrictions: subscribers cannot let
other people alter or re-use these ClipArt images, for example.)
There are many different licensing conditions, in terms of shared copyright ownership,
which organisations can agree to. Usually this involves an exchange of some kind eg money,
shares/interests in the business. When such agreements occur, they are upheld by the law:
both commercial law, and laws relating to intellectual property. In New Zealand, any
licensing disputes are dealt with by The Copyright Tribunal (part of the Ministry of Economic
Development).
Alternatively, voluntary licensing systems such as Creative Commons are based on the
sharing of information and other creative work for free.
Creative Commons - Ethics-based approach
Sometimes the law takes a while to catch up with changes in
technology and how we use digital media. And, even
when it does, the results can be
controversial! One way that organisations
have tried to compensate for this is to
develop an online media sharing culture
based on good-will, which appeals to
people’s sense of fairness and justice. Some online organisations have created their own
alternative copyright systems. These still seek to uphold the basic rights of copyright
owners, but also encourage owners to share these rights under certain conditions. This is a
voluntary licensing system, in which the creator of a work chooses one (or a combination of)
conditions under which they will allow their work to be used by others. Generally, there is
greater freedom to use these works than would otherwise be allowed by law.
By licensing their work under Creative Commons, the creator of the work gives up some or
all of their copyright rights for that work, for free. (For example, putting their work into the
Public Domain, as was discussed earlier in this section, means the work is not subject to
copyright law.) To find out exactly what rights you as the user have been given under this
licensing system, you would need to check out the copyright information under each
specific item. This is because different authors or creators have different preferences for
how their work can be used.
Privacy
The Privacy Act 1993 aims to uphold an individual’s rights in terms of how their personal
information can be used. Personal information includes the individual’s full name, address,
date of birth, contact details, a photo – anything that can specifically identify them. This also
includes sensitive information such as medical records, school reports/records, and financial
information about that person.
The Privacy Act is based on 12 Privacy Principles, and these relate to:
 how and why personal information may be collected
 safe storage of personal information (to prevent misuse of the information)

 individuals’ rights to access and collect information
that is held about them
 restrictions on use and disclosure of private
information
 proper use of ‘unique identifiers’ (eg drivers’ licence
number, bank account numbers) under privacy law.
Creators of DMOs need to be careful about how private information is collected, stored,
used, and discarded. If DMO creators neglect their responsibility to uphold privacy rights,
and/or misuse information entrusted to them, this could negatively affect the individuals
involved – as well as the wider community.
Managing privacy issues
Key areas that need to be addressed when managing privacy issues include:
 access to information
 method of publication
 longevity of digital content on the internet.
Access to information
Who should be allowed to see private information? Only those people who have a
legitimate need to access the information. Also, the information must only be used by these
people for the purpose for which it is intended. For example, a business website may invite
users to register their personal details (eg name, address, etc) online to receive special
deals, newsletters, etc. This information would need to be accessed by people directly
involved in the administration and running of the business (eg staff involved in sales and
customer service, as well as managers). The business would have to make sure the website
itself had adequate security and protection, as well as the database that is linked to it (or
wherever the private information is held).
Here are some things to consider when it comes to who has access to information contained
in a DMO.
 Who will need to use the information and why?
 How long will these people need access to this information for?
 Does the file have password protection? If yes, who should be allowed to know the
password?
 If more than one user, is it necessary for each person to have their own logon (and
within this be given specific access to files that they need to work with only)?
If privacy issues aren’t considered or addressed appropriately, this will erode the trust of
DMO users in the website, organisation, etc. There may also be negative consequences for
these users - from annoying things like spam, to more serious issues such as identity theft.
Disclosure
When information is revealed.

Method of publication
When considering the privacy issues related to a DMO, creators and/or owners will need to
think about how the information it contains will be used and distributed (shared). This is
essentially the way that it will be published. Possible methods of publication could include:
 a printed hard-copy (eg a photograph, flyer, etc)
 a CD, DVD, Blu-Ray® disc or other storage device such as a flash drive
 email
 uploaded to a website.
If the DMO is to be published online, for example, particular care may need to be taken to
consult with key stakeholders about the type of information the DMO will contain. For
printed hard-copies, the potential scope of distribution might be smaller. However, steps
still need to be taken to ensure that only people who need to use the DMO for legitimate
reasons have access to any hard-copies of it. Copies should be kept in a secure location (eg
locked filing cabinet).
Longevity of digital content on the internet
We have explored the issue of digital ownership earlier in this chapter, and what this means
in terms of our ability to control the media that we create and share. Because this media
can be so easily copied and distributed, DMO creators/owners don’t necessarily have full
control over it. This is why it is so important to do as much as possible to ensure that the
DMO itself, as well as the methods used to create it, uphold the privacy rights of
stakeholders.
For example, once media goes online, it is effectively in the public domain – like a billboard
or a poster. The creator of the DMO will need to check more than once that any media that
might personally identify someone is being stored and used in a way that the people
involved are happy with, and that follows privacy law. Secondly, as part of the data testing
procedures, the producer of the DMO will need to make sure that only the media and
information that is intended for the web page appears there!
In the following exercise, we will look at Facebook’s privacy policy, and the implications for
users in terms of longevity of content.
Let’s investigate
Read through Facebook’s “Statement of Rights and Responsibilities”, and answer the
following questions. (Space has been provided on the next page for you to record your
answers, and any brief notes that you take.)
 Who owns the media that you create and upload to Facebook (eg a photo of yourself
and your friends)?
 Explain the rights that Facebook have to use this information.
 When do Facebook’s rights to this information end?

Review
 What steps would you need to take to ensure that ALL of the media that you have
uploaded and shared on Facebook is deleted? Would this be possible?
Data integrity and testing procedures
The aim of these procedures is to help ensure that a DMO meets the specifications for that
outcome. Data integrity and testing is a process, rather than a once-off event. It takes place
throughout the creation of a DMO, as well as on the ‘finished product’.
In this section, we will look at some general guidelines for data integrity and testing
procedures that are relevant to most DMOs. Later, we will explore specific procedures
involved for specific DMO types.
The following key issues need to be addressed when quality checking a DMO (ie carrying out
data integrity and testing procedures).
 Readability
 Accuracy
 Relevance
 Reliability
Give a brief definition of each issue, and give examples of what you think will need to be
done to address these issues. To support your explanations, think about the DMOs you have
looked at/used. (Space has been provided on the next page for your answers.)

Readability
Accuracy
Relevance
Reliability

What do you think?
Quality checking the DMO
What are the procedures used to ensure the DMO meets the specifications? How might
these procedures be applied? The answers to these questions will vary depending on the
type of DMO that is being created. To get you thinking about the types of procedures that
could be used, complete the exercise which follows.
Complete the following table with one brief example of a testing procedure for each the
DMOs listed. The first one has been done as an example.
Think about DMOs you have looked at/used. You may need to do some research as well.
DMO type Testing procedure and how it could be applied
Print design For all copy (text), check spelling/grammar. Use whichever spell
check tool is provided by the software being used to produce the
text. Text should also be proofread in case spell check has missed
anything (eg names, jargon).
Video/audio
production
Static images
Website
As a DMO is created, it is important to keep in mind how it will be used by the person it has
been designed for. For example, if the DMO is a website for primary school children, it will
need to be designed in a way that is quick and simple for them to use. This involves usability
checks such as ensuring that navigation involves as few steps as possible, download times
are short and also that the site is functioning correctly. This will ensure that the children
have a fun experience when using the website, and are less likely to get bored, and browse
to a different site! By keeping the user’s time and effort to a minimum, they are more likely
to engage with the site, visit it repeatedly, and as a result the communication purpose of the
site is more likely to be achieved.

Review
You should already be familiar with basic concepts related to websites.
This includes the software resources, tools and techniques employed in
the creation of websites. You should be familiar with the basics of:
the separation of content, presentation, and behaviour in a web page
HTML and CSS
design elements relevant to websites (colour, line, shape, texture,
clarity, scale, contrast, space, and proximity)
the relationship between design, communication purpose and target
audience
the digital media types integrated into a website (eg images, sound, etc).
2. Websites
Reviewing the basics
You should already be familiar with the basic concepts related to website design and
creation. Let’s briefly review what you should already know.
1. What software is used to create websites?
2. ‘Behaviour’ (interactivity) is one of the three basic elements or building blocks of a
website. A scripting language (like JavaScript) can be used to add interactivity and
functionality to a website.
What are the other two basic building blocks of a website? What is used to define each
of these elements?

3. How do you view the source code of a web page?
What is a ‘quality’ website?
All good website developers aim to produce a high quality outcome. But what exactly is a
‘quality’ website? People don’t always agree on what makes a website ‘good’. Many
websites praised by graphic design professionals for their innovative and exciting ‘look’ are
criticised by others for whom accessibility and usability of a website is most important. On
the other hand, websites seen as exemplary in terms of accessibility are often panned by
graphic designers as boring and unappealing.
Ideally, a quality website will manage to satisfy all these different aspects of design – both
the ‘look’ and the ‘function’.
The ‘look’
You should already be familiar with the key design elements and how these affect the
quality of a website. You will already be aware of the fact that the ‘look’ and ‘function’ of a
website are also closely linked: For example, effective use of contrasting colours and/or
typography (font face, size, etc) can help users navigate a website effectively.
These design principles are generally accepted to form the basis of good graphic design for a
site. However, designers are always looking for new and innovative ways to grab target
users’ attention, to ‘do something different’ and create a fresh look for the sites they create.
What is considered ‘cutting-edge’ today may be considered ‘old- fashioned’ tomorrow. It is
important for designers to stay up to date with the latest trends and conventions in design,
and to push the boundaries themselves in terms of what can and cannot be done.
Not surprisingly, the internet is the best source of information in terms of trends in website
design. Below are a few examples of websites that graphic designers use to stay up to date
with the latest in web design.
Resources for design inspiration/trends
 http://www.noupe.com/
 http://abduzeedo.com/
 http://veerle.duoh.com/
 http://www.thebestdesigns.com/
 http://www.unmatchedstyle.com/gallery/page/2/
 http://www.cssawards.net/

Web standards and conventions
Web standards are not rules or requirements related to websites. Instead, they are a set of
technical specifications and standardised best practice guidelines for the design and
creation of websites.
Web standards organizations
A number of organizations develop web standards.
Probably the best known of these is the World
Wide Web Consortium (W3C) which was founded
by Tim Berners-Lee (the inventor of the World
Wide Web). Hundreds of major media and
technology companies, universities, and even the
New Zealand State Services Commission are
members of the W3C.
Figure 1: W3C logo (www.w3c.org)
Amongst others, the W3C issues technical specifications and guidelines for web design and
applications. This involves standards for HTML and CSS, JavaScript and graphics.
Under the Web Accessibility Initiative (WAI), the W3C also provides guidelines and
techniques for making the web more accessible to people with disabilities. These are given
in a document called the Web Content Accessibility Guidelines (WCAG).
Constantly evolving standards
Standards are continually being refined and changed as web technologies advance.
In the case of W3C recommendations, a particular standard goes through a number of
maturity levels before it is published as an official W3C recommendation.
1. Working Draft – The publication of this document (a technical report) indicates to
interested parties that they can review the document.
2. Last Call Working Draft – The publication of this document (a technical report) indicates
that review feedback on the document needs to be made by a particular date.
3. Candidate Recommendation – At this stage, the W3C believes that the technical report
is ready to be implemented.
4. Proposed Recommendation – This is the final step before the technical report is ready
for being published as an official W3C recommendation.
5. Recommendation – The official W3C recommendation.
It is important to note, however, that often web developers start using tools long before the
specifications for those tools have reach official Recommendation status. An example of this is
HTML5. By the middle of 2011, the W3Cs specifications for HTML5 were only in Last Call stage.
However, by that time, many web developers had been using HTML5 tools for quite some time.

http://chrome.angrybirds.com/ http://www.apple.com
https://www.google.co.nz http://twitter.com
Figure 2: Examples of websites using HTML5 before it reached official Recommendation status
What are the key web standards?
There are a number of specifications and guidelines which relate to website design and
creation. We are going to focus on three of these key web standards.
 Using valid code
 Using semantically correct code
 Separating content, presentation, and behaviour
Using valid code
Imagine a world where everyone decided what language rules they would use to speak
English. One person might decide to use start a sentence with a verb:
Went we to the Coromandel last weekend.

Someone else might decide to start the sentence with the object of the sentence, rather
than the subject:
The Coromandel we went last weekend.
This would make communication awfully difficult! Instead we have certain ‘standard’ ways
of using English which help make it possible for English-speakers to understand each other.
People are skilled at understanding slight deviations from the ‘standard’ use of language.
For example, we can understand slang, and other ‘non-standard’ uses of language.
This is not the case with computers. Browsers interpret an HTML document according to a
set of specifications. When a browser interprets a document containing invalid HTML (ie
HTML which does not conform to these specifications), it makes a ‘best guess’ of what was
intended. Unfortunately, different browsers have their own ways of ‘guessing’ what is
meant by incorrect HTML. This means that the same invalid HTML code could be interpreted
differently by different browsers, and the developer will be lucky if the page displays
(renders) as intended.
What is valid code?
Valid code follows the specifications given for that particular type of language. Every page
should start with a Doctype declaration. The Doctype declaration tells the browser what
markup language has been used to create the page, and the browser will interpret the
HTML code according to the rules of that language.
Below are the Doctype declarations for three different markup languages: XHTML 1.0, HTML
4.0.1 and HTML 5.
Markup Language Doctype Declaration
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
HTML 4.0.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 5 <!DOCTYPE html>
Note: HTML 4.0.1 and HTML 5 are different versions of the same markup language – HTML.
However, XHTML 1.0 is a separate markup language.
Page validation
Specifications and guidelines for HTML, XHTML, and even CSS standards are set by the W3C.
The W3C provides a number of different validation tools to check that the code used to
create a web page is valid. This includes tools which check the:
 markup validity of web document in languages such as HTML and XHTML
(http://validator.w3.org/)
 validity of a CSS style sheet (http://jigsaw.w3.org/css-validator/).

A number of browsers make it possible to validate HTML and CSS from within the browser.
Figure 3: The Web Developer Extension in Mozilla Firefox offers a number of validation tools
Figure 4: F12 Developer Tools in
Internet Explorer gives options
to validate the code using the
W3C validation services
Using semantically correct code
When we talk about ‘human’ languages like English, semantics has to do with meaning of
words. In the context of web design Semantic HTML is the use of HTML to reinforce the
meaning of the information in a web page, rather than the presentation or ‘look’ of the page.
For example, think about the use of the typeface italic. Italics can be used to convey a
number of meanings for a piece of text. For example, it could be used to emphasize the text,

The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.
Tim Berners-Lee, W3C Director and
inventor of the World Wide Web
(Source: World Wide Web Consortium (W3C)
www.w3.org/standards/webdesign/accessibility)
to indicate that the text is a quote, or for foreign words (eg déjà vu). So using the tag <i>
(for italic) indicates what the text should look like, but not what the meaning or function is
of that text. For this reason, semantic HTML makes use of meaningful markup instead. For
example, <em> is used to indicate emphasis, and then the CSS stylesheet specifies how
emphasis should be presented (eg as italics, bold, underlined, etc).
This links to the third key web standard: the separation of content, presentation and
behaviour.
Separating content, presentation and behaviour
It is possible to use HTML only to structure and style a web page. For example, tables could
be used for layout. However, the W3C recommendation is that content (structure),
presentation (style) and behaviour (interaction) should, as far as possible, be kept separate.
 A markup language (eg HTML) should be used to define the content (structure) of the page.
 A style sheet language (eg CSS) should be used to define the presentation (style, formatting)
of the page.
 A scripting language (eg JavaScript) should be used to add behaviour (interactivity).
Why are web standards important?
Web standards address a number of key issues. We are going to look at three of these:
accessibility, interoperability, and usability. It is important to note that these are not
separate, distinct considerations; they overlap with, and influence, each other. Accessibility
is a key aspect of usability, as is interoperability.
Accessibility
As pointed out in the quote by Tim
Berners-Lee (on the right), an
important guiding principle for web
standards is the need to ensure that
everyone (even people with
disabilities) are able to access the
information on a website (and on the
web as a whole).
Examples include:
 Blind users - providing text equivalents for images and links so that blind users can use tools
such as text to speech software to access the information on a site.
 Users with motor diseases or limited mobility (eg Parkinson’s, stroke) – providing large
clickable links, enabling the page to be navigated using keyboard only, etc can be useful
for people who have difficulty with fine motor control.

What do you think?
Can you think of other examples of groups of people/types of disabilities that could benefit
from Web accessibility? What could be done to improve accessibility for these people?
Web standards and accessibility
By adhering to web standards, it is
easier to ensure that a website is
accessible to as many people as
possible. All W3C recommendations
have been developed with
accessibility, so adhering to these
recommendations helps to ensure
that a website is accessible to as
many people as possible.
For example, look at the W3C
paraphrased summary of the Web
Content Accessibility Guidelines
(WCAG 2.0), shown on the right.
Figure 5: WCAG 2 at a Glance3
Using semantic HTML for content and CSS for presentation helps to make it much easier to
meet these recommendations. Using separate style sheets (CSS) means that the ‘look’ of the
document can easily be changed, by just making a few changes to the CSS. This means that a
page can easily be made to look different to meet the needs of different users.
3
WCAG 2 at a Glance. http://www.w3.org/WAI/WCAG20/glance/. Accessed 5 March 2012.

Below are some examples of methods that use CSS to make content more accessible to
people with disabilities.
 Increasing the active area on links: People who are mobility impaired or have visual
difficulties can find it difficult to clink on links. Increasing the ‘clickable’ area of the links
can make it easier for them to navigate a website.
 Highlighting active paragraphs: To help people with visual and learning difficulties, or
cognitive impairments keep track of where they are on a page, the active paragraph can
be highlighted in some way (eg hover effect to colour highlight active text, or
underlined paragraphs).
 Changing the text size: Offering different text sizes for a web page means that a user
can choose a text size that is easiest for them to read.
 High contrast: Some people with visual or other disabilities may find it easier to view a site
with high contrast (eg white and yellow text with a black background). See Figure 6 below.
Figure 6: The same web page in regular contrast (left) and high contrast (right)4
Some people with disabilities use software to help them access the information on a web
page. For example, visually impaired people use screen readers to read out the page; people
with mobility impairments voice input software to allow the user to navigate the web pages.
People using assistive technologies such as these applications can find it difficult to navigate
and understand the structure of a page if markup (HTML) is used to define presentation,
rather than a separate style sheet(s).
Later in this chapter we will look at the role of testing in ensuring the accessibility of a
website.
Interoperability/compatibility
Web interoperability refers to the extent to which a web page is able to be correctly
displayed across a range of:
 devices – eg PC, PDA, smartphone
4
Cnib website. http://www.cnib.ca/en/living/. Accessed 6 March 2012

 operating systems - eg Windows, Mac, Linux
 web browsers - eg Internet Explorer, Firefox, Chrome, Safari.
Web standards and interoperability
One of the key incentives for developing web standards was to enhance the interoperability
of web-related products. Adhering to web standards when creating the HTML and CSS for a
website, helps ensure that a web page can be rendered and interacted with over a range of
devices, operating systems and web browsers.
Separating content (HTML) and presentation (CSS) means that a web page can be easily
reformatted to look the way it should on different devices. By simply applying a different style
sheet, the website creator can ensure that the page displays correctly on devices with very
different properties (eg a PC, tablet, and smartphone which have very different screen sizes).
Later in this chapter we will look at the role of Error! Reference source not found. and Error!
Reference source not found. in ensuring the interoperability and compatibility of a website.
Usability
Usability is closely linked to accessibility, but it deals more generally with the ability of any
person to use the website and the features it contains (eg navigation bar, etc). The aim is to
make it easy for even novice users of the internet to use a website. Considerations include
the following.
 Effective, clear, and concise presentation of information. Can the target users find what
they’re looking for, quickly and efficiently?
 Clear link between the action taken by the user and the result of that action (eg if I push
the ‘upload’ button, a file will be uploaded).
 Ordering information logically – with the most important information clearly
distinguished from other less important information.
 Making sure users never have to search around for what they need. For example, if they
are given an instruction: “Click ‘ENTER’ to submit your competition entry” they
shouldn’t have to search around on the page to find an ENTER button/link. The button
should be positioned close to the instruction.
While an accessible website is not automatically more usable, the two do often overlap.
Web standards and usability
Although there are no specific W3C specifications regarding usability, these are included in
the WCAG 2.0, as an important aspect of accessibility. The W3C suggests a number of
techniques that can be used to ensure a website is usable by as many users as possible. This
includes, for example, presenting navigation links in the same order on different pages. Look
at the example below, which shows the navigation menu for the Home page of a website,
and then what the navigation menu looks like on the About page for the same website.

Figure 7: Navigation menu on the Home
page (left) and on the About page (right)
This can be very confusing to the user, as they are expecting the navigation menu to have
the same order on all pages of the website.
Later in this chapter we will look at the role of Error! Reference source not found. in
ensuring a website meets usability standards.
Relationship between web standards and legal
and ethical considerations
We have already looked at a number of legal and ethical considerations which apply to any type
of digital media – including websites. This includes issues related to privacy, intellectual property
(copyright, licensing, etc) and the implications of the longevity of digital content on the internet.
In some areas, these legal and ethical considerations overlap with considerations of web
standards and conventions. One example is accessibility. We have seen how accessibility is a key
web standard, but it is also important from a legal and ethical perspective.
Many countries have laws in place which require that people with disabilities not be
discriminated against. In New Zealand, parts of the Human Rights Act and the Bill of Rights Act
have anti-discrimination stipulations. New Zealand has also signed the United Nations
Convention on the Rights of Persons with Disabilities, which specifically requires that
government departments provide accessible information to persons with disabilities.
Some countries, like the UK, Australia and the USA have laws in place which require not only
government departments, but organisations also, to have accessible websites. There have
even been cases in Australia and the USA where organisations have been successfully sued
on the basis of the fact that their websites were not accessible to persons with disabilities.
However, even when an accessible website is not a legal requirement, many people believe
that designers have an ethical responsibility to ensure that people with disabilities are also
able to access the content. The argument is that developing a site which is inaccessible to
someone with a disability (eg vision or motor impairment) is a form of discrimination.
Home
About
Classes
Philosophy
Trainers
Contact
About
Classes
Contact
Home
Philosophy
Trainers

What do you think?
Do you agree that is unethical for a website to be inaccessible to certain people because
they have a disability? Do you think this is a form of discrimination?
Advantages and disadvantages of adhering to
standards
We have already looked in detail of the advantages of adhering to standards as it relates to
accessibility, interoperability and usability. Some other important advantages for adhering
to standards are listed below.
Advantages of adhering to standards
 Improved accessibility, interoperability and usability: Already discussed (pages 27 - 30).
 Improved SEO: When you enter a search query in a search engine like Google, there may
be millions of sites that meet the search criteria. Search Engine Optimization (SEO) deals
with getting a website to be listed as close to the top of those search results as possible.
Using semantic markup (HTML) and an external style sheet (CSS) both help a web page
to rank higher in search results.
 Better quality websites: Using style sheets helps to ensure a consistent look and feel
across all the pages of website. It also makes it easy to make formatting changes to the
entire website.
 Better user experience: Adhering to web standards, especially those regarding accessibility,
not only help to make web pages accessible to people with disabilities. It also improves the
user experience for people without disabilities. For example, people:
o with low levels of literacy
o who are second/foreign language speakers
o who are new web users
o who have slow connections.

 Websites that are ‘fit for purpose’: Every
website has a specific communication
purpose(s). For many organisations, this
purpose is to advertise and sometime sell
products and/or services. Other purposes of
websites could be to entertain, educate,
inform, etc. Frequently this communication
purpose and other key specifications for a
website are given in a brief. This brief may be:
o supplied by the person or organisation who wants the website created (ie key
stakeholders)
o produced by the website developer in consultation with key stakeholders.
Regardless of the purpose(s) of the site, a better user experience means that users are
more likely to:
o be able to do what they want/need to do on the site (eg buy something, find some
information, etc)
o ‘click through’ – ie visit more pages on the website
o return to the website
o tell others about the website
o get a positive impression of the organisation/person associated with the site.
 Websites that load faster and use less bandwidth: Particularly for larger/more complex
sites, separating content (HTML) and presentation (CSS) results in significantly more
compact code. When a website uses an external style sheet, the style sheet only loads
once and is then cached. So if someone accesses many pages of a particular website, the
style sheet does not need to load for each page. This results in web pages which load
faster and use less bandwidth.
 Websites that are quicker to develop and maintain: Using an external style sheet to
define the presentation of a website means that changes can be easily made to the
formatting of the pages on a website. To make changes across all the pages of the site,
only one style sheet needs to be changed. This means that when developers want to
‘revamp’ the website, the time taken to make changes to the ‘look’ of the site are greatly
reduced than when HTML is used for presentation.
 Websites that are more efficiently debugged: Debugging is the term for checking a
website for errors (See the section on Data integrity and testing). Using HTML and CSS
which conforms to web standards means that the designer can use automated validation
tools to debug their websites.
Using style sheets to define the presentation of the site means that the markup (HTML) is
simplified. This makes it easier for manual (human) debugging of the site.
 Websites that are easier to develop in teams: Many companies which create websites
do so in teams – with a number of developers responsible for different aspects of the
site. Using standards compliant code means that everyone is ‘speaking the same
language’. It means that a developer can take over the work that someone else has
started without first trying to figure out the previous person’s coding peculiarities.
Fit for purpose
An outcome (eg a website) is fit for
purpose if it is able to perform its stated
purpose in the intended physical and
social environment. In other words it is
able to meet the agreed specifications
for the outcome.

Disadvantages of adhering to web standards
There are also some disadvantages of adhering to web standards. These are fairly
insignificant when compared to the gains which can be made by adhering to standards.
However, they are still important to consider.
 Backwards browser compatibility: Some older browsers may not display CSS-based
layouts as intended. This is because CSS was an emerging standard when older browsers
first released. Although people using older browsers may not get the full, intended visual
experience of the site, they will still be able to access all the content of the site because
of the separation of content and presentation.
 Reskilling of web developers: Some developers (especially those who have been
developing websites for many years) may not be familiar with CSS-based layouts.
Learning how to use CSS and ensuring their code is standards-compliant can be a steep
learning curve for these people.
 Time consuming and costly: Some people believe that using certain techniques is not
worth the time that it takes. For example, some people believe that validating HTML and
CSS is not worth the time (and money) it takes. They feel that as long as their website
looks the way it should and is able to be used the way it should, that there is no need to
spend the time validating the code.
When it comes to some of the W3Cs accessibility guidelines, many people feel that it is
just too costly and time-consuming to adhere to the guidelines. A correct balance needs
to be struck between making the website as accessible as possible without spending an
unreasonable amount of time and money to do so. For example, to accommodate users
who have difficulty sounding out written text, it might be ideal to provide a spoken
version of texts. However, this can time-consuming and costly to do – especially if only a
tiny portion of the target users have this difficulty. On the other hand, if a website is
being designed specifically for people with reading/literacy difficulties, then it may well
be worth the time and effort.
Data integrity and testing
We have already touched on one important aspect of data integrity and testing as it
pertains to websites, namely validation (see page 24). In addition to automatic validators,
there are a number of other data integrity and testing tools and techniques a web developer
can use to create a quality website which meets agreed specifications.
Repair tools
Most automatic validation tools will identify issues in the code and how these can be
resolved. However they do not take the web page author systematically through the process
of correct the code the way that, for example, some spreadsheet and database tools do.

Currently (as of March 2012) the W3C is working on developing a suite of tools that not only
help web authors identify issues, but also to solve them interactively.5
Automatic testing tools
In addition to the validation tools we have already discussed, there are also a number of
other automated tools available to evaluate the accessibility, usability and interoperability
of a website. Some free automated tools include:
 Acc: Developing Firefox add-in (extension) for evaluating the accessibility of a website
(http://appro.mit.jyu.fi/tools/acc/).
 EvalAccess 2.0: Online tool for evaluating web accessibility
(http://sipt07.si.ehu.es/evalaccess2/index.html).
 WAVE: Online accessibility evaluation tool (http://wave.webaim.org/).
 Browser Shots: Online tool for checking the compatibility of a site for a wide range of
different browsers (http://browsershots.org/).
 DotMovi Virtual Developer Lab - Tools for testing web page interoperability across a
range of different devices (http://mobiforge.com/testing/story/dotmobi-virtual-
developer-lab).
Browsera - A cloud-based tool which tests the layout of a website over a range of browsers.
The free version of this tool has limited functionality (http://www.browsera.com/).
Other types of data integrity and testing
procedures
In many cases, automated testing is simply not enough. Web developers may use a number
of other testing methods, depending on the time and budget they have available. This could
include one or more of the following.
 Stakeholder consultations: Getting feedback from stakeholders regarding the look and
functioning of the website.
 Testing using accessibility hardware and
software: Manual testing of a website using
devices and user agents which people with
disabilities would typically use when accessing
the site. For example testing the pages using a:
o self-voicing (‘talking’) browser like Fire Vox (a
browser extension for Firefox6
)
o screen reader (eg JAWS, Microsoft Narrator,
Apple VoiceOver) or magnifier (eg MAGic7
).
5
W3C. Core Techniques for Web Content Accessibility Guidelines 1.0. W3C Note 6 November 2000.
http://www.w3.org/TR/WCAG10-CORE-TECHS/ Accessed 8 March 2012. For more information about this project, visit
http://www.w3.org/WAI/ER/
6
http://www.firevox.clcworld.net/about.html
7
JAWS and MAGic are both Freedom Scientific products (http://www.freedomscientific.com/)
User agent
Software that retrieves and delivers
content from a web document to a user.
Examples include browsers, screen
readers, media players, voice recognition
software, etc).

 Testing on different devices, using different input devices: Manual testing of a website
on different devices with different attributes (eg different size screens), use different
input devices (eg touchscreen, projection keyboards), etc.
 Target user testing: Getting members of the target users – including people with
disabilities to ‘try out’ the website. They navigate the site and perform any functions
that would be expected to be performed on the site (eg registering as a user,
downloading or uploading a file, etc). The tester uses a combination of observation and
questioning to identify any problems the user encounters, how quickly they are able to
do what they want to do on the site, and their satisfaction with the experience.
 Spelling and grammar checks: With all the other things to worry about, some
developers may be tempted to skimp on something like checking the spelling and
grammar of text on a page. However, spelling and grammar errors can have a number
of negative consequences. Not only do these types of errors project a poor image of the
organisation/person associated with the website, but it can actually hinder the
accessibility and usability of the site.
o Assistive technologies (eg speech synthesizers) may have difficulty interpreting and
dealing with spelling errors.
o People with learning disabilities or those trying to read the content of a page which
is not written in their native language can struggle even more to understand the
text if it contains errors.
For this reason, spelling and grammar checks are an important part of the testing
process. These checks could be done manually or using spelling/grammar check
software (or a combination of the two).
How is this testing applied?
It is important that these tests take place throughout the website development process – not
only when development has been completed. The exact points in the process at which testing
should take place, will depend on a number of factors. These include the complexity of the
project, and the financial and time constraints.
Different data integrity and testing methods will be applied at different stages of the
development process. For example, in the early stages of developing a web page, stakeholder
consultations may be used to get approval of a design concept for the site. On the other hand,
user testing would only be able to generate meaningful information if the website has been
developed significantly (ie so that there is something for users to test!)
Another important aspect of the data integrity and
testing is that it is an iterative process. This means
that it is not simply a matter of getting the results
of testing and making any necessary changes.
Once the changes have been made, further
testing may be need to evaluate a different aspect
of the website, to determine if all issues have
been successfully rectified, etc.
The cycle of testing and refinement is repeated until the developer is satisfied that the
website is ‘fit for purpose’ and of sufficient quality.
Iterative process
An iterative process involves a number of
actions, some of which are repeated. In
certain cases, some actions are repeated on
an on-going basis throughout the process.

Advanced tools and techniques in website creation
We have looked at how the quality of a website it linked to adhering to web standards –
including using semantically correct markup to structure the content of a page, and separate
style sheets for the style and formatting of the site. Now let’s look more at some of the key
advanced tools and techniques used to create quality websites that are standards compliant.
Semantic markup (HTML) and style sheets (CSS)
Semantic markup (HTML) and style sheets (CSS) are used together to create a website.
HTML to define the content (structure)
HTML tags and elements define the content of a web page so that it can be interpreted by a
web browser. Elements consist of a pair of tags and the content between the tags.
<h1> HTML elements and tags </h1>
Figure 9: HTML element
Error! Reference source not found. shows an example of a basic web page – with the code on
the left, and what this would look like when the code is rendered by a browser (top right).
<!DOCTYPE html>
<html>
<head>
<title>Typical Web Page</title>
</head>
<body>
<h1>This is a level 1 heading</h1>
<p>This is a paragraph with a <a href="link.html">
hyperlink</a>.</p>
<p>And this is an image... </p>
<img src="abstract.jpg" alt="Abstract image" height="100"
width="150"/>

</body>
</html>
1
2
3
Element
Start tag End tag
4
5
6
7
10
9
8
Figure 8: Basic website structure

Review
DOCTYPE identifier (declaration)
Can you remember what the purpose of a DOCTYPE identifier (declaration) is?
Page element
<html> and </html> indicate to the browser the start and end of the page.
Head element
<head> and </head> indicate the start and end of the head information. The head element
of the page contains information about the page. A human user does not see this when they
look at the page on the internet. However, browsers and (importantly) search engines, do.
The head element is a container for a number of other elements. Search engines use these to
index, analyse and understand content on the web. One of these elements is the Title element.
Title element
The title element gives the title for a document. This is the title shown in the browser title
bar and in search engine results. All documents must have a title.
Two elements commonly found within the head element, their functions and tags, are listed
in
Table 1 along with an example for each.
Table 1: Elements within the head element
Element Function Tag Example8
Link Gives a link to an external file. For example, this can be
used to give a link to an external style sheet (CSS).
We’ll find out more about this in the CSS section.
<link /> <link ref="styles.css"
rel="stylesheet"
type="text/css"/>
Meta Where information can be included that helps search
engines and databases identify, index and catalogue
information on the page.
For example, it could include keywords that define
the key information in the content of the page.
<meta /> <meta name="Keywords"
content="web design,
standards,
accessibility"/>
Body element
The tags <body> and </body> indicate the start and end of the visible content of the web
page. Within the body element, there are also heading and paragraph elements (much as
8
Remember that this information is contained within the head element and the head element is within the HTML page element.
1
2
3
4
4

you would find in a normal text). These and other key elements found within the body
element are summarised in the table which follows.
Table 2: Elements within the body element
Element Function Tag
Heading Indicates headings – HTML has six levels of headings. For
example, <h1> indicates a level 1 (top level heading) and <h2>
indicates a subheading.
<h1>
<h2>
etc
Paragraph Indicates the start and end of paragraphs. <p>
Link Indicates an HTML link to another page in the current website
(internal link) or to another website/page (external link). It also
provides the text to be displayed on the web page for the hyperlink.
<a>
Image,
graphic, or
animated gif
Used to embed an image. Provides a browser with:
 the location of the file (src=)
 the alternate text for the image, in case it does not load (alt=)
 the size the image is to be when it is presented on the page
(height=; width=).
<img />
Attributes
Attributes give more information about HTML elements. They consist of two parts – a name
and a value. Look at the example below (taken from Table 1 on page 38).
<link href="styles.css" rel="stylesheet" type="text/css">
Figure 10: Example of (link) attributes
 href attribute: Specifies the location of the external resource – in this case, a CSS
(external) style sheet with the file name styles.css.
 rel attribute: Stands for ‘relationship’ and indicates the relationship between the current
document and the resource file indicated by the href attribute. In this case, it indicates
that the file styles.css is a style sheet.
 type attribute: Indicates the content type of the content available in the resource file
indicated by the href attribute. In this case it is indicating that it is a text, CSS file.
CSS for the presentation (style/formatting) of the web page
While the HTML specifies the content of a web page, the CSS specifies how that content will
be presented.
6
7
8
9
Tag (link)
Name Value
href attribute
Name Value
rel attribute
2
Name Value
type attribute

Types of style sheets
There are three types of styles offered by CSS.
 Inline: Styles that are put within the HTML tag they affect. These have to be inserted
every time a style is declared for an item, so they lose many of the advantages of CSS.
 Internal: Styles that are set for a single web page. This is fine for single page websites,
but for websites with more than one page, many of the advantages of CSS are lost.
 External: The most efficient and effective way to style a website consisting of a number
of web pages is to use external style sheets. Using an external style sheet means that
developers can change the look of all the pages of their site by making changes to only
one file.
In this guide we are going to focus on the use of external style sheets.
CSS Syntax
As with HTML, CSS needs to be written in a particular way (syntax).
CSS consists of a list of rules. Each rule consists of the following.
 A selector – this is the HTML element to be styled.
 One or more declarations. Each declaration consists of a:
o property – the style attribute to be changed
o value – the value of the property.
Look at the example which follows.
h1 { font-family:arial; color:blue; }
Figure 11: Example of CSS syntax
CSS Comments
In much the same way that comments can be added to HTML to explain what has been
done and why, comments can also be added to CSS to explain the code.
A CSS comment begins with /* and ends with */, as shown in the example below.
/*CSS rules!*/
Figure 12: Example of CSS comment
value property value
CSS rule
selector property
declaration declaration

How HTML and CSS work together
A style sheet is created as a separate file (from the HTML file). Then in the HTML file for
each page of the website a link to the external style sheet is included (using the <link>
element). You saw an example of this in Figure 10. This ‘tells’ the HTML what style sheet to
use to style the page. Any HTML tags in the document will be styled according to a
corresponding CSS rule in the CSS file (assuming there is one for that tag).
For example, if the CSS rule shown in Figure 11 was included in the linked style sheet, then
all level 1 headings (marked with the <h1> tag in the HTML document) would be styled using
the font Arial, and the colour blue.
Advanced HTML tools and techniques
It will not be possible to discuss all the advanced HTML tools that can be used to define the
content of a page. We are going to look at just a few by way of example.
Document structure
In the early days of web page design, HTML tables were the most common way in which the
layout of a page was achieved. However, tables were designed for representing information
in the form of a table – not for creating the layout of a document. For this reason more
recently, the <div> element has been used for document layout.
However, the <div> element itself is not semantically meaningful. It merely indicates a
division in the document, not what the division is for. So for each <div> element an id
attribute would also need to be included to describe the type of division.
HTML5 includes a number of new elements which were not available in earlier versions of
(X)HTML. One of the reasons for the introduction of these new elements was to improve the
semantic nature of HTML. This included using semantically meaningful elements in the place
of the generic <div> element for certain sections of content.
Examples of new elements include the following.
New elements in HTML5
Element Function
<header> Indicates a header at the top of a page or section.
<footer> Indicates a footer at the bottom of a page or section.
<nav> Indicates a section of navigational links (ie a group of links to other parts within the
document or to other documents).
<section> Indicates a section in a document. For example, a home page could be divided into
Introduction, News and Contact sections.
<article> Indicates a block of content which could exist independently of the website (ie a
complete article, blog post, etc).
<aside> Indicates a block of content which is loosely related to the content near it, but is
still separate from the content as such. It is similar to sidebars in printed works.
(The terminology boxes in this document are examples of sidebars).

The table below shows an example of this difference between HTML5 and earlier versions.
Footer in HTML5 Footer in earlier (X)HTML versions
<footer>
<p>Footer content goes here.</p>
</footer>
<div id="footer">
Footer content goes here.
</div>
What is the advantage of these new semantic elements?
 They are semantically meaningful – they indicate specifically that a particular part of the
document is a header or footer.
 An <id> attribute is something which the person creating the code decides on
themselves. While it may be convention to use id="footer", the person writing the
code could decide to call it anything they like, eg id="voettekst"9
. This could be
problematic for another coder who tries to work with the HTML code and for user
agents trying to access the code.
 The use of these elements can be helpful to users who benefit from navigation and
other information not being available immediately. For example, the <nav> and
<aside> elements can be used by user agents (eg screen readers) to establish which
information on a page can be skipped and/or provided on request.
 Today users like to access the information on the web in a variety of ways. For example,
many people like to use technologies such as newsreaders to deliver content (such as
an article) directly to their device (eg smartphone), without having to visit the web
page. Using the <article> element allows newsreaders to identify and deliver this
content, independent of the rest of the content on the web page.
Integrating digital media
Audio and video
Until recently HTML was unable to play multimedia such as audio and video. To be able to
include multimedia on a web page would mean using a browser plugin like QuickTime or Flash.
HTML5 makes it much easier to add multimedia to a website – without needing browser
plugins. This is done using <audio> and <video> elements.
Unfortunately there are still some difficulties with different browsers supporting different
audio and video formats. This means that audio and video needs to be provided in a variety
for formats (file types) to ensure that it works in all browsers.
Despite this, being able to embed audio and video without needing browser plugins
significantly improves and simplifies the process of including multimedia on a website.
Considering the fact that multimedia is becoming increasing prevalent and increasingly
expected by web users, this is a great development for web developers.
9
Voettekst is Dutch for ‘footer’.

Images
Until the introduction of HTML5, graphics and animations were integrated into a site using
image files or plugins such as Flash, Silverlight and Java. In HTML5, the <canvas> element
makes it possible to create shapes, colours, pattern files and gradients in HTML. CSS3
animation features can then be used to animate the object being created (eg move, scale).
An example of a website which showcases a number of these new HTML5 tools and
techniques is the New Zealand Tourism website (as at March 2012).
As you scroll down the site the images change, giving the impression that you are moving
through the landscape. Because the images change as the user scrolls, this gives the feeling
that they are controlling the view. This is a concept known as responsive web design – where
the view users see changes according to their requirements or actions (in this case, scrolling).
The set of screenshots below shows how the initial image (top left) slowly changes as the
user scrolls down. Note the different positions of the scroller/thumb.
Figure 13: Screenshots from the New Zealand Tourism website
(http://www.newzealand.com/int/)
Advanced CSS tools and techniques
As is the case with HTML, CSS standards continue to evolve. Unlike HTML5, which is a single
specification defining various features, CSS3 (the most recent version of CSS) is divided into
several separate documents called modules. Different modules are at different ‘maturity
levels’ (refer back to the section on Constantly evolving standards, page 23, for a reminder
of these maturity levels).

In fact, work has already started on CSS4. Although no browsers currently support CSS4, by
the time you read this, this may have changed!
As with the evolution of HTML, changes to CSS are made to ensure that these standards are
constantly improving and expanding to keep up with changes in technologies and user
expectations of the web.
We are going to look at some of the key new features of CSS3 (which were not available in
earlier versions of CSS). These features work very well with HTML5 and make it possible for
developers to efficiently create sites with improved functionality and accessibility.
Screen layouts
As we have already discussed, before the introduction of CSS, tables were the most
common way used to create the layout of a document. However, CSS is a much more
efficient and flexible way to create screen layouts. There are two main categories of screen
layouts: fixed and flexible.
Fixed screen layouts
As the name implies, a fixed layout is one that uses a unit of measurement which is
independent of other factors (eg the browser windows, font sizes, etc). Regardless of
whether a user’s browser is maximised or not, or whether they have zoomed the page or
resized the text.
Flexible screen layouts
These are also commonly known as fluid, elastic, liquid, or relative layouts. Unlike the fixed
layout, a flexible layout uses a relative unit of measurement to specify the width of the
page. The content on the page then resizes to suit the browser window and/or font sizes.
Advantages and disadvantages
There are a number of relative advantages and disadvantages of these different layouts.
For example, the fixed layout is a lot easier to create and modify. However the flexible
screen layout is much more likely to be accessible to a wider range of users.
To overcome the disadvantages of a fixed layout, designers employs some design ‘tricks’ to
ensure their web pages look good in a range of browser sizes. This could include centring
the layout and adding generous margins on all sides (see an example of this in Figure 14).
Figure 14: Example of
a fixed layout page
(http://www.babycater
pillar.co.nz/)

Font face (@font-face rule)
Ask any web developer and they’ll tell you that one of the biggest frustrations they face has
to do with using fonts on the web.
Before the advent of CSS3, developers had to be very careful about the fonts they chose to
use in the pages they created. For a font to be displayed on a user’s computer, the user had
to have that font installed on their computer. If the user did not have that font on their
computer, then the browser would replace it with another font. This could cause havoc with
the look and layout of the page. As a result developers were limited to using fonts that they
knew the majority of users were likely to have on their computers – which is very restrictive
in terms of the design look of the site. Alternatively, developers had to create the text as an
image (a bad idea because search engines, screen-readers, etc cannot access the content).
However, in CSS3, the @font-face rule helps to overcome this problem. The @font-
face rule allows the designer to specify a font and provide a link to the font file on their
server. This will allow the font file to be used for that particular page, but it will not be saved
onto the user’s computer.
Visual style effects
CSS3 allows a range of visual ‘effects’ to be applied to elements on a page. Some of these
are listed in the table below.
Property Function Examples
border-radius Applies rounded corners to a
box .
box-shadow Applies shadow effect to a box
text-shadow Applies shadow effect to text
transform Applies a 2D or 3D
transformation to an element.
For example the user can
rotate, move, skew or scale an
element.

Review
Property Function Examples
Transition Applies property changes to an
element. For example, when a
user moves their mouse over a
button it moves or changes
colour. This can also be
achieved using scripting (eg
JavaScript or Flash). However,
the advantage is that it allows
designers to achieve these
effects without having to be
familiar with scripting.
File and asset management procedures
In this section we will look at some of the file and asset management procedures which
relate to the web development context.
File naming and organising
We have seen that an effective file naming convention and organisation system is crucial
when creating a digital media outcome. This is very important in the case of website creation.
Look at the code below which is used to link to an image file (taken from Figure 8, p. 37).
<img src="abstract.jpg" alt="Abstract image" height="100"
width="150"/>
Can you remember what the src attribute indicates in the code above?
In the example above, the src attributes indicate the location (source/URL) of the image
file. In this case, only a file name has been given. This means that the image file is located in
the same folder as the html file. However, this is the exception, rather than the rule. More
commonly, image files (and other digital media assets) would be located each in separate
folders. Something like this would be more common.
src="/images/abstract.jpg" or src="/images/home/abstract.jpg"
In the first example above, this indicates that the image file is located in a folder called
images. In the second example, it is in a sub-folder titled home, within the folder images. In
other words, the creator of the website has set up a folder for each asset type (eg images,
audio, video). Within each of these folders, they have created subfolders for each page of
the site (eg homepage, contacts).
Transition
Transition
Transition

But why do website developers use this folder system? The main reason is to ensure that
the creator(s) don’t waste time searching around for the file they want to link to. Imagine a
site that employs 50 different image files across the site (a number of web pages). If all
those images were to be saved in the root folder, it would make finding the required file
very tricky. Having the assets subdivided according to their use (eg the page or part of the
page they are used on) and their asset type, helps to narrow down the options – making
finding the file needed a lot easier. Other reasons effective file naming and organisation are
important include the following.
Working in teams: As mentioned earlier, websites are often developed in teams (ie more
than one person is responsible for building the website). Using an effective, logical file
naming and organisation system (eg folders) helps to ensure that all members of the team
can find what they need as quickly as possible.
Site maintenance: When a website developer is busy building a fairly simple website, it
might be quite easy for them to remember the name they’ve used for a certain asset, and
where they have saved it. But what happens in a couple of months’ or years’ time when the
client wants changes made to the site or when website maintenance needs to be done? It
will be a lot more difficult to remember these things at that time. Having an organised folder
system and effective naming convention makes things a lot easier in cases like this.
Sitemap creation: Having different asset types in different folders makes it easier to create
a sitemap using a web development application like Adobe’s Dreamweaver or Microsoft’s
Expression Web.
Optimising files
Media files are large; sometimes very large! This is a problem for two key reasons: time and
money.
 Time: The bigger the media file, the longer it takes the web page to download. Even
with broadband, this can be a major issue – particularly because web developers
continue to increase the number and complexity of media elements incorporated into
their sites.
 Money: Site owners are charged for the data downloaded from their sites. For a popular
website which has many visitors (ie a lot of ‘hits’), large media files can be very expensive.
For this reason, when it comes to website creation, the aim is always to have the smallest
possible file, without unacceptable loss of quality (resolution, audio clarity, etc). This is
known as optimising the files.
In the case of images, it is important for the files to be compressed. Compression reduces
the file size and therefore the time it takes for the image to download. Common ways to
compress an image file are to save them in JPEG or PNG format.
JPEG and PNG use different types of compression. JPEG uses lossy compression – which
means that the file size is reduced by removing some of the information from the file. JPEG
compression reduces the tonal range of the image (ie the lights are not quite as light, and
the dark is not quite as dark). PNG, on the other hand uses lossless compression – meaning
that the image does not lose any information when it is saved. For this reason, PNG files are
usually larger than JPEG files. The result is that the JPEG format is currently the most
popular for web images.

Some software applications also provide tools for optimising images. For example, the Save
for Web and Devices tool in Adobe Photoshop.
CSS and HTML compression
CSS and HTML files can also be compressed. Amongst other things, this involves removing
extra whitespace in the files, ensuring the files are as small as possible. Web developers use
a range of compression tools such as:
 CSS optimiser: http://www.cssoptimiser.com/
 YUI Compressor: http://developer.yahoo.com/yui/compressor/
 CSS tidy: http://csstidy.sourceforge.net/
 HTML Optimiser Pro: http://www.tonbrand.nl/home.htm
Stay up to date with the latest developments
As we have seen throughout this chapter, the world of website development is a constantly
changing one. It is important to stay up to date with the latest developments and to
remember that by the time you read this guide, some of the things discussed here may
already have changed.
Below are some suggestions for websites that will help you to stay current with the latest in
web development.
 Tools to determine HTML5 and CSS3 support by different browsers
o CanIUse - http://caniuse.com/
o Modernizr – modernizr.com
o HTML5 and CSS3 Readiness - http://html5readiness.com/
 The latest information on HTML5
o HTML5 Rocks - http://html5rocks.com
o W3C - http://www.w3.org/TR/html5-diff/
 The latest information on CSS3
o CSS3.info - http://www.css3.info/
o W3C - http://www.w3.org/Style/CSS/Overview.en.html
 Developer forums/blogs
o Windows Internet Explorer Engineering Team Blog: http://blogs.msdn.com/b/ie/
o Firefox Mozilla Developer Network: https://developer.mozilla.org
o Google Chrome Developer forum: http://chromestatus.com
o Safari Developer Center:
https://developer.apple.com/devcenter/safari/index.action

You should already be familiar with basic concepts related to animation
and video. This includes the software resources, tools, and techniques
employed in the creation of animation and video. You should be familiar
with the basics of:
design elements relevant to animation and video, including the use of
different camera angles, lighting, etc to convey meaning
the relationship between design, communication purpose, and target
audience
the digital media types integrated into a video (eg images, sound, etc).
3. Motion Graphics & Video
In this chapter we look at advanced concepts of
digital media as they relate to motion graphics
and video. The overlaps between these two areas
of digital media are significant: Video productions
frequently include motion graphics, and motion
graphics use video footage and/or animation tools
and techniques to create the illusion of
movement. To simplify matters, in this chapter we
are going to use the term audio-visual media (AV
media) to refer to any digital media outcome
which involves moving visual elements and audio
– this could be animation, video, 3D modelling,
etc. This includes a very wide variety of outcomes:
feature length movie productions, movie trailers,
short films, animated videos, music videos,
advertisements, motion graphics titling, etc.
We begin by looking at the legal, ethical and
moral issues which need to be considered by
people creating AV media. We will also see how
these legal, ethical and moral considerations are
interrelated with the standards and conventions
of the industry.

Legal, Ethical and Moral Considerations
In Chapter 1 we discussed some of the general legal, ethical and moral considerations which
apply to all types of digital media. Now we are going to look at some examples that apply
more specifically to the production of AV media.
Legal considerations
Intellectual Property
Copyright, trademarking and other intellectual property considerations are crucial for any
AV media production. We discussed this in some detail in Chapter 1. Here is a brief
summary.
 Trademarking – Displaying someone else’s trademarked content (eg logo, branding)
may be a trademark infringement. However, incidental inclusion of a logo or branding
may be acceptable. However, the creator of the production needs to be certain that it is
incidental (ie it is not the focus of the shot or of the subject matter on screen at time).
Generally an incidental inclusion of trademarked materials would mean that the item is
only in the shot for a few seconds and it is on the periphery of the shot.
 Copyright – Incidental inclusion of copyright material may be acceptable. This could
include a quote from a poem, a painting, etc – as long as it is not the focus of the scene.
However, in the case of music, permission to use the copyright materials is needed –
even for incidental inclusion.
Below are some other examples of intellectual property issues which need to be considered
in the creation of AV media.
 Confidentiality agreements: In many cases the people working on a production are
required to sign a confidentiality clause. This usually indicates that they may not show
anyone the incomplete project, that no unauthorised persons are allowed into the edit
suite, etc. If they do not adhere to these agreed conditions, there can be a range of
different consequences – from being fired, finding it difficult to work in the industry in
future, and even legal action. Even where there is no formal agreement in this regard, it
is accepted within the industry that morally and ethically it is vital that all aspects of the
project must be treated as strictly confidential.
 Advertising materials: Generally the creators of the film (the film studios) set specific
conditions under which a trailer of the film may be made (and their copyright materials
used in the trailer). This includes, for example, that the trailer needs to accurately
portray the owner’s idea of the film. If the trailer creators do not comply with these
conditions, this may be a breach of their license agreement to use the copyright film
materials (clips, etc).
Health and Safety
For productions involving live talent (actors, etc), production crews, etc, the Health and
Safety in Employment Act 1992 may apply. These laws are in place to ensure that people
can work in a safe environment when creating a video production.

Even in the case of a production where no live talent or crews are involved (eg animation
video), Health and Safety laws may still apply in terms of safe working conditions for the
editors, animators, etc. For example, this may include minimising the chances of repetitive
strain injury (RSI) or occupational overuse syndrome (OOS).
Broadcast standards and censorship
Two key pieces of legislation apply to broadcast standards and censorship.
Broadcasting Act 1989
Under this Act every broadcaster (radio, TV, etc) is responsible for maintaining in its
programmes, and their presentation, standards which are consistent with the following.
a) The observance of good taste and decency.
b) The maintenance of law and order.
c) The privacy of the individual.
d) The principle that when controversial issues of public importance are discussed, the
broadcaster does their best to show alternative points of view.
e) Any approved Code of Broadcasting Practice applied to programmes.
Codes of Broadcasting Practice
The codes are developed by broadcasters in consultation with the Broadcasting Standards
Authority (BSA). This includes codes for free-to-air TV, paid TV and radio. These codes
include both:
 ‘standards’ – rules broadcasters have to follow
 guidelines – these are not the rules themselves, but are used to help interpret the
standards.
The BSA is responsible for investigating complaints regarding non-compliance with the
codes of broadcasting practice. The Advertising Standards Association is responsible for
investigating complaints related to advertising.
So anyone creating a production that they hope to broadcast on, for example, television will
need to ensure that the production meets the Code of Broadcasting Practice for a particular
broadcaster/production.
Broadcasting standards also include programme classification. This is a different
classification system than for film, video, and publications (see the section below). Under
these standards broadcasters need to classify programmes and display warnings where
appropriate. It also sets out the times at which programmes with different classifications
may be shown. For example, programming classified as AO 9.30pm (ie they contain realistic
violence, horror, potentially offensive language, etc) may only be broadcast between
9.30pm and 5am. They are also expected to carry a warning – indicating the classification
and the reason.

Films, Videos, and Publications Classification Act 1993
This legislation relates to the censoring of films, videos, DVDs, video games and a range of
other publications. It is in keeping with this law that the Office of Film and Literature
Classifications classifies publications that may need to be restricted or banned. The Office is
responsible for a production’s classification as, for example:
 G: suitable for a general audience
 PG: parental guidance recommended for younger viewers
 R16: Restricted to persons 16 Years and over.
Keep in mind, that the film may receive a different classification according to the
broadcasting standards (eg if it is to be shown on TV).
Overseas laws
If the creator of an AV media production is hoping to have their production screened or
broadcast overseas, they need to keep in mind that the laws of the country in which they
created the production (eg New Zealand) may not be the same in other countries. Different
countries have different classification systems and different broadcast rules and standards.
For example, the film Rise of the Planet of the Apes (2011) was classified PG-13 in the USA,
but M in New Zealand.
Ethical and moral considerations
In Chapter 1 we saw that it is not only the legal considerations which need to guide the
decisions made by digital media creators. There are a number of situations where a specific
law may not apply, but a decision needs to be made on the basis of what would be
considered ethically and morally acceptable.

Many of these are closely related to the accepted conventions of the industry concerned. In
other words, they are not ‘rules’ as such, but are practices which are generally considered to
be the norm or best practice in the industry.
Below are some examples relevant to the AV field.
 It is generally accepted that tombstones should not be included in a video, unless it is
crucial to the storyline and express permission has been given by the family to do so.
 No shaming (‘bad mouthing’) of an individual or group, even in an incidental manner.
 Even though the creator of Creative Commons materials may not HAVE to be
acknowledged, it is still considered to be ethically sound to do so.
 Although a talent release form may not be legally required for someone who is of legal
age, the norm is to get such a form from anyone included in the production (whether
this is in the form of still images such as photographs, or video).
 A production could receive an unrestricted classification even if it includes elements of
violence, sexual references, offensive language and depicts people doing things like
smoking or drinking. For example, a film rated M is unrestricted. This means that even
though it is recommended as being more suitable for mature audiences, anyone could
view it. This means that potentially, even a young child could end up viewing the
material. A consideration for the creators of AV media is what they believe to be
ethically and morally acceptable to depict – even to young or sensitive viewers.
Standards and Conventions
Standards
We have already discussed the standards which are related to broadcasting and censorship.
However, there are also a number of other technical specifications and guidelines which
may apply for an AV outcome – depending on the communication medium used to present
the outcome (eg TV, movie theatre, internet).
Broadcasters
Different broadcasters have different technical requirements. For example, in the case of an
outcome which is to be broadcast on TV, there will be specifications regarding, amongst others:
 the format in which the outcome must be supplied. For example, in New Zealand, the
television standard is PAL
 aspect ratio (eg 16:9) and resolution (920x1080)
 audio standards (eg all audio must be stereo).
There are even technical standards for productions created for distribution on the internet.
For example, different video sharing sites (eg YouTube™, Google™Video, Vimeo™) require
different video compression formats (eg .MOV, .MPG, .MPEG4).

In addition to these technical specifications, these sites also have terms of use which specify
the conditions under which their service may be used. Frequently, these cover issues related
to the following.
 Permissions and copyright (eg you must have created the video yourself and got the
necessary permissions if you use any third party content).
 Commercial use (eg the video should not be intended for commercial use).
 Privacy.
 Content restrictions (eg sexually explicit content, discriminatory content, etc).
If the creator of an AV media production agrees to these terms of use but uploads content
which does not adhere to these terms, the service may remove the content from the site.
For example, there have been a number of cases where YouTube has given ‘copyright
strikes’ to users for uploading content which infringes copyright (including teaser trailers).
After three copyright strikes, the users account can be disabled.
Copyright/trademark holders
Copyright holders may also stipulate technical specifications related to the use of their
material. For example:
 A record label may specify the extent and manner in which an audio/music track can be
altered.
 The creator of an original image may specify the maximum or minimum dimensions at
which their image may be reproduced/used in the production.
Trademark holders may stipulate the specific conditions under which their trademark can
be displayed. Amongst others, there may be specifications as to:
 the physical appearance of the item - eg it should not be presented in a way that would
create a negative impression of the product (grubby, damaged, etc)
 content proximity – ie in which scene(s) the item is displayed and what is happening in
the scene at the time (eg they may not want their product displayed in a scene where
there is violence, sexual references, etc)
 for how long the product can be shown.
The relationship between standards and quality
One of the key functions of standards is to ensure that the AV media production is of
sufficient quality. This includes both the technical quality of the production, as well as the
quality of the content in the production.
Technical quality: A production which adheres to the standards set by broadcasters and
copyright/trademark holders will generally be of good technical quality. For example,
broadcasters have clear standards in terms of picture and audio quality.
Content quality: As we have seen, broadcast standards set very specific rules as to what is
considered acceptable content in terms of Broadcasting Standards Act. Adhering to these
standards does not necessarily ensure that the content of a production will be ‘good’ in the
sense of being entertaining, informative, etc. However, it does ensure that at least they will
comply with the law and will not, for example, violate standards of good taste and decency.

Implications of adhering to standards
We have already discussed a number of positive implications of adhering to standards.
These are summarised below, along with some additional positive implications.
Positive implications
 Complying with standards helps to ensure that relevant laws are adhered to (eg
Broadcasting Standards Act; Films, Videos, and Publications Classification Act 1993;
Health and Safety in Employment Act; Intellectual Property laws, etc).
 If the production does not comply with the relevant standards, it will not be broadcast.
In the case of video sharing sites, failure to comply with standards could mean that the
user’s account is suspended or deleted.
 Complying with standards is linked to a good quality production. It ensures that the
content is delivered to the end user at the best possible level of quality in that medium.
 Ensuring that a production complies with standards and specifications as it is being
created will mean that it will be able to go straight to broadcasting. Otherwise, trying to
fix problems later can be costly and time consuming. For example, an online editor will
need to be brought in to ‘fix’ aspects of the project which has caused it to be non-
compliant.
Negative implications
Complying with standards can be costly and time-consuming. Depending on the type and
scope of the production, it may also involve the use of specialised personnel – which in turn
can also prove very expensive.
At the same time, if the standards are NOT adhered to, the production will not be broadcast.
There is very little point in producing a video, animation, or motion graphic that no-one gets
to see because no-one will broadcast it or allow it to feature on a video-sharing site!
Conventions
Different types of AV media (movies, advertisements, music videos, animations, etc) have
specific conventions which apply to them. For example, teaser trailers generally consist of a
number of short scenes (snippets). These are enough to tell ‘a story’, but not ‘the whole
story’. The aim is to build suspense and make the viewer eager to see more – so that they go
and see the movie. On the other hand, the movie itself needs to tell ‘the whole story’, so
generally the scenes are longer and more detailed.
Despite these differences, there are a number of generic conventions which apply to a wide
range of AV media productions. These are sometimes called cinematic techniques – however,
they do not only apply to film. They are also generally accepted techniques for most other AV
media productions. Cinematic techniques can be loosely divided into two categories: those
which apply to what is done in production (‘on set’/‘in camera’) and what happens in post-
production.

What do you think?
Production techniques
‘On set’/’in camera’ techniques conventionally used in AV media include:
 lighting
 camera shots, angles and movement
 frame rates (eg slow motion, time
lapse, etc)
 mechanical effects (eg pyrotechnics;
‘fake’ snow, rain, or wind; models/
miniatures)
 optical effects (eg green/blue
screening/chroma key, performance/
motion capture).
These techniques are all used to help build
‘the story’ and/or evoke emotion in the
viewer.
Figure 15: Joseph Gatt as the motion capture
actor for 'KRATOS' from the video games God
Of War II & III (on the motion capture stage
for SCEA in San Diego)10
Your teacher will give you some AV material to watch. As you watch, make notes about how
lighting, camera shots, angles and movement, and optical effects have been used. Indicate
how each helps to build meaning (ie helps to create the story) and/or to evoke emotion. Can
you think of any disadvantages to using any of these techniques?
10
Image by Motones. Accessed from http://en.wikipedia.org/wiki/File:Joesph_gatt_mocap.jpg on 15 March 2012.

Post-production
Capturing footage on camera is only a small part of the entire production process. Today,
more than ever, post-production (‘post’) plays a very important role in the creation of films,
music videos, advertisements, etc. These are known as visual effects.
Many of the techniques discussed in the previous section can and are also achieved digitally.
Conventional visual effects applied in post include the following.
 Compositing.
 Camera effects (this is not an actual camera – it is a software feature which allows for
different ‘views’ of an image in a similar way that could be achieved by moving a real
camera in relation to an object).
 Lighting effects.
 Time effects (eg time warp effect, time lapse, etc).
 Computer generated imagery (CGI) - an example is shown below of CGI which could be
used as a ‘backdrop’ in a film of video in the place of an ‘establishing shot’ (to provide
context to the scene).
Figure 16: Lone House (CG image by Mayqel11
)
We will discuss some of these special and visual effects in the next section.
Changing conventions
Advances in technology and new tools and techniques mean that the world of AV media is
constantly changing. Many of the techniques we take for granted today were impossible
before the advent of digital (computer) technology. Let’s look at an example.
11
Lone House by Mayqel – Source: http://en.wikipedia.org/wiki/File:Lone_House.jpg (accessed 10 March 2012).

The original Planet of the Apes movie (1968) relied on costumes, props, puppets, prosthetic
makeup and optical effects such as matte painting to achieve the special effects needed for
the film. In the recent Rise of the Planet of the Apes (2011) all these techniques were used,
but in addition a wide range of new technologies, tools and techniques were used to
achieve a far more realistic-looking outcome.
For example, compare the images below. The one on the left is an example from the original
Planet of the Apes, the one of the right is from Rise of the Planet of the Apes.
Figure 17: The character Cornelius in the original
Planet of the Apes (1968)12
Figure 18: ‘Caesar’ the lead ape in Rise of the
Planet of the Apes (2011)13
To create the character of Cornelius in Planet of the Apes (1968) prosthetic makeup was
used. While the techniques used were considered ‘cutting edge’ at the time, the prosthetic
makeup restricted the extent to which emotion could be shown by the actors playing the
role of the ape characters.
In contrast, the ape characters in Rise of the Planet of the Apes (2011) were created using a
technique known as performance capture (aka motion capture, motion tracking or
mocap). In particular, this technique was used in sequences which show detail of the lead
ape ‘Caesar’: his hand movements, facial expressions and body language.
The actions of a human actor are recorded and then that information is used to animate a
digital character model in 3D. In this case, the human actor Andy Serkis’ performance was
motion captured and then this was translated into the digital character of Caesar.
New advances in motion capture mean that performance capture can take place in real
locations, outside of a sound stage. This allows for greater interaction between performance
capture actors, and for the actors to interact more with their location.
Using performance capture in this way allows for complex movements such a facial
expressions to be recreated in a physically accurate way. This makes the digital characters
more realistic and believable. Therefore the audience is more likely to ‘engage’ with them as
characters, and support the ‘suspension of disbelief’ (ie help viewers to ignore the fact that
they are watching digitally generated characters and actions).
12
Planet of the Apes (1968) © 20th
Century Fox
13
Rise of the Planet of the Apes (2011) © 20th
Century Fox

Another staple of movie making today is using computer generated imagery (CGI) when it is
impossible, impractical, or too costly to shoot the actual footage. However, until recently,
filmmakers had to rely on very expensive and/or time-consuming techniques to achieve a
similar, but lower quality, effect. For example, in 1968, the iconic final scene of the Planet of
the Apes (shown below), was created using matte painting. Matte paintings were made by
artists on large sheets of glass. These were then integrated into live-action footage. Today
this is achieved using CGI. In fact, you would be hard-pressed to find almost any film today
that does NOT incorporate CGI.
Figure 19: Matte painting was used to create
the final scene of Planet of the Apes14
Figure 20: This entire scene from Rise of the Planet of the Apes was created using CGI15
14
Planet of the Apes (1968) © 20th
Century Fox
15
Rise of the Planet of the Apes (2011) © 20th
Century Fox

However, it is not only in the field of movie making that CGI is used. It is also frequently
used in other DMOs such as advertisements, music videos, etc.
Another important recent development is that the availability of CGI software and
increasingly powerful computers. This has meant that it is no longer only big studios with
lots of money that can use these tools and techniques. Today small companies or even
individuals are able to create high quality media relatively simply and cheaply.
There are, however, some negative implications of these developments.
 Viewers are becoming accustomed to increasingly sophisticated CGI effects. For a movie
to truly impress, the film making community is constantly pushed to improve their tools
and techniques. Few people understand the complexities of creating state-of-the-art
CGI effects. They take it for granted and expect the CGI effects in movies to be
increasingly realistic. CGI movies from only a few years before start to look dated and
amateurish as increasingly advanced CGI tools and techniques are used.
Figure 21: The 1996 movie Independence Day16
won an Academy Award for Visual Effects, but
those effects don’t come close to the realism and quality of CGI effects common in movies today
 For certain projects, specialist hardware, software, and personnel are needed to
capture and digitise/process the data. For example, the resources needed to create the
motion capture apes in Rise of the Planet of the Apes were very specialised. These
resources are often very costly and so it can be difficult (or impossible) for small
productions to use them.
16
Independence Day © 20th
Century Fox (Image source: http://wearemoviegeeks.com/wp-content/independence-day-white-
house.JPG - Accessed 15 March 2012).

Advanced Tools and Techniques
Today there are a substantial number of software applications which can be used to create
AV media. This ranges from proprietary software such as Avid®, Adobe® Premiere® Pro and
After Effects®, and Autodesk® Maya® to open source/freeware applications such as Blender
and Lightworks. Often a number of different applications are used together to create the
finished product.
In this section we look at some of the advanced tools and techniques used to create AV
media. This will include a discussion of how the use of these tools and techniques affects the
quality of the production. We will be using examples of tools and techniques available in the
Adobe Creative Suite CS5.5 (Premiere Pro, After Effects, Photoshop, etc). However, many of
these tools and techniques are also available in other software applications. Generally there
are significant similarities in the naming and use of these tools and techniques, regardless of
the application. As it we will not be able discuss all the possible tools and techniques in this
guide, you will be referred to websites where you can find more comprehensive information
on the tools and techniques that could be used.
We begin by looking at a crucial part of any AV media production: workflow.
Workflow
A lot goes into the creation of even a simple AV media production. A number of different
digital media elements (‘assets’) need to be integrated (eg audio, video, narration,
animation, still images, etc) to create the end product. Frequently, many different types of
applications are used together to create, edit and integrate the elements. And often there is
more than one person involved in the process.
In order to ensure the outcome is developed as efficiently as possible, careful organisation
and management of assets is therefore crucial.
This is where efficient workflow plays an important role. Workflow includes aspects of
planning and file and asset management.
Planning
Put briefly, this includes the following.
 Identifying all the assets and resources (including people, software and hardware)
needed to create the outcome, from start to finish.
 Establishing the tasks that need to be completed and prioritising resources accordingly
(ie deciding what resources are needed and when, and making sure they are available).
 Identifying and deciding which applications will be used for each aspect of production –
and how these will work together.
Often this planning is done using a range of visual tools such as flowcharts, Gantt charts and
storyboarding.

Storyboarding
Storyboarding is one key tool that can be used to organise the elements in an AV media
production. It is a visual way in which the different elements which make up the ‘story’ can
be shown, or that information can be conveyed.
A storyboard makes it possible to collect and organise ideas so that it provides a framework
for the production. It helps to plan the different shots that will be needed, the different
assets that will be used (eg voice over, audio effects, etc).
Below is an example of a storyboard – for the opening sequence of the movie: The Curious
Case of Benjamin Button.
Figure 22: A storyboard for the movie title of The Curious Case of Benjamin Button (by Liset Arias17
)
17
Motion Graphics: Storyboard for Movie Title by Liset Arias. Source: http://www.behance.net/gallery/Motion-Graphics-
Storyboard-for-movie-title/523473 (accessed 10 March 2012)

File and asset management procedures
Let’s look at some file and asset management procedures which apply to the context of AV
media.
File naming and organising
We have seen that an effective file naming convention and organisation system is important
when creating a digital media outcome. This is crucial in the case of AV media. Even a short,
fairly simple AV media production will consist of a huge number of files. This includes a
number of different file types (eg audio, video, still images, titles, etc).
If these files are not organised effectively, it can make finding anything a nightmare! Ways to
effectively manage files include the following.
 Using smart naming - Different files (video, audio, etc) need to be named in an
effective, logical and consistent manner. For example:
<Day>_<Scene>_<Take>_<project>.<Extension> (eg 12_04_02-RPTPOTA.mov).
If there is a particular naming convention used by the organisation producing the
project, the editor needs to ensure they comply with this.
 Grouping files - Assets need to grouped and organised logically. For example, different
asset types (audio, video, etc) should be stored in separate folders; footage for each
scene should be grouped together; etc.
Using effective and consistent file naming, as well organising and grouping assets in a logical
manner both help to ensure that assets can be easily and quickly found. It helps save the
time of having to search around for the file needed, and having to preview/open files to
check that they are the correct file.
Where more than one person is involved in the production of the outcome, this is
particularly important – helping to ensure that all members of the team are able find what
they need.
In the creation of an AV media production, any waste of time may also equate to a waste of
money. Therefore effective file and asset management also helps to save on the costs of
production.
Asset management
In many cases when developing a DMO (eg websites, print media) it is best to use the
smallest possible media files in the outcome, while still ensuring the media is of acceptable
quality (eg visual or audio clarity). For this reason, image, audio and video files incorporated
into a website, for example, are compressed.
In the case of AV media, it is important to work with the highest possible resolution of
media when creating the outcome. In other words, all the media assets incorporated into
the AV media production need to be at the highest possible resolution. This is to ensure
that the end product is as high quality as possible. For example, if a compressed still image is
used as part of a video, then if you need to zoom in on the image, it may become blurry.
The final, completed AV media production is compressed using a codec. A codec is software
used to compress and/or decompress a media file. There are hundreds of different codecs

which could be used to compress the production. The choice of which codec to use depends
on a number of factors including the:
 compression format or standard specified by the communication medium that is going
to be used to present the production (eg the movie theatre, television, internet, etc)
 type of production – for example, some codecs handle motion better than colour and
texture and vice versa.
All video editing software will offer a number of different codecs which can be used to
compress the video and/or audio.
Other considerations
 Because a wide range of media assets and other resources (people, equipment, etc) are
needed to create AV media, it is important that these are carefully planned to ensure
they are available when needed; and only when they are needed. For example, it can be
extremely expensive to hire camera equipment or an edit suite. Personnel like online
editors are also very costly. For this reason it is vital to ensure that there is never a
situation where a camera or edit suite is being paid for, but cannot be utilised because
of poor planning/organisation. In a film production, this job is done by the production
manager (in association with a number of other managers – eg unit manager,
production coordinator). In video editing, a senior editor or editing head of department
may have this role. Of course, for a small production (eg one created by an individual),
the individual(s) concerned are responsible for this aspect of resource management.
 Even for a small production, which one person creates themselves (eg motion graphics),
it is still important to think about which software and other resources will be used for
different aspects of the production. It is important to know which software works best
for a particular aspect of the project. The decision as to which is the ‘best software’ for
an aspect of the project depends on a number of factors including the:
o tools offered by the software
o ease and efficiency of completing the task using the software. Some tools are more
efficient than others because of the nature of the tools themselves. In other cases,
the most efficient software to use may be the one the user is most familiar with.
 Another consideration is the hardware needed to create the outcome. AV media
generally integrates digital assets with huge file sizes. Therefore, it is crucial that the
storage18
that is going to be used in the editing process is able to handle the size of the
source assets (ie the footage, audio, etc which will be edited and integrated into the
final product).
 Software such as Premiere Pro and Lightworks have tools which allow for collaborative
workflow editing. This means that more than one person (and computer system) can
work on the same project at the same time. This helps speed up workflow significantly.
 In a more general sense, workflow refers to the order in which different aspects of the
production process are done. We have looked at storyboarding, which is often the
starting point for a project, but what comes after that will depend on the specific project.
18
For example: A hard drive(s) and/or a media storage system such as the DIVA Media System
(http://www.group6.co.nz/DIVA.aspx).

However, in general, the following ‘steps’ are involved in producing most AV media
outcomes.
o Capturing and digitising
o Editing sequences
o Adding effects, transitions and titles
o Rendering and exporting
o Adding simple interactive controls
Let’s look at each of these aspects of the production process and the advanced tools and
techniques they commonly include.
Importing, capturing and digitising
Depending on the type of project, the software being used and the type of source material,
there are three basic ways in which to bring assets (media files) into a project: importing,
capturing or digitising.
Importing
Media that is already in the form of a digital file(s) is imported or ingested into a video
editing application. This could include video, still images, and/or audio. The digital files are
ingested into a format that the editing software can understand (ie they can be edited by
the application).
For source assets which are not already in the form of digital files, capturing or digitising is
used to make the files available to the software for editing.
Capturing
Capturing is the process of recording video from the source to the hard drive of the
computer being used.
Digital video is captured in two ways:
 Tape – For video recorded on tape, it first needs to be saved on the computer hard
drive before the software can use it in a project.
 Live camera – eg Premiere Pro makes it possible for the user to communicate with the
device used to capture video (ie digital video camera) from the Capture panel or by
using Adobe OnLocation.
Digitising
There are still some cases where analogue video is recorded using, for example, analogue
camcorders. In order for this video to be stored and edited on computer, it needs to be
converted into digital form (digitised).

In the case of both capturing and digitising, the software saves the source media to hard
drive as files. The files are then imported into editing projects as clips.
Organising the footage
Most video editing applications provide tools for organising footage and arranging clips in a
‘storyboard’ so that a sequence can be easily put together. A sequence is a series of scenes
which form a distinct part of an AV media production. Each sequence may consist of a
number of clips (video, audio, still images), transitions and effects.
Editing sequences
The next step in the process is to create a new
project and to assemble and refine the
sequences which make up the project. Video
editing applications offer a range of tools for
the creating and editing of sequences. For
example, Premiere Pro has a Source Monitor,
Program Monitor and Timeline Panel. These
tools work together to allow the editor to
preview, prepare and add clips to a sequence.
Once the clips (audio, video, still images) are placed on the timeline they can be rearranged
into a desired order – to make a logical ‘story’. The In and Out points are set on the clip (a
process known as trimming) – to set the start and finish points of a clip. The speed of a clip
(or parts of a clip) can even be changed. This includes slowing it down (slow motion),
speeding it up or even rewinding it.
Layering/compositing
A key editing technique is creating multiple layers. In video editing software, this is known
as layering. There could be multiple layers of video (eg titles, superimposed images) and/or
audio (eg voiceovers, ‘background’ music).
In motion graphics software like Adobe After Effects, this use of layers is called compositing.
For this reason, this type of software is sometimes also called compositing software.
Generally, motion graphics software provides a much wider range of compositing tools than
video editing software (eg Premiere Pro).
Working in more than one application
As we saw in the section on workflow, often more than one application is involved in the
creation of AV media. A common workflow involves importing composites made using the
motion graphics application into the video editing software. In many cases other
applications, such as image manipulation software like Photoshop, are also included in the
process.
The dynamic link feature of Adobe CS5.5 (which includes applications like After Effects,
Premiere Pro and Encore – DVD authoring software) makes working with these different
Project, sequence and clips
The entire video is known as a project.
A project consists of at least one
sequence, which in turn will be made up
of a number of clips (eg audio, video).

applications easier and more efficient than ever before. In the past, a clip would need to be
rendered and then exported from one application and then imported into the other
application(s). This was both time-consuming and inefficient. With dynamic link, the user
can have a number of applications open at the same time and work in them dynamically. In
other words, if a change is made to a clip in Photoshop, the same change is automatically
made to that clip in After Effects and/or Premiere Pro. This change is made live (ie it
happens immediately).
Multiple timelines
Many AV media productions consist of a number of different sequences. Software like
Premiere Pro makes it possible to work with more than one sequence at a time in multiple
timeline panels. The advantage of this is that a number of clips can be edited separately and
then combined later.
Other editing activities include adding transitions and effects to the clips.
Transitions and effects
Once the In and Out points have been set for clips, transitions and effects can be added.
Video editing and motion graphics/compositing software offer a wide range of built-in
transitions and effects. Higher end software also makes it possible for a user to create their
own transitions and/or effects, or to edit and customise a built-in transition/effect to suit
the specific needs of the project.
Applications like Premiere Pro offer a wide range of both audio and video transitions and
effects. Each serves a specific purpose in terms of communicating meaning and adding to
the quality of the project. We are going to look at some examples of built-in transitions and
effects that are commonly used in film and video productions, and what they conventionally
used for. We will be referring to the teaser trailer for Rise of the Planet of the Apes19
to give
some examples of these transitions and effects.
Hard Cut
A hard cut is the move from one clip to another without a transition effect. This includes a
‘cut to black’, which is where it cuts from a picture clip to black. This is a very abrupt
transition and is often used to create drama, a sense of anxiety, etc.
The duration (number of frames) of black between one scene and the next scene, is an
indicator of the length of time that has passed in the ‘story’. A longer period of black can
indicate that a longer period of time has passed, or it can be used to build suspense.
The screenshots in Figure 23 show an example of a hard cut (to black). Here the cut to black
is used to build suspense. The black is held for quite a large number of frames – showing
both the passage of time, but also building suspense. The audience has just seen the ape
manage to lever open the lock on his cage and the audience is left in suspense wanting to
know “what is going to happen next?”. These scenes are accompanied by very dramatic
music (audio effect) which helps to further build the suspense.
19
Teaser trailer for Rise of the Planet of the Apes (2011) © 20th
Century Fox

Figure 23: Example of hard cut to black (Rise of the Planet of the Apes trailer [1ꞌꞌ06-1ꞌꞌ10])
Cross dissolve
The cross dissolve is where two shots overlap for the duration of the transition. This is an example of layering in action because one layer is
superimposed on top of another. The opacity of one or both of the layers is adjusted so that it is partially transparent (see Figure 24).
Figure 24: Example of cross dissolve (Rise of the Planet of the Apes trailer [20ꞌ])
This transition is often use to link two scenes which take place at different times and/or in different places, but which are linked in terms of
content matter. In the example above, the director of the research institute is instructing the lead character to stop testing on the chimps
immediately. This is superimposed with a shot of the lead character (and his research team), removing the chimps from the research facility.

Another common use of the cross dissolve is for titling. For example, a title created using an image manipulation or motion graphics
application is composited (layered) with video footage. Again, this is often used to link the title with the ‘action’ taking place in the clip it is
overlaying.
Towards the middle of the Rise of the Planet of the Apes trailer, titling (“EVOLUTION” …. “BECOMES” …. “REVOLUTION”) and cross dissolve
transitions are used together. Below, a dissolve transition is shown from the title BECOMES to the scene showing the apes running rampant on
the Golden Gate Bridge (San Francisco). The link between the title (BECOMES) and the scene gives an indication is that this is what ‘evolution’ has
become. Yet again, this helps to build interest and suspense. Not only does the audience want to know what comes next in the trailer, they are
also encouraged to see the movie as a whole to ‘fill in the gaps’.
Figure 25: Example of title with cross dissolve (Rise of the Planet of the Apes trailer [1ꞌꞌ45-1ꞌꞌ46])
Fade out (fade to black) and fade in
This is a transition effect commonly used to move from one scene to another. Unlike a hard cut, this type of transition is generally used to
communicate a calm, relaxed sense. In the first part of the trailer for Rise of the Planet of the Apes, the predominant type of transition used is
the fade out and fade in. This gives the audience a ‘false sense of security’. Everything seems to be fine and as yet there is no danger evident.
However, the dramatic music does give a clue that this is about to change.
As with the cut to black, a fade out to, and in from, black is used to show a passing of time.
In some cases, effects are added to transitions to give them even more impact.

Colour grading effect
Colour grading refers to colour adjustments made to a clip for a creative reason (rather than to correct colour problems in the clip). Motion
graphics software (like After Effects) and image manipulation software (like Photoshop) have a number of tools to make it easy to add colour
grading effects to clips or images.
We see an example of this early on in the Rise of the Planet of the Apes trailer. The screenshots in Figure 26 show how the scene where the
lead actor is talking about the ‘serum’ he has developed. At the end of the clip he says: “We call it the cure”. As he says the words “the cure”
there is a hard cut to an image of the serum. Added to this hard cut, the image of the serum has a colour grading effect which results in a
highlight (or lighting pulse/accent) on the serum. This emphasises the importance of this serum to the storyline and adds a sense of danger.
Again, it makes the viewer want to find out what this serum is, what is going to happen with the serum, etc.
Figure 26: Example of colour grading (Rise of the Planet of the Apes trailer [16ꞌ-18ꞌ])
Audio effects
Audio is a very important part of AV media. It helps to convey meaning by supporting, or in some cases contradicting, the visual elements in
the production. Try watching a horror film or thriller with the sound turned off – it is nowhere near as scary as with the audio! Or try watching
a children’s cartoon without the sound – it is not nearly as exciting (or as irritating for adults!). In the case of trailers, advertisements, music
videos and other short AV media, the creators need to convey as much meaning and ‘atmosphere’ as possible in a very short space of time. In
this context, effective use of audio is paramount to a successful production.
In the Rise of the Planet of the Apes trailer, audio is used very effectively to build suspense and drama. Audio effects like fade in and fade out
are synchronised with fade to black and fade in visual transitions to add to the impact of these transitions. For example, in the sequence shown
in Figure 27, sound effects are used to support the visual imagery: a siren sound that comes in ‘hard’ with the hard cut and fades out with the

fade out of each scene. Along with this is a ‘voice-over’ (audio from a scene in the film): “They are contaminated …” and “You have no idea what
you’re dealing with.”
Figure 27: Audio effects synchronised with visuals (Rise of the Planet of the Apes trailer [1ꞌꞌ10-1ꞌꞌ30])
We have only discussed a few of the transitions and effects offered by most AV media applications. To find out more, access the help resources
of the applications you are familiar with.
Titles
Titles are another important part of any AV media. We have already seem some examples of how titling can be used in a trailer to help support
the communication purpose of the trailer (see page 68). They are also used to give the title of the production and the credits. Fairly simple
titles and credits can be created using a titling tool in an application like Premiere Pro. For anyone who has used a word processor, the titling
tool is very easy to use. Shapes, colours, and stylised text can be added to a clip in much the same way as would be done in a word processor.
The title can also be made to ‘roll’ (eg credits which roll vertically up the screen) or ‘crawl’ (eg credits which move horizontally across the
screen).
More complex titles may be created in a motion graphics application like After Effects and then imported into the production in Premiere Pro. For
example, the title for the Rise of the Planet of the Apes trailer (see Figure 28) was probably created in a motion graphics application like After
Effects, where 3D and lighting effects (shadow, etc) were added. Then the composite title was exported from After Effects and imported into a
video editing application. It would then have been placed in the appropriate position on the timeline and edited (eg transitions added, etc).

Figure 28: Movie title (Rise of the Planet of the Apes trailer [2ꞌꞌ01-2ꞌꞌ04])
Looping
Looping is a technique commonly used in animation. It is the process of repeating frames numerous times, rather than having to copy and
paste them over and over. This helps to save a lot of time in the animation process. In an application such as After Effects, 3D Studio Max or
Maya a visual footage item can be repeated a specified number of times.
For example, watch the video Kiwi! on YouTube (http://www.youtube.com/watch?v=sdUUx5FdySs&ob=av3e). This animated film was created
by Dony Permedi, using After Effects and Maya.
From around 1ꞌꞌ52 in the video looping is extensively used (see Figure 29). To create the animation of the kiwi bird flying/falling, at least three
loops (on three different tracks) were used: One for the landscape, one for the clouds, and one for the kiwi bird. The length of footage looped
for each track is different (eg there may be more frames of the clouds looping than there are of the landscape). In addition one layer (the cloud
background layer) is rotated. Using different loops and rotating an additional layer work together to give the impression of an ever changing
background (landscape and clouds) in relation to the bird. This is much more efficient than having to create and render unique landscape
footage.

Figure 29: Looping (Kiwi! by Dony Permedi)
Previewing
Previewing is an important part of the process of creating AV media - it is one of the key testing techniques. Generally each part of a project or
composition is previewed as it is created – rather than just previewing the completed project/composition at the end. To preview the
sequence or part of a composition, it needs to be rendered. Preview files are created which are then viewed to check the sequence. Often, to
save time and storage space, these previews are down-sampled (ie they are not full resolution). Many software applications also make it
possible to preview what a composition/project will look like on a different output device (eg a mobile phone).
There are a number of different elements which need to be checked during this preview. This includes checking the following.
 That all the media elements (audio, video, titling, effects, voice over, etc) are synchronised the way they need to be. For instance, in the
example discussed on page 69 we saw how audio and visual elements in the Rise of the Planet of the Apes trailer needed to synchronise
precisely for the desired effect.
 That the elements are correctly positioned. For example, are the titles in the correct position in relation to the images; are different
images in the correct position in relation to each other; are different layers in the correct order; etc?
 In big film productions, a continuity editor checks the continuity of footage (eg that a character isn’t holding a cup in their right hand in
one sequence and then in the next, the cup is suddenly in their left hand). The editor may also check for things that could cause copyright

or trademark infringements (eg a branded product which is central to a shot). However,
in smaller projects, this may need to be checked by the same person who is doing the
editing of the footage.
 Spelling/grammar checking of titles/credits, etc.
Rendering and Exporting
The final step in creating AV media is to export the composition/project in the desired
format and quality.
In the case of a composition created in a motion graphics/compositing application, the
composition first needs to be rendered. Rendering is the process of turning a composition
into the frames of a movie. Once the composition has been rendered it can be exported.
There are a variety of different ways in which a movie can be exported, depending on what
the exported movie is going to be used for and how it will be viewed/used.
For example, it might be exported for further editing; exported to tape, DVD or Blu-ray; or
prepared for uploading to a video sharing website. In cases where the movie is going to be
broadcast (TV, movie house, website, etc) it will need to be exported in keeping with the
specifications set by the broadcaster. (Refer to the section on Standards).

NOTES

© ATC New Zealand Ltd
21 Ruakura Rd
Hamilton East
Hamilton 3216
Fax: 0800 864 865
Email: info@instant.org.nz
Web: www.instant.org.nz
DT2.42: Advanced Digital Media Concepts
(Learner’s Guide)
Learning resource for:
Achievement Standard 91369 – Version 2
Demonstrate understanding of advanced concepts of
digital media.
(Level 2, Credits 4)
The greatest possible care has been taken in the preparation of the content
in this publication. However, Instant Education Solutions does not accept any
liability for the completeness, accuracy or currency of the content herein.
Every effort has also been made to ensure this publication complies with all
relevant copyright regulations. If you have concerns regarding copyright or
content, please contact us.

Advanced digital media concepts

More Related Content

What's hot (20)

Similar to Advanced digital media concepts (20)

More from Debbie-Ann Hall (20)

Recently uploaded (20)

Advanced digital media concepts