Internetzwerke.

Internetzwerke

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

Okt 2011

Internet = Netz der Netze

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

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

Netz der Netze – Backbone (GAN/WAN)

Traffic am DE-CIX in Frankfurt (http://www. de-cix
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.

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

Rollenverteilung Server Router 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)

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

Router http://www.dnstools.ch/visual-traceroute.html Router
... leiten die Informations- pakete von einem Subnetz ins nächste weiter

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

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

URL (Uniform Resource Locator)
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)

Der restliche Pfad

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

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

IPvS(imple) Wir spielen Internet

IPvS(imple) Rollen Router A MAC: IP: 1.2.3.9 3.3.3.1 Ziel Maske
IP: Ziel Maske Gateway Schnittstelle Client MAC: IP: DNS: Gateway: Router B MAC: IP: Ziel Maske Gateway Schnittstelle DNS-Server MAC: IP: DNS: Gateway: Router C MAC: IP: Ziel Maske Gateway Schnittstelle WWW-Server MAC: IP: DNS: Gateway: Router D MAC: IP: Ziel Maske Gateway Schnittstelle

IPvS(imple) Daten HTTP-Request des Clients: GET /index.html
HTTP/1.1 Host: 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> DNS-Request des Clients: URL IP ? Lookup-liste auf DNS-Server: URL IP ...

ARP-Request

TCP-Header

IP Header

Ethernet Frame

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

Übersicht Ausprobieren:
WIKI: TCP_IP_Applet.zip  entpacken  startApplet.html öffnen Übersicht

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

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

DNS (Domain Name Service) – auch ein Dienst des Internet
DNS Server ... löst URL in eine IP- Nummer auf (muss dafür evtl. andere DNS- Server konsultieren) Client (z.B. Browser, via Betriebssystem) ... empfängt Antwort

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

Client und Server kommunizieren über das vereinbarte Protokoll (HTTP), ...
WWW Server ... empfängt die Anfrage, verifiziert den Client, schickt HTML-Reply an Client Client (Betriebssystem) ... sammelt TCP-Packete  (Browser) stellt HTML- Seite dar

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

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.: <i>Hallo</i>  Hallo

Grundgerüst <!DOCTYPE ... > <html> <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.

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

Ü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>

Tags im Body mit Attributen
Bild: <img src="bild.jpg" alt="Bild“ /> Link: <a href=" <a href=“kontakt.html">...</a> ... „bild.jpg“ = relativer Pfad absoluter Pfad, startet bei www relativer Pfad, startet „hier“ (wo die Datei liegt, in der dieser Code steht)

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

HTML-Elemente <!DOCTYPE ... > <html> <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

<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

<body> <embed src="meinFlashFilm.swf” type="application/x-shockwave-flash"> </embed> </body> </html>  Der Browser fragt beim Server nach der Datei “meinFlashFilm.swf”, die sich im selben Ordner wie die HTML-Datei befinden soll  Da Der Browser mit .swf-Dateien nichts anfangen kann, sucht er nach einem Flash-plugin, und überlässt diesem die Darstellung des Videos

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: <html> <head> ... </head> <body> </body> </html>

HTML & CSS z.B. z.B. HTML = Struktur & Inhalt
CSS = Darstellung, Layout z.B. Text Bilder Links Überschriften CSS-Hooks z.B. Farben Ränder Abstände Positionierung (Bilder)

HTML-CSS <!DOCTYPE ... > <html> <head>
 Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese: <!DOCTYPE ... > <html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body> </html> h1 { color: orange; font-weight: bold; }  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

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: ... #nav { width: 60%; float: right; }  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

HTML & CSS Prinzip: Vorteile:
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

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

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

Statische Webseiten Server: Client/Browser: 1. Http-Request an URL
2. Dateien schicken 3. ggf. Bilder nachladen Client/Browser: Erfragt Dateien und stellt sie dar, ggf. neue Anfrage bei Klick auf Hyperlink Server: Stellt Dateien bereit (HTML, CSS, JavaScript, Bilder,...)

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

Dynamik mit PHP Client/Browser: Server:
neuer Request an URL (ggf. mit Übergabewerten) schickt neu berechnete Seite zurück Client/Browser: Stellt neue Anfragen und übergibt vom Benutzer eingegebene Werte Server: Führt PHP-Scripts aus, schickt Ergebnisse zurück

Persistenz mit PHP Datenbank-Server:
neuer Request an URL (ggf. mit Übergabewerten) schickt neu berechnete Seite zurück 5a) erfragt Daten 5b) gibt Daten zurück Datenbank-Server: Beantwortet Anfragen des PHP-Scripts (erstellen, ändern und löschen von Datensätzen) und speichert die Daten dauerhaft

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

Internetzwerke.

Ähnliche Präsentationen

Präsentation zum Thema: "Internetzwerke."— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback

Anmelden

Anmeldung über soziales Netzwerk:

Internetzwerke.

Ähnliche Präsentationen

Präsentation zum Thema: "Internetzwerke."— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback