Zusammenfassung Web-Technologien PDF

Preview

Summary

Zusammenfassung WT Gesamter Kurs...

Description

Lernskript zur Veranstaltung Web-Technologien

1. Kapitel: Einführung 1.1 Begriff und Definition Definition (Web-Technologien): …Technologien, die ineinandergreifen um, Webanwendungen zu realisieren Dabei sind die Ziele einer Webanwendung:

- eine Webpage so zu generieren, dass eine benutzerfreundliche Nutzung möglich wird

- die Programmiersprache so versteckt ist, dass den Anwender eine möglichst einfache Benutzung gegeben ist Bsp.: eBay, Amazon, … 1.2 Erfolgsfaktoren

- erfolgreiche Seiten sind meist dynamische Seiten (Anwendungscharakter) - zur erfolgreichen Entwicklung benötigt man allerdings: - Kenntnis über die Komponenten des Webs - Kenntnisse über das Zusammenspiel der Anwendungen - grundlegende Programmierkenntnisse - heutige Kundenanforderungen (Zeitalter der Digital Natives) —> hohe - Anforderungen an das Design, Funktionen und Komfort 1.3 Bedeutung für die IT und Innovationstätigkeit Innovationstätigkeit als General Purpose Technology:

- Förderung der Innovation durch viele Industriezweige - Analogie: Dampfmaschine Elektrifizierung

1

Fortschritte durch IT:

-

Informations und Wissensaustausch (schnell und simplifiziert) neue Geschäftsprozesse neue Organisationsformen neue Produkte

Bsp.: Industrie 4.0 2. Grundlagen des Internets 2.1 Historische Entwicklung und Hintergrund Computernetzwerke und das Internet:

- 1950er-Jahre: Beginn der militärischen Nutzung • Vernetzung der Radarüberwachung SAGE (… wurde entwickelt um Flugzeuge per Radar sichtbar zu machen, wurde allerdings zügig abgelöst, da Stealth-Raketen entwickelt wurden)

- 1960er-Jahre: Beginn der Nutzung in Forschung und Industrie • Flugreservierungssystem SABRE (von American Airlines entwickelt Buchungssystem) • Licklider’s Konzept eines IntergalacticComputer Networks

- 1969: Paketbasierte Datenübermittlung • 1969 ARPANET • Ressourcensparend, da eine Leitung für mehrere Verbindungen genutzt werden kann

- 1973: Entwicklung des Ethernets bei Xerox • PARC: Kommerzielle Nutzung und Verbreitung erst in den 80er Jahren • Standardisierung und Weiterentwicklung der lokalen Netzwerktechnik • Verdrängung der proprietären Standards Token Ring und Token Bus 2

Das World-Wide-Web

- vorhandene Teile mussten „nur“ zusammengesetzt werden - Das Internet und TCP/IP - Hypertext - 1990 wurde durch den CERN-Forscher Tim Berners-Lee entwickeln - HyperTextTransfer Protocol (HTTP) - HyperTextMarkup Language (HTML) - Web-Server - Web-Browser - Anfang der 1990er Wachstum des Webs - Ende der Neunziger: Schritt von Early Adopters zum Massenmarkt - Aktuelle Entwicklung: Vertäglichung und Durchdringung aller Lebensbereiche

2.2 Kerntechnologie des Internets Internet: Netzt aus miteinander verbundenen Rechnern Web: Netz von miteinander verknüpften Dokumenten Eigenschaften des Netz:

- Dezentralisierung: keine zentrale Steuerung notwendig - Robustheit: Kontakt über unterschiedliche Wege, sodass Ausfall eines Knotens nicht kritisch ist

- Redundanz:nur einmal benötigte Funktionen teilweise doppelt vorhanden (erhöht aber die Robustheit!!)

- Unabhängigkeit: Aufgrund fehlender Kontrollinstanz Zensur ist die Entwicklung von Fehlentwicklungen sehr schwierig —> Anfälligkeit für Viren, etc.

3

Internet-Protokoll Schichten:

Schicht

Aufgabe

Application Layer (DNS, FTP, HTTP, etc.)

GET/index.html HTTP/1.1

Transport Layer (TCP, UDP, etc.)

Verbindung zwischen 2 Rechnern möglich

Internet Layer (IP, etc.)

Übermittlung der Daten mit Hilfe von Paketen

Link Layer (ARP, NDP, etc.)

Einzelverbindungen, damit die Pakete wieder zusammengesetzt werden können

Physical Layer (Hardware)

Übertragung der Daten mit Radiowellen oder Glasfaserkabeln

