Project 1B

Project 1B Three components

Your misinformation page and images The disclaimer page Testing it with others

This week's labs are dedicated to Project 1B

Look at the suggestions page

2012-04-23 Katherine Deibel, Fluency in Information Technology 1

Project 1 – Image Permissions

WarningIf the images lack proper permission and legal rights for use, there will be a major grading penalty.You should have feedback on your 1A work by today.Contact your TA and me if you have any concerns.


Project 1 - Competition Each section will vote for their top two

misinformation sites Class will vote for the top four among these

twelve finalists Awards

1st Place: 50 pts extra credit 2nd Place: 30 pts extra credit 3rd Place: 20 pts extra credit 4th Place: 15 pts extra credit 5th-12th: 10 pts extra credit


Getting IT's DigitsBinary to Hexadecimal

Fluency with Information Technology


INFO100 and CSE100

Katherine Deibel

Info Representation Digitization:

Representing information by any fixed set of symbols

What number is: ?

The representation associates one item with each symbol … encode the telephone keypad using ten colors


Creating Symbols Often, there are many things to digitize, but

too few symbols available The solution is to create more symbols by

composing patterns Three patterns make three symbols: Pairing them makes 9 symbols; when they are

triples, 27 symbols, and so on


An Encoding Encode the Latin alphabet

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Three pattern triples = 27 symbols

MAKE LOVE NOT WAR


Info in the Physical World The most fundamental representation of

information is presence/absence of a phenomenon matter, light, magnetism, flow, charge, … detect: “Is the phenomenon present?” set: make phenomenon present or absent

Any controllable phenomenon works if you define it right

PandA: Present and Absent


Examples

Example Present Absent

Optical disc (DVD) Pitted UnpittedHard drive Magnetized UnmagnetizedRAM Voltage No voltageLogic True False


Katherine Deibel, Fluency in Information Technology 10

Info in the Logical World Logical World:

Information, reasoning, computation are formulated by true/false and logic All men are mortal Aristotle is a man Aristotle is mortal

True and false can be the patterns for encoding information

2012-04-23

Connect Physical/Logical The miracle of IT is that physical and

logical worlds can be connected Present means true / Absent false Or vice versa depending on the standardPavement Memory

false true false false false true true false true false true false false false

0 1 0 0 0 1 1 0 1 0 1 0 0 0


A Curious Story…

The Diving Bell and the ButterflyJean-Dominique Bauby


Asking Yes/No Questions A protocol for Yes/No questions

One blink Yes Two blinks No

PandA implies that this is not the fewest number of blinks … really? Why not use no blinks for No?


Bits PandA is a binary representation because it

uses 2 patterns Bit

a contraction for “binary digit” a position in space/time capable of being set and

detected in 2 patterns

Sherlock Holmes’s Mystery of Silver Blaze A popular example where “absent” gives information … the dog didn’t bark, that is the phenomenon wasn’t detected


Bytes A byte is eight bits treated as a unit

Adopted by IBM in 1960s A standard measure ever since

Bytes encode the Latin alphabet using ASCII—the American Standard Code for Information Interchange


Bits Are It Bits represent information, but their

interpretation gives bits meaning Could be a number, color, instruction, ASCII,

sound samples, IP address, …


Katherine Deibel, Fluency in Information Technology 17

The Power of Bits & Binary

Bias-free Universal Medium Principle Bits can represent all forms of discrete

information Bits have no inherent meaning

2012-04-23

From Binary to EnglishWhat? You can't read 0s and 1s?


ASCII F

0100 0110


ASCII F

0100 0110 I

0100 1001


ASCII F

0100 0110 I

0100 1001 T

0101 0100


Character Sets Defined sets of characters mapping to

numbers (binary representations) Examples

ASCII ASCII extended Unicode UTF-8


XHTML & Charset Tells the browser which character set

to use so the page displays the way you want

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />


UTF-8 Uniform Transformation Format

Universal—all characters have a place Each character is encoded using 1 to 4

bytes (8 to 32 bits)


Converting BinaryBecause we have ten fingers


Base or Radix Different number representations are

based around different numbers This number is called a base or radix

Binary: base 2 Octal: base 8 Decimal: base 10 Hexadecimal: base 16


The Base Changes Everything 1101 in binary = 13 in decimal 1101 in octal = 577 in decimal 1101 in decimal = 1101 in decimal 1101 in hexadecimal = 4353 in decimal


Positional Notation All numbers use positional or place notation

that is based on the radix Decimal

1101 = 1×1000 + 1×100 + 0×10 + 1×1= 1×103 + 1×102 + 0×101 + 1×100

Binary1101 = 1×8 + 1×4 + 0×2 + 1×1

= 1×23 + 1×22 + 0×21 + 1×20


Positional Notation LogicRecall that the digits in a number represent a power of the base value


d7×107 d7×27

d6×106 d6×26

d5×105 d5×25

d4×104 d4×24

d3×103 d3×23

d2×102 d2×22

d1×101 d1×21

d0×100 d0×20

d7d6d5d4d3d2d1d0 d7d6d5d4d3d2d1d0

Converting Binary to Decimal Given a binary number, add up the powers

of 2 corresponding to 1s Example:

10100001 = 128 + 32 +110100001 = 161


1×27 = 1×128 = 1280×26 = 0×64 = 01×25 = 1×32 = 320×24 = 0×16 = 00×23 = 0×8 = 00×22 = 0×4 = 00×21 = 0×2 = 01×20 = 1×1 = 1

Converting Binary to Decimal Given a binary number, add up the powers

of 2 corresponding to 1s Example:

00110010 = 32 + 16 + 200110010 = 50


0×27 = 0×128 = 00×26 = 0×64 = 01×25 = 1×32 = 321×24 = 1×16 = 160×23 = 0×8 = 01×22 = 0×4 = 01×21 = 1×2 = 20×20 = 0×1 = 0

Converting Decimal to Binary This table explains the procedure Let's convert 104 to binary


DecimalPlace Value 128 64 32 16 8 4 2 1

SubtractBinary Num

Converting Decimal to Binary Subtract PV from the number; a non-

negative result gives new number and “1”; otherwise, “0”


Decimal 104Place Value 128 64 32 16 8 4 2 1

Subtract negBinary Num 0




Decimal 104 104Place Value 128 64 32 16 8 4 2 1

Subtract neg 40Binary Num 0 1




Decimal 104 104 40Place Value 128 64 32 16 8 4 2 1

Subtract neg 40 8Binary Num 0 1 1




Decimal 104 104 40 8Place Value 128 64 32 16 8 4 2 1

Subtract neg 40 8 negBinary Num 0 1 1 0




Decimal 104 104 40 8 8Place Value 128 64 32 16 8 4 2 1

Subtract neg 40 8 neg 0Binary Num 0 1 1 0 1

Converting Decimal to Binary Since we are at 0, the rest of the

digits must be zero as well


Decimal 104 104 40 8 8 0Place Value 128 64 32 16 8 4 2 1

Subtract neg 40 8 neg 0 0 0 0Binary Num 0 1 1 0 1 0 0 0

Converting Decimal to Binary Thus, 104 in decimal is 01101000 in

binary


Decimal 104 104 40 8 8 0Place Value 128 64 32 16 8 4 2 1

Subtract neg 40 8 neg 0 0 0 0Binary Num 0 1 1 0 1 0 0 0

Leading Zeros in Binary Note that we wrote 104 as 01101000 We could have written 1101000 and

been just as correct In computing, we usually write binary

with multiples of 4 or 8 digits Based on length of nibbles and bytes We add leading zeros to the front


HexadecimalShe turned me into a newt… using GIMP


So why base 16? Two bytes is pretty common Binary numbers are too long Decimal numbers are more concise 10 is not a power of 2 16 is a power of 2 (24)


Hexadecimal Digits 0.. 1.. 2.. 3.. 4.. 5.. 6.. 7.. 8.. 9..

now what? We use letters:

10 A 11 B 12 C 13 D 14 E 15 F


Converting Hex to Decimal Same as with binary with two differences:

The digits are more than 0 and 1 The base is 16

Example:A37 = 2560 + 48 + 7A37 = 2615


A×162 = 10×256 = 25603×161 = 3×16 = 487×160 = 7×1 = 7

Convert 4B to Decimal 4 × 16 = 64

11 × 1 = 11 (B = 11) 75


RGB: Application of Hexadecimal

Recall: colors are combinations of RGB Husky Purple

Red=160Green=76Blue=230


RGB Values as Hex RGB values range from 0 to 255

0 means none of that color 255 means full saturation of that color rgb(0,255,0) is GREEN

In hex, this range is 00 to FF We can write as GREEN as #00FF00 or

#00ff00


Predefined Web Colors 147 colors have been predefined for use

in HTML and CSS Examples


