Arbeiten mit den Texteditoren

Man kann Text fett oder kursiv schreiben. In Anlehnung an die englischen Begriffe "bold" und "italic" sind die Buttons mit B bzw. I markiert.

Atto

Im Atto findet man dafür Buttons in der ersten Buttonzeile (in der Übersicht Nrn. 5 und 6).

 

Tiny

Im Tiny gibt es dazu mehrere Optionen: Buttons in der Buttonzeile (in der Übersicht Nrn. 3 und 4,

außerdem Buttons im "Kontextmenü Text", Nrn. 39 und 40

und Menüeinträge im Menü "Format" (35).

Man kann Text unterstreichen oder durchstreichen. Streichungen werden zusätzlich automatisch rot markiert. In Anlehnung an die englischen Begriffe "underline" und "strike through" sind die Buttons mit U bzw. S markiert:

Atto

Im Atto gibt es dazu in der zweiten Buttonzeile zwei Buttons (in der Übersicht Nrn. 21 und 22).

Tiny

Im Tiny findet man die Funktionen im Menü "Format" (Nr. 35)

Mit den Funktionen zum Tief- und Hochstellen von Text kann man z.B. Dinge schreiben wie

• CO₂
• H₂O
• E = m c²
• a² + b² = c²

Die Funktionen sind meist mit X² und X₂ oder ähnlich markiert.

Atto

Im Atto findet man dafür Buttons in der zweiten Buttonzeile (in der Übersicht Nrn. 23 und 24).

Tiny

Im Tiny verbergen sich die Funktionen im Menü "Format" (Nr. 35).

Man kann für markierten Text eine Schriftfarbe und eine Hintergrundfarbe einstellen. Man kann auch beides kombinieren und z.B. solche Tags erstellen:

blau rot grün gelb

Die Farbauswahl orientiert sich am "Corporate Design" der THGA, um den Formatierungs-Wildwuchs ein wenig einzudämmen: Die vier bzw. fünf Blau- und Rottöne, die jew. drei Varianten von gelb und grün und die Graustufen sind empfohlen, die zusätzlichen Dekorfarben (nur im Atto verfügbar) sollten "sparsam" eingesetzt werden.

Einen älteren (!) Blogbeitrag zu den THGA-Farbwerten findet man hier: Alles so schön bunt!

Atto

Im Atto-Editor gibt es dafür in der zweiten Buttonzeile zwei Buttons (Nrn. 7 und 8).

Tiny

Im Tiny gibt es wiederum mehrere Möglichkeiten: Buttons in der Buttonzeile (Nrn. 5 und 6),

Buttons im Kontextmenü Text (Nrn. 43 und 44),

außerdem Einträge im Menü "Format" (Nr. 35,

Farbformatierungen löschen (Atto)

Im Atto kann die Funktion "Formatierung löschen" mit dem "Radiergummi"-Button in der zweiten Buttonzeile (Nr. 40) genutzt werden.

Farbformatierungen löschen (Tiny)

Im Tiny hat das Farbwahl-Menü unten links eine Funktion, um die Farbformatierung zu löschen.

 Außerdem gibt es im Menü "Format" (Nr. 35) den Eintrag "Formatierung entfernen".

Atto

In der Buttongruppe zu Hyperlinks gibt es im Atto-Editor einen zum Anlegen 18, einen zum Löschen 19 und einen zur Unterdrückung von Autoverlinkungen 20.

Der Button zum Anlegen eines Hyperlinks blendet einen Dialog mit folgenden Konfigurationsmöglichkeiten ein:

Tiny

Im Tiny-Editor ist es ähnlich: Die Buttons mit den Nrn. 17, 18 und 19 können Hyperlinks einfügen, löschen und unterdrücken.

Für beide Editoren gilt:
Der "Text zum Anzeigen" ist der verlinkende Text, in das Feld URL gehört die Adresse, zu welcher der Link führen soll. Mit "Dateien auswählen" kann auch ein Link auf eine Datei gesetzt werden (nicht in allen Kontexten verfügbar).

Wenn "Hyperlink einfügen" genutzt wird, wenn bereits Text markiert wurde, wird dieser Text automatisch in das Feld "angezeigter Text" eingefügt.

Um einen Link zu entfernen, markieren Sie den Text, der den Link enthält und klicken Sie auf den Button "Link entfernen."

Die Funktion "Autoverlinkung verhindern" ist für automatisch generierte Hyperlinks gedacht, die unterdrückt werden sollen. Das können Autoverlinkungen von Glossareinträgen, Autoverlinkungen von Aktivitäten, automatisches Einbetten von Medien in einem Medienplayer oder die Ersetzungen von Emoticons sein. Details zu Autoverlinkungen finden Sie im Anleitungskurs "Filter" in den Abschnitten

• Autoverlinkung zu Glossaren,
• Autoverlinkung zu Aktivitäten und
• Emoticon als Bild zeigen.

Hinter den Absatzformaten verbergen sich fünf (Atto, Nr. 2) bzw. sieben (Tiny, Menü "Format", Nr. 35) Formate:

1. Überschrift groß (Atto) bzw. 3 (Tiny)
2. Überschrift mittel (Atto) bzw. 4 (Tiny)
3. Überschrift klein (Atto) bzw. 5 (Tiny)
4. Überschrift 6 (nur Tiny)
5. Vorformatiert
6. Absatz und
7. Blockzitat (nur Tiny)

Das hier ist

Überschrift groß / 3,

sie entspricht dem HTML-Element <h3>.

Überschrift mittel / 4

entspricht dem HTML-Element <h4>,

Überschrift klein / 5

entspricht dem HTML-Element <h5>,

Überschrift 6 (nur Tiny)

entspricht dem HTML-Element <h6>.

Dies ist vorformatierter Text.
Er ist geeignet für Code-Darstellungen und
entspricht dem HTML-Element <pre>

Dies ist das Absatzformat. Es entspricht dem HTML-Element <p>. Das Absatzformat hat - im Gegensatz zu nicht als Absatz formatiertem Text - vor allem andere vertikale Abstände zu vorherigen und folgenden Inhalten.

Das hier drüber ist ein Absatz (im Absatzformat), das hier
ist lediglich ein Umbruch ([Shift] + [Enter]).

Das nur im Tiny als Absatzformat angelegte Blockzitat sieht so aus:

"... to examine the use of open source software to support a social constructionist epistemology of teaching and learning within Internet-based communities of reflective inquiry."Martin Dougiamas auf die Frage, warum er Moodle entwickelt hat

Das Blockzitat ist im Atto als "Template" 4 (s.u.) verfügbar.

Die Gestaltungsvorlagen (im Atto Nr. 3, im Tiny Nrn. 13 und 14) sind mit Plugins (atto_styles bzw. tiny_elediastyles) realisiert und stellen ein paar spezielle Formatierungen zur Verfügung:

Farbige Textfelder

Hinter den Gestaltungsvorlagen verstecken sich viele verschiedene Vorlagen, vor allem die farbigen Boxen mit und ohne Icons in rot, blau, grün und gelb:

Absatz vs. Blocksatz

Dies ist ein klassischer Absatz, linksbündig, mit automatischer Silbentrennung (Welche Browser den CSS-Befehl hyphens:auto; unterstützt, können Sie hier nachsehen: https://caniuse.com/css-hyphens):

Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Dem gegenüber kann die Gestaltungsvorlage "Blocksatz" das Ausfransen am rechten Rand verhindern. Da in den meisten Browsern aber auch jetzt schon die Silbentrennung aktiv ist (s.o.), ist der Blocksatz m.b.M.n. überbewertet. Hie noch etwas Blindtext: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Textumfluss steuern

Mit dem Eintrag "Textumfluss beenden" wird ein leeres Element eingefügt, dass den Textumfluss um Medien oder Tabellen mit Ausrichtung "links" oder "rechts" beendet. Diese ist dann sinnvoll, wenn z.B. Grafiken neben Texten dargestell werden sollen, allerdings nur in einem festgelegten Bereich: Dies hier ist ein recht kurzer Text. Das Bild rechts ist auf den meisten Desktop-Anzeigen höher als dieser Absatz. Daher habe ich den Textumfluss hier unterbrochen, damit der nächste Absatz erst unterhalb des Bildes erscheint.

Dieser Absatz steht nicht mehr neben dem Bild, da er vielleicht keinen Bezug zu dem Bild hat. Durch die Beendigung des Umflusses steht er nun unterhalb des Bildes. Im Bearbeitungsmodus wird so ein "Textumfluss beenden"-Element als  - - - - -  angezeigt.

Inline-Code (nur Atto)

Die letzte Gestaltungsvorlage ist - im Gegensatz zur Formatvorlage "Vorformatiert", s.o. - für die Code-Darstellung im Fließtext geeignet. So kann ich z.B. <p>HTML-Tags</p> direkt in den Text schreiben. Es entspricht in etwa dem HTML-Element <code>.

Im Tiny steht eine Inline-Code-Formatierung im Menü "Format" (Nr. 35), Eintrag "Code", zur Verfügung.

Formatierungen entfernen

Um Formatierungen zu entfernen, kann

• im Atto der Menüeintrag "X Ohne Gestaltungsvorlage" aus dem Gestaltungsvorlagen-Dropdown und
• im Tiny der Button Nr. 14

genutzt werden. Außerdem steht in beiden Editoren eine Funktion "Formatierung löschen" zur Verfügung,

• im Atto als Button in der Menüzeile, Nr. 40, und
• im Tiny im Menü Format, Nr. 35: "T_x Formatierung entfernen".

Die Templates (im Atto Nr. 4, im Tiny Nr. 16, außerdem Menü "Einfügen", Nr. 34) basieren ebenfalls auf zusätzlichen Plugins (atto_templates4u bzw. tiny_htmlblock). Hier sind komplexere Vorlagen hinterlegt, die nach dem Hinzufügen weiter bearbeitet werden können:

Zitat

Die Zitatvorlage legt ein <blockquote>-Element an, dass für Blockzitate gedacht ist. Es enthält ein optionales <cite>-Element für eine Quellenangabe. Nach dem Hinzufügen sieht es so aus:

Hier das Zitat hineinkopieren...
... und hier die Quelle

Wenn ich dann entsprechende Eingaben mache, kann es so aussehen:

"Der Wissenschaftler findet seine Belohnung in dem, was Poincaré die Freude am Verstehen nennt, nicht in den Anwendungsmöglichkeiten seiner Erfindung."
Albert Einstein, zit. nach wikiquote.org)

Veranstaltungsdetails

Das Template legt eine Tabelle an, in die Veranstaltungsdetails zu (Präsenz-) Veranstaltungen eingetragen werden können:

Creative Commons-Hinweise

Wenn Sie Kurse oder Kursbestandteile mit einer freien Lizenz - hier: Creative Commons - versehen wollen, stehen sieben verschiedene Hinweis-Templates zur Verfügung. Diese enthalten Platzhalter für Werktitel und Urheber:in, außerdem die CC-Icons und die notwendigen Links zu den entsprechenden Lizenzen:

[Werktitel] von [Urheber] ist als Creative Commons Public Domain (CC0) gekennzeichnet.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung 4.0 International Lizenz.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Keine Bearbeitungen 4.0 International Lizenz.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0 International Lizenz.

[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell 4.0 International Lizenz.

Urheberrechtshinweis

Auch wenn das Copyright-Zeichen (©) und Formulierungen wie "Alle Rechte vorbehalten" im deutschen Urheberrecht eine äußerst untergeordnete Rolle spielen (vgl. hier oder hier), steht auch dazu eine Vorlage zur Verfügung. Der Textbaustein ist natürlich ebenfalls anpassbar:

Bitte beachten Sie: Die in diesem Kurs vorhandenen Lehrmaterialien sind urheberrechtlich geschützt. Eine Weitergabe, Vervielfältigung oder Veröffentlichung außerhalb des Lehrbetriebs ist ohne Zustimmung des/der Lehrenden nicht zulässig. Ebenfalls unzulässig ist ein Mitfilmen der Veranstaltung ohne Zustimmung.

Code-Highlighting

Die Vorlage ist vor allem für die Hervorhebung bestimmter Programmcode-Teile notwendig und arbeitet am besten in Verbindung mit einem Kursfilter (Anleitung zu Filtern finden Sie hier). Am Beispiel von HTML könnte das so aussehen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Seitentitel</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

Bildbeschriftung

Das Template "Bildbeschriftung" verknüpft ein Bild mit einem Text, so dass dieser nicht verrutscht - unabhängig von Anzeigegröße und Seitenbreite. Dafür wird ein <figure>-Element incl. der <figcaption> angelegt. Das sieht initial so aus:

Das Bild kann dann markiert und über die Editor-Funktion "Bild einfügen oder bearbeiten" ausgetauscht werden. Auch die Ausrichtungs- und Textumflusseinstellungen sind darüber einstellbar:

Hier neben ist ein Bild mit Bildbeschriftung und "Ausrichtung: links". Letzteres führt zum Textumfluss dieses Textes:

Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Die Listenfunktionen beschränken sich auf ungeordnete Listen mit Spiegelstrichen bzw. Bullet Points (Atto: Button Nr. 9, Tiny: Button Nr. 29) und nummerierte Listen mit automatischer Nummemrierung (Atto: Nr. 10, Tiny: Nr. 30):

• Liste
• mit
• Bullet-
• points

1. Liste
2. mit
3. Numme-
4. rierung

Diese lassen sich auch verschachteln und die beiden Arten lassen sich mischen. Dabei muss man allerdings zusätzlich mit der Funktion "Ein- / Ausrücken" (Atto: 28, 29, Tiny: 27, 28) arbeiten:

1. nummeriert, Level 1
   • Spiegelstrich, Level 2
   • Spiegelstrich, Level 2
     1. nummeriert, Level 3
     2. nummeriert, Level 3
        • Spiegelstrich, Level 4
        • Spiegelstrich, Level 4
          1. nummeriert, Level 5
          2. nummeriert, Level 5
        • Spiegelstrich, Level 4
     3. nummeriert, Level 3
   • Spiegelstrich, Level 2
2. nummeriert, Level 1

Für jeden Absatz (teilweise auch Bilder und den Inhalt von Tabellenzellen) kann man die Textausrichtung regeln. Absätze können linksbündig, zentriert oder rechtsbündig ausgerichtet werden. Hier jew. ein Beispiel:

linksbündig:
(Atto: Button Nr. 25, Tiny: Button Nr. 21)  Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

zentriert:
(Atto: Nr. 26, Tiny: Nr. 22) Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

rechtsbündig:
(Atto: 27, Tiny: 23)
Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Eine spezielle Funktion ist der Blocksatz, den Sie im Menü "Gestaltungsvorlagen" (s.o., Atto: 3, Tiny: 13) finden:
Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Außerdem können Absätze ein- und ausgerückt (Atto: 28 & 29, Tiny: 27 & 28) werden:

Atto, Button Nr. 12

Bildauswahl:
Hier kann eine URL eingegeben werden. Die Verwendung einer Adresse auf anderen Internetseiten ist allerdings nicht empfohlen!

Besser ist es, über den Button "Datei auswählen" mit dem bekannten "File Picker" eine bereits vorhandene Datei auszuwählen oder eine neue hochzuladen.

Bildbeschreibung:
Die Bildbeschreibung ist derjenige Text, der von Screenreadern ausgegeben wird. Wie man "gute" Bildbeschreibungen erstellt, können Sie u.a. auf barrierefreiheit.dh.nrw nachlesen.

Der Haken bei "Bild nur zur Dekoration" mach aus der normalerweise verpflichtenden Beschreibung ein optionales Feld.

Bildgröße:
Genutzte Bilder können hiermit auf eine neue Größe skaliert werden. Der Haken bei "Proportional" ist empfohlen, um das ursprüngliche Seitenverhältnis beizubehalten.

Bildausrichtung:
Die Ausrichtung unterscheidet

• vertikale Ausrichtungen (oben, mittig und unten): Die Einstellung einer vertikalen Ausrichtung ist bei Bildern innerhalb von Texten nur selten sinnvoll anwendbar. Lediglich, wenn sich ein Bild in einem größeren HTML-Elternelement befindet, das die Möglichkeit bietet, das Bild in der Höhe zu platzieren, hat das vertical-align eine Wirkung;
  und
• horizontale Ausrichtungen (links und rechts): Hiermit wird das Bild an den linken bzw. rechten Rand geschoben. Damit geht automatisch ein Textumfluss einher. S. dazu auch "Textumfluss beenden" im Abschnitt "Gestaltungsvorlagen" oben.

Tiny, Button Nr. 9, auch: Menü "Einfügen" 34

Bildauswahl:
Hier kann eine Bilddatei per "Drag and drop", via Klick und Auswahl über den Datei-Explorer/Finder oder über eine URL eingegeben werden. Die Verwendung einer Adresse auf anderen Internetseiten ist allerdings nicht empfohlen!

Mit dem Button "Repositories durchsuchen" wird er bekannte "File Picker" angezeigt, mit dessen Hilfe eine bereits vorhandene Datei ausgewählt oder neu hochgeladen.

Erst danach können in einem weiteren Schritt weitere Bilddetails bearbeitet werden:

Bildbeschreibung:
Die Bildbeschreibung ist derjenige Text, der von Screenreadern ausgegeben wird. Wie man "gute" Bildbeschreibungen erstellt, können Sie u.a. auf barrierefreiheit.dh.nrw nachlesen.

Der Haken bei "Bild nur zur Dekoration" macht aus der normalerweise verpflichtenden Beschreibung ein optionales Feld.

Bildgröße:
Genutzte Bilder können hiermit entweder in Originalgröße oder auf eine neue Größe skaliert werden. Der Haken bei "Proportional" (nur sichtbar, wenn "Angepasste Größe" ausgewählt ist) ist empfohlen, um das ursprüngliche Seitenverhältnis beizubehalten.

Bildausrichtung:
Die Bildausrichtung kann ausschließlich nach dem Einfügen über die Ausrichtungsbuttons (21 bis 23, außerdem 46 im Bild-Kontextmenü) eingestellt werden.

Damit wird das Bild an den linken bzw. rechten Rand geschoben oder zentriert. Damit geht automatisch ein Textumfluss einher. S. dazu auch "Textumfluss beenden" im Abschnitt "Gestaltungsvorlagen" oben.

Die Funktion "Skizze" 8 öffnet einen vollumfänglichen Grafikeditor. Er unterstützt Bildebenen und wartet mit erstaunlich vielen Funktionen auf. Die links angeordnete Werkzeugleiste und die Detaileinstellungen in mehreren Fenstern am rechten Rand erinnern stark an gängige Tools wie Adobe Photoshop, Affinity Studio , Gimp oder Photopea.

Es können geometrische Formen, Bild- und Textebenen eingefügt, konfiguriert und arrangiert werden, und zum Ende mit dem Button "Insert Sketch" als gerendertes und gerastertes PNG in das Textfeld eingefügt werden.

Über die Funktion "Audio/Videodatei einfügen oder bearbeiten" (Atto: 13, Tiny: 10) können Mediendateien in den Kurs eingebettet werden. Im Gegensatz zu einem Download oder einem Link werden die Medien hier direkt mit einem Medien-Player in die Webseite eingebaut:

Beispielvideo (ohne Ton):

Beispielaudio:

Einstellungen:

Reiter "Link":

Wenn das Video unter einer Web-Adresse verfügbar ist (z.B. https://moodle.thga.de/pluginfile.php/248839/mod_resource/content/1/03_KI-BildUndAudio.mp4), können hier 

• URL und
• Name

eingegeben werden. Links zu YouTube und anderen Videoplattformen funktionieren aus Datenschutzgründen normalerweise nicht.

Reiter "Video":

• Datei/URL: Hier kann sowohl eine Adresse angegeben als auch über "Datei auswählen" auf den File Picker (Upload, Sciebo, etc.) zugegriffen werden.
• Alternative Mediendateien: Eine etwas veraltete Funktion, da früher^TM nicht alle Geräte alle Formate abspielen konnten. Mit z.B. dem Container mp4 (Video: h.264, Audio: AAC) ist das aber eigentlich ein gelöstes Problem.
• Darstellung: Hier können Titel (wird nur im Code hinterlegt, nicht auf der Seite angezeigt), Größe (hier reicht ein Wert - z.B. 1000px Breite - das Seitenverhältnis wird beibehalten) und Vorschaubild (wird angezeigt, bevor das Video gestartet wurde) angegeben werden.
• Erweiterte Einstellungen: Hier kann man einstellen, ob Steuerungsbuttons angezeigt werden sollen (empfohlen), ob das Video automatisch abgespielt werden soll (nicht empfohlen), ob das Video initial ohne Ton (empfohlen bei Autoplay) geladen werden und ob es im unendlichen Loop abgespielt werden soll.
• Untertitel / Bildunterschriften: Hier können über die verschiedenen Reiter Untertitel-Dateien und Kapitelmarken jew. für mehrere Sprachen (jew. im WebVTT-Format *.vtt) hinterlegt werden.
  Bildunterschriften, Beschreibungen und Metadaten kenne ich selber nicht ;-)

Reiter "Audio":

• Datei/URL: Hier kann sowohl eine Adresse angegeben als auch über "Datei auswählen" auf den File Picker (Upload, Sciebo, etc.) zugegriffen werden.
• Alternative Mediendateien: Veraltete Funktion, da früher^TM nicht alle Geräte alle Formate abspielen konnten. Mit z.B. dem mp3- oder m4a-Format ist das aber eigentlich ein gelöstes Problem.
• Darstellung: Hier kann ein Titel angegeben werden (wird nur im Code hinterlegt, nicht auf der Seite angezeigt).
• Erweitert: Hier kann man einstellen, ob Steuerungsbuttons angezeigt werden sollen (empfohlen), ob die Audiodatei automatisch abgespielt werden soll (nicht empfohlen), ob der Player initial ohne Ton (bei Audio nicht empfohlen) geladen werden und ob es im unendlichen Loop abgespielt werden soll.
• Untertitel / Bildunterschriften: Hier können über die verschiedenen Reiter Untertitel-Dateien und Kapitelmarken jew. für mehrere Sprachen (jew. im WebVTT-Format *.vtt) hinterlegt werden. Bei Audiodateien wird dann der 16.9-Videoplayer angezeigt, um Platz für die Texte zu haben.
  Bildunterschriften, Beschreibungen und Metadaten kenne ich selber nicht ;-)

Über die WebRTC-Technologie, eine Sammlung von Online-Kommunikationsstandards, können mittels "RecordRTC" Video- und Audioaufnahmen direkt im Browser, hier: im Texteditor, erstellt werden. Damit können die Signale von Kameras und Mikrofonen direkt in Video- bzw. Audiodateien gespeichert und in das entsprechende Textfeld eingefügt werden. Unterstützt werden z.B. Webcams und die Kameras von Smartphones und Tablets genauso wie fest verbaute oder an das Endgerät angeschlossene Mikrofone.

Diese Technik funktioniert in allen gängigen Betriebssystem-Browser-Kombinationen, s. https://caniuse.com/?search=webrtc.

Ggf. sind lokale Zugriffsberechtigungen notwendig (s. Screenshot). Hierbei fragt der Browser nach, ob die Signale von Kamera und/oder Mikrofon verwendet werden dürfen.

Diese Abfrage dient dem Datenschutz und ihrer Sicherheit, damit nicht private Szenen oder Gespräche für ein breiteres Publikum ungewollt öffentlich werden 😉

Für eine Aufnahme ist diese Berechtigung notwendig. Wenn nicht "Einstellung für Kameras/Mikrofone merken" (kann in unterschiedlichen Browsern anders heißen) markiert wird, ist diese Erlaubnis nur temporär und muss regelmäßig bei Nutzung von Kamera- oder Mikrofonsignalen erneuert werden.

Im Atto findet man die Funktionen hinter den Buttons 15 und 16, im Tiny hinter den Buttons 11 und 12.

H5P-Inhalte können in das Textfeld im Atto mit dem Button Nr. 17, im Tiny mit dem Button Nr. 15 eingebettet werden. H5P ist ein Werkzeug zur Erstellung interaktiver Inhalte, dazu gehören z.B. Drag-and-Drop-Anwendungen, interaktive Videos oder Kreuzworträtsel. Eine Übersicht zu den verschiedenen Inhaltstypen findet man hier.

Jedes Mal, wenn eine Datei im Textfeld verwendet wird - also z.B. ein Bild oder Video, eine Audiodatei o.ä. eingefügt oder ein Dokument verlinkt wird - wird diese Datei mit dem Textfeld verknüpft. Wenn nun diese Dateien, eingebetteten Medien oder Verlinkungen im Rahmen der Bearbeitung wieder entfernt werden, kommt es häufig dazu, dass die Verknüpfung zwischen Textfeld und Datei weiterhin bestehen bleibt.

Im Atto kann über den Button 14, im Tiny über das Menü Werkzeuge 36, Eintrag "Medien verwalten", eine Liste aller mit dem Text verknüpften Dateien angezeigt werden. Im Abschnitt "Unbenutzte Dateien" finden sie alle verknüpften, aber ungenutzten Dateien, die markiert und gelöscht werden können.

Fehlende Dateien, die zwar im Quelltext verlinkt, aber nicht mit dem Textfeld verknüpft sind, werden hier ebenfalls angezeigt.

Während einer Bearbeitung eines Textes können die meisten der Aktionen wieder rückgängig und rückgängig gemachte Aktionen wieder hergestellt werden. Wer dazu nicht die Tastenkombination [Strg] + [z] und für das Wiederherstellen [Strg] + [y] bzw. [Strg] + [Shift] + [z] im Muskelgedächtnis abgelegt hat, kann im Atto die Buttons 30 und 31 und im Tiny die Buttons 1 und  2 sowie die Einträge im Menü "Bearbeiten" (32) nutzen.

Eventuell ist es Ihnen bereits aufgefallen: Word ist ggf. "schwierig", um Texte vorzuschreiben oder daraus zu kopieren, um sie in Moodle einzufügen. Denn im Hintergrund bastelt Word halbwegs web-fähigen (aber leider nicht standardkonformen) HTML-Code zusammen, der beim Einfügen in einen Moodle-Editor mit übertragen wird. Das kann zu "unerwünschten Effekten" führen.

Für diesen Fall gibt es im Atto den Word-Import (Button Nr. 11), über den man ganze Word-Dateien importieren kann. Allerdings werden komplex formatierte Dokumente (z.B. mit Kopf- und Fußzeile, mit viel Textumfluss, mit zusammengesetzen und bearbeiteten Grafiken, mit umfangreichen Tabellenformatierungen, o.ä.) nie 100%ig übernommen.

In solchen Fällen ist ein "Einfügen ohne Formatierung" ([Strg] + [Shift] + [v] o.ä., je nach Betriebssystem und ggf. installierter Software) und Nachformatieren mit den Werkzeugen des Editors die aufwändigere, aber sauberere Möglichkeit. Im Tiny findet man eine Option "Als Text einfügen" (= ohne Formatierung einfügen) im Menü "Bearbeiten" (32).

Was ist Barrierefreiheit ("A11y")?

A11y kommt vom englischen accessibility (wobei die 11 Buchstaben jenseits des ersten und letzten als Zahl geschrieben werden) und beschreibt die Berrierearmut oder -freiheit, hier: von Online-Inhalten.

Barrierefreiheit bedeutet, Inhalte so zu entwickeln, dass sie für alle Personen zugänglich sind, unabhängig von deren physischen und kognitiven Fähigkeiten und der Art und Weise, wie sie auf das Web zugreifen.Barrierefreiheit in den MDN Web Docs

Barrierefreiheit für Webseiten umfasst u.a.

1. Semantisches HTML,
2. Optionen zur Tastaturnavigation,
3. Skalierbarkeit (sowohl auf verschiedenen Anzeigegeräten als auch optionale Vergrößerung der Schrift)
4. Unterstützung für Screenreader

Die Punkte 1, 2 und 3 bieten der Moodle-Code bzw. Betriebssystem oder Browser von Hause aus an: Moodle lässt sich komplett mit der Tastatur (meist: Tab, Pfeiltasten, Space & Enter) steuern, wird auf verschiedenen Endgeräten jew. optimiert angezeigt und die Textgröße kann über eine Betriebssystemeinstellung oder via [Strg] + [+]/[-] eingestellt werden. Screenreader werden ebenfalls unterstützt. Auf die Punkte

5. ausreichende (Farb-) Kontraste, 
6. Alternativtexte für grafische Inhalte,
7. Struktur und Verständlichkeit und
8. Benennung von Hyperlinks

haben die Ersteller:innen von Inhalten allerdings einen gewissen Einfluss:

Barrierefreiheit und Screenreaderkompatibilität testen

Die Überprüfung der Barrierefreiheit (Atto: 32, Tiny: Menü "Werkzeuge" 36, Eintrag "Tester zur Barrierefreiheit") überprüft z.B. Bilder auf Alt-Texte, das Kontrastverhältnis von Schrift- und Hintergrundfarbe und das Vorhandensein von Überschriften ab einer gewissen Textlänge.

Die Hilfe für Screenreader (nur Atto: 33) zeigt die genutzten HTML-Elemente, um die auf semantische Verständlichkeit für Screenreader zu überprüfen, eine Liste aller Links und verlinkender Texte und eine Liste aller Bilder incl. der angegebenen Alt-Texte.

Um mehrsprachige Texte zu hinterlegen, steht im Atto mit Button Nr. 34, im Tiny mit Button Nr. 7 und im Menü "Format" 35, Eintrag "Sprache") eine Funktion zur Hinterlegung mehrerer Sprachen zur Verfügung.

Dazu gibt es eine eigene Anleitung unter https://moodle.thga.de/multilang.

Formeln

Im Atto (Button Nr. 35) und im Tiny (Button Nr. 31) kann der Gleichungseditor genutzt werden: Der Gleichungseditor versucht, eine grafische Oberfläche zur Verfügung zu stellen, über die man mathematische Formeln eingeben kann.

Über die Reiter "Operatoren", "Pfeile", "Griechische Symbole" und "Erweitert" stehen gängige Symbole und Formelteile zur Verfügung, die mittels Mausklicks zu komplexen Grafiken kombiniert werden können.

Darunter sieht man den TeX-Code und eine Vorschau der gerenderten Gleichung bzw. Formel. Über den Button "Gleichung speichern" wird der TeX-Code in den Editor eingefügt.

Sonderzeichen

Das Sonderzeichen-Menü (Atto: 36, Tiny: Menü "Einfügen" 34, Eintrag "Sonderzeichen") zeigt gängige Sonderzeichen, z.B. Währungssymbole oder das Copyright-Zeichen, die man über die Tastatur nicht (oder nur schwer) eingeben kann.

Durch einen Klick auf das gewünschte Zeichen wird dieses sofort (an der aktuellen Position des Cursors) in das Textfeld eingefügt.

Horizontale Linie

Um zwei Abschnitte oder Inhalte visuell voneinander abzutrennen, kann eine horizontale Linie eingefügt werden. Die sieht so aus:

Im Atto findet man die Funktion hinter dem Button Nr. 37, im Tiny im Menü "Einfügen" 34, Eintrag "Horizontale Linie".

Emojis

Während Emoticons - also die mehr oder weniger erkennbaren Smileys aus gängigen Zeichen, z.B. :-) - über die Tastatur eingegeben werden und in Moodle-Kursen ggf. über den Filter "Emoticon als Bild zeigen" (s. Filter-Anleitung), sind Emojis "echte" Unicode-Zeichen, die von einem entsprechenden Konsortium festgelegt werden.

Alle, die in den letzten 10 Jahren eine beliebige Messenger-App auf einem Smartphone genutzt haben, kennen sie normalerweise. Diese Zeichen können über die Emoji-Auswahl (Atto: 38, Tiny: Menü "Einfügen" 34, Eintrag "Emojis") in den Text eingefügt werden.

Mit dem entsprechenden Button 39 können Tabellen in den Editor eingefügt werden. Die Möglichkeiten im Atto-Editor sind einigermaßen beschränkt: Man kann eine Tabellenbeschriftung angeben, die Anzahl von Zeilen und Spalten und deren Kopfzeilen festlegen. Hier ein Beispiel mit Beschriftung, 5 Zeilen und drei Spalten:

In dem entsprechenden Konfigurationsdialog kann man unter Titel die Tabellenbeschriftung eingeben, die Position des Titels auf "oben" oder "unten" einstellen und festlegen, welche Art von Überschriften (Spaltenüberschriften, Zeilenüberschriften oder beides) man generieren möchte.

Außerdem kann man die Anzahl der Zeilen und die Anzahl der Spalten festlegen.

In dem unteren Abschnitt "Aussehen" kann man das Design der Tabelle rudimentär beeinflussen. Der "Designstandard" meint

• Inhaltszellen mit weißem Hintergrund, dunkler Schriftfarbe und hellgrauem Rahmen und 
• Überschriftenzellen mit blauem Hintergrund, weißer Fettschrift und hellblauem Rahmen.