Begriffe: 1. MAC-Adresse: Bedeutung:

- Media Access Control Adress: Adressierung von Netzwerkgeräten - notwendig zu Kommunikation auf der Link-Layer Schicht Funktionsweise:

-

eindeutige Indent-nummer in der Regel mit Netzwerkhardware vernetzt 48 Bit und in hexadezimaler Schreibweise Anzeige im ipconfig/all

Geräte ohne MAC:

- Kabel, Hubs, Bridges, Repeater, Switches(optional)

4

2. PPP: Bedeutung:

-

Point-to-Point Protocol Aufbau der Verbindung über Wählleitung Verwendung in Modems Link-Layer-Protokoll

Funktionsweise:

- Authentifizierung, Netzwerkkonfiguration - Netzwerkunabhängig PPPoE:

- stellt Funktionen über PPP fürs Internet bereit - Einsatz in DSL Modems 3. IP-Adresse: Bedeutung:

- Adresse auf Ebene der Internet Schicht (Adresse für einen Internetknoten) Funktionsweise:

- IPv4, 32 Bit, dezimale Schreibweise: z.B. 192.168.0.1(etwa 232=4,3 Milliarden eindeutige Adressen) - IPv6 128 Bit, hexadezimale Schreibweise, z.B. 2001:0db8:85a3:0000:0000:8a2e:0370:7334(2128eindeutige Adressen) - IPs eindeutig innerhalb eines NetzwerkesPrivate Netzwerke (IPv4): - 10.0.0.0 - 10.255.255.255 - 172.16.0.0 - 172.31.255.255 - 192.168.0.0 - 192.168.255.255 IP´s durch IANA vergeben:

- Regional Internet Registries(in Europa RIPE NCC) - Institutionen (Universitäten, Militär, Firmen -> historisch gewachsen) 5

4. IP-Datagrams/Pakete: Bedeutung:

- Datentransfer auf der Internetebene in Form von Paketen Funktionsweise:

- Aufbau: - Kopfdaten (IP-Version, Herkunft, Ziel, Time to live…) - Nutzdaten - keine Zustellgarantie: bei falscher IP werden die Pakete einfach weitergeschickt, damit aber nicht so viel Müll im Internet herumfliegt gibt es die „Time-to-live“ !! 5. Domain Name System Bedeutung:

- Adresse für Computer, Dienste oder andere Web-Ressourcen - leicht merkbar Funktionsweise:

- DNS Server zur Speicherung und Abfrage der Zuordnung - baumförmige Struktur, getrennt durch Punkte, mit dem übergeordneten Element am Ende der Adresse

- Domain Name wird auf eine bestimmte IP Adresse angewendet 6. TCP Bedeutung:

- Transmission Control Protocol - Browser benutzen TCP um Pakete hinterher wieder zusammenzufügen - Bereitstellung einer stabilen und zuverlässigen Verbindung zwischen Computern Funktionsweise:

- Verbindung zwischen 2 Punkten (Sockets) im Internet 6

- Überprüfung des Übertragungserfolgs - Anwendungs- und Transportfunktionen letztendlich nur an den Endknotenpunkten angewendet - nicht bei den Zwischenstationen - Bsp.: Internet kennt keine festen Verbindungen —> Zustellgarantie der IP-Pakete begrenzt —> TCP Protokoll setzt hier an und stellt sicher, dass die Pakete richtig und vollständig beim Endknotenpunkt den Empfängers ankommen! 7. HTTP Bedeutung:

- Hypertext Transfer Protocol - Protokoll für Auslieferung von Webinhalten Funktionsweise:

- Funktion nach dem Client-Server-Prinzip Versionsgeschichte:

-

1991: HTTP 0.9 (Tim Berners-Lee) 1996: HTTP 1.0 1999: HTTP 1.1 aktuell: HTTP 2 = Quick

Request-Methoden: HTTP 1.0:

- GET: Anforderung einer Ressource - POST: Senden von Daten - HEAD: Anforderung lediglich des Ressourcenkopfes HTTP 1.1:

-

PUT: Senden und speichern einer Ressource unter gegebener URI DELETE: Löschen einer Ressource TRACE: Spiegeln der Anfrage an den Server zurück zum Client OPTIONS: Auflistung der Serverfunktionen CONNECT: zum Aufbau von sicheren Verbindungen (SSL)

7

2.3 Das Client-Server Prinzip Eigenschaften: Funktionsweise:

