Universelle Deutschtrainer Es wurden Webanwendungen entwickelt, mit deren Hilfe man die deutsche Sprache auch im Selbststudium

erlernen kann, ohne dass man dazu bereits Sprachkenntnisse oder Schreibfähigkeiten benötigt. Andere Lern-

programme setzen bereits Sprachkenntnisse voraus und nutzen diese, um sprachliche Anweisungen zu ge-

ben oder schriftliche Ein- und Ausgaben zu verwenden. Die vorliegenden Deutschtrainer setzen jedoch kei-

nerlei Sprachkenntnisse oder Schreib- und Lesefähigkeit voraus, sondern versuchen durch den Einsatz von

Multimedia (Fotos, Audioaufnahmen, Icons, Bilder, Videos) Sprachkenntnisse zu vermitteln und bereits Be-

kanntes weiter zu üben (trainieren). Im Gegensatz zu anderen Programmen sind diese Sprachtrainer also

universell in dem Sinne, dass sie von allen Lernenden benutzt werden können unabhängig von ihrer Mutter-

sprache und ihren weitergehenden Sprachkenntnissen sowie Schreib- und Lesefähigkeiten. Das Lernmaterial

wird ständig erweitert und ist themenbezogen (ogy.de/detr) (1) und in Lektionen unterteilt abzurufen

(ogy.de/detrle) (2). Bei den Arbeiten fiel auch ein analoger Englischtrainer ab (ogy.de/entr) (3).

Abbildung 1: a) Themenauswahl durch Anklicken der entsprechenden Bilder: zwischenmenschliche Kom-

munikation, Körper und Gesundheit, Kleidung, Einkauf usw.

b) Interaktive Seite zum Thema Wohnung mit Audioausgabe beim Anklicken der Lautsprechericon (oben

Bad, Tür, Toilette, Waschbecken, Dusche; unten Fenster, Waschmaschine Toilette, Dusche, Waschbecken)

In diesem Forschungsprojekt sollen die Möglichkeiten des Einsatzes von Multimedia auf allen möglichen

IT-Geräten (PC, Notebook, Tablet, Smartphone, Smart-TV) bei unterschiedlichen Arten von Webanwen-

dungen erkundet werden, um damit beim E-Learning von Fremdsprachen ohne Ausgangs- und Schriftspra-

che auszukommen. Diese kostenlose Selbstlernprogramme sind sicherlich kein Ersatz für persönliche

Sprachkurse und Gespräche, sondern sie sollen diese ergänzen bzw. unterstützen.

Die Kritik an anderen Programmen zum Deutschlernen (6,9,10,11,12, uvm.) reicht von unnatürlichen bzw.

nicht erkennbaren Bildern, keine Schwierigkeitsabstufungen und Kosten bis hin zu komplexen Anweisung in

englischer oder deutscher Sprache, wobei man letztere ja eigentlich erst mit diesem Programm erlernen soll

und auch nicht jeder entsprechend die englische Sprache beherrscht, um damit Deutsch zu lernen.

Tatsächlich setzen etliche Programme zum Erlernen bzw. Einüben einer Fremdsprache eine bessere Kenntnis

dieser Sprache voraus als sie selbst vermitteln. In den vorliegenden Arbeiten wurde versucht, dieses Problem

mittels multimedialem E-Learning zu lösen. Die dabei erworbenen Erfahrungen und Fähigkeiten sollen auch

bei der Weiter- (26,27) bzw. Neuentwicklung von fachbezogenen E-Learning-Material genutzt werden, z.B.

im Rahmen solcher Institutionen bzw. Projekte wie der Hamburg Open Online University (HOOU) (26,27,28).

Dazu wurden insgesamt zwei unterschiedliche Arten von Webanwendungen entwickelt:

1. Zunächst wurden interaktive und multimediale Präsentationen zu den einzelnen Themen bzw. Lektionen

entwickelt, z.B. mit PowerPoint, Prezi oder Impress aus der kostenlosen Bürosoftware OpenOffice. Diese

wurden anschließend in interaktive Webanwendungen gemäß HTML5 konvertiert, z.B. mit Hilfe des

iSpring Converters (13), der Software HTML5Point (24) o.a. Dabei bieten diese Programme häufig Mög-

lichkeiten die resultierende Webanwendung nicht nur mit den aktuellen Browsern darzustellen, sondern

sie auch speziell an mobile Endgeräte wie Smartphones und Tablets anzupassen. Im vorliegenden Fall

wurde speziell PowerPoint aus Microsoft Office Professional Plus 2016 und der Converter 8 von iSpring

benutzt, dessen erzeugte Webanwendungen sich insbesondere auf Smartphones mit der kostenlosen App

mit Namen iSpring Play online ansehen sowie verwalten, herunterladen und offline aus dem lokalen

Speicher heraus benutzen lassen (8). Mit der letztgenannten Option vermeidet man Probleme bei gerin-

gen Datenübertragungsraten, da die Anwendung sich über einen längeren Zeitraum nicht verändert und

somit bei seltener Aktualisierung lokal gehalten werden kann. Eine andere Möglichkeit lästiges Nachladen

z.B. von Audiodateien zu vermeiden besteht darin, das Attribut Preload der Audio-Elemente in den ent-

sprechenden HTML-Indexdateien von none auf auto zu setzen. (1,2,3)

2. Beim zweiten Ansatz wurde die Webanwendung mit Hilfe von JavaScript und unter Verwendung entspre-

chender Bibliotheken selbst programmiert (4,5). Dabei wurde im Sinne des responsiven Designs die Bild-

schirmdarstellung der Webseiten an die Größe und Eingabemethoden des jeweiligen Endgerätes ange-

passt, so dass sowohl eine möglichst große Konsistenz zwischen allen Geräten als auch die notwendige

Anpassung an deren Bildschirme erreicht werden. Für die Aussprache wurde die Bibliothek repsonsive-

voice.js (19) genutzt, da sie eine schlanke und einfache API besitzt und die Text-to-Speech Funktion (TTS)

des Browsers nutzt, falls diese verfügbar ist. Ansonsten wird auf serverseitige Generierung von Audioda-

teien zurückgegriffen. Da die meisten aktuellen Browser sowohl in der Desktopversion als auch in der

Mobilvariante eine TTS-Funktion besitzen, werden durch ihre Verwendung die zu übertragenden Daten-

mengen und damit die Ladezeiten drastisch reduziert.

In den beiden folgenden Kapiteln werden die genannten Arten von Webanwendungen detailliert beschrie-

ben.

1. Mit E-Learning-Software erstellte Webanwendung eines universellen

Deutschtrainers

Unabhängigkeit von einer Ausgangssprache bedeutet, dass auch die Benutzerführung ohne sprachliche und

schriftliche Anweisungen und Hilfen auskommen muss. Dazu dient ein möglichst intuitiver Einsatz von Bil-

dern und Fotos, durch deren Anklicken man beispielsweise jeweils zu den entsprechenden Themenberei-

chen gelangt, und Sinnbilder (Icons), deren Anklicken entsprechende Aktionen auslösen. Beispielweise wird

beim Anklicken des Lautsprechersymbols das dazugehörige Sprachelement akustisch ausgegeben (vorge-

sprochen) und beim Anklicken des Textsymbols der passende Text auf dem Bildschirm angezeigt (geschrie-

ben). Unterschiedliche Farben der Icons stehen für unterschiedliche Arten von Sprachelementen: gelb –

einzelne Wörter (vgl. Abb. 1b, 2,3), blau – Fragesätze, grün – (Antwort-) Sätze (vgl. Abb. 4b).

Nach dem Aufrufen der Webseite (1,2,3) erscheint das Auswahlmenü (Abb. 1a), das die verschiedenen

