CSS-Designs für die Präsentation von e-Learning Content · CSS-Designs für die Präsentation von...

CSS-Designs für die Präsentation vone-Learning Content

praktische Umsetzung eines Oberflächen Designs am Beispiel der A.L.E.(Action-oriented Learning Environment) mit Hilfe von XHTML in Verbindung mit CSS

David Gampe1 / 11 / 2005

Matrikelnummer: 2107561

betreut von: Prof. Dr. G. Wagner & Dr. W. Debler

BTU-Cottbus

1

Inhaltsverzeichnis1. Aufgabenstellung und Lösungsansatz ............................................................................. 4

1.1.Aufgabenstellung .................................................................................................41.2.Lösungsansatz ......................................................................................................4

2. Einführung in die Thematik des e-Learning ................................................................... 52.1. Geschichte der Lernmedien ................................................................................. 52.2. Computer Based Training & Web Based Training .............................................. 62.3. e-Learning ............................................................................................................6

3.Benutzeroberflächen .......................................................................................................104. Multi- und Hypermedia ................................................................................................... 11

4.1.Multimedia ...........................................................................................................114.2. Hypertext und Hypermedia .................................................................................. 11

5. Regeln des Web Design .................................................................................................. 135.1.Layout ..................................................................................................................135.2.Farbnutzung .........................................................................................................14

5.2.1.Farben .......................................................................................................145.2.2.Farbkontraste .............................................................................................165.2.3. Farbharmonien / Farbkombinationen ........................................................ 16

5.3.Typographie .........................................................................................................195.3.1.Schriftarten ................................................................................................195.3.2.Überschriften .............................................................................................205.3.3.Spaltenbreite .............................................................................................205.3.4.Fußnoten ...................................................................................................205.3.5.Bilderläuterungen ......................................................................................21

6. XML, XHTML und CSS ................................................................................................ 226.1. Xtensible Markup Language (XML) ................................................................... 226.2. eXtensible Hypertext Markup Language (XHTML) ........................................... 236.3. Document Type Definition (DTD) ...................................................................... 246.4. Cascading Style Sheets (CSS) ............................................................................. 25

7. Barrierefreiheit eines Webauftrittes ................................................................................ 287.1. Barrierefreie Informationstechnik-Verordnung (BITV) ...................................... 287.2. W3C "Web Content Accessibility Guidelines" ................................................... 28

8. Anforderungen an die Umsetzung .................................................................................. 318.1. Layout & Design .................................................................................................. 328.2.Navigation ............................................................................................................328.3.Lernbegleitung .....................................................................................................32

9. Gestaltung einer e-Learning Oberfläche am Beispiel der „Action-oriented LearningEnvironment“ ......................................................................................................................33

9.1. Das Prinzip der A.L.E. ......................................................................................... 339.2.Umsetzung ...........................................................................................................37

9.2.1. Layout & Design ....................................................................................... 379.2.1.1.Gestaltungsraster ............................................................................379.2.1.2.Farbnutzung ...................................................................................409.2.1.3.Typographie ...................................................................................499.2.1.4. Icons ...............................................................................................50

9.3.Navigation ............................................................................................................51

CSS-Designs für die Präsentation von e-Learning Content

2

9.4.Lernbegleitung .....................................................................................................539.5. Barrierefreiheit der Oberfläche ............................................................................ 53

10.Fazit ...............................................................................................................................5511.Abbildungsverzeichnis ..................................................................................................57Literaturverzeichnis ............................................................................................................59


3

1. Aufgabenstellung und Lösungsansatz

1.1. Aufgabenstellung

e-Learning Konzepte basieren auf didaktischen Grundsystemen, die an ihre Struktur undGrundgedanken angepasste Oberflächen benötigen. Die Aufgabe des Oberflächendesigns istes, diese zu entwerfen und unter der Einhaltung spezifischer Regeln umzusetzen.

Die Aufgabe dieser Arbeit besteht darin, eine Oberfläche zu beschreiben, die sich nach derFunktionalität eines handlungsorientierten Lernsystems richtet und diese ansprechend präsen-tiert. Dabei werden benötigte Aspekte des Web-Design, Layout und e-Learning allgemeinerläutert, zusammengeführt und schließlich am konkreten Beispiel angewendet.

1.2. Lösungsansatz

Den Start bildet eine allgemeine Einführung in die Thematik des e-Learning. Was kann untere-Learning verstanden werden und wie hat es sich entwickelt, sind hier die zu klärenden Fra-gen. Desweiteren werden Anwendungsgebiete, wirtschaftliche Faktoren, Probleme in derAnwendung und weitere Informationen aufgezeigt.

Das zweite Kapitel beschäftigt sich mit den Begrifflichkeiten Multimedia und Hypermedia,sowie dessen innere Differenzierung.

Zum Entwurf einer Oberfläche ist eine grundlegende Auseinandersetzung mit den nutzbarenGestaltungsmöglichkeiten und den Elementen, die in einer Web-Gestaltung Gewicht habennötig. Im nächsten Kapitel werden diese zusammengefasst und in Bezug zur Nutzung imdigitalen Bereich gesetzt. Eingegangen wird insbesondere auf die visuelle Struktur einerSeite, die Nutzung von Farben und Farbkombinationen sowie Aspekte der Typographie.

Im Anschluss an dieses Kapitel werden die für die praktische Umsetzung benötigten Techni-ken vorgestellt. Es wird kurz die Entstehungsgeschichte angerissen und die Nutzungsmög-lichkeiten sowie der Syntax der verschiedenen Sprachen vorgestellt.

Danach wird auf Barrierefreiheit im Netz eingegangen. Das Kapitel zeigt, welche Anforde-rungen an Dokumente und Inhalte des WWW zu stellen sind, um Behinderten die Nutzungdes Internets zu erleichtern.

Das siebte Kapitel beschäftigt sich mit den speziellen Anforderungen, die an eine Oberflächefür den e-Learning Bereich zu stellen sind. Dabei werden die in den vorherigen Kapitelnbeschriebenen Punkte in Zusammenhang mit dem Lernen online gesetzt und gleichzeitigRegeln für die praktische Umsetzung definiert.

Die konkrete Anwendung am Beispiel der A.L.E. (Action-oriented Learning Environment)beinhaltet das achte Kapitel. Das Lernsystem, dessen Struktur und Grundgedanken werdenbeschrieben und die auf diesem System basierende Umsetzung in XHTML in Verbindung mitCSS vorgestellt, genau erläutert und begründet.


4

2. Einführung in die Thematik des e-Learning

2.1. Geschichte der Lernmedien

Der Beginn der Mediennutzung für Unterrichtszwecke ist nicht genau feststellbar. Es wurdenzwar schon immer Informationsvermittler zur Bildung und Schulung eingesetzt, aber als einGrundstein legender Punkt wird die Erfindung des Buchdrucks im 15. Jahrhundert angese-hen. Durch den Druck der Bibel erlangte diese Technik schnell an Ansehen und Verbreitung.Erste Lehrbücher entstanden wenig später.

Danach brauchte es bis in das 19. Jahrhundert hinein, bis neue Medien für das Lernen bzw.den Einsatz für Unterrichtszwecke Bedeutung erlangten. Jetzt wurden erstmals Wandbilderzur Unterstützung der Lehre eingesetzt, welche mit den heutigen Schultafeln vergleichbarsind.

Nach der Entwicklung des Radios und der Gründung erster Rundfunkanstalten kam es ca.1930 schon zu ersten Schulfunksendungen. 1952 startete dann das Fernsehen durch. Es boteine komplett neue Dimension der Lehrstoffpräsentation. Die Kombination von bewegtenBilder mit begleitendem Ton und die, durch die Rundfunktechnik umsetzbare Möglichkeitdes Empfangs an nahezu allen beliebigen Orten, war für die Bildung ein entscheidenderSchritt nach vorn.

Sehr lange dauerte es allerdings, bis sich die Verbreitung von Lehrvideos durchsetzte. DieserFakt ist durch die lange Standardisierung und Ausreifung der Technik zu begründen. Erst mitdem Erscheinen preisgünstiger, leicht zu bedienender Geräte sowie standardisierten Formatenin der 1980er Jahren fand der Videorekorder den Weg in die meisten Lehranstalten. Darauffolgten weitere Medien wie Folien, Tonbänder, Taschenrechner etc., die jedoch mehr Weiter-entwicklungen der vorhandenen Medientypen darstellten.

Das aktuellste Medium, welches auch im Mittelpunkt dieser Arbeit steht, ist der Multimedia-Computer. Alle vorher genannten Techniken lassen sich auf ihm digital vereinen und abbil-den. Somit gilt der Rechner zwar als neues Medium, bietet aber keine direkte neue Codie-rungsart, da Textdarstellungen, Bilder, Video usw. auch schon vor seiner Zeit existierten.

Eine entscheidende Erweiterung erfuhr die Nutzbarkeit des Multimedia Computers Anfangder 90er Jahre. Zu dieser Zeit wurde das Internet, welches schon länger für militärische undEntwicklungszwecke genutzt wurde, für die Öffentlichkeit zugänglich gemacht. Seitdem bie-tet sich die Möglichkeit, multimediale Inhalte per World Wide Web überall abzurufen, ohnediese extra auf CD-Roms oder anderen Speichermedien abzulegen. Aufgrund der globalenVerfügbarkeit, der Technologie und der Struktur des WWW kam es zu einer rasanten Ver-breitung und Nutzung. Universitäten errichteten Lehrseiten und boten ihr Wissen und ihreLehrmaterialien nun auch online ihren Studenten an. Firmen errichteten Portale und knüpftenweitreichende Kontakte über das Internet.

Der Computer entwickelt sich zu einer multifunktionalen Kommunikationsmaschine, die invielen Bereichen mehr und mehr Funktionen übernimmt und die Grenze zwischen allen ande-ren Medientypen schwinden lässt.


5

2.2. Computer Based Training & Web Based Training

Bei der Begrifflichkeit des e-Learning verhält es sich ähnlich wie bei der von Multimedia.Eine eindeutige Abgrenzung ist schwer vorzunehmen, da die Definition abhängig von derpersönlichen Sichtweise ist und auch von der ständigen technischen Weiterentwicklungbeeinflußt wird.

Allgemein wird darunter die Übertragung von Lehrinhalten auf elektronischem Wege ver-standen. Dies beinhaltet jede Form von elektronischen Datennetzen, Satellitenübertragungen,Lehrvideos und -fernsehen, sowie CD-Roms. Durch die starke Verbreitung des WWW wurdejedoch verstärkt dazu übergegangen, e-Learning als Synonym für das Lernen Online amComputer zu verstehen.

Als Folge daraus entwickelte sich eine Unterteilung in die Begrifflichkeiten „ComputerBased Training“ (CBT) und „Web Based Training“ (WBT). Während beim CBT das Spei-chermedium CD-Rom und ähnliche Wechseldatenspeicher genutzt werden, ist beim WBT derLehrstoff komplett online abrufbar.

Durch die Einbettung in die Hypermediawelt sind verschiedenste Interaktionsmöglichkeitenbeim WBT nutzbar, was entscheidende Vorteile gegenüber dem CBT bietet. So kann, bei ent-sprechender Implementierung, mit den Tutoren oder anderen Lernenden Kontakt hergestelltwerden. Mögliche Kommunikationsformen wären z.B. E-Mail, News, Chats, Diskussionsfo-ren, Livestreams usw.. Desweiteren besteht beim WBT die Möglichkeit der ständigen Aktua-lisierung und, falls notwendig, Inhalte zu korrigieren und anzupassen. Dies ist beim CBTtechnisch nicht machbar, da es sich hierbei um statische Inhalte handelt, die fest auf einenDatenträger abgelegt sind.

2.3. e-Learning

Bei der Verwendung des Begriffes "multimediales Lernen" wird im allgemeinem vom selbst-ständigem Lernen ausgegangen, dem e-Learning.

"Unter E-Learning werden die Ermöglichung und die Unterstützung von Lernprozessendurch Informations- und Kommunikationstechnologien (IuKT) verstanden. Dabei darf dieIuKT nicht nur als rudimentäres Hilfsmittel dienen, sondern muß über reine Präsentations-und/oder Visualisierungsmittel hinausgehende Eigenschaften aufweisen." (Institut für Wirt-schaftsinformatik Universität Hannover 2004)

Eine weitere zu erfüllende Eigenschaft, um vom e-Learning sprechen zu können, ist dieUnabhängigkeit von Ort, Zeit und Raum. Dies soll verdeutlichen, dass dem Lernenden freieWahl des Ortes für den Zugriff auf die benötigten Daten hat und nicht an zeitliche Vorgaben,sei es die Lerndauer noch die Verfügbarkeit des Lehrinhaltes, gebunden ist.

Desweiteren muss eine hypermediale Umgebung gegeben sein, in der der Nutzer interaktivagieren kann. Unter Interaktivität wird in diesem Zusammenhang die Steuerung des allgemei-nen Programmablaufs verstanden, welche durch die Art des Systems bestimmt wird unddadurch in Aufbau und Umfang variieren kann.

Wir befinden uns im Zeitalter der lebenslangen und ständigen Weiterbildung. Die Qualifikati-


6

onsanforderungen und die Kompetenzansprüche sind in den letzten Jahrzehnten rapide ange-stiegen. In immer mehr Bereichen wird versucht, den Lernvorgang zu optimieren und denLehrstoff leichter zugänglich zu machen.

Häufig fehlt es jedoch an ausreichend qualifiziertem Lehrpersonal, das den Lernwilligenneues Wissen vermitteln könnte. Dieses Problem betrifft vor allem dünn besiedelte Regionenund die Entwicklungsländer. Sich nach globalen Standards zu bilden, ist hier nur durch selb-ständiges, individuelles Lernen möglich. Das WWW eignet sich aufgrund seines Hyperme-diasystems und seiner relativ einfachen Nutzung perfekt für die Bereitstellung und Verbrei-tung von Lehrmaterialien. Es stellt heute das prädestinierte Medium für offenes Fernlernendar.

