Sedgwick e0498336-d0105-31189a-checkpoint d

of 27
Colleen Sedgwick (E0498332)
Welcome to Self-check B and your set of Progress Challenges, each of which
is designed help you and your assessor track your progress throughout each
module. While your assessor will monitor your work when you submit at self-
checks, this may not result in direct feedback.
Instructions
1. Complete each Progress Challenge as detailed in the module.
2. Correctly label and then upload a PDF or ZIP for each Progress
Challenge in the module:
a. Progress challenge 5: Natural History Museum
b. Progress challenge 6: Design
c. Progress challenge 7: Review and confirm
3. Click ‘Submit for Marking’ to complete this Self-check.
Tips
You can edit your work and upload again, prior to submission.
To return to the Progress Challenges, click here.

of 27
31189a - Progress challenge 5
Natural History Museum
NOTE: This challenge will help you complete assessment 4.
Choose a website for a popular Natural History Museum and construct a
diagram of the site’s navigation structure.
Examine the menu system and explore the different levels.
You do not have to read all the content but take note of the page names.
Perhaps there is a site map to help with this. Your diagram should reflect
content and where to find it.
What types of content are most effective on the site?
Now do a search for ‘T Rex’ or other fossil. Is it in the section that you were
expecting?
How would you rate the site out of 10 for usability and for content?
Discuss.
What suggestions would you make to improve the structure and
information architecture of the site?
Record your findings and once again, your research should be a minimum of
one page in length.
Answer
I chose The Australian Museum for this challenge1
. Anyone who has an
interest in natural history is sure to find it worthwhile.
We can see in this screenshot (on the home page), there is a navigation
menu below the header. This has eight sections: a home page, what’s on,
our science, cultures, education, animals, blog and ‘about us’.
The bottom of the home page has a footer, which has another navigation
menu in the bottom left corner. This has four sections: a site map2
,
privacy3
, copyright4
, and accessibility5
.
I clicked on the animals section and found ‘dinosaurs’6
amongst the
thumbnail shots. I then followed the link stating ‘Tyrannosaurs’7
, and then
followed the prompts on the Tyrannosaurs ‘family tree’ (the technical name
being ‘raptorex’ for this species, according to the upload on the site)8
.
1
Australian Museum (2017): Home Page, http://australianmuseum.net.au/
2
Australian Museum (2017): Site Map, http://australianmuseum.net.au/sitemap
3
Australian Museum (2017): Privacy, http://australianmuseum.net.au/privacy
4
Australian Museum (2017): Copyright, http://australianmuseum.net.au/copyright
5
Australian Museum (2017): Accessibility; http://australianmuseum.net.au/accessibility
6
Australian Museum (2017): Dinosaurs and their Relatives,
http://australianmuseum.net.au/dinosaurs-and-their-relatives
7
Australian Museum (2017): More about Tyrannosaurs,
http://australianmuseum.net.au/more-about-tyrannosaurs
8
Australian Museum (2017): Tyrannosaur Family Tree,
http://australianmuseum.net.au/uploads/documents/29739/tyrannosaur%20family%20tree.
jpg

of 27
There is also a search bar in the top right corner. I typed‘t-rex’ in there
and found 37 results in total. I could click on any link, depending upon the
information I was after. I clicked on ‘Giant T-Rex Gifted to Australian
Museum’9
. Finally, I was able to find the exact section it was related to
(Media Centre)10
. The Media Centre can also be accessed in the page’s
footer.
Out of all these sections, I found the search bar the most effective in terms
of finding specific information, and the site map (which arranges the names
in alphabetical order) the least effective. The reason is that you have to
scroll down the lists before you find the information you need. That can be
annoying if you are pushed for time.
The useability and accessibility is good, I would probably rate it eight or 9
out of 10. The accessibility page shows you how to navigate the site. The
information is well presented and would especially appeal to children and
young people (so it is educational). For people who may have difficulty
reading the text, you can go to the accessibility page and find out how to
change the size of the text to suit your reading needs.
I would not change anything about the site, except the site map (I would
arrange it in some kind of hierarchy, which would make it easier to know
where to look). Hence, if I wanted to find a particular item on the T-Rex, I
would know exactly where to look.
9
Australian Museum (2017): Giant T-rex gifted to Australian Museum,
http://australianmuseum.net.au/media/giant-t-rex-gifted-to-australian-museum
10
Australian Museum (2017): Media Resources, http://australianmuseum.net.au/media-
resources

of 27
31189a - Progress challenge 6
Design
Create a design for the web environments
Draw a one-page site diagram using a drawing package that shows typical
pages and their relationship (show no more than 10 web pages).
Construct a wireframe of a chosen page (one page).
Convert the wireframe into a static screen design using graphics software
(one page). This screen layout should show:
1. Navigation elements
2. Actual content and media elements. Source these elements from sites
that share royalty-free content.
3. Metaphor
4. Actual meaningful text (not Lorem Ipsum).
Answer
Here is the hand-drawn diagram of my website (how I originally hoped to
‘construct’ it). There are three categories of ‘handbags’ and purses:
women’s bags (for going out) – handbags and shoulder bags for instance;
wallets and purses (men’s and women’s); and backpacks/luggage. These
three categories were originally going to be in the top navigation bar.
There was also going to be a footer (or bottom navigation bar) with a
contact page, an order form, a shipping policy and a privacy policy. There
are probably more than ten pages on this so I may have to pare this down,
and put all the product categories under ‘Products’.