Themen bzw. Lektionen sowie die Art des Lernens bzw. den Schwierigkeitsgrad anbietet. Themen sind wie

in Abb. 1a dargestellt zwischenmenschliche Kommunikation, Körper, Kleidung, Beziehung und auf den

folgenden Einstiegsseiten Einkauf, Wohnen, Lebensmittel, Farben, Zahlen und Geld, Tages- und Uhrzeit usw.

Neben der Unabhängigkeit von einer Ausgangssprache ist ein möglichst einfacher Einstieg beim Lernen der

deutschen Sprache wichtig und die Möglichkeit die Ansprüche langsam, Schritt für Schritt zu erhöhen. Des-

halb werden in der einfachsten Version lediglich gesprochene Wörter mit Hilfe entsprechender Bilder und

Audioausgaben gelernt (vgl. Screenshot Abb. 2a, Abb. 1a). Weitere Schritte sind dann in den folgenden

Varianten die Hinzufügung des geschriebenen Wortes (s. Screenshot Abb. 2b, 3a, Abb. 7a) sowie des zuge-

hörigen Artikels nur in gesprochener Form sowie beides in gesprochener und geschriebener Form (s. Screen-

shot Abb. 3b, 7b). Hier eine Aufzählung der vier Schwierigkeitsstufen, wie beispielsweise die zu lernenden

Wörter angeboten werden:

1) ausschließlich akustisch (artikellos), (Einstiegsseite Abb. 1a, Beispielseiten Abb. 1b, 2a, 5b, 6a)

2) kombiniert akustisch und schriftlich (artikellos) (Einstiegsseite Abb.7a, Beispielseiten Abb. 2b, 3a,b,

4a,b, 5a, 6b)

3) akustisch mit bestimmten Artikel,

4) kombiniert akustisch und schriftlich mit bestimmten Artikeln. (Einstiegsseite Abb. 7b)

Abbildung 2: a) Seite mit Obst zum Thema Lebensmittel. Auf diesem Basislevel werden die Namen (Apfel,

Birne, Banane…) beim Anklicken des zugehörigen Lautsprechericons lediglich ausgesprochen.

b) Interaktive Seite zum Thema Körper mit Audioausgabe beim Anklicken des Lautsprechericons und

Textanzeige beim Anklicken des Texticons (Gesicht, Stirn, Auge, Nase, Mund)

Abbildung 3: a) Eine Seite 2. Schwierigkeitsgrades zum Thema Wohnung mit gesprochenen Wörtern beim

Anklicken des Lautsprechersymbols sowie dem Schriftbild beim Anklicken des Texticons (Küche, Spüle…)

b) Eine Seite höheren Schwierigkeitsgrades zum Thema Beziehung mit den gesprochenen Wörtern samt

Artikeln sowie dem dazugehörigen Schriftbild (die Familie, die Mutter, das Kind, der Vater)

Darüber hinaus werden auch Kombinationen verschiedener Wörter gelernt. Beispielsweise Kombinationen

wie Farbe oder Zahl und Gegenstand (roter Stuhl, schwarze Pfanne, blaue Schüssel) (vgl. 4a), Geld (ein Euro,

zwei Euro…) (vgl. Screenshot Abb. 4b), Lebensmittel (z.B. Einkaufszettel, vgl. 5a) oder Uhrzeit.

Abbildung 4: Zweierkombinationen a) Farbe – Gegenstand (roter Stuhl, schwarze Pfanne, blaue Schüssel)

b) Zahl – Geld (Ein Euro, zwei Euro…)

Abbildung 5: Zweierkombinationen a) Zahl – Lebensmittel (z.B. Einkaufszettel),

b) Zahl – Zeit (z.B. Uhrzeit: Viertel vor acht, sieben Uhr 45, halb zwei, dreizehn Uhr dreißig)

Auch mehrfache Kombinationen (vgl. Screenshot Abb. 6a) von Adjektiven werden vorgestellt und geübt (vier

grüne Paprika, drei rote Tomaten, fünf braune Zwiebeln, zwei blaue Augen, eine braune Nase, ein roter

Stuhl…). Ferner wird dann nach einfachen Antwortsätzen gefragt: Was machst du heute? Heute male ich!

Was machst du wann? Ich lese am Morgen! (vgl. Screenshot Abb. 6b). Dabei werden beim Anklicken blauer

Icons Fragesätze gesprochen bzw. geschrieben und bei grünen Icons Antwortsätze (vgl. Abb. 6b). Generell

ist jedoch die deutsche Grammatik bisher nicht das Hauptanliegen des Trainers, sondern eher die wichtigsten

Vokabeln und ihre einfachen Kombinationen als sprachliches Basiswissen (Zum Basis- bzw. Grundwortschatz

findet man zahlreiche Listen im Web).

Abbildung 6: a) Dreierkombination (Farbe, Anzahl, Gegenstand: vier grüne Paprika, zwei blaue Augen…

b) Einfache Frage- (blau) und Antwortsätze (grün) mit Zeitadverbien (am Morgen, am Mittag…)

Beim ersten Ansatz zur Entwicklung eines universellen Deutschtrainers wurde eine interaktive und

multimediale PowerPoint-Präsentation mit Hilfe des iSpring Converters in eine interaktive HTML5-

Anwendung umgewandelt. Diese interaktive Webseite des bisherigen Lern- und Übungsprogramms kann auf

allen üblichen Endgeräten mit Internetanschluss wie Smartphones (Handys), PCs, Notebooks und Tablets in

einem durchweg vorhandenen Browser wie Chrom, Opera, Firefox, Safari, Puffin usw. einfach und kostenlos

abgerufen und ausgeführt werden (1,2,3). Da die Antwortzeiten bei entsprechend geringen Datenraten der

Verbindung hoch sein können, lassen sich die Webseiten auch z.B. mit Hilfe der App iSpring Play lokal auf

dem Smartphone speichern und dann jederzeit offline bequem benutzen. Alterrnativ könnte man diese

Anwendung mit Hilfe einer entsprechenden Software wie PhoneGap in eine hybride App umwandeln (25).

Abbildung 7: Zwei Seiten des Auswahlmenüs für unterschiedliche Schwierigkeitsgrade

a) ausschließlich akustisches Lernen (Lautsprechericon) ohne Artikel 1) (

b) kombiniertes akustisches (Lautsprechericon) und schriftliches (Texticon) Lernen ohne Artikel 2)

Zur Bedienung sind einfach die Symbole und Bilder auf dem Bildschirm anzuklicken oder z.B. mit Wischen,

Mausklick und Return weiterzugehen. Der weitere Ausbau der bereits angebotenen Themen und die Ent-

wicklung neuer Themenbereiche, insbesondere auch berufsbezogene, ist in Arbeit sowie die Erweiterung

der rein englischen Version.

2. Selbst programmierte Webanwendung eines universellen

Deutschtrainers

Als alternativer Ansatz wurde eine Webanwendung mit Namen Karanga mit Hilfe von Javascript und unter

Verwendung entsprechender Bibliotheken selbst programmiert (4,5). Dabei wurde im Sinne des responsiven

Designs die Bildschirmdarstellung der Webseiten an die Größe und Eingabemethoden des jeweiligen Endge-

rätes angepasst, so dass sowohl eine möglichst große Konsistenz zwischen allen Geräten als auch die not-

wendige Anpassung an deren Bildschirme erreicht wurde. Die App enthält bisher 160 Wörter und wurde mit

sehr geringem Aufwand um eine englische Version erweitert, die sich im Anfangsmenü auswählen lässt (Abb.

8). Für diese Version mussten lediglich die englischen Wörter und beim Aufruf der TTS-Funktion ein engli-

scher Sprecher gewählt werden. Den Quelltext, alle Ressourcen der Anwendung und ihre technische Doku-

