diff --git a/main.md b/main.md
index 5403a00..b0adb45 100644
--- a/main.md
+++ b/main.md
@@ -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
diff --git a/reveal.json b/reveal.json
index 574245c..283e5c3 100644
--- a/reveal.json
+++ b/reveal.json
@@ -3,5 +3,6 @@
"transition": "slide",
"controls": true,
"progress": true,
- "keyboard": {"81": "toggleOverview"}
+ "keyboard": {"81": "toggleOverview"},
+ "width": 1300
}
diff --git a/static/main.css b/static/main.css
index 3174da7..59d7caa 100644
--- a/static/main.css
+++ b/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 {
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;