Egal, ob im Schul-, Hochschul- oder Berufsaus- und Weiterbildungsbereich, die Nutzung vonMultimedia und den neuen Telekommunikationstechniken bietet durch multimediale Lern-module mehr Möglichkeiten der didaktischen Gestaltung als das bisher bevorzugte Fernlern-Medium Papier. Dadurch gewinnt diese Lehrform ständig an Bedeutung und hat sich mittler-weile zu einem lukrativen Geschäftszweig entwickelt.

Durch die Nutzung der neuen Technik und grafischen User Interfaces kann eine intuitiverUmgang mit e-Learning realisiert werden, der auch die Nutzung durch unerfahrene Nutzerermöglicht. Deshalb gehen immer mehr Firmen dazu über, ihre firmeninternen Fortbildungs-prozesse auf e-Learning umzustrukturieren. Vor allem fortschrittliche Großkonzerne setzenverstärkt auf diese Form der Weiterbildung. Ausschlaggebende Vorteile dafür sind, dass dasLernen direkt am Arbeitsplatz passieren kann ("Employee Qualitfication") und dass die ange-botenen Inhalte leicht auf dem neuestem Stand der Wissenschaft gehalten werden können.

Eine Studie der unicmind.com AG analysierte den Einsatz von e-Learning in einer Reihebefragter Unternehmen, in Bezug auf die angesprochene Zielgruppe bzw. den Personenkreis,der sich mit denen von ihnen angebotenen Inhalten auseinander setzen soll.

Abbildung 1. Zielgruppen für e-Learning Content


7

Anhand dieser Grafik wird deutlich, wie hoch der Anteil von e-Learning in der Praxis heutzu-tage schon ist. So zeigt sich, dass von den Befragten drei von vier Arbeitgebern für ihr mittle-res Management online Lehrinhalte vorbereiten - Tendenz steigend.

Im Hochschul- und Universitätsbereich finden e-Learning Plattformen ebenfalls großen Ein-satz. Mehr als drei Viertel der amerikanischen Colleges bieten beispielsweise e-LearningKurse an. Zur Zeit beschränkt sich der Aufgabenbereich der meisten Lehrplattformen jedochleider meist nur auf die Bereitstellung von Unterrichtsmaterialien und beachtet wenigerdidaktische und designtechnische Regeln und Aspekte.

Durch die bei der Nutzung der Plattformen aufkommenden Erkenntnisse und der zunehmendverstärkten Einbeziehung didaktisch durchdachter Lernkonzepte wird jedoch ständig an derEffizienz und an möglichen Einsatzgebieten gearbeitet. Die steigende Effizienz der entste-henden Lern-Projekte führt zu einem wachsendem Interesse an immer neuen, innovativerene-Learning-Konzepten.

Ein weiterer Grund der Nutzung digitaler Onlinemedien ist die vorhandene Masse an Wissenund dessen innere Differenzierung. Saubere und überschaubare Verwaltungen der anfallen-den Daten sind nur noch auf dem elektronischen Wege realisierbar. Die dafür benötigtenDatenbanken können so relativ einfach auch zur Aufbereitung von Lehrinhalten genutzt wer-den.

Ein technischer Nachteil, der beim e-Learning, bzw. dem WBT immer noch Gewichtung hat,ist das Problem der Datenübertragungsrate. Nicht alle "Haushalte" verfügen derzeit über diebenötigten Ressourcen, um die multimedialen Möglichkeiten des Internets voll auszuschöp-fen zu können. Dies gilt vor allem für die Nutzung von Video- und Audio-Streams. Um daszu kompensieren, muss auf die Optimierung der bereitgestellten Daten geachtet und Alterna-tiven angeboten werden. Das Problem verliert aber zunehmend an Bedeutung, da das Netzständig erweitert und verbessert wird und so höhere Datendurchsatzraten möglich sind.

Die Verbesserung der Infrastruktur des Internets verändert jedoch nichts an der Ausstattungund materiellen Basis der öffentlichen Schulen. Hier fehlt es an Geldern für die Anschaffungmultimedialer Zentren sowie für den entstehenden Aufwand bei der Erstellung von e-Learning Inhalten. Damit wird dieser Bereich ohne entsprechende Förderung kaum auf demneusten Stand der Zeit arbeiten und effektiv e-Learning nutzen können. Zusätzlich müsstendie Lehrstrukturen und -methoden entsprechend angepasst werden.

Aber auch für Unternehmen bringt die Umstellung auf e-Learning enorme, nicht zu unter-schätzende Aufwände mit sich. Es muss in geeignete Datenverarbeitungs-Strukturen und indie Vorbereitung der Inhalte investiert werden. Diese Kosten nehmen schnell ungeahnte Aus-maße an, da entsprechende Aufbereitungen der multimedialen Inhalte Vorbereitungszeitenvon 200-350 Stunden in Anspruch nehmen können.

Folgendes Diagramm zeigt die von befragten Unternehmen angesetzten Kosten, die für diemultimediale Vorbereitung einer Stunde e-Learning Content eingeplant werden.


8

Abbildung 2. Kosten für die Vorbereitung einer Stunde e-LearningContent

Um diesen enormen Aufwand rentabel zu machen, muss eine ausreichend große Nutzer-gruppe vorhanden sein . Die durch das e-Learning eingesparten Kosten ergeben sich aus dernicht benötigten Bereitstellung der Unterkünfte für die Dauer von herkömmlichen Bildungs-seminars, den entstehenden Anreisekosten, das Personal etc..

Es existieren aber noch andere Problematiken beim Einsatz von e-Learning. In den traditio-nellen Unterrichtsformen besitzt der Lehrer eine entscheidende Position im Lehrplan. Er leitetden Lernvorgang nach didaktischen Richtlinien, die ein effizientes Lernen gewährleisten sol-len. Bestandteile seines Aufgabengebietes sind Motivation, Setzen von Lernzielen, Lehrstoff-vorbereitung, Erfolgskontrolle, Eingehen auf Schwachstellen und die Anwendung an mög-lichst praktischen Aufgabenstellungen.

Im Gegensatz zu diesem Lernkonzept ist der Lernende beim e-Learning auf sich und seineFähigkeiten individuell und selbstständig zu lernen, gestellt. Diese Situation fördert jedochauch die persönlichen Lerndefizite, die dann unweigerlich störend mit einfließen. FehlendesInteresse, fehlende Zeit oder hohes Alter sind Beispiele, denen nur schwer selbst gegenge-steuert werden kann. Es ergeben sich Probleme, die nicht technologisch oder wirtschaftlichbegründet sind und so den erhofften Lehrerfolg oftmals schwer meßbar machen.

Deshalb sind spezielle Anforderungen an die Aufbereitung von Lehrinhalten für den Hyper-media-Bereich zu stellen, die entsprechend zu berücksichtigen sind. Der Aufbau des GUIs,die Struktur der Lehrplattform sowie dessen Inhalt, soll versuchen, den Lehrer und seineFunktion als Führer durch den Lehrstoff so gut wie möglich zu ersetzen.

Ein weiteres Problem betrifft den Kontakt zu realen Personen. Lernplattformen können zwarvirtuelle Meetings oder Diskussionen unterstützen, aber den direkten Umgang mit Menschennicht. In vielen Bereichen ist der Umgang mit Personen Teil der Arbeit und somit alleindurch e-Learning nicht realisierbar.

Hier ist die Nutzung von sogenannten "blended learning"-Systemen unabdingbar. Sie kombi-nieren e-Learning mit Präsenzlernen. Vor allem in der Start- und Evaluierungsphase einesLernprojektes ist das von enormen Vorteil oder sogar eine Notwendigkeit.


9

3. BenutzeroberflächenDer Dialog zwischen Mensch und Maschine verlagert sich zunehmend auf elektronischeSchnittstellen. So liegt das Bestreben der Benutzeroberflächen-Designer darin, den Kommu-nikationsvorgang zwischen diesen so intuitiv wie möglich zu gestalten, da der Funktionsum-fang heutiger technischer Geräte oft sehr komplex ist.

Das "User Interface" bezeichnet generell alles, was es einer Person ermöglicht, interaktiv zuwerden bzw. etwas zu nutzen. Der Begriff ist dabei nicht auf die elektronische Datenverarbei-tung zu begrenzen. Auch mechanische Maschinen besitzen eine Benutzeroberfläche bzw.Benutzerschnittstelle. Diese kann mehr oder weniger komplex ausfallen - je nach Funktions-umfang der Maschine. So kann das Interface einige Druckknöpfe bis hin zu Pedalen, Schal-tern, Steuerrädern und anderen Elementen beinhalten.

In der digitalen Datenverarbeitung stellt das typische User Interface die genutzte Softwareund die Eingabegeräte Maus, Keyboard und andere Peripheriegeräte dar.

Das Interface auf Seite der Software ist zu differenzieren. Handelt es sich um ein sogenanntes"Graphical User Interface" (GUI), besitzt die Umgebung eine Menüschnittstelle, die Informa-tionen grafisch wiedergibt und ein entsprechendes Anzeigegerät benötigt, um mit dem Nutzerzu kommunizieren. Der User kann mit Hilfe der Peripheriegeräte verfügbare Funktionen mar-kieren und aktivieren. Anwendung finden solche Systeme z.B. in den heutigen Betriebsyste-men oder dem WWW.

Es existieren auch Interfaces mit reinem textuellen Charakter (Command Line Interface,CLI). Hier ist aber auch eine menüartige Struktur möglich, indem die Auswahlmöglichkeitendurch Aufzählungen oder Hyperlinks realisiert werden.

Die Aufgabe des GUIs ist es, den Nutzer eine möglichst vertraute Umgebung zu liefern. Ersollte sich ohne viel Anlernen auf der Plattform bzw. in dem Programm bewegen können undmöglichst schnell die Funktionalität voll ausschöpfen. Dieses Ziel steht jedoch des öfteren imKonflikt in der Unterbringung der kompletten Funktionsvielfalt.

Die Oberflächengestaltung ist ein Teil der Softwareentwicklung mit hoher Priorität. Sie stelltden direkten Kontakt zwischen dem Nutzer und dem Programm her. Nach der GoodmanRegel ist die subjektive Attraktivität einer Hypermediaapplikation zu Beginn der Nutzung zu80% von der visuellen und nur zu 20% vom Informationsgehalt und der Verwaltungsfähig-keit der Applikation abhängig.

Dies zeigt den hohen Stellenwert, dem das Benutzeroberflächen-Desgin zugeschrieben wer-den muss - vor allem im e-Learning-Bereich, bei dem einen gute Funktionalität und Strukturfür die Nutzung unabdingbar ist.


10

4. Multi- und Hypermedia

4.1. Multimedia

Multimedia, das Wort des Jahres 1995, wird gern in den verschiedensten Zusammenhängenverwendet. Vor allem in der Werbung, so scheint es, ist es zu einem universellen Begriffmutiert.

Doch was wird genau unter diesem Begriff verstanden? Issing beschreibt es folgendermaßen:

"Multimedia ist ein Sammelbegriff für solche hybriden Medien, die auf der Übertragungs-technik, Displaytechnik, Mikroprozessortechnik und Speichertechnik basieren und dabeimehrere Mediendarstellungsformen (Text,Video, Audio usw.) verfügbar machen. Multime-dialität wird wie alle Neue Medien durch die Eigenschaften der Individualität, Interaktivität,Asynchronität und Multifunktionalität charakterisiert." (Issing / Klimsa 2002)

Es zeigt sich, dass außer der Kombination der verschiedenen Medientypen auch der Punkt derInteraktivität mit einbezogen werden muss. Sie lässt sich durch eine Verbesserung der Men-sch-Maschine-Kommunikation erreichen, wobei der Nutzer selbst Einfluss auf den dargebo-tenen Inhalt bzw. den Programmablauf nehmen kann.

Multimedia ist nicht nur eine relativ neue Technologie mit ständig wachsender wirtschaftli-cher Bedeutung, sondern ermöglicht auch eine neue Art und Weise der Mediennutzung inInformations- und Lernprozessen. Die Situation der Nutzung von Medien hat sich dadurchgrundlegend verändert. Die möglichst perfekte Kombination der verschiedenen Medientypenund deren Handhabung ist das Hauptbestreben der Multimedia-Designer und eine allgemeineForschungsaufgabe der heutigen Zeit.

4.2. Hypertext und Hypermedia

Zur Begriffsklärung ist die Unterscheidung zwischen herkömmlichen Text und Media zubetrachten.

Beim Hypertext liegt der Schwerpunkt auf der textlichen Basis. Hypermedia hingegenbeschreibt die Inhalte, die einen größeren multimedialen Charakter haben und viele Grafiken,Ton, Videos etc. enthalten.

Hypertext und Hypermedia bieten eine neue Art der Textualität. Inhalte können durch Unter-teilung in Informationseinheiten auf unterschiedlichen Wegen erschlossen werden. Die ein-zelnen Teile werden miteinander verknüpft, wodurch eine flexiblerer Zugriff auf die Datenmöglich ist. Es entsteht ein System aus Knoten und Kanten. Während die Knoten die Infor-mationseinheiten darstellen, die Daten wie Text, Grafik, Ton etc. enthalten können, dienendie Kanten als Verdeutlichung der Verbindung zwischen den verschiedenen Inhalten.

Die Verknüpfung der Inhalte erfolgt durch Verlinkung von Teilen der Informationseinheitenwie z.B. einzelnen Wörtern, Satzteilen oder Icons. Die Nutzung solch verlinkter Systeme


11

kann als ein interaktiver Vorgang beschrieben werden, der durch die grafische Benutzer-schnittstelle gesteuert wird.

Die Verlinkungen sind in ihrer Art differenzierbar. Es wird von semantischen Verknüpfungengesprochen, wenn der verlinkte Informationsinhalt zur Erläuterung und somit dem einfache-ren Verständnis des Ausgangsknotens dient. Bei den sogenannten pragmatischen Kanten han-delt es sich um typisierte Verknüpfungen, die hieraischen, konzeptionellen oder argumentati-ven Charakter haben. Eine weitere Unterteilung betrifft die Richtung der Verknüpfung. Sokann die Verbindung uni- oder bidirektional aufgebaut sein.

