ETA Teil 3: Internet Technologie

Executive Tech Academy. Teil 3
Internet Technologie. Namics.
Lara Mogge
Jürg Stuker
Bern, 16. Oktober 2019
A Merkle Company

Namics. A Merkle Company
Ich rufe eine Website auf...
2ETA - Internet Technologie

Adressierung: MAC Adresse
● MAC = Media Access Control
● Hardware-Adresse
● meine heisst grad 78:4f:43:51:67:12
● ist übrigens Hexadezimal ;)

Adressierung: IP Adresse
● IP = Internet Protocol
● Internet Adressen
● ursprünglich Version 4 (IPv4): 32 Bit lang
● aktualisierte Version 6 (IPv6): 128 Bit lang
● übliche Darstellung IPv4 sind vier Blöcke dezimal: a.b.c.d
● meine IPv4 ist grad 192.168.8.99
● reservierte Adressen / Adressbereiche

Geek Culture

Adressierung: DNS
● DNS = Domain Name Service
● DNS ist ein Verzeichnis/-dienst, der IP-Adressen zu Namen
übersetzt (und umgekehrt)
● namics.com übersetzt (aktuell) in die IP-Adresse 116.203.6.199

Client Server

Client Server
Router
Switch

Netzwerk: Mehrere, voneinander abstrahierte Ebenen
1. Bitübertragung
(Physical)
2. Sicherung
(Data Link)
3. Vermittlung-/Paket
(Network)
4. Transport
5. Sitzung
(Session)
6. Darstellung
(Presentation)
7. Anwendungen
(Application)
Netzwerkkabel
Ethernet / WLAN
TCP/IP
HTTP / HTTPS
DNS

Client Server
Anfrage
Antwort
Anfrage
Antwort
Antwort
Antwort
...

Client Server
Request URL: http://namics.com/
Request Method: GET
Status Code: 301 Moved Permanently
Location: https://namics.com/
Request URL: https://namics.com/
Request Method: GET
Status Code: 200 OK
<!DOCTYPE html>
<html lang="de">
...

URL
URL = Uniform Ressource Locator
● generellen Identifikationsbezeichnung ist URI (Uniform Resource Identifier)
● URL ist die erste und häufigste Art von URIs
identifiziert und lokalisiert eine Ressource, beispielsweise eine Website
Beispiel: https://namics.com/ueber-uns
https://juerg:geheim@www.namics.com:8080/index.html?p1=A&p2=B#ressource
Schema Kennwort Host Port Pfad Query Fragment
Benutzer
Quelle: https://de.wikipedia.org/wiki/Uniform_Resource_Locator

HTTP Status Codes
1xx – Informational response (Informationen)
2xx – Success (Erfolgreiche Operation)
● 200 = OK
3xx – Redirection (Umleitung)
● 301 = Moved Permanently
● 302 = Found (Moved Temporarily)
4xx – Client errors (Client-Fehler)
● 404 = Not found
5xx – Server errors (Server-Fehler)
Quelle: https://de.wikipedia.org/wiki/HTTP-Statuscode

Weiter geht es mit...
HTML (Hypertext Markup Language)
● Beschreibungssprache
● Inhalt und Struktur von Websites
CSS (Cascading Style Sheets)
● Beschreibungssprache
● Visuelle Formatierung (das Aussehen) von HTML (Websites)
JavaScript
● Programmiersprache

HTML
a ist ein Tag, seine Bedeutung ist anchor (Anker)
● <a> eröffnet den Tag
● </a> schliesst den Tag
href und class sind Attribute
● href steht für hypertext reference (das was wir URL resp. Link nennen)
● class verweist auf das Stylesheet und bestimmt aus Aussehen
Kontakt ist der Inhalt

CSS
background-color (Hintergrundfarbe)
● 0 red, 0 green, 0 blue, 0 alpha
font-family (Schriftfamilie)
● Wenn vorhanden “RoundDot” sonst “GT America” sonst der Standard für sans-serif

JavaScript
alert('Hello, World');

1. Mit dem Netzwerk verbunden: Layer 1
2. Netzwerkkarte hat sich mit MAC (an Ethernet) angemeldet: Layer 2
3. Rechner hat eine IP-Adresse (erhalten): Layer 3
4. www.domane.ch mittels DNS in IP-Adresse umgewandelt
5. Aufruf einer URL der IP-Adresse von www.domane.ch über HTTP(S)
6. Rückmeldung der HTML-Grundseite (base page) über HTTP(S)
7. Analyse der HTML-Grundseite nach weiteren Seitenelementen (page elements)
8. Aufruf der Seitenelemente über HTTP(S)
9. ...

Abschluss Teil 3
Zentrale Protokolle die bei Aufruf einer Website benötigt werden
● MAC, TCP/IP und DNS
Wie “reisen” Datenpakete vom Client zum Server (und zurück)
● Internet routing
Bausteine einer Website
● HTML, CSS, JavaScript
● Die wunderbaren “Developer Tools” im Chrome Browser

Epilog und Lizenz
Muss der Trainer seine Sportart selbst ausgeübt haben?
Ein technisches Grundverständnis hilft, um die
Herausforderungen der digitalen Transformation innerhalb des
eigenen Unternehmens besser zu erkennen und zu bewerten.
Ziel der der Executive Tech Academy von Namics ist es,
Führungskräfte an einem Halbtag wichtiges technisches
Grundwissen zu vermitteln, das Sie bei künftigen
Entscheidungen in digitalen Initiativen unterstützt.
Der Kurs ist inspiriert von Prof. David J. Malans Kurs
Computer Science for Business Professionals und untersteht
der Creative Commons BY-SA 4.0 Lizenz.
Sie dürfen:
● Teilen — das Material in
jedwedem Format oder Medium
vervielfältigen und
weiterverbreiten
● Bearbeiten — das Material
remixen, verändern und darauf
aufbauen und zwar für beliebige
Zwecke, sogar kommerziell.
Unter folgenden Bedingungen:
● Namensnennung
● Weitergabe unter gleichen
Bedingungen

ETA Teil 3: Internet Technologie

Recommended

Recommended

More Related Content

Similar to ETA Teil 3: Internet Technologie

Similar to ETA Teil 3: Internet Technologie (20)

More from Jürg Stuker

More from Jürg Stuker (20)

ETA Teil 3: Internet Technologie

Editor's Notes