Web - Lehrstuhl für Informatik 8 (Theoretische Informatik)

Multimedia und das Web 

Zugreifbare Inhalte 

Gestaltung einer Website/Webdesign 

Web (Site) Engineering (WebSE) 

Vorlesung 5: Gestaltung von Inhalten 

P. Reiß, B. Schiemann 

Lehrstuhl für Informatik 8 

Universität Erlangen-Nürnberg 

14. 11. 2006 

B. Schiemann, P. Reiß Web (Site) Engineering (WebSE)




Übersicht 

1 Multimedia und das Web 

SVG 

SMIL 

2 Zugreifbare Inhalte 

3 Gestaltung einer Website/Webdesign 

Graphikformate 





Multimedia für das Web 

SVG 

SMIL 

Multimedia: viele „Informations“-Medien 

Text, Bild, Grafik, Animation, Ton und Video 

Multimedia benötigt: 

Clientprogramm (meistens Renderer) 

Hohe Datenmenge 

Hohen Datendurchsatz 

Evtl. Zusatzhardware (Lautsprecher) 


Datenmengen 




SVG 

SMIL 

Bilder: 1024Pixel ∗ 768Pixel ∗ 24Bit = ca. 2,25MB 

Sound: 128kbit/s ∗ 3min = ca. 2,8MB 

Video: 80MBit/s ∗ 90min = ca. 52,7GB 

Animation: FlashMX Beispiel ca. 200KB 

Probleme: 

1 Klassische n-Client–1-Server Architektur Grund für n 

Übertragungen 

2 Synchrone vs. asynchrone Anzeige/Übertragung 

Lösung: Kompression (neue Probleme) 


Clientprogramme 




SVG 

SMIL 

Kein Browser verarbeitet alle Multimediadaten selbst! 

Zusatzprogramme in oder ausserhalb Websites gerendert 

(Youtube,...) 

Bildformate teilweise in Browsern (JPEG-2000?) 

Clientprogramme/Medienabspieler unterstützen: 

Codecs (Dekodierung) 

Streams/Buffering 

HTTP zwecks Vermittlung 

Praktikabelste Lösung (derzeit): Flash-Codierung 

1 Hohe Verbreitung des Players als Plugin 

2 Aber: Proprietäres Dateiformat 





SVG 

SMIL 

Scalable Vector Graphics [JFJ03] 

2-dimensionale Vektor-Grafiken in XML 

Bisher im Web: Bitmaps wie JPG, GIF, PNG 

Problem: mehr Qualität, mehr Bits 

Vektorgrafiken im Allgemeinen: Qualitätserhaltende Zooms 

XML gut komprimierbar! 

SVG: Scriptfähig, Animationsmodell, Canvas 

Plugins von Adobe, Corel für MSIE 

Firefox: Nativ, aber noch nicht alles implementiert (Scripts!) 

[Com05] 





SVG Beispiel [MES05] I 

SVG 

SMIL 

 

< !DOCTYPE svg PUBLIC " −//W3C/ / DTD SVG 1 . 0 / /EN" 

" w3c /TR/2001/REC−SVG−20010904/DTD/ svg10 . dtd " > 

 

 

< t i t l e >Supply Chain< / t i t l e > 

< !−− Agenteneintrag 1 −−> 

 

 





SVG Beispiel [MES05] II 

SVG 

SMIL 

< c i r c l e class=" prod " cx= " 200 " cy= " 300 " 

f i l l = " red " i d = "k_CS" r = " 16 " / > 

< r e c t class=" da " h e i g h t = " 4 " 

i d = " disc@fau:1104 / JADE" rx="2" ry=" 2 " 

width= " 16 " x= " 192 " y= " 289 " / > 

< / a> 

< / g> . . . 

< / svg> 


SMIL 




SVG 

SMIL 

Synchronized Multimedia Integration Language ([A + 05], 

[Ram05]) 

Sprache zur Auszeichnung und Organisation von MM 

Synchronisation für u.a. SVG 

Video in verschiedensten Formaten 

Zusammenführen von Text, Audio, Video 

Renderer: nur Helix 

Serverseitig scriptfähig 


SMIL Beispiel I 




SVG 

SMIL 

< s mil 

xmlns= " h t t p : / /www. w3 . org /2001/ SMIL20 / Language " > 

 

< l a y o u t > 

 

 

 

 

< / l a y o u t > 

< / head> 

 


SMIL Beispiel II 




SVG 

SMIL 

 

 

< t e x t src="mm4e. de / i n t r o . r t " region=" text_0 " 

begin= " 2.00 s " / > 

 

< / par> 

. . . 

< / seq>< / par> 

< / body> 

< / s mil> 





Internet und Barrieren? 

Grundgedanke: Austausch/Verständnis von Informationen 

Barriere bedeutet: Benutzer wird am Austausch gehindert 

Seltsam gestaltete Inhalte erzeugen auch bei Menschen 

ohne Behinderung Verständnisprobleme 

Zusatzgeräte für z.B. Blinde (Braille oder Screenreader) 

Aspekte bei der Gestaltung berücksichtigen 

→ W3C: Web Content Accessibility Guidelines [BCV06] 

2.0 ist momentan Working Draft 





WCAG 2.0 Guidelines 

Prizipien u. dazugehörige Richtlinien 

Richtlinien mit jeweils drei Stufen: 

Minimale, erweiterte u. zusätzliche Zugangsqualität 

Prinzipien: 

1 Inhalte müssen wahrnehmbar sein 

2 Schnittstellenkomponenten im Inhalt müssen verarbeitbar 

sein 

3 Bedienelemente und Inhalte müssen verstehbar sein 

4 Robustheit gegenüber „user agents“ (Clientprogramme, 

akutell und in Zukunft) 





Inhalte müssen wahrnehmbar sein 

Vier Richtlinien: 

Textalternativen für Nicht-Text-Inhalte 

Synchronisierte Alternativen für Multimedia verfügbar 

halten 

Untertitel (bei live nicht so streng) 

Struktur und Information muss trennbar sein 

„Vordergrundinformationen“ von Hintergrundinformationen 

trennbar 

Kontraste verschärfen (Leuchtstärke 5:1 bzw. 10:1, Audio: 

20dB, Level 3) 





Schnittstellenkomponenten im Inhalt verarbeitbar 

Fünf Richtlinien: 

Alle Funktionen sollen durch die Tastatur ansprechbar sein 

Benutzer hat Zeitkontrolle beim Lesen oder Interagieren 

Benutzer sollen Inhalte vermeiden können, die epileptische 

Anfälle auslösen 

Mechanismen zum Auffinden, Navigieren und Orientieren 

von/im Inhalt 

Vermeiden von Bedienfehlern und falls diese auftreten 

Korrekturmöglichkeiten 





Bedienelemente und Inhalte verstehbar 

Zwei Richtlinien 

Textinhalte sollen lesbar und verstehbar sein 

Sprache muss zur automatischen Verarbeitung 

gekennzeichnet sein 

Abschnittsweise oder phrasenweise Kennzeichnung 

Slang/Jargon/Fränkisch extra kennzeichnen (z.B. Glossar) 

Ort und Funktionalität der Inhalte müssen vorhersagbar 

sein 

Kontextwechsel beschränken (auf Benutzerwunsch) 





Robustheit gegenüber „user agents“ 

Zwei Richtlinien: 

Kompatibilität zwischen den Inhalten und den aktuellen 

und zukünftigen Clientprogrammen (samt 

Assistenzprogrammen) 

Standards streng einhalten 

Inhalte müssen zugreifbar sein oder eine zugreifbare 

Alternative besitzen 

Wenn also Inhalte über die Tastatur eingegeben werden 

können, müssen sie auch über die Tastatur löschbar sein 

Alternativen von möglichst gleichen URI 





Bestandteile einer Site 


1 Einstiegsseite 

Geringe Ladezeit 

Übersichtliches Layout 

Attraktives Aussehen 

2 Zentralseite 

Einheitliche Navigation 

Wiedererkennungswert (z.B. durch „Metapher“) 

Corporate Identity (z.B. durch Logo an prominenter Stelle) 

3 Definierter Ausgang 

(Erhebung von Kundendaten, Feedback) 





Bestandteile einer Seite 


Titelzeile (wichtig u. a. für Bookmarking) 

Kopf (Header): Übersicht 

Körper (Body): Inhalt 

Fuß (Footer): Allgemeine Information 

Datum der letzten Änderung und/oder der Erstellung 

(Aktualität) 

Autor oder verantwortliche Person, Email-Adresse oder 

Homepage (Seriosität, Service) 

Link zur Homepage (Teil der Navigation) 

URL der Seite (Papierausdruck, Referenz) 

Navigation (Redundanz schadet hier nicht!) 


Text 





Alignment und Grid machen die Seite lesbarer 

Information in kleine, logisch abgeschlossene Teile 

aufteilen 

Textabschnitte kurz halten 

Aufzählungen verwenden 

Typographische Prinzipien verwenden (von der 

Papierdokument-Erstellung abgeleitet) 

Wenige verschiedene Fonts 

Gebräuchliche Fonts verwenden 

Leerräume als wichtiges Gestaltungsmerkmal 


Text II 





Hervorhebungen 

Leiten des Users, aber: Gefahr der Verwirrung 

Konsistenz in Farbe, Font, Hintergrund 

Sparsame Verwendung 

Farbliche Hervorhebung wichtiger Dokumentteile 

Vermeiden von 

Blinkendem Text 

Javascript-Alerts 

Großen Bannern 


Darstellung 





Papier vs. Bildschirm 

Ermöglichen des Ausdrucks 

Zehnfach bessere Auflösung auf Papier (!) 

Ausdrucken von Seiten zur Offline-Benutzung 

Unterschiedliche Art, auf Papier und im Netz zu lesen 

(Scanning) 

Unterschiedliche Bildschirme (Auflösung, Farbe) und 

Browser 


Navigation 





Voraussetzung: Orientierung, Lokalisation 

Interaktion mit dem Benutzer 

Intention 

Einfach 

Schnell zum Ziel (keine Verwirrung) 

Navigation oft zu kompliziert 

Einsatz von Navigationslinks 

Jeder Link muss sinnvoll sein 

Verwendung aussagekräftiger Linktitel 

Schnell auf den Punkt kommen 

Site Map als letzte Chance! 


Navigation II 





Ordnung (Hierarchie) der Site erkennen lassen 

Keine kryptischen Navigationspfeile 

An Standards halten 

Unterscheidbar 

Einheitlich 

Navigationslinks zu 

Homepage 

Übergeordneten Seiten 

Kontakt 

Navigationshilfen 

Nicht mehr Skripting als nötig (Image Maps)! 





Layout und Struktur 


Sinn von Layout 

Konsistenz erhalten 

Vertrautheit schaffen 

Vermittlung von Inhalten unterstützen 

Layout-Regeln 

Seitengröße dem Browserfenster anpassen (Scrolling 

vermeiden) 

Links müssen über Farben erkennbar sein 

Konsistentes Layout gewährleisten 





Farbe und Graphik 


Farbe 

Farben haben Bedeutung/tragen Emotionen 

Farben müssen zusammenpassen 

Farbtiefe! 

Graphik 

Balance zwischen Bild und Text 

Dateigrößen beachten! 






Graphic Interchange Format (GIF) 

Erstes Graphikformat der Webbrowser 

8 Bit Farbtiefe, 256 Farben 

Verlustfreie Komprimierung 

Animationen möglich 

Von allen Browsern (auch alten!) unterstützt 

Transparenzen 

Geeignet für Bilder mit wenigen Farben, große Farbflächen 

