Quelltext der Seite Projekt:Tipps und Tricks

Auf dieser Seite sollen einige Tipps und Tricks gesammelt werden, um die Arbeit am Wiki und die Erstellung einheitlich aussehender Artikel einfacher zu machen.

Zunächst ein paar Grundbegriffe.
;Vorlage:Eine [[Hilfe:Vorlagen|Vorlage]] ist ein Baustein, der in eine Seite eingefügt werden kann und die mit Parametern spezifiziert werden kann. Vorlagen werden mit doppelten geschweiften Klammern eingefügt.
;Tag:Ein Tag entspricht der [[HTML]]-Notation in spitzen Klammern und stellt zusätzliche Funktionalitäten bereit, etwa um Quellcode hervorzuheben oder Diagramme mit Tools wie Mermaid oder PlantUML einzufügen

== Links mit Icons ==

Folgende Vorlagen erzeugen Links mit nebenstehenden Icons:
* [[Vorlage:Inf-Schule]] erzeugt {{Inf-Schule}}
** <code><nowiki>{{Inf-Schule|1.2.3.4|Experimente mit dem Hex-Editor}}</nowiki></code> → {{Inf-Schule|1.2.3.4|Experimente mit dem Hex-Editor}}
* [[Vorlage:W3Schools]] erzeugt {{W3Schools}}
** <code><nowiki>{{W3Schools|TAGS/ref_colornames.asp|HTML-Farbnamen}}</nowiki></code> → {{W3Schools|TAGS/ref_colornames.asp|HTML-Farbnamen}}
* [[Vorlage:OInf]] erzeugt {{OInf}}
** <code><nowiki>{{OInf|kurs/programmieren/methoden/|Methoden}}</nowiki></code> → {{OInf|kurs/programmieren/methoden/|Methoden}}
* [[Vorlage:VisuAlgo]] erzeugt {{VisuAlgo}}
** <code><nowiki>{{VisuAlgo|en/convexhull|Konvexe Hüllen}}</nowiki></code> → {{VisuAlgo|en/convexhull|Konvexe Hüllen}}
* [[Vorlage:Hermeneus]] erzeugt {{Hermeneus}}
** <code><nowiki>{{Hermeneus|ad/jfdlp|Graculus superbus et pavo}}</nowiki></code> → {{Hermeneus|ad/jfdlp|Graculus superbus et pavo}}

Zur Erstellung von neuen Vorlagen für Links mit Icon kann die [[Vorlage:Link mit Icon]] genutzt werden. Diese Vorlage soll nur genutzt werden, um neue Vorlagen zu erzeugen, nicht um direkt in Inhaltsseiten eingesetzt zu werden.

== Flaggen ==

Flaggen wie {{Flagge|DE}} können mit der [[Vorlage:Flagge]] erzeugt werden und sollten hinter jeden Weblink gesetzt werden, um anzuzeigen, in welchen Sprachen diese Website zur Verfügung steht. Als Parameter muss der Vorlage die zweibuchstabige Länder-Abkürzung übergeben werden: <code>DE</code> für Deutschland, <code>FR</code> für Frankreich usw. Diese Codes können auch kombiniert werden, um mehrere Flaggen nacheinander anzuzeigen.
* <code><nowiki>{{Flagge|DE}}</nowiki></code> → {{Flagge|DE}}
* <code><nowiki>{{Flagge|FR}}</nowiki></code> → {{Flagge|FR}}
* <code><nowiki>{{Flagge|DEATCH}}</nowiki></code> → {{Flagge|DEATCH}}

== Tastenkombinationen ==

Für die Darstellung von Tastenkombinationen gibt es die [[Vorlage:Tastatur]]. Die Tasten, die gedrückt werden, müssen als Parameter angegeben werden.
* <code><nowiki>{{Tastatur|StrgAltEntf}}</nowiki></code> → {{Tastatur|StrgAltEntf}}
* <code><nowiki>{{Tastatur|ShiftWinS}}</nowiki></code> → {{Tastatur|ShiftWinS}}
*<code><nowiki>{{Tastatur|HALLO}</nowiki></code> → {{Tastatur|HALLO}}
Grundsätzlich sollten die Buchstabentasten als Großbuchstaben dargestellt werden. Um Verwirrungen zwischen großem i und kleinem L auszuschließen, darf das I auch als Kleinbuchstabe {{Tastatur|i}} dargestellt werden.

==Quelltext==

Längere Abschnitte von Programmcode sollten mit dem Tag <code><nowiki><syntaxhighlight lang="</nowiki>''SPRACHE''<nowiki>">...</syntaxhighlight></nowiki></code> eingefügt werden. Im visuellen Editor geht das noch einfacher mit dem Menüpunkt ''Einfügen → Codeblock''.  

Wenn man eine Sprache angibt, werden die Schlüsselwörter und Syntaxelemente dieser Sprache farbig hervorgehoben. Wenn nichts hervorgehoben werden soll, muss <code>text</code> als Sprache angegeben werden. Eine Liste der erlaubten Sprachen findet sich [https://pygments.org/languages/ hier]. 

Zeilennummern können mit dem Attribut <code>line</code> hinzugefügt werden: <code><nowiki><syntaxhighlight lang="SPRACHE" line>...</syntaxhighlight></nowiki></code>.

Mit dem Attrobut <code>start</code> kann zusätzlich festgelegt werden, mit welcher Zeilennummer begonnen werden soll zu zählen: <code><nowiki><syntaxhighlight lang="SPRACHE" line start="STARTZEILENNUMMER">...</syntaxhighlight></nowiki></code>. 

{|
|+ Beispiele
| <pre><nowiki><syntaxhighlight lang="html">
<ol type="I">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
</ol>
</syntaxhighlight></nowiki></pre>
| <syntaxhighlight lang="html">
<ol type="I">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
</ol>
</syntaxhighlight>
|-
| <pre><nowiki><syntaxhighlight lang="lua" line="1">
function quadrat(x)
    return x * x
end
</syntaxhighlight></nowiki></pre>
| <syntaxhighlight lang="lua" line="1">
function quadrat(x)
    return x * x
end
</syntaxhighlight>
|-
| <pre><nowiki><syntaxhighlight lang="python" line start="42">
def swap(A, i, j):
    A[j],A[i] = A[i],A[j]
</syntaxhighlight></nowiki></pre>
| <syntaxhighlight lang="python" line start="42">
def swap(A, i, j):
    A[j],A[i] = A[i],A[j]
</syntaxhighlight>
|}
Für einzelne Schnipsel in einer Programmiersprache, die in den Fließtext eingebettet werden soll, kann das Attribut <code>inline</code> gesetzt werden: <code><nowiki><syntaxhighlight lang="SPRACHE" inline>...</syntaxhighlight></nowiki></code>. Um sich Tippaufwand zu ersparen und den Wikitext lesbarer zu halten, gibt es für die häufig in diesem Wiki verwendeten Sprachen Extra-Vorlagen: 

* [[Vorlage:Java]]
* [[Vorlage:Python]]
* [[Vorlage:JavaScript]]
* [[Vorlage:CSS]]
* [[Vorlage:HTML]]
* [[Vorlage:XML]]

Diesen Vorlagen muss nur der Programmcode mitgegeben werden: <code><nowiki>{{CSS|border: 2px solid black;}}</nowiki></code> → {{CSS|border: 2px solid black;}}

== Bunte Boxen ==

Um besonders wichtige Informationen hervorzuheben, gibt es einige Vorlagen, die farbige Boxen mit einem Icon in der Titelleiste erzeugen:
{{Info|[[Vorlage:Info]]}}
{{Hinweis|[[Vorlage:Hinweis]]}}
{{Tipp|[[Vorlage:Tipp]]}}
{{Achtung|[[Vorlage:Achtung]]}}
{{Beispiel|[[Vorlage:Beispiel]]}}
All diesen Vorlagen muss der anzuzeigende Text als Parameter mitgegeben werden.

Mit der [[Vorlage:Hugo-Notiz]] können noch weitere derartige Vorlagen erzeugt werden, für die dann nur noch Titel, Farben und Icon angegeben werden müssen.

== Begriffsklärungen ==

Mitunter kann ein Seitentitel mehrdeutig sein, siehe etwa [[is]]. Es gibt mehrere Möglichkeiten, wie damit umzugehen ist.
# Es gibt eine Extra-Seite, die nur erklärt, dass es mehrere Artikel dieses Namens gibt, und auf sie verlinkt. Beispiel: [[Objekt]] ist nur für die Verlinkung auf [[Objekt (Grammatik)]] und [[Objekt (Informatik)]] da.<br/>Auf dieser Seite sollte dann unten die [[Vorlage:Begriffsklärung]] eingefügt werden. Diese benötigt keine Parameter.
# Es gibt eine Seite, deren Name auch in einem anderen Kontext spannend sein könnte. Beispiel: [[Redis]].<br/>Auf dieser Seite sollte die [[Vorlage:Dieser Artikel]] eingefügt werden, wobei ein Parameter angegeben werden muss, der erklärt, was dieser Artikel enthält und wo man den anderen interessanten Artikel findet.<br/>'''Beispiel:''' <code><nowiki>{{Dieser Artikel|beschreibt die Schlangenart ''Python''. [[Python (Programmiersprache)|]] ist aber auch der Name einer [[Programmiersprache]].}}</nowiki></code>

== Scratch ==

Um [[Scratch]]-Blöcke in Artikel einzufügen, gibt es die Tags {{HTML|<scratch<nowiki/>blocks>...</scratchblocks>}} und {{HTML|<s<nowiki/>b>...</sb>}}.

{{HTML|<scratch<nowiki/>blocks>...</scratchblocks>}} dient dazu, (größere) Sequenzen von Scratch-Blöcken als separaten Absatz einzufügen.

{{Beispiel|1=
{{{!}}
 {{!}} <syntaxhighlight lang="html"><scratchblocks>
 Wenn die grüne Flagge angeklickt 
 gehe [10]er Schritt
 sage [Hallo!]
 wiederhole [3] Mal
 wechsle zum nächsten Kostüm
 ende
 </scratchblocks></syntaxhighlight>
 {{!}} →
 {{!}}<scratchblocks>
 Wenn die grüne Flagge angeklickt 
 gehe [10]er Schritt
 sage [Hallo!]
 wiederhole [3] Mal
 wechsle zum nächsten Kostüm
 ende
 </scratchblocks>
 {{!}}}
 }}

Demgegenüber kann der Tag {{HTML|<s<nowiki/>b>}} genutzt werden, um '''einzelne''' Scratch-Blöcke in einen Fließtext einzubinden, etwa um zu erklären, dass der Block <sb>setze Drehtyp auf [left-right v]</sb> genutzt werden kann, um eine Figur nach links und rechts schauen zu lassen. Das obige Beispiel wurde mit dem Code {{HTML|<s<nowiki/>b>setze Drehtyp auf [left-right v]</sb>}} eingefügt.

=== Zur Syntax von ScratchBlocks ===

{| class="wikitable"
! Block-Kategorie
! Schreibweise
! colspan="2" | Beispiel
|-
! [[Anweisung|Stapelblock]]
| Einfach den Text hinschreiben
 | <syntaxhighlight lang="html"><scratchblocks>
 verstecke dich
 pralle vom Rand ab
 stoppe alle Klänge
 lösche diesen Klon
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 verstecke dich
 pralle vom Rand ab
 stoppe alle Klänge
 lösche diesen Klon
 </scratchblocks>
|-
! Lücken für freien Text
| Text in eckigen Klammern

<code>[...]</code>
 | <syntaxhighlight lang="html"><scratchblocks>
 sage [Hallo!]
 gehe [10] er Schritt
 warte [5] Sekunden
 frage [Wie heißt du?] und warte
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 sage [Hallo!]
 gehe [10] er Schritt
 warte [5] Sekunden
 frage [Wie heißt du?] und warte
 </scratchblocks>
|-
! [[Ausdruck|runde Blöcke]]
| Text in runden Klammern

<code>(...)</code>
 | <syntaxhighlight lang="html"><scratchblocks>
 (Richtung)
 (Lautstärke)
 sage (Name)
 ((Alter) + [2])
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 (Richtung)
 (Lautstärke)
 sage (Name)
 ((Alter) + [2])
 </scratchblocks>
|-
! Auswahllisten
| Text in eckigen oder runden Klammern,<br/>gefolgt von einem <code>v</code>

<code>[... v]</code><br/><code>(... v)</code>
 | <syntaxhighlight lang="html"><scratchblocks>
 wenn Taste [Leertaste v] gedrückt wird
 sende (Hallo v) an alle
 wechsle zu Kostüm (Cowboy v)
 setze [Alter v] auf [42]
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 wenn Taste [Leertaste v] gedrückt wird
 sende (Hallo v) an alle
 wechsle zu Kostüm (Cowboy v)
 setze [Alter v] auf [42]
 </scratchblocks>
 |-
 ! [[Wahrheitswert|sechseckige Blöcke]]
 | Text in spitzen Klammern

<code><...></code>
 | <syntaxhighlight lang="html"><scratchblocks>
 <Maustaste gedrückt?>
 <wird [Katze v] berührt?>
 <(Alter) > [42]>
 <(Name) enthält [y]?>
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 <Maustaste gedrückt?>
 <wird [Katze v] berührt?>
 <(Alter) > [42]>
 <(Name) enthält [y]?>
 </scratchblocks>
 |-
 ! [[Kontrollstruktur]]en (C-Blöcke)
 | mit dem Wort <code>ende</code> beenden
 | <syntaxhighlight lang="html"><scratchblocks>
 falls <Maustaste gedrückt?>, dann
 sage [Huch!]
 sonst
 sage [Klick mich!]
 ende
  wiederhole [3] Mal
 sage [Huch!]
 ende
  wiederhole bis <Maustaste gedrückt?>
 sage [Klick mich!]
 ende
 </scratchblocks></syntaxhighlight>
 |<scratchblocks>
 falls <Maustaste gedrückt?>, dann
 sage [Huch!]
 sonst
 sage [Klick mich!]
 ende
  wiederhole [3] Mal
 sage [Huch!]
 ende
  wiederhole bis <Maustaste gedrückt?>
 sage [Klick mich!]
 ende
 </scratchblocks>
 |-
 |}

Mehr zur Syntax der Scratch-Blöcke gibt es hier zum Nachlesen:
* [https://de.scratch-wiki.info/wiki/Scratch-Wiki:Hilfe:Block_Plugin Hilfe-Artikel im Scratch-Wiki]
* [https://github.com/scratchblocks/scratchblocks/blob/main/tests/all-blocks-de.txt Liste aller Scratch-Blocks-Bezeichnungen]