inf-schule | Ein Kapitel/einen Abschnitt erstellen

Arbeitsblätter

Mit dem Modul "PDF-Editor" können Arbeitsblätter auf Basis von HTML erstellt und auf einer inf-schule-Seite zum Download angeboten werden. Die Erstellung der PDF-Datei geschieht hierbei lokal auf Seite des Clients.

Das Modul einbinden

Um Editor oder die Herunterladen-Funktion nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Beispielquelltext für die Einbindung des Moduls über das Meta-Tag features

Das Modul verwenden

Die Verwendung des Generators wird über einen HTML-Tag gesteuert, hier ein Beispiel:

<div class='pdfeditor' 
data-config='{
    "filenameHTML":"../wissensspeicher/codierung.html", 
    "showEditor" : false, 
    "buttonText" : "Codierungstabelle herunterladen", 
    "relativeContentPath" : "../wissensspeicher/"
}'></div>

Konfigurationsmöglichkeiten

Innerhalb des Attributs data-config können einige Spezifikationen vorgenommen werden, wobei die Reiehnfolge beliebig ist:

filenameHTML - Übergabe einer Datei

Hier kann eine Datei übergeben werden, aus der der Code des Materials geladen wird.

filenameCSS - Übergabe eines Styles

Hier kann eine Datei übergeben werden, aus der ein CSS-Stil mit eingeschränkten Möglichkeiten geladen wird.

showEditor - Verwendung als Editor oder Herunterladen-Funktion

Wird true übergeben, wird der vollständige Editor angezeigt. Sollte nur zum Entwickeln des Materials verwendet werden und im Anschluss vorm Commit auf false gesetzt werden
Wird false übergeben wird nur ein Button angezeigt, bei dessen Anklicken das Material heruntergeladen wird.

showEditor - Text des Herunterladen-Buttons

relativeContentPath - Ort verwendeter Dateien

Alle Dateien innerhalb des Materials werden relativ zu diesem Pfad gesucht.
.. bedeutet hierbei, eine Hierarchiestufe aufwärts zu gehen.

wissensspeicherInfo - Informationstext über Wissensspeicher einblenden

Wird true übergeben, wird eine aufklappbare Box unter dem Downloadbutton erzeugt, in dem das Konzept der Wissensspeicher erläutert wird.

Normales HTML

Ein Element mit der Klasse seitenumbruch erzeugt einen Seitenumbruch vor dem auf der Seite sichtbaren Element. Dies geht entsprechend nicht mit leeren oder nicht auf der Seite gedruckten Elementen!

Die hinterlegte CSS-Datei enthält den Code "span{color: red;}"

Es gibt einen Satz an vordefinierten Stilanpassungen, die durch inline-CSS oder die Angabe einer CSS-Datei angepasst werden können.

Das hier verwendete CSS ist nur in begrenzten Umfang verfügbar. Möglich sind nur Basisselektoren der Form "{tag} {...}". Klassen, IDs oder geschachtelte Selektoren sind nicht möglich.

Mögliche CSS-Tags

font-family
font-size
font-weight
font-style
text-align
letter-spacing
color
margin
margin-top
margin-left
margin-bottom
margin-right
padding
padding-top
padding-left
padding-bottom
padding-right
background-color
fit
text-decoration

Eigene Tags

infsheader - Standardisierte Kopfzeile

Erzeugt einen QR-Code, das inf-schule-Logo, den Kapitelnamen, das Datum und eine Überschrift.
Bei Angabe des Attributs uuid werden die Informationen des entsprechenden Kapitels geladen.
Bei Angabe des Attributs title kann die Überschrift manuel festgelegt werden
Bei Angabe des Attributs chapter kann der Kapitel-Text manuel festgelegt werden
Bei Angabe des Attributs number kann die Kapitel-Nummer manuel festgelegt werden
Bei Angabe des Attributs qrlink kann der Link des QR-Codes manuel festgelegt werden

infsfooter - Standardisierte Fußzeile

Erzeugt eine Fußzeile mit dem inf-schule Logo

dateiname - Festlegung des Dateinamens beim Herunterladen

page - Festlegung der Seiten des PDFs

Optional - Als Standard ist "A4" und "portrait" festgelegt.
Bei Angabe des Attributs size kann die Seitengröße festgelegt werden. Möglich sind:
- '4A0', '2A0', 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10',
- 'B0', 'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B9', 'B10',
- 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10',
- 'RA0', 'RA1', 'RA2', 'RA3', 'RA4',
- 'SRA0', 'SRA1', 'SRA2', 'SRA3', 'SRA4',
- 'EXECUTIVE', 'FOLIO', 'LEGAL', 'LETTER', 'TABLOID'
Bei Angabe des Attributs orientation kann die Seitenausrichtung festgelegt werden. Möglich sind:
- portrait
- landscape

seitenzahlen - Anzeige von Seitenzahlen

Beim Inhalt an werden die Seitenzahlen immer angezeigt
Beim Inhalt aus werden nie Seitenzahlen angezeigt
Beim Weglassen oder bei sonstigem Inhalt werden bei mehr als einer Seite die Seitenzahlen angezeigt.

box - Standardisierte Textbox

Mit dem Attribut title wird die Überschrift festgelegt
Mit dem Attirbut backgroundColor wird die Hintergrundfarbe festgelegt. Möglich sind CSS-Standardwerte oder Angaben der Art rgb(255,255,255).
Der Inhalt des Tags wird als Inhalt der Box festgelegt

information - Infobox

Mit dem Attribut backgroundColor wird die Hintergrundfarbe festgelegt. Möglich sind CSS-Standardwerte oder Angaben der Art rgb(255,255,255).
Der Inhalt des Tags wird als Inhalt der Box festgelegt

karo - Schreibkästchen

Der Inhalt wird als Zeilen in cm;Spalten in cm angegeben
Ein Kästchen ist dabei 0,5cm x 0,5cm groß.
Es werden an jeder Seite ein halbes Kästchen als Übergang generiert.

schreiblinie - Schreiblinien

Der Inhalt wird als Text auf der Schreiblinie generiert
Mit dem Attribut length wird die Länge der Schreiblinie festgelegt.

qr - QR-Code

Erzeugt einen QR-Code mit dem Inhalt des Tags.

Vollständiges Beispiel

HTML-Code:


<infsheader uuid="GpEywYxzIs9jkBQN" title="Das World Wide Web" chapter="Informationsdarstellung im WWW" number = "1.1.1"></infsheader>
<dateiname>Das_World_Wide_Web</dateiname>
<table width="100%">
    <tr>
	   <th colspan = '2'>Websites und Bücher</th>
    </tr>
    <tr>
	   <td colspan = '2' class='text'> 
            Erkläre die Begriffe Website, Webseite, Hypertext und Hyperlink.
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
Vergleiche Websites und Bücher: Welche Gemeinsamkeiten und Unterschiede gibt es?
        </td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class='smallHeader'>Websites</td>
        <td class='smallHeader'>Bücher</td>
    </tr>
<tr>
<td height="200px"></td>
<td ></td>
</tr>
</table>
<box title="World Wide Web">
            Erkläre die Begriffe World Wide Web, Browser und URL
            <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
           <schreiblinie></schreiblinie>
</box>

Einbindung:

<div class='pdfeditor' data-config='{"filenameHTML":"beispiele/www.html", "showEditor" : false, "buttonText" : "Wissensspeicher herunterladen", "relativeContentPath" : "beispiele/"}'></div>

Erzeugt: