60
Internetzwerke

Inter netzwerke

  • Upload
    andren

  • View
    55

  • Download
    7

Embed Size (px)

DESCRIPTION

Inter netzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes). nach Inhalten. nach Geräten. http:// www.cisco.com /c/en/ us / solutions / collateral /service-provider/ ip - ngn - ip - next -generation-network/white_paper_c11-481360.pdf. Okt 2011. Internet = Netz der Netze. - PowerPoint PPT Presentation

Citation preview

Page 1: Inter netzwerke

Internetzwerke

Page 2: Inter netzwerke

Datenverkehr (in Exabytes = 10246 Bytes)

http://www.cisco.com/c/en/us/solutions/collateral/service-provider/ip-ngn-ip-next-generation-network/white_paper_c11-481360.pdf

nach

Inhalten

nach

Geräten

Page 3: Inter netzwerke

Okt 2011

Page 4: Inter netzwerke
Page 5: Inter netzwerke

Internet = Netz der Netze

Page 6: Inter netzwerke

Adressen im Internet: IPv4 vs. IPv6 Wer verwaltet IPs? Wie viele

unterschiedliche IPs gibt es?

Wann werden sie uns ausgehen?

Was tun wir dann?

http://www.icann.org/http://www.icann.org/en/factsheets/factsheet-ipv6-03feb11-en.pdf

Page 7: Inter netzwerke

Netz der Netze - Teilnetze LAN:Local area network WLAN:Wireless LAN MAN:Metropolitan area network WAN:Wide area network GAN:Global area network

Page 8: Inter netzwerke

Netz der Netze – Backbone (GAN/WAN)

Page 9: Inter netzwerke

Durchschnitt von ca. 1795 Gigabit pro Sekunde (~38 DVDs), das entspricht einer Datenmengen von rund 3.3 Mio DVDs, die pro Tag am Frankfurter Knoten durchfliessen.

