1361 lines
24 KiB
Markdown
1361 lines
24 KiB
Markdown
<link rel="stylesheet" href="./static/main.css"/>
|
||
|
||
<!-- .slide: data-background-color="#283681" -->
|
||
|
||
# ITGK Teori-kurs
|
||
|
||
<img src="./static/graphics/PVV-logo-blue.svg" width=30%/>
|
||
|
||
Note: Introduksjon
|
||
|
||
---
|
||
|
||
## <span class="red">⏺ **OBS:** Opptak</span>
|
||
|
||
Note:
|
||
PVV sin youtube-kanal
|
||
|
||
selv-introduksjon
|
||
|
||
Angående forelesningen
|
||
|
||
Planen min er å gå over de fleste temaene nevnt i pensum.
|
||
|
||
Skape "Aha!"-momenter
|
||
|
||
Kommer til å nevne en del biter som ikke nødvendigvis er viktig for pensum,
|
||
men som er viktig for å forstå innholdet.
|
||
|
||
---
|
||
|
||
## Hva er Informasjonsteknologi
|
||
|
||
- Flytting og prossesering av data
|
||
- Datamaskiner
|
||
- Punchcards
|
||
- Elektroniske datamaskiner
|
||
- Nettverk
|
||
|
||
---
|
||
|
||
### Et par viktige personer
|
||
|
||
|||
|
||
|---|---|
|
||
|Ada Lovelace | Verdens første programmør |
|
||
|Herman Hollerith | Punchcards og matematikk |
|
||
|Konrad Zuse | Verdens første programmerbare datamaskin |
|
||
|John von Neumann | Diverse, Neumann-arkitektur |
|
||
|Alan Turing | Matematisk grunnlag for datamaskin |
|
||
|Douglas Engelbart | Datamusen, mye interaksjondesign |
|
||
|
||
---
|
||
|
||
<!-- .slide: data-auto-animate -->
|
||
|
||
### Et par begreper:
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- PC
|
||
- Operativsystem
|
||
- Abstraksjon
|
||
- Transistorer
|
||
- IC
|
||
- Hardware
|
||
- Software
|
||
|
||
</div>
|
||
<div>
|
||
|
||
- Programvarelag
|
||
- Protokoll
|
||
- WWW/Internet
|
||
- High level/Low level
|
||
- Assembly
|
||
- Kompilering
|
||
- bit
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
Operativsystem -> Ressursallokering -> Kernel -> Grafisk brukergrensesnitt
|
||
|
||
Forklar hvordan en transistor funker
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- Abstraksjon
|
||
|
||
</div>
|
||
<div>
|
||
|
||
```python
|
||
def goForAWalk():
|
||
put_on_clothes()
|
||
open_the_door()
|
||
walk()
|
||
|
||
def open_the_door():
|
||
put_hand_on_handle()
|
||
shove_hand_down()
|
||
push_door()
|
||
|
||
def put_hand_on_handle():
|
||
lift_hand()
|
||
move_hand_over_handle()
|
||
lower_hand()
|
||
```
|
||
|
||
</div>
|
||
</div>
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- Transistorer
|
||
|
||
</div>
|
||
<div>
|
||
|
||
"Elekrisk bryter"
|
||
|
||
<img src="./static/graphics/transistor.svg" width="70%"/>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Vacuum-tube
|
||
|
||
Produseres med doping av halvledere
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- Integrated Chip
|
||
|
||
</div>
|
||
<div>
|
||
|
||
Elektronisk abstraksjonslag
|
||
|
||
<img src="./static/graphics/messy-breadboard.jpg" width="60%"/>
|
||
<img src="./static/graphics/ic.svg" width="60%"/>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Printes med fotolitografi
|
||
|
||
----
|
||
|
||
### Et par begreper:
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- PC
|
||
- Operativsystem
|
||
- Abstraksjon
|
||
- Transistorer
|
||
- IC
|
||
- Hardware
|
||
- Software
|
||
|
||
</div>
|
||
<div>
|
||
|
||
- Programvarelag
|
||
- Protokoll
|
||
- WWW/Internet
|
||
- High level/Low level
|
||
- Assembly
|
||
- Kompilering
|
||
- bit
|
||
|
||
</div>
|
||
</div>
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div style="vertical-align: middle;">
|
||
|
||
- WWW/Internett
|
||
|
||
</div>
|
||
<div>
|
||
|
||
**www**.website.com
|
||
|
||
<img src="./static/graphics/internet.png" width="100%"/>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
----
|
||
|
||
### Et par begreper:
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- PC
|
||
- Operativsystem
|
||
- Abstraksjon
|
||
- Transistorer
|
||
- IC
|
||
- Hardware
|
||
- Software
|
||
|
||
</div>
|
||
<div>
|
||
|
||
- Programvarelag
|
||
- Protokoll
|
||
- WWW/Internet
|
||
- High level/Low level
|
||
- Assembly
|
||
- Kompilering
|
||
- bit
|
||
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
<div class="columns">
|
||
<div class="column">
|
||
|
||
| Enhet | Størrelse |
|
||
|------------|-------------------|
|
||
| byte | 8 bits |
|
||
| kilobyte | \\(10^3=1000\\) bytes |
|
||
| megabyte | \\(10^6\\) bytes |
|
||
| gigabyte | \\(10^9\\) bytes |
|
||
| terabyte | \\(10^{12}\\) |
|
||
| petabyte | \\(10^{15}\\) |
|
||
| exabyte | \\(10^{18}\\) |
|
||
|
||
</div>
|
||
<div class="column fragment">
|
||
|
||
| Enhet | Størrelse |
|
||
|------------|-------------------|
|
||
| byte | 8 bits |
|
||
| kibibyte | \\(2^{10} = 1024\\) bytes |
|
||
| mebibyte | \\(2^{20}\\) bytes |
|
||
| gibibyte | \\(2^{30}\\) bytes |
|
||
| tebibyte | \\(2^{40}\\) |
|
||
| pebibyte | \\(2^{50}\\) |
|
||
| exbibyte | \\(2^{60}\\) |
|
||
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
### Datatyper
|
||
|
||
- Integer
|
||
- Character
|
||
- Float
|
||
- Array
|
||
- String
|
||
|
||
Note:
|
||
|
||
char -> ASCII 7b, Extended ASCII 8b, UTF-8
|
||
|
||
Finnes flere, men disse
|
||
|
||
Objekter
|
||
|
||
----
|
||
|
||
### ASCII, UNICODE, UTF-8
|
||
|
||
<img src="./static/graphics/ascii.svg" width="50%"/>
|
||
|
||
---
|
||
|
||
<!-- .slide: center=false -->
|
||
|
||
### Tallsystemer
|
||
|
||
<div class="num-systems">
|
||
|
||
<div class="fragment" data-fragment-index="0">
|
||
<span class="num-system-title">10:</span>
|
||
<span class="num-span-red">
|
||
<span>0</span>,
|
||
<span>1</span>,
|
||
<span>2</span>,
|
||
<span>3</span>,
|
||
<span>4</span>,
|
||
<span>5</span>,
|
||
<span>6</span>,
|
||
<span>7</span>,
|
||
<span>8</span>,
|
||
<span>9</span>,
|
||
</span>
|
||
<span class="num-span-blue">
|
||
<span>10</span>,
|
||
<span>11</span>,
|
||
<span>12</span>, ...,
|
||
<span>19</span>,
|
||
<span>20</span>,
|
||
<span>21</span>, ...,
|
||
<span>99</span>,
|
||
</span>
|
||
<span class="num-span-green">
|
||
<span>100</span>,
|
||
<span>101</span>, ...
|
||
</span>
|
||
</div>
|
||
|
||
<div class="fragment" data-fragment-index="1">
|
||
<span class="num-system-title">2:</span>
|
||
<span class="num-span-red">
|
||
<span>0</span>,
|
||
<span>1</span>,
|
||
</span>
|
||
<span class="num-span-blue">
|
||
<span>10</span>,
|
||
<span>11</span>,
|
||
</span>
|
||
<span class="num-span-green">
|
||
<span>100</span>,
|
||
<span>101</span>,
|
||
<span>110</span>,
|
||
<span>111</span>,
|
||
</span>
|
||
<span class="num-span-orange">
|
||
<span>1000</span>,
|
||
<span>1001</span>,
|
||
<span>1010</span>,
|
||
<span>1011</span>, ...
|
||
</span>
|
||
</div>
|
||
|
||
<div class="fragment" data-fragment-index="2">
|
||
<span class="num-system-title">16:</span>
|
||
<span class="num-span-red">
|
||
<span>0</span>,
|
||
<span>1</span>,
|
||
<span>2</span>,
|
||
<span>3</span>,
|
||
<span>4</span>,
|
||
<span>5</span>,
|
||
<span>6</span>,
|
||
<span>7</span>,
|
||
<span>8</span>,
|
||
<span>9</span>,
|
||
<span>A</span>,
|
||
<span>B</span>,
|
||
<span>C</span>,
|
||
<span>D</span>,
|
||
<span>E</span>,
|
||
<span>F</span>,
|
||
</span>
|
||
<span class="num-span-blue">
|
||
<span>10</span>,
|
||
<span>11</span>,
|
||
<span>12</span>, ...,
|
||
<span>1E</span>,
|
||
<span>1F</span>,
|
||
<span>20</span>, ...,
|
||
<span>FE</span>,
|
||
<span>FF</span>,
|
||
</span>
|
||
<span class="num-span-green">
|
||
<span>100</span>, ...
|
||
</span>
|
||
</div>
|
||
|
||
<div class="fragment" data-fragment-index="3">
|
||
<span class="num-system-title">8:</span>
|
||
<span class="num-span-red">
|
||
<span>0</span>,
|
||
<span>1</span>,
|
||
<span>2</span>,
|
||
<span>3</span>,
|
||
<span>4</span>,
|
||
<span>5</span>,
|
||
<span>6</span>,
|
||
<span>7</span>,
|
||
</span>
|
||
<span class="num-span-blue">
|
||
<span>10</span>,
|
||
<span>11</span>,
|
||
<span>12</span>, ...,
|
||
<span>76</span>,
|
||
<span>77</span>,
|
||
</span>
|
||
<span class="num-span-green">
|
||
<span>100</span>, ...
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Forventet å kunne octal, binær, heksadesimal
|
||
|
||
går tom for siffer
|
||
|
||
delbarhet
|
||
|
||
hexadesimal i 4 binær chunks om gangen
|
||
octal i 3 binær chunks om gangen
|
||
revers
|
||
|
||
lurt å trene på
|
||
|
||
brukt ca. 20 min
|
||
|
||
----
|
||
|
||
### Eksempel: 1110010111011011
|
||
|
||
<!-- TODO: Add labels to conversion fields (8 and 16) -->
|
||
|
||
<img src="./static/graphics/digit-conversion.svg" width="70%"/>
|
||
|
||
---
|
||
|
||
### Negative tall
|
||
|
||
- Signed magnitude
|
||
- Two's compliment
|
||
|
||
TODO: add diagrams
|
||
|
||
Note:
|
||
Signed magnitude
|
||
|
||
bruker første biten
|
||
|
||
0000 = 1000
|
||
kaster bort en plass
|
||
|
||
Løsning: Twos complement:
|
||
|
||
0001 = 1
|
||
0000 = 0
|
||
1111 = -1
|
||
|
||
1000 = MIN_INT
|
||
|
||
Algoritme:
|
||
- finn ut hva minste negative tall er
|
||
- ta resten av bitsene, og konverter til desimal
|
||
- regn ut offsett
|
||
|
||
----
|
||
|
||
|
||
|
||
---
|
||
|
||
### Flyttall - IEEE 754
|
||
|
||
```
|
||
>>> 0.1 + 0.2
|
||
0.30000000000000004
|
||
```
|
||
|
||
<img src="./static/graphics/floating-point-structure.svg" width=80%/> <!-- .element: class="fragment" data-fragment-index="1" -->
|
||
|
||
\\[ (+,\ \ 4,\ \ 1949284) = +1.949284 \cdot 10^4 = 19492.84 \\] <!-- .element: class="fragment" data-fragment-index="2" -->
|
||
|
||
Note:
|
||
|
||
Matematisk tilnærming
|
||
|
||
Signed bit, exponent - 2^?, signifikant?
|
||
|
||
består av 3 biter, kan gi rare utregninger iblant
|
||
|
||
Opphøyd i 10, men i virkeligheten opphøyd i 2
|
||
|
||
Ikke veldig viktig, men kan være oppklarende.
|
||
|
||
---
|
||
|
||
# Hardware
|
||
|
||
- Hovedkort
|
||
- CPU
|
||
- Minne
|
||
|
||
Note:
|
||
|
||
Består av mange forskjellige biter.
|
||
datamaskin er bare et begrep vi bruker.
|
||
Kan gå galt på veldig mange lag i prosessen.
|
||
Moores law, antall transistorer i en IC dobles hver 2. år.
|
||
|
||
---
|
||
|
||
## Hovedkort (Motherboard)
|
||
|
||
<img src="./static/graphics/motherboard2.png" width="50%"/>
|
||
|
||
Note:
|
||
|
||
Limet som fester alle de andre bitene sammen.
|
||
Inneholder litt logikk for konfigurasjon av alle bitene, men lite ellers.
|
||
|
||
---
|
||
|
||
## CPU
|
||
|
||
<img src="./static/graphics/cpu.png" width=40%/>
|
||
<img src="./static/graphics/processor.gif" width=40%/>
|
||
|
||
Note:
|
||
|
||
Viktigste biten. Gjør alle beregningene.
|
||
Består av 3 biter, kontrollenhet, minneenhet, ALU
|
||
Kjører raskt, gHz
|
||
Har et visst sett med ting den kan gjøre, kalt et instruksjonssett.
|
||
Setter du disse på rad, så har du et program.
|
||
|
||
----
|
||
|
||
### Arithmetic Logic Unit (ALU)
|
||
### & Control Unit (CU)
|
||
|
||
----
|
||
|
||
### Fetch-Decode-Execute Cycle
|
||
|
||
<table style="font-size: 0.8em;" width="80%">
|
||
<tr>
|
||
<td>
|
||
<div class="fde-table-item bak-blue">FETCH</div>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li>Henter neste instruksjon</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
<tr class="fragment" data-fragment-index="1">
|
||
<td>
|
||
<div class="fde-table-item bak-yellow">DECODE</div>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li>Dekoder instruksjonen</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
<tr class="fragment" data-fragment-index="2">
|
||
<td>
|
||
<div class="fde-table-item bak-red">EXECUTE</div>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li>Henter verdier fra minnet</li>
|
||
<li>Utfører instruksjonen</li>
|
||
<li>Skriver svaret tilbake i minnet</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<div class="fragment" data-fragment-index="3" style="padding: 0 20%; font-size: 1.5em">
|
||
|
||
```python
|
||
>>> x += y
|
||
```
|
||
|
||
</div>
|
||
|
||
----
|
||
|
||
### Pipelining
|
||
|
||
<div class="fde-grid">
|
||
<span class="fde-item bak-blue">FE</span>
|
||
<span data-fragment-index="1" class="fragment bak-yellow">DE</span>
|
||
<span data-fragment-index="3" class="fragment bak-red">EX</span>
|
||
<span data-fragment-index="2" class="fragment fde-r2 fde-c2 bak-blue">FE</span>
|
||
<span data-fragment-index="4" class="fragment fde-r2 fde-c3 bak-yellow">DE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r2 fde-c4 bak-red">EX</span>
|
||
<span data-fragment-index="5" class="fragment fde-r3 fde-c3 bak-blue">FE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r3 fde-c4 bak-yellow">DE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r3 fde-c5 bak-red">EX</span>
|
||
<span data-fragment-index="6" class="fragment fde-r4 fde-c4 bak-blue">FE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r4 fde-c5 bak-yellow">DE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r4 fde-c6 bak-red">EX</span>
|
||
<span data-fragment-index="6" class="fragment fde-r5 fde-c5 bak-blue">FE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r5 fde-c6 bak-yellow">DE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r5 fde-c7 bak-red">EX</span>
|
||
<span data-fragment-index="6" class="fragment fde-r6 fde-c6 bak-blue">FE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r6 fde-c7 bak-yellow">DE</span>
|
||
<span data-fragment-index="6" class="fragment fde-r6 fde-c8 bak-red">EX</span>
|
||
</div>
|
||
|
||
Note:
|
||
*5 steg* hver gang den skal kjøre en instruksjon
|
||
|
||
PC - program counter
|
||
Branching - hopp til andre steder/loop
|
||
Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verdt å merke seg.
|
||
|
||
---
|
||
|
||
## Minne
|
||
|
||
<div class="columns" style="font-size: 0.6em;">
|
||
<div>
|
||
<h3>Primary</h3>
|
||
|
||
- Volatile
|
||
- Random Access
|
||
- RAM
|
||
|
||
<img src="./static/graphics/ram.png" width=80% />
|
||
|
||
</div>
|
||
<div>
|
||
<h3>Secondary</h3>
|
||
|
||
- Nonvolatile
|
||
- Sequential Access?
|
||
- HDD
|
||
- SSD
|
||
|
||
<img src="./static/graphics/storage_combined.svg" width=60% />
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Primær - RAM
|
||
tilfeldig access - kan nå hvor som helst øyeblikkelig
|
||
volatilt - uten strøm så forsvinner dataen.
|
||
|
||
Sekundær - Harddisk
|
||
Tregt - cd som spinner
|
||
Sekvensiell aksess - Må lete for å lese på riktig sted.
|
||
ikke volatilt - holder på data uten strøm
|
||
SSD - Nesten random access, ligner på ram, men er ikke volatil
|
||
CD, DVD, Ekstern harddisk, USB, osv.
|
||
|
||
----
|
||
|
||
<img src="./static/graphics/memory-hierarchy.svg" width=60% />
|
||
|
||
---
|
||
|
||
### Datamaskin
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
- Hovedkort
|
||
- CPU
|
||
- Minne (Primær og Sekundær)
|
||
|
||
</div>
|
||
<div class="fragment">
|
||
|
||
- Strømforsyning
|
||
- Kabinett
|
||
- Kjøler
|
||
- Ekstra prosessorer?
|
||
- Ekstra IO?
|
||
|
||
</div>
|
||
</div>
|
||
|
||
---
|
||
|
||
# Digital Representasjon
|
||
|
||
---
|
||
|
||
## Analog/Digital
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
<img src="./static/graphics/sound-points-white.svg" width=100%/>
|
||
|
||
</div>
|
||
<div>
|
||
|
||
- ADC - inn på computeren
|
||
- DAC - ut fra computeren
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Analog kan du måle bortimot så nøyaktig du vil
|
||
Digital har et visst sett med 0 og 1
|
||
|
||
|
||
---
|
||
|
||
## Piksler
|
||
|
||
<div class="columns">
|
||
<div class="column">
|
||
<img src="./static/graphics/subpixel.svg" width=30%/>
|
||
</div>
|
||
<div class="column">
|
||
<img src="./static/graphics/e.jpg" width=100%/>
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Piksler er en måte å representere bilder
|
||
En piksel er en liten bit av bildet, med en farge.
|
||
Ofte tilsvarer 1 piksel 1 LED på skjermen
|
||
Den fargen er representert som en sammensetning av 3 farger
|
||
Pleier ofte å være RGB
|
||
|
||
----
|
||
|
||
<h3>
|
||
<span class="rgb-red">R</div><span class="rgb-gre">G</div><span class="rgb-blu">B</div>
|
||
<span style="width: 10%; display: inline-block;"/>
|
||
<img style="vertical-align:middle;" src="./static/graphics/subpixel.svg" width=40%/>
|
||
</h3>
|
||
|
||
Hver verdi er mellom 0 og 255
|
||
|
||
Kan derfor representeres som et hexadecimal med 6 tegn
|
||
|
||
<div class="replacable-fragment" style="font-size: 0.8em;">
|
||
<div class="fragment fade-out" data-fragment-index="1">
|
||
|
||
| Farge | <span class="rgb-red">Rød</span> | <span class="rgb-gre">Grønn</span> | <span class="rgb-blu">Blå</span> |
|
||
|--------------------------------------|---------------|---------------|---------------|
|
||
| <span class="rgb-pvv">#283681</span> | 28\\(_{16}\\) | 36\\(_{16}\\) | 81\\(_{16}\\) |
|
||
| <span class="rgb-red">#FF0000</span> | FF\\(_{16}\\) | 00\\(_{16}\\) | 00\\(_{16}\\) |
|
||
| <span class="rgb-cof">#C0FFEE</span> | C0\\(_{16}\\) | FF\\(_{16}\\) | EE\\(_{16}\\) |
|
||
| <span class="rgb-whi">#FFFFFF</span> | FF\\(_{16}\\) | FF\\(_{16}\\) | FF\\(_{16}\\) |
|
||
| <span class="rgb-bla">#000000</span> | 00\\(_{16}\\) | 00\\(_{16}\\) | 00\\(_{16}\\) |
|
||
|
||
</div>
|
||
<div class="fragment fade-in" data-fragment-index="1">
|
||
|
||
| Farge | <span class="rgb-red">Rød</span> | <span class="rgb-gre">Grønn</span> | <span class="rgb-blu">Blå</span> |
|
||
|--------------------------------------|----------------|----------------|----------------|
|
||
| <span class="rgb-pvv">#283681</span> | \\(40_{10}\\) | \\(54_{10}\\) | \\(129_{10}\\) |
|
||
| <span class="rgb-red">#FF0000</span> | \\(255_{10}\\) | \\(0_{10}\\) | \\(0_{10}\\) |
|
||
| <span class="rgb-cof">#C0FFEE</span> | \\(192_{10}\\) | \\(255_{10}\\) | \\(238_{10}\\) |
|
||
| <span class="rgb-whi">#FFFFFF</span> | \\(255_{10}\\) | \\(255_{10}\\) | \\(255_{10}\\) |
|
||
| <span class="rgb-bla">#000000</span> | \\(0_{10}\\) | \\(0_{10}\\) | \\(0_{10}\\) |
|
||
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
|
||
Regn ut 1920x1080 x 24 bits
|
||
|
||
---
|
||
|
||
## Lyd
|
||
|
||
<div class="columns">
|
||
<div class="column">
|
||
|
||
<img src="./static/graphics/sound-points-white.svg" width=80%/>
|
||
|
||
</div>
|
||
<div class="column">
|
||
|
||
- Bør være dobbelt så ofte som høyeste frekvensen
|
||
- Bitdybde (16 bit er standard)
|
||
|
||
</div>
|
||
</div>
|
||
|
||
\\[ 16\ bits \cdot 44100\ Hz \cdot (3 \cdot 60)s \cdot 2\ kanaler \\] <!-- .element: class="fragment" -->
|
||
|
||
Note:
|
||
|
||
Tegn en bølge på tavlen, og vis frekvensen
|
||
|
||
Samples
|
||
|
||
---
|
||
|
||
## Encoding og Komprimering
|
||
|
||
- Encoding: "Hvordan tolke dataen"
|
||
- "Codec"
|
||
- Lossless & lossy
|
||
|
||
Note:
|
||
|
||
Alt er 1 og 0, men det kan tolkes på forskjellige måter.
|
||
|
||
Grunnen til at de ofte diskuteres sammen
|
||
|
||
----
|
||
|
||
### Eksempel på komprimering
|
||
|
||
\\[ AAAAAAABBBBAAAAABB \\]
|
||
|
||
\\[ A6B4A5B2 \\] <!-- .element: class="fragment" data-fragment-index="1" -->
|
||
|
||
Note:
|
||
|
||
Rart for tekst, men gir mening for bilder -> Runlength encoding
|
||
|
||
----
|
||
|
||
### Eksempel på lossy komprimering
|
||
|
||
Dette er en eksempelsetning.
|
||
|
||
Dte e en eksmplstnig <!-- .element: class="fragment" data-fragment-index="1" -->
|
||
|
||
Note:
|
||
ikke vanlig for tekst, men akseptabelt for video/lyd/bilde
|
||
Gjøres ofte på tjenester som messenger.
|
||
|
||
----
|
||
|
||
<img src="./static/graphics/bliss_normal.jpg" width=100%/>
|
||
|
||
----
|
||
|
||
<img src="./static/graphics/bliss_jpegified.jpg" width=100%/>
|
||
|
||
---
|
||
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
# Algoritmer
|
||
|
||
<img src="./static/graphics/algorithm_definition.png" width=100%/>
|
||
|
||
##### Pseudokode
|
||
|
||
```txt
|
||
function gcd(a, b)
|
||
while a ≠ b
|
||
if a > b
|
||
a := a − b
|
||
else
|
||
b := b − a
|
||
return a
|
||
```
|
||
|
||
</div>
|
||
<div>
|
||
<img src="./static/graphics/euclid_algorithm.svg" height=80%/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
Note:
|
||
Beskriver stegvis og nøyaktig hvordan man løser et problem
|
||
Uten tolkning
|
||
Pseudokode
|
||
|
||
---
|
||
|
||
## Kompleksitet
|
||
|
||
<table width="100%">
|
||
<tr>
|
||
<td>
|
||
|
||
\\[ \mathcal{O}(1) \\]
|
||
|
||
</td>
|
||
<td>
|
||
|
||
```python
|
||
def f(lst):
|
||
print('Hi!')
|
||
```
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
|
||
\\[ \mathcal{O}(n) \\]
|
||
|
||
</td>
|
||
<td>
|
||
|
||
```python
|
||
def f(lst):
|
||
for item in lst:
|
||
print(item)
|
||
```
|
||
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
|
||
\\[ \mathcal{O}(n^2) \\]
|
||
|
||
</td>
|
||
<td>
|
||
|
||
```python
|
||
def f(lst):
|
||
for item in lst:
|
||
for itemOnceMore in lst:
|
||
print(item, itemOnceMore)
|
||
```
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
Note:
|
||
brukes mer om dere skal programmere mye
|
||
|
||
----
|
||
|
||
Sorteringsalgoritmer:
|
||
|
||
- Bubble sort: \\(\mathcal{O}(n^2)\\)
|
||
- Merge sort : \\(\mathcal{O}(n\ log\ n)\\)
|
||
|
||
---
|
||
|
||
<img src="./static/graphics/network_connect_four.png" width=50%/>
|
||
|
||
---
|
||
|
||
## Internett
|
||
|
||
<img src="./static/graphics/internet.png" width=50%/>
|
||
|
||
----
|
||
|
||
### Historie
|
||
|
||
- ARPAnet
|
||
|
||
Note:
|
||
Sponset av Dep. of defense, USA
|
||
Kjellermaskiner, matte
|
||
Ble ikke brukt aktivt hele tiden
|
||
Overføre instruksjoner
|
||
Maksimal utnyttelse
|
||
Flere universiteter koblet seg på
|
||
Ikke veldig planlagt
|
||
|
||
---
|
||
|
||
### 5 lags modellen
|
||
|
||
<div class="columns">
|
||
<div>
|
||
<img src="./static/graphics/network-layers/network-stack.svg" width=30%/>
|
||
</div>
|
||
<div>
|
||
|
||
##### Pakke
|
||
|
||
<div class="r-stack">
|
||
<img src="./static/graphics/network-layers/5/packet.svg" class="fragment fade-out" data-fragment-index="0" width=20%/>
|
||
<img src="./static/graphics/network-layers/4/packet.svg" class="fragment current-visible" data-fragment-index="0" width=30%/>
|
||
<img src="./static/graphics/network-layers/3/packet.svg" class="fragment current-visible" data-fragment-index="1" width=40%/>
|
||
<img src="./static/graphics/network-layers/2/packet.svg" class="fragment current-visible" data-fragment-index="2" width=50%/>
|
||
<img src="./static/graphics/network-layers/1/packet.svg" class="fragment current-visible" data-fragment-index="3" width=60%/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
Note:
|
||
pakker
|
||
pakket inn i hverandre
|
||
Skal se litt på hva punktumene faktisk er
|
||
|
||
----
|
||
|
||
<img src="./static/graphics/network-layers/1/title.svg" width="20%"/>
|
||
|
||
<br>
|
||
|
||
<img src="./static/graphics/network-layers/1/computer-diagram.svg"/>
|
||
|
||
Note:
|
||
Medium for kommunikasjon mellom 2 eller flere endrepunkter
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
<img src="./static/graphics/network-layers/2/title.svg" width="40%"/>
|
||
</div>
|
||
<div>
|
||
<img src="./static/graphics/network-layers/1/computer-diagram.svg" class="prev-netdiagram" width="30%"/>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<img src="./static/graphics/network-layers/2/computer-diagram.svg"/>
|
||
|
||
Note:
|
||
Etablert: Kommunikasjonsmedium
|
||
|
||
Stabil overføring, og kontakt med andre ender
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
<img src="./static/graphics/network-layers/3/title.svg" width="40%"/>
|
||
</div>
|
||
<div>
|
||
<img src="./static/graphics/network-layers/2/computer-diagram.svg" class="prev-netdiagram" width="30%"/>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<img src="./static/graphics/network-layers/3/computer-diagram.svg"/>
|
||
|
||
Note:
|
||
Etablert: Flere computere er koblet sammen
|
||
|
||
Kommunikasjon gjennom flere computere.
|
||
|
||
Oppfører seg litt som postkontorer
|
||
|
||
Hop count
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
<img src="./static/graphics/network-layers/4/title.svg" width="40%"/>
|
||
</div>
|
||
<div>
|
||
<img src="./static/graphics/network-layers/3/computer-diagram.svg" class="prev-netdiagram" width="30%"/>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<img src="./static/graphics/network-layers/4/computer-diagram.svg" width="60%"/>
|
||
|
||
Note:
|
||
Etablert: Link over mange computere.
|
||
|
||
Stabil og sikker kommunikasjon til tross for forsvunnede pakker,
|
||
|
||
TODO: move hop count from Transport layer to network layer
|
||
|
||
----
|
||
|
||
<div class="columns">
|
||
<div>
|
||
<img src="./static/graphics/network-layers/5/title.svg" width="40%"/>
|
||
</div>
|
||
<div>
|
||
<img src="./static/graphics/network-layers/4/computer-diagram.svg" class="prev-netdiagram" width="40%"/>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<img src="./static/graphics/network-layers/5/computer-diagram.svg" width="55%"/>
|
||
|
||
Note:
|
||
Etablert: Stabil og sikker kommunikasjon.
|
||
|
||
Applikasjonsspesifikk data.
|
||
|
||
---
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/2/title.svg">
|
||
<h3>MAC-Addresse</h3>
|
||
</div>
|
||
|
||
`B6-4B-8F-B4-05-E5`
|
||
|
||
---
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/2/title.svg">
|
||
<h3>Error codes</h3>
|
||
</div>
|
||
|
||
|
||
|
||
---
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/3/title.svg">
|
||
<h3>IP</h3>
|
||
</div>
|
||
|
||
<div class="columns">
|
||
<div>
|
||
|
||
### IPv4
|
||
|
||
- 32-bit
|
||
- 183.255.10.193
|
||
- ddd.ddd.ddd.ddd
|
||
- ddd = bbbbbbbb
|
||
|
||
</div>
|
||
<div>
|
||
|
||
### IPv6
|
||
|
||
- 128-bit
|
||
xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
Note:
|
||
|
||
Navn på pcene
|
||
|
||
----
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/3/title.svg">
|
||
<h3>Subnet-maske</h3>
|
||
</div>
|
||
|
||
`255.255.255.128`
|
||
|
||
`(11111111.11111111.11111111.10000000)`
|
||
|
||
`192.168.0.128`<span class="red">`/25`</span>
|
||
|
||
Note:
|
||
|
||
Den siste er ikke veldig nyttig, men om man skal sette opp ruter
|
||
|
||
----
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/4/title.svg">
|
||
<h3>Port</h3>
|
||
</div>
|
||
|
||
`1-65535` (\\(2^{16}-1\\))
|
||
|
||
Note:
|
||
|
||
Standard porter -> HTTPS, HTTP
|
||
|
||
Port scanning
|
||
|
||
----
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/3/title.svg">
|
||
<img src="./static/graphics/network-layers/4/title.svg">
|
||
<h3>NAT</h3>
|
||
</div>
|
||
|
||
<img src="./static/graphics/NAT.svg" width=50%/>
|
||
|
||
Note:
|
||
|
||
Ikke egentlig nødvendig med IPv6
|
||
|
||
Sikkerhets
|
||
|
||
Brannmur
|
||
|
||
---
|
||
|
||
### DNS
|
||
|
||
NTNU: <a href="https://129.241.160.102/">129.241.160.102</a>
|
||
|
||
Note:
|
||
DNS-server hos ISP
|
||
|
||
Vanlig feil å få
|
||
|
||
---
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/4/title.svg">
|
||
<h3>TCP</h3>
|
||
</div>
|
||
|
||
- Three way handshake
|
||
- Kvitteringer
|
||
- Kryptering
|
||
- Flow control
|
||
- Congestion control
|
||
|
||
Note:
|
||
De siste er ikke viktig å vite hvordan funker
|
||
|
||
----
|
||
|
||
<div class="net-title">
|
||
<img src="./static/graphics/network-layers/4/title.svg">
|
||
<h3>UDP</h3>
|
||
</div>
|
||
|
||
<img src="./static/graphics/pump.png" width=35%/>
|
||
|
||
Note:
|
||
Bryr seg ikke om mottaker har fått pakken
|
||
Bryr seg ikke nettverksfart
|
||
|
||
---
|
||
|
||
### LAN og WAN
|
||
|
||
<img src="./static/graphics/NAT.svg" width=50%/>
|
||
|
||
Note:
|
||
Nå kommer mye forskjellig. Ikke i rekkefølge.
|
||
|
||
---
|
||
|
||
### VPN
|
||
|
||
<div class="r-stack">
|
||
<img src="./static/graphics/Proxy.svg" class="fragment fade-out" data-fragment-index="0" width=50%/>
|
||
<img src="./static/graphics/VPN.svg" class="fragment current-visible" data-fragment-index="0" width=40%/>
|
||
</div>
|
||
|
||
Note:
|
||
Proxy-server
|
||
|
||
Arbeids-VPN, NTNU-VPN
|
||
|
||
Forandret IP -> Netflix
|
||
|
||
---
|
||
|
||
### Circuit switching
|
||
|
||
<div class="r-stack">
|
||
<img src="./static/graphics/network-switching.svg" class="fragment fade-out" data-fragment-index="0" width=80%/>
|
||
<img src="./static/graphics/circuit-network-switching1.svg" class="fragment current-visible" data-fragment-index="0" width=80%/>
|
||
<img src="./static/graphics/circuit-network-switching2.svg" class="fragment current-visible" data-fragment-index="1" width=80%/>
|
||
<img src="./static/graphics/circuit-network-switching3.svg" class="fragment current-visible" data-fragment-index="2" width=80%/>
|
||
</div>
|
||
|
||
----
|
||
|
||
### Packet switching
|
||
|
||
<img src="./static/graphics/network-switching.svg" width=80%/>
|
||
|
||
---
|
||
|
||
### Topologier
|
||
|
||
<img src="./static/graphics/network-topologies.svg" width=50%/>
|
||
|
||
---
|
||
|
||
### Network Performance
|
||
|
||
- Delay
|
||
- Jitter
|
||
- Quality of Service
|
||
|
||
---
|
||
|
||
### Sikkerhet
|
||
|
||
----
|
||
|
||
### Hashing
|
||
|
||
- Enveis prosess
|
||
- Produserer tilfeldiglignende tekst
|
||
- Mange forskjellige algoritmer
|
||
|
||
F.eks:
|
||
|
||
\\[ \text{"Test"} \xrightarrow{\text{SHA1}} \text{640ab2bae07bedc4c163f679a746f7ab7fb5d1fa} \\]
|
||
|
||
Note:
|
||
Nyttig for filer
|
||
Nyttig for passord-lagring
|
||
Mulighet for lik hash, men sjelden
|
||
|
||
Referer tilbake til error codes
|
||
CRC, Checksum -> Irreversibel, men dårlig hash
|
||
|
||
----
|
||
|
||
|
||
|
||
----
|
||
|
||
### Kryptering
|
||
|
||
- Symmetric key encryption
|
||
- Private/Public key encryption
|
||
- Digital signatur
|
||
|
||
Note:
|
||
Referer tilbake til TCP
|
||
|
||
---
|
||
|
||
### Forskjellige typer angrep
|
||
|
||
- Replay
|
||
- Buffer overflow
|
||
- Wiretapping
|
||
- DDNS
|
||
|
||
---
|
||
|
||
### Trender
|
||
|
||
---
|
||
|
||
# Programvareutvikling
|
||
|
||
|
||
---
|
||
|
||
# Lykke til!
|
||
|
||
Note:
|
||
Løs tidligere eksamener
|
||
|
||
Crash course |