Multimediale Web-Anwendungen

Transkript

1 Multimediale Web-Anwendungen Wahlobligatorische Vorlesung im Master-Studiengang Medientechnologie Dr. Eckhardt Schön Institut für Medientechnik Fachgebiet Audiovisuelle Technik Web-Seite zur Vorlesung 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

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

3 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

4 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

5

6

7 Domain Name System (DNS) Ausgangs-LAN Client Router DNS-Server WAN Ziel-LAN Router Client Server ARP- Service 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

8 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/ 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

9 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: 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 Beschreibung.pdf Portable Document Format PDF.xhtml XHTML-Datei (wird nicht von allen Browser unterstützt).xml Extensible Markup Language.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 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

10 Kapitel 3 Verteilte Anwendungen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 20

11 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

12 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

13

14

15

16 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

17 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

18 Beispiel für REST: Atom Publishing Protocols (AtomPub) <?xml version="1.0" encoding="utf-8"?> <apub:service xmlns:apub=" xmlns:atom=" <apub:workspace> <atom:title>workspace-name</atom:title> <apub:collection href=" <atom:title>blog-einträge</atom:title> <apub:accept>application/atom+xml</apub:accept> <apub:categories href=" </apub:collection> <apub:collection href=" <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

19 Orientierung der IT-Prozesse an den Geschäftsprozessen Interaktion von (verteilten) Software-Komponenten mit Hilfe von (XML-basierten) Nachrichten WebServices Serviceorientierte Architektur (SOA) 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

20 Kapitel 4 Clientseitige Technologien Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 39

21 Hypertext Markup Language (HTML) HTML ist eine deklarative, textbasierte Seitenbeschreibungssprache (gilt nur bis HTML 4.01) fester Sprachumfang Container für Medienobjekte kann Metadaten enthalten Serialisierung eines Strukturbaumes HTML-Varianten: Strict, Transitional, Frameset HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014 Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 42

22 HTML5 und XHTML5 W3C: HTML5 contains powerful capabilities for Web-based applications with more powerful interaction, video support, graphics, more styling effects, and a full set of APIs. HTML5 adapts to any device, whether desktop, mobile, tablet, or television. HTML5 is an open platform developed under royalty free licensing terms. HTML5 und XHTML5 zwei unterschiedliche Serialisierung des DOM5 MIME-Typ (XHTML5 mit application/xhtml+xml oder application/xml; HTML5 mit text/html) Namensraumdeklaration: XHTML5 notwendig HTML5 optional (wenn vorhanden, dann xmlns=" Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 43 Neuerungen bei (X)HTML5 Einfache Einbindung der DTD: <!DOCTYPE html> Einbindung von MathML und SVG Schnittstellen zu Multimedia-Inhalten neue und geänderte Tags z.b. neue Tags zur Strukturierung: <section>, <article>, <nav>, <footer>, <header>, <aside>, <time>,... entfernte Elemente: <big>, <center>, <font>, <u>, Frames (nur noch <iframe>),... Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 44

23 geänderte Elemente Neuerungen bei (X)HTML5 <hr>, <a>, <small>, <strong>,... Attribute, z.t. geändert und neue sind hinzugekommen (abwärtskompatibel) DOM5 HTML5 und XHTML5 sind zwei unterschiedliche Serialisierungen des gleichen DOM-Baumes gleicher DOM-Baum (und damit gleiche Methoden) für HTML5 und XHTML5 Scripte (meist JavaScript) müssen nicht geändert werden Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 45 Multimedia-Unterstützung von (X)HTML5 <audio> <video> embedded content, d.h. äußere Quelle wird integriert Attribute: src, preload, autoplay, loop, controls i.allg. Kontroll-Elemente notwendig (Lautstärke, Mute, Play, Stop,...) passender Codec zur Wiedergabe nötig Attribute: src, poster, preload, autoplay, loop, controls, width, height Browser benötigt entsprechenden Videocodec zur Wiedergabe Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 46

24 Video-Einbindung in (X)HTML5 Beispiel: <video controls> <source src="sample.ogg" type="video/ogg"/> <source src="sample.mp4" type="video/mp4"; codecs="mp4v "/> Ihr Browser unterstützt das Element video nicht oder beide Formate (mp4, ogg) der Filmdatei(en)sind unbekannt. </video> Webseite, die Browser-Unterstützung für Codec zeigt: engines_(html5_media) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 47 <canvas> Formulare weitere Features von (X)HTML5 Fläche für beliebige (bisher 2D) Grafiken unter Nutzung von JavaScript zu beschreiben sollte SVG nutzen (Apple geht bisher anderen Weg) Probleme: a) Inhalt entsteht prozedural und nicht deskriptiv b) einzelne Elemente nicht ansprechbar (über DOM oder ähnliches Konstrukt) XForms in HTML5 integriert Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 48

25 extensible Markup Language (XML) Die extensible Markup Language (XML) ist eine textbasierte, deklarative Meta-Auszeichnungssprache. Merkmale von XML: 1.Durch XML wird ein Dokument in hierarchische Teile zerlegt (Baumstruktur). 2.Den entstandenen Teilen werden Namen gegeben (Tag- Namen als Metadaten zu benutzen). 3.Das Markup und der Inhalt des XML-Dokumentes bestehen aus Unicode. siehe Vorlesung XML für Medientechnologen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 49

26

27 1. im HTML-Tag CSS-Einbindung in (X)HTML <body style= color: navy; font-famliy: sans-serif > 2. im HEAD-Bereich <head> <style type= text/css > body {color: navy; font-famliy: sans-serif } p {margin-bottom: 1ex } h1 {font-size: 130%; margin-bottom: 2ex; margin-top: 4ex; } </style> </head> 3. als externe Datei <link rel= stylesheet type= text/css href= beispiel.css /> Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 54

28

29 Variablen des Objektes Node nodename: DOMString nodevalue: DOMString nodetype: unsigned short parentnode: Node childenodes: NodeList firstchild: Node lastchild: Node previoussibling: Node nextsibling: Node attributes: NamedNodeMap ownerdocument: Document namespaceuri: DOMString prefix: DOMString Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 57 Methoden des Objektes Node insertbefore(newchild: Node, refchild: Node): Node replacechild(newchild: Node, oldchild: Node): Node removechild(oldchild: Node): Node appendchild(newchild: Node): Node haschildnodes(): boolean clonenodes(deep: boolean): Node normalize() issupported(feature: DOMString, version: DOMString): boolean hasattributes(): boolean Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 58

30 Entstehungsgeschichte: JavaScript 1995 Netscape Communications Corp. (Brendan Eich) Sprachkern 1997 als ECMAScript in ECMA1-262 standardisiert; aktuell: 5.1th Edition (2011) aktuelle Versionen: JavaScript (Juli 2010) und JScript 9.0 (März 2011) Konzept: dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache (von Interpreter umgesetzt) Unterscheidung zwischen Sprache und Ablaufumgebung mögliche Programmierparadigmen: prozedural, objektorientiert, funktional Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 59 Leistungsmerkmale von JavaScript Zugriff auf Bestandteile des geladenen Dokumentes dynamische Änderung des geladenen Dokumentes Steuerung externer Komponenten (SVG-Grafiken, Applets,...) Reaktion auf Benutzeraktionen Fenstermanagement clientseitiger Zugriff auf Cookies (wichtig für Personalisierung, Sessionmanagement) Sandbox-Prinzip Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 60

31 Einbindung von JavaScript in HTML Trennung von HTML- und Script-Code Einbindung: 1.<script>-Tag (verbreitetste Möglichkeit) siehe Übungen 2.Einbindung als Attributwert von Event Handlern <p class="style1" onmouseover="this.classname='style2'" onmouseout="this.classname='style1'"> Text mit <b>mouseover</b>-effekt </p> 3.Attributwerte, die URLs erwarten <a href="javascript:alert('hallo Welt!')">Melde dich!</a> Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 61

32

33 AJAX-Kommunikation function getxmlhttprequest() { var httpreq = null; if (window.xmlhttprequest) { httpreq = new XMLHttpRequest(); } else if (typeof ActiveXObject!= undefined ) { httpreq = new ActiveXObject( Microsoft.XMLHTTP ); } return httpreq; } req = getxmlhttprequest(); // Objekt erzeugen req.open( get, test.xml, true); // Verbindung öffnen req.send(null); // Anfrage senden Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 65

34

35 Java-Applets Charakteristika: sind Komponenten sind Java-Klassen werden in HTML eingebettet sind GUI-Elemente sind interaktiv werden in sicherer Browser-Umgebung (Sandbox) ausgeführt Lebenszyklus: init() start() paint(_) stop() destroy() Einbindung in HTML-Seite mit Hilfe des Tags <applet>, <object> oder <embed> Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 69 Kapitel 5 Serverseitige Technologien Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 70

36

37 SSI-Beispiele   Uhr   englischer Inhalt  deutscher Inhalt  Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 73

38 Aufruf eines CGI-Scripts Formular: <form action="/cgi-bin/guestbook.pl" method="get"> Verweis: <a href="/cgi-bin/statistik.pl">statistik der Webseite</a> Grafikreferenz: <img src="/cgi-bin/counter.pl"> Server Side Include:  automatisches Laden eines ausführbaren CGI-Scripts/CGI- Programms: <meta http-equiv="refresh" content="0; URL=/cgi-bin/welcome.pl"> Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 75 Script-Sprachen 1 Script (ursprünglich): Folge von Betriebssystem-Aufrufen (UNIX-Shell, DOS-Batch-Dateien, Makros unter Windows), auch Programmstart möglich traditionelle Eigenschaften von Scripten: sofortige Ausführung von Anweisungen Interpreter, Laufzeitumgebung Typfreiheit (bzw. schwache Typisierung) keine komplexen Datenstrukturen Einbettung von Betriebssystem-Kommandos komfortable Operationen auf Strings Einbinden externer Programme Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 76

39 Script-Sprachen 2 aktuelle Script-Sprachen (entwickelt seit 1980er Jahre): deutlich mehr Funktionalität Sprachkern stammt von ordentlichen Programmiersprachen (z.b. C) Möglichkeiten der Modellierung Objektorientierung automatische Speicherverwaltung Manipulierung des eigenen Programmcodes clientseitig: JavaScript als Quasi-Standard serverseitig: verschiedene Script-Sprachen (Perl, Python, Ruby, Tcl, VBScript, PHP,...) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 77 PHP PHP: Hypertext Preprocessor (PHP) Entwicklung durch Rasmus Lerdorf 1995 aus Perl Open Source mit großer Entwicklergemeinde Webseite: Eigenschaften von PHP: serverseitige Web-Plattform Script-Sprache (mit C- bzw. Perl-artiger Syntax) prozedurale Sprache mit objektorientierten Erweiterungen umfangreiche Bibliotheken mit vordefinierten Funktionen umfassende Datenbank-Unterstützung komplette Open-Source-Web-Plattform: LAMP Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 78

40 <?php phpinfo()?> PHP-Beispiele <body> <h1>php-beispiel</h1> <p>das ist HTML.</p> <p style="color: red"> <?php echo("das ist php!<br><br>"); echo("das heutige Datum ist "); echo date("d.m.y");?> </p> <h3>ende</h3> </body> Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 80

41 Arrays Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 81 Beispiel für PHP-Funktion function schalldruckpegel($druck) { $spl = 20 * Log10($druck / 2e-5); $spl = round(10 * $spl) / 10; return $spl; } $p = 0.1; echo ("Schalldruckpegel von p=$p ist L="); echo schalldruckpegel($p). " db"; Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 82

42 Beispiel für Verwendung regulärer Ausdrücke Muster Treffer bei M.*t.* Medientechnik Mathematik Marschroute [0-9]{5} [0-9]*,[0-9]{2} 1, ,99 $muster = "^M.*t.*$"; // ^ Beginn des Strings, $ Ende des Strings $teststring = "Medientechnik"; echo ("Muster: $muster, Teststring: $teststring<br>"); if (ereg($muster, $teststring)) { echo ("Treffer"); } else { echo ("falsch"); }; Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 83 Beispiel für Definition einer Klasse class Gedicht { var $autor; // Definition einer Variablen var $text; function Gedicht() { // Konstruktor $this->text=""; } function setautor($wert) { // Definition einer Methode $this->autor=$wert; } function getautor() { return $this->autor; } } Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 84

43

44 Beispiel für einfaches Servlet package buch; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloServlet extends HttpServlet { public void doget( HttpServletRequest req, HttpServletResponse res ) throws ServletException, IOException { res.setcontenttype( "text/html" ); PrintWriter out = res.getwriter(); out.println("<html>"); out.println("<head><title>helloservlet</title></head>"); out.println("<body>"); out.println("<b>hello</b>"); out.println("</body>"); out.println("</html>"); } } Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 88

45

46

47

48

49 Kapitel 6 Multimedia in Web-Applikationen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 97

50 Übertragungsmodi Übertragungsmodus Eigenschaften Anwendung asynchron synchron isochron Dateneinheiten werden nacheinander übertragen keine zeitliche Beschränkung maximale Ende-zu-Ende- Verzögerung vorgegeben maximale und minimale Ende-zu-Ende-Verzögerung vorgegeben, d.h. beschränkter Jitter Dateitransfer (u.a. HTML- Seiten, Download von Fotos oder Videos) Übertragung von Sensor- Daten Audio- und Video-Übertragung in Form eines Streams Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 100

51 Kompression mit variabler und konstanter Datenrate Übertragungsrate t schwach komprimiertes Signal Übertragungsrate t Übertragungsrate t für Streaming stark komprimiertes Signal Übertragungsrate t Codec mit variabler Bitrate Codec mit konstanter Bitrate Bildqualität t Bildqualität Bildqualität t Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 101

52 Streaming-Protokolle unabhängig standardisierte Protokolle: RTP Real Time Transport Protocol RTSP Real Time Streaming Protocol RTCP Real Time Transport Control Protocol RSVP Resource Reservation Protocol setzt auf UDP auf; übermittelt Medieninhalte setzt auf UDP oder TCP auf; textbasiertes Protokoll zur Steuerung von isochronen Datenströme ( Netzwerk-Fernbedienung ) Aushandlung und Einhaltung von QoS-Parametern; periodischer Austausch von Steuernachrichten zwischen Sender und Empfänger befindet sich auf der Transportschicht; kann im Netzwerk Datenrate für Übermittlung von Streaming-Daten reservieren Real Time Messaging Protocol (RTMP) von Adobe Microsoft Media Server Protocol (MMS) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 103

53

54

55 Kapitel 7 Beispiele für Web-Applikationen Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 109

56

57

58 Android-Architektur Anwendungsschicht Android-Anwendungen Drittanbieter- Anwendungen eigene Anwendungen Anwendungsrahmen Activity Manager Content Provider Location Manager Notification Manager Package Manager Ressource Manager Oberflächen -elemente Connectivity Manager Telephony Manager Window Manager Bibliotheken Grafik Media- Framework libc (Systembibliotheken) SQLite- Datenbanken SSL Android-Laufzeitumgebung Android-Laufzeitumgebung Webkit Oberflächenmanager DVM (Dalvik Virtual Machine) Linux-Kernel Gerätetreiber Energieversorung Speicherverwaltung Prozessverwaltung IPC-Treiber (Binder) nach [BECK2010] Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 115

59 Screenshot des Google Play Store (vom Juli 2013) Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2015 Folie 117