Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
se:multimedia [2009-03-23 12:40] stefan |
se:multimedia [2009-03-24 09:20] 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 | ||
+ | |||
+ | ==== Alte Klausur ==== | ||
+ | * Definitionen: GOP, XML, XSLT | ||
+ | * Huffman und LZW anwenden | ||
+ | * Vorteile des AVC | ||
+ | * ActionScript-Ausschnitte erklären | ||
+ | * JPEG erklären | ||
+ | * Unterschied AJAX / Servlet/Applet | ||
+ | * CSS Box Model | ||
+ | * Shannon-Nyquist-Theorem anwenden | ||
===== Klausur ===== | ===== Klausur ===== |