Do-it-Yourself: 9 HTML-Tags für Ihre erste Designvorlage

Mit Designvorlagen einheitliche Lerneinheiten erstellen

Designvorlagen Beitragsbild

Ein Sprichwort besagt „Viele Köche verderben den Brei“. Beim Erstellen einer neuen Lerneinheit kann es ähnlich zugehen, denn wenn mehrere Autoren gemeinsam an einer Schulung arbeiten, entstehen oft viele unterschiedliche Designs. Seien es unterschiedliche Schriften, Formatierungen oder Farben oder einfach die Art der Darstellung (z.B. Stichworte oder geschriebener Text) – und dieses Hin- und Her im Design kann Verwirrung beim Lernenden stiften. Die Idee: Designvorlagen. Sie schaffen nicht nur ein einheitliches Design für Ihre Lerninhalte, sie verkürzen auch die Produktionszeit für künftige Schulungen und geben allen Autoren eine enorme Hilfestellung.

Warum Sie Designvorlagen verwenden sollten

Stellen Sie sich vor, Sie wären der Lernende und würden in ein und derselben Schulung z.B. immer wieder andere Schriftarten und -größen finden. Bei dem einen Lehrmittel ist die Navigation rechts, beim Wissenstest plötzlich links. Das sorgt für unnötige Störungen und führt womöglich sogar dazu, dass sich Ihr Lerner mehr mit der Optik beschäftigt als mit den Inhalten selbst. Jetzt mag man sagen „Es gibt ja wohl Schlimmeres“ – Aber: Auch das Auge lernt mit. Optisch ansprechende Lerninhalte erzeugen eine positive Grundeinstellung zum Lernen und da Lernen auch Spaß machen soll, spielt auch hier das Aussehen eine wichtige Rolle. Mit einer optischen und inhaltlichen Struktur sowie einer einfachen, einheitlichen Bedienbarkeit erhöhen Sie das Lernerlebnis ungemein. Außerdem ist nicht zu vernachlässigen, dass Lerninhalte, die dem Unternehmens-CI entsprechen, für eine höhere Identifikation mit dem Inhalt und dem Unternehmen sorgen.

Erst das Konzept, dann die Umsetzung

Natürlich können Sie direkt loslegen und eine nach der anderen Designvorlage produzieren – es empfiehlt sich aber, sich vorher einige grundlegende Gedanken zu machen. Mit welchen Fragestellungen Sie sich auseinandersetzen sollten, das haben wir einmal grob für Sie zusammengefasst:

Bedarfsermittlung

An welchen Stellen im Lernprozess werden Designvorlagen benötigt (z.B. Kurshauptseite oder Wissenstestfragen)?

Konzept

Wie sollen die Designvorlagen konkret aussehen und was sollen sie funktional können (Stichwort: Inhalt, Design und Technik)?

Corporate Design

Welche Designvorgaben, Guidelines gibt es vom Unternehmen (z.B. Farben, Formen, Bildwelten oder Schriftarten)?

Inhalte

Welche Inhalte sollen dargestellt werden (z.B. Übersicht über die Kursinhalte)? Überlegen Sie, ob Sie eher eine spezifische Designvorlage für nur einen Kurs erstellen oder aber eine allgemeingültige Variante erstellen möchten. Der Inhalt bestimmt dabei die Art der Vorlage.

Scribbles

Scribbels helfen, erste Ideen und Entwürfe optisch festzuhalten. Oft fallen dann noch Unstimmigkeiten auf oder es ergeben sich neue Fragen, so dass das Layout überarbeitet werden muss.

Bearbeitungsbereiche definieren

Eine Designvorlage in Avendoo® besteht grundsätzlich aus zwei Bereichen: Editierbare Bereiche und Nicht-Editierbare Bereiche. Legen Sie fest, ob alle Elemente der Vorlage bearbeitet werden dürfen oder aber, ob Autoren z.B. nur die Überschrift ändern können.

Technik

Wo werden die Designvorlagen am Ende beim Lerner zum Einsatz kommen? Wird nur am Desktop-PC gelernt oder auch auf mobilen Endgeräten wie Tablet und Smartphone (Stichwort: responsive Design)?

Screendesign

Fassen Sie alle bisherigen Überlegungen zusammen und bringen Sie sie „auf‘s Papier“. Anschließend können noch finale Anpassungen vorgenommen werden.

Umsetzung

Erst ganz zum Schluss startet die konkrete Umsetzung der Designvorlage – in Avendoo® oder in einem anderen Autorentool.

Einsteiger-html-tags für Designvorlagen in Avendoo®

Um Ihnen bei dem Erstellen Ihrer ersten Designvorlage etwas unter die Arme zu greifen, haben wir hier neun Einsteiger HTML-Tags für Sie, mit denen Sie starten können. Natürlich gibt es noch viele weitere und vor allem interaktivere Möglichkeiten für Designvorlagen, jedoch sind dafür auch entsprechende HTML und CSS-Kenntnisse notwendig.

HTML CSS Beschreibung
<h1>Überschrift</h1> h1 {
font-size:30px;
color: #222222;
font-family: Arial;
}
Erzeugt eine Hauptüberschrift. Eine grundlegende Definition für „h1, h2, p etc.“ kommt aus Avendoo®, sie kann bei Bedarf aber auch im CSS individuell definiert werden.
<p class=”mittigerText”>Lorem ipsum dolor sit amet.

 

 

.mittigerText {
text-align: left/center/right;
}
Schrift links/ mittig/ rechts ausrichten. Mit jedem p-Tag beginnt ein neuer Paragraph (Zeilenumbruch)
<span class=”FliessenderText”>Lorem ipsum dolor sit amet. .FliessenderText {
color:red;
}
Ein span-Tag kann ebenfalls zur Formatierung von Texten genutzt werden. Im Gegensatz zu einem p-Tag beginnt bei einem span-Tag allerdings keine neue Zeile, sondern der Text fließt in einer Zeile weiter.
<b>Fetter Text</b>
<i>Kursiver Text</i>
Schriftformatierung „fett“
Schriftformatierung kursiv
<div contenteditable=“true“ >Lorem ipsum dolor sit amet. Bestimmt einen Bereich, in dem der Autor im Assistent Änderungen vornehmen kann. Der Bereich endet, wenn sich das Tag, in dem sich das contenteditable befindet, schließt.
<img class=“MeinLogo“ src=“media/1435277998055,1/ de/image/file/content“ /> .MeinLogo {
width:120px;
height:40px;
margin: 10px 20px;
}
Die Source (src) des Bildes muss individuell angepasst werden. Dafür muss die jeweilige Id eingesetzt werden (Lerninhalte → Medien → Rechtsklick „Informationen“).
<img class=“ResponsiveImage“ src=“media/1435277998055,1/ de/image/file/content“ /> .ResponsiveImage {
width:100%;
max-width:800px;
}
Bei einer prozentualen Breitenangabe, passt sich das Bild der Größe des umliegenden divs an. Dieses kann je nach Größe des Screens variieren.
<ul class=”UnorderedList”>
<li>Aufzählungspunkt eins</li>
<li>Aufzählungspunkt zwei</li>
<ul>
In einer UnorderedList (ul) enthält jedes ListItem (li) einen Punkt als Aufzählungszeichen. In einer OrderedList (ol) werden die ListItems durchnummeriert.
<a class=“DownloadLink“ href=“media/1235577997052,1/ en/document/file/content“>Name des Links .DownloadLink {
color: blue;
text-decoration: underline;
}
Mithilfe eines a-Tags können verschiedene Dinge verlinkt werden. In diesem Fall ein Dokument aus dem Mediencenter. Es können aber auch Links zu Webseiten hergestellt werden.

Gerade für Einsteiger (aber auch für Fortgeschrittene) ist es oft eine enorme Hilfe, sich an dem zu bedienen, was Avendoo bereits vorgibt bzw. mitbringt. So können Sie beispielsweise ein neues Lehrmittel mit einer leeren Seite erstellen und hier alle Einstellungen mittels Editor vornehmen, die Sie für die eigene Designvorlage benötigen. Lassen Sie sich dann den Quellcode anzeigen, haben Sie bereits ein Grundgerüst, das Sie in die eigene Designvorlage kopieren können. Dort muss dann nur noch der „Feinschliff“ vorgenommen werden: Abstände anpassen, contenteditables setzen etc.

Folgendes Beispiel wurde mit dem Editor im Lehrmittel-Assistenten „zusammengeklickt“, wodurch einfach und bequem folgendes HTML-Grundgerüst erzeugt wurde:

<h1>&Uuml;berschrift eingeben...</h1>
<h2>Unter&uuml;berschrift eingeben...</h2>
<hr>
<p>Inhalt des Lehrmittels eingeben&hellip; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy irmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.</p>
&nbsp;
<ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
    <li>Vestibulum laoreet porttitor sem</li>
    <li>Ac tristique libero volutpat at</li>
</ul>

 

Ein Blog-Beitrag von Andreas Herting und Jennifer Jordan