Tutorials

Tutorial meint in der Regel eine Lehr- oder Lerneinheit zu einem bestimmten Fachthema. Im Folgenden geht es um spezielle Lernmodule zu einer Softwareanwendung, im Beispiel WordPad. Es handelt sich um eine Simulation von Anwendungen auf der Basis von Screenshots.

Der Vorteil des TutorialMaker ist es, dass Sie eine Anwendungssimulation erstellen und diese sowohl als Präsentation wie auch als Übung mit Lösungsdarstellung ausführen können.

Statt den normalen Steuerungskomponenten benutzen Sie spezielle Komponenten unter dem Register Tutorials. Mit diesen können Sie das Verhalten bei der Simulation im Präsentationsmodus, Übungsmodus und Lösungsmodus direkt bestimmen.

Tutorial anlegen

Um ein Tutorial anzulegen, legen Sie im Projektfenster eine neue Seite an und wählen als Vorlage Tutorial-Präsentation. Klicken Sie anschließend auf Erstellen.

Auf dieser Vorlage ist schon die Seitennavigation und ein „Frame“ (Tutpage) integriert. In diesem Frame können mehrere Seiten ablaufen, z.B. wie hier die eines Tutorials. Dieses Frame wird als separate Datei gespeichert (Endung *.tup). Zum Bearbeiten machen Sie einen Doppelklick auf den Frame. Sie werden dann aufgefordert zuerst die Datei zu speichern. Ablageort ist der Projektordner. Sie können den vorgeschlagenen Namen übernehmen oder das Tutorial umbenennen. Abschließend klicken Sie auf Öffnen.

Im Projektfenster sehen Sie jetzt ein zusätzliches Register Seitenrahmen. Hier legen Sie die einzelnen Turorialseiten an. Diese haben automatisch die voreingestellte Größe des Seitenrahmens.

Seiten für Tutorials anlegen

In Tutorials zu Softwareapplikationen bestehen die Seiten oftmals aus Screenshots der entsprechenden Anwendung. Aus diesem Grunde starten Sie zunächst die entsprechende Anwendung – im Beispiel WordPad – und definieren die Optionen für die Screenshoterstellung.

Optionen für die Screenshoterstellung definieren

Haben Sie die Anwendung gestartet, wählen Sie im Menü Extras den Befehl Screenshot-Optionen. Im Dialogfenster nehmen Sie die folgenden Einstellungen vor:

Die Größe ist in der Regel so gesetzt, dass ein Vollbild erstellt wird (im Seitenrahmen). Damit auch die Anwendung (Wordpad) auf diese Größe gesetzt wird, klicken Sie auf Anwendung auf Größe setzen. Anschließend bestätigen Sie Ihre Angaben mit OK.

Einen Screenshot erstellen

Um einen neue Seite für die Simulation anzulegen, erstellen Sie einen Screenshot. Gehen Sie wie folgt vor:

1. Klick auf das Symbol zur Screenshoterstellung (Fotoapparat)

2. Ein Hinweisfenster zeigt ihnen an, wie sie die Screenshots erstellen, nämlich mit der Tastenkombination Strg+F12

3. Nach Bestätigung des Hinweisfensters mit OK springen Sie automatisch in des Anwendungsprogramm

4. Drücken Sie Strg+F12

5. Ein Screenshot wird erstellt (akustisches Signal) und Sie springen zurück in das Autorensystem.

6. Unter dem Register Seitenrahmen ist nun automatisch eine Seite angelegt mit dem erstellten Screenshot als Hintergrundbild

Textfenster integrieren

Auch auf diesen Seiten können Sie unterschiedliche Komponenten integrieren, z.B. Texte. Klicken Sie dazu im Register Design auf das Icon TutTextWindow und platzieren Sie es im Arbeitsfenster.

Als Vorlage wählen sie Textfenster-Präsentation und klicken auf Erstellen.

Geben Sie anschließend den gewünschten Text ein, z.B.:

„WordPad ist ein einfaches Textverarbeitungsprogramm von Windows. Ähnlich wie bei Word können Sie Texte verfassen, formatieren und speichern. Der Funktionsumfang ist nur geringer.“

Tipp: Wenn Sie in der Eigenschaftenleiste die Option Automatische Größe aktivieren, wird das Textfeld automatisch entsprechend Ihrer Texteingabe angepasst. Sie ersparen sich damit die händische Anpassung der Fenstergröße.

Mehrere Screenshots erzeugen

Auf die gleiche Art und Weise können sie weitere Seiten anlegen. Sie können jedoch auch mehrere Screenshots auf einmal erstellen. Klicken Sie dazu auf das Symbol Mehrere Screenshotseiten erzeugen.

Sie können jetzt alle Bilder produzieren, die Sie für Ihre Präsentation, z.B. Datei speichern, benötigen. Drücken Sie dazu nach jeder Aktion, die Sie ausführen, die Tastenkombination Strg+F12. Dies bedeutet:

· Ausgangsbild: Strg+F12

· Klick auf Datei: Strg+F12

· Befehl Speichern unter: Strg+F12

· Dateiname eingeben: Strg+F12

· OK: Strg+F12

Anschließend wechseln Sie über die Taskleiste zurück zum TutorialMaker. Die Seiten können Sie entsprechend umbenennen, z.B. so

Präsentationsmodus

Damit die Bilder nicht nur hintereinander angezeigt werden, sondern auch als Animation ablaufen, müssen die entsprechenden Bilder in einem Schritt zusammengefasst werden. Auf diese Art und Weise erstellen Sie eine Animation, die einen Programmablauf simuliert, z.B. das Klicken auf das Menü „Datei“ und das Aufrufen des Dialogfensters über den Befehl Speichern unter. Überprüfen Sie jedoch zuvor, ob der Modus des Tutorials in der Standardleiste auf Präsentation gesetzt ist.

Ablaufanimation erstellen

Zum Erstellen der Animation aktivieren Sie die Seite, in die Sie weitere Seiten als Bilder einbinden möchten (z.B. die Ausgangsseite) und klicken Sie anschließend im Menü Seite auf den Befehl Seite einbinden.

Es öffnet sich daraufhin das Dialogfenster Seiten als Bilder einbinden. Hier können Sie über das Listenfels Von die Ausgangsseite definieren und über das Listenfeld Bis, die Seiten, die als Bilder eingebunden werden sollen.

Die eingebundenen Seiten (mit dem heruntergeklappten Menü „Datei“ und dem markierten Befehl „Speichern unter“) werden dann mit einem Klick auf OK als Differenzbilder in die Ausgangsseite eingebunden.

Differenzbild bedeutet, dass nicht der ganze Screenshot als Bild auf die Ausgangsseite gelegt wird, sondern nur der Unterschied zur Ausgangsseite (Teilbild). Dies reduziert das aufkommende Speichervolumen zum Teil erheblich.

Nennen Sie das erste Bild MenueDatei und das zweite SpeichernUnter.

Wenn Sie die Seite jetzt in der Vorschau [F9] betrachten, können Sie noch keinen Ablauf erkennen. Sie sehen lediglich das Endbild, das alle Elemente gleichzeitig dargestellt. Um einen Ablauf zu erstellen, müssen Sie zunächst noch Pausen und Aktionen zwischen den Bildern integrieren.

Tutorialkomponenten einbinden

Die entsprechenden Komponenten für Tutorials finden Sie im gleichnamigen Register. Dazu gehören u.a. Pausen, TutorialButtons (für Aktionen), Eingabefelder, Mauszeiger und Rahmen.

Fügen Sie zunächst auf der Seite, in der Sie den Programmablauf simulieren wollen ein Textfenster (Vorlage Textfenster-Präsentation) ein. Im Texteditor geben Sie beispielsweise den folgenden Text ein:

Im Register HTML-Editor haben Sie dabei die Möglichkeit, bestimmte Begriffe hervorzuheben; z.B. das Formatieren der Befehle Datei und Speichern unter.

Hinter das Textfenster setzen Sie eine Pause und einen TutorialButton .

Mit Hilfe eines TutorialButtons können Mausklicks oder ein Tastendruck simuliert werden. Positionieren Sie den Button auf Ihrem Ausgangsbild über dem Menü Datei und nehmen Sie die folgenden Einstellungen vor:

Anschließend klicken Sie auf OK und benennen den Button in Datei um.

