Web Engineering Web Engineering

Transcription

MIME Content Types
Web Engineering
Basistypen
Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt
Universität Karlsruhe
Fakultät für Informatik
Institut für Telematik
Text, Audio, Video, Image
Multipart (mehrere Bodyparts)
Message (ganze Nachricht)
Model (multidimensionale Objekte, z.B. für Virtual Reality)
Application (anwendungsspezifische Content Types)
x- für privat definierte Typen
Subtypen
Basis- und Subtyp zusammen legen Medientyp fest
z.B. Subtypen von Image: gif, jpeg
x- für privat definierte Subtypen
Wintersemester 1999/2000
Parameter
je nach Typ, z.B. name, boundary, ...
Prof. Dr. Dr. h.c. mult. Gehard Krüger, Albrecht Schmidt: Web Engineering, WS99/00
Seite 1
Seite 3
Multipurpose Internet Mail Extension
Syntax
content := "Content-Type" ":" type "/" subtype *(";" parameter) ;
type := discrete-type / composite-type
Web Engineering
discrete-type := "text" / "image" / "audio" / "video" /
"application" / extension-token
composite-type := "message" / "multipart" / extension-token
Kapitel 3: Das Web als Informationssystem
Matching of media type and subtype ; is ALWAYS case-insensitive.
Multipart Media Type
Mixed Subtype
Alternative Subtype
Parallel Subtype
Seite 2
Seite 4
MIME WWW Beispiel – Mixed I
(nicht alle Browser...)
Body
part 1
Hier steht Text!
...
--3323672676D5
Content-type: image/gif; name="sonne.gif"
Leer
zeile
GIF89a
...
--3323672676D5
Content-type: audio/wav; name="intro.wav"
Content-transfer-encoding: base64
...
--3323672676D5
Epilog. Wird ignoriert...
Seite 5
Body
part 2
Body
part 1
Kopf
MIME Mail Beispiel - Alternative
Body
part 3
Kopf
From: [email protected]
To: [email protected]
Subject: Test Mime
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="--3323672676D5"
Präamble. Wird ignoriert...
--3323672676D5
Content-type: text/plain; charset=us-ascii
Content-transfer-encoding: 8bit
Body
part 2
Body
part 3
Body
part 2
Body
part 1
Kopf
MIME Mail Beispiel - Mixed
From: [email protected]
To: [email protected]
Subject: Test Mime
MIME-Version: 1.0
Content-type: multipart/alternative; boundary="--3672676D5"
--3672676D5
Content-type: text/plain; charset=us-ascii
Content-transfer-encoding: 8bit
...
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="--3672676D5"
Sorry – dieser Browser versteht MIME-Multipart nicht...
--3672676D5
Content-type: application/postscript; name="text.ps"
%!PS-Adobe-3.0
%%Title: (text.dvi)
...
--3672676D5
Content-type: text/html
<html>...
Im neuen Fenster sehen sie unseren Vorschlag im Detail...
</html>
--3672676D5
Seite 7
MIME WWW Beispiel – Mixed II
(nicht alle Browser...)
Hier steht Text!
...
--3672676D5
Content-type: text/html
<html> ... Hier steht Text! </html>
...
--3672676D5
Content-type: application/postscript; name="text.ps"
%!PS-Adobe-3.0
%%Title: (text.dvi)...
--3672676D5
Epilog. Wird ignoriert...
Seite 6
Seite 8
Body
part 2
Zeit
Body
part 1
Kopf
MIME Mail Beispiel – x-mixed-replace
nur Netscape – Server push
...
MIME-Version: 1.0
Content-type: multipart/x-mixed-replace; boundary="--2676D5"
--2676D5
Content-type: image/gif
GIF89a...
...
--2676D5
Content-type: image/gif
GIF89a...
...
--2676D5
...
fax
doc
ppt
pdf
ai eps ps
dvi
latex
exe bat com
sh
zip
au snd
aif aiff aifc
wav
image/gif
image/jpeg
multipart/mixed
text/html
text/plain
video/mpeg
video/quicktime
video/x-msvideo
x-world/x-vrml
...
gif
jpeg jpg jpe
html htm
txt
mpeg mpg
qt mov
avi
wrl
Seite 11
Medientyp Hypertext: HTML-Dokumente
Abbildung von Fileextensions auf MIME Typen
(auf dem Server)
foo.ps
application/hylafax
application/msword
application/mspowerpoint
application/pdf
application/postscript
application/x-dvi
application/x-latex
application/msdownload
application/x-sh
application/zip
audio/basic
audio/x-aiff
audio/x-wav
Seite 9
MIME Erweiterungen
MIME Content Types - Beispiele
Head
mit Meta-Information
Body
Text mit Markup für Formatierung und Hypertext-Konzepte
Abbildung von MIME Typen auf Applikationen
(im Browser)
zum Anhängen von Links und Ankern an Textfragmente
für inline-Grafiken
Einbettung interaktiver Komponenten
ghostview
Markup-Tags
Seite 10
mehr zu HTML später
Seite 12
Beispiel – Farbtiefe: 1 Bit
Medientyp Bild I
Original (24 Bit, 16 Mio. Farben)
Seite 13
Seite 15
Medientyp Bild II
Schwarzweiß
Photo, Gemälde, Zeichnung, Strichzeichnung,
Diagramm, Landkarten, ...
Farbtiefe: Schwarzweiß, ..., Farbe
1, 2, 4, 8, 16, 24, 32 Bit
Größe: Plakat, ..., Icon
Bitmap - Pixel (einfach, groß, Zoomproblem)
Vektor (flexible, komplex)
Alpha (Transparenz)
Gamma (~Helligkeit)
Formate und Standards? – Viele!
Siehe: http://www.teco.edu/lehre/webe/beispiele.html
Seite 14
4 Farben
Seite 16
16 Farben
Seite 17
256 Graustufen
Seite 19
Medientyp Bild: image/gif
Graphics Interchange Format, GIF [Compuserve 1987]
GIF87a, GIF89a
maximal 256 Farben, 8Bit
verlustfreie Kompression
Kompressionsalgorithmus LZW (Lempel-Zev-Welch)
Gruppen von Pixeln werden kodiert
Patentiert von Unisys
Animationen
Transparenz
Interlacing
sehr breite Unterstützung
Einflußgrößen für die Dateigröße
Bildgröße
Farbtiefe
Dithering i.a. schlechtere Kompression
256 Farben
Seite 18
Seite 20
GIF – Interlacing I
Image Interlacing
GIF – Transparenz I
Eine Farbe wird als transparent gekennzeichnet
eindimensional kodiert in vier Stufen
12,5% der Daten erstes grobes Bild (mosaikartig)
25%, 50% Verbesserung der Qualität
100% gesamtes Bild
Vorteil
Text-Text-Text
Text-Text-Text
Text-Text-Text
Text-Text-Text
Text-Text-Text
Text-Text-Text
Minimal größere Bilder
Nicht sinnvoll für Icons
Seite 21
GIF – Interlacing II
Problem
Schatten an den Bildrändern (durch anti-aliased Funktion)
Nachteil
Vorteil
Wird der Hintergrund gewechselt ist das Bild trotzdem
transparent
Bild ist früher erkennbar
Bild Transparenz
Seite 23
GIF – Transparenz II
Seite 22
Seite 24
Verwendung von GIF
Bei folgenden Anforderungen:
Beispiel – JPG Kompression I
wenig Farben
kleine Bilder
Striche/Kanten
Transparenz
einfache Animationen
Anwendung, z.B.
Diagramme
Formulare
Icons, Banner
Text
Comics
Zeichnungen
Original (24 Bit, 16 Mio. Farben, Q=0,
521 KB raw, 165 KB jpg)
Seite 25
Seite 27
Beispiel – JPG Kompression II
Medientyp image/jpg
Komprimiert, Q=10, 56 KB
Joint Photographic Experts Group, (sprich „je-peg“)
[ISO 1993]
16,7 Mio. Farben, 24 Bit
JPG Kompression
Basiert auf Frequenz
8x8 Pixel Basisblöcke
64 Werte als diskretes Signal, Transformation ins Spektrum
Indexverschiebung, DCT, Quantisierung, Arithmetische/Huffman
JPEG File Interchange Format, JFIF
Vorschaubilder (Thumbnails)
Progressive JPG Interlacing
Einflußgrößen für die Dateigröße
Bildgröße
Bilddetails
Kompressionsfaktor
Vorverarbeitung: z.B. Gaußsche Unschärfe, Weichzeichnen
Seite 26
Seite 28
Beispiel – JPG Kompression III
Seite 29
Beispiel – JPG Kompression IV
Seite 30
Seite 31
Beispiel – JPG Kompression VI
Beispiel – JPG Kompression V
Seite 32
Beispiel – JPG Kompression VII
Verwendung von JPG
Bei folgenden Anforderungen:
viele Farben
große Bilder
weiche Übergänge
kleine Dateien (langsame Übertragung)
Anwendung, z.B.
Photos
Farbe
Graustufen
Gemälde
Seite 33
Beispiel – JPG Kompression VIII
Vergleich GIF - JPEG bei Fotos
JPG, Komprimiert, Q=30, 31 KB
Seite 34
Seite 35
GIF, 256 Farben, 170 KB
Seite 36
Portable Network Graphics PNG I
Vergleich GIF - JPEG bei Graphik
PNG (sprich „Ping“) [RFC 2083]
GIF, 6 KByte
2 Farben
1-, 2-, 4-, 8-Bit Palette (wie GIF)
1-, 2-, 4-, 8-, 16-Bit Graustufen
8 oder 16 Bit pro Farbe (24 und 48-Bit True-Color)
8-Bit oder 16-Bit Alphakanal, skalierbare Transparenz
2-dimensionales, 7-stufiges Interlacing
Unterstützung von Gamma-Korrektur (Helligkeit)
Verlustfreie Kompression
Filter
Patentfreier Algorithmus
i.a. bessere Kompressionsrate als GIF (ca. 5-25%)
Mechanismen zur Überprüfung der Dateiintegrität,
93 KByte
nicht komprimiert
Magic Signature (CR, LF)
CRC (auf komprimierte Teile)
Adler-32 Checksumme (gesamte unkomprimierte Datenstrom)
Möglichkeit Text (Stichworte, Copyright) einzubetten
Keine Animationen (siehe MNG)
Seite 37
JPEG - Skalierung der Kompression
Seite 39
Portable Network Graphics PNG II
Unterstützung?
Referenzimplementierung im Source Code (libpng, zlib)
sehr viele Grafikprogramme
Noch nicht alle Browser!
Alphakanal meist noch nicht oder nur mit Schwellwert implementiert
Gamma-Korrektur nur sehr bedingt
Anwendung?
„Das bessere GIF“ (vorausgesetzt Browserunterstützung)
Transparente True-Color Bilder
In der Bildbearbeitung: Ersatz für TIFF
JPG, 19 KByte
komprimiert
JPG, 9 KByte
komprimiert
JPG, 7 KByte
komprimiert
http://www.cdrom.com/pub/png/
http://www.w3.org/Graphics/PNG
Seite 38
Seite 40
Beispiel - PNG Interlacing
Vektorformate - Motivation
7 Stufen
Bereits mit 1/64 der Daten ist ein Bild zu
sehen (8x8 Pixel Blöcke)
2 Dimension
Probleme bei Bitmaps
Größe, Auflösung, Zoom
Editierbarkeit, keine Objekte
Keine Information über den Inhalt
Anforderungen (Auszug)
beliebige Zoomstufen
Bildschirm vs. Drucker
Objekte anpassen, Stylesheets, z.B.
http://www.teco.edu/lehre/webe/beispiele/media/interlaced-seq.html
kleine Dateien
Text in Grafiken in Arial
Hintergrund blau
Seite 41
Pixel vs. Beschreibung
Seite 43
Vektorformate - SVG
Beispiele auf der Vorlesungswebseite
SVG (Scalable Vector Graphics)
http://www.teco.uni-karlsruhe.de/lehre/webe/beispiele.html
Vektorformat auf XML Basis
offener Standard, w3c
Unterstützung von CSS
Transparenz
Animationen
Interaktion (event-handling)
Scripting
Metadaten
Unterstützung?
Graphikprogramme, z.B. Corel-Draw (Beta)
Diverse Viewer, Plug-Ins
http://www.w3.org/Graphics/SVG/
Seite 42
Seite 44
Vektorformate - WebCGM
Audio - Formate
WebCGM (Vector Graphics for the Web)
Microsoft
Verschiedene Sampling Raten und Bit-Depth
Computer Graphics Metafiles (CGMs), 2D Graphics
[ISO/IEC8632:1992]
Technische Zeichnungen und Dokumentation
Visualisierung geographischer und physikalische Daten
offener Standard, CGM Open Consortium zusammen mit W3C
Metadaten, z.B.
Hyperlinks und Navigation
Bildstruktur und Layers
Suchanfragen auf den Bildinhalt
µ-Law (.au)
Unix Sound Standard
Verschiedene Sampling Raten und Bit-Depth
MPEG-2, Compression Layer II, III (.mp2, .mp3, .mpa)
verlustbehaftete Kompression, typ. 1:10
Midi (.mid)
Unterstützung?
http://www.w3.org/Graphics/WebCGM/
http://www.cgmopen.org/
Wave (.wav)
Seite 45
Abtastrate (Sampling Rate)
lange Wartezeiten
Bit-Tiefe (Bit Depth)
Kanäle (Channels)
1 Mono
2 Stereo
3, 4, 6, ... (Surround Sound)
Kompression (Compression) – schwieriger als Bilder
Z.B. mp3
sehr große Datenmenge
1 Minute ~ 10MB raw (44,1kHz * 2 Byte * 60 s * 2)
(Freq * Bit-Tiefe * Zeit * Kanäle)
8 kHz (~ Mittelwelle Radio, Telefon)
11.025 kHz
22.05 kHz
44.1 kHz (CD-Qualität)
48 kHz
8 Bit
16 Bit (CD-Qualität)
Seite 47
Audio – Empfang, Abspielen
Audio - Grundbegriffe
Musical Instrument Digital Interface
Keine Audiodaten!
Daten beschreiben wie die Musik erzeugt wird
kleine Dateien (typ. 1000x kleiner als Wave)
Seite 46
Optimieren der Dateigröße
Länge des Audio-Clips
Anzahl der Kanäle
Bit-Tiefe
Abtastrate
Abspielen während des Empfangs, Pufferung
Streaming Formate
Alternative Formate, z.B. RealAudio, QicktimeAudio
Seite 48
Streaming, z.B. RealAudio
Systemansätze
Link:
<A HREF="musik.ram">
Hier gibt es Livemusik!</a>
Zusammenfassung
Sammlungen
SMIL –Auswahl der Bandbreite
Synchronized Multimedia Integration Language
Metafile: musik.ram
pnm://129.13.170.22/live/musik.ra
Kataloge
Bibliotheken
Datenübertragung
UDP
Back-Channel, Skalierung
<smil>
<body>
<switch>
<ref src=“myclipcm.rm” system-bitrate=”220000”/>
<ref src=“myclip56.rm” system-bitrate=”32000”/>
<ref src=“myclip28.rm” system-bitrate=”20000”/>
</switch>
</body>
</smil>
Indizierung
Inhaltliche Verknüpfung
Hypertext
Seite 49
Kapitelübersicht
Seite 51
Sammlungen (Collections)
1. Einleitung
2. Informationsmedien
ungeordnete Menge
implizit Klassifizierung nach Kriterien des Sammlers
Motivation
3. Informationsorganisation
Systemansätze
Informationsstrukturen
Hypertext
Informationsorganisation im Web
vollständige oder repräsentative Erfassung einer begrenzten
Domäne (im weitesten Sinne)
4. Informationsbeschreibung
5. Informationszugang / Navigation
Seite 50
Seite 52
Indizierung, Katalogisierung
indizierte Information
explizite Klassifizierung nach Schlüsselbegriffen
Motivation
Inhaltliche Verknüpfung
inhaltliche Beziehungen zwischen
Informationseinheiten nutzen
direkte Assoziierung statt mittelbarer Assoziierung
über Klassenzugehörigkeit (gemeinsame Schlüssel)
„wie Menschen Denken“
Einordnung von Information über viele/alle Domänen hinweg
Beispiele.
Enzyklopädie
The Library of Congress Classification System
http://lcweb.loc.gov/catdir/cpso/lcco/lcco.html
The ACM Computing Classification System
http://www.acm.org/class/1998/
Seite 53
LIBRARY OF CONGRESS
CLASSIFICATION OUTLINE
A -- GENERAL WORKS
B -- PHILOSOPHY.
PSYCHOLOGY. RELIGION
C -- AUXILIARY SCIENCES OF
HISTORY
D -- HISTORY: GENERAL AND
OLD WORLD
E -- HISTORY: AMERICA
F -- HISTORY: AMERICA
G -- GEOGRAPHY.
ANTHROPOLOGY.
RECREATION
H -- SOCIAL SCIENCES
J -- POLITICAL SCIENCE
K -- LAW
Informationsstrukturen
L -- EDUCATION
M -- MUSIC AND BOOKS ON
MUSIC
N -- FINE ARTS
P -- LANGUAGE AND
LITERATURE
Q -- SCIENCE
R -- MEDICINE
S -- AGRICULTURE
T -- TECHNOLOGY
U -- MILITARY SCIENCE
V -- NAVAL SCIENCE
Z -- LIBRARY SCIENCE
Seite 55
Seite 54
Linear
Hierarchie
Gitter
Vernetzung
Seite 56
lineare Informationsstrukturen I
rein linear
Strikte Führung des Nutzers
Precaching möglich
lineare Informationsstrukturen III
linear mit Optionen
Führung des Nutzers
unterschiedliche Detaillierung
Entscheidungen / Interaktivität
Szenarien mit unterschiedlichen Nutzerprofilen
Seite 57
lineare Informationsstrukturen II
linear mit Alternativen
Führung des Nutzers
Entscheidungen
/ Interaktivität
Abfrage-Szenarien
lineare Informationsstrukturen IV
linear mit Seitenzweigen
Zusatzinformation auf den Seitenpfaden
geführter Hauptpfad
Seite 58
Seite 59
Seite 60
Beispiel
gitterförmige Informationsstrukturen
ringförmige Informationsstrukturen
geschlossener geführter Pfad
Varianten mit Seitenpfaden
Einstieg
Katalog
M4
M6
M8
Muttern
M4
M6
M8
Scheiben
4mm
6mm
8mm
entlehnt für Web Ringe
Seite 61
gitterförmige Informationsstrukturen
tiefe Hierarchie
fokussiert den Nutzer
Anordnung nach
zwei orthogonalen Kriterien
Seite 63
hierarchische Informationsstrukturen
Schrauben
flache Hierarchie
Nachschlage-Charakter (A-Z)
6-10 ist sinnvolle Obergrenze
(Kognitionspsychologie)
Nutzer haben „Raumgefühl“
Anwendung:
z.B. als Produktkatalog
Seite 62
Seite 64
vernetzte Informationsstrukturen
pure Webs
Informationsorganisation im Web
Basis: offenes Hypertext-System
Information in allen Variaten organisiert
teilweise echter Hypertext mit inhaltlichen Links
teilweise indizierte Dokumente in Katalogen
teilweise einfache Sammlungen von Ressourcen
vor allem Mischformen aus linear und hierarchisch
Hypertext-Links oft nicht assoziativ,
sondern zur linear-hierarchischen Verknüpfung
schlechte Orientierung
sehr expressiv
Seite 65
Information Mapping
Information Mapping
Abbildung von Information auf (abstrakte) Struktur
Abbildung der Struktur auf Web Seiten
Trade Offs
Ausdrucksvielfalt versus feste Struktur
Führung versus möglicher Konfusion
Ausdrucksvielfalt
pures Web
Gitter
Hierarchie
feste Struktur
linear
Führung
Information sehr unterschiedlich strukturiert
ohne Führung
Seite 66
previous/next
up/down/home
Seite 67

Web Engineering Web Engineering

Transcription

Similar documents

"B" und

Skript Grundwissen Blütensträucher

Graphenalgorithmen und lineare Algebra Hand in Hand

festival trüffel - Elena Chekanova

built to last!

Henne strand-tema - Henne strand Feriecenter

Ipswitch WS_FTP Professional Getting Started Guide

Machinima - Game Engines und die

Entwicklung eines energiesparsamen Signalisierungssystems für

Security Guide - Ipswitch Documentation Server

Jazz im Pferdestall 2016

Ficus