Administrative Notes February 9, 2017 Feb 10: Project proposal - - PowerPoint PPT Presentation

▶
administrative notes february 9 2017
SMART_READER_LITE
LIVE PREVIEW

Administrative Notes February 9, 2017 Feb 10: Project proposal - - PowerPoint PPT Presentation

Oct 10, 2023 438 likes •783 views

Administrative Notes February 9, 2017 Feb 10: Project proposal resubmission (optional) Feb 13: Art and Images reading quiz on Connect Feb 17: In the News call #2 Computational Thinking The image part with relationship ID rId20

slide-1
SLIDE 1

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Administrative Notes February 9, 2017

  • Feb 10: Project proposal resubmission (optional)
  • Feb 13: Art and Images reading quiz on Connect
  • Feb 17: In the News call #2
slide-2
SLIDE 2

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Data Representation: Part 1, continued

finish up hex representation, relationship with decimal and binary representations

slide-3
SLIDE 3

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Recall: Hex to bits and back again

Because each hex digit corresponds to a 4-bit sequence, it's easy to translate between hex and binary

  • Hex à binary: replace each hexadecimal digit by the four

corresponding binary digits in the conversion table

  • Binary à hex: put extra 0’s at the left of the binary number

as necessary so that the total number of digits is a multiple of 4, then reverse the hex à binary conversion process

0010 1011 1010 1101 2 B A D F A B 4 1111 1010 1011 0100

slide-4
SLIDE 4

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Hex à binary à decimal An easy way to convert

Convert A0C to binary first, then to decimal: 2048+512+8+4=2572

Hex: A C Binary: 1010 0000 1100 Place 2048 1024 512 256 128 64 32 16 8 4 2 1 # 1 1 1 1 0 0

slide-5
SLIDE 5

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Decimal à binary à hex

Decimal à binary Binary à hex

# to convert 3850 1802 778 266 10 10 10 10 10 2 2 0 place value 2048 1024 512 256 128 64 32 16 8 4 2 1 # leftover 1802 778 266 10 10 10 10 10 2 2 0 0 binary # 1 1 1 1 1 0 1 0

slide-6
SLIDE 6

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Which of the following hex numbers is the largest? Recall: clicker exercise

A. 0F B. FF C. F0

  • D. 100

6

slide-7
SLIDE 7

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Which of the following hex numbers is the largest? Recall: clicker exercise

A. 0F Bin: 0000 0000 1111 B. FF Bin: 0000 1111 1111 C. F0 Bin: 0000 1111 0000

  • D. 100 Bin: 0001 0000 0000

7

slide-8
SLIDE 8

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Which of the following hex numbers is the largest? Recall: clicker exercise

A. 0F Bin: 0000 0000 1111 Decimal: 15 B. FF Bin: 0000 1111 1111 Decimal: 255 C. F0 Bin: 0000 1111 0000 Decimal: 240

  • D. 100 Bin: 0001 0000 0000 Decimal: 256

8

slide-9
SLIDE 9

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

From hex to decimal and back (Each place is 16* the previous)

Hexà decimal 10*256 + 0 *16 + 12 *1 = 2572 Decimal à hex place/column 256 16 1 # to convert A C # to convert 3850 10 10 place value 256 16 1 # to subtract 256*15=3840

  • 1*10

# left over 10

  • hex #

F A

slide-10
SLIDE 10

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Summary: Learning goal, number representation

  • [CT Building Block] Students will be able to translate

numbers between binary, hexadecimal, and decimal.

10

slide-11
SLIDE 11

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Data Representation: Part 2

Text representation Colour representation

slide-12
SLIDE 12

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Learning goals Text representation

  • [CT Building Block] Given a list of ASCII codes, students

will be able to decode an ASCII representation of a short text document.

  • [CT Building Block] Students will be able to explain why
  • pening a non-ASCII file (e.g., a Word document) in a text

editor results in a different display than when the same document is opened in its intended application.

12

slide-13
SLIDE 13

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

How do we store letters in hex (or binary)? ASCII – 128 values (7 bits, since 27 = 128)

https://en.wikipedia.org/wiki/ASCII

slide-14
SLIDE 14

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

How do we store letters in hex (or binary)? ASCII – 128 values (7 bits, since 27 = 128)

https://en.wikipedia.org/wiki/ASCII

  • ACSII (American Standard Code for Information

Interchange) was developed in the 1960’s

  • In addition to letters and numbers, punctuation, spaces

and other special control characters are encoded; each encoded item is sometimes called a code point

  • Why 7 bits? An extra “check” bit was included that could

be used to detect certain errors that might arise, e.g., when sending data over a modem

  • Extended ASCII uses 8 bits (or one byte), allowing for

characters with accents (Á, ë and others)

slide-15
SLIDE 15

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Translating from ASCII to text Example

Hex Binary Symbol 41 01000001 A 42 01000010 B 43 01000011 C 44 01000100 D 45 01000101 E 46 01000110 F 47 01000111 G

Binary 01000110 01000001 01000011 01000101 Hex 46 41 43 45 Text

The image part with relatio nship ID rId9 was not found in the file.
slide-16
SLIDE 16

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Translate from ASCII to text Group exercise

Hex Symbol 41 A 42 B 43 C 44 D 45 E 46 F 47 G

Binary 01000010 01000001 01000100 01000111 01000101 Hex 42 41 44 47 45 Text

slide-17
SLIDE 17

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Translate from ASCII to text

  • You can use online hex editors to translate from text

to ASCII: https://www.onlinehexeditor.com/

  • r

https://hexed.it/

  • At https://hexed.it/, open a file that's in plaintext

(using Open file in the top toolbar)

  • Edit by changing the entry called "8-bit integer"
slide-18
SLIDE 18

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Extended ASCII: an 8-bit representation

If regular ASCII represents 128 values in 7 bits, how many values can we represent in a byte (8 bits)?

  • a. 8
  • b. 129
  • c. 256
  • d. None of the above

DEC HEX BIN Symbol 128 80 10000000 € … … … … 192 C0 11000000 À 193 C1 11000001 Á 194 C2 11000010 Â 195 C3 11000011 Ã 196 C4 11000100 Ä 197 C5 11000101 Å 198 C6 11000110 Æ … … … … 255 FF 11111111 ÿ

slide-19
SLIDE 19

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

What about other languages, like Chinese?

  • Unicode is a text representation standard,

maintained by the Unicode Consortium since the 1980s

  • With 1,112,064 code points, Unicode covers most
  • f the world’s modern and historic writing

systems

  • There are different implementations, including

UTF-8 and UTF-16

  • UTF stands for Unicode Transformation Format

https://en.wikipedia.org/wiki/Unicode

slide-20
SLIDE 20

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

What about other languages, like Chinese?

Both and UTF-8 and UTF-16 are variable-length encodings:

  • UTF-8 is consistent with ASCII representation,

using one byte, but uses up to four bytes for

  • ther characters
  • UTF-16 uses 16 bits or 32 bits per code point

https://en.wikipedia.org/wiki/Unicode

slide-21
SLIDE 21

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Are ASCII, UTF-8 and UTF-16 forms of encryption? Clicker question

  • A. Yes
  • B. No

https://en.wikipedia.org/wiki/Unicode

slide-22
SLIDE 22

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

What about formatting? How does Word store its data?

slide-23
SLIDE 23

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

What about formatting? How does Word store its data?

  • Uploading a Word document into the online Hex

editor suggests that the document is not in ASCII representation

  • In fact it is a zipped collection of files! If you

unzip a word document, you can see these files (and even change some things in them…)

slide-24
SLIDE 24

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

What about formatting? How does Word store its data?

  • Most of the files that comprise a Word document

are in XML (Extensible Markup Language) format; they describe metadata such as the font style and size, document creator, etc.

  • The files
  • The files may also contain information about

tracked changes to the document, collaborators, privacy and security settings, and more

slide-25
SLIDE 25

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Privacy implication!

  • The information that’s encoded in a Word document

can have data that you don’t necessarily want to share!

  • There are ways to “scrub” metadata from Word

documents (details depend on the type of computer – Mac or PC – and on the version of Word)

slide-26
SLIDE 26

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Keeping data confidential can be tricky in

  • ther formats as well…
  • Consider confidential documents, like the redacted

military document in the beginning of Blown to Bits Chapter 3… http://www.corriere.it/Media/Documenti/Classified.pdf

slide-27
SLIDE 27

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Learning goals Colour representation

27

  • [CT Building Block] Define the RGB colour specification,

explain its basis

slide-28
SLIDE 28

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.
  • Colours on monitors, phone,

laptop and TV screens, and TVs are mixes of red, green, and blue lights

  • Computer applications use 256

intensities (8 bits) for each of red, green, and blue

Red Green Blue (RGB) colours

slide-29
SLIDE 29

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Black and white colors

Black is the absence of light:

0000 0000 0000 0000 0000 0000 (Binary) 0 0 0 0 0 0 (Hex) RGB bit assignment for black

White is the full intensity of each color:

1111 1111 1111 1111 1111 1111 (Binary) F F F F F F (Hex) RGB bit assignment for white http://www.colorpicker.com/

slide-30
SLIDE 30

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

RGB colours Clicker exercise

Suppose red’s intensity is 255 (full intensity). What happens if both the blue and green intensities increase at the same rate, starting from 0?

  • A. The colour remains red but gets lighter
  • B. The colour remains red but gets darker
  • C. The colour changes from red to an aqua shade
  • D. None of the above

30

slide-31
SLIDE 31

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

RGB colours Clicker exercise illustration

slide-32
SLIDE 32

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

RGB colours Clicker exercise

Which colour best describes the one represented by the hexadecimal colour code: #00B103?

  • A. A shade of red
  • B. A shade of blue
  • C. A shade of green
  • D. A shade of purple

32

slide-33
SLIDE 33

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Which colour best describes the one represented by the hexadecimal colour code: #00B103?

  • A. A shade of red
  • B. A shade of blue
  • C. A shade of green
  • D. A shade of purple

33

RGB colours Clicker exercise

slide-34
SLIDE 34

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

The image part with relationship ID rId20 was not found in the file.

Summary: Learning goals Text and colour representation

  • [CT Building Block] Given a list of ASCII codes, students

will be able to decode an ASCII representation of a short text document.

  • [CT Building Block] Students will be able to explain why
  • pening a non-ASCII file (e.g., a Word document) in a text

editor results in a different display than when the same document is opened in its intended application.

  • CT Building Block] Define the RGB colour specification,

explain its basis.

34