NET-Seminar: "Web-basierter Hochschul- unterricht: Strategien und Gestaltung" Jakob Lindenmeyer, 27....

Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

NET-Seminar: "Web-basierter Hochschul-unterricht: Strategien und Gestaltung"

Rahmenbedingungen, Infrastruktur undGestaltungsrichtlinien für Websites an der ETH

Jakob Lindenmeyer

Web Office der ETH Zürich

www.weboffice.ethz.ch



GestaltungAllgemeine Grundsätze

· Die Form folgt der Funktion – «form follows function»

· Konsistentes Site-Layout· So einfach wie möglich· Überflüssiges vermeiden· Accessibility & Browser-Unabhängigkeit· Keine Technik-Gimmicks (Plug-ins)• · Aktualität• http://www.weboffice.ethz.ch/webdesign/guide/



Site Design – Seiten-Design

Die Homepage· Klares Layout (CD, Identifikation, Orientierung)· Links· Tables· Frames• http://www.weboffice.ethz.ch/webdesign/guide/



Benutzerführung und Navigation

· Horziontale und vertikale Navigation· Navigation bars· Orientierung innerhalb einer Seite· Inhaltsverzeichnis (pro Seite)· Site Map (für das ganze Angebot)· Interne Suchmaschinen• http://www.weboffice.ethz.ch/webdesign/guide/



Erlass der ETHZ Internet-Richtlinien



ETHZ Internet-Richtlinien

• In Kraft seit 1. Mai 1999

• Gelten für das gesamte ETH-Web

• http://www.weboffice.ethz.ch/politik/

• ETH-Intern-Artikel von morgen Freitag




• Artikel 1: Zweck und Geltungsbereich

Kohärentes Erscheinungsbild, Bedienungsfreundlichkeit und Aktualität des Auftritts

• Artikel 2: UnterstützungDurch das Web Office der ETH Zürich (http://www.weboffice.ethz.ch/)




• Artikel 3: Verantwortlichkeit

(1) Für das Erscheinungsbild jedes Dokuments gibt es eine verantwortliche Person. Diese muss entweder in dem Dokument selbst oder in einem per Link abrufbaren Begleitdokument mit Vorname, Name, Benutzereinheit und E-Mail-Adresse bezeichnet sein.(2) Zuständig ist im allgemeinen der/die Leiter/in der Einheit.




• Artikel 5: Gestaltung

(1) Auf allen Dokumenten ist das Datum der Einspeicherung oder der letzten Änderung anzubringen.(2) Jedes Dokument enthält einen Verweis auf die entsprechende Einstiegsseite, und jede Einstiegsseite verweist auf die Einstiegsseite der ihr übergeordneten Ebene.




• Artikel 5 : Gestaltung

(3) Es sind die offiziellen Stilelemente und Vorlagen der ETH Zürich (z.B. Logos) zu benutzen, die unter http://www.aoa.ethz.ch/cd/ abrufbar sind. (4) Jede Einstiegsseite der Ebenen 1 bis 7 enthält das ETH-Logo und einen Link auf die zentrale Einstiegsseite der ETH Zürich.




•Artikel 5: Gestaltung, Absatz 5:

“Der Zugang zum Inhalt und das Navigieren innerhalb der Angebote der Ebenen 1 bis 7 muss auch mit Browsern ohne Multimediaelemente (z.B. Java, JavaScript, Shockwave, usw.) und ohne Frame-Unterstützung möglich sein. “

•Artikel 7: Inkrafttreten

Dieser Erlass ist seit 1. Mai 1999 in Kraft.



Accessibility

“Zugänglichkeit” definiert sich dadurch, wie einfach ein Dokument auf dem Web durch einen Empfänger “verwendet” werden kann.

Je höher die Anforderungen, desto schlechter ist das Dokument zugaenglich.

Anforderungen beinhalten die Fähigkeit der benötigten Hard- & Software sowie auch die Fähigkeit der Person, welche versucht die in einem Dokument zur Verfügung gestellte Information zu verwenden.



Accessibility

Accessibility is defined as how easy a document on the web can be "used" by a client.

The higher the requirements are, the less accessible a document is.

Requirements include capabilities of the hard- and software deployed as well as the capabilities of the person trying to use the information provided in a document.



“Web technology is exclusive or excluding when it limits users' experience or

access to information!”

Pawan Vora, Usability-Forscher



Accessibility

“Accessibility benefits all!”

TIP Accessibility ist nicht

nur für Menschen mit

Behinderungen wichtig!



“Excluding sites are seen as sign of corporate incompetence!”

Jacob Nielsen, Usability-Guru



Ablauf

• Problematik

• Umfeld

• Lösungen

• Beispiele



Ziel

• Ein gut zugängliches ETH Web

• Kennen der relevanten Richtlinien

• Frühzeitige Berücksichtigung der Accessibility bei einem Redesign



Problematiken von “fettem” Design

• “Low resource”-Geräte

• Mobile Devices

• Alte Software (Browser, Plug-In’s)

• Menschen mit Behinderungen

• Vorschriften, Richtlinien, Gesetze



“Low resource”-Geraete

• Ältere Computer (z.B. JVM auf 486)

• Kleiner Bildschirm (z.B. VGA & Monochrom)

• Langsames 14.4 Kb/s-Modem

• Langsame Netzanbindung (Kein ISDN)

• Verbreitet bei Studierenden (beschränkte finanzielle Ressourcen)



Die Computer-Ressorcen der ETH

• NETHZ Online Dienste für Studierende

• Dial-up (im Rahmen von NETHZ)

• Computerräume (127 Sun’s & 32 PC’s)

• Laptop-Steckplätze (Geplant ab Herbst 99)

• Standard-Laptops für Studierende (Geplant)



Mobile Devices

• Mobiltelefon (Screensize ca. 2 Zoll)

• Handhelds (Screensize ca. 4 Zoll)

• Auto-Computer (mit Sprachausgabe für Fahrer)

• Browser in Armbanduhr (Screensize ca. 1 Zoll)

• Browser & CE in Haushaltsgeräten (z.B. Kaffee- & Waschmaschine)



Alte Software

• z.B. Browser - Neue PC’s haben oft noch Internet Explorer 2.0 vorinstalliert.

• Browser an der ETH (Statistik)

• Plug-In’s (z.B. Shockwave, Quicktime, Realplayer)

• Default-Design Meist für PC mit Netscape oder Internet Explorer ab Version 4. z.B. CSS erst mit Internet Explorer ab Version 5 richtig unterstützt.



Menschen mit Behinderungen

• Farbenblind (X % aller Männer)

• Blind => Audio-Browser (Demo)

• Sehbehinderung (Grosse Schriften notwendig)

• Bewegungseingeschraenkt (Keyboard-only bzw. Mouse-only Navigation)

• Taub (Alternativen fuer Audio-Dateien) 10% aller Menschen haben

irgendeine Behinderung

der obigen Art

(nach WWW8)



UmfeldAccessibility: “it’s not a privilege, it’s a law!”

• Empfehlungen (z.B. Web Content Accessibility Guidelines 1.0)

• Vorschriften (z.B. ETHZ Internet-Richtlinie)

• Gesetze (z.B. Kanadische Regierung)

TIP Kümmern Sie sich bereits vor

Designstart um bestehende

Richtlinien & Empfehlungen



Empfehlungen• Web Content Accessibility Guidelines 1.0

http://www.w3.org/TR/WAI-WEBCONTENT/

• W3C Testimonials & W3C Quick Tips zur WCAG

• Empfehlungen des ETH Web Officehttp://www.weboffice.ethz.ch/webdesign/guide/

• Empfehlungen des ETH Webmastershttp://www.ethz.ch/r_amb/web_publishing.html

• ev. Empfehlungen Ihrer Organisationseinheitz.B. http://www.weboffice.ethz.ch/webdesign/housestyle.html



WAI Quick Tips Reference Card



Vorschriften & Gesetze• ETHZ Internet-Richtlinien:

Ausführungsbestimmungen über den Auftritt der ETH Zürich im

Internet z.B. Artikel 5: Gestaltung, Absatz 5

• Kanadische und US-Regierung American with Disabilities Act

• Your Tax-Money at work: ETH-Web ist durch Steuergelder finanziert

=> Wo steht die Schweiz?



Testimonials for "Web Content Accessibility Guidelines 1.0"

• “The U.S. Government intends to work closely with the W3C to ensure that government information and

services are accessible”Al Gore, Vice President, USA

•American with Disabilities Act: “the information in this site is available in alternate formats upon request.” (z.B. www.unm.edu)



Loesungen

• “Alles ist eine Frage der Organisation!”

• HTML-Validatoren und -Korrektoren• Accessibility-Checker z.B. Bobby

• Online-Hilfen (z.B. Empfehlungen, Anleitungen von ETH oder W3C)

• Beratung (z.B. durch das ETH Web Office)

• zukünftige Lösung: XML



Richtige Organisation

Zugängliche Webseiten müssen NICHT folgendem Bild entsprechen:

• eintönig, langweilig, nur Text

• teuer und zeit-aufwendig

• Verzicht auf moderne Features

Durch frühzeitige & richtige Organisation lassen sich diese Vorurteile vermeiden.



“Accessibility does not mean minimal page design; it means thoughtful

page design!”

Web Content Accessibility Guidelines



HTML-Validatoren und -Korrektoren

• Bp. W3C HTML 4.0-Validatorhttp://validator.w3.org/

• HTML-Validatoren in Editoren

• HTML-Korrektoren z.B. Software “A-Prompt”Zugänlichkeits-Verifikation & ReparaturHalbautomatische Korrektur von: * ALT-Text und LONGDESC von Bildern * Tabellen (TITLE, CAPTION, DESC) * Image-Maps (Server-Side => Client side)



Accessibility-Checker

• Bobby: “Accessibility without compromise!”Infos & Software unter: http://www.cast.org/bobby/Demo

• Software “A-Prompt”Als dll oder in Java. Demo Infos unter: http://aprompt.snow.utoronto.ca/

• Measuring AccessibilityPublikation des ETH Web Office an der 8. WWW-Konferenzhttp://www.weboffice.ethz.ch/www8/



Measuring Accessibility

Publikation unter: http://www.weboffice.ethz.ch/www8/



ZKB mit Netscape Communicator 4.5Screenwidt

h = 640 pixels



ZKB mit MS Pocket Internet Explorer(Kein Java)



ZKB mit Lynx V 2.8(Textbrowse

r)



ZKB mit pw WebSpeak(Audio

Browser)



Zukuenftiger Lösungsansatz: XML

Aus XML-Grundcode ableitbar:

• WWW-Vollversion

• “WWW light” für Mobile Devices

• Sprachversion

• Papierversion

• Internationalisierung: E, D, F, I, J, Chinesich, usw.



“People should stop thinking in paper documents and start thinking in [XML-]

objects!”

Johan Hjelm, W3C



Publikationen, Beilagen & Handouts zu dieser Präsentation

• ETHZ Internet Richtlinienhttp://www.weboffice.ethz.ch/politik/

• Paper-Abstract “Measuring Accessibility”http://www.weboffice.ethz.ch/www8/

• Web Content Accessibility Guidelineshttp://www.w3.org/TR/WAI-WEBCONTENT/

• WAI Quick Tipshttp://www.w3.org/WAI/References/QuickTips.html



Folien dieser Praesentation

sind erhaeltlich unter: http://www.weboffice.ethz.ch/politik/net/



“Auf die 5% welche Java nicht unterstützen kann ich getrost verzichten!”

Der Webmaster einer ETH-Organisationseinheit am letztjährigen ETH WWW-Workshop



6. ETH WWW-Workshop

• Zeit: Mittwoch 9. Juni 1999 von 13:00 - 17:00

• Ort: Raum NO C 3, ETH Zentrum

• Themen: “Regeln & Dienstleistungen auf dem ETH Web”:

• Infos & Anmeldung: unter: http://www.weboffice.ethz.ch/eth-w4/006/



Diskussionspunkte

• Accessibility und Design: Gegensaetze?

• Redesign vs. Neudesign: Prioritaeten• Papier-Design vs. Object-oriented Design (XML)

• Verzicht auf 5% der Besucher

• Filter in Webserver auf validierte Pages

• Ungeeignete Web-Teaching Tools

• Zukünftige Dokumentformate: XML

NET-Seminar: "Web-basierter Hochschul- unterricht: Strategien und Gestaltung" Jakob Lindenmeyer, 27....

Documents

Transcript of NET-Seminar: "Web-basierter Hochschul- unterricht: Strategien und Gestaltung" Jakob Lindenmeyer, 27....