Traffic am DE-CIX in Frankfurt (http://www.de-cix.net/about/statistics/)

Page 10: Inter netzwerke

Fachbegriffe Internet Client Server Router Subnetz Host Provider URL IP DNS Protokoll WWW OSI

Page 11: Inter netzwerke

Rollenverteilung Clients (z.B. Browser)

... stellen Anfragen Server

... stellen Dienste oder Dokumente zur Verfügung (sind immer online)

Router... weisen den Informationspaketen ihren Weg (haben mindestens zwei Netzwerkkarten)

Page 12: Inter netzwerke

Dienstleistungen im Internet

Provider, stellt Zugang

zum Internet (Leitung

und Adresse/Ro

uter)

(Web) Host,stellt Speicherplatz auf WWW-Server

<html> <head> ... </head> <body> ... </body></html>

HTML-Dokument

wird per FTP auf

den Server

übertragen

(Web) Host,stellt evtl. weitere

Dienste zur Verfügung, z.B. email, PhP,

Datenbanken, etc.

Page 13: Inter netzwerke

Router Router

... leiten die Informations-pakete von einem Subnetz ins nächste weiter

http://www.dnstools.ch/visual-traceroute.html

Page 14: Inter netzwerke

World Wide Web (WWW) auch W3 oder schlicht Web genannt Das WWW ist nur einer von vielen Diensten im

Internet!

Das World Wide Web ist eine riesige Sammlung von Dokumenten. Diese sind auf Computern auf der ganzen Welt gespeichert und können Querverweise auf andere Dokumente enthalten (Links oder Hyperlinks).

Für die eindeutige Adressierung eines Dokuments im WWW benötigt man eine URL

Zum Darstellen des Dokuments braucht man einen Browser

Page 15: Inter netzwerke

Browser

auch WWW-Browser oder Web-Browser genannt

Ein Browser ist ein Computerprogramm, mit dem man sich im World Wide Web (WWW) bewegen und WWW-Seiten darstellen kann - Ähnlich wie man zum Betrachten von Textdateien ein Textverarbeitungs-programm benötigt.

Internet Explorer

Mozilla Firefox Safari (Apple) Opera Google Chrome

Page 16: Inter netzwerke

Ein System, mit dem man den Pfad zu jedem Dokument im WWW angeben kann:

Der erste Teil bezeichnet einen bestimmten Computer (äquivalent zur IP), alles nach dem ersten Backslash ist ein normaler Pfad auf diesem Computer

IP: 80.190.158.9 = www.leo.org

Protokoll Server Domain TLD Ordner Dateiname

(Top Level Domain)

http://www.beispiel.ch/dokumente/reglemente.html

URL (Uniform Resource Locator)

Page 18: Inter netzwerke

Protokolle

Kommunikation zwischen Computern ist festgelegt durch Protokolle

Beispiel DNS: A: Hallo Bob B: Hallo Alice A: Wie ist die IP von

www.leo.org? B: 80.190.158.9 A: Danke, tschüss B: Tschüss

Protokolle der TCP/IP Familie: HTTP / HTTPS

Webseiten abrufenVerschlüsseltes

HTTP FTP Dateien übertragen POP3 Mailbox abrufen SMTPMail versenden IMAP Mails verwalten VoIP

Voice over IP

http://www.beispiel.ch/dokumente/reglemente.html

Page 19: Inter netzwerke

Der Reihe nach:

Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann ?

IPvS Bei-Spiel

Page 20: Inter netzwerke

IPvS(imple)

Wir spielen Internet

Page 21: Inter netzwerke

IPvS(imple) RollenClient MAC:  IP: 1.2.3.4

DNS: 4.5.6.4

Gateway:

1.2.3.9

DNS-ServerMAC:  IP: 4.5.6.4

DNS: 4.4.4.4

Gateway:

4.5.6.9

WWW-Server MAC:  IP: 7.8.9.4

DNS: 4.4.4.4

Gateway:

7.8.9.9

Ziel Maske Gateway Schnittstelle1.2.3.1 9.9.9.0 1.2.3.9 1.2.3.93.3.3.1 9.9.9.0 3.3.3.1 3.3.3.14.5.6.1 9.9.9.0 3.3.3.2 3.3.3.18.8.8.1 9.9.9.0 3.3.3.3 3.3.3.11.1.1.1 0.0.0.0 3.3.3.3 3.3.3.1

Ziel Maske Gateway Schnittstelle4.5.6.1 9.9.9.0 4.5.6.9 4.5.6.93.3.3.1 9.9.9.0 3.3.3.2 3.3.3.21.2.3.1 9.9.9.0 3.3.3.1 3.3.3.28.8.8.1 9.9.9.0 3.3.3.3 3.3.3.21.1.1.1 0.0.0.0 3.3.3.3 3.3.3.2

Ziel Maske Gateway Schnittstelle3.3.3.1 9.9.9.0 3.3.3.3 3.3.3.38.8.8.1 9.9.9.0 8.8.8.1 8.8.8.11.2.3.1 9.9.9.0 1.2.3.9 3.3.3.34.5.6.1 9.9.9.0 4.5.6.9 3.3.3.37.8.9.1 9.9.9.0 7.8.9.9 8.8.8.11.1.1.1 0.0.0.0 8.8.8.9 8.8.8.1

Router A MAC:  IP: 1.2.3.9

3.3.3.1

Router B MAC:  IP: 4.5.6.9

3.3.3.2

Router C MAC:  IP: 3.3.3.3

8.8.8.1

Ziel Maske Gateway Schnittstelle8.8.8.1 9.9.9.0 8.8.8.2 8.8.8.27.8.9.1 9.9.9.0 7.8.9.9 7.8.9.93.3.3.1 9.9.9.0 8.8.8.1 8.8.8.21.1.1.1 0.0.0.0 8.8.8.1 8.8.8.2

Router D MAC:  IP: 8.8.8.2

7.8.9.9

Page 22: Inter netzwerke

IPvS(imple) Daten

HTTP-Request des Clients:GET /index.html HTTP/1.1 Host: www.beispiel.chDNS-Request des Clients:URL IPwww.beispiel.ch ?

index.html auf WWW-Server:<!DOCTYPE ... ><html> <head> <title>Beispiel Webseite</title> <link rel="stylesheet" type="text/css" href="css/beispiel.css"> ... </head> <body> <h1>Hallo</h1> <img src="bilder/bild.jpg" alt="Bild“ /> ... </body></html>

URL IPwww.beispiel.ch 7.8.9.4www.leo.org 9.8.7.6... ...

Lookup-liste auf DNS-Server:

Page 23: Inter netzwerke

ARP-Request

Page 24: Inter netzwerke

TCP-Header

Page 25: Inter netzwerke

IP Header

Page 26: Inter netzwerke

Ethernet Frame

Page 27: Inter netzwerke

Three-Way Handshake

Page 28: Inter netzwerke

IPvS(imple) Topologie

Client:1.2.3.4

1.2.3.93.3.3.1

3.3.3.24.5.6.9

3.3.3.38.8.8.1

8.8.8.27.8.9.9

DNS-Server:4.5.6.4

WWW-Server:7.8.9.4

Page 29: Inter netzwerke

Ausprobieren: 1. http://www3.rad.com/networks/2005/clieserv/ClieServ.swf 2. WIKI: TCP_IP_Applet.zip entpacken startApplet.html öffnen

Übersicht

Page 30: Inter netzwerke

Der Reihe nach:

Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann ...

... stellt der Browser einen http-Request und gibt ihn an das Betriebssystem weiter, dann ...

Page 31: Inter netzwerke

DNS (Domain Name Service) – auch ein Dienst des Internet

Client (z.B. Browser, via Betriebssystem)... stellt DNS-Anfrage

Page 32: Inter netzwerke

Router Router

... leiten die Informations-pakete von einem Subnetz ins nächste weiter

http://www.dnstools.ch/visual-traceroute.html

Page 33: Inter netzwerke

DNS (Domain Name Service) – auch ein Dienst des Internet

Client (z.B. Browser, via Betriebssystem)... empfängt Antwort

DNS Server... löst URL in eine IP-Nummer auf (muss dafür evtl. andere DNS-Server konsultieren)

Page 34: Inter netzwerke

Http-Request

Client (z.B. Browser via Betriebssystem)... schickt HTTP-Anfrage los (nach IP)

Page 35: Inter netzwerke

Router Router

... leiten die Informations-pakete von einem Subnetz ins nächste weiter

http://www.dnstools.ch/visual-traceroute.html

Page 36: Inter netzwerke

Client und Server kommunizieren über das vereinbarte Protokoll (HTTP), ...

Client (Betriebssystem)... sammelt TCP-Packete (Browser) stellt HTML- Seite dar

WWW Server... empfängt die Anfrage, verifiziert den Client, schickt HTML-Reply an Client

Page 37: Inter netzwerke

http://www3.rad.com/networks/2005/clieserv/ClieServ.swf

Page 38: Inter netzwerke

Eine Webseite ist also ein HTML-Dokument Wir haben jetzt gesehen, wie diese HTML-

Datei vom Server (=Host) zum Client (=mein Computer) kommt

Erst jetzt fängt die eigentliche Arbeit des Browsers an: er muss die HTML-Datei lesen und auf dem

Bildschirm darstellen das ist gar nicht so einfach, denn die HTML-Datei

enthält meist nur das Grundgerüst der Seite (und den Text)

bevor die Seite angezeigt wird, müssen meist noch weitere Dateien (z.B. Bilder) vom Server geholt werden

und weil der Browser manche Inhalte nicht selbst versteht, muss er ggf. andere Programme (plug-ins) um Hilfe bitten

Page 39: Inter netzwerke

HTML, die Sprache des Internet“Die Hypertext Markup Language [..] ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten.”

Wikipedia, Hypertext Markup Language, (23.8.2010), http://de.wikipedia.org/wiki/Hypertext_Markup_Language

Die “Auszeichnung” (Markup) geschieht durch Tags, welche die ausgezeichneten Elemente einschliessenz.B.:

<i>Hallo</i> Hallo

Page 40: Inter netzwerke

Grundgerüst

<!DOCTYPE ... ><html> <head> ... </head> <body> ... </body></html>

Reines Textdokument: z.B. mit dem Windows Notepad erstellt

Dateiendung nicht .txt sondern .html

Lässt sich mit Browser öffnen. Dieser interpretiert die HTML-Elemente und stellt die Seite dar.

Page 41: Inter netzwerke

HTML-Elemente Werden gekennzeichnet durch Tag:

<tagname> Die meisten HTML-Elemente benötigen

schliessende Tags: </tagname> Verschachtelung möglich:

<tag1>...<tag2>...</tag2>...</tag1> <tag1>...<tag2>...</tag1>...</tag2>

Aber gemäss definierten Regeln

Page 42: Inter netzwerke

Übliche Tags im Body-Element

Paragraph:<p>...</p>

Zeilenumbruch:<br />

Bereich:<span>...</span>

Überschriften:<h1>...</h1><h2>...</h2>

Tabellen:<table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr></table>

Page 43: Inter netzwerke

Tags im Body mit Attributen

Bild:<img src="bild.jpg" alt="Bild“ />

Link:<a href="http://www.sbb.ch">...</a>

<a href=“kontakt.html">...</a>

...

absoluter Pfad, startet bei www

relativer Pfad, startet „hier“ (wo die Datei liegt, in der dieser Code

steht)

„bild.jpg“ = relativer Pfad

Page 44: Inter netzwerke

HTML-Elemente

<!DOCTYPE ... ><html> <head> <title> Tolle Seite </title> ... </head> <body> ... </body></html>

Der Browser schreibt “Tolle Seite” in die Titelleiste des Fensters, in dem die Seite angezeigt wird

Page 45: Inter netzwerke

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <h1>Hallo</h1> Ich grüsse <b>dich</b>

... </body></html>

Der Browser schreibt “Hallo” in das Fensters und formatiert dieses Wort als grosse Überschrift.

Der Browser schreibt “Ich grüsse dich” unter die Überschrift, in normaler Schriftart und –grösse, “dich” in fetter Schrift

Page 46: Inter netzwerke

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <img src="bild.jpg" alt="Bild“ /> ... </body></html>

Der Browser fragt beim Server nach der Datei “bild.jpg”, die sich im selben Ordner wie die HTML-Datei befinden soll

Falls das Bild gefunden wird, stellt der Browser es auf der Seite dar – andernfalls schreibt er, dass “Bild” nicht gefunden wurde

Page 47: Inter netzwerke

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <embed src="meinFlashFilm.swf” type="application/x-shockwave-flash"> </embed> ... </body></html>

Da Der Browser mit .swf-Dateien nichts anfangen kann, sucht er nach einem Flash-plugin, und überlässt diesem die Darstellung des Videos

Der Browser fragt beim Server nach der Datei “meinFlashFilm.swf”, die sich im selben Ordner wie die HTML-Datei befinden soll

Page 48: Inter netzwerke

Aufgabe Bild und Link Erstelle eine kleine HTML-Webseite:

Überschrift Text 2-3 Bilder Eine kleine Tabelle Einige passende Links

Lokal abspeichern und im Browser betrachten

Links: http://www.w3schools.com/tags/default.asp http://de.selfhtml.org/html/index.htm

<html> <head> ... </head> <body> ... </body></html>

Page 49: Inter netzwerke

HTML & CSS

HTML = Struktur & Inhalt

CSS = Darstellung, Layout

z.B. Text Bilder Links Überschriften CSS-Hooks

z.B. Farben Ränder Abstände Positionierung (Bilder)

Page 50: Inter netzwerke

HTML-CSS

<!DOCTYPE ... ><html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body></html>

Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:

Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1-Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt

h1 { color: orange; font-weight: bold;}

Page 51: Inter netzwerke

HTML-CSS<!DOCTYPE ... ><html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" />

</head> <body> <div id="nav">

<ul> <li><a

href="home.html">Home</a></li> <li><a

href="about.html">About</a></li> <li><a

href="contact.html">Contact</a></li> </ul>

</div> </body></html>

Noch immer wird “meinCSS.css” benutzt:

Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll

...#nav { width: 60%; float: right;}...

Page 52: Inter netzwerke

HTML & CSS Prinzip:

Inhalt & Darstellung voneinander trennen Vorteile:

man muss das Aussehen von Elementen (z.B. h1-Überschriften) nur 1 Mal angeben

man kann übliche Layouts (z.B. Navigationsleiste) besser umsetzen als direkt in HTML – hier geht es nur mit Tabellen

man kann dieselben Styles (=CSS-Datei) für alle Unterseiten verwenden

man kann das gesamte Layout einfach verändern

Page 53: Inter netzwerke

Wenn HTML nicht ausreicht...

Client side (plugins) JavaScript Flash ....

Server side PhP (Datenbanken) Perl ...

Page 54: Inter netzwerke
Page 55: Inter netzwerke

Zeita

chse

kann mySQL Anfragen beantworten und Daten dauerhaft speichern, kümmert sich um die Verwaltung der Daten

WWW genauer

WWW-Server

Browser

Datenbank Server

ServerClient

weiss, wie man WWW-Server findet, versteht HTML (+ Formulare) & CSS, kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET)

