CS50’s

Understanding Technology

CS50’s
2024-2025

Prepared and delivered by EC3 team

Prepared and delivered by EC3 team

Contents
Binary.......................................................................................................................... 6
CPU........................................................................................................................... 10
RAM (Random Access Memory)................................................................................ 11
Hard Drives............................................................................................................... 12
Flash Memory............................................................................................................ 14
Types of Memory and Funneling............................................................................... 15
Display Connectors................................................................................................... 17
Wireless.................................................................................................................... 18
Operating System (OS)............................................................................................. 18
Introduction.............................................................................................................. 19
IP............................................................................................................................... 19
DNS........................................................................................................................... 20
Packets..................................................................................................................... 20
TCP/IP........................................................................................................................ 21
Ports.......................................................................................................................... 22
Protocols................................................................................................................... 22
UDP........................................................................................................................... 22
IPs in More Detail...................................................................................................... 23
Routers..................................................................................................................... 25
Traceroute................................................................................................................ 26
Introduction.............................................................................................................. 28
Audio......................................................................................................................... 28
Graphics.................................................................................................................... 30
RGB........................................................................................................................... 30
Bitmap Format.......................................................................................................... 31
Image Compression.................................................................................................. 32
Image File Formats................................................................................................... 34
Video Compression................................................................................................... 35
Video File Formats.................................................................................................... 35
3D Video................................................................................................................... 36
Introduction.............................................................................................................. 38
Privacy...................................................................................................................... 38
Deleting Files............................................................................................................ 38
Cookies..................................................................................................................... 38

1|Page
Incognito Mode......................................................................................................... 39
Authentication........................................................................................................... 39
Passwords................................................................................................................. 39
Password Resetting................................................................................................... 40
Using The Same Password........................................................................................ 41
Password Managers.................................................................................................. 41
Two Factor Authentication........................................................................................ 41
Network security....................................................................................................... 42
VPN........................................................................................................................... 43
Firewall..................................................................................................................... 43
Encryption................................................................................................................. 43
Public Key Cryptography........................................................................................... 44
Phishing.................................................................................................................... 45
Malware.................................................................................................................... 46
Trust.......................................................................................................................... 46
Web Browser............................................................................................................. 47
Web Server............................................................................................................... 47
HTTP.......................................................................................................................... 47
HTTP Status Codes.................................................................................................... 48
HTML........................................................................................................................ 48
Atom.......................................................................................................................... 50
Links.......................................................................................................................... 50
Images........................................................................................................................ 51
Paragraphs.................................................................................................................. 52
Headings...................................................................................................................... 52
Lists........................................................................................................................... 52
Tables......................................................................................................................... 53
Implementing Google................................................................................................ 54
Forms........................................................................................................................ 55
css0.html.................................................................................................................. 56
DOM.......................................................................................................................... 57
css1.html.................................................................................................................. 57
css2.html.................................................................................................................. 58
css3.html.................................................................................................................. 59
css4.html.................................................................................................................. 60

2|Page
Closing Thoughts...................................................................................................... 62
Introduction.............................................................................................................. 63
Software.................................................................................................................... 63
Finding Mike Smith.................................................................................................... 63
Phonebook Algorithm................................................................................................ 64
Pseudocode............................................................................................................... 64
Programming Constructs.......................................................................................... 64
C............................................................................................................................... 65
C++............................................................................................................................ 65
Python....................................................................................................................... 65
Other Programming Language.................................................................................. 66
Introducing Scratch................................................................................................... 66
hello, world in Scratch............................................................................................... 67
Scratch Interface....................................................................................................... 69
Sounds...................................................................................................................... 71
Loops........................................................................................................................ 71
Animation.................................................................................................................. 72
Breaking Down Problems.......................................................................................... 74
pet the cat................................................................................................................ 74
don’t pet the cat....................................................................................................... 75
counting sheep......................................................................................................... 75
cough0...................................................................................................................... 76
cough1...................................................................................................................... 77
Cough2...................................................................................................................... 78
Threads..................................................................................................................... 80
Events....................................................................................................................... 82
Closing Thoughts...................................................................................................... 84

3|Page
 Introduction

This course is for students who don’t (yet) consider themselves computer
persons. Designed for students who work with technology every day but
don’t necessarily understand how it all works underneath the hood or
how to solve problems when something goes wrong, this course fills in
the gaps, empowering students to use and troubleshoot technology more
effectively. Through lectures on hardware, the Internet, multimedia,
security, programming, and web development as well as through readings
on current events, this course equips students for today’s technology and
prepares them Watch Lecture for tomorrow’s as well.

How to Take this Course

The course will be delivered via edX and connect learners around the world. By the
end of the course, participants will understand the following concepts:

 Hardware
 internet
 multimedia
 security
 web development
 programming

Methodology
4|Page
 Watch Lecture

Recap Session

Complete Assignment

Evaluation:
 Each student by the end of this course must be passed in 3 exams, one exam
per two modules.
 Then, students who passed all exams will get a certificate of attendance from
ITI

1- Hardware

5|Page
Binary
 We use computers everyday

 Inside a computer are “0s and 1s”

o Computers use the binary number system to represent info

 How do computers represent info with just binary?

 Consider the decimal number (what we human typically use) 123

o The rightmost column is the 1s column

o The middle, the 10s

o The leftmost, the 100s

100 10 1

1 2 3

o Thus we have 100 x 1 + 10 x 2 + 1 x 3 = 100 + 20 + 3 = 123

 Inside a computer, the binary 000 would represent 0, just like in our human world!

o However, in this case we are dealing with binary so:

 The right most column is the 1s place

 The middle, the 2s

 The leftmost, the 4s

4 2 1

0 0 0

o In the human world (decimal) we use powers of 10 for place values

 100 = 1, 101 = 10, 102 = 100, 103 = 1000, etc.

o In the computer world (binary) we use powers of 2 for place values

 20 = 1, 21 = 2, 22 = 4, 23 = 8, etc.

o The difference between decimal numbers and binary numbers is changing the base

6|Page
 o For the binary number 000, we have 4 x 0 + 2 x 0 + 1 x 0 = 0 + 0 + 0 = 0!

 Consider the binary number 001:

4 2 1

0 0 1

o We have 4 x 0 + 2 x 0 + 1 x 1 = 0 + 0 + 1 = 1

 How do we represent the decimal number 2 in binary?

o We don’t need a 4, be we need a 2, and also no 1

4 2 1

0 1 0

o This gives us 4 x 0 + 2 x 1 + 1 x 0 = 0 + 2 + 0 = 2

 Likewise, the number 3 would be:

4 2 1

0 1 1

o As we need a 2 and a 1

o Thus, 4 x 0 + 2 x 1 + 1 x 1 = 0 + 2 + 1 = 3

 Similarly, 4 would be:

4 2 1

1 0 0

 What about 7?

4 2 1

1 1 1

o Which yields 4 x 1 + 2 x 1 + 1 x 1 = 4 + 2 + 1 = 7

 What about 8?

o We can’t count to 8 without another bit (binary digit)

7|Page
  We run into this in the real world too if we need a four-digit number vs a 3-
digit number

 Start with the 1s, 10s, 100s place and add the 1000s

 Here we’ll add the next power of 2, 8

8 4 2 1

1 0 0 0

 8x1+4x0+2x0+1x0=8

 Even though computers only use binary, they can count as high as humans can!

o They do it with a smaller vocabulary, just 1 and 0.

 This is because it’s easier to represent two states in the physical world

 If you think of one of these bits as being a light bulb:

 0 is off

 1 is on

 Light bulbs just need electricity to turn on or off

 Electricity is sufficient to turn a switch on or off

 Inside a computer exists these switches called transistors

 Modern computers have billions!

 Turned off represents 0

 Turned on represents 1

 Using these transistors we can store values, store data, compute, and do everything we can
with computers

 David demonstrates how transistors work using light bulbs

 So far all that we can represent is numbers

o A decision needs to be made on what pattern of 1s and 0s to represent letters,

words, and paragraphs

o All computers can store is 0s and 1s

o To represent letters, we need a mapping of 0s and 1s to characters

 ASCII (American Standard Code for Information Interchange) does this

8|Page
  65 -> A, 66 -> B, 67 -> C, etc.

 97 -> a, 98 -> b, 99 -> c, etc.

 ASCII also has mapping for punctuation symbols

o Programs like notepad, textedit, and MicroSoft Word decide weather to display
patterns of bits as letters or words

 Computers only store 0s and 1s, but the programs interpret those bits in a
certain way

 For example, if MicroSoft word sees a pattern of buts representing

the number 65, it will interpret that as “A”

o ASCII is limited

 Original ASCII is 7 bits, thus giving 128 characters

 Extended ASCII is 8 bits, yielding 256 characters

 Many symbols are not represented

o UNICODE is a bigger set of characters that includes written languages other than
English and even emoji!

 All are still represented by a pattern of bits

 Consider this pattern of bits: 01001000 01001001

o 16 bits or 2 bytes (1 byte = 8 bits)

9|Page
 128 64 32 16 8 4 2 1 128 64 32 16 8 4 2 1

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

1 x 64 + 1 x 8 1 x 64 + 1 x 8 + 1 x 1

72 73

H I

o Using ASCII we get the word “HI”

CPU
 If you have heard that your computer has “Intel Inside,” it has an Intel processor in it

o The backside of the processor has pins that connect into the motherboard

 The motherboard is a circuit board made of silicon

 The CPU is the brain of the computer

o Does all the thinking

o Performs math in numbers fed to it

o Helps display numbers on a screen

o Adds or deletes numbers

 CPUs now can have multiple cores

o Cores are the devices inside the CPU that can preform mathematical operations,
load info from memory, save info to memory, etc.

o The more cores, the more tasks a CPU can do at once

10 | P a g e
  CPUs now also support hyper-threading

o Where a single core will present itself as multiple cores to a computer’s operating
system

 Systems on a Chip (SoaC) are when a CPU and more are all interconnected at once rather
than attached to a motherboard

o Popular in phones, tablets, and game consoles

o Raspberry Pi

RAM (Random Access Memory)

 Circuit board with chips that slides into a slot on the motherboard

o The chips store data

 Only stores data when the power is on

o Files and programs are loaded onto these chips when ran

o Fast memory

 You can check your RAM and other specs:

o Windows Task Manager

11 | P a g e
  CPU chart shows when peak usage occurs

 GHz is the number of operations a CPU can perform per second (in billions)

 1.94 GHz = 1.94 billion operations per second

 Logical processors in this case is 4, which means both cores support hyper-
threading

 Each core will do two things at once as if 4 cores exist

o Mac System Profiler

Hard Drives
 When you turn a computer off, you need a place to store data

o A hard disk drive (HDD) stores this information

12 | P a g e
 o RAM may store 1 GB, 2 GB, 4 GB, through 16 GB or so

o HDD stores 256 GB, 1024 GB (AKA terabyte or TB), 2 TB

o Inside a HDD, metal platters physically spin around

 Data is stored on these disks

 The reading heads move back and forth reading data from the device

 Uses tiny magnetic particles where north pole orientation represents 1 and
south pole orientation represents 0

 Power is only needed to read or change the data

 Data is preserved when power is off

 David shows a video of a HDD running in slowmo

 To store data in a hard drive, RAM sends data and instructions to the HDD

o The hard drive translates that data into voltage fluctuations

 Some signals spin the platters, others move the read/write heads

13 | P a g e
  Pulses sent to the read/write head turn on a magnet which creates a field that
changes the polarity of a tiny portion of the metal platter’s surface

 Power is sent in different directions as to change polarity

o To read, the particles on the disk use their charge to move the read/write head.

o Pieces of a file can be spread out around the platters

 A special file keeps track of data’s location

o Anytime you have a physical device that moves over a period of time, things go
wrong

 Dropping a HDD can corrupt files

o Platters spin slower than how fast electrons move

Flash Memory
 Solid state disk (SSD)

o Smaller (3.5 inch width for HDD vs 2.5 inch width for SSD)

 Still fits where old HDDs are

o No moving particles

o Inside, it looks a lot like RAM

14 | P a g e
 o Much faster than HDD

 Programs/files load and save more quickly

o SSD theoretically don’t last as long as HDD

 Finite number of writes

 Hybrid Drives

o Some GB of solid state memory and more GB or TB of HDD space

o Stores as much of frequently-needed data on the SSD

o Stores less frequently-needed data on HDD

 Flash memory also exists in the form of USB sticks

o Might store 1 GB, 16 GB, or more

o Portable

 External SSDs exist for more storage

o Might store 256 GB or more

o Can be used to share data with others without network usage

 Can also have external HDD

Types of Memory and Funneling

 There is a tradeoff between space, money, and speed of data transfer

o Data is pushed “down the funnel” to your CPU

 From the hard drive, data first goes to the RAM

15 | P a g e
  Theoretically, the CPU never has to wait for data to crunch

 There is a tiny amount of memory (bytes) called registers where numbers

are stored for operations.

 Memory at the bottom is more expensive

 Disk is important for the long-term storage

 RAM is important as it stores programs you use simultaneously

 L3, L2, L1 cache are on the motherboard

 As an analogy for memory, picture a candy store

o A customer approaches the counter and requests candy

o The shop owner then leaves the counter to grab the candy before returning moments
later

 Not super efficient to walk all the way to the store room to grab candy

 Better to have a cache of memory

o Instead, the shop owner leaves the counter to ready a cache of candy before the
customers arrive

o When a customer comes, the candy can be distributed quickly

 Cache memory similarly helps the CPU in this manner

 We can see sizes of cache looking at computer specs like before

16 | P a g e
Display Connectors

 These sockets all connect to monitors or displays

 Mini Display Port are used form monitors

 HDMI is not only on laptops and computers but also TVs

 VGA is older, but still commonly uses on projectors

USB (Universal Serial Bus)

 Can plug in a whole range of peripheral devices including printers, keyboards, mice,
scanners, etc.

 USB-A most common

 USB-B is often used for printers and scanners

 USB-C is newer and can be plugged in coming from different directions

 Other variants often exist for phones

 Older USB connections are slower when transferring data

17 | P a g e
 o Hard drives can connect via USB

 Even if a hard drive is fast, if the USB is slow, the transfer of data will be
slow

Wireless
 Wifi is wireless internet

 Bluetooth allows devices such as wireless keyboards and headphones to connect to your
computer

o Limited range

 This is ok as it is used for you to connect to your own device

Operating System (OS)

 Software that ensures all devices work and can intercommunicate

 MacOS and Windows are popular OS

 Can be installed by the user, but is typically done so by a manufacturer

o Installed on HDD or SDD so that it exists persistently without power

 When you hit power on your computer, the OS is loaded into RAM

 Gives you the graphical interface that you see

 Knows how to:

o Talk to your keyboard and mouse

o Display info on the screen

o Move things around in memory

 This is all thanks to device drivers installed with the OS

o Special software designed to talk to certain model of printer, camera, scanner, etc.

 When an OS doesn’t recognize a device, perhaps because it’s too new, you can download
new device drives from the device manufacturer

o Teaches Window, MacOS, or Linux about that new hardware

o Future-proofing structure

 It’s this intersection of hardware and software that makes computers powerful!

18 | P a g e
 2- Internet

Introduction
 We use the internet daily and have constant access and connectivity

 Home network

 Cable modem, DSL modem, or FIOS device

 Connects to the internet

 Pay monthly for an ISP (Internet Service Provider)

 Verizon, Comcast, etc.

 Could have built in wireless connectivity for your devices

 May need an additional home router

 Devices connect to a router via cables or wifi

IP
 Every computer on the internet has an IP (Internet Protocol) address

o Of the form #.#.#.#

 Four numbers separated by dots of the values 0-255

 Other IP address formats exist today as well

19 | P a g e
 o Like postal addresses, they uniquely identify computers on the internet

 Any device connected to the internet has an IP address

 Allows other computers to talk to it

 ISPs assign a IP address to your computer (router)

o Used to be physically configured

o DHCP (Dynamic Host Configuration Protocol)

 Software that ISPs provides to allow your computer to request an IP address

 DHCP servers respond with a specific IP address for your Home

