Benutzer-Werkzeuge
se:multimedia
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung Nächste Überarbeitung Beide Seiten der Revision | ||
|
se:multimedia [2009-03-23 12:40] stefan |
se:multimedia [2009-03-23 18:50] stefan |
||
|---|---|---|---|
| Zeile 17: | Zeile 17: | ||
| * die Anwendung psychoakustischer Erkenntnisse bei MPEG nachvollziehen | * die Anwendung psychoakustischer Erkenntnisse bei MPEG nachvollziehen | ||
| * die wichtigsten Dateiformate für Multimedia-Inhalte kennen | * die wichtigsten Dateiformate für Multimedia-Inhalte kennen | ||
| - | * wissen, welche Formate für welchen Zweck adequat sind | + | * wissen, welche Formate für welchen Zweck adäquat sind |
| * wichtige Werkzeuge und Geräte in der Medienproduktion kennen | * wichtige Werkzeuge und Geräte in der Medienproduktion kennen | ||
| * Grundlagen der elektronischen Klangerzeugung und Musikproduktion kennen | * Grundlagen der elektronischen Klangerzeugung und Musikproduktion kennen | ||
| * verschiedene Alternativen bei der Medienproduktion identifizieren | * verschiedene Alternativen bei der Medienproduktion identifizieren | ||
| + | * wichtige Netzwerkprotokolle und -dienste kennen und ihre Anwendungsgebiete benennen können | ||
| + | * Client- und Server-seitige Techniken kennen und identifizieren können, für welchen Zweck welche Technik adäquat ist | ||
| + | * wichtige Trends des WWW kennen und evaluieren können | ||
| + | * ermutigt sein, selbst neue Trends im WWW zu entdecken | ||
| ===== Einleitung ===== | ===== Einleitung ===== | ||
| Zeile 369: | Zeile 373: | ||
| ===== Dateiformate ===== | ===== Dateiformate ===== | ||
| ==== Text ==== | ==== Text ==== | ||
| + | * **Typographie**: Gestaltungsmuster und -regeln für Schriftdokumente und Ausgestaltung von Schriftarten (Fonts) und Zeichen (Glyphen) | ||
| * **Zeichensatz**: "Übersetzungstabelle" von Symbolen/Textzeichen in Binärwörter | * **Zeichensatz**: "Übersetzungstabelle" von Symbolen/Textzeichen in Binärwörter | ||
| * ASCII: Zeichensatz für englisches Alphabet, Zahlen, Steuerzeichen (1byte) | * ASCII: Zeichensatz für englisches Alphabet, Zahlen, Steuerzeichen (1byte) | ||
| * Anpassungen für bestimmte Länder mit Sonderzeichen (z.B. Umlaute) z.B. ISO-8859-1 (westeuropäisch), ISO-8859-2 (osteuropäisch) | * Anpassungen für bestimmte Länder mit Sonderzeichen (z.B. Umlaute) z.B. ISO-8859-1 (westeuropäisch), ISO-8859-2 (osteuropäisch) | ||
| + | * Abwandlung durch Microsoft: CP-1252 | ||
| * Probleme, wenn spezifischer Zeichensatz nicht installiert ist -> Zeichen werden falsch angezeigt | * Probleme, wenn spezifischer Zeichensatz nicht installiert ist -> Zeichen werden falsch angezeigt | ||
| * Unicode: Multi-Byte-Zeichensatz, der alle Sprachen der Erde abdecken soll (Unicode 5: 99.089 Zeichen) | * Unicode: Multi-Byte-Zeichensatz, der alle Sprachen der Erde abdecken soll (Unicode 5: 99.089 Zeichen) | ||
| Zeile 392: | Zeile 398: | ||
| * Type1 Fonts (Postscript Fonts): spezifiziert von Adobe, besteht aus Klartextdateien (AFM, AMFM, ACFM), werden kompiliert in PFB (binär) oder PFA (ASCII), waren Standard auf Mac | * Type1 Fonts (Postscript Fonts): spezifiziert von Adobe, besteht aus Klartextdateien (AFM, AMFM, ACFM), werden kompiliert in PFB (binär) oder PFA (ASCII), waren Standard auf Mac | ||
| * OpenType (OTF): entwickelt von Adobe und Microsoft, Erweiterung von True Type, kann als Container für Type1 dienen | * OpenType (OTF): entwickelt von Adobe und Microsoft, Erweiterung von True Type, kann als Container für Type1 dienen | ||
| - | * LaTeX: Markup-Sprache zur Textgestaltung, Stärke: mathematische Formeln, Trennung von Text und Gestaltung, muss kompiliert werden | + | * LaTeX: Markup-Sprache zur Textgestaltung, Stärke: mathematische Formeln, Trennung von Text und Gestaltung, muss kompiliert werden (z.B. in Postscript, PDF, HTML) |
| * RTF (Rich Text Format): Austauschformat für Textverarbeitungssysteme, Klartext-ASCII-Dateien ohne Semantik, globale Einstellungen im Kopf der Datei, Befehle werden durch \ eingeleitet, Text durch {} abgetrennt | * RTF (Rich Text Format): Austauschformat für Textverarbeitungssysteme, Klartext-ASCII-Dateien ohne Semantik, globale Einstellungen im Kopf der Datei, Befehle werden durch \ eingeleitet, Text durch {} abgetrennt | ||
| Zeile 408: | Zeile 414: | ||
| * TIFF (Tagged Image File Format) | * TIFF (Tagged Image File Format) | ||
| * spezifiziert 1980 von Aldus, HP, Microsoft | * spezifiziert 1980 von Aldus, HP, Microsoft | ||
| - | * besteht aus variabler Anzahl von Blöcken, die im Hauptdatenstrom per Zeiger referenziert werden | + | * besteht aus variabler Anzahl von Blöcken, die im Hauptdatenstrom per Zeiger referenziert werden -> beliebige Reihenfolge der Nutzdaten |
| * Blöcke enthalten Tags (12byte) mit Informationen zum Bild (z.B. Höhe, Breite, bit/Pixel) | * Blöcke enthalten Tags (12byte) mit Informationen zum Bild (z.B. Höhe, Breite, bit/Pixel) | ||
| * keine oder verlustlose Komprimierung möglich: RLE, LZW, Baseline | * keine oder verlustlose Komprimierung möglich: RLE, LZW, Baseline | ||
| * wird blockweise gelesen (z.B. nur sichtbarer Bereich bei Bildbearbeitung) | * wird blockweise gelesen (z.B. nur sichtbarer Bereich bei Bildbearbeitung) | ||
| - | * mehrere Farbsysteme und Alphakanäle möglich | + | * mehrere Farbsysteme (RGB, CMYK) und Alphakanäle möglich |
| * TIFF 6.0: Rechte bei Adobe, kann mehrere Bildebenen speichern | * TIFF 6.0: Rechte bei Adobe, kann mehrere Bildebenen speichern | ||
| * GIF (Graphics Interchange Format): 1987 von UNISYS und Compuserve vorgestellt | * GIF (Graphics Interchange Format): 1987 von UNISYS und Compuserve vorgestellt | ||
| Zeile 422: | Zeile 428: | ||
| * bis 2004 lizenzpflichtig | * bis 2004 lizenzpflichtig | ||
| * PNG (Portable Network Graphics Format) | * PNG (Portable Network Graphics Format) | ||
| - | * 48bit pro Pixel -> Echtfarbfotos | + | * 48bit pro Pixel -> Echtfarbfotos (nur RGB) |
| * lizenzfrei | * lizenzfrei | ||
| * Vorwärtsprädiktion und LZW | * Vorwärtsprädiktion und LZW | ||
| Zeile 518: | Zeile 524: | ||
| * Musikproduktion | * Musikproduktion | ||
| * Vertonung für Film und Fernsehen | * Vertonung für Film und Fernsehen | ||
| + | |||
| + | === Audio === | ||
| * Mikrofon: wandelt Schallwellen der Luft in elektrische Signale | * Mikrofon: wandelt Schallwellen der Luft in elektrische Signale | ||
| * dynamische Mikrofone | * dynamische Mikrofone | ||
| Zeile 556: | Zeile 564: | ||
| * 1981 von Roland eingeführte serielle Schnittstelle zur Steuerung von digitalen Musikinstrumenten (Keyboards, Synthesizer) | * 1981 von Roland eingeführte serielle Schnittstelle zur Steuerung von digitalen Musikinstrumenten (Keyboards, Synthesizer) | ||
| * Steuerdaten zur Klangerzeugung und -aufnahme: Anschlag + Tonhöhe, Anschlagsstärke, Tonende, Controllerdaten | * Steuerdaten zur Klangerzeugung und -aufnahme: Anschlag + Tonhöhe, Anschlagsstärke, Tonende, Controllerdaten | ||
| + | * keine Audioinhalte! | ||
| * Interface: 5-polige Rundbuchse mit 16 Kanälen | * Interface: 5-polige Rundbuchse mit 16 Kanälen | ||
| * Daten | * Daten | ||
| Zeile 578: | Zeile 587: | ||
| * Sustain: Lautstärkepegel, der nach der Decay-Zeit gehalten werden soll | * Sustain: Lautstärkepegel, der nach der Decay-Zeit gehalten werden soll | ||
| * Release: Zeit vom Sustain bis zum Nullpegel (Ausklingzeit) | * Release: Zeit vom Sustain bis zum Nullpegel (Ausklingzeit) | ||
| + | * Mixer: Mischen mehrerer Klangfarben aus der Verarbeitungskette | ||
| * Klangeffekte | * Klangeffekte | ||
| * Audiomaterial muss gekonnt bearbeitet werden (Abmischung, gleichmäßige Abdeckung des Frequenzspektrums, Effekte) | * Audiomaterial muss gekonnt bearbeitet werden (Abmischung, gleichmäßige Abdeckung des Frequenzspektrums, Effekte) | ||
| Zeile 599: | Zeile 609: | ||
| * Nachvertonung: Steinberg Nuendo | * Nachvertonung: Steinberg Nuendo | ||
| * Mastering-Software: Tonstudio im Rechner (Effekte, Mehrkanal, Mischen, Mastering) | * Mastering-Software: Tonstudio im Rechner (Effekte, Mehrkanal, Mischen, Mastering) | ||
| + | |||
| + | === Foto, Video und DTP === | ||
| + | * **Desktop Publishing (DTP)**: Produktion von Druckerzeugnissen (Bücher, Zeitschriften, Flyer etc. vereinen Grafik, Foto und Text) mit Hilfe von Computertechnik | ||
| + | * analoge Kameras | ||
| + | * chemisches Filmmaterial, Entwicklung des Negativs zum Positiv, Kenngröße Lichtempfindlichkeit (ASA) | ||
| + | * Sucherkameras: Sucher getrennt vom Linsensystem -> Parallaxe (Versatz) zwischen Sucher und Optik | ||
| + | * Spiegelreflexkameras: Spiegel leiten die Lichtstrahlen der Optik in den Sucher | ||
| + | * Unterscheidung nach | ||
| + | * Kleinformatkameras (24x36mm, 35mm) | ||
| + | * Mittelformatkameras (5x6cm - 6x9cm) | ||
| + | * Großbildkameras (ab 6x9cmd) | ||
| + | * meist für inszenierte Fotografie | ||
| + | * Objektive: wichtig für Qualität der Bilder und die Bildgestaltung | ||
| + | * Normalwinkelobjektive: Brennweite = Diagonale des Filmmaterials, 50-80mm | ||
| + | * Teleoobjektive: enger Aufnahmewinkel, Makrofotografie, großer Zoom, Brennweite > normal | ||
| + | * Weitwinkelobjektive: großer Aufnahmewinkel, Panoramen, große Objekte bei geringem Abstand, Brennweite < normal | ||
| + | * digitale Fotografie | ||
| + | * hier wird kein chemischer Film belichtet, sondern ein optischer Sensor (CCD Charged Coupled Device oder APS Active Pixel Sensor), Speicherung auf Karten, Kenngröße Anzahl lichtempfindlicher Zellen (Auflösung) | ||
| + | * Qualität ist nicht mehr nur von Film und Objektiv abhängig, sondern auch von Auflösung des Chips | ||
| + | * CCD-Chips sind kleiner als übliche Filme, daher muss die Optik sehr gut sein und darauf angepasst | ||
| + | * Vorteile: direkte Verfügbarkeit des Bildes, geringe Kosten pro Bild | ||
| + | * Belichtung | ||
| + | * Blende: steuert die Lichtmenge, die auf den Film/Chip trifft (Durchmesser des Lichtkreises wird angepasst) | ||
| + | * je größer die Blendenzahl, desto kleiner die Öffnung | ||
| + | * die Blende steuert auch die Tiefenschärfe: wird sie geöffnet, werden die Elemente außerhalb der Schärfenebene unscharf | ||
| + | * Belichtungszeit von 1/2000 Sekunde bis zu mehreren Minuten | ||
| + | * um die optimale Kombination aus Blende und Belichtungszeit zu bestimmen, werden Belichtungsmesser (intern oder extern) verwendet | ||
| + | * Bildbearbeitung | ||
| + | * wichtig im professionellen Bereich | ||
| + | * früher Aufgabe des Retuscheurs | ||
| + | * heute: Photoshop oder The Gimp (nicht im professionellen Bereich) | ||
| + | * Größenumrechnung/Interpolation | ||
| + | * Umrechnung in verschiedene Farbsysteme | ||
| + | * Erstellen von Beschneidungspfaden | ||
| + | * Bearbeiten von Alphakanälen | ||
| + | * mehrere Bildebenen und -masken | ||
| + | * Ebeneneffekte und Bildeffekte durch Filter | ||
| + | * DTP | ||
| + | * vektorbasierte Zeichenprogramme: Adobe Illustrator und Freehand | ||
| + | * "echtes" DTP (Adobe InDesign, Quark XPress) | ||
| + | * professioneller Textsatz (Blocksatz, Silbentrennung, Umfluss) | ||
| + | * freie Definition von Druckbögen | ||
| + | * Anlegen von Musterseiten | ||
| + | * Referenzierung von Bildelementen | ||
| + | * "Verpacken" aller Dateien | ||
| + | * Funktionen für die Druckvorstufe (Farbseperation, Überfüllung, Typographie) | ||
| + | * Arbeitsschritte der Druckvorstufe: DTP -> Reinzeichnung -> Belichtung (4x) -> Druck | ||
| + | * Computeranimation: synthetische Erzeugung von Bildern mit dem Computer | ||
| + | * Anwendungsgebiete: Werbung, Trailer, Spezialeffekte in Filmen, Computerspiele | ||
| + | * Ablauf: Modellierung -> Reflexionsverhalten/Texturierung -> Beleuchtung -> Kameradefinition -> Animation | ||
| + | * Programme sind sehr komplex mit hoher Lernkurve | ||
| + | * Autodesk 3D Studio Max und Maya, Maxon Cinema 4D, Blender | ||
| + | * Körper werden aus Grundkörpern zusammengesetzt, die verformt werden können | ||
| + | * bei Lebewesen bietet sich die Definition eines digitalen Skeletts an -> physikalisch plausible Bewegungen | ||
| + | * Oberflächen können mit Texturen belegt werden und ihre Eigenschaften definiert werden (matt, glänzend, transparent etc.) | ||
| + | * Objekte werden auf einer Bühne positioniert und belichtet (digitale Lichtquellen) | ||
| + | * die Position der Kamera und auch die Blendeneinstellungen (Tiefenschärfe) können dann konfiguriert werden | ||
| + | * Szenen können dann in einer Zeitachse animiert werden | ||
| + | * Videokameras | ||
| + | * professionelle Filmkameras arbeiten auch heute noch analog mit chemischer Belichtung | ||
| + | * Auflösungen: PAL, 720p (1280x720 progressive), 1080i (1920x1080 interlaced) | ||
| + | * Fernseh- und Videokameras arbeiten mit CCD-Chips, können aber die Daten auch analog ausgeben | ||
| + | * günstige Geräte besitzen nur einen Chip, der vor jeder Zelle Filter für Farben hat (1 rot, 1 blau, 2 grün) | ||
| + | * dadurch ist nur ein Viertel der Auflösung des Chips nutzbar -> fehlende Information muss interpoliert werden | ||
| + | * hochwertige Kameras besitzen 3 Chips (einen für jede Grundfarbe) | ||
| + | * {{:se:SchematischerAufbauVideokamera.jpg|}} | ||
| + | * Vorverarbeitung vor dem Ausgang | ||
| + | * Aperturkorrektur: korrigiert Unschärfen durch Tiefpassfilter um Chip vor ultravioletter Strahlung zu schützen | ||
| + | * Gamma-Vorentzerrung: stellt die Kamerakennlinie ein (Verhältnis zwischen durchschnittlicher Grauwertverteilung am CCD und dem Ausgangssignal), Adaption zur Lichtumgebung | ||
| + | * Weißabgleich: Anpassung an die Farbtemperatur (Sonnenlich 5500 Kelvin, Kunstlicht 3200 Kelvin) der Umgebung | ||
| + | * Bildstabilisatoren: unterdrücken Verwackeln des Bildes bei manueller Kameraführung durch Bewegungserkennung anhand markanter Bildpunkte, die Auflösung des CCD muss hierfür größer sein als der aktive Bildausschnitt | ||
| + | * analoge Aufzeichnungsmedien | ||
| + | * Video-8: FBAS, 8mm | ||
| + | * S-VHS und Hi8: S-Video, höhere Qualität als Video-8 | ||
| + | * Betacam SP: 1 Zoll Bandbreite, YUV, qualitativ sehr hochwertig | ||
| + | * digitale Formate | ||
| + | * DV (Konsortium von 60 Herstellern) | ||
| + | * DVCAM (Sony) | ||
| + | * DVCPRO, MiniDV (Standard im digitalen Bereich) | ||
| + | * Digital 8 (Sony) | ||
| + | * Aufzeichnung auf MiniDV-Kassetten (Intraframekompression mit DCT, 25MBit/s) | ||
| + | * HD-Formate | ||
| + | * HDV (Sony und JVC, MPEG2) | ||
| + | * DVCPRO HD (Panasonic, Profisegment) | ||
| + | * AVCHD (Panasonic und Sony, basiert auf AVC aus MPEG4) | ||
| + | * Kameraführung: freihändig, mit Stativ, Steadycam, Kameradolly, Kamerakran | ||
| + | * Videoschnitt | ||
| + | * klassischer Schnitt: Kopien vom Originalnegativ -> physikalisches Schneiden -> Editor Decision List (EDL) -> Kopiermaster (Null-Kopie) | ||
| + | * {{:se:KlassischerFilmschnitt.jpg|}} | ||
| + | * linearer Schnitt: Kopieren des Films auf eine Masterkopie in linearer Reihenfolge | ||
| + | * nicht-linearer Schnitt: Schnittpunkte werden lediglich referenziert (Cue-Points) -> EDL bis zuletzt änderbar | ||
| + | * Onlineschnitt: Schnitt des Orinials | ||
| + | * Offlineschnitt: Schnitt einer Arbeitskopie | ||
| + | * Schnittplatz | ||
| + | * analog: linear offline, mehrere Videor-Player, Video- und Audiomischpult, Effektmodul, Rekorder | ||
| + | * digital: nicht-linear online, Einspielgeräte an Framegrapperhardware (Digitalisierung analoger Signale), Speicherung auf Festplatten, Schnittsoftware | ||
| + | * digitaler Schnitt | ||
| + | * Bereitstellung des Materials: Digitalisieren des benötigten Materials (Bilder, Videos etc.) | ||
| + | * Rohschnitt: grobe Szeneneinteilung | ||
| + | * Komposition: Szenen werden in Zeitleiste montiert, Überblenden und Effekte hinzugefügt | ||
| + | * Feinschnitt: Feinheiten der Blenden und Effekte | ||
| + | * Tonmischung: Originalaufnahmen, Stimmen und Musik werden gemischt | ||
| + | * Produkte: AVID (Hard- und Software), AVID XPress DV, Adobe Premiere, Final Cut Pro | ||
| + | * **Postproduction**: Auf- und Nachbereitung des rohen Film- oder Videomaterials bis zum Master | ||
| + | * heute nicht nur Schnitt, sondern Einfügen von Effekten, Farbkorrekturen, Kontrastanpassungen, Fehlerkorrektur (Kratzer, Verwacklungen), Audio-Postproduction | ||
| + | * Produkte: Apple Shake, Autodesk Combustion, Adobe AfterEffects | ||
| + | * **Compositing**: Zusammenstellung von Bildfragmenten unterschiedlicher Herkunft zu einer Szene (Verschmelzen von Real-, Trick- und Animationsfilmsequenzen) | ||
| + | * in-camera: Komposition beim Dreh (Matt-Painting, Rück-/Vorprojektion) | ||
| + | * Integration mittels Keying: bei Chromakey werden Farben als transparent definiert und Schauspieler werden vor Blue-/Greenscreen gefilmt (Alphakanäle möglich) | ||
| + | |||
| + | ===== Internettechnologien ===== | ||
| + | * Internet | ||
| + | * 1960 ARPA-Net (vernetzte Großerchner von Universitäten) | ||
| + | * 1971 E-Mail | ||
| + | * 1989 WWW durch Tim Berners-Lee am CERN: erster Browser und HTML | ||
| + | * URL und DNS | ||
| + | * IP-Adresse identifiziert einen Netzteilnehmer eindeutig | ||
| + | * Ports unterscheiden mehrere Datenströme eines Clients | ||
| + | * IP + Port = Socket | ||
| + | * URI/URL als Adresse zur Verbindungsherstellung mittels TCP/UDP | ||
| + | * <Schema>://[<Benutzer>[:<Passwort>]@]<Server-ip|Server-dn>[:Port]/[<Pfad>][?<Parameter-id>=<Parameter-Wert>][&<Parameter-id>=<Parameter-Wert>][#<Fragment>] | ||
| + | * DNS bindet IP-Adressen an Namen (Domains) | ||
| + | * [Rechnername][<Subdomain>][Domain][TLD] | ||
| + | * Domains kennzeichnen einen Verbund von Rechnern in einem Netzwerk (logische Einheit) | ||
| + | * Top-Level-Domains: für Länder, Organisationen und Firmen | ||
| + | * DNS-Server sind gekoppelt, damit nicht jeder Server alle IP-Adressen und Namen im Internet kennen muss (Relaying) | ||
| + | * E-Mail: aus der Not zur Kommunikation heraus entstanden (Ray Tomlinson) | ||
| + | * basiert auf drei ASCII-Protokollen | ||
| + | * SMTP (Simple Mail Transfer Protocol, Port 25): Versand und Relay von Mails an MTAs (Mail Transfer Agent) | ||
| + | * POP (Post Office Protocol, Port 110): Abrufen und Entfernen von Nachrichten von einem Server | ||
| + | * IMAP (Internet Message Access Protocol, Port 143): Online-Zugriff auf ein Postfach, Mails verbleiben auf dem Server | ||
| + | * HTTP (Hypertext Transfer Protocol, Port 80) | ||
| + | * textbasiertes Protokoll zur Kommunikation zwischen Webbrowser und Webserver | ||
| + | * GET zur Anfrage einer Seite | ||
| + | * Antwort des Servers in der unterstützten Protokollversion mit Statuscode (200 = OK), Metadaten des Servers und der Seite Response-Header und die Seite im Response-Body, Bilder usw. werden danach übertragen | ||
| + | * HTTP 1.0: seperate Verbindung für jede Ressource, HTTP 1.1: eine Verbindung reicht | ||
| + | * Datenübertragung an den Server: GET (Länge eingeschränkt) und POST (im Request-Body) | ||
| + | * zustandslos -> Sessions (servergespeichert und Cookies) | ||
| + | * WebDAV (Web-based Distributed Authoring and Versioning): Webserver kann auch als Fileserver genutzt werden | ||
| + | * FTP (File Transfer Protocol, Port 21) | ||
| + | * ASCII-basierts Protokoll zum Austausch von Dateien | ||
| + | * unverschlüsselte Übermittlung von Zugangsdaten -> SFTP | ||
| + | * **Hyptertext**: in einem Hypertextsystem werden Dokumente, die Teil der Gesamtinformation sind, in Knoten abgelegt und durch Links miteinander verknüpft -> semantisches Netz | ||
| + | * **XML** enthält, formt, benennt, strukturiert und schützt Informationen | ||
| + | * Markupsprache mit Tags | ||
| + | * Tag + Inhalt = Element | ||
| + | * Vorteile: Textdateien, universell einsetzbar, frei erweiterbar, einfach zu verstehen | ||
| + | * Definition von XML-Strukturen | ||
| + | * Document Type Definition: gut für Elementstrukturen und Attributlisten, aber wenig Möglichkeiten zur Kontrolle des Textinhalts | ||
| + | * Schema: selbst XML-Dateien mit weitreichenden Kontrollmöglichkeiten | ||
| + | * XPath: Abfragesprache für XML ähnlich zu SQL für Datenbanken | ||
| + | * boolesche Ausdrücke, Vergleichsoperationen, numerische Operationen, Stringmanipulation | ||
| + | * XSLT (Extensible Style Language Transformation): Umwandlung von XML in beliebige andere Formate | ||
| + | * Sonderform XSL-FO zur Umwandlung in PDF und Postscript | ||
| + | * Beispiele für definierte Formate: DocBook, RelaxNG, MathML | ||
| + | * HTML ist die Sprache des WWW und definiert sowohl strukturelle als auch gestalterische Elemente zur Erstellung von Internetseiten | ||
| + | * HTML 4.1 lehnt sich nur an XML an, 2001 wurde XHTML spezifiziert, ein valides XML-Format | ||
| + | * gute Webseiten nutzen HTML zur Strukturierung der Inhalte und CSS zur Gestaltung | ||
| + | * CSS ist eine Technik um die Inhalte von XML-Dokumenten grafisch zu gestalten -> Trennung von Inhalt und Layout | ||
| + | * Grundlage: Box-Modell mit Margin, Border und Padding | ||
| + | * Einbindung per STYLE oder in seperaten Dateien | ||
| + | * mittels Selektoren werden Elemente angegeben, die dann über Style-Definitionen formatiert werden sollen | ||
| + | * Elemente können IDs und Klassen zugewiesen bekommen | ||
| + | * kaskadierbar: mehrere CSS-Dateien pro Dokument, spezialisierte Definitionen überschreiben generische Definitionen | ||
| + | * Problem: unterschiedliche Darstellung in den einzelnen Browsern | ||
| + | * JavaScript: Skriptsprache, die in den Quelltext von HTML-Seiten eingebunden werden kann | ||
| + | * Ausführung auf Client-Seite, wird interpretiert, schwache Typisierung, dynamische Bindung, OO-Konzepte, Einsatz meist für EventHandling | ||
| + | * Zugriff auf Funktionen des Webbrowsers, Hilfsobjekte und HTML-Dokument | ||
| + | * kein Zugriff auf Ressourcen des Clients (trotzdem Gefahr durch XSS) | ||
| + | * Adobe Flash | ||
| + | * 1997 von Macromedia veröffentlicht, erstes Programm für vektorbasierte Animationen in Webseiten | ||
| + | * Objekte werden auf einer Bühne platziert und animiert, ActionScript wird für das Scripting verwendet | ||
| + | * ActionScript 2.0 und Flash MX 2004 in 2003 -> OO-Konzepte | ||
| + | * 2005 Übernahme durch Adobe | ||
| + | * Autorenwerkzeug: Zeitleiste, Bühne, Bibliothek (vektorbasierte Objekte, Filme, Bilder etc.) | ||
| + | * wichtigste Objekte: Instanzen der Klasse MovieClip -> Container für beliebige in Flash adressierbare Elemente | ||
| + | * stellen Attribute und Methoden für Skalierung, Manipulation der Zeitleiste, Bewegung usw. möglich sind | ||
| + | * ein Film muss nicht stringent der Zeitleiste folgen, sondern kann durch ActionScript geloopt, gestoppt, fortgesetzt werden | ||
| + | * prinzipiell kann jedes aktive Element ActionScript aufnehmen | ||
| + | * Vorteile von ActionScript 2.0 | ||
| + | * durchgängig objektorientiertes Konzept | ||
| + | * Vererbung, Polymorphismus, Interfaces | ||
| + | * Klassen können in eigenen Klassendateien verwaltet und wiederverwendet werden | ||
| + | * Bibliotheksobjekte lassen sich mit Klassen verknüpfen -> Trennung Design/Code | ||
| + | * Event-Handler Factory-Klassen (MovieLoader) setzen bekannte Patterns der OOP um | ||
| + | * Verbreitungsgrad des Plugins 85%-95% | ||
| + | * "echte" Multimedia-Webseiten können erzeugt werden | ||
| + | * Nachladen von Bildern, Animationen, XML-Anbindung an Middleware, Audioeinbettung | ||
| + | * Flash-Video-Forma FLV ist proprietär und nicht offengelegt, hohe Verbreitung durch YouTube | ||
| + | * 2004 erste Version von Flex als integriertes Werkzeug zur Erstellung von Multimedia-fähigen Oberflächen für Websites | ||
| + | * Flex-Builder: IDE für Multimedia-Frontends (Eclipse-Plugin) | ||
| + | * große Klassenbibliothek für Datenein- und -ausgabe und Layoutgestaltung | ||
| + | * Layout wird mit MXML-Dateien realisiert | ||
| + | * Kommunikation zum Server mittels WebServices | ||
| + | * Flex Data-Services ermöglicht weitere Anbindung über RPC, JMS, EJB und ColdFusion, Java-Anwendung, die z.B. im Tomcat deployt werden kann, sehr teuer | ||
| + | * {{:se:SchichtenAdobeFlex.jpg|}} | ||
| + | * Flash dient zur Erstellung von RIA mit Animation, Sound, Video | ||
| + | * trotz großer Verbreitung geringere Client-Unterstützung als AJAX | ||
| + | |||
| + | ===== Serverseitige Technologien ===== | ||
| + | * CGI (Common Gateway Interface): Mechanismus zum Aufruf externer Programme durch HTML-Seiten | ||
| + | * einfaches Deployment durch interpretierte schwach-typisierte Sprachen: Perl (Practical Extraction and Report Language), PHP, Python, Ruby | ||
| + | * Java | ||
| + | * Entwicklung durch Sun Microsystems mit Ziel der Plattformunabhängigkeit, seit 2007 OpenSource | ||
| + | * Java lehnt sich an C++ an, aber | ||
| + | * keine Mehrfachvererbung | ||
| + | * Garbage-Collector anstatt Destruktoren | ||
| + | * keine Pointer | ||
| + | * Java-Code wird in Bytecode übersetzt, der auf der Laufzeitumgebung (JRE) läuft | ||
| + | * Applets: kleine Java-Applikationen auf dem Webserver, die in der JRE des Clients in einer Sandbox laufen, heute kaum noch relevant | ||
| + | * Servlet-API und JSP | ||
| + | * Servlets verarbeiten HTTP-Requests und -Responses | ||
| + | * JSP vereinfachen die Arbeit mit HTML: hier wird Code in HTML eingebettet | ||
| + | * benötigt Servlet-Container wie Apache Tomcat | ||
| + | * J2EE enthält Komponenten und Bibliotheken um mehrschichtige, datenbank- und transaktionsgestützte Webanwendungen zu entwickeln | ||
| + | * Skalierbarkeit, Performance, Interoperabilität | ||
| + | * benötigt einen Application Server mit den folgenden Komponenten | ||
| + | * EJB: Geschäftslogik (Session-, Entity- und Message-Driven-Beans) | ||
| + | * Servlets / JSP: HTML-Fassade für die Clients | ||
| + | * JSF: baut auf JSP auf und ermöglicht den Einsatz von kompletten Komponenten zur Datenein- und -ausgabe und Navigationsregeln mittels XML, Daten werden von Managed-Beans verwaltet | ||
| + | * JNDI: Schnittstelle für Anwendungen zur Nutzung beliebiger Datencontainer | ||
| + | * JMS: API für asynchrone Nachrichtenverarbeitung | ||
| + | * JDBC: API für relationalen Datenbankzugriff | ||
| + | * JTA: Transaktionsmanagement | ||
| + | * JPA: einfache Erstellung von Entity-Beans und Datenbankanbindung | ||
| + | * Java Mail: Schnittstelle für Mailverarbeitung | ||
| + | * insbesondere bei großen Webapplikationen im Einsatz | ||
| + | * Nachteil ist die starre Vorgabe von Richtlinien für die Beans etc. -> Overhead | ||
| + | * Reaktion von Sun in EJB 3.0 und Java EE 5.0: Annotationen kennzeichnen Klassen (z.B. Persistenz und WebServices) | ||
| + | * Vorteile: Daten sind in der Klasse selbst definiert, Compiler kann Fehler erkennen | ||
| + | * .NET-Framework | ||
| + | * erste Ansätze durch ASP -> Einbettung von VisualBasic in HTML, Auswertung durch IIS | ||
| + | * ASP reichte schnell nicht mehr aus -> .NET-Framework | ||
| + | * Laufzeitumgebung CLR: verschiedene Programmiersprachen möglich (VB, C++, C#), Übersetzung in Intermediate Language (IL), die dann ausgeführt wird | ||
| + | * {{:se:AufbauCLR.jpg|}} | ||
| + | * Common Type System als Datentyp-Grundlage für alle Programmiersprachen | ||
| + | * {{:se:DatentypenCTS.jpg|}} | ||
| + | * Features: Exception-Handling, Garbage-Collector, JIT, Sicherheitsmechanismen, umfangreiche Klassenbibliothek, Reflection, Generics | ||
| + | * Performance liegt zwangsläufig unter nativem Maschinencode | ||
| + | * Einsatz für mehrschichtige Webanwendungen | ||
| + | * ADO.NET für DB-Zugriff, Logik in DLLs, Präsentation durch ASP.NET | ||
| + | * Datenabstraktion durch LINQ | ||
| + | * WPF: Framework für die Erstellung von Anwendungsoberflächen und Darstellung multimedialer Inhalte | ||
| + | * 2D und 3D Rendering Engine | ||
| + | * XAML (Extensible Application Markup Language) zur Beschreibung der Oberflächen -> Trennung Design und Logik | ||
| + | * Silverlight | ||
| + | * Ruby on Rails | ||
| + | * Ruby: schwach typisierte OO-Skriptsprache | ||
| + | * Rails: Webframework | ||
| + | * convention over configuration, don't repeat yourself | ||
| + | * Prinzipien: semantische Dateistruktur, Active Records, Scaffolding, offene Architektur, AJAX integriert | ||
| + | |||
| + | ===== Web 2.0 ===== | ||
| + | * RSS/Atom: XML-Format für Neuigkeiten auf Webseiten | ||
| + | * Schema für XML-Dateien | ||
| + | * Einbindung über LINK in HTML-Seiten | ||
| + | * Podcasts: Neologismus aus iPod und Broadcast | ||
| + | * Basis ist RSS | ||
| + | * MP3s werden per RSS verteilt | ||
| + | * normale Nutzer können "ihr eigenes Radioprogramm erstellen" | ||
| + | * Vorteil: asynchrones Anhören der Inhalte nach Download | ||
| + | * Blogs: Abkürzung für Weblog | ||
| + | * Massenphänomen dank einfacher Software (CMS) | ||
| + | * Wikis | ||
| + | * Benutzer erstellen Inhalte gleichberechtigt | ||
| + | * setzen sich auch in Unternehmen durch (Kundenbindung, Marketing) | ||
| + | * Problem: Qualitätssicherung | ||
| + | * Folksonomy | ||
| + | * AJAX (Asynchronous JavaScript and XML) | ||
| + | * durchbricht das bisherige Paradigma der Webseiten durch dynamisches Laden von Teilbereichen der Seiten | ||
| + | * Kommunikation mit Server über XMLHttpRequest-Objekt | ||
| + | * Beispiele: Google Mail, Yahoo | ||
| + | * Möglichkeiten: Drag-and-Drop, Online-Anwendungen wie Office, Eingabevalidierung on-the-fly | ||
| + | * Benutzer braucht kein Plugin (nur JavaScript) | ||
| + | * Probleme | ||
| + | * Unterstützung durch die verschiedenen Browser (insb. IE) | ||
| + | * Browser-Buttons funktionieren nicht mehr | ||
| + | * Lesezeichen können nicht genutzt werden | ||
| + | * höherer Traffic | ||
| + | * Debugging ist schwierig | ||
| + | * Mashups: Vernetzung von Komponenten verschiedener Herkunft in einem Angebot (Content-Syndication) | ||
| + | * Beispiele: Google Maps, Videoportale, Yahoo Pipes | ||
| + | * Web 2.0: keine Technologie, sondern der Wandel der Rezeption und Produktion multimedialer Inhalte im Internet | ||
| + | * Grenze zwischen Produzent und Konsument weicht auf | ||
| + | * Content wird von den Benutzern erstellt | ||
| + | * Anwendungen verlagern sich auf Webserver | ||
| + | * Probleme: Datenschutz, Sicherheit, Kriminalität, Medienkompetenz ist nötig | ||
| + | |||
| + | ===== Virtual Reality ===== | ||
| + | * dem Benutzer wird ein Modell der Welt dargeboten, das der Benutzer beeinflussen kann | ||
| + | * Kennzeichen | ||
| + | * Interaktivität: Einwirken auf die künstliche Welt | ||
| + | * Gleichzeitigkeit: unmittelbare Reaktion der künstlichen Welt | ||
| + | * Immersion: Verschmelzen mit der künstlichen Welt | ||
| + | * Einsatzgebiete | ||
| + | * Computerspiele | ||
| + | * Medizintechnik | ||
| + | * Produktdesign | ||
| + | * die Immersion erfordert neue Eingabemöglichkeiten (HCI, Human Computer Interface) | ||
| + | * neue physikalische und biologische Sensoren | ||
| + | * Datenhandschuh | ||
| + | * Monitorbrille (Head Mounted Display) | ||
| + | * Lagesensoren | ||
| + | * Tracking-Systeme | ||
| + | * VRML (Virtual Reality Modeling Language) | ||
| + | * 1994 erschienen, 1996 kam Version 2 und VRML Konsortium wurde gegründet | ||
| + | * ASCII-basierte Sprache zur Beschreibung von 3D-Objekten | ||
| + | * wird vom Browser interpretiert | ||
| + | * plattformunabhängig | ||
| + | * kann Animationen, Videos, Bilder, Klänge beinhalten | ||
| + | * ermöglicht Benutzerinteraktion | ||
| + | * Probleme: Browserkompatibilität, langsam | ||
| + | * Beschreibung der virtuellen Welt durch einen Szenegraph in Baumstruktur mit verschiedenen Knotentypen | ||
| + | * Geometrikknoten für geometrische Formen | ||
| + | * Interpolatoren für zeitliche Veränderungen | ||
| + | * Sensoren generieren benutzer- oder zeitgesteuert Ereignisse | ||
| + | * Umgebungsknoten für Lichtquellen, Audio etc. | ||
| + | * Ansichtknoten für Navigations- und Kamerainformationen | ||
| + | * Scriptknoten steuern Ereignisse per JavaScript | ||
| + | * Unterschied zu 3D-Programmen: VRML wird nicht gerendert, sondern zur Laufzeit dargestellt | ||
| + | * 2003 wurde X3D eingeführt, das VRML in ein XML-Format überführt | ||
| ===== Links ===== | ===== Links ===== | ||
| Zeile 608: | Zeile 939: | ||
| * LZW und Huffman im Baum durchspielen | * LZW und Huffman im Baum durchspielen | ||
| * logarithmische und 3-Step-Suche am Beispiel durchführen | * logarithmische und 3-Step-Suche am Beispiel durchführen | ||
| + | * Unterschiede zwischen wichtigen Themen herausarbeiten | ||
| + | * Flash und ActionScript anschauen | ||
| ===== Klausur ===== | ===== Klausur ===== | ||
se/multimedia.txt · Zuletzt geändert: 2014-04-05 11:42 (Externe Bearbeitung)
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Noncommercial-Share Alike 4.0 International
