Add content
This commit is contained in:
parent
bda2603208
commit
d4b34ba3f2
392
main.md
392
main.md
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
# ITGK Teori-kurs
|
# 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
|
Note: Introduksjon
|
||||||
|
|
||||||
|
|
@ -101,25 +101,25 @@ Forklar hvordan en transistor funker
|
||||||
| Enhet | Størrelse |
|
| Enhet | Størrelse |
|
||||||
|------------|-------------------|
|
|------------|-------------------|
|
||||||
| byte | 8 bits |
|
| byte | 8 bits |
|
||||||
| kilobyte | \\(1000\\) bytes |
|
| kilobyte | \\(10^3=1000\\) bytes |
|
||||||
| megabyte | \\(10^6\\) bytes |
|
| megabyte | \\(10^6\\) bytes |
|
||||||
| gigabyte | \\(10^9\\) bytes |
|
| gigabyte | \\(10^9\\) bytes |
|
||||||
| terabyte | \\(10^{12}\\) |
|
| terabyte | \\(10^{12}\\) |
|
||||||
| petabyte | \\(10^{15}\\) |
|
| petabyte | \\(10^{15}\\) |
|
||||||
| exabye | \\(10^{18}\\) |
|
| exabyte | \\(10^{18}\\) |
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="column"> <!-- .element: class="fragment" data-fragment-index="1" -->
|
<div class="column fragment">
|
||||||
|
|
||||||
| Enhet | Størrelse |
|
| Enhet | Størrelse |
|
||||||
|------------|-------------------|
|
|------------|-------------------|
|
||||||
| byte | 8 bits |
|
| byte | 8 bits |
|
||||||
| kilobyte | \\(1000\\) bytes |
|
| kibibyte | \\(2^{10} = 1024\\) bytes |
|
||||||
| megabyte | \\(10^6\\) bytes |
|
| mebibyte | \\(2^{20}\\) bytes |
|
||||||
| gigabyte | \\(10^9\\) bytes |
|
| gibibyte | \\(2^{30}\\) bytes |
|
||||||
| terabyte | \\(10^{12}\\) |
|
| tebibyte | \\(2^{40}\\) |
|
||||||
| petabyte | \\(10^{15}\\) |
|
| pebibyte | \\(2^{50}\\) |
|
||||||
| exabye | \\(10^{18}\\) |
|
| exbibyte | \\(2^{60}\\) |
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -148,8 +148,125 @@ Objekter
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<!-- .slide: center=false -->
|
||||||
|
|
||||||
### Tallsystemer
|
### 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:
|
Note:
|
||||||
|
|
||||||
Forventet å kunne octal, binær, heksadesimal
|
Forventet å kunne octal, binær, heksadesimal
|
||||||
|
|
@ -166,14 +283,22 @@ lurt å trene på
|
||||||
|
|
||||||
brukt ca. 20 min
|
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
|
### Negative tall
|
||||||
|
|
||||||
|
- Signed magnitude
|
||||||
|
- Two's compliment
|
||||||
|
|
||||||
|
Note:
|
||||||
Signed magnitude
|
Signed magnitude
|
||||||
|
|
||||||
bruker første biten
|
bruker første biten
|
||||||
|
|
@ -225,7 +350,9 @@ Ikke veldig viktig, men kan være oppklarende.
|
||||||
|
|
||||||
<!-- TODO: add toc -->
|
<!-- 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:
|
Note:
|
||||||
|
|
@ -296,7 +492,7 @@ Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verd
|
||||||
- Nonvolatile
|
- Nonvolatile
|
||||||
- Sequential Access?
|
- Sequential Access?
|
||||||
|
|
||||||
<img src="./static/graphics/storage_combined.svg" width=80% />
|
<img src="./static/graphics/storage_combined.svg" width=60% />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<h3>
|
||||||
<span class="rgb-red">R</div><span class="rgb-gre">G</div><span class="rgb-blu">B</div>
|
<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;"/>
|
<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
|
Kan derfor representeres som et hexadecimal med 6 tegn
|
||||||
|
|
||||||
<div class="replacable-fragment" style="font-size: 0.8em;">
|
<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> |
|
| 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-whi">#FFFFFF</span> | FF\\(_{16}\\) | FF\\(_{16}\\) | FF\\(_{16}\\) |
|
||||||
| <span class="rgb-bla">#000000</span> | 00\\(_{16}\\) | 00\\(_{16}\\) | 00\\(_{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 class="fragment fade-in" data-fragment-index="1">
|
||||||
<div>
|
|
||||||
|
|
||||||
| Farge | <span class="rgb-red">Rød</span> | <span class="rgb-gre">Grønn</span> | <span class="rgb-blu">Blå</span> |
|
| 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-whi">#FFFFFF</span> | \\(255_{10}\\) | \\(255_{10}\\) | \\(255_{10}\\) |
|
||||||
| <span class="rgb-bla">#000000</span> | \\(0_{10}\\) | \\(0_{10}\\) | \\(0_{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>
|
</div>
|
||||||
|
|
||||||
Note:
|
Note:
|
||||||
|
|
@ -419,10 +604,6 @@ Regn ut 1920x1080 x 24 bits
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# PAUSE
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Lyd
|
## Lyd
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
|
|
@ -443,7 +624,7 @@ Regn ut 1920x1080 x 24 bits
|
||||||
|
|
||||||
Note:
|
Note:
|
||||||
|
|
||||||
tegn en bølge, og vis frekvensen
|
tegn en bølge på tavlen, og vis frekvensen
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -499,7 +680,7 @@ Pseudokode
|
||||||
|
|
||||||
## Kompleksitet
|
## Kompleksitet
|
||||||
|
|
||||||
<table>
|
<table width="100%">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
|
|
@ -589,22 +770,49 @@ Ikke veldig planlagt
|
||||||
|
|
||||||
### 5 lags modellen
|
### 5 lags modellen
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div>
|
||||||
<img src="./static/graphics/network-layers/network-stack.svg" width=40%/>
|
<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:
|
Note:
|
||||||
pakker
|
pakker
|
||||||
pakket inn i hverandre
|
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:
|
Note:
|
||||||
Medium for kommunikasjon mellom 2 eller flere endrepunkter
|
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:
|
Note:
|
||||||
Etablert: Kommunikasjonsmedium
|
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:
|
Note:
|
||||||
Etablert: Flere computere er koblet sammen
|
Etablert: Flere computere er koblet sammen
|
||||||
|
|
@ -622,26 +841,117 @@ Kommunikasjon gjennom flere computere.
|
||||||
|
|
||||||
Oppfører seg litt som postkontorer
|
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:
|
Note:
|
||||||
Etablert: Link over mange computere.
|
Etablert: Link over mange computere.
|
||||||
|
|
||||||
Stabil og sikker kommunikasjon til tross for forsvunnede pakker,
|
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.
|
Etablert: Stabil og sikker kommunikasjon.
|
||||||
|
|
||||||
Applikasjonsspesifikk data.
|
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
|
# Programvareutvikling
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,6 @@
|
||||||
"transition": "slide",
|
"transition": "slide",
|
||||||
"controls": true,
|
"controls": true,
|
||||||
"progress": true,
|
"progress": true,
|
||||||
"keyboard": {"81": "toggleOverview"}
|
"keyboard": {"81": "toggleOverview"},
|
||||||
|
"width": 1300
|
||||||
}
|
}
|
||||||
|
|
|
||||||
147
static/main.css
147
static/main.css
|
|
@ -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 {
|
.red {
|
||||||
color: 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 {
|
.columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
@ -10,6 +72,91 @@
|
||||||
flex: 1;
|
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 {
|
.replacable-fragment {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue