Karen Fraser, 16G06

1
Karen Fraser, 16G06

• email, k.fraser_at_ulster.ac.uk, website,
  karenfraser.co.uk

2
Coursework

• Stage 2 due - 20 th October - Group content.
•   each group will have developed common content
  (this is the 1000 words!) and have added XHTML
  tags to the content. In notepad. Special
  attention should be paid to referencing the
  content the XHTML must be validated and contain
  no errors. Each group should hand in one copy of
  the coursework with each group member having
  signed the hand in sheet to confirm they
  contributed to the coursework. It should also be
  online on your WIKI.

3
Coursework

• The page should contain most of the following
•   DOCTYPE info
•   Relevant title
•   Comments
•   Nested tags
• Basic XHTML tags (such as strong, em etc.)
• Heading styles
• Bullet points
• 1 x table including summary and caption
• 1 x picture
• 1 x external reference link
• Code must be validated to ensure accessibility
• Appropriate file organisation.

4
File management

• video

5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
TCP/IP
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
Need to talk about bits!

• Everything in computing is measured in bits
• A bit is the smallest unit of measurement
• 8 bits make up a byte
• 1024 bytes make up a kilobyte
• There are 8192 bits in a kilobyte
• How do we get 1024 bytes in a kilobyte?

40
Need to talk about binary!

• The principle behind digital computers. All input
  to the computer is converted into binary numbers
  made up of the two digits 0 and 1 (bits).
• For example, when you press the "A" key on your
  keyboard, the keyboard circuit generates and
  transfers the number 01000001 to the computer's
  memory as a series of pulses with different
  voltages.
• The bits are stored as charged and uncharged
  memory cells or as microscopic magnets on disk
  and tape. Display screens and printers convert
  the binary numbers into visual characters.

41
How Binary Numbers Work

• Everything is to the power of 2
• 2048 1024 512 256 128 64 32 16
  8 4 2 1
• But, for us to understand it we need to convert
  it to decimal

42
What comes after kilobyte?

• Kilobyte x 1024 is a Megabyte
• Megabyte x 1024 is a Gigabyte
• Gigabyte x 1024 is a Terrabyte
• Terrabyte x 1024 is a Pettabyte
• Pettabyte x 1024 is a Exabyte
• E xabyte x 1024 is a Zettabyte

43
Colour "depth"

• Each pixel in a bitmap contains certain
  information, usually interpreted as colour
  information. The information content is always
  the same for all the pixels in a particular
  bitmap. The amount of colour information could be
  whatever the application requires but there are
  some standards, the main ones are described next.

44
Colour "depth"

• 1 bit (black and white)
• This is the smallest possible information content
  that can be held for each pixel.
• The resulting bitmap is referred to as
  monochrome or black and white.
• The pixels with a 0 are refered to as black,
  pixels with a 1 are referred to as white.
• Note that while only two states are possible
  they could be interpreted as any two colours, 0
  is mapped to one colour, 1 is mapped to another
  colour.

45
Colour "depth"

• 8 bit greys
• In this case each pixel takes 1 byte (8 bits) of
  storage resulting in 256 different states.
• If these states are mapped onto a ramp of greys
  from black to white the bitmap is referred to as
  a greyscale image.
• By convention 0 is normally black and 255 white.
  The grey levels are the numbers in between, for
  example, in a linear scale 127 would be a 50
  grey level.

46
Colour "depth"

• 24 bit RGB
• This is the next step from 8 bit grey, now there
  is 8 bits allocated to each red, green, and blue
  component. In each component the value of 0
  refers to no contribution of that colour, 255
  refers to fully saturated contribution of that
  colour. Since each component has 256 different
  states there are a total of 16,777,216 possible
  colours.

47
Colour "depth"

• 8 bit indexed colour
• Indexed colour is a more economical way of
  storing colour bitmaps without using 3 bytes per
  pixel. As with 8 bit grey bitmaps each pixel has
  one byte associated with it only now the value in
  that byte is no longer a colour value but an
  index into a table of colours, called a palette
  or colour table.

48
Indexed Colour

• 8-bit colour only permits 256 colours
• Instead of storing (r, g, b) for each pixel,
  store an index into a palette or colour lookup
  table (CLUT)
• Index can be small, usually a single byte
• Palette stores up to 256 (for 1-byte index)
  24-bit values
• To determine colour of a pixel, look at the
  stored value, use it to look up full 24-bit (r,
  g, b) value in palette

49
Colour "depth"

• 4 bit indexed colour
• This is identical to 8 bit colour except now only
  half a byte, 4 bits are used for the index. This
  supports a table of up to 16 colours.

50
A typical exam question

• A certain raster image is 256 pixels in each of
  the x and y dimensions. Each pixel is one of 16
  colours. Calculate the total amount of storage
  required for this image. Candidates are advised
  to explain their reasoning and show intermediate
  calculations
• 256 x 256 65,536 pixels
• 16 colours requires 4 bits per pixel
• 65,536 x 4 262,144 bits
• divide by 8 to get bytes
• 32,768 bytes
• divide by 1024 to get kb
• 32kb

51
A typical exam question
Compare and contrast the RGB and CMYK colour
models, including an illustration of the RGB
colour model. Give an example of a situation in
which you would use each model.
52
Differences between rgb cmyk
Inked paper absorbs or reflects specific
wavelengths. Cyan, magenta and yellow pigments
serve as filters, subtracting varying degrees of
red, green and blue from white light to produce a
selective gamut of spectral colors. CMYK is
subtractive
Computer monitors emit color as RGB (red, green,
blue) light. Although all colors of the visible
spectrum can be produced by merging red, green
and blue light, monitors are capable of
displaying only a limited gamut (i.e., range) of
the visible spectrum. RGB is additive.
53
Colour Palettes

• Ideally choose 256 most important colours in an
  image to store in its palette
• When 24-bit image is reduced to indexed colour,
  some colours may be missing from the palette
• Replace missing colour by nearest, may lead to
  posterization
• Dither use pattern of dots and optical mixing
• Web-safe palette 216 colours guaranteed to
  reproduce accurately on all platforms and browsers

54
Complementary Colours

• Subtract additive primary from white gives its
  complement
• Equivalently, add other two additive primaries
• C GB W-R
• M RB W-G
• Y RG W-B
• Cyan, magenta and yellow are subtractive primary
  colours (mixing ink/paint)

55
CMYK Colour

• Real inks do not correspond to ideal subtractive
  primaries
• Combining three inks for black is undesirable
• Printers use four process colours, cyan, magenta,
  yellow and black
• CMYK gamut is not the same as RGB
• Implications for using images prepared for print
  (CMYK) on the Web (RGB)

56
HSV

• Alternative way of specifing colour
• Hue (roughly, dominant wavelength)
• Saturation (purity)
• Value (brightness)
• Model HSV as a cylinder H angle, S distance from
  axis, V distance along axis
• Basis of popular style of colour picker

57
Why is colour so important?

• Colour COMMUNICATES
• Transfers a message
• Does not need a verbal explanation
• Traffic lights
• Red stop
• Green go
• Road signs
• Red Danger

58
Why is colour so important?

• Your sites must create a reaction/response from
  the viewer
• Colour can be used to achieve this The colour
• Typography
• Layout
• Hierarchy
• Navigation
• Visuals
• Content and so on

59
Why do I need to know about colour?

• Good designers use the principles of colour to
  make sure they have the correct colour
  combination for their designs
• You are able to judge which colours
  complement/contrast
• You know which colours create a cold or warm
  effect
• You will be able to judge which colours create an
  ordered/chaotic affect
• You will have started to think as a designer and
  made decisions for a reason
• You will understand more about how important
  colour is to almost everything
• You will be able to justify your decisions when
  questioned further
• Crown colour chart

60
Warm colours and cold colours?
The colour wheel can be divided into 2 sections
The warm colours positioned on the right hand
side of the wheel The cool colours positioned
on the left
61
Why would you use the colour grey?

• As a background colour because it is neutral
• What kind of visual impact would this colour
  create?
• When combined with other colours it can create a
  strong visual appearance which reflects
  professionalism and possibly order!
• What kind of websites use the cool colours?
• Formal
• Business
• What type of websites would use the primary
  colours?
• Childrens

62
Places to think about your choice of colour

• To the colour scheme used within charts and
  visuals, buttons and navigational menus
• Can improve the visual consistency of your design
  or presentation
• No more than three colours should ever be used
  within one design unless you intend to break the
  rules of conformity
• An overuse of colour will cause distraction

63
Next week

• Web accessibility