Übersicht. Web (Site) Engineering (WebSE) Datenmengen. Multimedia für das Web. Multimedia und das Web SVG SMIL. Vorlesung 5: Gestaltung von Inhalten

Transkript

1 Übersicht Web (Site) Engineering (WebSE) Vorlesung 5: Gestaltung von Inhalten P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg Multimedia und das Web SVG SMIL Zugreifbare Inhalte Gestaltung einer Website/Webdesign Graphikformate 1 / 35 2 / 35 Multimedia für das Web Datenmengen Multimedia: viele Informations -Medien Text, Bild, Grafik, Animation, Ton und Video Multimedia benötigt: Clientprogramm (meistens Renderer) Hohe Datenmenge Hohen Datendurchsatz Evtl. Zusatzhardware (Lautsprecher) 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) 3 / 35 4 / 35

2 Clientprogramme Scalable Vector Graphics [JFJ03] 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 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] 5 / 35 6 / 35 SVG Beispiel [MES05] I SVG Beispiel [MES05] II <?xml version= " 1. 0 " encoding= "UTF 8"?> <!DOCTYPE svg PUBLIC " //W3C/ / DTD SVG 1. 0 / /EN" " w3c /TR/2001/REC SVG /DTD/ svg10. dtd " > <?xml s t y l e s h e e t h r e f = " s t. css " type= " t e x t / css "?> <svg height=" 600 " preserveaspectratio= " xmidymid meet " viewbox= " " width= " 500 " > < t i t l e >Supply Chain< / t i t l e > <! Agenteneintrag 1 > <g i d = "CS" transform=" t r a n s l a t e ( 1, 1 ) " > <a i d = " o b j e c t l i n k $CS" t a r g e t = " _ s e l f " x l i n k : h r e f = ". / CS. svg " > < 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 " height="4" i d = " disc@fau:1104 / JADE" rx="2" ry=" 2 " width= " 16 " x= " 192 " y= " 289 " / > < / a> < / g>... < / svg> 7 / 35 8 / 35

3 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 < smil xmlns= " h t t p : / /www. w3. org /2001/ SMIL20 / Language " > <head> < l a y o u t > <root l a y o u t height=" 400 " width= " 600 " background c o l o r = " # f f f f c c " t i t l e = " SMILElements " / > <region i d = " head_element " width=" 250 " height=" 50 " top= " 115 " l e f t = " 30 " z index= " 3 " / > <region i d = " body_element " width=" 250 " height=" 50 " top= " 45 " l e f t = " 45 " z index= " 3 " / > <region i d = " media_element " width=" 250 " height=" 50 " top= " 90 " l e f t = " 55 " z index= " 3 " / > < / l a y o u t > < / head> <body> <par> <seq><par> < t e x t src="mm4e. de / i n t r o. r t " region=" text_0 " 9 / / 35 SMIL Beispiel II Internet und Barrieren? begin= " 2.00 s " / > <audio src="mm4e. de / i n t r o 2. rm " begin= " 6.00 s " end= " s " / > < / par>... < / seq>< / par> < / body> < / s mil> 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 11 / / 35

4 WCAG 2.0 Guidelines Inhalte müssen wahrnehmbar sein 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) 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) 13 / / 35 Schnittstellenkomponenten im Inhalt verarbeitbar Bedienelemente und Inhalte verstehbar 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 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) 15 / / 35

5 Robustheit gegenüber user agents Bestandteile einer Site 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 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) 17 / / 35 Bestandteile einer Seite Text 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, -Adresse oder Homepage (Seriosität, Service) Link zur Homepage (Teil der Navigation) URL der Seite (Papierausdruck, Referenz) Navigation (Redundanz schadet hier nicht!) 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 19 / / 35

6 Text II Darstellung 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 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 21 / / 35 Navigation Navigation II 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! 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)! 23 / / 35

7 Layout und Struktur Farbe und Graphik 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 Farben haben Bedeutung/tragen Emotionen Farben müssen zusammenpassen Farbtiefe! Graphik Balance zwischen Bild und Text Dateigrößen beachten! 25 / / 35 Graphic Interchange Format (GIF) JPEG 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 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 27 / / 35

8 Portable Network Graphic (PNG) Multimedia/Sound Lizenzkostenfrei Verlustfreie Komprimierung Bis 48 Bit Farbtiefe Transparenzen Browserunterstützung: z.b. IE unterstützt Alphakanal erst seit Version 7 Format der Zukunft (?) Ist Abspielen gewährleistet? Ladezeit Mehrwert sehr kritisch abwägen! Störung des Besuchers Hintergrundmusik Animierte Gifs Unnötige Videos 29 / / 35 Allgemeine Empfehlungen Allgemeine Empfehlungen II 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 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) 31 / / 35

9 Allgemeine Empfehlungen III Zusammenfassung 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! Multimedia und das Web SVG SMIL Zugreifbare Inhalte Gestaltung einer Website/Webdesign Graphikformate 33 / / 35 Vielen Dank Für Ihre Aufmerksamkeit! Fragen? Jeff Ayars et al. Synchronized Multimedia Integration Language (SMIL 2.0) - [Second Edition]. http: // John Slatin Ben Caldwell, Wendy Chisholm and Gregg Vanderheiden. Web Content Accessibility Guidelines Croczilla Community. SVG Samples FUJISAWA Jun Jon Ferraiolo and Dean Jackson. Scalable Vector Graphics (SVG) 1.1 Specification / / 35

10 Kristina Makedonska Martin Eller and Bernhard Schiemann. DFGSPP 1083 Erlangener AgentVis. agentvis/, Jose Ramirez. Multimedia4everyone, Learn SMIL with a SMIL Presentation / 35