mentation findet man unter (4). Eine laufende Instanz der jeweiligen neuesten Version befindet sich auf (5).

Beim responsiven Webdesign (RWD, reagierend) handelt es sich um ein gestalterisches und technisches

Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts vor

allem Smartphones und Tabletcomputer reagieren können. Der grafische Aufbau einer responsiven Website

erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft

insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und

Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder

Touchscreen (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier

insbesondere die Media Queries) und JavaScript.

Das Frontend der selbstprogrammierten Webanwendung besteht aus einer index.html, in der die Kopfleiste

und zwei Handlebars-Templates definiert sind. Ferner bindet diese Indexdatei die Javascript-Dateien von

Handlebars (17), JQuery (18), responsivevoice.js (19) und der eigentlichen Anwendung ein. Das Backend ist

komplett in Node.js geschrieben (21) und hat zwei Aufgaben: das Bereitstellen statischer Ressourcen wie

HTML, CSS, Javascript und von Bildern sowie das Auslesen und Zusammenfügen der einzelnen Themenbe-

reiche zu einem Wörterbuch. Im mit Content bezeichneten Ordner befindet sich eine Menge von Unterord-

nern, die jeweils ein Thema repräsentieren. In jedem der Ordner liegen dazu die Bilder der Wörter zum ent-

sprechenden Thema sowie eine Datei namens dict.json, in der alle wichtigen Informationen zum Thema ge-

speichert sind. Beim Starten des Backend werden alle diese Themendateien eingelesen, verarbeitet und zu

einem JSON-Objekt zusammengefügt, das beim Aufrufen einer konfigurierten URL (/api/dictionary) aus-

gegeben wird. Beim Aufrufen der Webseite ruft das Frontend diese URL auf und erhält so alle wichtigen

Daten. Um einen Webserver bereit zu stellen wird Express.js genutzt, welches es erlaubt, in wenigen

Codezeilen die Grundfunktionalität zu implementieren (22). Um die Anwendung frei zugänglich zu machen

und Anpassungen an die eigenen Wünsche zu ermöglichen, ist die Anwendung als freie Software in Form der

MIT-Lizenz lizensiert (23).

Bei diesem Ansatz wird zur besonders effizienten auditiven Ausgabe repsonsivevoice.js genutzt (19). Neben

einer außerordentlich schlanken und einfachen API bietet diese Bibliothek den Vorteil, dass die TTS-Funktion

des Browsers genutzt wird, falls eine verfügbar ist. Nur wenn der Browser nicht über diese Funktion verfügt,

wird auf serverseitige Generierung von Audiodateien zurückgegriffen. Da die meisten aktuellen Browser

sowohl in der Desktopversion als auch in der Mobilvariante eine TTS-Funktion anbieten, wird somit der Netz-

verkehr beschränkt und die Ladezeiten drastisch reduziert. Das Ziel einer initialen Ladezeit unter 10 Sekun-

den mit einer GPRS-Verbindung (General Packet Radio Service, allgemeiner paketorientierter Funkdienst in

GSM-Netzen) wurde dabei mit einer gemessenen Ladezeit von 9.51 Sekunden erreicht. Das Öffnen der

Anwendung, Auswählen einer Kategorie und Anhören eines Audiobeispiels erzeugen bei Verwendung des

Browsers Chrome eine übertragene Datenmenge von nur 31 KB. Dies ist vor allem der Nutzung der TTS-

Funktion des Browsers zu verdanken, weil damit das Laden von Audiodateien entfällt. So ergeben sich einer-

seits kürzere Reaktionszeiten der Anwendung, andererseits bringt die Sprachsynthese jedoch auch einige

Nachteile mit sich, z.B. weicht die synthetische Aussprache in einigen Fällen von der natürlichen ab. Dabei

variiert die Qualität der Aussprachbeispiele je nach Browser, so dass nicht sichergestellt werden kann, dass

