Code-Regeln (CSS, Scripts)

Grundregeln

Diese Regeln betreffen CSS, Javascript, HTML, PHP und alle anderen Scripts und externe Code-Referenzen. Mit "Code" ist hier alles außer Wikidot-Syntax gemeint.

Verbote

• Die Verwendung von Cookies ist verboten.
• Schadcode ebenfalls.
• Es darf keine Datenerfassung irgendeiner Art stattfinden.
• Es darf kein Code ausgeführt werden, der nicht ausdrücklich der Präsentation des Artikels dient.
• Es dürfen keine Navigationselemente oder das Bewertungsmodul verborgen oder unkenntlich gemacht werden.
• Es dürfen keine stark blinkenden, sich bewegenden oder sonstige für Epileptiker gefährlichen Elemente verwendet werden.

Funktionalität

• Generell muss jeder Code, der das Gesamtbild verändert, in-universe begründbar sein. Dies gilt insbesondere für Themes.
  • Artikelelemente anders zu gestalten ist erlaubt und wird als Stilmittel betrachtet.
• Die Seite muss so weit wie möglich barrierefrei sein, sprich für Personen mit Sehschwäche oder Farbenblindheit nicht unzuträglich und für Screenreader nicht unnötig schwer zu handhaben sein.
• Code, der der ohne das explizite Zutun des Users (z. B. das Klicken eines "Play"-Buttons) Ton oder Video abspielt, bedarf unserer Genehmigung.
• Code, der Jumpscares einbaut, bedarf unserer Genehmigung.
• Code muss mit den gängigen modernen Browsern kompatibel sein.
  • Die Seite darf durch fehlende Unterstützung des Codes nicht unlesbar werden.
  • Gegebenenfalls ist die Ausführung durch eine Kompatibilitätsprüfung auf moderne Browser zu beschränken.
• Code hat auf Desktop- wie auch Mobilgeräten gut zu funktionieren oder auf eines beschränkt zu sein.
• Code, der Elemente außerhalb des <div id="page-content"> beeinflusst (also insbesondere Themes), bedarf unserer Freigabe.

Quellcode

• Code, dessen Quellcode nicht jederzeit vom User eingesehen werden kann (zum Beispiel über die Entwickleroberfläche des Browsers), muss uns vorgelegt und von uns freigegeben werden.
• Minifizierter Code und Code in hochgeladenen Dateien ist erlaubt.
  • Es wird empfohlen, eine kommentierte, nicht minifizierte Version in dem dazugehörigen Artikel vorzustellen.
  • Minifizierter Code in hochgeladen Dateien muss einen Kommentar mit mindestens Urheber und Lizenz enthalten.
• Verschlüsselter Code ist jedoch verboten.
• Externe Quellen sind zu vermeiden und Daten nach Möglichkeit in dem Artikel hochzuladen.
  • Quellen auf anderen mit der SCP Foundation assoziierten Wikidot-Seiten sind statthaft, um Redundanz zu vermeiden.
  • Werden externe Quellen verwendet, sind diese zu nennen und es ist eine Datenschutzerklärung abzugeben. Für Google Fonts ist diese bereits in der des Wikis enthalten.
  • Externe Quellen müssen eine Lizenz aufweisen, die eine Verwendung hier erlaubt.
• Code sollte auf eine schnelle Ausführung optimiert sein. Redundanz ist zu vermeiden.
• Code ist ausführlich auf Bugfreiheit zu testen. Bugs sind schnellstmöglich nach Bekanntwerden zu beheben.
• Es sollte ein Versionslogbuch geführt werden.
• Der Artikel darf nicht unlesbar werden, wenn der User einen Scriptblocker verwendet.

Integration

• Code darf sowohl in den Artikel eingebettet als auch in einem inkludierbaren Artikel veröffentlicht werden.
  • Code, der auch auf andere Artikel anwendbar ist, sollte in einen separaten Artikel gespeichert werden.
  • Themes sind stets als separater Artikel zu veröffentlichen.
• Artikel, auf die ein Theme angewandt wurde, sind mit _theme zu taggen.
• Inkludierbare Artikel, in denen der Code separat veröffentlicht wird, sind in der Kategorie component: zu speichern.
  • Themes sind mit theme zu taggen, Scripts mit script; außerdem beide mit component. Beides darf im selben Artikel gespeichert werden.
• Code, insbesondere Themes, sind über die [[include]]-Methode bereitzustellen, nicht über @import (alte Themes werden mit der Zeit auf diese Methode upgedatet).

Lizenzierung

• Jeder Quellcode, der hier im Wiki gepostet oder hochgeladen wird, muss unter CC BY-SA 3.0 oder einer kompatiblen Lizenz veröffentlicht werden.
• Eingebetteter Code, der über einfache Snippets hinausgeht, hat einen Kommentar mit Nennung der Urheber zu enthalten.
• Externe Quellen müssen eine Lizenz aufweisen, die eine Verwendung hier erlaubt.
• Minifizierter Code in hochgeladen Dateien muss einen Kommentar mit mindestens Urheber und Lizenz enthalten.

Mit unserer ausdrücklichen Erlaubnis sind Ausnahmen von obigen Regeln möglich.

Themes

Freigabe

Wie alle anderen Artikel auch, sollten Themes in einer Sandbox erstellt werden. Wenn du findest, dass dein Theme bereit ist, kontaktiere Dr_Grom (vorzugsweise auf Discord), dieser prüft dann dein Theme und lädt es in einen Demonstrationsartikel, um es auf Fehlerfreiheit zu prüfen und zur allgemeinen Begutachtung zu stellen. Du kannst auch, wenn du noch nicht fertig bist, anfragen, dass dein Theme in den Demonstrationsartikel geladen wird, um damit zu arbeiten, allerdings ist der nicht immer frei.

Allgemein muss jeder Code, der einer Genehmigung bedarf, sowohl "in Action" betrachtet, sowie der Quellcode eingesehen werden.

Kompatibilität

Beachte, dass das SCP-DE-Wiki das Common-Theme verwendet und CSS-Variablen unterstützt, was es wesentlich einfacher macht, Themes zu erstellen. Das Common-Theme ist hier dokumentiert. Allerdings unterstützen ältere Browser keine Variablen. Damit dein Theme dort nicht falsch dargestellt wird, packe deinen gesamten Code in die Regel @supports (—foo: green) { … }. Damit wird dein Code nur dargestellt, wenn der Browser Variablen unterstützt, andernfalls wird das Standardtheme verwendet. Du kannst auch andere Auswahlkritertien verwenden, wenn du andere Dinge verwendest, die nicht von allen Browsern unterstützt werden. Du kannst das umgehen, indem du alle Regeln ausschreibst, wie in der Dokumentation des Common-Theme am Ende beschrieben.

Generell ist es stets sinnvoll, deinen CSS-Code auf Kompatibilität zu prüfen und gegebenenfalls kompatiblen Code zu verwenden (manche Browser untertstützen Funktionen vor der Einführung eine Weile nur testweise, wenn ein Präfix vorangestellt wird, wie -webkit)-. Das Common-Theme ist mit Autoprefixer geprüft.

Grundsätzlich darfst du Themes auf Basis des Black Highlighter Theme (ehemals "nuTheme") erstellen, allerdings kommt das nicht bei jedem gut an. Wenn du das BHL verwenden willst, nutze dieses Kompatibilitätsfix oder weise die Nutzer deines Themes an, es zu verwenden.

Aufgeblähter Code

Verwende keinen Code, den du nicht brauchst. Vermeide es insbesondere, einfach Code aus dem Common-Theme zu kopieren und dann nur eine Regel zu ändern. Früher wurde gern das ganze Theme kopiert und nur einige Änderungen vorgenommen. Das ist nicht nötig und nicht zugelassen.

Achte darauf, keinen unnötig redundanten Code zu verwenden oder Code, der keine Wirkung hat. Verwende !important nur, falls es nicht anders geht.

Um die Ladezeit noch um ein Stück zu optimieren, kannst du deinen Code minifizieren, also alle Kommentare, Zeilenumbrüche, Leerzeichen usw. löschen. Dafür gibt es auch massig Tools im Internet. Es wird empfohlen, minifizierten Code in eine Datei zu speichern und hochzuladen, das erspart es Wikidot, den Code bereitzustellen, wenn der User ihn abruft.

Barrierefreiheit

Themes müssen für möglichst viele Nutzer verwendbar sein:

• Für Farbenblinde sollten zum Beispiel rot-grün-Kombinationen und dergleichen vermieden werden.
• Es sollten keine unsichtbaren Elemente, die für sehende User nicht sichtbar sind, verwendet werden, da Screenreader diese unter Umständen trotzdem vorlesen.
• Schrift muss groß genug und gut lesbar sein. Außerdem muss der Kontrast zum Hintergrund ausreichend sein.

Es gibt diverse Browsererweiterungen, die die Barrierefreiheit prüfen. Wikidot ist, was das angeht, ohnehin ein Minenfeld, gerade für Screenreader, das sollte also nicht vernachlässigt werden.

Externe Referenzen und Hotlinking

Extzerne Referenzen sind alle Dateien und Code, die von außerhalb des Wikis importiert werden. Meist betrifft das Bilder und Schriftarten. Hotlinking ist, externe Referenzen (meist Bilder von einer externen Seite) einzubinden. Das erzeugt dort aber zusätzlichen Traffic, außerdem verzögert es das Laden der Seite ein wenig, weil dein Browser Daten von einem weiteren Server anfragen muss.

Allgemein soll das vermieden werden. Externe Referenzen haben auf Wikidot oder einer Seite, die ausdrücklich Hotlinking erlaubt, wie Bildhoster oder Content Delivery Networks, vorzuliegen. Das Laden von Referenzen von Seiten, die dafür nicht ausdrücklich gedacht sind, ist nicht erlaubt.

Dennoch ist es stets vorzuziehen, Daten nur von einem mit der SCP-Community assoziierten Wikidot-Wiki zu laden. Manchmal geht es nicht anders, weil PHP- oder Scriptvariablen in der URL übergeben werden müssen, um die richtige Datei zu laden, und diese nicht ohne funktioniert, das ist dann völlig in Ordnung, sofern nichts anderes dagegenspricht.

Schriftarten können von Google Fonts eingebunden werden, allerdings erlaubt hier in der Regel die Lizenz der Schriftart ein Hochladen auf anderen Seiten wie eben Wikidot. Wenn du dabei Hilfe brauchst, frag nur. Die Google-Verächter werden es dir danken.

Beachte, insbesondere was Bilder angeht, dass wir nicht unbegrenzt viel Speicherplatz zur Verfügung haben. Skaliere und komprimiere sie entsprechend den Notwendigkeiten, dann bedarf es keines Bilderhosters.

Theme-Artikel

Erstelle für dein Theme einen Artikel, wie im nächsten Tab beschrieben.

Code-Artikel

Wenn du deinen Code in einem Component zur Verfügung stellst (für Themes ist das vorgeschrieben), veröffentliche dort folgende Informationen:

• Beschreibung, wie der Code zu verwenden ist,
• mögliche Variablen, Auswahl- und Anpassungsmöglickeiten,
• Urheber und Lizenz,
  • externe Referenzen, deren Urheber und Lizenz,
• gegebenenfalls Datenschutzerklärung,
• den Code in nicht minifizierter, kommentierter Form.

Beachte die vorgeschriebenen Tags theme, script und component. Ohne funktioniert der folgende Code nicht richtig.

Verwende diese Vorlage (hier am Beispiel eines Themes):

[module CSS]]
@import url('http://scp-wiki-de.wdfiles.com/local--code/component:dein-theme/code/1');
[[/module]]

[[iftags +theme]]

[[>]]
[[module Rate]]
[[/>]]

Dies ist ein Beispiel von Jemandem.

Verwende folgenden Code, um das Theme in deinem Artikel anzuwenden:

[[div class="code"]]
@@[[include :scp-wiki-de:component:dein-theme]]@@
[[/div]]

Dieses Theme ist für die Verwendung mit GoI-X1234 gedacht.

[[code type="css"]]
/* Hierhin kommt dein CSS. */
[[/code]]

[[/iftags]]

Passe die Adressen entsprechend an. "scp-wiki-de" ist das Präfix des Wikis, "component:dein-theme" ist die Adresse deiner Seite und "1" ist die Nummer des Codeblocks, in dem sich dein Theme befindet.

Deshalb verwende "[[div class="code"]]" statt "[[code]]" für den Einfügelink; das ist nur ein simulierter Codeblock, wird aber von Wikidot nicht so behandelt.

Du kannst in der @import-Zeile einen Link zu einer minifizierten Datei verwenden. Auf deiner Seite soll stets der nicht-minifizierte, kommentierte Quellcode zu lesen sein.

Wenn dein Quellcode länger als eine Bildschirmseite ist, packe ihn in ein Collapsible.

Scripts können anderer Einfügemethoden bedürfen und dürfen dementsprechend anders in den Artikel eingebaut werden. Der Inhalt dieser Seite soll dennoch dem gleichen Schema folgen.