Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes)

Ähnliche Präsentationen


Präsentation zum Thema: "Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes)"—  Präsentation transkript:

1 Internetzwerke

2 Datenverkehr (in Exabytes = Bytes) nach Inhalten nach Geräten

3 Okt 2011

4

5 Internet = Netz der Netze

6 Adressen im Internet: IPv4 vs. IPv6  Wer verwaltet IPs?  Wie viele unterschiedliche IPs gibt es?  Wann werden sie uns ausgehen?  Was tun wir dann?

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

8 Netz der Netze – Backbone (GAN/WAN)

9 Durchschnitt von ca 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/)

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

11 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)

12 Dienstleistungen im Internet Provider, stellt Zugang zum Internet (Leitung und Adresse/Rout er) (Web) Host, stellt Speicherplatz auf WWW-Server (Web) Host, stellt Speicherplatz auf WWW-Server HTML-Dokument wird per FTP auf den Server übertragen (Web) Host, stellt evtl. weitere Dienste zur Verfügung, z.B. , PhP, Datenbanken, etc. (Web) Host, stellt evtl. weitere Dienste zur Verfügung, z.B. , PhP, Datenbanken, etc.

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

14 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

15 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

16  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: = Protokoll Server Domain TLD Ordner Dateiname (Top Level Domain) URL (Uniform Resource Locator)

17 Der restliche Pfad

18 Protokolle  Kommunikation zwischen Computern ist festgelegt durch Protokolle  Beispiel DNS:  A: Hallo Bob  B: Hallo Alice  A: Wie ist die IP von  B:  A: Danke, tschüss  B: Tschüss  Protokolle der TCP/IP Familie:  HTTP / HTTPS Webseiten abrufen Verschlüsseltes HTTP  FTP Dateien übertragen  POP3 Mailbox abrufen  SMTP Mail versenden  IMAP Mails verwalten  VoIP Voice over IP

19 Der Reihe nach:  Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann ? IPvS Bei-Spiel

20 IPvS (imple) Wir spielen Internet

21 IPvS (imple) Rollen Client MAC: IP: Maske: DNS: Gateway: DNS-Server MAC: IP: Maske: DNS: Gateway: WWW-Server MAC: IP: Maske: DNS: Gateway: ZielMaskeGatewaySchnittstelle ZielMaskeGatewaySchnittstelle ZielMaskeGatewaySchnittstelle Router A MACs: IPs: Router B MACs: IPs: Router C MACs: IPs: ZielMaskeGatewaySchnittstelle Router D MACs: IPs:

22 IPvS (imple) Daten HTTP-Request des Clients: GET /index.html HTTP/1.1 Host: DNS-Request des Clients: URLIP index.html auf WWW-Server: Beispiel Webseite... Hallo... URLIP Lookup-liste auf DNS-Server:

23 Datenpakete losschicken 1. Paket in IP-Header einpacken 2. Eigene IP als Source Address eintragen 3. Empfänger IP als Destination Address eintragen 4. Überprüfen, ob die beiden Adressen an den in der Maske auf 9 gesetzten Stellen übereinstimmen 1. Ja: Paket an Destination Address abliefern 2. Nein: Paket an Gateway abliefern Client MAC: IP: Maske: DNS: Gateway: Beispiel: Destination Address

24 Ein Datenpaket abliefern (ARP-Request) Datenpakete können nur an eine MAC im eigenen Subnetz ausgeliefert werden! 1. Gegeben: aktuelle Ziel-IP Hinweis: das ist nicht (nur manchmal) die Destination Address im IP Header! 2. Subnetz bestimmen, indem man alle Stellen aus der Ziel-IP löscht, die in der Maske auf 0 (Null) gesetzt sind 3. „An alle, deren IP mit... beginnt: Wer hat die IP v.x.y.z?“ 4. Der Besitzer der IP meldet sich und sagt seine MAC-Adresse 5. Paket in Ethernet Frame einpacken 6. MAC-Adresse in Ethernet Frame eintragen und abliefern An alle, deren IP mit beginnt: Wer hat die IP ? ARP = address resolution protocol Das Ergebnis wird für eine kurze Zeit zwischengespeichert – ggf. kein ARP- Request nötig für das nächste Paket.

25 Routing  Datenpaket öffnen, bis Destination-Address zu sehen ist  Die zur Ziel-IP passende Regel in Routingtabelle finden  Von oben nach unten vorgehen  jeweils vergleichen, ob die in der Spalte „Maske“ mit 9 angegebenen Stellen in der Destination-IP und der Spalte „Ziel“ übereinstimmen  Wenn die richtige Regel gefunden ist, Datenpaket über Schnittstelle (= eigene IP) an Gateway abliefern Beispiel: Destination-IP ist ZielMaskeGatewaySchnittstelle

26 TCP-Header

27 IP Header

28 Ethernet Frame

29 Three-Way Handshake

30 IPvS (imple) Topologie Client: DNS-Server: WWW-Server:

31 Ausprobieren: 1.http://www3.rad.com/networks/2005/clieserv/ClieServ.swfhttp://www3.rad.com/networks/2005/clieserv/ClieServ.swf 2.WIKI: TCP_IP_Applet.zip  entpacken  startApplet.html öffnenTCP_IP_Applet.zip Übersicht

32 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...

33 DNS (Domain Name Service) – auch ein Dienst des Internet  Client (z.B. Browser, via Betriebssystem)... stellt DNS-Anfrage

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

35 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)

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

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

38 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

39

40 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

41 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, ( ),  Die “Auszeichnung” (Markup) geschieht durch Tags, welche die ausgezeichneten Elemente einschliessen z.B.: Hallo  Hallo

42 Grundgerüst 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.

43 HTML-Elemente  Werden gekennzeichnet durch Tag:  Die meisten HTML-Elemente benötigen schliessende Tags:  Verschachtelung möglich:   Aber gemäss definierten Regeln

44 Übliche Tags im Body-Element  Paragraph:...  Zeilenumbruch:  Bereich:...  Überschriften:  Tabellen:

45 Tags im Body mit Attributen  Bild:  Link: absoluter Pfad, startet bei www relativer Pfad, startet „hier“ (wo die Datei liegt, in der dieser Code steht) „bild.jpg“ = relativer Pfad

46 HTML-Elemente Tolle Seite Tolle Seite  Der Browser schreibt “Tolle Seite” in die Titelleiste des Fensters, in dem die Seite angezeigt wird

47 HTML-Elemente... Hallo Ich grüsse dich Hallo Ich grüsse dich...  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

48 HTML-Elemente  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

49 HTML-Elemente  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

50 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:  

51 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)

52 HTML-CSS Hallo... Hallo...  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; } h1 { color: orange; font-weight: bold; }

53 HTML-CSS Home About Contact Home About Contact  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; }... #nav { width: 60%; float: right; }...

54 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

55 Wenn HTML nicht ausreicht...  Client side (plugins)  JavaScript  Flash ....  Server side  PhP (Datenbanken)  Perl ...

56

57 Zeitachse kann mySQL Anfragen beantworten und Daten dauerhaft speichern, kümmert sich um die Verwaltung der Daten WWW genauer WWW-Server Browser Datenbank Server Server Client weiss, wie man WWW-Server findet, versteht HTML (+ Formulare) & CSS, kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) Browser WWW-Server Server Client weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt Code an Browser weiter statische Webseiten dynamische Webseiten Dateien, PHP mySQL

58 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

59 Dynamik mit JavaScript Wenn 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

60 4.neuer Request an URL (ggf. mit Übergabewerten) 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

61 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) 4.neuer Request an URL (ggf. mit Übergabewerten) 6.schickt neu berechnete Seite zurück 5a) erfragt Daten 5b) gibt Daten zurück

62 Zeitachse kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten WWW-Server Browser Datenbank Server Server Client weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) Browser WWW-Server Server Client weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter statische Webseiten dynamische Webseiten HTML-Dateien, PHP, (CSS, JavaScript) mySQL JavaScript Auf einen Blick:


Herunterladen ppt "Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes)"

Ähnliche Präsentationen


Google-Anzeigen