- Server wartet auf Anfragen des Clients und bedient diese - Implementierung auf der Applikationsschicht des Schichtenmodell - Alternative zum zentralen System wäre das Pier-to-Pier System (Bsp.: Bitcoin-System) Beispiele:

-

e-Mail WWW Druckdienst Anwendungen

Vorteile:

-

Reduzierung der Arbeitslast und Speicherprobleme auf Clientseite Updates auf Server sichergestellt Einstellungen größtenteils eicht realisierbar Zugriffskontrolle leicht realisierbar 8

Nachteile:

- Funktion des Systems hängt von einem einzigen Rechner ab - Server muss an die Anforderungen angepasst sein (bei z.B. steigender Zahl der Clients!) 2.4 Web-Browser Bedeutung:

- bekannteste Client-Anwendung - Gatekeeper-Funktion Funktionsweise:

-

lädt Webseiten und stellt diese für Benutzer grafisch dar Adressauflösung, HTTP, etc. —> automatisch im Hintergrund Ausführung von clientseitigen Programmen Beeinflussung des Benutzers durch die Oberfläche in seinem Nutzungsverhalten!

Mit Programmiersprachen lassen sich im Internet dynamische Inhalte darstellen über die Webseiten, welche dann vom Client über den Browser vom Server abgefragt werden können. Es stellt sich unweigerlich die Frage, welche der beiden Seiten Client oder Server denn eigentlich besser ist?

9

Vorteile Server-Seite = Nachteile Client-Seite

- verfügbare Ressourcen • Speicherplatz • Rechenkapazität • Softwaretools • Medien - klare Kenntnis darüber wie das Skript ausgeführt wird • umfangreiche Kontrolle kaum abhängig vom Browser des Nutzers • Testbarkeit - unsichtbare Ausführung(Geheimhaltung) - Nutzer kann Script nicht deaktivieren!!! Vorteile Client-Seite = Nachteile Server-Seite

- niedriger Ressourcenverbrauch für Anwender - Funktionalität • unmittelbare Ausführung auf der Client-Seite • einmal geladene Funktion auch offline verfügbar (Buffering!) • Zugriff auf Einstellungen, Informationen, etc. der Client-Seite - Verbreitung und Verfügbarkeit • Nutzbar für Programmierer mit eingeschränkten Rechten • Beispielcode einsehbar • Überschaubarer Markt (im Wesentlichen Jscript!!)

2. Kapitel: Die Sprache des Webs HTML 2.1 Die Funktionsweise von HTML 1. Hypertext Markup Language (HTML) Bedeutung:

- Klebstoff und Lingua Franca des Internets - Softwareunabhängiges Klartextformat Bestandteile:

- Text + + einbettete Ressourcen (z.B. Farben, oder Bold) 10

Funktionsweise:

- textbasierte Auszeichnungssprache, d.h. Text + Text zur Kennzeichnung von Eigenschaften des Texts

2. Uniform Resource Locator (URL) Bedeutung:

- eindeutige Bezeichnung einer Ressource - „Web-Adresse“ Funktionsweise:

- identifiziert Ressource über ihren Speicherort - Aufbau: //User: Passwort @ Host: Port/Pfad? Suchpfad # Fragment , dabei ist Host sichtbar, nicht jedoch Passwort und Pfad 3. Tags Bedeutung:

- Aufbau von Daten in einer Textdatei Syntax:

- Tags beginnen mit einer sich öffnenden Klammer und mit einer schließenden —> - Anfangs und Schlusstag - Leere Tags !! oder Block-Level und Inline Tags:

- Block-Level Tags: Erzeugung einzelner Bereiche auf der Webpage (z.B. Tabellen)

- Inline-Tags: Eingebettet in den Text - i.d.R größere Zahl der Attribute bei Block-Level Tags

11

An dieser Stelle sei an die Ur-Struktur der HTML Seite erinnert! —> Welche HTML-Standards gibt es? HTML 4: seit 1999 aktueller Web-Standard XHTML=HTML 4: strengere Syntax als vorher (jeder Tag muss auch einen Endtag haben!) HTML5=HTML4: einige neue Funktionen und wenige ausgelaufene Funktionen 2.2 Werkzeuge Basiswerkzeug

- leistungsstarker Texteditor - aktueller Web-Browser 2.3 HTML-Elemente Formatierungen:

- Fett, kursiv, unterstrichen , , —> alternativ zu Bold Hervorhebung , - Groß, klein , - Hoch-, Tiefstellung , Überschriften und Absätze:

- Überschriften, ,…, - Absatz, Zeilenumbruch, Links und Web-Ressourcen: Anchor-Tag:

- Beispiel: TIM-Webseite 12

Image-Tag:

- Beispiel: - Attribute (Auswahl) • src: URL des Bilds (source) • alt: Erklärender Text (wichtig für die Zugänglichkeit, z.B. Sehbehinderte) • height,width: Höhe des Bildes in Pixeln Listen:

- Listenarten: - Unsortierte Liste: Ein ElementWeiteres Element

- Sortierte Liste:

Erstes ElementZweites Element

- Definitionsliste:

FDurch K ersetztKDurch F ersetzt

- Verschachtelungen möglich - Aufzählungszeichen type, z.B. , Startnummer mit start

13

Tabellen:

- Aufbau:

- einige Attribute: border, width, height, colspan, rowspan - Tabellen als traditionelles Mittel des Web-Layouts (heute: CSS) Meta-Daten: Bedeutung:

- beschreibende Informationen über das Dokument, ohne Anzeige im Browser Platzierung:

- im Kopfreich der HTML Datei - Kommentare im Text: - fügt Inhalt der Datei datei.txt anstelle des Kommentars ein. - Befehle: -

config Konfiguration der Übersetzung echo Ausgabe der Werte von Umgebungsvariablen include Einfügen von Dateien if Prüfen einer Bedingung exec Ausführen von CGI-Skripts

Nachteile von SSI und CGI

- Performance-Einbußen: jede Anfrage - Start neuer Prozess auf dem Server-System

- Sicherheitsrisiken: Ausführung Programme direkt auf dem Server-System Nachfolge Technologien von CGI/SSI

- Kompilierte Programme - Verwendung von z.B. C/C++ - Kompensation Performancenachteile durch höhere Geschwindigkeit nativer Programme

- Erweiterungsmodule - Keine Notwendigkeit zum Starten neuer, externer Prozesse bei interner Ausführung

- Beispiel mod_phpals Modul zur Ausführung von PHP-Skripten - FastCGI - Externe Prozesse bleiben bestehen, um spätere Anfragen bearbeiten zu können

- Applikation unabhängig vom Web-Server - Ähnlicher Ansatz etwas vereinfacht bei SCGI (Simple Common Gateway Interface)

- Servlets und JSP 43

- Java Virtual Machine läuft im Hintergrund und wartet auf ServerKommunikation - Kommunikation über Server-API und Java Native Interface (JNI)

6.Kapitel: Das P in LAMP Die 3 P der Programmiersprachen:

- Perl - es gibt mehr als nur einen Weg etwas zu tuen - Python - es sollte nur einen besten Weg geben um etwas zu tuen - PHP - Es, nämlich Web-Scripting, sollte sich möglichst schnell tuen lassen.

6.1 Vorteile von PHP für die Web-Entwicklung Im Vergleich zu Perl oder Python:

-

Verbreitung und Unterstützung durch Software und Web-Hoster Umfangreiche Hilfestellungen im Netz Spezielle Features fürs Web-Scripting Flexible Integration in HTML

Im Vergleich zu JSP und Hochsprachen:

-

Leicht zu erlernen und zu installieren Nutzung simpel durch Speichern und Aufrufen im Browser Wenig Boilerplate Freie Software und Bestandteil des LAMP-Stacks

44

6.2 PHP Dokumente aus Sicht von Server und Client Datei-Endung .php:

- Erkennung von PHP-Code durch Server - Weiterreichen an PHP-verarbeitende Software-Komponente - Geheimhaltung des dynamischen Charakters (als PHP ausgewiesen, obwohl HTML) Übermittlung der Ausgabe von PHP:

- Ohne PHP-Code - Jedoch mit ursprünglicher Datei-Endung (.php) HTML-Dateien:

- Reiner HTML-Code nach Verarbeitung durch PHP weiterhin HTML - Dank Gestaltung als HTML-Tag —> Ignoranz von PHP-Code durch HTML

Allgemeine Syntaxmerkmale von PHP

- Skriptsprache - Dynamische Typisierung und kein Deklarationszwang für Variablen - Unmittelbare Ausführung und Interpretation des Quelltextes - (Fast) kein Boilerplate-Code - Kennzeichnung von Blöcken mit {…} - Kommentare einzeilig mit // … oder # … , mehrzeilig mit /* … */ - Beenden von Kommandos mit Semikolon … ;

45

Verknüpfung von HTML und PHP PHP-Code in HTML-Tag:

- Syntax:

- Öffnen des Tags: - Eigentlicher Code: - Schließen des Tags:...