Fügen Sie nun der Seite noch eine weiter Pause und einen TutorialButton hinzu. Ordnen Sie diese im Komponentenfenster hinter dem ersten eingebundenen Bild an. Den TutrialButton positionieren Sie auf dem ersten eingebundenen Bild über dem Menübefehl Speichern unter.

Die Einstellungen nehmen Sie wie folgt vor:

Klicken Sie auf OK und benennen Sie den Button in SpeichernUnter um. Die Komponentenliste der Seite sollte anschließend so aussehen.

Testen Sie den Ablauf in der Vorschau.

Texteingabe simulieren

Auf der nächsten Seite (Dialogfenster) des Tutorials wird nun die Texteingabe simuliert.

Fügen Sie zuerst wieder ein Textfenster und eine Pause ein. Das Textfenster kann beispielsweise den folgenden Text beinhalten:

Im Dialogfenster geben Sie der Datei einen Namen, z.B. WordPad1 und klicken auf Speichern.

Anschließend wählen Sie in der Komponentenleiste das Eingabefeld TutorialEditText und positionieren es auf dem Hintergrundbild über dem Eingabefeld für den Dateinamen.

Nennen Sie die Komponente Dateiname und nehmen Sie im Dialogfenster die folgenden Einstellungen vor. Klicken Sie anschließend auf OK:

Für den Ablauf fehlt nun noch eine Pause und ein Aktionsbutton für Speichern. Fügen Sie die beide Komponenten ein und positionieren Sie den TutorialButton auf dem Hintergrundbild über Speichern. Die Einstellungen sind ähnlich wie auf der vorherigen Seite:

Klicken Sie anschließend auf OK und testen Sie den Ablauf in der Vorschau.

Die Komponentenliste der Seite Dialogfenster sollte nun so aussehen:

Auf der letzten Seite Ihrer kleinen Präsentation fügen Sie nun noch ein weiteres Textfenster, eine Pause, einen Mousecursor und einen Rahmen hinzu. In Textfenster könnte beispielsweise Folgendes stehen:

Das Dokument ist nun gespeichert.

Den neuen Namen finden Sie in der Titelleiste.

Danach setzen Sie eine Pause und anschließend folgt der Mousecursor und ein Rahmen. Diese sollen den Namen in der Titelleiste hervorheben.

Testen Sie den Ablauf wieder in der Vorschau.

Tipp: Wenn Sie möchten, dass ihr Textfenster auf allen Seiten der Präsentation auf der gleichen Position angezeigt wird, so können diese auch über die Eingabe der genauen Koordinaten definieren. Aktivieren Sie dazu die entsprechenden Textfenster und rufen Sie den Objektinspektor auf. Diesen öffnen Sie entweder über das Menü Ansicht oder F11.

Im Objektinspektor geben Sie dann die entsprechende Position für Links und Oben ein, sowie nach Wunsch die entsprechende Breite. Die Höhe passt sich dann automatisch an – sofern die Option Autogröße aktiviert ist. Diesen Vorgang wiederholen Sie für die anderen Textfenster.

Übungsmodus

Möchten, Sie neben der Präsentation auch interaktive Übungen integrieren, so haben Sie dafür zwei Möglichkeiten. Entweder fügen Sie dem erstellten Tutorial weitere Seiten für eine interaktive Übung hinzu oder Sie erstellen eine neue Lerneinheit.

In diesem Fall wählen wir die zweite Variante.

Stellen Sie dazu in der Standardleiste den Modus auf Übung und wählen Sie im Projektfenster im Register Projekt neue Seite. Als Vorlage wählen Sie dieses mal Tutorial-Übung und klicken auf Erstellen.

Im Projektfenster befindet sich jetzt unter Ihrer Seite Tutorial-Präsentation die Seite Tutorial-Übung.

Zum Bearbeiten der Übung machen Sie einen Doppelklick auf den Seitenrahmen. Es öffnet sich daraufhin das Dialogfenster zum Auswählen oder Neuanlegen einer Datei. In diesem Fall wählen wir die bereits erstellte Datei für die Präsentation tutorial_1.tup. Dies hat den Vorteil, dass man eine Datei – mit allen Bildern – für zwei Lernmodule nutzen kann, sowohl für die Tutorial-Präsentation als auch für die Übung. Klicken Sie zum Aufruf auf den Button Öffnen.

Übung erstellen

Im Register Seitenrahmen sehen Sie jetzt alle Seiten, die Sie bereits für die Präsentation angelegt haben. Diese können als Basis für die Übung genutzt werden. Seiten, die für die Übung nicht benötigt werden, können deaktiviert werden. Dies trifft beispielsweise auf die erste Seite (Einleitung) zu, die in der Präsentation lediglich der Einführung diente. Um diese in der Übung nicht anzuzeigen, klicken Sie auf diese Seite und stellen unter Weitere Eigenschaften den AnzeigeModus auf tvmNormalPresentation. In der Übung wird daraufhin diese Seite übersprungen und direkt die zweite Seite (Speichern) angezeigt. Sie dürfen diese jedoch nicht einfach rauslöschen, da Ihre Präsentation in diesem Fall ja auf die gleiche tup-Datei zurückgreift.

Hinweis: Diese Funktion kann für alle Seiten und Komponenten eingesetzt werden. Hier können Sie bestimmen, in welchem Modus Sie angezeigt werden soll.

Um eine interaktive Übung zu erstellen, benötigen Sie ein Aufgabenfenster, um den Lernenden mitzuteilen, was er tun soll und ein Abschlussfeedback. Das Aufgabenfenster integrieren Sie auf der Seite, auf der die ersten Aktionen stattfinden – in diesem Fall die Seite Speichern.

Klicken Sie im Register Tutorial auf die Komponente TutTextWindow und wählen Sie als Vorlage Textfenster-Aufgabe. Zum Einfügen des Fensters klicken Sie auf Erstellen.

Auf Ihrer Seite positionieren Sie das neue Textfenster entweder mit der Maus oder über den Objektinspektor. Als Aufgabenstellung können Sie beispielsweise den folgenden Text eingeben:

„Speichern Sie das geöffnete Dokument unter dem Namen "WordPad".

Wählen Sie dabei den Weg über das Menü.

Das Abschlussfeedback positionieren Sie auf der Seite, auf der die letzte Aktion stattfindet – in diesem Fall die Seite WordPad. Klicken Sie im Register Tutorial auf die Komponente TutTextWindow und wählen Sie als Vorlage Textfenster-Abschlussfeedback. Zum Einfügen des Fensters klicken Sie auf Erstellen.

Positionieren Sie es auf der Seite und geben Sie beispielsweise den folgenden Text als Rückmeldung:

Sehr gut. Sie haben das Dokument unter dem Namen WordPad gespeichert.

Der neue Name erscheint jetzt in der Titelleiste.

Interaktion integrieren

Als nächstes muss definiert werden, welche Aktionen, der Lernende ausführen muss, um die Aufgabe richtig zu lösen. Der sogenannte Optimalweg wurde bereits durch die Präsentation vorgegeben. Die erste Aktion, die der Lernende ausführen muss, ist der Klick auf das Menü Datei. Rufen Sie deshalb auf der Seite Speichern den entsprechenden TutorialButton (Speichern) auf und nehmen Sie die notwendigen Einstellungen für den Übungsmodus vor.

Mit einem Klick auf Aktion bestimmen öffnet sich das Dialogfenster Aktion zuweisen. Hier wählen Sie Weiter ausführen, da auf dieser Seite noch eine weitere Aktion durchzuführen ist – der Klick auf den Befehl Speichern unter.

Hinweis: Die Option Bei Lösung ausführen ist automatisch aktiviert. Sie bewirkt, das die Aktion dem Lernenden angezeigt wird, wenn er auf den Lösungsbutton klickt.

Die gleichen Einstellungen nehmen Sie auch bei dem nächsten TutorialButton (speichern) vor. Allerdings weisen Sie diesem die Aktion Navigation zu und wählen als Parameter die nächste Seite(tpgNext).

Testen Sie die Übung bis hierhin in der Vorschau.

Nun muss noch die Texteingabe und das Speichern der Datei analysiert werden. Das Eingabefeld Dateiname ist auf der Seite Dialogfenster ja bereits vorhanden.

Weisen Sie hier zu, welche Aktionen bei richtiger und bei falscher Eingabe ausgeführt werden sollen.

Aktion bei richtiger Eingabe:

