Post on 13-Aug-2019
transcript
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 1
Multimediale Web-Anwendungen
Wahlobligatorische Vorlesung im Master-Studiengang Medientechnologie
Dr. Eckhardt Schöneckhardt.schoen@tu-ilmenau.de
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ürun.org
Server fürw3.org
Server fürjena.de
Server fürerfurt.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 DatenMischformate (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 tsynchrone
Kommunikation
akti
v
blo
ckie
rt
Sender Empfänger
t tasynchrone
Kommunikation
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-BrokerUDDI
Service-Anbieter(server)
Service-Konsument
(client)
WSDL WSDL
SOAP
SOAP
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 40
Kapitel 4
Clientseitige Technologien
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 43
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
Hypertext Markup Language (HTML)
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 44
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="http://www.w3.org/1999/xhtml")
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 45
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 2016 | Folie 46
Neuerungen bei (X)HTML5
● geänderte Elemente
<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 2016 | Folie 47
Multimedia-Unterstützung von (X)HTML5
● <audio>– 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
● <video>– Attribute: src, poster, preload, autoplay, loop,
controls, width, height– Browser benötigt entsprechenden Videocodec zur
Wiedergabe
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 48
Video-Einbindung in (X)HTML5
● Beispiel: <video controls>
<source src="sample.ogg" type="video/ogg"/>
<source src="sample.mp4" type="video/mp4";
codecs="mp4v.20.240"/>
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:http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 49
weitere Features von (X)HTML5
● <canvas>– 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 deskriptivb) einzelne Elemente nicht ansprechbar (über DOM
oder ähnliches Konstrukt)● Formulare
– XForms in HTML5 integriert
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 50
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 2016 | Folie 55
CSS-Einbindung in (X)HTML
1. im HTML-Tag<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 2016 | Folie 58
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 2016 | Folie 59
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 2016 | Folie 60
JavaScript
Entstehungsgeschichte:● 1995 Netscape Communications Corp. (Brendan Eich)● Sprachkern 1997 als ECMAScript in ECMA1-262
standardisiert; aktuell: 5.1th Edition (2011)● aktuelle Versionen: JavaScript 1.8.5 (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 2016 | Folie 61
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 2016 | Folie 62
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 2016 | Folie 66
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 erzeugenreq.open(„get“, „test.xml“, true); // Verbindung öffnenreq.send(null); // Anfrage senden
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 70
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 2016 | Folie 71
Kapitel 5
Serverseitige Technologien
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 74
SSI-Beispiele
<!-- #include file="header.shtml" -->
<!-- #echo var="DATE_LOCAL" --> Uhr
<!-- #set var="test" value="Hallo Welt!" -->
<!-- #if expr="$QUERY_STRING=/lang=EN/"-->
englischer Inhalt
<!-- #else--> deutscher Inhalt <!-- #endif -->
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 76
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:<!-- #exec cgi="/cgi-bin/counter.pl" -->
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 2016 | Folie 77
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 2016 | Folie 78
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, CFML, PHP, ...)
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 79
PHP
PHP: Hypertext Preprocessor (PHP)
Entwicklung durch Rasmus Lerdorf 1995 aus Perl
Open Source mit großer Entwicklergemeinde
Webseite: www.php.net
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 2016 | Folie 81
PHP-Beispiele
<?php phpinfo() ?>
<body><h1>PHP-Beispiel</h1><p>Das ist HTML.</p><p style="color: red">
<?phpecho("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 2016 | Folie 82
Arrays
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 83
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 2016 | Folie 84
Beispiel für Verwendung regulärer Ausdrücke
Muster Treffer bei
M.*t.* Medientechnik Mathematik Marschroute
[0-9]{5} 12345
[0-9]*,[0-9]{2} 1,23 9999,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 2016 | Folie 85
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 2016 | Folie 89
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 2016 | Folie 98
Kapitel 6
Multimedia in Web-Applikationen
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 101
Übertragungsmodi
Übertragungs-modus
Eigenschaften Anwendung
asynchron Dateneinheiten werdennacheinander übertragenkeine zeitliche Beschränkung
Dateitransfer (u.a. HTML-Seiten, Download vonFotos oder Videos)
synchron maximale Ende-zu-Ende-Verzögerung vorgegeben
Übertragung von Sensor-Daten
isochron maximale und minimale En-de-zu-Ende-Verzögerungvorgegeben, d.h. beschränk-ter Jitter
Audio- und Video-Über-tragung in Form einesStreams
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 102
Kompression mit variabler und konstanter Datenrate
tÜbe
rtra
gung
srat
e
tÜbe
rtra
gung
srat
e
t
Bild
qual
ität
tÜbe
rtra
gung
srat
e
tÜbe
rtra
gung
srat
e
t
Bild
qual
ität
schwachkomprimiertes Signal
für Streamingstark komprimiertesSignal
Bildqualität
Codec mit variabler Bitrate Codec mit konstanter Bitrate
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 104
Streaming-Protokolle
RTP Real Time TransportProtocol
setzt auf UDP auf; übermittelt Medieninhalte
RTSP Real Time StreamingProtocol
setzt auf UDP oder TCP auf; textbasiertesProtokoll zur Steuerung von isochronen Da-tenströme („Netzwerk-Fernbedienung”)
RTCP Real Time TransportControl Protocol
Aushandlung und Einhaltung von QoS-Para-metern; periodischer Austausch von Steuer-nachrichten zwischen Sender und Empfänger
RSVP Resource ReservationProtocol
befindet sich auf der Transportschicht; kannim Netzwerk Datenrate für Übermittlung vonStreaming-Daten reservieren
Real Time Messaging Protocol (RTMP) von Adobe
Microsoft Media Server Protocol (MMS)
unabhängig standardisierte Protokolle:
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 110
Kapitel 7
Beispiele für Web-Applikationen
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 116
Android-Architektur
ActivityManager
Energieversorung
Android-Anwendungen Drittanbieter-Anwendungen
eigene Anwendungen
RessourceManager
Content Provider
Oberflächen-elemente
LocationManager
ConnectivityManager
NotificationManager
TelephonyManager
PackageManager
WindowManager
Grafik
Media-Framework
libc (System-bibliotheken)
SQLite-Datenbanken
SSL
Webkit
Oberflächenmanager
Android-Laufzeitumgebung
DVM (Dalvik Virtual Machine)
Speicherverwaltung
Prozessverwaltung
IPC-Treiber (Binder)Gerätetreiber
Anwendungsschicht
Anwendungsrahmen
Bibliotheken
Linux-Kernel
Android-Laufzeitumgebung
nach [BECK2010]
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 118
Screenshot des Google Play Store (vom Juni 2016)