of 27
An alternative way is through card sorting, where, according to Paul Boag11
,
is a way of sorting through the ‘information architecture’ of the site (the
above drawing at least gives me an idea as to how many pages and
categories are within the site). Sam NG12
, of UX Matters believes that card
sorting is:
… Information architecture comprises a
navigation system, a classification system, a
labelling system, and a search system.
Card sorting certainly can provide input into an
organization system— What content goes
together—and a labelling system—what to call
things —but it has very little to do with a
navigation system or a search system.
Here is how Boag believes one could go about it:
Simply label 20-30 index cards with headings
from the various sections, subsections and pages
of your website. Depending on the complexity of
the site, you might also wish to include a brief
description. It is also useful to number the cards
so that you can more easily analyse the results of
your test later.
11
Boag, P (2005): Card Sorting, in Boag World, https://boagworld.com/usability/card-
sorting; Accessed 22nd
November, 2016;
12
NG, S (2007): Card Sorting – Mistakes Made and Lessons Learned, in UX Matters,
http://www.uxmatters.com/mt/archives/2007/09/card-sorting-mistakes-made-and-
lessons-learned.php

of 27
In other words, I can brainstorm all the categories I can think of, and then if
I make a mistake, I can correct it by moving the cards around to see what is
suitable for each category.
I did a card sort using sticky, ‘post-it’ notes with all the pages and
categories I could think of. I figured it would be easier to correct than
simply doing a drawing on paper because I can correct any mistakes I may
have made, and/or pare down the number of pages to 10 (so far, I have 14
but I could either lump 2 or more similar categories together or remove any
that might be irrelevant).
An alternative option (for navigation) is through ‘breadcrumb trails’, where
the ‘crumbs’ are situated horizontally on top of the page below a title bar
or header. They often…
‘…provide a trail for the user to follow back to
the starting or entry point. A greater-than sign (>)
often serves as hierarchy separator, although
designers may use other glyphs (such as » or ›), as
well as various graphical icons’13
.
The term ‘breadcrumb’:
‘The term comes from the trail of bread crumbs
left by Hansel and Gretel in the fairy tale of the
same name’14
Examples of breadcrumbs:
Page viewed > Page viewed > Page viewed > Page viewed > Page
currently being viewed
A viewer may look at seven pages and the breadcrumbs will show as
follows: Home page > Services > About Us > Home page > Latest
Newsletter > Home page > Page currently being viewed
Other breadcrumbs will show a hierarchical structure: Home page >
Section page > Subsection page
I have also constructed a ‘wireframe’ using Photoshop, and here is what I
hope the home page would look like. It has a header with the logo,
navigation bar and contact page, but no order form, shipping or privacy
policy. I have a coral, white and black (or dark grey) colour scheme in mind
(even though the header for wireframe template is orange, it is the next
best thing to coral, or pinkish-red).
13
Wikipedia (2016): Breadcrumb (Navigation),
https://en.wikipedia.org/wiki/Breadcrumb_(navigation)?oldid=759141583
14
Ibid; see also Mark Levene (18 October 2010). An Introduction to Search Engines and Web
Navigation (second Ed.). Wiley. p. 221. ISBN 978-0470526842. Retrieved 12 November
2012. in http://books.google.com.pk/books?id=mDI72_9-bw0C&pg=PA221;

of 27
Content and Media Elements
The ‘star’ product is what I call my ‘furry purse’ bag – which is a women’s
handbag that is furry (made of faux fur, so no animals suffered any harm in
the process15
). Though it the featured product, the bag was actually
something I bought from a local second-hand shop a few years’ ago. I have
several pictures of this item, which I have taken for myself.
Another item I have included is the ‘furry purse’ makeup bag – a bag or
purse with many uses: a clutch bag, a make-up or toiletries bag (good for
travel), a purse or a cuddly toy. Again, I bought this item from the same
local second-hand shop as the ‘furry purse’ bag.
I have decided to include textures and colours of several furry toys and
items I own in my home, which I believe will give me some ideas for more
personalised designs of this product.
15
People for the Ethical Treatment of Animals (2016): Video of Crocodile Skin Handbag
Making, in the PETA Official Facebook Page,
https://www.facebook.com/official.peta/videos/10154885036849586/; and ‘This is why I
don’t wear leather’; https://www.facebook.com/official.peta/videos/10154130847364586/
(more relevant to the concept of the Furry Purse Bag); and ‘Trapped Animal’s Final
Moments of Life, in https://www.facebook.com/official.peta/videos/10154739608119586/

of 27
I had also constructed a logo for The Bag Lady, with a simple picture of a
handbag and the ‘lust script’ for the text.
Metaphors
According to Wikipedia16
, metaphors are:
‘…sets of user interface visuals, actions and
procedures that exploit specific knowledge that
users already have of other domains.’
Katalin Szabo17
explains the historical origins of the word ‘metaphor’:
Originally, a Greek word means, "Carrying across".
The essence of metaphor is to give an idea of
some unknown thing or concept, by illustrating it
with something else which is known and which
originally has nothing to do with it. The metaphor
identifies the two things with each other, for the
purpose of illustration. In fact, the metaphor is
an error committed on purpose, because the two
things, which are said to be identical, are in fact
not identical.
About the ‘world wide web’, she also states that:
The Web can be pictured as a three-dimensional
network connecting computers (or files or
16
Wikipedia (2016): Interface Metaphor,
https://en.wikipedia.org/wiki/Interface_metaphor?oldid=758927925;
17
Szabo, K (1995): Metaphors and the User Interface,
http://www.katalinszabo.com/metaphor.htm

of 27
persons) situated in different points of the globe.
The web is constantly changing, growing.
However, it is not a spider's web: there is no
spider in the centre (and there is no centre,
either). We can also regard it as a network in a
fictitious multi-dimensional space,
interconnecting complex data structures.
She then states that one can liken the Internet to:
A Living organism: the Net can be regarded as a
constantly changing, developing organism
consisting of cells, which come to life and die.
The organism itself may die if too many cells die
in it.
A big coral reef that is made up from lots of tiny
beings, each of them contributing a little to the
reef, which in itself is much more than just the
tiny contributions added together.
A big real estate market: real space can be a
metaphor for Cyberspace. The real estates (i.e.
"places" in the Net) can be sold, rented, some are
more valuable than others. It is difficult to
predict the future value of any particular estate,
but there are certain trends. There is a gold rush
as well - but not too much gold is to be seen yet.
A Large department store: It is huge and quite
disorganised. If we find something, than it is
likely that the goods around it are of similar
nature, but similar goods can be found at any
other place in the store, too. We usually cannot
find an item, which exactly matches our needs,
but it is likely that we will find something similar.
We find many things, which we do not really
need, but we take them anyway because they are
so cheap.
I personally like the fourth metaphor as The Bag Lady is an online retail
store, marketplace or environment where items are bought and sold (so this
analogy is quite fitting).
Hence, they are analogies or themes for sites to help unify the various
pages. In CSS Zen Garden, different designers contribute themed CSS
designs to bring a standard web page to life18
. Each example uses a different
metaphor although the content is identical.
By using meaningful images and assets that support the metaphor, the user
will find the environment clear and will be able to make sense of it.
18
CSS Zen Garden (2016): The Beauty of CSS Design http://www.csszengarden.com/

of 27
Text
Home Page:
There is a picture accompanying this text.
Some other text will be saying: Order now for July 2017 – for just $50 AUD.
I will most likely link this text up with an order form.
‘About us’:
Manager: John Simpson, Bag Maker
John Simpson has been designing and manufacturing his unique handbags
since 1997. He gained his qualifications in Fashion design through the
Sydney College of the Arts in 1996. Prior to that, he gained an Advanced
Certificate in Fashion through the St George College of TAFE in 1992. He
currently has a market stall in Rockdale Plaza.
Designer:
Colleen Sedgwick, UX DESIGNER
Colleen Sedgwick has been an Artist and Designer since 2011. She had
completed a Certificate I in Cartooning and Illustration in 2011, and a
Certificate I in Illustration and Drawing Made Easy, both through Open
Colleges School of Art and Design. She is now near completion of a Diploma
of Graphic Design though the same school.

of 27
For the Blog:
The story of the Furry Purse Bag: Uses for a Furry Purse by
Colleen Sedgwick
I owned a furry purse when I was younger (during the late 1970s and early
1980s). One of the main uses for it was to carry money in, so the main use
for it was to carry and store money, credit cards, receipts and the like.
So anyway, here were some of the things one would assume about a furry
purse:
1. It is for carrying money in;
2. It is for females – especially old ladies;
3. An animal had to die (like a kangaroo) so someone could have a furry
purse;
4. It is old-fashioned. - Who carries one nowadays?
5. They go 'mangy'
However, what if:
1. Furry purses had uses other than the storage of money.
2. That people, other than old women, could have one.
3. That they came back into fashion.
4. That they could be made from synthetic fur, or wool, or any material
other than real fur (after all, wallets can be made either out of
leather or out of something else, so why not furry purses)?
5. In addition, because they are not made of real fur, they do not have
to go mangy as they wear out.
Moreover, other than as a purse, a furry purse could be used as:
1. A face or hand warmer
2. A cuddly toy (like a teddy bear)
3. A Muppet (one of Jim Henson's creations), a bit like Cookie Monster,
Oscar, Grover or any of the other similar looking Muppets or Sesame
Street characters;
4. A 'man-purse' where one could re-use the fur and make it into a furry
wallet for men;
5. Patch-work creations, made up of still-good pieces of fur or leather;
6. A leather purse (if the fur has worn off).
7. Now – add some handles for a hand or shoulder bag.
From these humble beginnings *emerged* the Furry Purse Bag – the fluffy
carryall for all your fashion needs.
Please note: the modern Furry Purse Bag is made from faux fur, so no furry
animals were harmed in the procuring or manufacture of these bags.

of 27
31189a – Progress Challenge 07
Review and confirm
Design a short questionnaire of 10 questions to gather feedback about your
designs. Contact at least five people willing to assist with this. Ask them to
respond and provide meaningful feedback about the work you have
completed in Part C, in particular the static screen design.
Compile all the pages you have worked through in the assessment up
to this point into a final well-presented document. Include a table of
contents, title and your name.
Check that the design is a strong solution to the original brief.
Check that all the required parts are listed, including a sample of
your questionnaire.
Refine or add other components to your design in light of feedback
from your client (trainer) and others.
Export the document as a .pdf and submit the document for marking.
Answer
Establishing client needs
According to Luke Reimer19
in Smashing Magazine, the web design process
has five main steps:
1. Planning: Knowing what the client’s requirements are; drawing up a
project charter (or similar document) to ensure everyone agrees upon
the same things; draw up a site plan or map; draw up a contract
(which is legally binding); gain access to servers and build folder
structure; and determine required software and resources.
2. Designing: Make a wireframe and plan design elements; design a
mock-up in Photoshop or Illustrator (and organise your prototype into
layers as you do so); get the client to review/approve site and/or
make any necessary changes based on their feedback.
3. Develop the web content: Build a development framework or
contents management system, create/code templates for each page
type (e.g. Home page, general content, blogs, forms etc); develop
and test for features and user interactivity (particularly for static
objects); fill with content (the client or writer will usually do this);
and test and verify links and functionality.
4. Launch the website for public viewing: this involves polishing up the
site and testing for user interactivity beforehand, and then moving it
to a permanent web server. You also need to run the website
through the following things: code validators, broken link checkers,
19
Reimer, L (2011): Following a Web Design Process;
https://www.smashingmagazine.com/2011/06/following-a-web-design-process/

of 27
website health checks, spell-checker etc; before finally testing it
across different kinds of browsers.
5. Perform post-launch checks: ensure that both parties meet all the
contractual obligations; that the client is happy with what you have
done for them; and that you close the deal without any ‘burned-
bridges’. Do follow-up checks very now and then to ensure the client
is still satisfied.
Ten questions I am likely to ask (in the beginning) would include:
1. What do you want as the domain name?
2. What is the purpose of the site? Is it a blog, e-commerce site,
portfolio site, etc?
3. What are the desired outcomes of the site? Social networking? Sales?
Blogging?
4. What kinds of people make up the target audience of the site?
5. What web design software do you want me to use?
6. If it is a DIY site, what online tools would you use or have me use?
7. How many pages and/or components (i.e. widgets and other
elements) shall I include? Examples would include forms like contact
forms, order forms, booking forms; videos; web banners; click-on
things like drop-down menus and navigation; and accordions or tabs
to reveal hidden information.
8. What colour schemes, fonts, and layouts would you like to see?
9. For how long do you plan to have the site up?
10.Would you like follow-up service after the design is finished?
Establish your target audience
What audience is the site aimed at? An example would be John’s customers
– the people buying the bags from The Bag Lady and/or the end users (who
are likely to use the bags).
Work out the best User Experience for your target audience
The Open Colleges e-book defines User experience (UX) as:
… thinking about how a user interacts with a site.
It considers the user’s expectations and abilities,
and why they may be visiting a site. A good web
environment tries to improve the user’s
experience as they navigate around a site.
They also add:
One way to consider the usability of a site is to
use the Usability Honeycomb by Peter Morville
(visit LINK 4 to find out more). Ask yourself if a
particular site meets these conditions –

of 27
Hence, we judge the site by these criteria:
• Useful: Meets a need – people can access information on The Bag
Lady’s products and services
• Usable: Easy to use – navigation bar at top showing categories of
products, store locations, departments; able to click on the images for more
information on the different products, rolling banner showing latest news;
disclaimers; cookies policy – makes information easier to access
• Desirable: Carries through the branding of the product and creates an
image – the logo and colour scheme are shown throughout the site.
• Findable: Desired content is easy to find – the site is accessible via
Google and other search engines; and information is available via navigation
bar and other links within the site.
• Accessible: People with disabilities can access the information.
Actually, I am not sure, because people with visual impairments might not
be able to access the site. However, the availability of online ordering
makes it easy for people with mobility issues to purchase items.
• Credible: The information presented is trustworthy and up-to-date.
There is a Terms and Conditions page20
, privacy policy and cookies policy.
In addition, there is a returns policy for anyone dissatisfied with his or her
purchase.
(As well, you should be able to follow the site through social media if you
cannot always look up the website).
Testing
As my computer has Google Chrome and Internet Explorer, I am most likely
to use these browsers to test the website.
So, what I would need to know is what browsers does my client use, how
will the website look when using them, and what devices will the client use?
In turn, this will determine how I will design the web site, in terms of what
20
IKEA (2015): Terms and Conditions 2015,
http://www.ikea.com/ms/en_AU/media/pdf/tasmania/IKEA_terms_2015_Tasmania.pdf

of 27
content could I include on it, whether or not I would have to do a fixed or
fluid width, include responsive or static content, or should it be mobile-only
site.
Hardware and software
What hardware and software would the site work best on? How would John
consider getting the word out there via media?
Category Description and comparison
Delivery platforms
These include CD-ROM, DVD, BlueRay, mobile device, digital
television, internet (including WWW, FTP, document attachment/
download, instant messaging, social media).
For this, I chose digital TV (DTV). Here in Australia, DTV was introduced as
Digital Terrestrial TV, while analogue TV was phased out in 201321
. It first
came to air in the early 2000’s. Wikipedia defines Digital television (DTV)
as:
… The transmission of audio and video by digitally processed and
multiplexed signal, in contrast to the totally analogue and channel
separated signals used by analogue television. Digital TV can support
more than one program in the same channel bandwidth22
.
The advantages of digital over analogue TV include sharper DVD-quality
widescreen pictures, CD-quality digital stereo sound and improved
reception. Digital TV also enables broadcasters to offer more services or
show multiple programs at the same time and a number of new TV channels
to choose from. Other benefits include closed captioning, providing deaf
and hearing impaired people with a text version of dialogue, electronic
program guides which display on screen information on current and future
programming and multi view, where different camera angles of a program,
such as a sports program, can be viewed23
(mind you, this is not on my own
TV, but some top-of-the-range brands include this feature). 
You can receive digital TV on your current analogue television provided the
television can be connected to a set top box. Alternatively, digital TV
signals can be received on an integrated digital television where a digital
receiver is built into the set. All you needed was a TV and a good aerial
when it was just analogue TV. 
This would be useful in considering if John had intentions of advertising on
television (digital TV has now replaced analogue TV for transmission).
21
Wikipedia (2016): Digital Terrestrial Television in Australia,
https://en.wikipedia.org/wiki/Digital_terrestrial_television_in_Australia?oldid=753505491
22
Wikipedia (2016): Digital Television;
https://en.wikipedia.org/wiki/Digital_television?oldid=752611422
23
Australian Communications and Media Authority (2016): Digital Television – Frequently
Asked Questions, http://www.acma.gov.au/Industry/Broadcast/Spectrum-for-
broadcasting/Spectrum-digital-television/digital-television-frequently-asked-questions

of 27
Operating systems
These include Apple, Windows, Android, UNIX, Linux, Nintendo, and
Sony.
I mostly use Windows, so I thought I would write about their main
competitor, Apple (also called a Mac, an Apple Mac, or Apple Macintosh).
This is usually the term for desktop and laptop computers. The iMac24
is the
desktop model; the Mac Book25
, Mac Book Pro26
and Mac Book Air27
are all
laptop models.
One obvious advantage of the iMac is its onscreen image quality (or what
they call Retina display). Other advantages or benefits of owning an iMac
include high storage capacity and performance; not to mention a slick
design. The same could also be said of the Mac Books – Apple also boasts of
long battery lives (of 10-12 hours) for all its laptop models (which are what
you want when you are on the go). Additionally, the Mac Book Pro has a
function bar on the top of a keyboard that replaces the function (F 1-12)
keys and a touch ID (this is all new to me). However, these are all the
latest models that Apple has to offer. 
The name of the Operating System for Macs is the MacOs28
- you can use it
with your other Apple devices (iPhone or iPad); back up the files using
iCloud and ask Siri to find files for you (Siri, being the app, where all you
have to do is speak into a microphone and the app will find what you are
after). Windows 10 has a similar application called Cortana, which also
performs the same function.
The main drawback of Apple Macs (in comparison to Windows or
PC’s/personal computers) is the cost.
Relevance – John may well use a different operating system from my own if
he wants to work on the website himself.
Delivery speeds
These range from Modems offering delivery from 14.4 kbps to cable
and now the NBN Rollout.
The quicker the delivery speed, the easier it is to ‘spread the word’.
Plug-ins
These include: Flash, QuickTime, Real player, Windows Media
Player, Acrobat
Swf29
: is an abbreviation for ‘small web format’ (and is known as Shock
Wave file) - an Adobe Flash file format used for multimedia, vector graphics
and Action Script. SWF files can contain animations or applets of varying
24
Apple (2017): iMac, http://www.apple.com/au/imac/
25
Apple (2017): Mac Book, http://www.apple.com/au/macbook
26
Apple (2017): Mac Book Pro; http://www.apple.com/au/macbook-pro/
27
Apple (2017): Mac Book Air; http://www.apple.com/au/macbook-air/
28
Apple (2017): Mac Book – Mac OS: http://www.apple.com/au/macbook-pro/macos/
29
Wikipedia (2017): SWF, https://en.wikipedia.org/wiki/SWF?oldid=751715503

of 27
degrees of interactivity and function. Swf’s uses include multimedia –
online games, animations, videos and other motion graphics. One can
generate swf files using Adobe software packages like Flash, Flash Builder
(an IDE), Adobe Animate (the replacement for Adobe Flash as of Feb. 2016),
and After Effects.
QuickTime30
is an extensible multimedia framework developed by Apple
Inc., capable of handling various formats of digital video, picture, sound,
panoramic images, and interactivity. First made in 1991, the latest Mac
version, QuickTime X, is currently available on Mac OS X Snow Leopard and
newer. In other words, QuickTime plays videos for Mac and other Apple OS.
Advantages of QuickTime are that it is available free of charge for both
MacOs and Windows operating systems. There are some other free player
applications that rely on the QuickTime framework, providing features not
available in the basic Quick-Time Player. Disadvantages: QuickTime is
bundled with MacOs. QuickTime for Microsoft Windows is downloadable as a
standalone installation, and was bundled with Apple’s iTunes prior to iTunes
10.5, but is no longer supported and therefore security vulnerabilities will
no longer be patched.
Windows Media Player31
: this is the media player available for Windows and
Windows Phone operating systems. However, Mac users can download
Windows Media Components for QuickTime to play Windows Media files.
Acrobat: Adobe Acrobat32
is a family of application software and Web
services developed by Adobe Systems to view, create, manipulate, print and
manage files in Portable Document Format (PDF). The Portable Document
Format (PDF)33
is a file format used to present documents in a manner
independent of application software, hardware, and operating systems.
Each PDF file encapsulates a complete description of a fixed-layout flat
document, including the text, fonts, graphics, and other information needed
to display it. A PDF file captures document text, fonts, images, and even
formatting of documents from a variety of applications. You can e-mail a
PDF document to your friend and it will look the same way on his screen as
it looks on yours, even if he has a Mac and you have a PC. Hence, the
advantages of Acrobat are that regardless of what hardware, operating
system or software you or your recipient uses, you can still send or transfer
documents to their computer, or view them on your own. Moreover, you
can create, print and manage these same files, as long as you have the
software on your computer. You can also download the software free. The
main drawbacks of Acrobat are security issues e.g. OUTLOOK.PDFWorm or
Peachy; and usage restrictions e.g. PDF files may also contain embedded
DRM restrictions that provide further controls that limit copying, editing or
30
Wikipedia (2017): Quick Time;
https://en.wikipedia.org/wiki/QuickTime?oldid=749513813
31
Windows (2017): Get Windows Media Player, https://support.microsoft.com/en-us/help/14209
32
Wikipedia (2017): Adobe Acrobat;
https://en.wikipedia.org/wiki/Adobe_Acrobat?oldid=755248526
33
Wikipedia (2017): Portable Document Format,
https://en.wikipedia.org/wiki/Portable_Document_Format?oldid=756427043

of 27
printing. The restrictions on copying, editing, or printing depend on the
reader software to obey them, so the security they provide is limited.
If, for instance, John wanted a website that had downloadable files (say,
for instance, PDF files for downloadables, Flash or Shockwave for videos or
animations, and so forth), then a plug-in might be necessary for people to
access these files.
Programming
these programming languages include: PERL, SQL, CGI, HTML, ASP,
jQuery, JavaScript
I am not fully familiar with many of these programming languages; however,
the most common three languages used for web design include HTML, CSS
and JavaScript34
(This is not to be confused with Java (the programming
language) or Java (the operating platform). Moreover, like Java, one should
*not* confuse it with the Javanese (Indonesian) language). 
Programming languages related to HTML and CSS include Bootstrap (for
mobile sites); W3 CSS; Icons, and graphics.
Programming languages related to JavaScript include jQuery; jQuery Mobile;
AppML; AngularJS; JSON and AJAX
Java: Java35
was originally developed by James Gosling at Sun Microsystems
(which has since been acquired by Oracle Corporation) and released in 1995
as a core component of Sun Microsystems’ Java platform. The language
derives much of its syntax from C and C++, but it has fewer low-level
facilities than either of them. Java was originally designed for interactive
television, but it was too advanced for the digital cable television industry
at the time. One advantage of Java (as a programming language) is its
adaptability – it can operate on any hardware and operating system with
adequate run-time support. However, Java is notorious for being slow and
requires more memory than programs written in C++ and other object-
oriented languages – particularly when it comes to web browsing. Uses for
Java include the ‘Hello World’ program, Java applets (in HTML pages), Java
servlets (to answer online client enquiries), and Android operating systems.
JavaScript36
: Alongside HTML and CSS, JavaScript is one of the three core
technologies of World Wide Web content production; the majority of
websites employ it, and all modern Web browsers support it without the
need for plug-ins. Although there are strong outward, similarities between
JavaScript and Java, including language name, syntax, and respective
standard libraries, the two are distinct languages and differ greatly in their
design. JavaScript was influenced by programming languages such as self
and Scheme. JavaScript is also used in environments that are not Web
based, such as PDF documents, site-specific browsers, and desktop widgets.
Newer and faster JavaScript virtual machines (VMs) and platforms built upon
34
W3 Schools (2017): Home Page http://www.w3schools.com/default.asp
35
Wikipedia (2016): Java (Programming Language);
https://en.wikipedia.org/wiki/Java_(programming language)?oldid=753640952
36
Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/JavaScript?oldid=753351126

of 27
them have also increased the popularity of JavaScript for server-side Web
applications. Netscape originally developed JavaScript, collaborating with
Sun Systems in the process. Later on, it was adopted by Microsoft and is
now a trademark of the Oracle Corporation. Uses for JavaScript include:
The most common use of JavaScript is to add client side behaviour to HTML
pages, also known as Dynamic HTML (DHTML). Scripts are embedded in or
included from HTML pages and interact with the Document Object Model
(DOM) of the page. Some simple examples of this usage are:
Loading new page content or submitting data to the server via Ajax
without reloading the page (for example, a social network might
allow the user to post status updates without leaving the page).
Animation of page elements, fading them in and out, resizing them,
moving them, etc.
Interactive content, for example games, and playing audio and video.
Validating input values of a Web form to make sure that they are
acceptable before being submitted to the server.
Transmitting information about the user’s reading habits and
browsing activities to various websites. Web pages frequently do this
for Web analytics, ad tracking, personalization or other purposes.
JQuery37
: a popular JavaScript library designed to simplify DOM-oriented
client-side HTML scripting along with offering cross-browser compatibility
because various browsers respond differently to certain vanilla JavaScript
code.
Anyway, I chose these three languages, so one of these days; I will
understand the meanings of these three terms.
Server side languages include: SQL (Database language); PHP (an alternative
to HTML38
), Unicode39
and ASP (Active Server pages40
).
John might not have knowledge of any programming languages. However,
anyone designing a site or an app for his business needs this knowledge.
Authoring software
These include Dreamweaver, InDesign, Flash, and Muse.
Some of these software applications include:
Adobe AIR (Adobe Integrated Runtime): a programme by Adobe that allows
designers to create applications and video games for phones and tablets
using Adobe Flash content and Action Script 3.0 software to allow users to
run them as a native application and outside of a web browser41
. In other
37
Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/JavaScript?oldid=753351126
38
Wikipedia (2016): PHP, https://en.wikipedia.org/wiki/PHP
39
Wikipedia (2016): Unicode; https://en.wikipedia.org/wiki/Unicode
40
Wikipedia (2016): Active Server Pages;
https://en.wikipedia.org/wiki/Active_Server_Pages; and Tutorials Point (2017): ASP Net
Tutorial, https://www.tutorialspoint.com/asp.net/pdf/index.pdf
41
Wikipedia (2016): Adobe AIRE,
https://en.wikipedia.org/wiki/Adobe_AIR?oldid=753020098

of 27
words, one can install and use them as a separate app on their desktop or
laptop computer, or they can use them on their phone or tablet. Examples
of applications designed using this software include eBay Desktop, Pandora
One desktop, Tweet Deck, the former Adobe Media Player, Angry Birds, and
Machinarium, among other multimedia and task management applications42
.
Adobe Flash43
: This software, formerly Macromedia Flash or Shockwave
Flash, is a multimedia software platform for production of animations,
browser games, rich Internet applications, desktop applications, mobile
applications and games. It also displays text, vector and raster graphics to
provide animations, video games and applications, allows streaming of audio
and video, and can capture mouse, keyboard, microphone and camera
input.
Again, a web designer will need to know these things, even if John does
not.
Browsers
These include Chrome, IE, Firefox and different versions.
Firefox44
(also known as Mozilla Firefox) is an internet browser in direct
competition with other browsers like Chrome and IE – previously, it was
known as Netscape45
or Netscape Navigator46
. I have never used it so I do
not know what it is like. However, many users reported Firefox to be slower
than other browsers like Google Chrome but faster than Internet Explorer.
I have, however, used Chrome, IE and Safari. So far, on a desktop, I have
found Chrome to be faster than Internet Explorer but about the same as
Microsoft Edge when it cam to browser speed; and Chrome to be more
usable when it came to accessing any links that needed to be accessed
(some of which I couldn’t access on Microsoft Edge).
Screens
In terms of Sizes, resolution and colours.
Safe areas (screen sizes)47
: Safe area is a term used in television
production to describe the areas of the television picture that can be seen
on television screens.
Older televisions can display less of the space outside of the safe area than
ones made more recently. Flat panel screens, Plasma displays and liquid
crystal display (LCD) screens generally can show most of the picture outside
the safe areas.
42
Adobe (2016): AIR - Building Apps,
http://help.adobe.com/en_US/air/build/air_buildingapps.pdf
43
Wikipedia (2016): Adobe Flash,
https://en.wikipedia.org/wiki/Adobe_Flash?oldid=751325915
44
Wikipedia (2016): Firefox, https://en.wikipedia.org/wiki/Firefox?oldid=752616644
45
Wikipedia (2016): Netscape, https://en.wikipedia.org/wiki/Netscape
46
47
Wikipedia (2016): Safe Area (Television),
https://en.wikipedia.org/wiki/Safe_area_(television)?oldid=698544425;

of 27
The use of safe areas in television production ensures that the most
important parts of the picture are seen by the majority of viewers.
The size of the title-safe area is typically specified in pixels or percent. The
NTSC and PAL analogue television standards do not specify official over scan
amounts, and producers of television programming use their own guidelines.
Resolution:48
1. The definitions of the safe areas are given in numbers of lines for the
vertical direction and number of pixels for the horizontal direction, which
are now more definitive than the percentages used previously. However,
percentages are also included because they are the basis on which
comparisons they make.
2. The line numbering of interlaced scanning rasters has been calculated on
the basis that field 1 is paired with the field 2 line below it, and the line
from field 1 which is just inside the percentage box is defined as the edge of
the safe area concerned.
3. The pixel numbering has been calculated by using the same notation as in
SMPTE 274M/296M and ITU-R BT.1120-7, in which the first sample of the
active part of a digital line is counted as value “0”. For HD services, this is
also the first sample of the active image.
4. The safe areas are defined by the first and last safe line in vertical
direction and by the first and last safe pixel in the horizontal direction. In
addition the total number of lines (vertical) and pixel (horizontal) which are
within the safe areas are given.
5. The coordinates of the centre of an image are defined as - vertically,
there will be an equal number of lines within the clean aperture above and
below the centre point, and - horizontally, there will be an equal number
equal number of pixels within the clean aperture to the left and the right of
the centre point.
Colours: RGB and CMYK – RGB (Red, green and blue) – for screens (unlike
CMYK for print).
Again, whether John is advertising his business via TV or the Internet, he
will have to know how to effectively advertise the business and
merchandise in a manner that is visually pleasing to the audience (or if he
doesn’t, then the web designer assigned the task will need to know these
things).
Compression
Compression Audio, video.
Digital compression for HD TV: these enable TV stations to transmit signals
to digital, audio and video signals to one’s TV. More on digital compression
for TV can be seen here49
.
48
EBU (2017): Operating Eurovision and Euro Radio; R 95 SAFE AREAS FOR 16:9 TELEVISION
PRODUCTION, https://tech.ebu.ch/docs/r/r095.pdf

of 27
Audio: MP3 (MPEG-3), WAV (uncompressed sound), WMA (Windows) –
amongst others.
With compression – the greater the compression, the easier it is for a file to
transmit; however, the drawback is that it declines in quality.
For instance, if John wanted ads for his business, then he would have to
consider how he would advertise online for these via YouTube, Vimeo or
some similar site.
Standards
These include the W3C site, accessibility, usability, and SCORM.
W3C site50
– this is used to test whether or not the links are valid, unbroken
and take you to the pages that you need to see.
Accessibility – the Internet needs to be accessible to all, regardless of age51
,
ability, gender, geographic location, ethnic or linguistic background and so
forth.
Usability – everyone needs to be able to use the site, hence the navigation
must be quick and easy, you must be able to buy and sell securely online,
access information, the site must be frequently upgraded and be quick to
load.
People will want to be able to use the site and access it, which is vital for
John getting the word out there, so they will buy his merchandise.
Test and validate the site
According to Wikipedia, the three most popular browsers are Google
Chrome, Firefox and Safari. Internet Explorer is sixth down this list52
. The
latest results of another study by the W3 School53
of five different browsers
(Chrome, Firefox, Internet Explorer, Safari and Opera) suggests that Chrome
enjoys the highest rates of browser usage at 73.7%, followed by Firefox
(15.5%), and then Internet Explorer (4.8%).
As my computer has Google Chrome and Internet Explorer, I am most likely
to use these browsers to test the website.
So, what I would need to know is what browsers does my client use, how
will the website look when using them, and what devices will the client use?
In turn, this will determine how I will design the web site, in terms of what
content could I include on it, whether or not I would have to do a fixed or
49
Wikipedia (2016): High Definition Television, https://en.wikipedia.org/wiki/High-
definition_television?oldid=753280917
50
World Wide Web Consortium (2017): Home Page, https://www.w3.org
51
World Wide Web Consortium (2017): Web Accessibility and Older People: Meeting the
Needs of Ageing Web Users
https://www.w3.org/WAI/older-users/ and World Wide Web Consortium (2017): Developing
Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies
https://www.w3.org/WAI/older-users/developing
52
Wikipedia (2016): Usage Share of Web Browsers,
https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
53
W3 Schools (2017): Browser Statistics, http://www.w3schools.com/browsers/

of 27
fluid width, include responsive or static content, or should it be mobile-only
site.
This may have some bearing as to what browsers a customer might use to
access information on The Bag Lady – if Chrome, for instance, is the most
popular browser among John’s customers, then a person will take more
notice of a site that looks good in that browser. However, if that person
also uses Internet Explorer, then they will be more likely to look at the site
in that one also. Hence, it always pays to test in more than one browser,
and one type of device. I can also say that W3 validator site also has the
same function for testing for broken links (as a customer can be put off
looking on that site if there are one too many links that lead you to
basically ‘nowhere’ and display error messages instead of the page they are
intended to display).

of 27
References
Adobe (2016): AIR - Building Apps,
http://help.adobe.com/en_US/air/build/air_buildingapps.pdf
Apple (2017): iMac, http://www.apple.com/au/imac/
Apple (2017): Mac Book – Mac OS: http://www.apple.com/au/macbook-pro/macos/
Apple (2017): Mac Book Air; http://www.apple.com/au/macbook-air/
Apple (2017): Mac Book Pro; http://www.apple.com/au/macbook-pro/
Apple (2017): Mac Book, http://www.apple.com/au/macbook
Australian Communications and Media Authority (2016): Digital Television –
Frequently Asked Questions,
http://www.acma.gov.au/Industry/Broadcast/Spectrum-for-
broadcasting/Spectrum-digital-television/digital-television-frequently-asked-
questions
Australian Museum (2017): Accessibility;
http://australianmuseum.net.au/accessibility
Australian Museum (2017): Copyright, http://australianmuseum.net.au/copyright
Australian Museum (2017): Dinosaurs and their Relatives,
http://australianmuseum.net.au/dinosaurs-and-their-relatives
Australian Museum (2017): Giant T-rex gifted to Australian Museum,
http://australianmuseum.net.au/media/giant-t-rex-gifted-to-australian-museum
Australian Museum (2017): Home Page, http://australianmuseum.net.au/
Australian Museum (2017): Media Resources,
http://australianmuseum.net.au/media-resources
Australian Museum (2017): More about Tyrannosaurs,
http://australianmuseum.net.au/more-about-tyrannosaurs
Australian Museum (2017): Privacy, http://australianmuseum.net.au/privacy
Australian Museum (2017): Site Map, http://australianmuseum.net.au/sitemap
Australian Museum (2017): Tyrannosaur Family Tree,
http://australianmuseum.net.au/uploads/documents/29739/tyrannosaur%20family
%20tree.jpg
Boag, P (2005): Card Sorting, in Boag World,
https://boagworld.com/usability/card-sorting; Accessed 22nd November, 2016;
CSS Zen Garden (2016): The Beauty of CSS Design http://www.csszengarden.com/
EBU (2017): Operating Eurovision and Euro Radio; R 95 SAFE AREAS FOR 16:9
TELEVISION PRODUCTION, https://tech.ebu.ch/docs/r/r095.pdf
https://www.w3.org/WAI/older-users/
IKEA (2015): Terms and Conditions 2015,
http://www.ikea.com/ms/en_AU/media/pdf/tasmania/IKEA_terms_2015_Tasmani
a.pdf
Levene, M (18 October 2010). An Introduction to Search Engines and Web
Navigation (second Ed.). Wiley. p. 221. ISBN 978-0470526842. Retrieved 12
November 2012. in http://books.google.com.pk/books?id=mDI72_9-
bw0C&pg=PA221;
NG, S (2007): Card Sorting – Mistakes Made and Lessons Learned, in UX Matters,
http://www.uxmatters.com/mt/archives/2007/09/card-sorting-mistakes-made-
and-lessons-learned.php

of 27
People for the Ethical Treatment of Animals (2016): ‘Trapped Animal’s Final
Moments of Life, in
https://www.facebook.com/official.peta/videos/10154739608119586/
People for the Ethical Treatment of Animals (2016): Video of Crocodile Skin
Handbag Making, in the PETA Official Facebook Page,
https://www.facebook.com/official.peta/videos/10154885036849586/; People for
the Ethical Treatment of Animals (2016): ‘This is why I don’t wear leather’;
https://www.facebook.com/official.peta/videos/10154130847364586/ (more
relevant to the concept of the Furry Purse Bag); and
Reimer, L (2011): Following a Web Design Process;
https://www.smashingmagazine.com/2011/06/following-a-web-design-process/
Szabo, K (1995): Metaphors and the User Interface,
http://www.katalinszabo.com/metaphor.htm
Tutorials Point (2017): ASP Net Tutorial,
https://www.tutorialspoint.com/asp.net/pdf/index.pdf
W3 Schools (2017): Browser Statistics, http://www.w3schools.com/browsers/
W3 Schools (2017): Home Page http://www.w3schools.com/default.asp
Wikipedia (2016): Active Server Pages;
https://en.wikipedia.org/wiki/Active_Server_Pages;
Wikipedia (2016): Adobe AIRE,
https://en.wikipedia.org/wiki/Adobe_AIR?oldid=753020098
Wikipedia (2016): Adobe Flash,
https://en.wikipedia.org/wiki/Adobe_Flash?oldid=751325915
Wikipedia (2016): Breadcrumb (Navigation),
https://en.wikipedia.org/wiki/Breadcrumb_(navigation)?oldid=759141583
Wikipedia (2016): Digital Television;
https://en.wikipedia.org/wiki/Digital_television?oldid=752611422
Wikipedia (2016): Digital Terrestrial Television in Australia,
https://en.wikipedia.org/wiki/Digital_terrestrial_television_in_Australia?oldid=753
505491
Wikipedia (2016): Firefox, https://en.wikipedia.org/wiki/Firefox?oldid=752616644
Wikipedia (2016): High Definition Television, https://en.wikipedia.org/wiki/High-
definition_television?oldid=753280917
Wikipedia (2016): Interface Metaphor,
https://en.wikipedia.org/wiki/Interface_metaphor?oldid=758927925;
Wikipedia (2016): Java (Programming Language);
https://en.wikipedia.org/wiki/Java_(programming language)?oldid=753640952
Wikipedia (2016): Java Script,
https://en.wikipedia.org/wiki/JavaScript?oldid=753351126
Wikipedia (2016): Java Script,
https://en.wikipedia.org/wiki/JavaScript?oldid=753351126
Wikipedia (2016): PHP, https://en.wikipedia.org/wiki/PHP
Wikipedia (2016): Safe Area (Television),
https://en.wikipedia.org/wiki/Safe_area_(television)?oldid=698544425;
Wikipedia (2016): Unicode; https://en.wikipedia.org/wiki/Unicode