Nicht geeignet für Fotos 


JPEG 





„Joint Photographic Experts Group“ 

24 Bit RGB Farben 

Verlustbehaftete Komprimierung 

Komprimierungsrate einstellbar 

Progressive JPEGs: Bilder bauen sich auf, werden 

dataillierter 

Geeignet für Fotos, Bilder mit Farbübergängen 

Nicht geeignet für Bilder mit wenigen, einheitlichen 

Farbflächen 






Portable Network Graphic (PNG) 

Lizenzkostenfrei 

Verlustfreie Komprimierung 

Bis 48 Bit Farbtiefe 

Transparenzen 

Browserunterstützung: z.B. IE unterstützt Alphakanal erst 

seit Version 7 

Format der Zukunft (?) 





Multimedia/Sound 


Ist Abspielen gewährleistet? 

Ladezeit 

Mehrwert sehr kritisch abwägen! 

Störung des Besuchers 

Hintergrundmusik 

Animierte Gifs 

Unnötige Videos 





Allgemeine Empfehlungen 


In den Blickwinkel des Besuchers gehen 

Standards beachten (XHTML, CSS, . . . ) 

Abwägung bei wenig verbreiteten/neuen Technologien: 

Nutzen vs. Aufwand, Browser-Versionen 

−→ Im Zweifel die einfachere/ältere Technologie 

Sparsamer Einsatz von Graphik, Hintergrund, Multimedia 

Ehrlichkeit: Copyrights/Lizenzen beachten und 

kennzeichnen 





Allgemeine Empfehlungen II 


Vermeiden von 

Bevormundung des Benutzers 

„Requires Internet Explorer Version . . . “ 

„Best viewed with . . . “ 

„Download this plug-in“ 

Baustellenschildern 

Fonts, die nicht Standard sind 

Nervenden Gimmicks: laufender/blinkender Text, 

Einblendungen, . . . 

Fehlende Bilder 

Fehlerhafte Seiten (Javascript) 





Allgemeine Empfehlungen III 


Entwickeln einer Corporate Identity 

Beachten der Standards bei Seitenaufteilung 

(z.B. Navigation nicht rechts) 

Mit eigenwilligen Besuchern rechnen 

(Benutzung von Metaphern) 

Automatisierung 

Verfügbarkeit 

Aussehen von Profi (Webdesigner) gestalten lassen 

Auf möglichst vielen Systemen testen! 





Zusammenfassung 


1 Multimedia und das Web 

SVG 

SMIL 

2 Zugreifbare Inhalte 

3 Gestaltung einer Website/Webdesign 



Vielen Dank 





Für Ihre Aufmerksamkeit! 

Fragen? 






Jeff Ayars et al. 

Synchronized Multimedia Integration Language (SMIL 2.0) 

- [Second Edition]. 

http: 

//www.w3.org/TR/2005/REC-SMIL2-20050107/, 

2005. 

John Slatin Ben Caldwell, Wendy Chisholm and Gregg 

Vanderheiden. 

Web Content Accessibility Guidelines 2.0. 

http://www.w3.org/TR/WCAG20/, 2006. 

Croczilla Community. 

SVG Samples. 

http://www.croczilla.com/svg/samples/, 2005. 

FUJISAWA Jun Jon Ferraiolo and Dean Jackson. 

Scalable Vector Graphics (SVG) 1.1 Specification. 






http://www.w3.org/TR/SVG11/index.html, 2003. 

Kristina Makedonska Martin Eller and Bernhard 

Schiemann. 

DFGSPP 1083 Erlangener AgentVis. 

http://faui8b.informatik.uni-erlangen.de/ 

agentvis/, 2005. 

Jose Ramirez. 

Multimedia4everyone, Learn SMIL with a SMIL 

Presentation. 

http://www.multimedia4everyone.com/, 2005.

Web - Lehrstuhl für Informatik 8 (Theoretische Informatik)

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?