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