Color Name Color RGB HexOrange rgb(255,165,0) #ffa500ForestGreen rgb(34,139,34) #228B22Purple rgb(128,0,128) #800080Red rgb(255,0,0) #ff0000DarkGray rgb(169,169,169) #a9a9a9Brown rgb(165,42,42) #a52a2aDodgerBlue rgb(30,144,255) #1e90ffLightPink rgb(255,182,193) #ffb6c1

#0040ff

Hints for RGB values in Hex: FF is 255 80 is 128 40 is 64


Further DigitizationMetadata and Compression


Encoding Information Bits and bytes encode the information,

but that’s not all Tags can encode format and structure Example uses:

word processors HTML Oxford English Dictionary


OED Metadata Examplebyte (baIt). Computers. [Arbitrary, prob. influenced by bit sb.4 and bite sb.] A group of eight consecutive bits operated on as a unit in a computer. 1964 Blaauw & Brooks in IBM Systems Jrnl. III. 122 An 8-bit unit of information is fundamental to most of the formats [of the System/360]. A consecutive group of n such units constitutes a field of length n. Fixed-length fields of length one, two, four, and eight are termed bytes, halfwords, words, and double words respectively. 1964 IBM Jrnl. Res. & Developm. VIII. 97/1 When a byte of data appears from an I/O device, the CPU is seized, dumped, used and restored. 1967 P. A. Stark Digital Computer Programming xix. 351 The normal operations in fixed point are done on four bytes at a time. 1968 Dataweek 24 Jan. 1/1 Tape reading and writing is at from 34,160 to 192,000 bytes per second.

<e><hg><hw>byte</hw> <pr><ph>baIt</ph></pr></hg>. <la>Computers</la>. <etym>Arbitrary, prob. influenced by <xr><x>bit</x></xr> <ps>n.<hm>4</hm></ps>and <xr><x>bite</x> <ps>n.</ps> </xr></etym> <s4>A group of eight consecutive bits operated on as a unit in a computer.</s4> <qp><q><qd>1964</qd><a>Blaauw</a> &amp. <a>Brooks</a> <bib>in</bib> <w>IBM Systems Jrnl.</w> <lc>III. 122</lc> <qt>An 8-bit unit of information is fundamental to most of the formats <ed>of the System/360</ed>.&es.A consecutive group of <i>n</i> such units constitutes a field of length <i>n</i>.&es.Fixed-length fields of length one, two, four, and eight are termed bytes, halfwords, words, and double words respectively. </qt></q><q><qd>1964</qd> <w>IBM Jrnl. Res. &amp. Developm.</w> <lc>VIII. 97/1</lc> <qt>When a byte of data appears from an I/O device, the CPU is seized, dumped, used and restored.</qt></q> <q><qd>1967</qd> <a>P. A. Stark</a> <w>Digital Computer Programming</w> <lc>xix. 351</lc> <qt>The normal operations in fixed point are done on four bytes at a time.</qt></q><q><qd>1968</qd> <w>Dataweek</w> <lc>24 Jan. 1/1</lc> <qt>Tape reading and writing is at from 34,160 to 192,000 bytes per second.</qt></q></qp></e>


“Continuous” information like light and sound must be made “discrete”

Digitizing

Mic

Digital

to Analo

g

001011101001101100000100111111001010001101100100100111101001010

Analogto

Digital

Spk

Digital audio uses 44,100 samples per second of 16 bits on two channels, or 10,584,000 B/min


Compression Compression: use fewer bits

Saves space Faster transmission

Two types of compression Lossless – Allows full recovery of data Lossy – Lose some data but tighter compression


Example: Lossy Compression

JPEG

Original Over compressed


Give number of 1s, number of 0s, etc.

Forget row encoding … alternate

Run-Length Compression

1111111111…1111111111…1100000000…1100000000…

…

(270 1s)(270 1s)(2 1s)(266 0s)(2 1s)(2 1s)(266 0s)(2 1s)

…

[Size: 270x200](0)(542)(266)(4)(266)(4)(266)(4)(266) …


GIF Compression Three Basic Ideas + One

Limit colors to 256 Encode colors in table with byte Encode as runs … And finally, use Lemple-Ziv-

Welch encoding which looks for patterns in the runs


Summary The core of the information in IT are

binary digits—the bits But it's not just numbers It builds up to letters, colors, images, etc. A string of bits can be anything

Additional methods enhance the bits Metadata tags enrich the story Compression can change the story.. or not


Documents

Project 1B