Multimediale Web-Anwendungen Wahlobligatorische Vorlesung im Master-Studiengang Medientechnologie Dr. Eckhardt Schön eckhardt.schoen@tu-ilmenau.de Institut für Medientechnik Fachgebiet Audiovisuelle Technik Web-Seite zur Vorlesung http://www.tu-ilmenau.de/mt/lehrveranstaltungen/ master-mt/multimediale-web-applikationen/ Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 1 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 2015 Folie 2
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 St. Koch: JavaScript, dpunkt.verlag Heidelberg 2011 U. Kühhirt, M. Rittermann: Interaktive audiovisuelle Medien, Fachbuchverlag Leipzig 2007 St. Tilkov: REST und HTTP, dpunkt.verlag Heidelberg 2011 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 3 Kapitel 2 Das Internet als Basis für Web- Applikationen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 4
Schichtenmodell Schicht N+1 Dienstanforderung Schicht N Diensterbringung Schicht N-1 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 5 Dienstzugangspunkte, Protokoll (N+1)-Dienst- Benutzer Schicht N+2 (N+1)-SAPs (N+1)-Instanz (N+1)-Protokoll (N+1)-Instanz N-Dienstelement Schicht N+1 Schicht N N-SAPs 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. nach A. S. Tanenbaum: Computernetzwerke, 1997 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 6
Netzwerk-Schichtensystem Rechner 1 Rechner 2 Anwendung Anwendungsprotokoll Anwendung Middleware Transport Vermittlung Sicherung Bitübertragung Middlewareprotokoll Transportprotokoll Vermittlungsprotokoll Sicherungsprotokoll Bitübertragungsprotokoll Middleware Transport Vermittlung Sicherung Bitübertragung Netzwerk(kabel) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 8
Domain Name System (DNS) Ausgangs-LAN www.test.de Client 123.45.0.0 Router DNS-Server WAN Ziel-LAN 123.45.0.0 Router 123.45.0.0 Client Server ARP- Service 00110100100... MAC-Adresse Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 13 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 2015 Folie 14
HTTP-Kommandos Anfrage GET HEAD PUT POST DELETE LINK TRACE OPTIONS CONNECT Beschreibung Anfordern einer Ressource (z.b. HTML-Datei) beim Server; Parameter: URI Lesen des Headers einer Ressource (i.allg. Web-Page); z.b. zum Überprüfen der Aktualität einer Webseite im Browser-Cache Hochladen einer Datei auf den Server; Ziel-URI notwendig sendet Daten an Server; z.b. Formularinhalte Löschen einer Ressource auf dem Server Verbinden zweier Ressourcen Anfrage, wie sie der Server empfangen hat, wird zurückgesandt; wichtig für Verbindungstests und Debugging liefert Liste der vom Server unterstützten Methoden und Features zum Aufbau von SSL-Tunneln (über Proxyserver) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 15 Anfrage: GET index.html HTTP/1.1 Antwort: HTTP-Beispiel 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 2015 Folie 16
MIME-Type Medientyp text image video audio application multipart message model example Beschreibung Text Grafiken Videomaterial Audiodaten uninterpretierte binäre Daten Mischformate (z. B. Textdokumente mit eingebetteten nichttextuellen Daten) oder Informationen, die von einem bestimmten Programm verarbeitet werden sollen mehrteilige Daten Nachrichten, beispielsweise message/rfc822 Daten, die mehrdimensionale Strukturen repräsentieren Beispiel-Medientyp für Dokumentationen siehe: http://www.iana.org/assignments/media-types/ Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 17 Beispiele für MIME-Typen MIME-Type application/pdf application/xhtml+xml application/xml application/x-javascript application/x-shockwave-flash Beschreibung.pdf Portable Document Format PDF.xhtml XHTML-Datei (wird nicht von allen Browser unterstützt).xml Extensible Markup Language.js JavaScript-Code.swf,.cab Flash Shockwave-Dateien audio/mpeg3, audio/x-mpeg3.mp3 MMPEG 1/2 Audio Layer 3 image/jpeg text/html text/xml video/mpeg video/x-flv.jpg JPEG-Bild.htm,.html HTML-Datei.xml Extensible Markup Language.mpg Moving Picture Experts Group, Videodatei.flv Flash-Video Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 18
Kapitel 3 Verteilte Anwendungen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 20
Verteiltes System Ein verteiltes System ist ein System, in dem sich Hardwareund 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 2015 Folie 21 Middleware Verteilte Anwendung Komponente der verteilten Anwdg. Komponente der verteilten Anwdg. Middleware Middleware Knoten des verteilten Systems Knoten des verteilten Systems Netzwerk Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 22
Kommunikationsmodelle Sender Empfänger Sender Empfänger blockiert aktiv aktiv aktiv t t synchrone Kommunikation t t asynchrone Kommunikation Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 23
Systemdienste von Application Servern Systemdienst Naming Service Lifecycle Management State Management Concurrency Persistence Service Transaction Mangement Security Service Event Service Messaging Service Beschreibung Abbildung von (einfachen) Namen auf Objektreferenzen Erzeugen und Entfernen von Komponenten je nach Bedarf Sicherstellung des Zustandes einer Komponente über Aufrufe hinweg Koordination von Sperrung und Entsperrung verteilter Komponenten bei gleichzeitig zugreifenden Clients permanente Speicherung von Komponentenzuständen in einer Datenbank sowie der ständige Synchronisation Steuerung von Transaktionen über mehrere Komponenten und externe Ressourcen hinweg Authentifizierung des Clients und dessen Autorisierung für die Komponenten- und Methodennutzung Übermittlung von Ereignissen einer Komponente an alle für dieses Ereignis registrierten Komponenten asynchrone Kommunikation von Komponenten untereinander und mit externen Ressourcen nach Wöhr 2005 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 31 Remote Procedure Call (RPC) Client-Prozess Server-Prozess Client-Prozedur Client-Stub-Prozedur Server-Prozedur Server-Stub-Prozedur Netzwerk nach U. Hammerschall, 2005 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 32
Remote Method Invocation (RMI) Client-Prozess Client-Objekt Server-Prozess Server-Objekt Proxy-Objekt Client-Stub Server-Stub / Skeleton Netzwerk nach U. Hammerschall, 2005 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 33 Nachrichtenorientiertes Programmiermodell Client-Prozess Client / Sender Server-Prozess Server / Empfänger Nachricht Nachricht - - Warte- - schlange - Netzwerk nach U. Hammerschall, 2005 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 34
Beispiel für REST: Atom Publishing Protocols (AtomPub) <?xml version="1.0" encoding="utf-8"?> <apub:service xml:apub="http://www.w3.org//2007/app" xml: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> nach St. Tilkov, 2011 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 36
Serviceorientierte Architektur (SOA) Orientierung der IT-Prozesse an den Geschäftsprozessen Interaktion von (verteilten) Software-Komponeneten mit Hilfe von (XML-basierten) Nachrichten WebServices WebServices sind wiederverwendbare, gekapselte, auf standardisierten Internetprotokollen basierende Softwarekomponenten, 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 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 37 Architektur eines Web Services Zusammenwirken der Instanzen: Konsument, Anbieter und Verzeichnis WSDL Service- Broker UDDI WSDL Service- Konsument (client) SOAP SOAP Service- Anbieter (server) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 38