Browser

Browser

WWW-Server

WWW-Server

ServerClient

weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt Code an Browser weiter

statische Webseitendynamische Webseiten

Dateien, PHP mySQL

Page 56: Inter netzwerke

1. Http-Request an URL

2. Dateien schicken

3. ggf. Bilder nachladen

Statische Webseiten

Server:Stellt Dateien bereit (HTML, CSS, JavaScript, Bilder,...)

Client/Browser:Erfragt Dateien und stellt sie dar, ggf. neue Anfrage bei Klick auf Hyperlink

Page 57: Inter netzwerke

Dynamik mit JavaScriptWenn Ereignis eintritt (z.B. Benutzer fährt mit Maus über ein Bild)...

... dann rechnet der Browser mithilfe der bereits heruntergeladenen JavaScript-Dateien aus, wie sich die dargestellte Webseite verändert

Client/Browser:interpretiert JavaScript Programme

Page 58: Inter netzwerke

4. neuer Request an URL

(ggf. mit Übergabewerten)

5. schickt neu berechnete Seite

zurück

Dynamik mit PHP

Server:Führt PHP-Scripts aus, schickt Ergebnisse zurück

Client/Browser:Stellt neue Anfragen und übergibt vom Benutzer eingegebene Werte

Page 59: Inter netzwerke

Persistenz mit PHP

Datenbank-Server:Beantwortet Anfragen des PHP-Scripts (erstellen, ändern und löschen von Datensätzen) und speichert die Daten dauerhaft

4. neuer Request an URL

(ggf. mit Übergabewerten)

6. schickt neu berechnete Seite

zurück

5a) erfragt Daten

5b) gibt Daten

zurück

Page 60: Inter netzwerke

Zeita

chse

kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten

WWW-Server

Browser

Datenbank Server

ServerClient

weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET)

Browser

Browser

WWW-Server

WWW-Server

ServerClient

weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter

statische Webseitendynamische Webseiten

HTML-Dateien, PHP,

(CSS, JavaScript)mySQL

JavaScript

Auf einen Blick: