multimediale web-anwendungen - startseite tu ilmenau · ein protokoll beschreibt die syntax und...

60
Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 1 Multimediale Web-Anwendungen Wahlobligatorische Vorlesung im Master-Studiengang Medientechnologie Dr. Eckhardt Schön [email protected] Institut für Medientechnik Fachgebiet 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

Upload: dangtu

Post on 13-Aug-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 2: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 3: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 4: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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.

Page 5: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 6: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 7: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 8: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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)

Page 9: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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&auml;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/

Page 10: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 11: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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]

Page 12: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 13: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 14: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 15: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 16: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 17: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 18: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 19: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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)

Page 20: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 21: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 22: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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")

Page 23: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 24: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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)

Page 25: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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“

Page 26: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 27: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 28: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 29: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 30: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 31: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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>

Page 32: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 33: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 34: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 35: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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>

Page 36: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 71

Kapitel 5

Serverseitige Technologien

Page 37: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 38: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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">

Page 39: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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, ...)

Page 40: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 41: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 42: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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"); };

Page 43: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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; }

}

Page 44: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 45: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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>"); }}

Page 46: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 47: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 48: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 49: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 98

Kapitel 6

Multimedia in Web-Applikationen

Page 50: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 51: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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

Page 52: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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:

Page 53: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 54: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 55: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 110

Kapitel 7

Beispiele für Web-Applikationen

Page 56: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 57: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über
Page 58: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

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]

Page 59: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über

Multimediale Web-Anwendungen | Dr. E. Schön Sommersemester 2016 | Folie 118

Screenshot des Google Play Store (vom Juni 2016)

Page 60: Multimediale Web-Anwendungen - Startseite TU Ilmenau · Ein Protokoll beschreibt die Syntax und Semantik der auszutauschenden Anwendungsinformationen und trifft Festlegungen über