jedem Nutzer die optimale Nutzungserfahrung geboten wird. Die bekannten Browser Chrome und Firefox

lieferten konsistente und gute Ergebnisse liefern (14-16).

Öffnet man die Applikation mit Chrome auf Android (14) und wählt im Menü „Zur Homescreen hinzufügen“,

so wird nicht nur ein Shortcut mit passendem Logo angelegt, sondern auch die Manifestdatei ausgewertet

(20), so dass der Shortcut mit ausgeblendeten Navigationselementen startet, wodurch das Gefühl einer

nativen Android App entsteht. Unten abgebildet sind drei Screenshots der selbstprogrammierten Weban-

wendung Karanga. Zunächst wird in Abb. 8 die Einstiegsseite mit der Sprachenauswahl gezeigt. Abbildung 9a

zeigt dann die darauffolgende Seite mit der Themenauswahl. Klickt man hier das Bild für Wetter unten links

an, so erscheint die in Abb. 9b dargestellte Seite mit den Bildern, der Audioausgabe und dem Schriftzug der

zu diesem Thema zu lernenden Wörter. Die Audioausgabe (Substantiv mit Artikel) erfolgt beim Anklicken

des Bildes.

Abbildung 8: Einstiegsseite des selbstprogrammierten Webanwendung Karanga mit Auswahl des

deutschen oder englischen Sprachtrainers durch Anklicken der Flaggen

Abbildung 9: a) Themenauswahl (unten links Wetter), b) oberer Teil der Seite mit den gesprochenen und

geschriebenen Wörtern zum Thema Wetter

Referenzen

(1) http://ogy.de/detr (2) http://ogy.de/detrle (3) http://ogy.de/entr (4) http://github.com/t0rbn/Karanga/ (5) http://karanga.torben.xyz/

(6) Sprachlernangeboten des Goethe-Instituts: https://www.goethe.de/de/spr/flu.html (7) http://webkompetenz.wikidot.com/html-handbuch:audio-ressourcen (8) Zur App iSpring Play: http://www.ispringsolutions.com/ispring-mobile-player.html (9) Deutschkurse der Deutschen Welle: http://www.dw.com/en/learn-german/s-2469

ARD Bilderwörterbuch: http://www.ard.de/home/ard/guide-for-refugees-wegweiser-fuer- fluechtlinge/Bildwoerterbuch_Deutsch/2255578/index.html

(10) Initiative Deutsch lernen: http://1deutsch-lernen.bplaced.net/, eigenes Lernmaterial: http://1deutsch-lernen.bplaced.net/deutsch_lernen.html

(11) Learning & Doing GmbH, Deutsch als Fremdsprache, 400 Arbeitsblätter, Zielgruppe sind Lehrer, die Schüler mit Migrationshintergrund unterrichten: http://www.deutschalsfremdsprache.ch/

(12) Zum iSpring Converter: http://www.ispringsolutions.com/ispring-converter

(13) https://www.google.de/chrome/browser/desktop/

(14) http://www.apple.com/de/safari/

(15) https://www.mozilla.org/en-US/firefox/

(16) http://handlebarsjs.com/

(17) https://jquery.com/

(18) http://responsivevoice.org/ (19) https://developer.chrome.com/extensions/manifest

(20) https://nodejs.org/en/

(21) http://expressjs.com/

(22) https://opensource.org/licenses/MIT

(23) http://www.ppt-to-html5.com/

(24) http://phonegap.com/

(25) Heidtmann K.D., Deutschtrainer, Englishtrainer - E-Learning-Tools to study the German resp. English

language without making use of any source language, Report, Fachbereich Informatik, Universität Hamburg, 2015 (s. Researchgate.net)

(26) Heidtmann K.D., eLearning-Werkzeuge für das experimentelle und explorative Lernen in der Telematik, 2005 (s. Researchgate.net)

(27) Hamburg Open Online University (HOOU), http://www.hoou.de