lect02 - Duke Computer Science

Download Report

Transcript lect02 - Duke Computer Science 

Today’s topics
Networks & the Internet
Basic HTML
 The basis for web pages
 CSS
Data Representation
Upcoming
 Connections
 Algorithms
Reading
Internet history readings
Computer Science, Chapter 4
CompSci 001
2.1
The Internet






How valuable is a network?
 Metcalfe’s Law
Domain Name Service: translates betweens names and IP
addresses
Properties of the Internet
 Heterogeneity
 Redundancy
 Packet-switched
 1.46 billion online (Internet World Stats 2008)
Warriors of the Net!
Who has access?
How important is access?
CompSci 001
2.2
HTML

Specifying Colors
 Can be specified in different ways
 e.g., for standard colors can specify “white” or “red”
 Can specify arbitrary colors by specifying the amount of
red, blue, and green involved. (RGB)
 Uses base 16 arithmetic: 0, 1, …, 9, a, b, c, d, e, f
Red: “ff0000”
Green: “00ff00”
Blue: “0000ff”
Black: “000000”
Gray: ”7f7f7f”
White:”ffffff”
Yellow: ”ffff00” Orange: “ff7f00” Purple: ”c000e0”
 Can experiment!
CompSci 001
2.3
More Hexadecimal
CompSci 001
from L. Snyder, Fluency with Information Technology
2.4
HTML/Web/UNIX practice




In UNIX, your web page folder is found in a standard location:
 ~userID/public_html/
and for OIT Duke files is accessed with a web browser at
 //www.duke.edu/~userID
Many people don’t code in raw HTML
 Write in TextPad
 Save as Web Page in Microsoft Word
 Netscape Composer, Macromedia Dreamweaver, Bluefish
These all generate HTML for you
View other people’s web page source (HTML) from most browsers -learn from others
CompSci 001
2.5
Lab 2

In Lab 1, you created a webpage. How does it differ from
webpages of the past 4 years?
 Design?

Content?

Web 2.0?
In Lab 2, you will create a somewhat more modern webpage
 Find a page & design that you like.
 Can you adapt it and use as your own?
 Ideas: Cascading Style Sheets, embedded video or maps,
2.6
CompSci 001mashups

What makes for a good website?
"Success has 100 parents, failure is an orphan” – J R Ashton
 What makes for a bad one?
 http://www.webpagesthatsuck.com
CompSci 001
2.7
Cascading Style Sheets (CSS)



Style sheets describe how documents are presented
CSS is a standard for providing formatting (i.e. style)
information for web documents
 Specify fonts, colors, spacing, etc.
 Why would we want to separate the style information from
the content?
In the CSS file, you specify:
 a selector, that picks out the element you want
 the properties and values that you want to apply to the
selected element (or elements)
select everything in the <body> tag
and use a serif font for the text
body {
font-family: serif;
}
2.8
CompSci 001
from © 2006 DW Johnson & University of Washington
Selectors
The element type: body, div, span, h1, h2, img, p, a, …
selected with
<h1>Introduction</h1>
html file
h1 {
color: green;
}
css file
Specific "id" given for the element
<div id="footer">
…
</div>
selected with
html file
div#footer {
font-family: sans-serif;
}
css file
General "class" given for the element
<span class="familyMember">
…
</span>
html file
selected with
span.familyMember {
font-weight: bold;
}
css file
2.9
CompSci 001
from © 2006 DW Johnson & University of Washingtonton
Properties


The properties of the element determine how it it styled, including:
 background of the element
 text colors, alignment, spacing
 font selection
 border thickness, color, style
 padding and margins around the element
 list styles
Some properties and their values
color: and background-color:and norder-color
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,
red, silver, teal, white, and yellow
font-family:
serif, sans-serif, cursive, fantasy, monospace
font-style:
normal, italic
font-weight:
normal, bold
border-width:
thin, medium, thick
border-style:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
2.10
CompSci 001
See Lab 1 for CSS tutorials
Digital Computers


What are computers made up of?
 Lowest level of abstraction: atoms
 Higher level: transistors
Transistors
 Invented in 1951 at Bell Labs
 An electronic switch
 Building block for all modern electronics
 Transistors are packaged as Integrated Circuits (ICs)
 40 million transistors in 1 IC
CompSci 001
2.11
Binary Digits (Bits)




Yes or No
On or Off
One or Zero
10010010
CompSci 001
2.12
More on binary



Byte
 A sequence of bits
 8 bits = 1 byte
 2 bytes = 1 word (sometimes 4 or 8 bytes)
Powers of two
How do binary numbers work?
CompSci 001
2.13
Data Encoding



Text: Each character (letter, punctuation, etc.) is assigned a
unique bit pattern.
 ASCII: Uses patterns of 7-bits to represent most symbols
used in written English text
 Unicode: Uses patterns of 16-bits to represent the major
symbols used in languages world side
 ISO standard: Uses patterns of 32-bits to represent most
symbols used in languages world wide
Numbers: Uses bits to represent a number in base two
Limitations of computer representations of numeric values
 Overflow – happens when a value is too big to be
represented
 Truncation – happens when a value is between two
representable values
CompSci 001
2.14
Images, Sound, & Compression

Images
 Store as bit map: define each pixel
• RGB
• Luminance and chrominance

Vector techniques
• Scalable
• TrueType and PostScript


Audio
 Sampling
Compression
 Lossless: Huffman, LZW, GIF
 Lossy: JPEG, MPEG, MP3
CompSci 001
2.15
Decimal (Base 10) Numbers

Each digit in a decimal number is chosen from ten symbols:
{ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }

The position (right to left) of each digit represents a power of ten.

Example: Consider the decimal number 2307
2

position:
3
2
1
3

0

7

0
2307 = 2103 + 3102 + 0101 + 7100
CompSci 001
2.16
Binary (Base 2) Numbers

Each digit in a binary number is chosen from two symbols:
{ 0, 1 }

The position (right to left) of each digit represents a power
of two.

Example: Convert binary number 1101 to decimal
position:
1101 =
=
CompSci 001
1

1

0

1

3
2
1
0
123 + 122 + 021 + 120
18 + 14 + 02 + 11
= 8 + 4 + 1 = 13
2.17
Powers of Two
Decimal
CompSci 001
Binary
Power of 2
1
1
20
2
10
4
100
8
1000
21
22
23
16
10000
32
100000
64
1000000
128
10000000
24
25
26
27
2.18
Famous Powers of Two
CompSci 001
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
2.19
Other Number Systems
CompSci 001
2.20
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
Binary Addition
Also: 1 + 1 + 1 = 1 with a carry of 1
CompSci 001
2.21
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
Adding Binary Numbers
101
+ 10
-------111

101 + 10 = ( 122 + 021 + 120 ) + ( 121 + 020 )
= ( 14 + 02 + 11 ) + ( 12 + 01 )

Add like terms: There is one 4, one 2, one 1
= 14 + 12 + 11 = 111
CompSci 001
2.22
Adding Binary Numbers
11
 carry
111
+ 110
--------1101

111 + 110 = ( 122 + 121 + 120 ) + (122 + 121 + 020 )
= ( 14 + 12 + 11 ) + (14 + 12 + 01 )

Add like terms: There are two 4s, two 2s, one 1
= 24 + 22 + 11
= 18 + 14 + 02 + 11 = 1101

BinaryNumber Applet
CompSci 001
2.23
Converting Decimal to Binary
Decimal
0
1
2
3
4
5
6
7
8
CompSci 001
  conversion  
0 = 020
1 = 120
2 = 121 + 020
3 = 2+1 = 121 + 020
4 = 122 + 021 + 020
5 = 4+1 = 122 + 021 + 120
6 = 4+2 = 122 + 121 + 020
7 = 4+2+1 = 122 + 121 + 120
8 = 122 + 022 + 021 + 020
Binary
0
1
10
11
100
101
110
111
1000
2.24
Converting Decimal to Binary

Repeated division by two until the quotient is zero

Example: Convert decimal number 54 to binary
0
21
2
2
2
2
CompSci 001
 1
 1
2 3
 0
6
 1
13
 1
27
 0
54
Binary representation of
54 is 110110
remainder
2.25
Converting Decimal to Binary
 1

1 32 =
0
 1

6
1 32 plus 1 sixteen
2 3
 0

3 16s =
3 16 plus 0 eights
6
 1

13 4s =
6 8s plus 1 four
13
 1

27 2s = 13 4s plus 1 two
27
 0

54
0
21
2
2
2
2


8s =
plus 1 thirty-two
= 27 2s plus 0 ones
54
Subtracting highest
power of two
54 - 25 = 22
1s in positions 5,4,2,1
6 - 22 = 2
CompSci 001
22 - 24 = 6
2 - 21 = 0
 110110
2.26
Problems

Convert 1011000 to decimal representation

Add the binary numbers 1011001 and 10101 and express
their sum in binary representation

Convert 77 to binary representation
CompSci 001
2.27
Solutions

Convert 1011000 to decimal representation
1011000 = 126 + 025 + 124 + 123 + 022 + 021 + 020
= 164 + 032 + 116 + 18 + 04 + 02 + 01
= 64 + 16 + 8 = 88

Add the binary numbers 1011001 and 10101 and express their sum
in binary representation
1011001
+ 10101
------------1101110
CompSci 001
2.28
Solutions

Convert 77 to binary representation
2
2
2
2
2
CompSci 001
0
21
 1
2 2
 0
4
 1
9
 1
19
 0
38
 1
 0
Binary representation of
77 is 1001101
77
2.29
Boolean Logic



AND, OR, NOT, NOR, NAND, XOR
Each operator has a set of rules for combining two binary inputs
 These rules are defined in a Truth Table
 (This term is from the field of Logic)
Each implemented in an electronic device called a gate
 Gates operate on inputs of 0’s and 1’s
 These are more basic than operations like addition
 Gates are used to build up circuits that
• Compute addition, subtraction, etc
• Store values to be used later
• Translate values from one format to another
CompSci 001
2.30
Truth Tables
CompSci 001
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
2.31
In-Class Questions
1.
How many different bit patterns can be formed if each must consist of
exactly 6 bits?
2.
Represent the bit pattern 1011010010011111 in hexadecimal notation.
3.
Translate each of the following binary representations into its
equivalent base ten representation.
1. 1100
2. 10.011
Translate 231 in decimal to binary
4.
CompSci 001
2.32