Add content

main.md

@@ -40,12 +40,14 @@ men som er viktig for å forstå innholdet.
 
 ### Et par viktige personer
 
-- Ada Lovelace: Verdens første programmør  
+|||
-- Herman Hollerith: Punchcards og matematikk
+|---|---|
-- Konrad Zuse: Verdens første programmerbare datamaskin
+|Ada Lovelace      | Verdens første programmør                |
-- John von Neumann: Diverse, Neumann-arkitektur
+|Herman Hollerith  | Punchcards og matematikk                 |
-- Alan Turing – Matematisk grunnlag for datamaskin
+|Konrad Zuse       | Verdens første programmerbare datamaskin |
-- Douglas Engelbart – Datamusen, mye interaksjondesign
+|John von Neumann  | Diverse, Neumann-arkitektur              |
+|Alan Turing       | Matematisk grunnlag for datamaskin       |
+|Douglas Engelbart | Datamusen, mye interaksjondesign         |
 
 ---
 
@@ -61,15 +63,18 @@ men som er viktig for å forstå innholdet.
    - Abstraksjon
    - Transistorer
    - IC
+   - Hardware
+   - Software
 
   </div>
   <div>
 
-   - Hardware
+   - Programvarelag
-   - Software
    - Protokoll
    - WWW/Internet
    - High level/Low level
+   - Assembly
+   - Kompilering
    - bit
 
   </div>
@@ -127,6 +132,12 @@ def put_hand_on_handle():
   </div>
 </div>
 
+Note:
+
+Vacuum-tube
+
+Produseres med doping av halvledere
+
 ----
 
 <div class="columns">
@@ -145,6 +156,10 @@ def put_hand_on_handle():
   </div>
 </div>
 
+Note:
+
+Printes med fotolitografi
+
 ----
 
 ### Et par begreper:
@@ -157,15 +172,18 @@ def put_hand_on_handle():
    - Abstraksjon
    - Transistorer
    - IC
+   - Hardware
+   - Software
 
   </div>
   <div>
 
-   - Hardware
+   - Programvarelag
-   - Software
    - Protokoll
    - WWW/Internet
    - High level/Low level
+   - Assembly
+   - Kompilering
    - bit
 
   </div>
@@ -200,15 +218,18 @@ def put_hand_on_handle():
    - Abstraksjon
    - Transistorer
    - IC
+   - Hardware
+   - Software
 
   </div>
   <div>
 
-   - Hardware
+   - Programvarelag
-   - Software
    - Protokoll
    - WWW/Internet
    - High level/Low level
+   - Assembly
+   - Kompilering
    - bit
 
   </div>
@@ -444,6 +465,10 @@ Algoritme:
  - ta resten av bitsene, og konverter til desimal
  - regn ut offsett
 
+----
+
+
+
 ---
 
 ### Flyttall - IEEE 754
@@ -473,8 +498,6 @@ Ikke veldig viktig, men kan være oppklarende.
 
 # Hardware
 
-<!-- TODO: add toc -->
-
 - Hovedkort
 - CPU
 - Minne
@@ -606,6 +629,7 @@ Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verd
 
 - Volatile
 - Random Access
+- RAM
 
 <img src="./static/graphics/ram.png" width=80% />
 
@@ -615,6 +639,8 @@ Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verd
 
 - Nonvolatile
 - Sequential Access?
+- HDD
+- SSD
 
 <img src="./static/graphics/storage_combined.svg" width=60% />
 
@@ -634,6 +660,10 @@ 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
@@ -769,7 +799,9 @@ Regn ut 1920x1080 x 24 bits
 
 Note:
 
-tegn en bølge på tavlen, og vis frekvensen
+Tegn en bølge på tavlen, og vis frekvensen
+
+Samples
 
 ---
 
@@ -911,7 +943,7 @@ brukes mer om dere skal programmere mye
 
 ----
 
-Sorteringsalgortimer:
+Sorteringsalgoritmer:
 
 - Bubble sort: \\(\mathcal{O}(n^2)\\)
 - Merge sort : \\(\mathcal{O}(n\ log\ n)\\)
@@ -1067,37 +1099,61 @@ Applikasjonsspesifikk data.
 
 ---
 
-### MAC-Addresse
+<div class="net-title">
+  <img src="./static/graphics/network-layers/2/title.svg">
+  <h3>MAC-Addresse</h3>
+</div>
 
 `B6-4B-8F-B4-05-E5`
 
-<!-- TODO: Fix -->
+---
-<img class="right-corner-logo" src="./static/graphics/network-layers/2/title.svg">
+
+<div class="net-title">
+  <img src="./static/graphics/network-layers/2/title.svg">
+  <h3>Error codes</h3>
+</div>
+
+
 
 ---
 
-# IP
+<div class="net-title">
+  <img src="./static/graphics/network-layers/3/title.svg">
+  <h3>IP</h3>
+</div>
 
+<div class="columns">
+  <div>
 
 ### IPv4
  
-`ddd.ddd.ddd.ddd`
+- 32-bit
-`(bbbbbbbb.bbbbbbbb.bbbbbbbb.bbbbbbbb)`
+- 183.255.10.193
+- ddd.ddd.ddd.ddd
+- ddd = bbbbbbbb
+
+  </div>
+  <div>
 
 ### IPv6
 
-`xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx`
+- 128-bit
+xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx
+
+  </div>
+</div>
 
 
 Note:
 
 Navn på pcene
 
-
-
 ----
 
-### Submaske
+<div class="net-title">
+  <img src="./static/graphics/network-layers/3/title.svg">
+  <h3>Subnet-maske</h3>
+</div>
 
 `255.255.255.128`
 
@@ -1111,7 +1167,36 @@ Den siste er ikke veldig nyttig, men om man skal sette opp ruter
 
 ----
 
-NAT
+<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
 
 ---
 
@@ -1119,37 +1204,158 @@ NAT
 
 NTNU: <a href="https://129.241.160.102/">129.241.160.102</a>
 
+Note:
+DNS-server hos ISP
+
+Vanlig feil å få
+
 ---
 
-TCP
+<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
 
 ----
 
-UDP
+<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
 
 ---
 
-VPN
+### 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
 
 
-
-
-
-
-
-
 ---
 
-Note:
+# Lykke til!
 
+Note:
 Løs tidligere eksamener
 
 Crash course
-
-
-
-

sources.txt

@@ -10,3 +10,6 @@ https://www.righto.com/2015/12/
 https://www.pngall.com/cpu-png/download/86141
 https://hackaday.com/2019/05/09/cpu-made-from-74hc-chips-is-a-glorious-mess/
 https://en.wikipedia.org/wiki/Algorithm#/media/File:Euclid_flowchart.svg
+https://www.crompton.co.in/product/consumer-pumps/agricultural-pumps/centrifugal-monoset-agricultural-pumps/centrifugal-monoset-pumps/
+https://upload.wikimedia.org/wikipedia/commons/9/97/NetworkTopologies.svg
+https://upload.wikimedia.org/wikipedia/commons/0/0c/ComputerMemoryHierarchy.svg

static/main.css

@@ -146,13 +146,15 @@
   opacity: 0.5;
 }
 
-/* TODO: fix at Mac address */
+.net-title {
-.right-corner-logo {
+  display: flex;
-  position: absolute;
+  justify-content: center;
-  margin: 0px;
+  align-items: center;
-  padding: 0px;
+}
-  bottom: ;
+
-  left: 10px;
+.net-title > h3 {
+  display: inline;
+  padding: 1em;
 }
 
 /* Misc */