Abweichend vom Designstandard - nicht empfohlen - kann man entweder für die gesamte Tabelle oder für die einzelnen Zellen Rahmenart (Linie "solid", gepunktet "dotted", gestrichelt "dashed"), Rahmendicke (in Pixeln), Rahmenfarbe und Hintergrundfarbe einstellen. Das funktioniert im Atto-Editor allerdings wenig verlässlich.

Eine gewünschte Tabellenbreite kann in Prozent, bezogen auf die Breite des Textfelds, abhängig vom Anzeigegerät, eingestellt werden. Auch das ist eher nicht empfohlen, da die ansonsten automatisch festgelegte Breite von Tabellen und Tabellenspalten zumindest für kleine Anzeigegeräte deutlich besser geeignet ist.

Nach dem initialen Anlegen einer Tabelle ist die Bearbeitung dieser Eigenschaften noch möglich, allerdings ist das manchmal etwas hakelig und man sollte dazu ein paar Dinge beachten:

Sofern sich der Cursor in einer Tabellenzelle befindet, kann man durch erneuten Klick auf den "Tabelle einfügen"-Button 39 ein Kontextmenü aufrufen. Damit können

• Spalten bzw. Zeilen vor oder nach der aktuelle Cursorposition eingefügt,
• die aktuelle Spalte bzw. Zeile verschoben und
• das Menü "Tabelle bearbeiten" (s.o.) erneut aufgerufen werden.

Die erwähnten erweiterten Tabellenoptionen im Tiny haben einen eigenen Menüpunkt "Tabelle", Nr. 37. Darin findet man - strukturiert nach "Tabelle", "Zelle", "Zeile" und "Spalte" diverse Einstellungen:

Tabelle

Hinter dem Eintrag "Tabelle" verbirgt sich ein Raster, mit dem man - wie ggf. aus Textverarbeitungsprogrammen wie Microsoft Word" - ein Tabellenraster mit der gewünschten Spalten- und Zeilenanzahl erzeugen kann. Das Raster wird als leere Tabelle direkt an der Position des Cursors in das Textfeld eingefügt.

Zelle

Der Eintrag "Zelle" beinhaltet

• die Zelleneinstellungen (für diejenige Zelle, in der sich der Cursor befindet) mit Optionen u.a. zu
  • Breite
  • Zellentyp (Zelle oder Kopfzelle) und
  • Ausrichtung (horizontal und vertikal), außerdem
  • unter "Erweitert" je Zelle zusätzliche Einstellungen für Rahmendicke, -stil, -farbe und Hintergrundfarbe der Zelle,
• die Möglichkeit, mehrere Zellen zu verbinden (Voraussetzung: Mehrere Zellen sind markiert) und
• die Möglichkeit, verbundene Zellen wieder zu teilen (Voraussetzung: Cursor befindet sich in einer verbundenen Zelle).