o Multiple devices can connect to your home network

 The home router supports DHCP and assigns IP addresses to your devices

DNS
 We access websites using domain names (Facebook.com, Google.com, etc.), but it turns
out that these sites too have IP addresses

 DNS (Domain Name System) servers convert domain names into IP addresses

Packets
 Computers communicate by sending packets, which are like virtual envelopes sent between
computers

o Ultimately still 0s and 1s

 As an analogy, suppose we want to find a cat image on the internet

 So, we send a request to a server, say Google, like “get cat.jpg”

o We place this request in an envelope

 On the envelope, we list out IP as the return address

 However, for the recipient of the request, we don’t know the IP address for Google

o Have to rely on DNS

o Send a request to our ISPs DNS server for Google’s IP address

 If the ISP’s DNS server doesn’t know a website’s IP address, it has been
configured to ask another DNS server

20 | P a g e
  There exist root servers that know where to look to for an IP address if it
exists

 After sending the request off, we’ll get a response ms later

 The cat will be sent back in one or more packets

o If the cat image is too large for a single envelope, sending it in one packet could
take up internet traffic

o To solve this, Google will divide the cat image into smaller fragments

 Put the fragments into different envelopes

 Write information on the envelopes

 Return address: Google’s IP address

 Delivery address: Our IP address

 List the number of packets on each envelope (1 of 4, 2 of 4, etc.)

TCP/IP
 IP goes beyond addresses

o Set of conventions computers and servers follow to allow intercommunication

 Fragmentation like in the envelope example are supported by IP

o If missing a packet, you can logically infer which packet you’re missing based on
the ones received

 However, IP doesn’t tell computers what to do in this case

 TCP (Transmission Control Protocol) ensures packets can get to their destination

o Commonly used with IP (TCP/IP)

o Supports sequence numbers that help data get to its destination

21 | P a g e
  When missing a packet, a computer can make a request for the missing
packet

 The computer will put packets together to get a whole file

o Also includes conventions for requesting services (port identifiers)

 To make sure Google knows we’re requesting a webpage and not an email
or other service

Ports
 Per TCP, the world has standardized numbers that represent different services

 If 5.6.7.8 is Google’s IP address, 5.6.7.8;80 (port 80) lets use know that we want a webpage

o 80 means http (hypertext transfer protocol)

 The language that web servers speak

o Google will send the request to their web server via http

 Many websites use secure connections with SSL or HTTPS, which uses the port 443

 Email uses port 25

 Other ports exist as well

Protocols
 Protocols are just sets of rules

o Humans use these all the time, such as the protocol for meeting people: handshakes

 When a request is made to Google for an image, HTTP tells Google how to respond
appropriately

UDP
 User Datagram Protocol

o Doesn’t guarantee delivery

o Used for video conferencing such as FaceTime

 Packets can be dropped for the sake of keeping the conversation flowing

o Used anytime you want to keep data coming without waiting for a buffer to fill

22 | P a g e
IPs in More Detail
 IP addresses are limited

o In the format #.#.#.#, each number is 8 bits, so 32 bits total

 This yields 232 or about 4 billion possible addresses

 We’re running out of addresses for all computers

o Current version of addresses is IPv4

o Moving towards IPv6

 Uses 128 bits, yielding 2128 possible addresses

 How do you find your IP address?

 On a Mac, go to system preferences an poke around a bit

 Private addresses exist

o 10.#.#.#, 192.168.#.#, or 172.16.#.#

23 | P a g e
 o Only with special configuration can someone talk to your computer

o Your personal device is not a server, so people should not need to access them
directly

 Your device needs to request data from servers

o Even email is stored on a server such as Gmail and your device makes a request to
that server to access that email

 Looking at advanced settings…

o Subnet mask is used to decide if another computer is on the same network

o Router (aka Gateway) has its own address

 Routs data in different directions

 On windows:

24 | P a g e
 o Shows DNS servers as well

Routers
 Routers have bunches if wires coming and going out of them

o They have a big table with IP addresses and where data should be routed to get to that
destination

 Often, the data is routed to some next router

 Routers purpose is to send data in the direction of a destination

o The next router will send it to another until it reaches a destination

 The internet is a network of networks (with their own routers)

o Often multiple ways to go from A to B

 Based in US Military logic to prevent downtime if a particular router goes

down

 When multiple packets are sent, like cat.jpg from Google, they can each take a
different path, still getting to their destination eventually

25 | P a g e
  Sometimes the internet is busy and the quickest path changes

Traceroute
 How long does it take for this process of data transfer to take on the internet?

 Traceroute is a program that sends packets to each router on a path to a destination,

reporting the time it takes to reach that router

 From Sanders Theatre to Google.com:

o 1-2: A few unnamed routers at Harvard

o 3-4: More Harvard routers

o 5-6: Level3 is a ISP

o 7+: The routers are denying the request

 From Sanders Theatre to Berkeley.edu

o 6: Northern Crossroads

o 7-14: A fast connection

 8-9: Chicago

26 | P a g e
  10-11: Denver

 12-13: Las Vegas

 14: Los Angeles

o 19 is where it arrives at Berkeley in 80 ms!

 From Sanders Theatre to MIT.edu

o 6-7: Goes to New York connectivity

o 8: MIT’s website is outsourced to Akamai’s NYC servers

 From Sanders Theatre to CNN.jp

o 9-10 jumps from Seattle to Osaka past an ocean!

 Using undersea cabling

 Devices can plug into these for internet connectivity

o This modem has wifi support built in

27 | P a g e
W1-Exam
1- The difference between decimal and binary numbers is changing the base?

True

False

2- How do we represent the decimal number 5 in binary?

101

100

010

3- Number 11 in decimal is ...... in binary *

1111

0000

1011

1010

4- With.... we can store values, store data, compute, and do everything with
computers

Hardware

Transistors

RAM

5- Original ASCII is .... bits, thus giving ..... characters *

7, 128

8, 256

28 | P a g e
 9, 512

6- Which of the following is cpu function? *

Does all the thinking

Performs math in numbers fed to it

Helps display numbers on a screen

Adds or deletes numbers

All of the above

7- The more cores, the more tasks a CPU can do at once *

True

False

8-..... is a Circuit board with chips(to store data) that slides into a slot on the
motherboard

ROM

RAM

NVRAM

9- Power is not needed to read or change the data from hard disk? *

True

False

10- Hybrid Drives means Some GB of solid state memory and more GB or TB of
HDD space?

True

False

29 | P a g e
11-.... is Software that ensures all devices work and can intercommunicating *

Hardware

Firmware

Operating System

12- ... is Special software designed to talk to certain model of printer, camera,
scanner, etc.

Device Driver

USB

OS

13- ....... is used to convert domain names into IP addresses *

MAC

DNS

IP

14- ... is a program that sends packets to each router on a path to a destination,
reporting the time it takes to reach that router.

traceroute

ip

tcp

15- IPv4 is .... bits

24

32

128

30 | P a g e
 3- Multimedia
Introduction
 Odds are you use it every day, but what is it?
Audio
 Computers are good at recording, playing back, and generating audio
 Uses different file formats
o File formats are just a way of storing 0s and 1s on disk so that certain
software knows how to interpret it
 MIDI
o Way of storing musical notes for certain songs
o Can do this for different instruments
 Programs can render the notes for these instruments
 GarageBand
o Included with macOS

o This is the Star Wars theme in MIDI

 Doesn’t sound quite as good as the actual version
 Computer synthesizes the notes
 Not an actual recording
 Computer interprets notes in the MIDI file
 MIDI is common in the digital workspace among musicians who wish to share
music with each other.

31 | P a g e
 Humans typically like to hear music preformed and recorded by humans
o File formats for recorded music include:
 AAC
 MIDI
 MP3
 WAV
 WAV is an early sound format, but still used
o Uncompressed data storage allowing high quality
 MP3
o File format for audio that uses compression
 Significantly reduce how many bits are necessary to store a song
 Discards 0s and 1s that humans can’t necessarily hear
 True audiophiles may disagree
 Trade off between optimizing storage space and sacrificing quality
 This compression is said to be lossy
 Losing the quality in the compression process
 AAC
o Similar to MP3
o May see when you download a song from iTunes
 Streaming services such as Spotify don’t transfer a file to you but rather stream bits
of information to you
 How do we think about the quality of these formats?
o Sampling frequency
 Number of times per seconds we take a digital snapshot of what a
person would hear
o Bit depth
 Number of bits used for these individual snapshots
o Sampling frequency x bit depth = number of bits necessary to store one
second of music
o Audio file formats allow you to modify what these parameters are

32 | P a g e
Graphics
 A graphic, what we see with multimedia, is really just a bunch of pixels both horizontal and
vertical
o All file formats are rectangular in nature, though transparent pixels can make
images look to take on other shapes
o In the simplest form, each of the dots or pixels is a bunch of 0s and 1s

o To create a file format, we just need to determine a mapping

 This image is only black and white, so how to represent color?
RGB
 RGB stands for Red Green Blue
o With information giving an amount of red, an amount of green, and an amount of
blue, you can tell a computer how to colorize pixels
o None of the colors yields a black pixel
o All of the colors yields a white pixel
o In between these two options is where we get all sorts of colors
 Consider the three bytes: 11111111 00000000 00000000
o If we interpret these bytes to represent colors, it appears we want all of the red,
none of the green, and none of the blue
o These 24 bits (3 bytes = 3 x 8 bits = 24 bits) represent the color we know as red!
 If a computer wanted to represent this color, it would store these 24 bits
 Consider the three bytes: 00000000 11111111 00000000
o Green
 Consider the three bytes: 00000000 0000000 11111111
o Blue
 Consider the three bytes: 00000000 0000000 0000000
o Black
 Consider the three bytes: 11111111 11111111 11111111
o White
 Can get many color variations by mixing the above colors in different quantities

33 | P a g e
  When we talk about image formats, we typically don’t talk in terms of binary but rather
something called hexadecimal (base-16, contains 16 digits)
o 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
o 0 is the smallest number we can represent in single digit
o f is the largest number (value of 15) we can represent in a single digit
 Consider the 8 bits: 1111 1111
o Each hexadecimal digit represents four bits
o One hexadecimal digit can represent the first four bits, another can represent the
second four
 Represent something with eight symbols using only two!
o 1111 is the decimal number 15, which is f
o Therefore, 1111 1111 in hexadecimal is ff
 Red can thus be represented in hexadecimal as ff 00 00
 Green can be represented in hexadecimal as 00 ff 00
 Blue can be represented in hexadecimal as 00 00 ff
 A lot of graphical editing software such as Photoshop use hexadecimal to represent colors

Bitmap Format

 This background for Windows XP was a bitmap file (.bmp)

o A mapping or grid of bits much like the smiley face from before
 Zooming in on this image show that it is just a grid of dots

34 | P a g e
 o Notice the pixelation
 Much like with audio, so too in the world of images do you have discretion over how many
bits to use
o How many bits to represent each pixel’s color?
o Resolution is another factor
 An image that is only 100 pixels scaled up only duplicates the existing
limited information, resulting in a blotchy image
 Would be better to start with image that has a higher resolution (more
pixels)
 A lot of repeated colors, so it seems silly to represent each color with the same number of
bits

Image Compression
 Graphical file formats can often be compressed
 Can be done lossy or losslessly
o With audio, we threw away audio information that the human ear can’t necessarily
hear
 This is lossy compression; throwing information away
o Using fewer bits to represent the same information is lossless compression
 Lossless compression

35 | P a g e
 There is a lot of repeated blue in the first image
o Using the same 24 bits to represent each pixel!
 The second image is compressed and not what a user would see
o The first column contains the color that the rest of the row (scan line) should have
 Image contains instructions on how to repeat the color in a particular row
o When a color is encountered that isn’t in the first column (the apple in this case),
the instructions would list the colors for each non-repeated pixel
o This uses less bits but makes the original information recoverable
 Lossy compression

 This is a .jpg photograph that is somewhat compressed, but not easy to tell
 Let’s say we want to compress this image further so that we can share it without going over
a social media platform’s limit
 It contains more complicated patterns of colors, so let’s try a lossy compression resulting in
the following:

36 | P a g e
  Lossy compression means that I won’t be able to get that original image back
o The compression throws away bits of information
 “Does the sky really need this many shades of blue?”
 “Does this leaf really need this many shades of green”
 Replaces bits with only a few colors giving an approximation
 I will not be able to know how clear the sky used to be from this
information
Image File Formats
 BMP
o Originally used by Windows
o Not super common these days
 GIF
o Low quality images
 Only supports 8-bit color
o Often used for memes
 Can be animated
 Like a video file with only a few images

37 | P a g e
  JPEG
o Supports 24-bit color
o Losslessly compresses
 Can minimize amount of compression to create high quality photos
 PNG
o High quality graphics
o Supports 24-bit color
 All these formats ultimately have an limited amount of information
o Ultimate just store pixels and colors of when the image was taken

Video Compression
 You can think of a video format as similar to a flip book
 Video formats are just a bunch of images shown quickly in succession to create the illusion
of motion
o Not necessarily all information stored as png, jpg, gif, or even images
o Algorithms and mathematics can help go from one frame to another
 Opportunities for compression
o Can leverage same image compression techniques for each frame (intra-frame
coding)
o Background of multiple frames can contain redundant information

38 | P a g e
 o Compare current frame and next frame of video and determine what has changed
 Store these differences
 Key frames store a snapshot of time to remember what the video looks like
 In each subsequent frame remember what has changed
 Using algorithms and math, background is drawn
 Key frames are stored multiple times to guarantee that frames can be
recovered
Video File Formats
 In the world of video, there are more solutions on how to store information
 Video file formats are containers
o Containers are digital container in which you can put multiple types of data
o Can include a video track, audio track, a secondary audio track (for different
languages), closed captions, …
 AVI
o Commonly used in Windows
 DivX
 Matroska
o Open source container meant to be more versatile
 MP4
o Pretty much universal in all browsers
 QuickTime
o Commonly used in MacOS
 Codecs
o Ways of storing and encoding information
o For video:
 H.264
 MPEG-4 Part-2

39 | P a g e
 o For audio:
 Can be stand alone files or tracks in a container!
 AAC
 MP3

3D Video
 Increasingly, 3D formats are becoming more common

o This is a 360 degree image of Sanders Theatre

 A spherical image
 Looks distorted in 2D
 Like flattening a globe
 Images can contain metadata
o Information that viewers can’t see
o Tells programs, applications, and browsers how to display the image
 With sensors on a headset, users can experience virtual reality

 More file formats are still on the horizon, but ultimately all of them boil down to storing 0s
and 1s and why!

40 | P a g e
 4- Security

Introduction
 Our data is under constant threat, but how can we defend ourselves?
Privacy
 Keeping people away from things you don’t want them to see
 Computers are among the lease secure devices you own
o Data or files are stored on them as 0s and 1s
 Can be financial info, photos, etc.

Deleting Files
 What does it mean to delete a file off of a hard drive?
o Visually, it disappears from a desktop or folder
 Files are stored on a computer as 0s and 1s
 Some space needs to be allocated for the file
 The operating system has a file that keeps track of files an their location on disk
 Graphically, when a file is deleted, it moves to the trash (or recycle bin)
o It can still be easily revived from here, until you empty the trash
 However, an operating system doesn’t actually delete it from the hard drive
o It simply forgets the location and existence of the file!
o One can theoretically recover data by looking for familiar patterns of bits
 So how do we delete more securely?
o Re-saving a file with overridden information actually could not override the old bits
but rather create more 0s and 1s stored on a hard drive!
o Special software can wipe data off of a hard drive
 Who do computers have this obvious flaw with deleting?
o What if we accidentally delete a file?
 This structure allows for recovery
o Wiping data also takes a lot of time, so it’s much faster to just forget locations of
data
Cookies
 A feature supported by HTTP
 Little values a web server puts on a user’s browser
 Used to remember if a user has visited a website before
o Allows you to not have to log in every time you visit or refresh a page
 When you log into a web server, a cookie is planted on your browser

41 | P a g e
 o Stored in a database
o Browser will send value to web server to remind of previous login
 When we make a request we send:

GET / HTTP/1.1
Host: example.com

 We receive:

HTTP/1.1 200 OK
Set-Cookie: session=29823bf3-075a-433a-8754-707d05c418ab

o The server gives us a cookie.

 A cookie is like an ink-based hand stamp for an amusement park or club
 Wireless information can be intercepted
o What if a hacker could obtain the cookie
 Session hijacking attack
 If you have already logged in, hacker can pretend to be you
 Encryption scrambles this value so hackers cannot easily use it
 Browser history remembers everywhere you’ve been and everything you’ve done there
o Convenient if you want to recall a website you’ve visited
 But, so can anyone else with access to your browser
 Can clear browser history and cookies
o History likely not securely scrubbed
o Will protect you from nosey friends
o Websites will forget you visited as the cookies will be deleted as well!

Incognito Mode
 Can open up a typically different colored browser window
 Use if you want history automatically removed
 Useful when building a website as sometimes you want a browser to forget old iterations of
your website build
Authentication
 All of this assumes you log in
 If you don’t use a passcode to protect your device, anyone can pretend to be you
o What if you lose your phone or device?

Passwords
 On a phone could only be a few digits
o Not super secure
 With numbers, each space has 10 options
 10 x 10 x 10 x 10 = 10,000 possibilities

42 | P a g e
  0000-9999
 On many smartphones, you will have to wait for an amount of time if you have entered a
bad passcode
o Slows down the process of someone guessing
 Add more digits or letters of the alphabet
 Using a-z, A-Z, 0-9
 __ __ __ __
 Each space now has 62 options (26 + 26 + 10)
 62 x 62 x 62 x 62 = 14,776,336 possibilities
 Maybe you’re super secure and you have a 20-char password
o You could forget it
o Annoying to type in repetitively
 No one fits all
o Short = bad, longer = good
o Don’t use popular words and phrases
 Hackers will look for words or common phrases
 Most common Passwords

1. 123456
2. 123456789
3. qwerty
4. 12345678
5. 111111
6. 1234567890
7. 1234567
8. password
9. 123123
10. 987654321

 Hackers have dictionaries of bad passwords that they can search through and try
 Random passwords
o Usually have to confirm so it can be hard to replicate
 Using numbers to represent letter is common
o 1 for l
o 4 for A
 It’s suggested you mix uppercase, lowercase, and and throw in numbers
o Good to use misspellengs
 Don’t put your post-it with your password on your monitor!
 Constant password changes can be a net negative
o Can encourage easier passwords to help with memorization

43 | P a g e
Password Resetting
 What if you forget your password?
o Often can click on a link to reset your password
 Asks you to type email address or username
o Typically, you get an email with a link
 Hopefully this goes back to the same website!
 It likely has a random value in the URL
o Once back at the website, you update your password
 The website has a database
o It generated a random number and stored it with a note indicating password
recovery
o The website assumes that anyone who has access to this value and to the user’s
email is you
 Typically, tech staff can’t tell you what your password is
o Odds are your password is encrypted (scrambled) or, more technically, hashed in
their database
 Getting a password in email means that the password are not hashed or encrypted!
o Also, sending a password over email opens that email to interception
o This is a red flag if a website does this

Using The Same Password

 You may have a favorite password that you reuse
o Upside is that it’s convenient
 However, what if one of the websites are hacked?
o A hacker may try to use the password on other websites to see what she or he can
get into!
Password Managers
 Difficult to remember all these passwords
 Software called password managers exist that store on your phone or hard drive all
usernames and passwords in an encrypted way
o You have a master password that logs you into everywhere!
 Store it physically in somewhere like a safety deposit box
 Password managers create long random passwords and will log in for you
o All websites have different passwords!
 However, if you lose the master password, you cannot get the accounts back!

44 | P a g e
Two Factor Authentications
 First factor is a password
o Historically, something “only” the user knows
o Can be guessed
 Second factor should be fundamentally different
o Should be something you have
 An RSA device displays a unique value that is synced with a server

 This number needs to be typed in too!

 As long as this device isn’t stolen by someone with your password,
they can’t get in as easily
 Phones now run software that allows you to get a code and type them in
 Should think about what websites you care about the most and enable two factor
authentication
o Some companies can use sms (text messages)

Network security
 So many of our current networks are wireless
o You probably been conditioned to look for free wifi
 Sometimes still might not connect for various reasons
 If the wireless connection has not padlock (no password to log in) the connection is not
secure
o You may still visit https or secure websites
o However, everything you do on http sites can be seen
 What to do?
o Don’t use that network
o Use a VPN (Virtual Private Network)
 Connection to internet is Encrypted

45 | P a g e
  With an unsecured connection, anyone can access your data
VPN
 First establish encrypted connection to a server and let this server communicate for you
o The connection between the VPN server and website can still be insecure!
 Because we are encrypting data through an algorithm, using a VPN can slow down speed
Firewall
 A physical firewall is a wall between connected buildings that prevents the spread of fire
 In the world of computer science, a firewall is software that looks at IP addresses and helps
keep bad guys out and user data inside
 Helps prevent people from accessing your computer

Encryption
 Suppose I want to send a secret message for “HI”
o HI ➟ IJ
o Change each letter by 1
o The recipient needs to know how it changed to revert
 Plaintext ➟ Cyphertext ➟ Plaintext
o HI ➟ IJ ➟ HI
 This is called a caesar cypher
o Rotational cyphers are not that secure
 Can be guessed easily
 Not used for internet encryption
o For this to work, recipient needs the key
 To know the key, we need to agree in advance
 Can’t send it encrypted as well as they need the key!

46 | P a g e
Public Key Cryptography
 The last example with a caesar cypher is secret-key cryptography
o Only one key
 In public key cryptography there are two keys, one public and one private
o Mathematical relationship between them
o Use public key to encrypt, private key to Decrypt

o Bob’s private key can undo the effects of his public key
o When Bob responds…

o Bob sends a message using Alice’s public key

 Your browser has its own public and private keys
o So does websites like Google and Amazon
 This allows them to communicate securely with you
 Often this processes is used to exchange a secret key

47 | P a g e
Phishing
 These kind of attacks have become so prevent that the following has been posted around
Harvard’s campus

 Phishing attacks are when an adversary sends a somewhat official-looking email

o May contain a link asking for a password or account info
o The email may contain an elaborate backstory “justifying” the request
o The malicious email is trying to obtain information from you
 Odds are that the link provided doesn’t go to the website being claimed
o Can go to a website that looks legit
 People can just copy HTML
 Results in giving up private information
 It’s healthy to distrust most email you get
o Don’t follow links, type in the address for the company yourself
o Sketchy emails may have typographical errors

48 | P a g e
Malware
 Malicious software can also be sent via email
 Windows is particularly vulnerable
 Software can be injected into your browser and your computer to erase your hard drive,
make your computer send spam, or hold your data hostage
 Some malware encrypts your data and asks for large sums of money to get the key to
decrypt it
o Key could not even work!
o This is called ransomware
 Malware can ultimately do anything on your computer
Trust
 At the end of the day, all of security and privacy boils down to trust
o People around you
o Algorithms/software
o Manufacturers
 We’ve downloaded software with trust that it will only do what it claims
o Word could log your key strokes
o Chrome could monitor you even when not on Google’s website
o Snapchat could not delete posts after being seen
 There have been cases where software was written to cover tracks of being monitored!
 Who’s to say the software we’re using is actually doing what we say?
 It’s east to curl up into a ball and worry, but we need to decide who to trust
 Security measures make it more difficult for someone to be malicious, but ultimately they
can’t guarantee privacy
 You have to decide what data you’re comfortable with storing, what you view on the
internet, who to trust, and how much to trust them

49 | P a g e
W2-Exam
1- A bunch of pixels can be presented in.... *

Horizontal

Vertical

Both

2- File formats for recorded music include... *

AAC

MIDI

MP3

WAV

All of the above

3- RGB stands for.... *

Red, Green, Blue

Red, Blue, Green

4- 00000000 11111111 00000000 represents..... Color

White

Black

Green

5- 11111111 11111111 11111111 represents..... Color

White

Black

Green

50 | P a g e
6- Blue can be represented in hexadecimal as....

00 ff 00

ff 00 00

00 00 ff

7-.... image file format is used in High quality graphics

PNG

JPEG

GIF

8- Graphically, when a file is deleted, it moves to the.... *

ROM

Trash

Hard dis

9- In caesar cypher, Change each letter by 1?

True

False

10- In public key cryptography there is one key called "public key"?

True

False

11-.... Attacks are when an adversary sends a somewhat official-looking email *

Phishing

Firmware

Social Engineering

51 | P a g e
12- ... is software that store all usernames and passwords in an encrypted way. *

Password manager

USB

Public key

13- ...... is used to establish encrypted connection to a server and let this server
communicate for you.

Mac

VPN

VNP

14-... is a software/hardware that looks at IP addresses and helps keep bad guys out
and user data inside

Phishing

Malware

Firewall

15-..... Is a Software can be injected into your browser and your computer to erase
your hard drive

Phishing

Malware

Firewall

52 | P a g e
 5- Web Development
Web Browser
 Web browsers are found on phones, computers, and game consoles
 They have a space to enter a URL (Uniform Resource Locator)
o Prefixed by http:// or https://
 When typing in a URL, you’re sending a request from your device to some remote server
o The server looks at your request and figures out how to respond
o Like when we previous requested cat images!

Web Server
 A computer that has a CPU, RAM, and a hard drive

 Rack servers
o Sized so they can be stacked
 Odds are your company has many of these if they have a web server
HTTP
 We send requests to web servers

o Language of these requests is HTTP (Hypertext Transfer Protocol)

 Request: GET /cat.jpg HTTP/1.1

o 1.1 refers to HTTP language 1.1

 Response by the server: HTTP/1.1 200 OK

o This literally means that everything was okay with the request

53 | P a g e
HTTP Status Codes
Code Status Meaning

200 OK Everything is OK

301 Moved Permanently Browser should redirect to new location

302 Found Browser should redirect to new location

Browser will cache files if things don’t change to save

304 Not Modified
time/bytes from requests

401 Unauthorized Not authorized to view content; Could require login

403 Forbidden Not able to view content

The requested data could not be found because it doesn’t

404 Not Found
exist on the server

500 Internal Service Error Not your fault; The server erred

HTML
 In addition to the HTTP headers that include status codes, the bits representing an image or
website will be sent to you

 The language that builds websites is HTML (Hypertext Markup Language)

o Sent as a response for a request for a web page

 HTML isn’t a programming language but rather a markup language

o Allows you to format, but doesn’t have control flow such as loops and conditions

<!DOCTYPE html>

<html lang="en">
<head>
<title>hello, world</title>
</head>

54 | P a g e
 <body>
hello, world
</body>
</html
This is html for a webpage that says “hello, world”

 To implement webpages, you need to write HTML

o Editors like Atom and Sublime Text exist to help write HTML

 Ultimately, all you need is a computer, a keyboard, and some way of typing
out text!

 <!DOCTYPE html>

o Lets the browser know the following file is written in HTML 5

 <html lang="en">

o Specifies that the webpage is written in English

 <head></head>

o Example of open and close tags

 First tag opened is the last tag closed

o HTML is a tag-based markup language

 Tags have attributes

 Standard extension for a webpage is .html

 David clicks the hello.html file and loads the page

o In the top corner of the browser tab is the title

 This comes from the head

o The body contains 99% of the webpage’s content

o This page is a local document, so the address is where David saved it

 Not on a web server, so no one else can access it

 There are web hosts to serve up websites we write

o We can also buy our own domain name

Atom
 TextEdit is not designed for web page development

55 | P a g e
  Free alternatives made for web development exist

 Atom is an example of one of these

editors

 Fun fact: these notes were indeed created on Atom!

 In Atom, you can open multiple files at once

 Colors are added for readability

o These colors don’t effect how the webpage will render

 HTML supports comments

o To help colleagues who look at your code know your intentions of the code

Links
 Links can make our pages more dynamic by linking to other pages

o <a></a> are anchor tags that can be used for links

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>link</title>
 </head>
 <body>
 Visit <a href="http://www.harvard.edu/">Harvard</a>.
 </body>
 </html>

href (hyper reference) is set to where you want the link to go

56 | P a g e
  Blue, underlined text traditionally represents a link on a webpage

 The bottom left corner on Chrome shows the destination of a link when you hover over the
text

 A link traditionally becomes purple if you’ve already followed that link

o Browser remembers where you’ve been

 Potential privacy concern

Images
 The web is filled with images
 <img/> is the image tag
 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>image</title>
 </head>
 <body>
 <img alt="Grumpy Cat" src="cat.jpg"/>
 </body>
 </html>

The src (source) attribute is set to the address of the file

 The alt (alternative text) attribute is what displays if the page can’t be seen

 Closes itself as one tag

Paragraphs
 Even if you add spaces to format paragraphs, HTML will render without them!

 When looking at your webpage you can “view page source” on your browser to see the
original HTML with your spaces, but the webpage still doesn’t have these spaces

 The browser will only do what HTML tells it to do

 The browser needs instructions in the form of HTML tags

 Paragraph tags (<p></p>) tell the browser to create a paragraph of text

Headings

57 | P a g e
  <h1></h1> are the heading 1 tags

 There also exists <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, and <h6></h6>

 Headings get smaller the larger the number

 These make the font larger for usage similar to marking chapters in a book

Lists
 Unordered lists

o Use bullets (like these!)

o <ul></ul>

 <li></li> are list item tags

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>unordered list</title>
 </head>
 <body>
 <ul>
 <li> foo </li>
 <li> bar </li>
 <li> baz </li>
 </ul>
 </body>
 </html>

 Ordered lists

o Use numbers

o <ol></ol>

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>ordered list</title>
 </head>
 <body>
 <ol>
 <li>foo</li>
 <li>bar</li>

58 | P a g e
  <li>baz</li>
 </ol>
 </body>
 </html>

Tables
 <table></table> are table tags that create a table

 <tr></tr> are table row tags

 <td></td> are table data tag

 Like columns or cells

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>table</title>
 </head>
 <body>
 <table>
 <tr>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
 <tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr>
 <td>*</td>
 <td>0</td>
 <td>#</td>
 </tr>
 </table>
 </body>
 </html>

59 | P a g e
Implementing Google
 When you type google.com your browser adds “https://www.” to the beginning of the URL

 As is needed to surf the web

 curl is a command ran in the terminal that behaves much like a browser

 It sends a request like a browser and shows what html is

returned

 Capital letter tags are a bit dated

 Shows google.com is located at

http://www.google.com

 The -I flag tells curl to return HTML headers

 Includes status codes and other info humans normally don’t see

 Google’s server has been configured to redirect users to

http://www.google.com

 UTF-8 is unicode characters

60 | P a g e
 o curl http://www.google.com returns a webpage that includes HTML and

JavaScript

 Searching for cats changes the URL to https://www.google.com followed by a large

sequence of characters

o Distilling this URL to https://www.google.com/search?q=cats leads to the same

results

 We can “create” a search engine using this info!

Forms
 <form></form> are form tags that take attributes for an action and a method

 action="https://www.google.com/search" method="get" means “get me

https://www.google.com/search”

 Inside the form, we can have <input/> tags

o These can have name, type, value, and text attributes

 This implementation punts the searching to Google

 The browser uses the HTML form to assemble a URL

o https://www.google.com/search?q=cats

 ? in the URL means “Hey Server! Here comes my HTTP parameters!”

o A URL may have multiple parameters separated by &

css0.html
 Let’s make our webpages more pretty

61 | P a g e
  CSS (Cascading Style Sheets) allows us to style our webpages

o In contrast, HTML allows us to structure our webpages

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>css0</title>
 </head>
 <body>
 <header style="font-size: large; text-align: center;">
 John Harvard
 </header>
 <main style="font-size: medium; text-align: center;">
 Welcome to my home page!
 </main>
 <footer style="font-size: small; text-align: center;">
 Copyright &%169; John Harvard
 </footer>
 </body>
 </html>


Here, inside body, we have three tags: <header></header>, <main></main>,
and <footer></footer>

o They include style attributes written in CSS

 These are written as key-value pairs

 In CSS, there is a property called font-size

 CSS supports small, medium, large, and exact sizes such as 16px

 text-align: center; centers the text

 This example has some redundancy

DOM

62 | P a g e
  CSS supports the notion of a

hierarchy

o Rectangles here represent HTML tags or elements

o Ovals represent text values

o This is called a tree in Computer Science, much like a family tree

 When a browser receives a webpage, it builds a tree-like data structure in your computer’s
RAM

 Thus, in this case header, main, and footer are all child nodes of of the parent node body

css1.html
 We can put the text-align: center; attribute on the body element so it will pass it on to its
children (header, main, and footer)

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <title>css1</title>
 </head>
 <body style="text-align: center;">
 <header style="font-size: large;">
 John Harvard
 </header>
 <main style="font-size: medium;">
 Welcome to my home page!
 </main>
 <footer style="font-size: small;">
 Copyright &%169; John Harvard
 </footer>
 </body>
 </html>

63 | P a g e
  This is better design as we can change all the text alignment at once

css2.html
 Combining HTML and CSS is generally frowned upon

 Makes it hard to collaborate

o One person can work on content (HTML)

o The other on style (CSS)

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <style>

 .centered
 {
 text-align: center;
 }

 .large
 {
 font-size: large;
 }

 .medium
 {
 font-size: medium;
 }

 .small
 {
 font-size: small;
 }

 </style>
 <title>css2</title>
 </head>
 <body class="centered">
 <header class="large">
 John Harvard
 </header>
 <main class="medium">
 Welcome to my home page!
 </main>

64 | P a g e
  <footer class="small">
 Copyright &%169; John Harvard
 </footer>
 </body>
 </html>

o <style> can be a tag as well as an attribute

o .centered defines a class named centered

 Anything with this class with have the style attribute text-align: center;

css3.html
 We can even get rid of class attributes to further separate style from content

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <style>

 body
 {
 text-align: center;
 }

 header
 {
 font-size: large;
 }

 main
 {
 font-size: medium;
 }

 footer
 {
 font-size: small;
 }

 </style>
 <title>css3</title>
 </head>
 <body>

65 | P a g e
  <header>
 John Harvard
 </header>
 <main>
 Welcome to my home page!
 </main>
 <footer>
 Copyright &%169; John Harvard
 </footer>
 </body>
 </html>


We can also give the tags CSS directly

 Will look identical, but better design

css4.html
 What if we remove the style altogether and store it elsewhere?

 <!DOCTYPE html>

 <html lang="en">
 <head>
 <link href="css4.css" rel="stylesheet"/>
 <title>css4</title>
 </head>
 <body>
 <header>
 John Harvard
 </header>
 <main>
 Welcome to my home page!
 </main>
 <footer>
 Copyright &%169; John Harvard
 </footer>
 </body>
 </html>
 We have boiled the html down to its essence

o No usage of style tags

 Note the <link/> tag with a href attribute of css4.css and a rel (relationship) attribute
of stylesheet

o This says “Hey Browser! Please link my stylesheet css4.css to this page!”

66 | P a g e
  In the same directory, we will have this stylesheet

 body
 {
 text-align: center;
 }

 header
 {
 font-size: large;
 }

 main
 {
 font-size: medium;
 }

 footer
 {
 font-size: small;
 }

We have factored out the style to its own file

o Easier for collaboration and sharing

o Can use on multiple html pages

o Can create different themes

Closing Thoughts
 Web development is about writing code

o Specifically, HTML, which builds the structure of a webpage

o CSS allows us to fine tune the webpage’s aesthetics

 You can use these building blocks to further learn about web development on your own!

 The underlying concepts are more important than details

o A webpage is nothing more than a text file written in HTML, CSS, and maybe some
JavaScript

 This file can be uploaded to a server to put on the internet

 You can sign up for a web host with data centers

67 | P a g e
  All your files will go in a folder on the server so that the webpage
can be accessed on the internet

 You can also buy a domain name and configure it to point to the web host

 These building blocks are what allow you to put your content on the internet!

6- Programming
Introduction
 David plays a game called Oscartime that was the first Scratch program he created

68 | P a g e
  Scratch is a graphical programming language created by MIT’s Lifelong Kindergarten
Group

 The language not only helps get kids excited about programming, but it’s also very
instructive

Software
 Programing is ultimately about making software

o Software is what runs on our hardware

 Could run on a desktop, or phone, etc.

Finding Mike Smith

 Code is just a technical implementation of algorithms

 Algorithms are step by step instructions for solving problems

 Consider a phonebook full of thousands of names and phone numbers

 How do we lookup someone like Mike Smith?

 We could start at the first page, move to the next, and so on until we find him

 This is a correct algorithm, as we will find Mike Smith eventually

 However, it’s inefficient

o We could start at the first page and count by 2s

 I would find Mike Smith twice as quickly

 However, this alone is not correct as we could miss Mike Smith if his name
is sandwiched between two pages

 We could fix this by checking the previous page if we go past where Mike
Smith should be

 More likely, we’d probably go to the middle of the phonebook and find ourselves in the
“M” section

o As Smith is after M, he must be in the latter (right) half of the book

 We can ignore the other half

o After removing the other half, we are left with half of the book, representing the
same problem we started with fundamentally

69 | P a g e
  We can keep repeating this process until we’re down to one page with
Mike’s number on it

o This leverages the fact that the book is sorted alphabetically

o We are deviding and conquering

 1000 pages → 500 pages → 250 pages → 125 pages…

Phonebook Algorithm
1 pick up phone book
2 open to middle of phone book
3 look at names
4 if Smith is among names
5 call Mike
6 else if Smith is earlier in book
7 open to middle of left half of book
8 go back to step 3
9 else if Smith is later in book
10 open to middle of right half of book
11 go back to step 3
12 else
13 quit

Pseudocode
 This example algorithm is code, not written in a programming language, but rather English
 This is called Pseudocode
o Code-like syntax written in English
o Numbered lines to maintain order and reference lines
o pick up, open to, look at, call, open, and go back are functions
o if, if else, and else are conditions
o Smith is among names, Smith is earlier in book, and Smith is later in book are
Boolean expressions
 Can be either true or false
 If these are true, the indented code below is executed
o Both line 8 and 11 say to go back to step 3
 This creates a loop
 Doing the sane thing again and again

Programming Constructs
 These constructs of loops, Boolean expressions, functions, and conditions as well as others
such as variables, threads, events, and more are common across all programming languages
C

70 | P a g e
  C is one of the oldest programming languages that someone might still write in
#include <stdio.h>

int main(void)
{
printf("hello, world/n");
}

 Some of this syntax may look cryptic, but you can likely guess what it does
o It prints “hello, world” to the screen
o The other details can be learned
 Just like with written human languages that are foreign, you just haven’t
learned the patterns yet
 Many programming languages have similarities, so it becomes easier to learn new ones
with knowledge under your belt
 Ultimately, programming is about writhing software to control hardware to solve a problem
 However, computers only understand binary (0’s and 1’s)
o Source code what we humans write and it can be converted into machine code (0’s
and 1’s)
 This is achieved by using a program called a compiler
 This allows a human to write the code and a machine to read and run it

C++
#include <iostream>

int main()
{
std::out << "hello, world" << std::endl;
}


This program written in C++ still prints “hello, world”
 Many programming languages do the same things differently
o We can solve the same problem using any different number of languages
o It could be easier to use one programming language for a specific problem
 Different languages were invented to tackle different kinds of problems

Python
print("hello, world")

 Straightforwardly, this prints “hello, world”

 Python is a different type of language as you don’t type source code and manually convert
it into machine code

71 | P a g e
 o A special program called an interpreter converts the source code into an
intermediate language called byte code
 Which is not machine code (0’s and 1’s)
 2 0 LOAD_GLOBAL 0 (print)
 3 LOAD_CONST 1 ('hello, world')
 6 CALL_FUNCTION 1 (1 positional, 0 keyword pair)
 9 POP_TOP
 10 LOAD_CONST 0 (None)
 13 RETURN_VALUE
o The interpreter reads this one line at a time
 The takeaway from this is that there different ways of doing the same thing in many
different languages
o And languages get used in different ways!
o Sometimes you need to compile code, sometimes you need to interpret code
 At the end of the day, the consumer interacts with the software in the same way
o They don’t need to know what language it’s written in as long is it run on their
computer
 Programs are often packaged differently for different operating systems

Other Programming Language

 Java

class Hello
{
public static void main(String [] args)
{
System.out.println("hello, world");
}
}

 Ruby

put "hello, world"

 Lisp

(print "hello, world")

 JavaScript

console.log("hello, world")

Introducing Scratch
 Each of these languages have a lot more features, but they have commonalities
o Functions, loops, conditions, Boolean expressions, variables, threads, etc.
 To focus on these ideas in a graphical manner, we’ll explore Scratch
 In the earlier Oscartime example, trash was moving down the screen
o A screen is just a grid of pixels

72 | P a g e
 o To make animation, we move an image on it slightly
 If done quickly, it looks like movement
 To make the trash stop at the bottom of the screen, we use some Boolean expression and
condition
o “If you’re touching the bottom of the screen, stop moving”
o Or “Only if you’re not touching the bottom of the screen, keep moving”
 When trash is put in the can, the lid lifts and Oscar counts the pieces of trash disposed of
o The sprite for Oscar is using a variable
 Initialized (set initially) to 0
 Increments (adds 1 to the variable) for each piece of trash
o A condition is also used here
 “If a piece of trash is added, then increment the variable for trash pieces”
 The music was playing in some kind of loop
 Even though this program is complex enough to take 8 hours to make, it’s ultimately built
with the same fundamental building blocks of conditions, loops, etc.
hello, world in Scratch

 This is how we say “hello, world” in Scratch

o By default, a graphical cat will preform this code

 Can change the cat into other things

 This is the function for say

73 | P a g e
 This says “hello, world” forever

 This says “hello, world” 50 times

74 | P a g e
  This is an example of how to specify things conditionally

 Scratch allow you to programing by piecing together puzzle pieces with shapes that imply
what to do

 We can put an if else inside another if else

 The green blocks are Boolean Expressions

Scratch Interface
Scratch is not only a language but a programming environment as well

75 | P a g e
 On the left is Scratch the cat in a 2D world with height and width
o Can change background and more sprites to this world

 In the middle are palettes containing scripts

o Blue are motion blocks

o In the costumes tab we can change aesthetics

o The sounds tab can introduces sounds and multimedia

 The blank slate on the right is where we can drag and drop the puzzle pieces and connect
them in order to instruct Scratch to do things
 when green flag clicked is equivalent to the start of your program
o The green flag button starts, the red stop sign button ends

 When we drag blocks together, the edge of the block glows white to signify they connect

 The hello, world Scratch program won’t stop until we click the red stop sign as we never
told Scratch to stop in the script

76 | P a g e
Sounds
 We can also add sounds

Loops
 If we want Scratch to do something repeatedly, we can use loops

o Can move the sound into a repeat block

 The containing block will grow to

fit

 This seems to only ply the meow once

77 | P a g e
  The sound repeats so quickly they

overlap

 This one plays the sound until done before the next cycle in the loop

 This processes was an example of a common and frustrating experience when

programming: bugs

Animation
 I want the cat to move back and forth forever

 This moves the Scratch the cat forward (to the right) until he hits the edge

o If we drag the cat back, he’ll keep moving forward

78 | P a g e
 Scratch will now rotate 180° if touching the edge of the screen

o But scratch is flipping upside down (literally rotating 180°)

 Another bug!

 We can record custom sounds under the sounds tab and add it

79 | P a g e
Breaking Down Problems
 Its much easier to write complex programs if you start out by breaking them down into
their component parts

o Consider individual milestones for yourself

 Even companies like MS didn’t create Word in a day

o Software developers make one small feature at a time

o Eventually, this becomes millions of lines of code

pet the cat

 Reading and understanding code is another side of software development

o Teams need to do this to collaborate

 When this program starts, nothing happens until the mouse pointer touches the cat, in
which the cat meows

80 | P a g e
don’t pet the cat

 This script has an if else

 Will play a lion’s roar if the mouse pointer touches the cat, but will meow and wait 2
seconds if not

counting sheep

 This first sets a variable called counter to 0

 It will forever say counter for 1 second, wait one second, then increment the counter

81 | P a g e
  Ultimately, this will count forever

cough0
 We can create our own puzzle pieces

o We can do this in most programming languages

 Where we create functions

o In scratch we can utilize the functionality of existing puzzle pieces

 There is an opportunity for better design here

o IT looks like we’ve copied and pasted puzzle pieces

82 | P a g e
cough1
 We can improve this with loops

 Better design as we can change what the cat is saying or the wait time in one place

Cough2
 What if I just want a puzzle piece to make any sprite cough?

o Gain the ability to share the functionality to use elsewhere

83 | P a g e
 o We’ve defined a new block called cough

 We repeat cough 3 times, abstracting away the complexity

 We can go even further by passing in a value to your custom block

o This value is called an argument or parameter

 For example, the say block takes in an argument of “hello, world” or some
other phrase

 Whatever the user passed into cough will replace n!

 The evolution of this program is an example of what it’s like to program and solve
problems

o There were opportunities to improve from a correct yet poor design

o To be good at programming is to be able to notice opportunities like this

84 | P a g e
Threads
 In Scratch, we can have multiple sprites, each with their own scripts

o Two things will happen simultaneously, called threads

 This program has a cat chasing a bird

 Here’s what guides the

bird:

o Location in the world can be addressed with coordinates

85 | P a g e
 o Will keep moving around if not touching the cat

 Here’s what guides the cat:

o The cat will point in a random direction

o Forever checks if touching the bird and moves towards the bird

 If touching the bird, a lion’s roar will play and the script will stop

 If we increase the movement speed of the bird to 6 steps, it still gets caught

 If we increase the movement speed of the cat to 10 steps, the bird stands no chance!

Events
 A computer can do multiple things at a time due to multithreading

o Now that computers have multiple cores, they can literally do two things at once

o However, computers are so fast that even if two things are technically not
happening at the same time, we can’t notice the difference

o These threads can also intercommunicate in Scratch with events

86 | P a g e
 This sprite (an orange puppet) will forever check for the spacebar being pressed

o If this happens, the sprite will say “Marco!” for 2 seconds and broadcast event

 Events are messages only the computer can hear

 If another sprite is configured to listed for event it can respond

 This sprite will say “Polo!” for 2 seconds if it hears event

 When the green flag is clicked, the orange puppet will wait for the spacebar and then tell
the other sprite when to say “Polo!”

 This idea allows two sprites to interact in such a way that one sprite does something only if
the other does something first

87 | P a g e
Closing Thoughts
 Programmers in the real world don’t typically program by dragging and dropping code
blocks

o They write textural lines of code (C, Java, Python, etc.)

o However, the ideas are fundamentally identical

 Scratch gets rid of the syntactical distractions

 Understanding functions, loops, conditions, variables, etc. provides a fundamental

understanding of what it’s like to program

 We focused on imperative or procedural programming, but other types of programming

exist as well

o Object oriented programming

o Functional programming

 Even in all these different ways of programming, we are still utilizing the same basic
building blocks we’ve explored in Scratch

o We can assemble these building blocks to solve problems

 Oscartime was a complex game

o Zooming in, we see these basic concepts

 Forever loops make the trash fall, an if conditions to raise the lid of the
trash, etc.

 There are many more languages out there

o https://en.wikipedia.org/wiki/List_of_programming_languages

o There tend to be trends in the industry

o A programmer typically has one or a few languages that the reach for to tackle a
problem

o Good to introduce yourself to new languages

 They are easier to learn than spoken or written languages as the ideas persist

88 | P a g e
W3-Exam

89 | P a g e