Mit einem Doppelklick auf das Eingabefeld öffnen Sie das entsprechende Eigenschaften-Fenster. Hier können Sie für den Übungsmodus bestimmte Optionen für die Auswertung und das Eingabefeld als solches definieren.

Klicken auf Aktion bei richtig, um die entsprechende Aktion zu zuweisen. In diesem Fall erfolgt eine Navigation zur nächsten Seite. Bestätigen Sie Ihre Eingaben mit OK.

Aktion bei falscher Eingabe:

Bei falscher Eingabe ist es sinnvoll, dem Lernenden eine Rückmeldung zu geben. Aus diesem Grunde legen wir zunächst ein Feedbackfenster an, dass bei falscher Eingabe eingeblendet werden soll.

Klicken Sie dazu im Register Tutorial auf TutTextWindow und wählen Sie als Vorlage Textfenster-Feedback.

Hier können Sie beispielsweise den folgenden Text als Rückmeldung eingeben:

Ihre Eingabe war nicht korrekt.

Geben Sie als Dateiname WordPad ein und klicken Sie anschließend auf Speichern.

Nennen Sie das Feedback-Fenster FFB-Eingabe und ordnen Sie es in der Komponentenliste oberhalb des Eingabefeldes an, damit es bei der Analyse aufgerufen werden kann.

Öffnen Sie nun wieder das Eingabefeld und definieren Sie, dass bei falscher Eingabe das Feedback-Fenster angezeigt werden soll. Nehmen Sie die Einstellungen wie folgt vor:

Die Analyseoptionen wurden nun alle definiert. Jetzt muss noch festgelegt werden, wann diese ausgeführt werden soll. Adäquat zur Anwendungssoftware ist dies mit dem Klick auf Speichern sinnvoll.

Öffnen Sie deshalb den TutorialButton speichern auf dieser Seite und klicken Sie im Bereich Übungsmodus auf Aktion bestimmen. Im Dialogfenster Aktion zuweisen wählen Sie anschließend als Komponente ihr Eingabefeld Dateiname und als Aktion Eingabe analysieren. Bestätigen Sie Ihre Eingaben wir gewohnt mit OK.

Achten Sie darauf, dass in diesem Fall die Option Nach Klick deaktivieren nicht aktiviert ist, da der Lernende ansonsten nach einer falschen Eingabe keine Korrekturen mehr vornehmen kann.

Damit die Taste Speichern auch beim Drücken von [Enter] aktiviert wird, weisen Sie dem Button eine Schnelltaste zu.

Klicken Sie dazu in der Eigenschaftsleiste auf das Symbol Schnelltaste. In dem Tasten-Dialogfenster können Sie die Taste dann Drücken oder in der rechten Liste auswählen.

Eine kurze Übung mit allen notwendigen Schritten ist damit erstellt. Testen Sie diese im Vorschaumodus.

Hinweis: Sie können dem Lernenden auch für alle anderen falschen Aktionen und Klicks Feedbacks geben. Positionieren Sie dazu einfach einen TutorialButton an der gewünschten Position und weisen Sie ihm die Aktion Komponente anzeigen zu.

Ist das Anwendungsfenster immer gleich aufgebaut, ist es sinnvoll, die Aktionstasten und Feedbacks als Vorlage zu speichern und in den verschiedenen Lernmodulen einzubinden. Beispielsweise bilden Sie einmal das Menü Datei ab speichern die Seite als Vorlage und weisen diese Vorlage den entsprechenden Tutorialseiten zu.

Lösungsmodus

Der Lösungsmodus dient dazu, dem Lernenden den korrekten Weg für eine Aufgabe anzuzeigen. Dieser wird vom Lernenden über das Symbol Glühbirne in der Navigationsleiste aufgerufen. Das Symbol ist bereits auf der Vorlage Tutorial-Übung integriert.

Um den Lösungsmodus zu bearbeiten, stellen Sie in der Standardleiste den Modus auf Lösung.

Bei allen Aktionen, die in der Lösung angezeigt werden sollen, müssen Sie jetzt die Option Bei Lösung ausführen aktivieren. Beispielsweise der Klick auf das Menü Datei auf der Seite Speichern.

Standardmäßig sollte dies bereits bei allen TutorialButtons der Fall sein, die Sie für die Übung definiert haben. Testen Sie dies jedoch noch einmal in der Vorschau.