Zeile

Der Eintrag "Zeile" beinhaltet

• Optionen zum Einfügen neuer Zeilen (davor oder danach bezieht sich auf die Position des Cursors),
• Optionen zum Löschen, Ausschneiden oder Kopieren der entspr. Zeile,
• wenn eine Zeile kopiert wurde, die Möglichkeit, diese kopierte Zeile vor oder nach der aktuellen Cursorposition einzufügen, sowie
• die Zeileneigenschaften mit Einstellungen zu Typ, Ausrichtung, Rahmen und Hintergrundfarbe.

Spalte

Der Eintrag "Spalte" beinhaltet

• Optionen zum Einfügen neuer Spalten (davor [=links] oder danach [=rechts] bezieht sich auf die Position des Cursors),
• Optionen zum Löschen, Ausschneiden oder Kopieren der entspr. Spalte, sowie,
• wenn eine Spalte kopiert wurde, die Möglichkeit, diese kopierte Spalte vor oder nach der aktuellen Cursorposition einzufügen.

Tabelleneigenschaften

Der Eintrag "Tabelleneigenschaften" setzt die Existenz einer Tabelle und die entsprechende Cursorposition voraus, beinhaltet dann

• Optionen zu Gesamtbreite der Tabelle,
• Einstellungen für den Zellenabstand innen und außen,
• Rahmenoptionen,
• Einstellungen zur Ausrichtung der gesamten Tabelle, außerdem
• unter "Erweitert" wiederum die Einstellungen zu Rahmen und Farben sowie eine Option, eine Tabellenbeschriftung hinzuzufügen.

Außerdem hat Tiny ein tabellen-spezifisches Kontext-Menü, mit dem viele der Menüfunktionen schneller im Zugriff sind:

Formatierung löschen

Der Editor Atto verfügt dazu über einen Button (Nr. 40), damit wird die Formatierungen des markieren Editorinhalts gelöscht. Im Tiny steht dazu der Menüeintrag "Formatierung entfernen" im Menü "Format" (Nr. 35) zur Verfügung.

Das funktioniert vor allem für Fett-, Kursivschrift, Unter- und Durchstreichungen, Text- und Hintergrundfarbe. Außerdem ist diese Funktion nützlich für Text, den Sie aus anderen Quellen in den Editor kopiert haben und der noch „Spuren von Formatierungen“ (Schriftgröße o.ä.) enthält.

Bei komplexeren Formaten, z.B. den Gestaltungsvorlagen 3 oder Templates 4, funktioniert das nicht immer verlässlich. Dazu ein Tipp:

Quellcode anzeigen

Im Atto kann mit dem Button </> (41) der WYSIWYG-Editor (What You See Is What You Get) auf eine Code-Ansicht umgeschaltet werden, womit der erzeugte HTML-Code (HyperText Markup Language) sichtbar und bearbeitbar wird.

Im Tiny geht das mittels des Eintrags "< > Quellcode" im Menü "Ansicht" (Nr. 33).

Den Zusammenhang von WYSIWYG und HTML erläutere ich in einem kleinen Exkurs:

<h3>&Uuml;berschrift</h3>
<p>Dies ist der Text, mache Worte sind <strong>speziell formatiert</strong>.</p>

<ul>
   <li>Listenpunkt 1</li>
   <li>Listenpunkt 2</li>
   <li>Listenpunkt 3</li>
</ul>

Mit gewissen Grundkenntnissen in HTML kann man in der Code-Ansicht die Inhalte des Textfeldes bearbeiten, dazu folgt weiter unten in diesem Kurs ein eigener Abschnitt.

Vollbild

Der Vollbildmodus erweitert das Eingabefenster auf die Browser- (auf Desktops und Laptops) oder Bildschirmgröße (Tablets, Smartphones). Damit ist Textarbeit deutlich komfortabler, einfach weil mehr Platz zur Verfügung steht. 😉

Dafür steht im Atto der Button Nr. 42, im Tiny der Button Nr. 20, außerdem der Menüeintrag "Vollbild" im Menü "Ansicht" (33) zur Verfügung.