Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 1
Multimediale Web-Anwendungen
Wahlobligatorische Vorlesung im Master-Studiengang Medientechnologie
Dr. Eckhardt Schö[email protected]
Institut für MedientechnikFachgebiet Audiovisuelle Technik
______________________________________
Web-Seite zur Vorlesung
http://www.tu-ilmenau.de/mt/lehrveranstaltungen/
lehre-fuer-master-mt/multimediale-web-applikationen/
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 2
Lernziele
Die Teilnehmer an der Lehrveranstaltung entwickeln ein Verständnis dafür, wie Web-Applikationen funktionieren und wofür sie eingesetzt werden können. Sie machen sich mit einzelnen Technologien vertraut, die für die Software-Entwicklung benötigt werden und lernen, wie diese zusammen wirken.
In den Übungen erwerben die Studierenden Grundfertigkeit bei der Programmierung von JavaScript und PHP und erstellen selbst kleine Anwendungen.
Vorlesung: 2 SWS, Übung: 1 SWS
4 Leistungspunkte
Prüfung: mündlich, 30 min
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 3
Gliederung
1. Einführung
2. Das Internet als Basis für Web-Applikationen
3. Verteilte Anwendungen
4. Technologien des Web-Clients
5. Server-Technologien
6. Multimedia in Web-Applikationen
7. Beispiele für Web-Applikationen
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 4
Empfehlenswerte Bücher
H. Wöhr: Web-Technologien, dpunkt.verlag Heidelberg 2004
U. Hammerschall: Verteilte Systeme und Anwendungen, Pearson Studium München 2005
A. S. Tanenbaum, M.van Steen: Verteilte Systeme – Prinzipien und Paradigmen; Pearson Studium München 2008
Florian Franke, Johannes Ippen: Apps mit HTML5, CSS3 und JavaScript: Für iPhone, iPad und Android, Verlag Rheinwerk Computing 2015
St. Tilkov: REST und HTTP, dpunkt.verlag Heidelberg 2011
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 5
Kapitel 2
Das Internet als Basis für Web-
Applikationen
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 6
Schichtenmodell
Schicht N+1
Schicht N
Schicht N-1
Dienstanforderung
Diensterbringung
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 8
Dienstzugangspunkte, Protokoll
(N+1)-Instanz
Schicht N+1
(N+1)-Protokoll
Schicht N
Schicht N+2
(N+1)-SAPs
N-SAPs
(N+1)-Dienst-
Benutzer
N-Dienst-element
(N+1)-Instanz
nach A. S. Tanenbaum: Computernetzwerke, 1997
Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über Antwortzeiten, Ablauffolgen und Dateneinheiten. Die Protokolle sind i. allg. international standardisiert.
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 9
Netzwerk-Schichtensystem
Vermittlung
Sicherung
Bitübertragung
Netzwerk(kabel)
Rechner 1 Rechner 2
Anwendung
Middleware
Transport
Vermittlung
Sicherung
Bitübertragung
Anwendung
Middleware
Transport
Bitübertragungsprotokoll
Sicherungsprotokoll
Vermittlungsprotokoll
Transportprotokoll
Middlewareprotokoll
Anwendungsprotokoll
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 10
Informationsfluss zwischen Endsystemen
nach A. S. Tanenbaum: Computernetzwerke, 1997
Rechner 1 (Quelle)
DatenHTTPTCPIPEthernet
DatenHTTPTCPIP
DatenHTTPTCP
DatenHTTP
Daten
Rechner 2 (Senke)
DatenHTTPTCPIPEthernet
DatenHTTPTCPIP
DatenHTTPTCP
DatenHTTP
Daten
Physikalische Übertragung
HTTP
TCP
IP
Ethernet
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 11
Internet
Das Internet ist ein weltweites Rechnernetzwerk bestehend aus vielen einzelnen Netzwerken, über das Daten mit Hilfe des Internet-Protokolls (IP) ausgetauscht werden.
Anwendung
Transport
Netzwerk
physikalische Schicht
HTTP|FTP|...
TCP|UDP
IP
Rechner 1 Rechner 2
Anwendung
Transport
Netzwerk
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 14
Domain Name System (DNS)
Ausgangs-LAN
Ziel-LAN
Client
Client|Server
WAN
www.test.de
123.45.0.0
123.45.0.0
123.45.0.0
00110100100...
ARP-Service
DNS-Server
Router
Router
MAC-Adresse
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 15
Beispiel für DNS-Hierarchie
Root-Server
Server für
.org
Server für
.de
Server für
un.org
Server für
w3.org
Server für
jena.de
Server für
erfurt.de
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 16
HTTP-Kommandos
Anfrage Beschreibung
GET Anfordern einer Ressource (z.B. HTML-Datei) beim Server; Pa-rameter: URI
HEAD Lesen des Headers einer Ressource (i.allg. Web-Page); z.B.zum Überprüfen der Aktualität einer Webseite im Browser-Ca-che
PUT Hochladen einer Datei auf den Server; Ziel-URI notwendig
POST sendet Daten an Server; z.B. Formularinhalte
DELETE Löschen einer Ressource auf dem Server
LINK Verbinden zweier Ressourcen
TRACE Anfrage, wie sie der Server empfangen hat, wird zurückge-sandt; wichtig für Verbindungstests und Debugging
OPTIONS liefert Liste der vom Server unterstützten Methoden und Featu-res
CONNECT zum Aufbau von SSL-Tunneln (über Proxyserver)
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 17
HTTP-Beispiel
Anfrage:
GET index.html HTTP/1.1
Antwort:
HTTP/1.1 200 Document follows
MIME-Version: 1.0
Server: Jigsaw/2.1
Content-Type: text/html
Content-Length: 6341
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD><TITLE>Technische Universität Ilmenau</TITLE>
</HEAD>
<BODY>
. . . .
</BODY>
</HTML>
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 18
MIME-Type
Medientyp Beschreibung
text Text
image Grafiken
video Videomaterial
audio Audiodaten
application uninterpretierte binäre Daten
Mischformate (z. B. Textdokumente mit eingebetteten nichttex-tuellen Daten) oder Informationen, die von einem bestimmtenProgramm verarbeitet werden sollen
multipart mehrteilige Daten
message Nachrichten, beispielsweise message/rfc822
model Daten, die mehrdimensionale Strukturen repräsentieren
example Beispiel-Medientyp für Dokumentationen
siehe: http://www.iana.org/assignments/media-types/
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 19
Beispiele für MIME-Typen
MIME-Type Beschreibung
application/pdf .pdf Portable Document Format PDF
application/xhtml+xml .xhtml XHTML-Datei (wird nicht von allen Brow-ser unterstützt)
application/xml .xml Extensible Markup Language
application/x-javascript .js JavaScript-Code
application/x-shockwave-flash .swf, .cab Flash Shockwave-Dateien
audio/mpeg3, audio/x-mpeg3 .mp3 MMPEG 1/2 Audio Layer 3
image/jpeg .jpg JPEG-Bild
text/html .htm, .html HTML-Datei
text/xml .xml Extensible Markup Language
video/mpeg .mpg Moving Picture Experts Group, Videodatei
video/x-flv .flv Flash-Video
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 21
Kapitel 3
Verteilte Anwendungen
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 22
Verteiltes System
„Ein verteiltes System ist ein System, in dem sich Hardware- und Softwarekomponenten auf vernetzten Computern befinden und miteinander über den Austausch von Nachrichten kommunizieren.“
Definition nach George Coulouris [HAM2005]
„Ein verteiltes System ist eine Ansammlung unabhängiger Computer, die den Benutzern wie ein einzelnes kohärentes System erscheinen.“
Definition nach Andrew S. Tanenbaum [TAN2008]
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 23
Middleware
Verteilte Anwendung
Knoten des verteilten Systems
Komponente der verteilten Anwdg.
Knoten des verteilten Systems
Komponente der verteilten Anwdg.
Netzwerk
Middleware Middleware
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 24
Kommunikationsmodelle
Sender Empfänger
t t
synchroneKommunikation
akti
v
blo
ckie
rt
Sender Empfänger
t t
asynchroneKommunikation
akti
v
akti
v
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 32
Systemdienste von Application Servern
Systemdienst Beschreibung
Naming Service Abbildung von (einfachen) Namen auf Objektreferenzen
Lifecycle Management Erzeugen und Entfernen von Komponenten – je nach Bedarf
State Management Sicherstellung des Zustandes einer Komponente über Aufrufe hinweg
Concurrency Koordination von Sperrung und Entsperrung verteilter Komponenten bei gleichzeitig zugreifenden Clients
Persistence Service permanente Speicherung von Komponentenzuständen in einer Datenbank sowie der ständige Synchronisation
Transaction Mangement Steuerung von Transaktionen über mehrere Komponenten und externe Ressourcen hinweg
Security Service Authentifizierung des Clients und dessen Autorisierung für die Komponenten- und Methodennutzung
Event Service Übermittlung von Ereignissen einer Komponente an alle für dieses Ereignis registrierten Komponenten
Messaging Service asynchrone Kommunikation von Komponenten untereinander und mit externen Ressourcen
nach Wöhr 2005
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 33
Remote Procedure Call (RPC)
nach U. Hammerschall, 2005
Server-ProzessClient-Prozess
Client-Prozedur
Client-Stub-Prozedur
Netzwerk
Server-Prozedur
Server-Stub-Prozedur
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 34
Remote Method Invocation (RMI)
nach U. Hammerschall, 2005
Server-ProzessClient-Prozess
Client-Objekt
Client-Stub
Netzwerk
Server-Objekt
Server-Stub / Skeleton
Proxy-Objekt
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 35
Nachrichtenorientiertes Programmiermodell
nach U. Hammerschall, 2005
Server-ProzessClient-Prozess
Client / Sender
Netzwerk
Server / Empfänger
Nachricht -
- Warte-- schlange-
Nachricht
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 37
Beispiel für REST: Atom Publishing Protocols (AtomPub)
nach St. Tilkov, 2011
<?xml version="1.0" encoding="UTF-8"?><apub:service xmlns:apub="http://www.w3.org/2007/app"
xmlns:atom="http://www.w3.org/2005/atom"><apub:workspace>
<atom:title>Workspace-Name</atom:title><apub:collection href="http://www.beispiel.com/blog/entries">
<atom:title>Blog-Einträge</atom:title><apub:accept>application/atom+xml</apub:accept><apub:categories href="http://www.beispiel.com/cat/default.cat"/>
</apub:collection><apub:collection href="http://www.beispiel.com/blog/pictures">
<atom:title>Bilder</atom:title><apub:accept>image/png</apub:accept><apub:accept>image/jpeg</apub:accept><apub:accept>image/gif</apub:accept>
</apub:collection></apub:workspace>
</apub:service>
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 38
● Orientierung der IT-Prozesse an den Geschäftsprozessen
● Interaktion von (verteilten) Software-Komponenten mit Hilfe von (XML-basierten) Nachrichten
WebServices
“WebServices sind wiederverwendbare, gekapselte, auf standardisierten Internetprotokollen basierende Software-komponenten, die in ihrem dynamischen Zusammenwirken über das Internet ein heterogenes, dienstorientiertes, verteiltes System schaffen.“ [MANG2002]
● drei XML-Sprachen verwendet:● SOAP = ursprünglich: Simple Object Access Protocol● WSDL = WebService Description Language● UDDI = Universal Description, Discovery and Integration
Serviceorientierte Architektur (SOA)
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 39
Architektur eines Web Services
● Zusammenwirken der Instanzen: Konsument, Anbieter und Verzeichnis
Service-Broker
UDDI
Service-Anbieter(server)
Service-Konsument
(client)
WSDL WSDL
SOAP
SOAP