Itec module 1-6 flashcards

Module 1

Computers

Definition: Electronic modules capable of executing “programs”

  • Processes data, preforms instructions

Data/Information: Binary values saved as electronic signal that can be on or off, 0 or 1 (binary system)

  • bit, byte (8 bits)

  • Everything (image, text, etc.) is “coded” as binary numbers

Code/Instruction: Similar to data but means a certain operation 

  • Code can mean binary equivalent of any information or the instruction/program to be executed.


Von Neumann Model


Programs:

Software: refers to programs copied/installed by users to be executed by computers, results can be saved back to the storage

Firmware: refers to programs that are built into the computer and can’t be changed by users


Software: 

  • Operating System (OS) is a program manages all other programs and the hardware

  • Software is written in various programming languages:C/C++, C#, Java, Javascript Python, HTML, etc

  • Programs are translated to the binary language of the target “platform” (machine code), that depends on: CPU, Operating System


Module 2

Pixels and screen resolution

  • Screen consists of small points called pixel (picture element)

  • Screen resolution is the two-dimensional size of the screen in terms of pixels.

    • CGA (1981): 320x200

    • VGA (1987): 640x480

    • HD (2000s): 1920x1080

    • 4K UHD (2010s): 3840x2160

Aspect ratio

  • Aspect Ratio: Width to Height ex 4:3


Colour Depth

  • Colour is created and displayed using the combination of Red (R), Green (G), and Blue (B).

  • Number of bits used to identify the colour of a pixel.


Corresponds to the number of colours we can display.

  • 1 bit: black or white (or any other colour), Used in very old computer terminals

  • 8 bits: 2^8=256 colours or shades (^ commonly used symbol for power)

  • 24 bits: 8 bits (one byte) per RGB, 3 bytes total, 4 million colours 

    • True colour. 0 means black and 255 means max brightness.

  • N bits: 2 to the power of N colours



Images

  • An image is a collection of pixels, similar to screen.

  • It has resolution and colour depth.

  • Image data size (bytes) = number of pixels x colour depth in byte

  • Data is stored as a file and can be huge.

    • 1000x1000 true colour image has 3 million bytes (~3MB).


  • Images are stored in files with various formats depending on software that creates them, and the “compression” used (discussed later).

    • .BMP is the simplest and largest file type for images.

    • It has a header with image info followed by pixel data.


Vector vs Raster graphics

  • Raster graphics define images (and graphics content, in general) in terms of pixel values.

    • Loses quality/sharpness when zooming in

  • Vector graphics are a type of digital image representation that uses mathematical equations to create shapes, lines, curves, and colors, rather than pixels. Unlike raster graphics (made of pixels), vector graphics are resolution-independent and can be scaled to any size without losing quality.


Image compression

  • Compression methods reduce the file size.

    • Bitmaps (BMP file extension) has no compression

    • JPEG (JPG file extension) is true colour but can have different levels of compressions.

    • PNG has lossless compression and allows transparency

    • GIF has only one byte per character, so smaller in file size, but has animation


Coordinate system

  • Pixels are identified with X and Y values.

  • In computer graphics, the reference point (X=Y=0) is usually top left.

  • For an image of size 20 x 20, the four corners are: 0,0 - 0,19 - 19,0 - 19,19

  • In applications like games, with large worlds/maps, we can have three sets of coordinates:

    • Relative to each objects top left

    • Relative to world’s top left 

  • Relative to camera view’s top left



Image blur

  • Blur makes pixels more similar to their neighbours

  • The most common method is to set the RGB value of a pixel to the average of the RGB values of the pixels around it.

    • It can be directional, e.g. only neighbours to the left (motion blur)


Module 3

Basic Concepts in Animation

What is animation?

  • A method of creating motion picture

  • A series of frames/images that progressively show a change (in position, shape, etc.)

  • Perception of continuous motion

  • Not live-action (recorded)

Frame is a single image of the animation.

  • Hand-drawn or computer-generated or any combination

Frame-per-second (FPS) is the rate at which the animation is played.


Digital animation

Digital extension of cel animation.

  • Layers/objects/images correspond to celluloid sheets.

Sprite animation

  • Sprites are simple, usually small, images

  • Sprite animation is a sequence of such images suitable for animating simple characters.

  • Sprite Sheet is a collection of sprites for one or more animations of the same character.

  • In sprite animation, each frame is usually just a single layer.


Keyframe animation

  • “Key” frames define where things change.

    • Position, Shape, Colour, etc.


Module 4

Basic Concepts in Web Development


Markup languages

  • A text that describes formatting and structure of output content using specific signs

    • Ex. HTML


Module 5

Web Design/Development Process

  1. Goal Identification

  2. Scope Definition

  3. Sitemap / Wireframe / Prototype Creation

  4. Content Creation

  5. Visual Elements

  6. testing

  7. Launch 

  8. Maintenance


No standard exists, but most approaches include the following phases: 

  • concept, Structure, Content, Design, Prototype, Launch, and Maintain


User research

User-Centred Design (UCD) involves users in goal/scope definition and testing.

  • Personas are profiles of typical users.

  • Use cases are stories that demonstrate a user experience scenario.

  • User tests evaluate a design with actual users