oysteikt
/
itgk-kurs-2021
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add content

master
Oystein Kristoffer Tveit 2021-11-22 00:12:51 +01:00
parent bda2603208
commit d4b34ba3f2
3 changed files with 501 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

394
main.md
View File

@ -4,7 +4,7 @@
# ITGK Teori-kurs
<img src="./static/graphics/PVV-logo-blue.svg" width=40%/>
<img src="./static/graphics/PVV-logo-blue.svg" width=30%/>
Note: Introduksjon
@ -101,25 +101,25 @@ Forklar hvordan en transistor funker
| Enhet | Størrelse |
|------------|-------------------|
| byte | 8 bits |
| kilobyte | \\(1000\\) bytes |
| kilobyte | \\(10^3=1000\\) bytes |
| megabyte | \\(10^6\\) bytes |
| gigabyte | \\(10^9\\) bytes |
| terabyte | \\(10^{12}\\) |
| petabyte | \\(10^{15}\\) |
| exabye | \\(10^{18}\\) |
| exabyte | \\(10^{18}\\) |
</div>
<div class="column"> <!-- .element: class="fragment" data-fragment-index="1" -->
<div class="column fragment">
| Enhet | Størrelse |
|------------|-------------------|
| byte | 8 bits |
| kilobyte | \\(1000\\) bytes |
| megabyte | \\(10^6\\) bytes |
| gigabyte | \\(10^9\\) bytes |
| terabyte | \\(10^{12}\\) |
| petabyte | \\(10^{15}\\) |
| exabye | \\(10^{18}\\) |
| kibibyte | \\(2^{10} = 1024\\) bytes |
| mebibyte | \\(2^{20}\\) bytes |
| gibibyte | \\(2^{30}\\) bytes |
| tebibyte | \\(2^{40}\\) |
| pebibyte | \\(2^{50}\\) |
| exbibyte | \\(2^{60}\\) |
</div>
</div>
@ -148,8 +148,125 @@ Objekter
---
<!-- .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
@ -166,14 +283,22 @@ lurt å trene på
brukt ca. 20 min
---
----
*Slide med konversjon fra binær til octal og heksadesimal*
### 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
Note:
Signed magnitude
bruker første biten
@ -225,7 +350,9 @@ Ikke veldig viktig, men kan være oppklarende.
<!-- TODO: add toc -->
- Datamaskin
- Hovedkort
- CPU
- Minne
---
@ -266,7 +393,76 @@ Setter du disse på rad, så har du et program.
----
### Fetch Decode Execute Cycle (De 5 stegene)
### 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:
@ -296,7 +492,7 @@ Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verd
- Nonvolatile
- Sequential Access?
<img src="./static/graphics/storage_combined.svg" width=80% />
<img src="./static/graphics/storage_combined.svg" width=60% />
</div>
</div>
@ -367,16 +563,6 @@ Pleier ofte å være RGB
----
<style>
.rgb-pvv {color: #283681;}
.rgb-red {color: #FF0000;}
.rgb-gre {color: #00FF00;}
.rgb-blu {color: #0000FF;}
.rgb-cof {color: #C0FFEE;}
.rgb-whi {color: #FFFFFF;}
.rgb-bla {color: #000000;}
</style>
<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;"/>
@ -388,7 +574,7 @@ 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>
<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> |
|--------------------------------------|---------------|---------------|---------------|
@ -398,9 +584,8 @@ Kan derfor representeres som et hexadecimal med 6 tegn
| <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> <!-- .element: class="fragment fade-out" data-fragment-index="1" -->
<div>
</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> |
|--------------------------------------|----------------|----------------|----------------|
@ -410,7 +595,7 @@ Kan derfor representeres som et hexadecimal med 6 tegn
| <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> <!-- .element: class="fragment fade-in" data-fragment-index="1" -->
</div>
</div>
Note:
@ -419,10 +604,6 @@ Regn ut 1920x1080 x 24 bits
---
# PAUSE
---
## Lyd
<div class="columns">
@ -443,7 +624,7 @@ Regn ut 1920x1080 x 24 bits
Note:
tegn en bølge, og vis frekvensen
tegn en bølge på tavlen, og vis frekvensen
---
@ -499,7 +680,7 @@ Pseudokode
## Kompleksitet
<table>
<table width="100%">
<tr>
<td>
@ -589,22 +770,49 @@ Ikke veldig planlagt
### 5 lags modellen
<img src="./static/graphics/network-layers/network-stack.svg" width=40%/>
<div class="columns">
<div>
<img src="./static/graphics/network-layers/network-stack.svg" width=40%/>
</div>
<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>
Note:
pakker
pakket inn i hverandre
Skal se litt på hva punktumene faktisk er
----
### Physical layer
<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
----
### Data link layer
<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
@ -613,7 +821,18 @@ Stabil overføring, og kontakt med andre ender
----
### Network layer
<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
@ -622,26 +841,117 @@ Kommunikasjon gjennom flere computere.
Oppfører seg litt som postkontorer
Hop count
----
### Transport layer
<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
----
### Application 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.
---
### MAC-Addresse
`B6-4B-8F-B4-05-E5`
<!-- TODO: Fix -->
<img class="right-corner-logo" src="./static/graphics/network-layers/2/title.svg">
---
# IP
### IPv4
`ddd.ddd.ddd.ddd`
`(bbbbbbbb.bbbbbbbb.bbbbbbbb.bbbbbbbb)`
### IPv6
`xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx`
Note:
Navn på pcene
----
### Submaske
`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
----
NAT
---
### DNS
NTNU: <a href="https://129.241.160.102/">129.241.160.102</a>
---
TCP
----
UDP
---
VPN
---
# Programvareutvikling

3
reveal.json
View File

@ -3,5 +3,6 @@
"transition": "slide",
"controls": true,
"progress": true,
"keyboard": {"81": "toggleOverview"}
"keyboard": {"81": "toggleOverview"},
"width": 1300
}

147
static/main.css
View File

@ -1,7 +1,69 @@
:root {
--black : hsl(0, 0%, 0%);
--black2 : hsl(60, 17%, 11%);
--black3 : hsl(70, 8%, 15%);
--blue : hsl(190, 81%, 67%);
--grey : hsl(55, 8%, 26%);
--orange : hsl(32, 98%, 56%);
--orange2 : hsl(30, 83%, 34%);
--orange3 : hsl(47, 100%, 79%);
--purple : hsl(261, 100%, 75%);
--red : hsl(0, 93%, 59%);
--red2 : hsl(338, 95%, 56%);
--white : hsl(0, 0%, 97%);
--white2 : hsl(60, 36%, 96%);
--white3 : hsl(60, 30%, 96%);
--yellow : hsl(54, 70%, 68%);
--yellow2 : hsl(80, 76%, 53%);
--yellow3 : hsl(60, 12%, 79%);
--yellow4 : hsl(55, 11%, 22%);
--yellow5 : hsl(50, 11%, 41%);
}
.red {
color: red;
}
.black { color: var(--black); }
.black2 { color: var(--black2); }
.black3 { color: var(--black3); }
.blue { color: var(--blue); }
.grey { color: var(--grey); }
.orange { color: var(--orange); }
.orange2 { color: var(--orange2); }
.orange3 { color: var(--orange3); }
.purple { color: var(--purple); }
.red { color: var(--red); }
.red2 { color: var(--red2); }
.white { color: var(--white); }
.white2 { color: var(--white2); }
.white3 { color: var(--white3); }
.yellow { color: var(--yellow); }
.yellow2 { color: var(--yellow2); }
.yellow3 { color: var(--yellow3); }
.yellow4 { color: var(--yellow4); }
.yellow5 { color: var(--yellow5); }
.bak-black { background-color: var(--black); }
.bak-black2 { background-color: var(--black2); }
.bak-black3 { background-color: var(--black3); }
.bak-blue { background-color: var(--blue); }
.bak-grey { background-color: var(--grey); }
.bak-orange { background-color: var(--orange); }
.bak-orange2 { background-color: var(--orange2); }
.bak-orange3 { background-color: var(--orange3); }
.bak-purple { background-color: var(--purple); }
.bak-red { background-color: var(--red); }
.bak-red2 { background-color: var(--red2); }
.bak-white { background-color: var(--white); }
.bak-white2 { background-color: var(--white2); }
.bak-white3 { background-color: var(--white3); }
.bak-yellow { background-color: var(--yellow); }
.bak-yellow2 { background-color: var(--yellow2); }
.bak-yellow3 { background-color: var(--yellow3); }
.bak-yellow4 { background-color: var(--yellow4); }
.bak-yellow5 { background-color: var(--yellow5); }
.columns {
display: flex;
}
@ -10,6 +72,91 @@
flex: 1;
}
/* Tallsystemer */
.num-systems > div {
font-size: 0.75em;
text-align: left;
}
.num-system-title {
font-size: 1.5em;
}
.num-span-red > span {
color: var(--red);
margin-left: 0.2em;
}
.num-span-blue > span {
color: var(--blue);
margin-left: 0.2em;
}
.num-span-green > span {
color: var(--yellow2);
margin-left: 0.2em;
}
.num-span-orange > span {
color: var(--orange);
margin-left: 0.2em;
}
/* Fetch Decode Execute*/
.fde-table-item {
padding: 0.5em;
}
.fde-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
column-gap: 0;
row-gap: 0;
justify-items: stretch;
}
.fde-grid > * {
margin: 0;
}
.fde-c2 { grid-column-start: 2; }
.fde-c3 { grid-column-start: 3; }
.fde-c4 { grid-column-start: 4; }
.fde-c5 { grid-column-start: 5; }
.fde-c6 { grid-column-start: 6; }
.fde-c7 { grid-column-start: 7; }
.fde-c8 { grid-column-start: 8; }
.fde-r2 { grid-row-start: 2; }
.fde-r3 { grid-row-start: 3; }
.fde-r4 { grid-row-start: 4; }
.fde-r5 { grid-row-start: 5; }
.fde-r6 { grid-row-start: 6; }
.fde-r7 { grid-row-start: 7; }
.fde-r8 { grid-row-start: 8; }
/* RGB */
.rgb-pvv {color: #283681;}
.rgb-red {color: #FF0000;}
.rgb-gre {color: #00FF00;}
.rgb-blu {color: #0000FF;}
.rgb-cof {color: #C0FFEE;}
.rgb-whi {color: #FFFFFF;}
.rgb-bla {color: #000000;}
/* Network diagrams */
.prev-netdiagram {
opacity: 0.5;
}
/* TODO: fix at Mac address */
.right-corner-logo {
position: absolute;
margin: 0px;
padding: 0px;
bottom: ;
left: 10px;
}
/* Misc */
.replacable-fragment {
position: relative;
margin: auto;