Hilfe:Artikel/Beispiele

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Beispiel-Code
Mit der Vorlage:Beispiel gibt es die Möglichkeit, Beispiel-Code anklickbar zu gestalten, so dass der Leser für das gezeigte Beispiel sehen kann, wie es in (s)einem Browser aussieht. Dafür haben anklickbare Beispiele im Kopf einen „So sieht's aus“-Link.


Beispiele einfügen[Bearbeiten]

Als angemeldeter Anwender kann man zwar Beispiele in Seiten einfügen, der Code für anklickbare Beispiele muss jedoch in den Namensraum Beispiel eingefügt werden. Um in diesem Namensraum schreiben zu können wird die Berechtigung Beispiele bearbeiten (editexample) benötigt, für die ein Benutzer Mitglied der Gruppe Beispiele-Administratoren sein muss.

Die für die Anklickbarkeit vorgesehenen Beispiele kann ein angemeldeter Anwender mit einem zeige=dummy kennzeichnen. Die weiteren Schritte führt dann einer der Beispiele-Administratoren aus.

{{Beispiel|zeige=dummy|
{{BeispielCode|...}}
}}

Beispiele-Administratoren[Bearbeiten]

Die Aufgabe eines Beispiel-Administrators ist, den Beispiel-Code auf eine Seite im Namensraum Beispiel zu übertragen. Da der auf einer Artikelseite angezeigte Code mit Formatierungen versehen oder der Einfachheit wegen gekürzt sein kann, obliegt es ihm, die Rohfassung des Codes zu extrahieren und ihn gegebenenfalls für die Anzeige im Browser geeignet umzuschreiben. Das kann beispielsweise enthalten, Elemente zu ergänzen, die für eine Validität des Beispiels notwendig sind.

Beispiel-Code Admin
Für jedes Beispiel ist (mindestens) eine Seite im Namensraum Beispiel anzulegen. Das ist im Grunde eine Wiki-Seite wie die anderen auch. Der Seitenname muss lediglich mit „Beispiel:“ anfangen und mit .html, .css, .js, .xsl oder .xml enden – je nach Inhalt. Aufgrund dieser Endung wird vom Anzeigescript der dazugehörige Content-Type ausgegeben. Damit stehen auch die für Beispiele verfügbaren Sprachen fest. Für die weitere Benennung der Seite an sich gibt es keine Vorgabe. Um sicherzustellen, dass kein bereits vorhandener Name verwendet wird, kann man die Liste aller Seiten im Beispiel-Namensraum zu Rate ziehen (zu erreichen über „Spezialseiten“ → „Alle Seiten (mit Präfix)“).

Der Seitenname ist im Parameter zeige= der Vorlage:Beispiel einzutragen. Daraufhin sehen die Anwender einen „So sieht's aus“-Link im Kopf des Beispielkastens. Der Beispiel-Administrator sieht zusätzlich auch noch einen Link namens „Code“, der zu der Seite führt, auf der der Code bearbeitet werden kann.


Hinweise zum Gestalten von Beispielen[Bearbeiten]

Syntax-Highlighting[Bearbeiten]

Obwohl es die Möglichkeit zur Syntaxhervorhebung mittels <source lang="…">…</source> gibt, sollte solch eine Auszeichnung mit Bedacht gewählt werden. Fortgeschrittene Anwender, die grundlegend mit der Syntax der verwendeten Sprache vertraut sind, finden eine farbliche Auszeichnung des Codes in der Regel recht nützlich, um sich mit dem vorliegenden Code vertraut zu machen. Eine Auszeichnung der für Fortgeschrittene vorgesehenen Code-Beispiele mit <source lang="…">…</source> ist also eine sinnvolle Angelegenheit.

Gestaltung ohne Syntax-Highlighting[Bearbeiten]

Für einen Anfänger wirkt eine farbliche Gestaltung möglicherweise eher verwirrend als helfend, besonders wenn einige Syntax-Elemente auffallend gefärbt sind, die jedoch für ein Verständnis des besprochenen Themas nicht weiter bedeutend sind. Die stattdessen wichtigen Elemente sind dagegen weniger hervorgehoben und damit schlechter auffindbar. Eine automatische Einfärbung kann üblicherweise kaum ein für den Anfänger nützliches Ergebnis bringen.

Sinnvoller wäre es, auf den vorwiegend für Anfänger vorgesehenen Seiten auf die automatische Färbung zu verzichten und nur die jeweils wichtigen Syntax-Elemente angemessen hervorzuheben (zum Beispiel durch Fettdruck oder sparsame Verwendung von Farbe). Dazu kann man zunächst die Vorlage BeispielCode mit der <nowiki></nowiki>-Auszeichnung wählen.

{{Beispiel|
{{BeispielCode|<nowiki>...</nowiki>}}
}}

Für die hervorzuhebenden Stellen muss der <nowiki>-Bereich vorübergehend verlassen werden, um die wiki-üblichen Formatierungselemente verwenden zu können.

{{Beispiel|
{{BeispielCode|
<nowiki>etwas Text oder Code, </nowiki>'''wichtiges Element'''<nowiki>, weiterer Text</nowiki>}}
}}

Um diese Formatierungsarbeit für den Bearbeiter zu erleichtern, gibt es unter dem Editierfenster einige auswählbare Elemente. Die für Beispiele sinnvollen Elemente sind durch Umstellen der Select-Box auf Beispiel erreichbar. (Für diese Funktionalität muss JavaScript im Browser aktiviert sein.)

Verwendungs des Beispiel-Layouts[Bearbeiten]

Die meisten Beispiele haben das Beispiel-Layout eingebunden. Während es im Frickl-Modus nicht geladen wird, öffnet sich bei einem Rechtsklick eine neue Seite im Beispiel-Layout. Durch den immer gleichen Aufbau und Farbgebung wird ein Wiedererkennungswert erzielt und Benutzer können sich in der gewohnten Umgebung zurecht finden:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Beispiel: Titel</title>
</head>
<body>
  <h1>Beispiel: Überschrift</h1>
  <main>
  </main>
</body>
</html>

Frickl[Bearbeiten]

Das Frickl ist ein Parser, der den Code einer Beispielseite in HTML, CSS und JavaScript auftrennt, diesen in einem Editor zur Bearbeitung zur Verfügung stellt und dann das Live-Ergebnis anzeigt. So können Sie herumprobieren, Werte verändern und Code einfügen und gleich testen. Im Erfolgsfall können Sie den so aktualisierten Code kopieren und in ihrem Editor speichern.

Das Selfhtml-Beispiel-Grundlayout und externe Skripte werden dabei nicht geladen.

JavaScript im Frickl[Bearbeiten]

JavaScript sollte in Frickl-Beispielen im head-Element eingebunden sein. Der Inhalt eines script-Elements im body wird zwar ausgelesen und auch im Editor angezeigt, beim Ausführen aber wieder durch den im HTML-Markup vorhandenen Original-Code überschrieben, sodass vorgenommene Änderungen nicht wirksam werden.

Die Einbindung im head-Element kann durch eine anonyme Funktion erfolgen

<script>
  'use strict';
  document.addEventListener("DOMContentLoaded", function () {

  });
</script>
Beachten Sie: Da das Frickl alle im body befindlichen HTML-Elemente, aber nicht das body-Element selbst ausliest und parst, werden dynamisch an das body-Elemente gehängte Eventhandler im Frickl nicht erkannt. Eine mögliche Lösung wäre es, Eventhandler an das main-Element zu binden.

Für JavaScript-Beispiele sollten folgende Grundsätze selbstverständlich sein.