| ... |
... |
@@ -1,22
+1,23 @@ |
| 1 |
1 |
{{content/}} |
| 2 |
2 |
|
| 3 |
|
-{{figure image="metatab1_en.png"}} |
| 4 |
|
-Im Metabereich können zusätzliche Elemente in den head eines HTML-Dokuments eingefügt werden. |
|
3 |
+{{figure image="designer_advanced_variables_example.png"}} |
|
4 |
+Im Meta-Tab können zusätzliche Elemente in den HTML head des generierten Formulars eingefügt werden. |
| 5 |
5 |
{{/figure}} |
| 6 |
6 |
|
| 7 |
|
-{{figure image="metatab2.png"}} |
| 8 |
|
-Die rot markierten Elemente wurde im Metabereich hinzugefügt. |
| 9 |
|
-{{/figure}} |
| 10 |
|
- |
| 11 |
11 |
== Erläuterung == |
| 12 |
12 |
|
| 13 |
|
-Im Metabereich können zusätzliche Elemente in den //head// des erzeugten HTML-Dokuments eingefügt werden. Dies kann etwa dazu genutzt werden, um zusätzliche externe JavaScript- oder CSS-Dateien einzubinden oder //meta//-Elemente einzubinden. |
|
9 |
+Im Metabereich können zusätzliche Elemente in den //head// des erzeugten HTML-Dokuments eingefügt werden. Dies kann etwa dazu genutzt werden, um: |
| 14 |
14 |
|
| 15 |
|
-Der eingegebene Text im Metabereich muss gültiges HTML darstellen und im //head//-Element erlaubt sein. |
|
11 |
+* Fonts von externen Anbietern oder Webressourcen einzubinden |
|
12 |
+* zusätzliche JavaScript- oder CSS-Dateien hinzuzufügen. Dies ist besonders nützlich, wenn JavaScript und CSS nicht direkt in {{formcycle/}} bearbeitet wird. Wenn beispielsweise TypeScript und SCSS mit externen Anwendungen bearbeitet wird, kann dann die Toolchain während der Entwicklung so eingestellt werden, dass bei Änderungen der Quelldateien automatisch transpiliert wird. Die so erzeugten Dateien können über einen lokal gestarteten Server dann eingebunden werden und sind so immer aktuell. |
|
13 |
+* weitere Informationen in Form von HTML-Meta-Tags bereit zu stellen, wie etwa dem Autor des Formulars oder eine Beschreibung |
|
14 |
+* HTTP-Header über Meta-Tags zu setzen |
| 16 |
16 |
|
|
16 |
+Der eingegebene Text im Metabereich muss gültiges HTML darstellen und im //head//-HTML-Element erlaubt sein. |
|
17 |
+ |
| 17 |
17 |
== Einbinden externer Schriftarten == |
| 18 |
18 |
|
| 19 |
|
-Wie folgt kann eine durch durch einen externen Anbieter bereitgestellte Schriftart eingefügt werden. |
|
20 |
+Wird durch einen externen Anbieter eine Schriftart zur Verfügung gestellt (hosted), kann diese wie folgt eingebunden werden: |
| 20 |
20 |
|
| 21 |
21 |
{{code language="html"}} |
| 22 |
22 |
<link type="text/css" rel="stylesheet" href="https://fonts.example.com/css?family=EB+Garamond"> |
| ... |
... |
@@ -34,10
+34,10 @@ |
| 34 |
34 |
|
| 35 |
35 |
== Meta-Tags für das Setzen von HTTP-Headern == |
| 36 |
36 |
|
| 37 |
|
-Über Meta-Tags mit dem Attribut "http-equiv" und einem entsprechenden Wert ist es ebenso möglich nicht vorhandene HTTP-Header zu setzten. Dies sieht beispielsweise für den Header "Content-Security-Policy" wie folgt aus: |
|
38 |
+Über Meta-Tags mit dem Attribut //http-equiv// und einem entsprechenden Wert ist es ebenso möglich, nicht vorhandene HTTP-Header zu setzen. Dies sieht beispielsweise für den Header //Content-Security-Policy// wie folgt aus: |
| 38 |
38 |
|
| 39 |
39 |
{{code language="html"}} |
| 40 |
40 |
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:"> |
| 41 |
41 |
{{/code}} |
| 42 |
42 |
|
| 43 |
|
-Zu beachten ist hier, dass Header welche durch die Anwendung oder den (Web-)Server ausgeliefert werden hiermit nicht überschrieben werden können! |
|
44 |
+Zu beachten ist hier, dass Header, welche durch die Anwendung oder den Web-Server ausgeliefert werden, hiermit nicht überschrieben werden können. |