of 27
Wikipedia (2016): Usage Share of Web Browsers,
https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Wikipedia (2017): Adobe Acrobat;
https://en.wikipedia.org/wiki/Adobe_Acrobat?oldid=755248526
Wikipedia (2017): Portable Document Format,
https://en.wikipedia.org/wiki/Portable_Document_Format?oldid=756427043
Wikipedia (2017): Quick Time;
https://en.wikipedia.org/wiki/QuickTime?oldid=749513813
Wikipedia (2017): SWF, https://en.wikipedia.org/wiki/SWF?oldid=751715503
Windows (2017): Get Windows Media Player, https://support.microsoft.com/en-
us/help/14209
World Wide Web Consortium (2017): Developing Websites for Older People: How
Web Content Accessibility Guidelines (WCAG) 2.0 Applies;
https://www.w3.org/WAI/older-users/developing
World Wide Web Consortium (2017): Home Page, https://www.w3.org
World Wide Web Consortium (2017): Web Accessibility and Older People: Meeting
the Needs of Ageing Web Users;

Sedgwick e0498336-d0105-31189a-checkpoint d

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to Sedgwick e0498336-d0105-31189a-checkpoint d

Similar to Sedgwick e0498336-d0105-31189a-checkpoint d (20)

More from Colleen Sedgwick

More from Colleen Sedgwick (20)

Recently uploaded

Recently uploaded (20)

Sedgwick e0498336-d0105-31189a-checkpoint d