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"):
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: