update termin-2 slides
This commit is contained in:
@@ -72,17 +72,15 @@ Hochschule der Medien Stuttgart
|
|||||||
|
|
||||||
**Was wir gelernt haben:**
|
**Was wir gelernt haben:**
|
||||||
|
|
||||||
- Geschichte: Hollerith → IBM → Von Neumann → ARPANET
|
- Geschichte: Lovelace -> Hollerith → IBM -> Turing → Von Neumann → ARPANET -> Kalifornische ForscherInnen
|
||||||
- Von-Neumann-Architektur (5 Komponenten)
|
- Von-Neumann-Architektur (5 Komponenten)
|
||||||
- Bits, Bytes, Hexadezimal
|
- Bits, Bytes, Hexadezimal (8Bits = 2 * 4Bits = 16 * 16 Hexadezimalzahlen)
|
||||||
- HTML-Grundlagen & semantische Tags
|
|
||||||
|
|
||||||
**Fragen? Probleme bei der Fleißaufgabe?**
|
**Fragen? Unklarheiten?**
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Kurze Wiederholung
|
Kurze Wiederholung
|
||||||
Fragen klären
|
Fragen klären
|
||||||
Wer hat die Fleißaufgabe gemacht?
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -90,15 +88,22 @@ Wer hat die Fleißaufgabe gemacht?
|
|||||||
# Heute
|
# Heute
|
||||||
|
|
||||||
**Vormittag:**
|
**Vormittag:**
|
||||||
- Netzwerke vertieft (OSI, TCP/IP)
|
- Netzwerke (OSI, TCP/IP)
|
||||||
- DNS: Wie funktionieren Domain-Namen?
|
- DNS: Wie funktionieren Domain-Namen?
|
||||||
- HTTP im Detail
|
- HTTP(S) im Detail
|
||||||
|
|
||||||
**Nachmittag:**
|
**Nachmittag:**
|
||||||
- CSS-Grundlagen
|
- CSS-Grundlagen
|
||||||
- Selektoren & Spezifität
|
- Selektoren & Spezifität
|
||||||
- Layouts mit Flexbox
|
- Hands-On: Wir bauen uns einen eigenen Caption Generator
|
||||||
- Hands-On: Eure Seite stylen
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Ressourcen zum Selbstlernen
|
||||||
|
|
||||||
|
* Online Code-Editor: https://codepen.io/pen/
|
||||||
|
* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
|
||||||
|
* HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -111,13 +116,13 @@ Wer hat die Fleißaufgabe gemacht?
|
|||||||
|
|
||||||
# Wiederholung: OSI-Modell
|
# Wiederholung: OSI-Modell
|
||||||
|
|
||||||
**Merksatz:** "**A**lle **d**eutschen **S**tudenten **t**rinken **v**erschiedene **S**orten **B**ier"
|
**Merksatz:** "**A**lle **d**eutschen **S**studierenden **t**rinken **v**erschiedene **S**orten **B**ier"
|
||||||
|
|
||||||
| Schicht | Name | Merksatz |
|
| Schicht | Name | Merksatz |
|
||||||
|---------|------|----------|
|
|---------|------|----------|
|
||||||
| 7 | **A**nwendung | **A**lle |
|
| 7 | **A**nwendung | **A**lle |
|
||||||
| 6 | **D**arstellung | **d**eutschen |
|
| 6 | **D**arstellung | **d**eutschen |
|
||||||
| 5 | **S**itzung | **S**tudenten |
|
| 5 | **S**itzung | **S**studierenden |
|
||||||
| 4 | **T**ransport | **t**rinken |
|
| 4 | **T**ransport | **t**rinken |
|
||||||
| 3 | **V**ermittlung | **v**erschiedene |
|
| 3 | **V**ermittlung | **v**erschiedene |
|
||||||
| 2 | **S**icherung | **S**orten |
|
| 2 | **S**icherung | **S**orten |
|
||||||
@@ -284,6 +289,12 @@ ACK bestätigt Empfang
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
# Klausurrelevant: TCP/IP und UDP
|
||||||
|
|
||||||
|
<!-- TODO: Farbig-hinterlegten Container mit komprimierenten Infos zu beiden Protokollen, Vor und Nachteilen etc. -->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
# Schicht 7: Anwendung
|
# Schicht 7: Anwendung
|
||||||
|
|
||||||
**Protokolle, die wir täglich nutzen:**
|
**Protokolle, die wir täglich nutzen:**
|
||||||
@@ -328,14 +339,15 @@ DNS macht Internet benutzbar
|
|||||||
# DNS-Hierarchie
|
# DNS-Hierarchie
|
||||||
|
|
||||||
```
|
```
|
||||||
. (Root)
|
(Root)
|
||||||
/|\
|
.
|
||||||
/ | \
|
/ | \
|
||||||
.de .com .org
|
/ | \
|
||||||
/ \
|
.de .org .com
|
||||||
hdm-stuttgart google
|
/ \
|
||||||
|
hdm-stuttgart google
|
||||||
| |
|
| |
|
||||||
www mail
|
www mail
|
||||||
```
|
```
|
||||||
|
|
||||||
**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
|
**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
|
||||||
@@ -504,13 +516,6 @@ POST = nicht idempotent
|
|||||||
|
|
||||||
<!-- _class: lead -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Pause
|
|
||||||
## 15 Minuten
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _class: lead -->
|
|
||||||
|
|
||||||
# Teil 2: CSS
|
# Teil 2: CSS
|
||||||
## Webseiten gestalten
|
## Webseiten gestalten
|
||||||
|
|
||||||
@@ -551,13 +556,14 @@ Separation of Concerns
|
|||||||
<style>p { color: blue; }</style>
|
<style>p { color: blue; }</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Option 3: Inline** (vermeiden!)
|
**Option 3: Inline als HTML-Attribute** (vermeiden!)
|
||||||
```html
|
```html
|
||||||
<p style="color: blue;">...</p>
|
<p style="color: blue;">...</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Externe Datei = wiederverwendbar, cachebar
|
Externe Datei = wiederverwendbar, cachebar
|
||||||
|
Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -842,18 +848,10 @@ vw/vh = Viewport (sichtbarer Bereich)
|
|||||||
- **Basics:** Alle machen
|
- **Basics:** Alle machen
|
||||||
- **Advanced:** Wer möchte
|
- **Advanced:** Wer möchte
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _class: lead -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Mittagspause
|
# Teil 3: Layouts (optional)
|
||||||
## 60 Minuten
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _class: lead -->
|
|
||||||
|
|
||||||
# Teil 3: Layouts
|
|
||||||
## Flexbox & mehr
|
## Flexbox & mehr
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -1029,6 +1027,10 @@ Logo links, Links rechts
|
|||||||
Oder gleichmäßig verteilt
|
Oder gleichmäßig verteilt
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Pseudo-Klassen
|
# Pseudo-Klassen
|
||||||
|
|||||||
Reference in New Issue
Block a user