Wiki-Quellcode von Metabereich
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{content/}} | ||
| 2 | |||
| 3 | {{figure image="designer_advanced_variables_example.png"}} | ||
| 4 | Im Metabereich können zusätzliche Elemente in den {{smallcaps}}Html{{/smallcaps}} head des generierten Formulars eingefügt werden. | ||
| 5 | {{/figure}} | ||
| 6 | |||
| 7 | == Erläuterung == | ||
| 8 | |||
| 9 | Im Metabereich können zusätzliche Elemente in den //head// des erzeugten {{smallcaps}}Html{{/smallcaps}}-Dokuments eingefügt werden. Dies kann etwa dazu genutzt werden, um: | ||
| 10 | |||
| 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 {{smallcaps}}Html{{/smallcaps}}-Meta-Tags bereit zu stellen, wie etwa dem Autor des Formulars oder eine Beschreibung | ||
| 14 | * HTTP-Header über Meta-Tags zu setzen | ||
| 15 | |||
| 16 | Der eingegebene Text im Metabereich muss gültiges {{smallcaps}}Html{{/smallcaps}} darstellen und im //head//-{{smallcaps}}Html{{/smallcaps}}-Element erlaubt sein. | ||
| 17 | |||
| 18 | == Einbinden externer Schriftarten == | ||
| 19 | |||
| 20 | Wird durch einen externen Anbieter eine Schriftart zur Verfügung gestellt (hosted), kann diese wie folgt eingebunden werden: | ||
| 21 | |||
| 22 | {{code language="html"}} | ||
| 23 | <link type="text/css" rel="stylesheet" href="https://fonts.example.com/css?family=EB+Garamond"> | ||
| 24 | {{/code}} | ||
| 25 | |||
| 26 | == Meta-Tags für Suchmaschinenoptimierung == | ||
| 27 | |||
| 28 | Es können auch meta-Elemente eingefügt werden, etwa zu Zwecken der Suchmaschinenoptimierung. | ||
| 29 | |||
| 30 | {{code language="html"}} | ||
| 31 | <meta name="description" content="Mein tolles Formular"> | ||
| 32 | <meta name="keywords" content="HTML,CSS,XML,JavaScript"> | ||
| 33 | <meta name="author" content="Maria Mustermann"> | ||
| 34 | {{/code}} | ||
| 35 | |||
| 36 | == Meta-Tags für das Setzen von HTTP-Headern == | ||
| 37 | |||
| 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: | ||
| 39 | |||
| 40 | {{code language="html"}} | ||
| 41 | <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:"> | ||
| 42 | {{/code}} | ||
| 43 | |||
| 44 | Zu beachten ist hier, dass Header, welche durch die Anwendung oder den Web-Server ausgeliefert werden, hiermit nicht überschrieben werden können. |