Die Menge aller Kanten ergibt die Organisationsstruktur einer Hypertextbasis. Eine hierai-sche Strukturierung lässt z.B. die Aufteilung einer Thematik in verschiedene Ebenen bzw. dieTiefe des Detailgrades einer Beschreibung zu. Lineare Strukturen werden genutzt, um denNutzer auf eine vordefinierte Abfolge von Knotenpunkten zu setzen. So werden die Inhalte ingewünschter Reihenfolge erreicht und ermöglichen sogenannte "guided tours". Diese Art derStrukturierung eignet sich vor allem für die Einführung in Sachverhalte oder Themen, indenen die Inhalte vorgegebener Abfolge bedürfen. Heutige Hypertext- und e-Learningsysteme bedienen sich meist beider Strukturformen oder mischen diese nach Bedarf.

Von Funktionalität in einem Hypertextsystem wird ausgegangen, wenn eine Struktur vorhan-den ist, welche durch Navigationselemente oder Hilfen im System exploriert werden kann.Durch diese Interaktivität fördert der Hypertext nachweislich selbstgesteuertes und problem-orientiertes Lernen. Besonders in Verbindung mit komplexen Problemstellungen ergibt eineinnere Strukturierung aufgrund der oft sehr umfangreichen Datenbasis und unklaren Gebiets-grenzen Sinn. Sie ermöglicht einen gezielten und flexiblen Zugriff auf einzelne Inhalte.

Ein derartiger Aufbau kommt den Lerngewohnheiten erwachsener Menschen entgegen. Siewollen vorwiegend gezielt auf Inhalte zugreifen, um möglichst schnell konkrete Problemelösen zu können, ihr Wissen aufzufrischen oder zu vertiefen, eine kurze Einführung in neueSachverhalte zu erhalten oder um komplexe theoretische Tätigkeiten an Modellen oder Simu-lationen zu üben.

Es ist ebenfalls möglich, durch Hyperlinks direkt zu Aufgaben weiterzuleiten, die zurAnwendung eines Wissengebietes führen. Dadurch wird der Prozess des aktiven und kon-struktiven Lernens gefördert und prädestiniert aufgrund dieser Eigenschaften Hypermediabzw. Hypertext für den e-Learning Einsatz.


12

5. Regeln des Web Design

5.1. Layout

Zur Gestaltung einer Oberfläche, Webseite oder ähnlichem sind Kenntnisse über die ver-schiedenen Gestaltungselemente nötig. Mögliche Elemente sind Schriften, Bilder, Linien,Flächen und Strukturen.

Durch die verschiedenen Anordnungsmöglichkeiten der Elemente können differenzierte Wir-kungen hervorgerufen werden. So wird z.B. Bewegung und gleichzeitig Spannung erzeugt,wenn die Bildelemente in unterschiedlichen Abständen zum Außenrand der Bildfläche ste-hen. Oder es entsteht ein Eindruck von Ruhe, wenn die genutzte Fläche sich in der Arbeitsflä-chenmitte befindet. Die Vorder- und Hintergründe werden als verschiedene Flächen angese-hen und bilden das Fundament der Bildgestaltung. Durch ihre Proportionierung und Kompo-sition entsteht das Gefühl von Spannung oder Ruhe, welches bewußt genutzt werden sollte.

So können je nach Bedarf und gewollter Aussage verschiedene Spannungsverhältnisse fürdas Seitenlayout genutzt werden, um dessen Ausdruck und individuellen Charakter zu unter-streichen.

Der aus dem Printbereich bekannte und oft genutzte "Goldene Schnitt" (Seitenverhältnis1:1,618) lässt sich ohne Probleme auch auf das Querformat und somit für den digitalen Ein-satz übertragen.

Vor allem der Mathematiker Leonardo Fibonacci (ca. 1170-1240) ist durch seine Proportions-gesetzmäßigkeiten bekannt. Seine rekursive Gesetzmäßigkeit an+2 = an+1 + an beschreibt einesehr harmonische, weil proportionale Beziehung.

Erweitert wurde diese Gesetzmäßigkeit durch die sogenannte "Goldene Spirale", die sichebenfalls perfekt für eine ausgewogene, innovative Gestaltung einer Webseite eignet. Hierbeiwird die Fibonacci-Formel durch eine logarithmische Spirale erweitert, die ein besonderesHarmoniegebilde erzeugt. Allgemein ist diese Kurve auch als Fibonacci-Spirale bekannt.

Abbildung 3. Fibonacci-Spirale


13

Zu finden ist diese Gesetzmäßigkeit ebenfalls in der Natur, wie an den Gehäusen verschiede-ner Schalentiere zu sehen ist. Sie ist somit natürlichen Ursprungs. Ein Leitsatz in diesemZusammenhang lautet, das Leben nichts anfangen kann mit etwas, das nirgends beginnt. DieFibonacci-Sequenz mit 1 als Anfang stellt hier eine Näherung und Lösung dar.

Abbildung 4. Schneckengehäuse enthält Fibonacci Spirale

5.2. Farbnutzung

5.2.1. Farben

Im Gegensatz zum Printbereich kostet der Einsatz von Farben im digitalen Bereich kein Geld,trotzdem sollte auch hier überlegt damit umgegangen werden. Ein sachlicher bzw. vertrau-ensvoller Eindruck kann nur durch eine strenge Limitierung der Farbpalette erreicht werden.Zu viele Farben wirken schnell unübersichtlich und chaotisch. Für die Vermittlung von infor-mativen Inhalten, vor allem im e-Learning Bereich, sollte dies vermieden werden, da diesansonsten Lesbarkeit der Inhalte und Konzentration des Betrachters beeinträchtigt.

Bei der Verwendung von Farben ergibt sich je nach gewähltem Farbton eine andere psycho-logische Wirkung auf den Betrachter. Diese im Gehirn verankerte Symbolik wird von ver-schiedenen Faktoren beeinflußt. Je nach Herkunft, Erziehung und Sensibilität des Betrachterswerden verschiedene Emotionen ausgelöst.

Ein bekanntes Zitat, was diese möglichen Assoziationen zu Farben gut veranschaulicht lautet:


14

"Grau, teurer Freund ist alle Theorie, und Grün des Lebens goldener Baum." (Mephisto inGoethe's Faust)

Zum Beispiel gilt die Farbe Rot allgemein als kraftvoll, glühend, leuchtend, aktiv. In unsererGesellschaft symbolisiert sie desweiteren Wärme, Feuer, Blut, Spannung, Liebe aber auchGefahr. In anderen Gesellschaftsformen kann sie jedoch für das Unmoralische, den Zorn unddas Verbotene stehen.

Unbestritten ist, dass Emotionen durch Farben gesteuert werden können. Sie entscheiden übereinen sachlichen oder unterhaltenden Charakter einer Webseite. Ihre Auswahl ist somit beimDesignvorgang genau zu durchdenken.

Ein weiterer bei der Farbwahl zu beachtender Faktor ist die Sensibilität der Augen gegenüberFarben. Unterschiedliche Farben werden unterschiedlich durch die Sinneszellen im Augewahrgenommen. Bei einer Kombination von z.B. Rot und Blau tritt das Blau immer in denHintergrund. Begründet ist das durch den Aufbau und die spezifischen Eigenschaften desmenschlichen Auges.

Die unterschiedlichen Wirkungen der Farben machen desweiteren eine Unterteilung in ver-schiedene Farbgruppen möglich. So wird z.B. in warme und kalte Farben unterschieden. DiePalette der warmen Farben reicht von Gelb über Rot bis Purpur. Danach beginnt der Bereichder kalten Farben, der den Bereich von Violett über Blau bis hin zum Grün enthält.

Abbildung 5. Übersicht der Farben am Farbkreis


15

5.2.2. Farbkontraste

Bei der Wahrnehmung digitaler Texte spielen die genutzten Farbkontraste zwischen Text-farbe und Hintergrund eine große Rolle. Sie sind ausschlaggebend für die Qualität der Infor-mationsaufnahme und bedürfen besonderer Sorgfalt.

Farbkontraste beschreiben Farbzusammenstellungen, die im Farbkreis gegenüberliegendpositioniert sind. Die Kombination von Gegenfarben stellt den größtmöglichen Kontrast dar.Es wird in verschiedene Kontrastformen unterschieden, die bestimmte Wirkungen beimBetrachter hervorrufen: hell-dunkel, warm-kalt, leuchtend-stumpf, bunt-unbunt, viel-wenig.

Der Text eines Bildschirminhalts muss in einem ausreichend starkem Kontrast zum Hinter-grund stehen, damit er ohne besondere Anstrengungen wahrgenommen werden kann. Jedochkann es bei der Wahl eines zu starken Kontrastes zu einer Art Flimmererscheinung kommen.Vor allem bei der Verwendung von Komplementärfarben ist diese Erscheinung oftmals zubeobachten, wodurch ihre Verwendung weitest gehend ausschlossen werden kann. Farbenmit hoher Sättigung und Eigenhelligkeit sowie Kontrastfarben sollten nur für Startseiten oderSeiten mit wenig Text verwendet werden, da sie zu anstrengend für eine dauerhafte Betrach-tung sind.

Als geeignete Kontraste für die Textdarstellung gelten die unbunten (schwarz-weiß-grau) undunbunt-bunt Kontraste (schwarz-Farbe bzw. weiß-Farbe). Sie garantieren gute Lesbarkeit,ohne dabei die Augen durch Überanstrengung zu belasten. Als besonders schonend gilt dieVerwendung eines dunklen, unbunten Hintergrundes. Dies kann jedoch der Darstellung ins-gesamt ein sehr trist wirkendes Erscheinungsbild verleihen.

Häufig verwendet werden Farbkombinationen, die auf den Temperaturkontrasten einer Farbeberuhen. Die Farben werden dabei so gewählt, dass Flimmereffekte nicht entstehen könnenund das Bild in sich einen ruhigen Eindruck ergibt.

5.2.3. Farbharmonien / Farbkombinationen

Das Ziel bei der Verwendung von Farben ist das Erreichen einer Farbharmonie. Die Farben-nuancen sollen individuell und funktional richtig gewählt sein und trotzdem einer gewissenAusgewogenheit unterliegen. Es existieren verschiedene Theorien, die Farbharmonienbeschreiben. Es erweist sich als sehr schwierig konkrete Farbharmonien zu definieren, dadiese subjektive Empfindungen jedes einzelnen Betrachters sind. Sie unterliegen aber den-noch gewissen allgemeinen Gesetzmäßigkeiten.

Farbharmonien bezeichnen Rhythmen in den Farbabständen und in den Flächenbeziehungen.Urteile ob eine harmonische Beziehung vorliegt, lassen sich allgemein somit erst bei derBetrachtung der Gesamtgestaltung fällen. Farben müssen sich ergänzen und gegenseitig stei-gern. Umso mehr Farben verwendet werden, desto schwieriger lässt sich die gewünschte Har-monie finden. Sie entsteht im Grunde nur, wenn gewisse Gesetzmäßigkeiten bei der Farbwahlbeachtet werden.

Zu den einfachsten und effizientesten Möglichkeiten ein harmonisches Farbkonzept zu erstel-len, gehört die Zusammenstellung verschiedener Tonstufen einer Farbe. Dabei entscheidetdann nicht die Farbe für das Gefühl von Harmonie, sondern die Verwendung von Kontrasten,die räumliche Anordnung, die Form usw..


16

Um sicher Harmonien mit verschiedenen Farben zu erstellen, kann die Theorie von RomanLiedl herangezogen werden. Sie besagt, dass harmonische Farbzusammenstellungen aufKomplementärkontrasten beruhen. Am Farbkreis lassen sich diese Zusammenhänge guterkennen und verstehen. Dabei gibt es die Möglichkeit mehrere Farben miteinander zu kom-binieren - wichtig ist dabei immer, dass die Harmonie im Farbkreis erhalten bleibt.

Abbildung 6. Farbharmonien nach R. Liedl


17

Eine weitere Möglichkeit für die Erstellung harmonischer, ausgeglichener Farbkombinatio-nen ist die Verwendung von Farben mit gleichen Eigenschaften und Wirkungsweisen. EinEinteilung kann in folgende Bereich erfolgen:

• auffallende Farbkombinationen

Farben mit voller Sättigung treten immer in den Vordergrund. Sie werden vor allem inder Werbung verwendet, sind aber für umfangreiche Inhalte nicht verwendbar.

• leichte Farbkombinationen

Leichte Farben stellen das Gegenteil zu den auffallenden Farben dar. Sie besitzen einegeringe Sättigung und eine hohen weiß-Anteil und stehen für den Frühling, Leichtigkeit,Freiheit und Weite.

• aufregende Farbkombinationen

Wie die auffallenden Farben nutzt die Familie der aufregenden Farbkombinationen -mindestens eine Farbe in voller Sättigung. Ungewöhnlich sind hier jedoch die Farbkom-binationen. Es werden fast ausschließlich Farbtöne wie Rot, Violett oder Orangegenutzt. Anstatt Kombinationen mit Primär-Kontrastfarben einzugehen, treten sie immergepaart mit im Farbkreis naheliegenden Sekundärfarben auf. Sie repräsentieren Aufre-gung, Aktion, aber auch Gewalt.

• natürliche Farbkombinationen

Natürliche Farben orientieren sich an den in der Natur am meisten vertretenden Fartönenund -kombinationen. So sind hier hauptsächlich dunkle Farben zu finden. Vor allemBraun, Grün und Schwarz dominieren die Palette. Die Nutzung dieser Kombinationenergibt einen traditionelles, reales Bild.

• warme Farbkombinationen

Wie man im Namen erwartet werden hier warme Farben, wie Gelb, Orange, Braun usw.verwendet. Sie vermitteln ein positives, natürliches, warmes Gefühl.

• kalte Farben

Blau, Grün und Violett bilden die Farben für Farbkombinationen der kalten Familie. Sievermitteln Strenge, Seriösität und Einsamkeit.


18

5.3. Typographie

5.3.1. Schriftarten

Jede Schriftart hat ihre speziellen Eigenschaften und ihren individuellen Ausdruck, der beiihrer Verwendung beachtet werden sollte. Generell werden die verschiedenen Schriften inzwei große Familien untergliedert – die Serifen- und die Groteskschriften.

Die Serifenschrift, welche auch als Antiquaschrift bezeichnet wird, findet ihre Anwendungvor allem im Bereich der Printmedien. Sie ist gekennzeichnet durch kleine Abschlussstricheam oberen und unteren Rand der Buchstaben, die das Lesen erleichtern sollen. Auf demMonitor erschweren diese Eigenschaften jedoch die Lesbarkeit. Aufgrund der quadratischenPixelung der Bildschirme, werden die Serifen oftmals falsch dargestellt und zerstören mehrdas Schriftbild als den Lesefluss zu fördern. Erschwerend kommen die verschiedenen Strich-stärken der Serifenschrift hinzu, welche ebenfalls unvorteilhaft aufgerastert werden können.

Im digitalen Bereich wird deshalb mehr auf die Familie der Groteskschriften (auch Antiqua-oder Sans Serif-Schriften genannt) zurückgegriffen. Sie stellen das Gegenstück zu den Seri-fenschriften dar. Bei ihrer Konzeption wurde auf verzierende Elemente zu Gunsten der Wie-dergabequalität auf Bildschirmen verzichtet.

Abbildung 7. Serifen- & Groteskschrift

Es existieren noch unzählige andere Schriftarten, die nicht in die Kategorien Serif oder Gro-tesk passen. Von ihrer Verwendung für längere Textpassagen ist jedoch abzuraten, da es sichmeist um experimentelle Schriften handelt, die die Lesbarkeit meist erschweren als erleich-tern.

Die Verwendung vieler verschiedener Schriftarten ist ebenfalls zu vermeiden. Sie stören dasallgemeine Schriftbild und damit auch den Textfluss und sollten somit so weit wie möglichreduziert und gezielt eingesetzt werden.

Für die Schriftgröße sollten mindestens 10 pt angesetzt werden, um eine gute Lesbarkeit aufdem Monitor zu gewährleisten. Desweiteren sind spezielle Formatierungen, wie kursiver oderfetter Druck, sparsam zu verwenden.

Besondere Vorsicht ist bei der Nutzung unterstrichener Textteile geboten, da sie vom Leserleicht als Hyperlinks verwechselt werden könnten. Als optimal für die Darstellung von Fließ-texten im Webdesign gilt die Schriftart "New Times Roman" in der serifenlosen Variante miteiner Größe von 10-12pt.


19

5.3.2. Überschriften

Ein Element der Textgliederung sind Überschriften. Sie sollen kurz den anschließendenAbsatz bzw. Textabschnitt mit Schlagwörtern beschreiben und den Leser so einen Eindruckdarüber geben, was ihn im wesentlichen erwartet und bei der Orientierung in längeren Textenunterstützen.

Die Gestaltungsregeln für Überschriften lassen mehr individuellen Freiraum als die für Fließ-texte. Da die Aufgabe der Überschriften darin liegt, dem Leser schnell ins Auge zu fallen,können hier Formatierungen, wie fetter, kursiver, unterstrichener oder farbiger Druck, freiergenutzt werden.

Trotzdem gibt es gewisse Gesetzmäßigkeiten, die beachtet werden sollten. So müssen dieÜberschriften vom eigentlichen Text abgesetzt sein oder zumindest fett formatiert werden,um auch als solche identifiziert zu werden. Desweiteren sollten Textabschnitte, die auf zen-trierte Überschriften folgen, mit Blocksatz formatiert werden.

5.3.3. Spaltenbreite

Je größer eine Textmenge, um so genauer ist auf die Lesbarkeit zu achten. Großen Einflußauf die Lesequalität eines Textes hat auch die Zeilenlänge. Ist sie zu lang gewählt, hat derLeser Probleme die nächste Zeile zu finden.

Vor allem im digitalen Bereich wird deshalb der Text oftmals in mehrere Spalten aufgeteilt.Die Breite wird je nach Nutzung angepasst. So werden z.B. in wissenschaftlichen Texten biszu vier Spalten verwendet, da der Inhalt große Konzentration verlangt und der Text möglichstleicht erfassbar sein muss. In Magazinen werden meist zwei Spalten verwendet, da dies einschnelles Lesen ermöglicht. Die Nutzung nur einer Spalte ist eher im Buchdruck anzusiedeln.Romane und andere Unterhaltungsbuchformate nutzen diese Art der Textunterteilung.

Für den digitalen Bereich wird eine ungefähre Zeilenlänge von 7-10 Wörtern angesetzt.Wenn die Texte aufgrund ihres Umfangs es benötigen, werden mehrere Spalten genutzt. Wer-den trotzdem längere Zeilen verwendet, ist es ratsam den Zeilenabstand (Durchschuss)dementsprechend zu erhöhen, um den Augen einfache Orientierung beim Zeilenwechsel zubieten. Desweiteren ist allgemein von der Nutzung von Blocksatzformatierungen abzuraten,da die variierenden Wortabstände den Leser irritieren.

5.3.4. Fußnoten

Ergänzungen und Erläuterungen werden durch hochgestellte Sternchen oder Nummerierun-gen signalisiert. Die Fußnoten selbst sind kleiner als der Grundtext formatiert und von ihmmindestens durch eine Leerzeile abgetrennt, um auch als solche erkannt zu werden.


20

5.3.5. Bilderläuterungen

Bilderläuterungen sind kurze Textpassagen und dienen zur Erklärung verwendeter Bilder. Siewerden bevorzugt in einer Zeile Abstand unter dem zu erläuterndem Bild positioniert undlinks- oder rechtsbündig formatiert.

Bei der Schriftgröße sollten ein bis zwei pt weniger als für das normale Schriftbild gewähltwerden.


21

6. XML, XHTML und CSS

6.1. Xtensible Markup Language (XML)

XML wurde vom World Wide Web Consortium (http://www.w3.org/) entwickelt, eine Orga-nisation, die sich aus Experten und Forschern der Computer-, Intranet-, Internet- und Medien-branche zusammensetzt. 1996 wurde XML veröffentlicht und gilt seitdem als Standard fürAuszeichnungssprachen. Ihr Erfolg war enorm und findet heute Anwendung in den unter-schiedlichsten Bereichen.

Das W3C entwickelte auch die SGML (Standard Generalized Markup Language), die alsMutter des XML, HTML und XHTML gilt.

Durch die standardisierte Formatierung, die XML bietet, ist es ebenfalls möglich, Datensätzebei entsprechender Implementierung in verschiedenste Programme zu importieren, was denpraktischen Nutzen enorm steigert.

Für die Entwicklung von XML waren die gewonnenen Erfahrungen über die Stärken undSchwächen der SGML ausschlaggebend. XML sollte eine ebenso große Leistungsfähigkeitbesitzen, jedoch ohne die zu zahlreich und komplex enthaltenen Features.

Die Hauptaufgaben von XML fallen in einer der folgenden zwei Kategorien: Dokumenteoder Datenaustausch und Datenbank-Vernetzung.

Vor XML und der Standardisierung der Datenstrukturen wurden unterschiedliche Lösungenumgesetzt, was in einer unüberschaubaren Anzahl von Formaten endete. Ein Transfer zwi-schen den Datenbanken verschiedener Hersteller und Betriebsysteme war nur schwer odergar nicht möglich.

XML löste diese Probleme. Es bietet einen offenen, nicht proprietären Austausch von Datenohne Komplikationen. Die Organisation des Datenaustauschs ist eine der Hauptanwendungenvon XML.

Die Struktur der Dokumente ähnelt sehr dem Aufbau eines HTML Dokumentes, welches sichebenfalls aus SGML heraus entwickelt hat. Der entscheidende Unterschied besteht darin, dassin XML dem Nutzer eine beliebig große Anzahl von Elementtypen zur Verfügung stehenkann, die er bei Bedarf selbst erweitert. So kann für jedes Anwendungsgebiet und seinen spe-ziellen Anforderungen ein entsprechender Datensatz erstellt werden.

Die Strukturierung der XML Dokumente erfolgt durch die Verwendung von Tags mit denzugehörigen Elemententypen. XML gehört zur Familie der Auszeichnungssprachen undbesitzt somit auch ihren typischen Syntax.

Beispiel: <element>

Der gesamte Klammerausdruck wird als "tag" bezeichnet und "element" stellt den Element-typ dar. Die eigentlichen Inhalte werden durch die Tags eingeschlossen und können so ein-deutig ihrer Gattung zugeordnet werden. Jedes Markup muss mit einem Start-Tag beginnen


22

url(http://www.w3.org/)

und durch ein Schluß-Tag geschlossen werden, um eine eindeutige Zuordnung zu gewährlei-sten. Fehler werden im Gegensatz zur HTML nicht toleriert und machen das komplette Doku-ment ungültig.

Die Tags können zusätzlich durch Attribute erweitert werden. Attribute bestehen aus einemAttributnamen und einem dazugehörigen Wert. Werte müssen durch Anführungszeichen amAnfang und am Ende gekennzeichnet werden.

Durch die Verschachtelung der Tags kann eine hieraische Struktur in den Dokumenten aufge-baut werden.

z.B. ein XML-Book:

<Book>

<Table Of Content> ... </Table Of Content>

<Chapter>

<Chaptertitle> ... </Chaptertitle>

<Section>

<Title> ... </Title>

<Para> ... </Para>

</Section>

</Chapter>

</Book>

6.2. eXtensible Hypertext Markup Language (XHTML)

XHTML 1.0 stellt eine Weiterentwicklung der HTML 4.01in Richtung Fehlerintoleranz undErweiterbarkeit der Dokumente dar. XHTML basiert auf XML und verfügt dadurch über des-sen Ausbaufähigkeit und Notwendigkeit der Validität. Die typographischen Auszeichnungs-elemente sind mit denen der HTML identisch. Weggefallen sind alle optischen Formatie-rungsauszeichnungen, die der direkten Farbzuweisung, Textformatierung oder ähnlichem die-nen. Sie sind in der strikten XHTML Variante nicht mehr gestattet und müssen extern defi-niert werden. Dies soll die Trennung von Layout und Inhalt als Standard für das WWWdurchsetzen. So werden Fehler bei der Verwendung alternativer Ausgabemedien vermieden.

Das World Wide Web Consortium bietet Validatoren an, um die erstellten XHTML Doku-mente auf ihre Richtigkeit zu überprüfen.

Die geforderten Punkte entsprechen der XML Philosophie, da hier ebenfalls Inhalt undDesign getrennt existieren und erst durch entsprechende Style Sheets optisch aufbereitet wer-den können. Ein weiteres Stichwort in diesem Zusammenhang lautet Barrierefreiheit des


23

Internets, was Menschen mit dem Bedürfnis nach speziellen Ausgabeformatierungen zu Gutekommt.

Das World Wide Web Consortium bietet Validatoren an, um die erstellten XHTML Doku-mente auf ihre Richtigkeit zu überprüfen.

Neben Strict XHTML existiert noch Transitional XHTML, Basic XHTML und eine FramesetVariante, die komplette Kompatibilität zu HTML 4.01garantieren soll und deren gesamtenSatz an Elementtypen beinhaltet.

Ein Ziel dieser Modularisierungen der Elemente ist der Nutzen von Teilmodulen je nachBedarf im Baukastenprinzip. Erste Anwendungen sind das auf Kompatibilität verzichtendeXHTML 1.1 oder Mischsprachen wie SMIL, die eigene DTDs verwenden und spezielle Nut-zungfelder bedienen.

XTHML soll HTML in Zukunft möglichst komplett ablösen, da es sich aller Vorzüge derXML-Sprache bemächtigt. So ist der Inhalt besser gegliedert und strukturiert, was neue Funk-tionalitäten in der Anbindung zum WWW ermöglicht. Die Fehler-Intoleranz soll desweiterendazu beitragen, das Web mehr und mehr zu standardisieren, den Nutzer vor fehlerhaften Sei-ten zu bewahren und eine bessere Katalogisierung der Daten zu ermöglichen.

Unterschiede im Syntax der XHTML 1.0 zur HTML 4.01:

• alle Elemente und Attribute werden klein geschrieben

• alle Formatierungs-Elemente müssen geschlossen werden, was auch Elemente betrifft,die in HTML 4.01 keine schließenden Auszeichnungen benötigten, wie z.B. <img>,<br> ...

• der XHTML-Kopf muss alle benötigten Dokumentbeschreibungen enthalten, die Con-tent, Formatierung und verwendeten Zeichensatz betreffen

• alle Attributwerte müssen in Anführungszeichen gebettet sein

6.3. Document Type Definition (DTD)

Um den reibungslosen Datenaustausch zu gewährleisten, sind spezifizierte Datentypen not-wendig, auf die sich bei der Erstellung von Dokumenten beschränkt werden muss. So werdendie möglichen Elemente eines XML oder XHTML Dokumentes in einem separierten Doku-ment definiert, dem DTD.

Hier wird die gültige Syntax für die Markup Elemente eines Dokumentes, sowie dessenStrukturierung festgelegt. Die Regelungen in der DTD sind für ein Dokument bindend undführen bei Verstößen zur Ungültigkeit.

Vereinfacht kann angenommen werden, dass XML die Sprache darstellt und die DTD die Artund Weise, wie die Sprache verwendet wird.


24

Für viele Anwendungsbereiche sind bereits DTDs verfügbar. Diese Sets vorgefertigter Daten-typen sollen einen einheitlichen Austausch im Netz gewährleisten und sind optimal an diespeziellen Anforderungen angepasst.

Beispiele verfügbarer DTDs:

• MatheML (Mathematic Markup Language)

Ermöglicht den Austausch und die Darstellung aufwendiger mathematischer Formeln.

• SMIL (Synchonized Multimedia Integration Language)

Mit SMIL ist die Integration und Kombination verschiedenster Medientypen möglich.Die Sprache erlaubt eine genau Steuerung der einzelnen Elemente und deren Kombina-tionen.

• CML (Chemical Markup Language)

Auch für den Chemiebereich wurde eine standardisierte Auszeichnungssprache ent-wickelt. Sie bietet die Möglichkeiten, chemische Vorgänge oder Atomaufbauten zubeschreiben.

• CDF (Channel Definition Format)

Dieses Format wurde zur einheitlichen Formatierung von Informations-Kanälen ent-wickelt.

6.4. Cascading Style Sheets (CSS)

HTML wurde ursprünglich als eine Auszeichnungssprache für Informationen entwickelt. Siesollte es lediglich ermöglichen, Daten zu strukturieren. Folglich war es nicht Aufgabe, Lay-outattribute wie Schriftarten, Farben, Schriftgrößen, Bilderpositionierungen usw. zu definie-ren.

Desweiteren war ein Grundsatz Inhalte und Präsentation getrennt voneinander zu halten, derdurch die Weiterentwicklung der HTML immer mehr mißachtet wurde. So wurden die Cas-cading Style Sheets entwickelt. Es existieren auch verschiedene andere Ansätze für die Auf-bereitung von HTML bzw. XHTML, die jedoch hinfällig waren, als 1996 das W3C CSS offi-ziell als Standard definierte.

CSS ist eine Formatierungssprache, die es Autoren, Designern und Benutzern ermöglicht,Formatierungen wie z.B. Schriftarten, Farben, Rahmen, Hintergünde usw. für strukturierteDokumente (wie XML, HTML, XHTML) zu definieren und dann in der Kombination mitden Dokumenten optisch aufzubereiten.

Heute sind verschiedene Versionen von CSS verfügbar. Die derzeit aktuellste Version, CSS2.0, wurde nur zwei Jahre nach der Ursprungs-Version verabschiedet.


25

Der CSS-Syntax besteht aus den Elementen der DTD des XML-, XHTML- oder HTML-Dokumentes. Jedem Element können Eigenschaften zugeordnet werden, die durch zugehö-rige Werte spezifiziert werden.

Beispiel: Element { Eigenschaft1: Wert1; Eigenschaft2: Wert2; } /* Kommentare */

CSS bietet sehr gute Möglichkeiten zur optischen Aufbereitung von Markup Languages. Eszeichnet sich vor allem durch seinen großen Funktionsumfang und seine einfache Anwen-dung aus.

Es existieren verschiedene Möglichkeiten XHTML mit CSS zu formatieren. So können direktim Dokument an den benötigten Stellen Formatierungen eingesetzt werden.

Zum Beispiel die Farbe für eine Überschrift:

<h1 style="color: #000000;"> Überschrift </h1>

Das hat jedoch den Nachteil, das an jeder Stelle, die diese Einstellung verwenden soll, diegesamte Formatierung neu aufgeführt werden muss und bei möglichen Änderungswünschenalle Einträge einzeln korrigiert werden müssen.

Eine weitere Möglichkeit bieten die durch CSS erstellbaren Klassen. Sie werden im Kopf desDokumentes definiert und können danach nach Belieben zur Formatierung im Dokument her-angezogen werden. Das hat den entscheidenden Vorteil, dass Änderungen an der entspre-chenden Klasse sich später bei der Ausgabe auf alle Elemente beziehen, die sie verwenden.

Wieder sollen Überschriften Farben zugewiesen werden:

<style type="text/css"> h1.color { color: #000000; } </style>

<h1 class="color"> Überschrift </h1>

Eine neue Ebene der Möglichkeiten für das Layout und die Gestaltung bietet die Formatie-rungsmöglichkeit der HTML Elemente <div> und <span>. Sie sind eigenschaftslos, außerdass <div> den Beginn einer neuen Zeile erzwingt. Dadurch kann durch die Kombinationvon CSS und diesen Elementen eine beliebige Gruppe von Formatierungsklassen definiertwerden. Während <span> vorranging als sogenanntes "inline" Element verwendet wird erga-ben sich bei der Nutzung des div-Elements neue Möglichkeiten. Aus den Möglichkeiten inCSS Elementen Positionen, Farben und Größen zuzuordnen entstand das div-Boxen Modell.Die Boxen können frei auf den Bildschirm positioniert und mit beliebigen Inhalten gefülltwerden, was das Layout von Webseiten revolutionierte. Deshalb findet es heute sehr regeAnwendung und hat die Nutzung von vielen herkömmlichen HTML Elementen, die imUrsprung nie zum layouten gedacht waren (wie z.B. Tabellen), ersetzt.

Das folgende Beispiel zeigt wie eine farbige Box unten rechts am Browserrand positioniertwerden kann:

<style type="text/css"> div.box { position: absolute; bottom: 0; right: 0; background:#123456; width: 100px; height: 100px; } </style>


26

<div class="box"></div>

Da jedoch bei Projekten mit aufwendigen Layouts sehr viele dieser Klassen benötigen wer-den und die Regel der Trennung von Design und Inhalt beachtet werden sollte, empfiehlt essich, die Style Definitionen in separaten Dokumenten abzulegen. Die sogenannten StyleSheets weisen die Dateiendung CSS auf und müssen in den HTML bzw. XHTML Dokumen-ten, welche sie verwenden möchten, als externes Style Sheet angegeben werden. Desweiterenist es möglich, alternative Style Sheets anzubieten. So kann derselbe Inhalt durch die Ver-wendung verschiedener CSS-Dateien komplett anders strukturiert werden.

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="alternate stylesheet"type="text/css" href="bw.css" title="s/w" />

Die Möglichkeit des Auslagerung in externe CSS Dokumente und die Nutzung alternativerFormatierungen wird ergänzt durch die Zuweisungsoptionen von Style Sheets in Abhängig-keit vom Ausgabemedium. So ist es z.B. meistens bei der Arbeit mit div-Boxen notwendig,für die Ausgabe auf dem Drucker ein eigenes Style Sheet zu definieren. Wenn dieses vorhan-den ist, muss es im XHTML Dokument noch als solches aufgeführt werden. Dabei ist aufeine genau Zuweisung der Style Sheets zu den einzelnen Medientypen zu achten, da es sonstzu einer Mischung der Attribute kommen kann.

<link rel="stylesheet" media="print" type="text/css" href="printer.css" />


27

7. Barrierefreiheit eines Webauftrittes

7.1. Barrierefreie Informationstechnik-Verordnung(BITV)

Am 1. Mai 2002 trat in Deutschland das Gesetz der Behindertengleichstellung in Bezug aufdie Informationstechnik in Kraft.

Als behindert gelten Personen deren körperliche Funktion, geistige Fähigkeit oder seelischeGesundheit länger als sechs Monate von dem für das entsprechende Lebensalter typischenZustand abweicht und dadurch ihre Teilhabe am gesellschaftlichen Leben beeinträchtigt wird.Sie benötigen deshalb spezielle Berücksichtigung in Bereichen wie bauliche Anlagen, Ver-kehrsmittel, technische Gebrauchsgegenstände, aber auch bei der Nutzung akustischer undvisueller Informationsquellen und Kommunikationseinrichtungen.

Ist ein Behinderten gerechter Zustand erreicht, kann von Barrierenfreiheit gesprochen wer-den. Somit wird klar, dass den Behinderten ein grundsätzlicher Zugang und eine uneinge-schränkte Nutzung aller Lebensbereiche gewährt werden sollte und muss. Vor allem öffentli-che Bereiche sowie der Nahverkehr sind verpflichtet, diese Anforderungen zu beachten.

Diese Regelungen betreffen demnach auch das WWW. So sind Seiten öffentlicher Anstaltenunter Beachtung bestimmter Kriterien zu erstellen und entsprechend zu evaluieren. Aber auchfür alle anderen Seiten wird es begrüßt, diese Regelungen wahrzunehmen.

Das Internet, als eine der größten Informationsquellen weltweit, wird ständig aktualisiert undbietet Zugang zu nahezu allen gewünschten Daten. Somit bietet es einen hohen Nutzwert fürMenschen, die im normalen Leben dazu nur schwer Zugang haben oder auf Hilfe andererangewiesen sind - also vor allem Behinderte. So ist es z.B. nun für sie möglich, sich selbstonline weiterzubilden, einzukaufen oder einfach Spaß zu haben.

7.2. W3C "Web Content Accessibility Guidelines"

Behinderte Menschen sind oft auf andere Aus- und Eingabegeräte für die Nutzung des Inter-nets als nicht-Behinderte angewiesen, z.B.:

• Braillezeilen (Blindenpunktschriftausgabe)

• speziell angepasste Tastaturen

• Textbrowser in Verbindung mit Screenreader


28

Da die alternativen Ausgabegeräte nicht die Möglichkeiten bieten wie beispielsweise der nor-male Bildschirm, werden nicht darstellbare Elemente herausgefiltert. Um dadurch jedoch denKontext nicht komplett zu zerstören, sind verschiedene Anforderungen an die Formatierungder Internetseiten zu stellen.

Wichtige Grundvorraussetzungen für einen barrierefreihen Webauftritt lauten:

• die Web-Dokumente müssen gültig sein

• strikte Trennung von Inhalt und Design

• logische Strukturierung der Inhalte

Diese Anforderungen werden in den "Web Content Accessibility Guidelines" von dem WorldWide Web Consortium konkret definiert. Wie alle W3C Standards sind diese als allgemein-gültig anerkannt und werden nur durch die Länder spezifisch untergliedert.

Folgende Anforderung stellen die Web Content Accessibility Guidelines 1.0 in der erstenPrioritätstufe:

1. Bei der Verwendung von Bildern-, Video- und Audiodaten ist ein alternativer Textanzubieten, welcher den Inhalt der den Behinderten nicht zugänglichen Objekte wie-dergibt. Desweiteren ist bei der Nutzung von "image-maps" eine separate Bereitstel-lung von Links zu jedem Feld der Karte vorzunehmen.

2. Bei der Verwendung von Farben ist zu beachten, dass alle Inhalte auch ohne ihre Ver-wendung erfassbar bleiben. Das betrifft vor allem die Navigationselemente, die oftohne Rücksicht auf alternative Ausgabegeräte entworfen werden.

3. Die genutzte Sprache und der somit entsprechend benötigte Zeichensatz müssen immerangegeben werden.

4. Bei der Verwendung von Tabellen müssen zugehörige Zeilen und Spalten gekenn-zeichnet werden. In den Markup-Sprachen existieren dafür nutzbare Attribute.

5. Die Dokumente müssen so aufgebaut werden, dass ihr Inhalt auch ohne Style SheetAufbereitung oder Nutzung neuartiger Technologien, wie z.B. Java-Script oder Flash,komplett erfassbar bleibt.

6. Blinkende oder automatisch scrollende Texte sind zu vermeiden oder zumindest sollteihre Implementierung eine Anpassung oder Deaktivierung dieser Eigenschaften bieten.

7. Falls die Steuerung der Seiten über Skripte, Applets oder vergleichbaren realisiertwurde, ist eine Kompatibilität mit alternativen Eingabegeräten zu gewährleisten.

8. Image Maps sind immer clientseitig zu entwerfen, da sonst eine Steuerung mit alterna-tiven Ein- und Ausgabegeräten nicht garantiert werden kann.


29

9. Die Hauptseite einer Webpräsenz soll die barrierefreien Eigenschaften beachten. Es istnicht Ziel, eine Alternativ-Seite anzubieten, welche behindertengerecht organisiertwird, da diese in den meisten Fällen nicht in gleichen Abständen wie die Hauptseitegepflegt wird.

10. Bei der allgemein abzuratenden Verwendung von Frames ist jedes genutzte Frame zubenennen, um es genau identifizieren und navigieren zu können.

11. Zu Gunsten der Verständlichkeit der angebotenen Inhalte sollten diese möglichst ein-fach formuliert werden. Unnötige Satzverschachtelungen sollten vermieden werden.


30

8. Anforderungen an die UmsetzungDie Vermittlung von Wissens basiert auf speziellen didaktischen Methoden und Strukturen,die sich bei einer digitalen Umsetzung in der Oberfläche wiederspiegeln müssen. So gilt fürden Entwickler, dass er sich mit dem von ihm umzusetzenden, grundlegenden Lehrsystemzuerst intensiv auseinandersetzen muss, um dessen Didaktik zu verstehen.

Die Verbindung des Lehrmodels und der Benutzerschnittstelle kann wie folgt in einem drei-dimensionalen Raum aufgefasst werden:

Abbildung 8. Konstruktionsraum für eine Hypermedia-Lernumgebung

Es ist zu erkennen, dass die darstellende Ebene (die Oberfläche) mit dem Bedeutungsraum(das Lernsystem) in einem sogenannten Ereignisraum zusammentrifft. Auf dieser Ebeneagiert der Lernende. Ihm werden dort die methodisch aufbereiteten Inhalte präsentiert.

Die möglichst gute Vermittlung der Ziele, Strukturen und Inhalte des Bedeutungsraumes,unter Zuhilfenahme der Elemente des Darstellungsraumes, ist die Aufgabe des Benutzer-schnittstellen-Designs.


31

8.1. Layout & Design

Grundlegend zu beachten ist bei dem Design einer Oberfläche der Sinn, die Intensität und dieDauer ihrer Nutzung. Im Bereich des e-Learning kann davon ausgegangen werden, dass derErwerb entsprechender Handlungskompetenzen sehr viel Zeit in Anspruch nimmt und dieskomplett Rechner-gestützt passieren soll. Da das Lesen am Bildschirm allgemein sehranstrengend für Augen und Konzentration des Nutzers ist, muss die Oberfläche so gestaltetwerden, dass sie diesen Prozess nicht unnötig unterstützt.

Die Aufteilung muss auf wahrnehmungspsychologischen und didaktischen Kriterien basie-ren. Desweiteren müssen Funktionalität und Anordnung der einzelnen Elemente konsistentbleiben, egal wo im Projekt sich der Nutzer befindet.

Somit stehen Aspekte der nachvollziehbaren Strukturierung des Seitenlayouts und des ange-botenen Inhalts sowie durchdachte Farbnutzung, die die Aussage des Inhalts unterstreicht,und angemessene Schriftwahl und -formatierung im Vordergrund. Ablenkende Dekorationen,die den Nutzer verwirren oder ihm das Lesen von Textpassagen erschweren sind zu vermei-den.

Es gilt sich auf das Wesentliche zu reduzieren (den Inhalt) und diesen so gut wie möglichaufzubereiten.

8.2. Navigation

Die Navigation besitzt hohe Priorität bei Oberflächen dieser Größenordnung mit vielen Sei-tentypen. Vor allem für das selbstgesteuerte Lernen ist sie von großer Bedeutung. Sie musskorrekt, funktional und nachvollziehbar sein. Darüber hinaus muss immer erkennbar sein, wosich der Nutzer aktuell im System befindet und wohin ihn angebotene Verlinkungen führenkönnten. Sinnvoll ist eine Übersichtskarte, bzw. Sitemap im weitesten Sinne, die ihm einenÜberblick über das Projekt ermöglicht. Desweiteren sollte die Navigation intuitiven Charak-ter besitzen, aber besonders beim e-Learning gut durchdacht sein und den Nutzer zum explo-rieren des Systems motivieren.

Der Punkt der Interaktivität spielt hier ein große Rolle. Der Nutzer sollte bei der Auswahl derInhalte direkt mit einbezogen sein, so dass er eigene Wege beim Erlangen der gefordertenHandlungskompetenz einschlagen kann. Ein Muss-Kriterium, um von selbst gesteuerten Ler-nen sprechen zu können.

8.3. Lernbegleitung

Für anspruchsvolle Inhalte und Oberflächen wird oft eine virtuelle Lernbegleitung eingesetzt.Dieser Begleiter wird meist durch ein Symbol oder eine animierte Figur dargestellt. Er sollein Anlaufspunkt für den Nutzer darstellen, um allgemeine Hilfe zu bekommen und desweite-ren durch sein Auftreten motivierend auf den Lernvorgang einwirken. Zu beachten ist bei derNutzung solcher Lernhilfen, dass sie niemals den Nutzer bevormunden oder ihn aufgrundihrer Darstellung belästigen und dadurch den Lernfluß stören.


32

9. Gestaltung einer e-Learning Oberfläche amBeispiel der „Action-oriented Learning Envi-ronment“

Abbildung 9. A.L.E. Logo

9.1. Das Prinzip der A.L.E.

Die A.L.E. ist ein handlungsorientiertes Lern-System, das auf Studien und Forschungen inden Bereichen der Lern- und Wissenspsychologie sowie der pädagogischen- und Persönlich-keitspsychologie basiert.

Einfließende Prinzipien sind Handlungsorientierung, Konstruktivismus, kognitionspsycholo-gisch begründbare Lernprinzipien, Einbezug klassisch-pädagogischer Unterrichtsmethodikund ein persönlichkeitspsychologisch begründbares Modell ganzheitlichen Lernens.

Der Unterschied zu klassischen Lehrmethoden liegt bei der handlungsorientierten Lehredarin, dass das zentrale Ziel des Systems der Erwerb einer sogenannten Handlungskompetenzist. Diese soll es ermöglichen, spezielle Aufgaben oder Probleme zu lösen. Dieses Ziel kanndurch Bestimmungen einer Ausbildungs- oder Studienordnung bestimmt sein oder aber einindividuelles Lernziel darstellen. Dabei spielt die Aufgabe bzw. das Problem immer die zen-trale Rolle im System und ist immer präsent. Somit dient dieses System dem Erwerb vonWissen in Bezug auf die direkte Anwendung und nicht ausschließlich der Vermittlung undBereitstellung von Inhalten.

Zum Erreichen einer Handlungskompetenz, auch Handlungsfähigkeit genannt, ist es notwen-dig verschiedene Teilkompetenzen zu erlangen, die in ihrer Gesamtheit zur Problem- bzw.Aufgabenlösung führen:


33

Handlungsfähigkeit = personale Kompetenz + Prozesskompetenz + konzeptionelles Wissen

Diese Teilbereiche sind selbst nochmals in sich untergliedert. Personale Kompetenz setzt sichaus sozialer Kompetenz und Selbstkompetenz zusammen. Die Prozesskompetenz basiert aufexpliziten Methodenwissen, Situationswissen und impliziten Praktikerwissen, zusammenge-fasst in sogenannten sensumotorischen Durchführungsfertigkeiten. Das konzeptionelle Wis-sen wird als eine Art Netzwerkstruktur aufgefasst, die den Inhalt vom situational-sinnlichenKontext abstrahiert und die Basis des Wissens liefert.

Diese Anforderungen ergeben für die Lernumgebung die Unterteilung in drei Lernmodulty-pen: Wissensmodule, Fertigkeitsmodule und didaktisch Hilfsmodule.

Die Erarbeitung der einzelnen Module mit Hilfe der Umgebung ist als selbstorganisiertesLernen konzipiert, sollte aber durch Präsenzlernen begleitet werden. Soziale Kompetenz kannzum Beispiel durch das System vorbereitet werden, muss aber in der Praxis evaluiert undgeschult werden. Je nach Praxisnähe der zu erlernenden Handlungsaufgaben sollte sich derAnteil des Präsenzlernens ergeben.

Der Inhalt eines Lernprojekts ist in der A.L.E. durch eine eindeutige Struktur gegliedert, diefolgende Inhalts-Typisierungen enthält:

• Lernprojekt

Gibt eine Beschreibung dazu, was der Inhalt des Projektes ist und was gelernt werdensoll. Desweiteren beinhaltet es alle Informationen, die zusätzlich relevant sind, wie z.B.Termine oder allgemeine Informationen.

• Handlungsfeld

Faßt eine Menge von Handlungssituationen zusammen. Die Untergliederung in die Fel-der erfolgt durch lebens- bzw. arbeitsweltliche Zusammenhänge, nicht durch fachlichoder wissenschaftliche Beziehungen. Die Handlungsfelder einer Berufsausbildung oderähnlichem sind staatlich geregelt und müssen vollständig zur Verfügung stehen.

• Handlungsbereich

Er stellt ebenfalls eine Menge von Handlungssituationen dar, jedoch wesentlich konkre-ter und ohne gesetzliche Vorgaben. Dies ermöglicht einen größeren Freiraum für Spezi-fizierungen, der jedoch auch zu unheitlichen Terminologien führt.

• exemplarische Handlungssituation

Die Tatsache, dass das Gehirn Informationen in der Form von sogenannten "Scripts"speichert, begründet die Nutzung dieser beispielhaften Situationen. Sie sind auf die Pra-xis bezogen und zeigen exemplarisch auf, an welchen Stellen die daran geknüpften Wis-sensinhalte gefordert werden. Sie bilden somit eine zentrale Position in der A.L.E.Struktur und sind Ausgangspunkt für die Aufgabenanalyse. Da die anzuwendenden Mit-tel zur Lösung dieser Situation hier unbekannt sind, kann "problemorientiertes Lernen"gesprochen werden.


34

• Handlungsaufgaben

Die Anforderungen an den Lernenden sind in den Handlungsaufgaben zusammenge-fasst. Sie fordern die Anwendung des Wissens der gekoppelten Lernmodule. Die Hand-lungsaufgaben stellen somit die Evaluation für den Lernenden dar, ob er den Inhalt rich-tig erfasst hat und ihn entsprechend anwenden kann.

• Situationswissensmodul

Das Situationswissensmodul enthält den für das Wissen benötigten Grundstein. Es bein-haltet keinen methodischen Inhalt, sondern koordiniert mehr oder weniger fächerüber-greifend das Wissen eines Handlungsfeldes.

• Themawissensmodul

Themenmodule befinden sich inhaltlich zwischen den Situationswissensmodulen undden Basiswissensmodulen. Ein Themenmodul kann mehreren Handlungsbereichen zuge-ordnet sein.

• Basiswissensmodul

Unabhängig von den Handlungsfeldern sind die Basiswissensmodule. In ihnen ist daswissenschaftliche Wissen abgelegt, das als Hintergrund für die zu erlernenden Fertigkei-ten benötigt wird.

• Methodenwissensmodul

Die Systematik bei der Ausführung der zu erlernenden Handlungen ist in den Methoden-wissensmodulen zu finden. Sie sind ebenfalls von den Handlungsfeldern unabhängig.

• Trainingsmodul

Die Trainingsmodule enthalten Materialien und Aufgaben der Methoden mit dazugehö-rigen Inhalten. Das betrifft motorische sowie kognitive Abläufe.

• personales Lernmodul

Dieser Modultyp stellt eine Verbindung zwischen dem Lernenden und dem Inhalt her.Im Gegensatz zu den Trainingsmodulen steht hier der Erwerb personaler und sozialerKompetenz im Mittelpunkt. Ziel ist es Motivation, Emotion, Kognition und persönlichesVerhalten zu stärken.

Ergänzt werden die Wissen-, Trainings- und personalen Lernmodule durch Beispiele, Aufga-ben, Disziplinen und Methoden, die sich entsprechend auf das angebotene Wissen beziehen.


35

Folgendes UML-Diagramm beschreibt die Beziehungen des A.L.E. Systems:

Abbildung 10. A.L.E. Typen-Beziehungen


36

9.2. Umsetzung

Da es sich bei der "Action-oriented Learning Environment" um ein neuartiges handlungsori-entiertes System handelt, welches selbstgesteuertes Lernen ermöglichen soll, sind dement-sprechende Anforderungen an die Benutzerschnittstelle zu stellen und zu erfüllen.

So sind differenzierte Seiten für die verschiedenen Typen vorhanden und stehen in dem Lern-model entsprechenden Beziehung. Die Navigation ist nachvollziehbar und gewährt mit Hilfeder Navigationskarte einen Überblick auf das Gesamtsystem. Desweiteren ist die farblicheGestaltung den Lernvorgang unterstützend gewählt und bietet zugleich eine Unterscheidungder verschiedenen Seitentypen.

Die Umsetzung der A.L.E. erfolgte komplett in striktem XHTML 1.0 in Verbindung mit CSS2.0. Eine Validierung durch den angebotenen Service des W3C (http://validator.w3.org/)bestätigte die Richtigkeit der XHTML Dokumente. Das gleiche gilt für die Cascading StyleSheets, die ebenfalls die Überprüfung bestanden. http://jigsaw.w3.org/css-validator/

Somit ist eine Kompatibilität mit allen XHTML unterstützenden Browsern so gut wie mög-lich gewährleistet.

9.2.1. Layout & Design

Die Untergliederung der einzelnen Seitenbereiche wurde durch die Nutzung von CSS div-Boxen realisiert, die absolut positioniert werden. Eine Notwendigkeit, um die grundlegendeStruktur jederzeit zu erhalten. Die Größenverhältnisse der einzelnen Felder sind komplett inprozentualen Größen angegeben, was eine automatische Anpassung an das Browserfensterermöglicht. Es wird immer die volle Fenstergröße unabhängig von der gewählten Moni-torauflösung genutzt. Bei Bedarf werden die Content-Fenster mit Scroll-Balken erweitert.

Der Aufbau ist komplett von der farblichen Gestaltung getrennt und ermöglicht so die Nut-zung alternativer Farbschemen. Durch die Verwendung dieser sogenannten "Ambientes" kön-nen die Farbgebungen aller Felder, Elemente und Schriften neu definiert werden. Lediglichdie Brotkrumen-Zeile sollte nicht neu definiert werden, da sie einen Farbverlauf in Formeiner Pixelgrafik enthält, der von der Hintergrundfarbe schwarz ausgeht.

9.2.1.1. Gestaltungsraster

Die Oberfläche der A.L.E. ist in mehrere Bereiche unterteilt:

1. die Brotkrumennavigation

2. rechter Außenrand (schließt Bereich zwischen 1. und 3. mit ein)

3. Hauptfenster


37

url(http://validator.w3.org/)

url(http://jigsaw.w3.org/css-validator/)

Abbildung 11. gesamte Oberfläche

Die Brotkrumennavigation befindet sich dort, wo sie erwartet wird - am Kopf der Seite. Sieliegt über die volle Breite auf dem Rest des Layouts und bietet dadurch schnelle Erreichbar-keit und Überblick, wo der Nutzer sich gerade im Projekt befindet.

Bereich "2" beherbergt die in den Wissensmodulen benötigten Auswahl-Boxen und eine Ver-knüpfung, die zurück zur A.L.E. Start-Seite führt. Die verfügbare Fläche eignet sich aufgrundihrer Länge für derartige horizontale Listen. Der virtuelle Lernbegleiter findet im unterenBereich dieses Feldes seinen Platz.

Das eigentliche Hauptfenster befindet sich in Bereich "3". Er ist in sich nochmals unterteiltund bedient sich des oben beschriebenen Prinzips der Fibonacci-Spirale. Es birgt ein in sichausgewogenes Erscheinungsbild, was durch seinen mathematischen Hintergrund gestütztwird. Desweiteren stehen durch diese Rasterung eine Vielzahl an Content-Fenstern zur Ver-fügung, die eine gezielte Trennung der verschiedenen Inhalte ermöglichen.


38

Abbildung 12. Main Content Bereich

Aufgrund von Position und Größe wurden allen Feldern verschiedene Funktionalitäten zuge-ordnet. Während Feld 1-4 ausschließlich der Navigation und Orientierung im System dienen,findet der eigentliche Inhalt in den Feldern 5 und 6 seinen Platz.

1. Standard Vorwärts und Rückwärts-Navigation zum Durchblättern der besuchten Seitenist in Feld 1 verankert. Als eine Grundfunktion des Browsing bildet sie den Anfang desSpiralen-Layouts

2. Feld 2 bietet dem guided tour Link seinen Platz.

3. Ein Icon zur grafischen Symbolisierung des aktuellen Seitentyps ist in Feld 3 vorgese-hen.

4. Die Projekt-Übersichtskarte befindet sich in Feld 4, dem letzten Navigationsfeld.

5. Das Content Feld 5 präsentiert die Beschreibungen und Erläuterungen zum aktuellenSeitentyp.

6. Den Abschluss der Fibonacci-Spirale bildet das Hauptfenster. Aufgrund seiner Größeund separaten Anordnung rechts neben den restlichen Fenstern ist es prädestiniert denHauptinhalt anzubieten.


39

9.2.1.2. Farbnutzung

Für die Darstellung der A.L.E. stehen vier verschiedene Ambiente zur Verfügung.

1. Das als Standard Einstellung definierte Ambiente ist farblich durchdacht und wird inden kommenden Absätzen genauer erläutert.

2. Als erstes alternatives Ambiente steht ein schwarz/weiß Style zur Auswahl. Er soll beiBedarf die Leserlichkeit auf monochromen Bildschirmen verbessern oder die Nutzeransprechen, die auf Farben verzichten wollen.

3. Ein invertiertes Ambiente ist ebenfalls auswählbar. Alle Texte werden hier in starkenschwarz / weiß Kontrasten präsentiert, die vor allem Leuten mit Sehproblemen die Nut-zung erleichtern sollen.

4. Das letzte Style Sheet trägt den Namen NightFlight und ist an ein jüngeres Publikumgerichtet. Es nutzt grau-Töne in Verbindung mit starken Farben, was an eine Stadt inden Abendstunden erinnern soll. Die Farbunterscheidung der einzelnen Seitentypenentspricht denen des Standard-Ambietes.

Die Farbnutzung des Standard-Ambientes soll die Funktionalität der Oberfläche unterstützen,was für den Nutzer teilweise bewusst, teilweise unbewusst geschieht.

Das oben beschriebene Harmoniegesetz von Roman Riedl wurde nicht verwendet, da es Far-ben mit unterschiedlichsten Eigenschaften mischt. Da aber gezielt die Funktionen der einzel-nen Seitentypen unterstützt werden sollen, wurden Kombinationen der warmen & kaltenFarbfamilien verwendet.

Jeder Seitentyp bedient sich einer anderen Farbe oder Farbkombination, so dass sie voneinan-der differenzierbar sind, nicht nur auf inhaltlicher Ebene, sondern auch durch ihre farblicheGestaltung. Die Auswahl der Farben geschah nach Kriterien ihres emotionalen Charakters,des Wiedererkennungsfaktors jedes Seitentyps und der ansprechenden Gestaltung.

Insgesamt wurden Farben mit angenehmer Sättigung und einem nicht zu hohem Weißanteilgewählt. Diese Eigenschaften sollen einen ausgeglichenen Eindruck vermitteln, der zusätz-lich die Augen nicht durch übermäßige Strahlung belastet.

Eine Ausnahme bilden die Seitentypen Aufgabe, Beispiel, Disziplin und Methode. Sie nutzenFarben mit einem höheren Sättigungsgrad, um sich vom Rest der Seiten abzusetzen und diebesondere Aufmerksamkeit des Nutzers auf sich zu ziehen.

Im Seitengestaltungsraster wurde eine optische Untergliederung durch die Farbnutzung vor-genommen. Die Navigationsfelder 1-4 im Hauptfenster sind vom Rest der Felder klar abge-setzt, so dass ihre eigenständige Funktionalität klar wird. Für die Seiten der A.L.E. Home-page, des Projektes, der Handlungsbereiche und der exemplarischen Handlungssituationenwerden Farbkombinationen für diese Abgrenzung verwendet, während für die Modulseiteneine Farbe differenziert in Helligkeit und Sättigung genutzt wird.


40

Das Feld 5 nutzt die gleiche Farbe wie der obere und rechte Rand der Oberfläche. Dies unter-streicht die Verbindung des Feldes mit der aktuellen Seite.

Feld 6 enthält die gleiche Hintergrundfarbe für alle Seitentypen. Hier wird der Hauptteil desContents präsentiert und fordert somit die meiste Konzentration vom Leser ab. Deshalb ist fürden Text-Hintergrund auf die Nutzung von Farben verzichtet worden, um hohe Lesequalitätzu gewährleisten. Orientiert wurde sich hier am Medium Papier.

Die auf den Wissensmodulseiten vorhandenen Auswahlboxen im rechten Rand der Oberflä-che greifen die aktuell verwendeten Farben des Seitentyps auf. Der Hintergrund der Box fügtsich nahtlos in den Rand mit ein.

Die Gestaltung des Content- und Navigationsbereiches folgt der Fibonacci Spirale. Beispiels-weise beginnt der Navigationsbereich in der Farbe schwarz und nimmt dann bis zum Feld 4an Helligkeit zu. Das soll den Aufbau und die Wirkung des Spiralenrasters zusätzlich unter-stützen und ergibt ein harmonisches, nachvollziehbares Gesamtbild.


41

Abbildung 13. Seitentyp "Homepage"

Seitentyp "Homepage": dark skyblue / dark aquamarine

Der Seitentyp "Homepage" repräsentiert den Start der A.L.E.. Hier sind Informationen überdas System und die Auswahl des gewünschten Lernprojektes zu finden. Dieser Bereich setztsich inhaltlich und optisch von den anderen Seitentypen ab, da er keinen direkten Bezug fürdas Erreichen eines Lernzieles darstellt. Sein Auftreten soll einen seriösen Eindruck vermit-teln.

Für die Gestaltung wird eine Farbkombination kalter Farben verwendet. Sie steht für Seriösi-tät und erweckt einen kühlen Eindruck, der zum allgemeinen, informativen Inhalt des Seiten-typs passt.


42

Abbildung 14. Seitentyp "Projekt und Handlungsbereich"

Seitentyp "Projekt" und "Handlungsbereich": cadetblue / plum

Nach dem Klicken auf ein konkretes Lernprojekt gelangt der Nutzer auf die entsprechendeProjektseite. Die hier zu erfüllende Funktionalität ist die Auswahl der einzelnen Handlungs-bereiche, die in einer Übersichtliste in Handlungsfelder untergliedert präsentiert werden.Wird ein Handlungsbereich ausgewählt, führt der Link den Nutzer auf das gewünschteThema. Hier stehen dann wiederum die verknüpften Handlungssituationen zur Auswahl.

Da die Projekt- sowie die Handlungsbereichsseiten ähnliche Funktionen haben ist ihreGestaltung identisch. Sie dienen der Konkretisierung des zu lernenden Stoffgebietes auf demWeg zum Herzstück des Projektes der exemplarischen Handlungssituation.

Dementsprechend ist ihre farbliche Gestaltung. Wieder dienen kalte Farben der Unterschei-dung zwischen den einzelnen Layoutfeldern, was den kühlen, selektiven Charakter der Seitenunterstreichen soll. Es ist noch kein konkreter Inhalt gegeben und dient mehr der Organisa-tion des Lernprojekts.


43

Abbildung 15. Seitentyp "eHS"

Seitentyp: "eHS": dark orange / beige

Die Seiten der exemplarischen Handlungssituationen präsentieren sich in einem hellerenGewand. Ihr Inhalt basiert auf Situationen, die im Alltag auftreten können und somit prakti-scher Natur sind.

So fiel die Wahl auf Farben aus dem Bereich der warmen Farben, die ein natürlichen, positi-ven Eindruck vermitteln. Desweiteren wird beim Erreichen dieses Seitentyps aufgrund derFarbgebung klar, dass nach der Auswahl der Handlungssituation jetzt eine neue Ebene imLernprojekt erreicht wurde.


44

Abbildung 16. Seitentyp "Wissensmodul"

Seitentyp: "Wissensmodul": steelblue / cornflowerblue

Die Wissensmodule greifen auf dunkle blau-Töne zurück, die wieder einen strengen, kühlenCharakter vermitteln. Sie gehören ebenfalls der Familie der kalten Farben an. Diese Selektionsoll die Wirkung des Lehrinhaltes unterstützen, da dieser beim Erwerb Konzentration undnötigen Respekt als Basis für den weiteren Erwerb von Handlungskompetenzen erfordert.

Dieser Seitentyp wird für die Darstellung aller Wissensmodule genutzt.


45

Abbildung 17. Seitentyp "Trainingsmodul"

Seitentyp: "Trainingsmodul": crimson red / salmon

In warmen Farben sind die Seiten der Trainingsmodule gestaltet. Die Signalfarbe Rot , diehier in einer warmen Farbkombination auftritt, zeigt an, dass hier Aktion und Aufmerksam-keit vom Nutzer gefragt ist. Er muss Wissen aktiv trainieren bzw. anwenden und dabei aufdessen Richtigkeit achten.


46

Abbildung 18. Seitentyp "personales Lernmodul"

Seitentyp: "personales Lernmodul": green / greenyellow

Eine grün-Kombo nutzt der Seitentyp "personales Lernmodul". Die Farbe der Hoffnung solldie personalen Ziele dieses Modultypen zu Verbesserung der Motivation, Emotion, Kogni-tion, Verhalten und Psychophysio unterstützen. Die Farben haben zudem eine ruhige undpositive Wirkung, die den Lernenden bei der Verbesserung seiner persönlichen Eigenschaftenunterstützt.


47

Abbildung 19. Seitentypen "Beispiel", "Aufgabe", "Disziplin","Methode"

Die Wissen-, Trainings- und personale Lernmodulserweiterungen nutzen ausschließlich eineFarbe zur Differenzierung. Die Sättigung der entsprechende Farbe für das Feld 5 ist hierhöher als die der anderen Seitentypen. Als Ausgleich ist der Navigationsteil einheitlich inschwarz / weiß gestaltet, um die Seiten von den anderen Typen klar abzugrenzen.

1. Seitentyp "Beispiel": limegreen

Beispiele sollen den Lernenden anhand von gelösten Aufgaben oder Anwendungen die Her-angehensweise an Probleme erläutern. Die grüne Farbe symbolisiert die Hoffnung, die beimDurcharbeiten der Beispiele für das spätere eigenständige Lösen der Aufgabe besteht.

2. Seitentyp "Aufgabe": tomato

Wie schon bei den Trainingsmodulen soll die rote Farbe signalisieren, dass Aktion gefordertist.

3. Seitentyp "Disziplin": deepskyblue

Das kühle Blau unterstreicht die Strenge der Disziplinseiten. Ihr Inhalt ist Pflichtprogrammund muss dementsprechend ernst behandelt werden.

4. Seitentyp "Methode": orchid

Die Verbindung zwischen Aufgaben und Wissen stellen die Methoden dar. Sie beschreibenwie bei Problemen vorgegangen werden muss. Ihre Gestaltungsfarbe findet sich deswegen


48

auch zwischen rot und blau.

9.2.1.3. Typographie

Für die textliche Gestaltung nutzt A.L.E. die Standard Schriftart "Verdana" in der serifenlo-sen Variante. Wie für das Webdesign gefordert, wurde auf die Verwendung von Serifen ver-zichtet, um gute Lesbarkeit am Bildschirm zu garantieren.

Die Schriftgröße ist in prozentualen Angaben definiert und orientiert sich somit an den Ein-stellungen des Browsers. Eine Vergrößerung der Schrift ist aufgrund der prozentualen Skalie-rung der Content-Felder kein Problem. Sie lässt sich somit je nach Bedarf vergrößern.

Die Farben der Schrift wurden dem Hintergrund entsprechend gewählt. So ist sie im Haupt-fenster schwarz gehalten um einen optimalen Kontrast zum grauen Hintergrund zu schaffen.Es wurde auf die Verwendung der Farbe weiß als Hintergrund verzichtet. Damit sollen mög-licherweise auftretende störende Flimmereffekte vermieden werden.

Die Gestaltung der Schrift für das Inhaltsfenster in Feld 5 der Fibonaccirasterung steht imKontrast zu dessen Hintergrund. Da hier starke Farben mit einem ausreichend hohenSchwarzanteil verwendet wurden, wird eine hellgraue Farbe verwendet, die ebenfalls jeder-zeit in einem guten Kontrast zum Hintergrund steht.

Zur Aufbereitung der Texte wurden die Standard HTML Auszeichnungen verwendet. So ste-hen die Überschriften <h1> bis <h3>, sowie die Paragraphen <p>, Listen <ul> bzw. <li> undVerlinkungen <a> zur Verfügung und werden in ihrer Farbe und Ausrichtung je nach akti-vem Feld formatiert.


49

9.2.1.4. Icons

Jedem Seitentyp ist ein Icon zugeordnet, das symbolisch versucht die Funktion der Seitezusammenzufassen. Die Icons unterstützen die Farbwahl in ihrer Funktion der Orientierung.An ihnen kann, eine gewisse Nutzungszeit vorraus gesetzt, ebenfalls der aktuell geöffneteSeitentyp abgelesen werden. Dies ist vor allem für die alternativen Style Sheets von Vorteil,die auf die Nutzung von Farben verzichten. Desweiteren lockern sie das Erscheinungsbild derOberfläche insgesamt auf und bieten dem Nutzer einen Moment der Unterhaltung. Dieskommt der Motivation zu Gute.

Die technische Umsetzung der Icons geschah durch die Verwendung transparenter GIF Grafi-ken, so dass sie sich nahtlos in die Oberfläche einfügen.

Abbildung 20. Icons


50

9.3. Navigation

Die Navigation ist eines der entscheidenden Qualitätsmerkmale einer Oberfläche. Die A.L.E.besitzt mehrere Navigationsmöglichkeiten, die verschiedene Möglichkeiten des Browsingszur Verfügung stellen.

Die Navigation der A.L.E. ermöglicht folgende Steuerungsmöglichkeiten:

• Java-Script History für rückwärts und vorwärts blättern in den bereits besuchten Seiten

• Brotkrumen-Navigation

• Steuerung über die Projektkarte

Alle Navigationselemente nutzen die <a> XHTML-Verlinkung, die zusätzlich durch dasAttribut title="..."erweitert ist. So ist es möglich die Navigation durch zusätzliche Informa-tionen zu erweitern, die automatische per "mouse over" Effekt eingeblendet werden.

Die Java-Script History Steuerung zum Durchlaufen der besuchten Seiten ist jedem Nutzerbekannt. Sie wird von jedem Browser auch in der oberen Programmzeile angeboten und istelementar. Zur Komplettierung der allgemein erwarteten Navigation wurde sie trotzdem mitin die Oberfläche implementiert. Dies vermeidet unnötige Mauswege und stärkt den Eindruckeiner eigenständigen Lernoberfläche, die alle benötigten Funktionen beinhaltet.

Eine weitere Möglichkeit, um auf besuchte Seiten im Lernprojekt zurückzugelangen stellt dieBrotkrumen-Navigation zur Verfügung. Sie findet ihren Platz am oberen Rand der A.L.E..Hier werden die gewählten Projekte, Handlungsbereiche etc. dokumentiert und in vollerBezeichnung abgelegt. Ergänzt wird die Leiste am Ende durch die aktuelle Seite und derenBezeichnung.

Aufgrund ihre Position und Darstellung beeinträchtigt die Brotkrumen-Zeile die Oberflächein keinster Weise und bietet einen schnellen und gezielten Zugriff.

Die letzte Navigationsmöglichkeit und zugleich in der Bedienung anspruchsvollste Navigati-onsmöglichkeit bietet die Projektübersichtskarte. Sie ist der Struktur der des Lernprojekts,den dazugehörigen Seitentypen und deren Verknüpfung nachempfunden.


51

Abbildung 21. Navigationskarte

1. Projekt

2. Handlungsbereich

3. exemplarische Handlungssituation

4. Situationswissensmodul

5. Themawissensmodul

6. Basiswissensmodul

7. Methodenwissensmodul

8. Trainingsmodul

9. personales Lernmodul

Bis zur Auswahl der exemplarischen Handlungssituationen ist allerdings nur eine Rückwärts-navigation möglich, da hier vorher mehrere Spezifikationen nötig sind, die nicht über dieKartennavigation machbar sind.

Von den eHS Seiten ist ein Zugriff auf alle verknüpften Module möglich. Auf den Modul-und ihren Unterseiten wie Aufgabe, Beispiel etc., ist das Navigieren per Karte zurück zureHS oder in die anderen verlinkten Module ebenfalls gegeben.

Beim Überfahren der Karte mit der Maus wechselt sich je nach Seitentyp die Farbe an derentsprechenden Stelle. So wird die Gestaltung der Seitentypen in der Karte aufgegriffen, was


52

Navigation und Farbgebung an dieser Stelle verschmelzen lässt.

9.4. Lernbegleitung

Die A.L.E. wurde mit einem einfachen virtuellen Lernbegleiter ausgestattet. Er findet seinenPlatz in der rechten unteren Ecke der Oberfläche.

Abbildung 22. "A.L.E. Guide"

Er informiert den Nutzer in einer Textbox mit zusätzlichen Informationen zum Inhalt oderzur allgemeinen Oberflächensteuerung.

Seine Gestaltung ist der eines Ausrufezeichens nachempfunden, was seine informative Funk-tion unterstreichen soll. Er drängt sich aufgrund von Position und Größe nicht störend in denVordergrund, kann aber auch nicht übersehen werden. Sein Auftritt vermittelt insgesamteinen positiven Eindruck und wird sicher motivierend in den Lernprozess einwirken. DieGestaltung ist durch eine animierte GIF-Grafik realisiert, was ihm einen lebendigen Charak-ter verleiht.

9.5. Barrierefreiheit der Oberfläche

Die Umsetzung der A.L.E. Oberfläche beachtet die in den W3C "Web Content AccessibilityGuidelines" definierten Punkte der ersten Prioritätsstufe.

Alle XHTML Dokumente wurden durch den W3C Validator als gültig überprüft. Das Layoutbasiert komplett auf CSS. Somit ist eine strikte Trennung von Inhalt und Design gegeben.Unterstützt wird dies durch die Verwendung von strict XTHML 1.0, welches ebenfalls keineDesign-Formatierungselement in den Markup Dokumenten zulässt.

Die Strukturierung des allgemeinen Layouts erfolgt ebenfalls komplett durch Cascading StyleSheets. Somit wurden keine Tabellen für diese Aufgabe verwendet, welche bei der Nutzungalternativer Ausgabegeräte den Kontext zerstören oder nur schwer erfassbar machen könnten.Für die Navigation stehen verschiedene Möglichkeiten zur Verfügung. Da die Übersichts-karte ausschließlich durch die Verwendung von CSS nutzbar ist, besteht ebenfalls die Mög-lichkeit das Projekt über die Brotkrumennavigation zu steuern. Somit bleibt die Seite auchohne Style Sheet-Aufbereitung navigierbar.

Zusätzlich bietet die Oberfläche alternativ ein invertiertes Style Sheets an. Es erleichtert Seh-beeinträchtigten das Lesen, da es auf sehr starken Kontrasten basiert.

Eine Überprüfung mit dem Validator "Cynthia Says" (http:/www.cynthiasays.com) bestätigt


53

url(http:/www.cynthiasays.com)

eine Erfüllung der "Web Content Accessibility Guidelines" in Bezug auf Strukturierung undAufbau der entsprechenden Markup Dokumente.


54

10. Fazite-Learning ist eines der bedeutsamsten Forschungs- und Entwicklungsfelder der heutigenZeit. Anwendung findet es bereits in Hochschulen, Universitäten, Unternehmen, Volkshoch-schulen etc..

Vor allem für das Web Based Training werden die Nutzungsfelder in Zukunft immer größer -die Nachfrage nach Webangeboten steigt ständig. Der Erwerb verschiedenster Kompetenzenist durch die Erweiterung von Präsenzlernen denkbar und wird sicher die eine oder andereherkömmliche Lehrveranstaltung verdrängen.

Die Nutzung digitaler Medien und der Umgang mit dem Computer wird heute bereits alsStandard aufgefasst und begleitet die jüngere Generation schon oft seit ihrer Kindheit. Sostellt für die meisten Studenten der Rechner mittlerweile das Lernmedium Nummer eins dar.Kein anderes Medium bietet auch nur ansatzweise die Archivierungs-, Darstellungs- oderBearbeitungsmöglichkeiten von Dokumenten wie der Computer. Mit Hilfe von Laptops kön-nen so anstatt unüberschaubare Stapel von Blättern und Büchern komplette digitale Biblio-theken mit zur Uni genommen werden.

Aber auch im Business-Bereich wird immer mehr auf e-Learning Konzepte gesetzt, um Mit-arbeiter und Angestellte gut und effizient weiterzubilden. Durch die überall zugängliche Artdes Online-Wissenerwerbs kann die Fortbildung direkt am Arbeitsplatz passieren. Das kannZeit und Geld für Unternehmer und Angestellten sparen.

Mögliche Ergänzung der e-Learninginhalte durch Video- und Audiomaterialien sowie derMöglichkeit des Gedankenaustausches in Form von Foren und Chats prädestinieren dieseLehrform für das Fernlernen.

Die Basis jedes e-Learning Projektes stellt der didaktische Hintergrund dar. Für das Online-Lernen sind spezielle Systeme zu entwickeln, die die Eigenschaften und Möglichkeiten desHypermedia-Raumes von Grund auf mit einbeziehen. Die reine Bereitstellung von Lehrinhal-ten ohne innere Strukturierung entspricht dabei nicht dem Forschung- und Entwicklungsstan-des unserer Zeit.

Um die Effizienz des Lernens zu verbessern, muss versucht werden, die zur Verfügung ste-henden technischen Möglichkeiten und Standards soweit und so gut wie möglich einzusetzen,wie es im Sinne des didaktischen Modells von Nutzen ist. Vor allem der Aspekt der Interakti-vität und direkten Einbeziehung des Lernenden steht hierbei im Vordergrund. Sie wirken sichentscheidend auf Motivation sowie Lernbereitschaft des Nutzers und somit auch auf den Ler-nerfolg aus.

Die Oberflächen der e-Learning Projekte müssen all die Anforderungen, die durch das Lern-modell einerseits und durch ansprechende und motivierende Gestaltung andererseits entste-hen, vereinen und zusammenführen. Eine schwierige Aufgabe, da gestalterische Aspektemeist subjektivem Empfinden unterliegen. Jedoch sollte sich insgesamt an die allgemein gül-tigen Regeln des Web- und Oberflächen Designs orientiert werden und desweiteren bei derWahl der Gestaltungsmittel stets die Unterstreichung der Funktionalität dominieren. Das giltauch für die vielen auf den ersten Blick eher hintergründig erscheinenden Attribute, wie z.B.


55

die der farblichen Gestaltung. Auch hier gibt es viele Möglichkeiten, den Lernvorgang positivoder bei Missachtung negativ zu beeinflussen.

Ingesamt ist der Erfolg eines e-Learning Konzeptes von vielen Faktoren abhängig. DasGrundkonzept muss fortschrittlich sein und den Lernprozess effektiv und nachhaltig fördern.Die Oberfläche muss diese Strukturen widerspiegeln und sie durch die benötigten Funktiona-litäten perfekt ergänzen. All dies muss dann in einen durchdachten Layout zusammengefasstwerden, dass dem Lernenden entgegenkommt und ihn motiviert sein gewünschtes Lernziel zuerreichen.


56

11. Abbildungsverzeichnis

1. Zielgruppen für e-Learning Content

unicmind.com AG

http://www.unicmind.com

2. Kosten für die Vorbereitung einer Stunde e-Learning Content

unicmind.com AG

http://www.unicmind.com

3. Fibonacci-Spirale

David Gampe

4. Fibonacci Spirale im Schneckengehäuse

TU Bergakademie Freiberg

http://www.mathe.tu-freiberg.de/~hebisch/spiralen3/goldenespirale.htm

5. Übersicht der Farben am Farbkreis

Hartmut Rudolfhttp://www.metacolor.de/farbkreis_liedl.htm

6. Farbharmonien nach R. Liedl

Hartmut Rudolf

http://www.metacolor.de/winkelharmonie.htm

7. Serifen- & Groteskschrift

David Gampe

8. Konstruktionsraum für eine Hypermedia-Lernumgebung

Dr. W. Debler

9. A.L.E. Logo

David Gampe

10. A.L.E. Typen-Beziehungen


57

url(http://www.unicmind.com)

url(http://www.unicmind.com)

url(http://www.mathe.tu-freiberg.de/~hebisch/spiralen3/goldenespirale.htm)

url(http://www.metacolor.de/farbkreis_liedl.htm)

url(http://www.metacolor.de/winkelharmonie.htm)

Prof. Dr. G. Wagner

11. gesamte Oberfläche der A.L.E.

David Gampe

12. Main Content Bereich

David Gampe

13. Seitentyp "Homepage"

David Gampe

14. Seitentyp "Projekt und Handlungsbereich"

David Gampe

15. Seitentyp "eHS"

David Gampe

16. Seitentyp "Wissensmodul"

David Gampe

17. Seitentyp "Trainingsmodul"

David Gampe

18. Seitentyp "personales Lernmodul"

David Gampe

19. Seitentypen "Beispiel", "Aufgabe", "Disziplin", "Methode"

David Gampe

20. Seitentypen-Icons der A.L.E.

David Gampe

21. Navigationskarte der A.L.E.

David Gampe

22. A.L.E. Guide

David Gampe


58

LiteraturverzeichnisProf. Dr. Ludwig J. Issing und Prof. Dr. Paul Klimsa. Copyright © 2002. 3-621-27449-9.

Verlagsgruppe Beltz, Psychologische Verlags Union, Weinheim. Information undLernen mit Multimedia und Internet.

Friedrich Heyder. Copyright © 2000. 3-7815-1097-2. Verlag Julius Klinkhardt. Autorensy-steme - moderne Werkzeuge für die Schule.

Institut für Wirtschaftsinformatik. Copyright © 2004.http://www.iwi.uni-hannover.de/forschung_index.html?/elearning.html.

Helmut F. Friedrich, Gunther Eigler und Heinz Mandl. Copyright © 1997. 3-472-03009-7.Luchterhand Verlag. Multimediale Lernumgebungen in der betrieblichen Weiterbil-dung.

Thomas Moritz. Copyright © 1997. BTU Cottbus. Script Mediendesign.

Alexandra Herfurtner. Copyright © 2003. 3-8273-2065-8. Addison-Wesley Verlag. Sreende-sign (ready for take off).

Georg Erwin Thaller. Copyright © 2002. 3-935042-23-X. Software & Support VerlagGmbH. Interface Design (Die Mensch-Maschine-Schnittstelle gestalten).

Veruschka Götz. Copyright © 2002. 3-499-61226-7. Rowohlt Taschenbuch Verlag GmbH.Raster für das Webdesign.

David Siegel. Copyright © 1998. 3-8272-5331-4. Markt & Technik Buch- und Software-Ver-lag GmbH. Web Site Design (Killer Web Sites).

Frank Puscher. Copyright © 2000. 3-932588-87-8. dpunkt.verlag GmbH. Die Tricks derInternet Künstler.

Chuck Musciano und Bill Kennedy. Copyright © 2003. 3-89721-350-8. O'Reilly Verlag.HTML & XHTML (Das umfassende Referenzwerk).

Ed Tittel, Norbert Mikula und Ramesh Chandak. Copyright © 2000. 3-8266-2860-8. XMLfür Dummies. HTML & XHTML (Das umfassende Referenzwerk).

Daniel Koch. Copyright © 2001. 3-8273-1893-9. Addison-Wesley Verlag. PraxisbuchXHTML.

Prof. Hideaki Chijiiwa. Copyright © 1987. 3-283-00390-4. Rockport Publishers, Inc.. ColorHarmony (A Guide To Creative Color Combinations).

Hans Gekeler. Copyright © 1991. 3-7701-2840-0. DuMont Buchverlag. Taschenbuch derFarbe.

Unicom.com AG. http://unicmind.com.


59

url(http://www.iwi.uni-hannover.de/forschung_index.html?/elearning.html)

url(http://unicmind.com)

Wikipedia Enzyklopädie. http://de.wikipedia.org.

e-Learning Guru. http://www.e-learningguru.com.

The Parallax – Verein für Informationstechnologie, Kommunikation und Bildung.http://www.theparallax.org.

TQuA-Portal - Innovative betriebliche Bildung. http://www.tqua.de.

Web Ohne Barrieren. http://www.wob11.de.

World Wide Web Consortium. http://www.w3.org.

XHTML Forum - Das Forum für XHTML und CSS. http://www.xhtmlforum.de.

Cynthia Says. http://cynthiasays.com.


60

url(http://de.wikipedia.org)

url(http://www.e-learningguru.com)

url(http://www.theparallax.org)

url(http://www.tqua.de)

url(http://www.wob11.de)

url(http://www.w3.org)

url(http://www.xhtmlforum.de)

url(http://cynthiasays.com)

CSS-Designs für die Präsentation von e-Learning Content · CSS-Designs für die Präsentation von...

Documents

Transcript of CSS-Designs für die Präsentation von e-Learning Content · CSS-Designs für die Präsentation von...