Get documents about "net
Document Sample
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Rahmenbedingungen, Infrastruktur und
Gestaltungsrichtlinien für Websites an der ETH
Jakob Lindenmeyer
Web Office der ETH Zürich
www.weboffice.ethz.ch
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Gestaltung
Allgemeine 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/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Site Design – Seiten-Design
· Die Homepage
· Klares Layout (CD, Identifikation, Orientierung)
· Links
· Tables
· Frames
• http://www.weboffice.ethz.ch/webdesign/guide/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Erlass der ETHZ Internet-Richtlinien
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ETHZ Internet-Richtlinien
• Artikel 1: Zweck und Geltungsbereich
Kohärentes Erscheinungsbild,
Bedienungsfreundlichkeit und Aktualität des
Auftritts
• Artikel 2: Unterstützung
Durch das Web Office der ETH Zürich
(http://www.weboffice.ethz.ch/)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ETHZ Internet-Richtlinien
• 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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ETHZ Internet-Richtlinien
• 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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ETHZ Internet-Richtlinien
• 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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ETHZ Internet-Richtlinien
•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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“Web technology is exclusive or excluding
when it limits users' experience or
access to information!”
Pawan Vora, Usability-Forscher
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Accessibility
“Accessibility benefits all!”
TIP
Accessibility ist nicht
nur für Menschen mit
Behinderungen wichtig!
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“Excluding sites are seen as sign of
corporate incompetence!”
Jacob Nielsen, Usability-Guru
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Ablauf
• Problematik
• Umfeld
• Lösungen
• Beispiele
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Ziel
• Ein gut zugängliches ETH Web
• Kennen der relevanten Richtlinien
• Frühzeitige Berücksichtigung der
Accessibility bei einem Redesign
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Problematiken von “fettem” Design
• “Low resource”-Geräte
• Mobile Devices
• Alte Software (Browser, Plug-In’s)
• Menschen mit Behinderungen
• Vorschriften, Richtlinien, Gesetze
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“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)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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
Jakob Lindenmeyer, 27. Mai 1999 (nach WWW8)
Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Umfeld
Accessibility: “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
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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 Office
http://www.weboffice.ethz.ch/webdesign/guide/
• Empfehlungen des ETH Webmasters
http://www.ethz.ch/r_amb/web_publishing.html
• ev. Empfehlungen Ihrer Organisationseinheit
z.B. http://www.weboffice.ethz.ch/webdesign/housestyle.html
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
WAI Quick Tips
Reference Card
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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?
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“Accessibility does not mean minimal
page design; it means thoughtful
page design!”
Web Content Accessibility Guidelines
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
HTML-Validatoren und -Korrektoren
• Bp. W3C HTML 4.0-Validator
http://validator.w3.org/
• HTML-Validatoren in Editoren
• HTML-Korrektoren z.B. Software “A-Prompt”
Zugänlichkeits-Verifikation & Reparatur
Halbautomatische Korrektur von:
* ALT-Text und LONGDESC von Bildern
* Tabellen (TITLE, CAPTION, DESC)
* Image-Maps (Server-Side => Client side)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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 Accessibility
Publikation des ETH Web Office an der 8. WWW-
Konferenz
http://www.weboffice.ethz.ch/www8/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Measuring Accessibility
Publikation unter: http://www.weboffice.ethz.ch/www8/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ZKB mit Netscape Communicator 4.5
Screenwidth
= 640 pixels
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ZKB mit MS Pocket Internet Explorer
(Kein Java)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ZKB mit Lynx V 2.8
(Textbrowser)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
ZKB mit pw WebSpeak
(Audio Browser)
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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.
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“People should stop thinking in paper
documents and start thinking in [XML-]
objects!”
Johan Hjelm, W3C
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Publikationen, Beilagen & Handouts zu
dieser Präsentation
• ETHZ Internet Richtlinien
http://www.weboffice.ethz.ch/politik/
• Paper-Abstract “Measuring Accessibility”
http://www.weboffice.ethz.ch/www8/
• Web Content Accessibility Guidelines
http://www.w3.org/TR/WAI-WEBCONTENT/
• WAI Quick Tips
http://www.w3.org/WAI/References/QuickTips.html
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
Folien dieser Praesentation
sind erhaeltlich unter:
http://www.weboffice.ethz.ch/politik/net/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
“Auf die 5% welche Java nicht unterstützen
kann ich getrost verzichten!”
Der Webmaster einer ETH-Organisationseinheit
am letztjährigen ETH WWW-Workshop
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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/
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
NET-Seminar: "Web-basierter Hochschul-
unterricht: Strategien und Gestaltung"
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
Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/
