net by xiaopangnv

VIEWS: 1 PAGES: 46

									              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/

								
To top