Seitentypen

Es gibt eine Anzahl von Seitentypen, die auf MDN wiederholt verwendet werden. Dieser Artikel beschreibt diese Seitentypen, ihren Zweck und gibt Beispiele für jeden sowie Vorlagen zur Erstellung einer neuen Seite.

Es gibt drei Hauptkategorien von Seitentypen auf MDN, obwohl einige Seitentypen in mehr als eine Kategorie fallen.

  • Referenzseiten beschreiben die Details von etwas und sind entsprechend der Struktur des beschriebenen Objekts organisiert.
  • Leitfaden-Seiten erklären, wie man etwas tut oder benutzt, und sind basierend auf den Zielen des Lesers organisiert.
  • Navigationsseiten existieren hauptsächlich, um Links zu anderen Seiten bereitzustellen, normalerweise zu verwandten Themen.

Erstellen einer neuen Seite

Um neue Seiten auf MDN zu erstellen, müssen Sie GitHub verwenden — sehen Sie sich unseren Abschnitt content repo über das Hinzufügen eines neuen Dokuments für weitere Anweisungen an.

Verwendung der Vorlagen

Wenn Sie eine neue Seite erstellen, können Sie sicherstellen, dass Sie die richtige Seitenstruktur/-inhalte verwendet haben, indem Sie auf eine unserer Seitenvorlagen zurückgreifen — siehe die Abschnitte unten. Sie können den genauen Quellcode jeder Vorlage finden (falls Sie ihn kopieren möchten), indem Sie dem "Source on GitHub"-Link am Ende jeder Vorlage folgen. Diese Seitenvorlagen machen als veröffentlichte Seiten wenig Sinn, aber wenn Sie ihren Quellcode anschauen, werden Sie sehen, dass sie viele hilfreiche Kommentare, Platzhalter und Hinweise enthalten, die detaillieren, wie man die fehlenden Informationen einfügt und Ihre Seite erstellt.

Am Anfang jeder Vorlage finden Sie einen Abschnitt mit dem Titel Remove before publishing — dieser enthält Informationen darüber, wie man den Seitentitel, Slug, das Seitenleistenmenü und Tags ausfüllt (z. B. Informationen, die nicht tatsächlich im Textkörper des Artikels erscheinen). Sie müssen diesen Abschnitt löschen, nachdem Sie die Anweisungen darin befolgt haben, bevor die Seite als fertig angesehen werden kann.

Alte Seitendesigns

Manchmal stoßen Sie auf alte Referenzseiten, die sich deutlich von den hier vorgestellten Vorlagen unterscheiden. Zum Beispiel hatten alte Schnittstellenseiten alle Mitgliederdetails einer Schnittstelle auf einer einzigen Seite, und einzelne Methoden-/Eigenschafts-/Konstruktor-/Ereignislistenerseiten existierten nicht.

Wenn Sie auf einen alten Satz von Seiten stoßen, würden wir uns freuen, wenn Sie sie auf das neue Stil aktualisieren! Wir wissen jedoch, dass dies eine große Menge Arbeit sein kann. Wenn die zu aktualisierende Information nicht zu umfangreich ist und Sie etwas Freizeit haben, versuchen Sie gerne, sie auf den neuen Stil zu aktualisieren.

Wenn die Arbeit umfangreicher ist, sollten Sie einige Faktoren bei der Priorisierung der Arbeit berücksichtigen:

  • Wie veraltet ist die Information?
  • Wie niedrig ist die Qualität der Information?
  • Wie populär ist das Feature? Wie gefragt ist die Information?

Wenn Sie ein Team zusammenstellen möchten, um an einem Update zu arbeiten, oder wenn Sie nur einige Inhalte melden oder besprechen möchten, die ein Update benötigen, zögern Sie nicht, ein Inhaltsproblem zu melden oder uns um Hilfe zu bitten.

Der Front-Matter-Schlüssel für den Seitentyp

Wir haben einen Front-Matter-Schlüssel page-type definiert, um den Typ der MDN-Seiten klar zu identifizieren. Die unten verlinkten Vorlagen geben an, welche page-type-Werte Sie für jeden Seitentyp festlegen sollten.

Für die vollständige Liste der Seitentypen siehe Der Front-Matter-Schlüssel für den Seitentyp.

Seitenvorlagen

Unten finden Sie Beispiele der verschiedenen Seiten, die Sie auf MDN finden, zusammen mit Vorlagen, die zum Erstellen neuer Inhalte basierend auf dem Typ der präsentierten Inhalte verwendet werden können, einschließlich der folgenden Seiten:

Jeder Abschnitt enthält Links zu Live-Beispielseiten für diesen Seitentyp.

API-Startseite

Eine API-Startseite bietet einen Überblick darüber, was eine bestimmte API tut, sowie Links zur Dokumentation für jede der Schnittstellen, globalen Objekte, Funktionen usw., die von der API angeboten werden. Sie verlinkt nicht direkt auf spezifische Methoden oder Eigenschaften innerhalb der Klassen der API, außer im Kontext des Überblicktexts. Sie ist primär eine Navigationsseite, hat jedoch auch die Funktion einer Überblicks-Referenzseite für die API.

Es gibt einige Fälle, in denen mehrere APIs existieren, die eigenständig und in ihren eigenen Spezifikationen definiert sind, aber eng verwandt sind und daher sinnvoll mit einer einzigen API-Startseite abgedeckt werden könnten. Zum Beispiel deckt die Generic Sensor API allgemeine Sensoranliegen ab, aber spezifischere Anliegen werden in anderen APIs wie der Ambient Light Sensor, Motion Sensor usw. behandelt. In solchen Fällen sind viele der hochrangigen Konzepte gleich, sodass es keinen Sinn macht, diese über mehrere Startseiten hinweg zu wiederholen. In einem solchen Fall wäre es im Hinblick auf Wiederholungen und Auffindbarkeit sinnvoller, alle unter einer einzigen "Web-Sensoren"-Startseite abzudecken.

Beispiel

Vorlagen

API-Referenzseite

Hinweis: Auch bekannt als Interface-Startseite.

Eine API-Referenzseite listet alle Methoden, Eigenschaften, Ereignisse usw. auf, die Mitglieder einer bestimmten Schnittstelle oder Klasse sind. Sie bietet einen Überblick darüber, wofür die Klasse oder Schnittstelle verwendet wird und verlinkt zur Dokumentation für jedes dieser Mitglieder. Sie ist detaillierter als eine API-Startseite, die typischerweise Verweise auf mehrere API-Referenzseiten enthält.

Beispiel

Vorlagen

API-Referenzunterseite

Eine API-Referenzunterseite ist ein Kind einer API-Referenzseite. Sie dokumentiert ein einzelnes Mitglied einer Schnittstelle im Detail.

Beispiele

Vorlagen

HTML-Element-Referenzseite

Eine HTML-Referenzseite listet alle Attribute auf, die für ein HTML-Element verfügbar sind, erklärt den Zweck und die Verwendung des Elements und bietet Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Daten.

Beispiel

Vorlagen

SVG-Element-Referenzseite

Eine SVG-Referenzseite listet alle Attribute auf, die für ein SVG-Element verfügbar sind, erklärt den Zweck und die Verwendung des Elements und bietet Beispiele, Browser-Kompatibilitätsinformationen und weitere wichtige Daten.

Beispiel

Vorlagen

CSS-Modul-Startseite

Jedes CSS-Modul stellt eine CSS-Spezifikation dar, die Unterstützung für bestimmte Funktionen und Implementierungen in CSS bietet. Zum Beispiel repräsentiert das CSS-Boxmodell-Modul die Spezifikation, die die Margin- und Padding-Eigenschaften beschreibt, mit denen Sie Abstände in und um ein CSS-Feld erstellen können.

Eine CSS-Modul-Startseite bietet einen Überblick über die Funktionen, die das Modul bietet, und listet alle Eigenschaften, Datentypen, CSS-Funktionen usw. auf, die das Modul bietet. Wenn möglich, bietet die CSS-Modul-Startseite eine kurze Demonstration dessen, was mit den Eigenschaften des Moduls erreicht werden kann, durch ein interaktives Beispiel. Die Modul-Startseite dient primär als Navigationsseite, hat jedoch auch die Funktion einer Überblicks-Referenzseite für das Modul.

Einige verwandte Eigenschaften und Funktionen, die in andere Module gehören, aber eng mit den vom zu dokumentierenden Modul angebotenen Funktionen zusammenhängen, können ebenfalls in einem Abschnitt Zugehörige Konzepte behandelt werden. Zum Beispiel sind der Datentyp <easing-function> und die Medienabfrage prefers-reduced-motion nicht im CSS-Animationsmodul enthalten, aber da sie eng mit CSS-Animationen zusammenhängen, ist es eine gute Idee, sie im Abschnitt Zugehörige Konzepte der CSS-Animationsmodul-Startseite hervorzuheben.

Beispiele

Vorlagen

CSS-Feature-Referenzseite

Eine CSS-Referenzseite listet die gesamte verfügbare Syntax für ein CSS-Feature wie einen Selektor oder eine Eigenschaft auf und erklärt den Zweck und die Verwendung des Features. Sie bietet auch Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Daten.

Beispiele

Vorlagen

HTTP-Header-Referenzseite

Eine HTTP-Header-Referenzseite listet alle verfügbaren Direktiven auf, die ein HTTP-Header enthalten kann, und erklärt den Zweck und die Verwendung des Headers. Sie bietet auch Beispiele, Browser-Kompatibilitätsinformationen und andere wichtige Erklärungen.

Beispiel

Vorlagen

Konzeptuelle Seite

Eine konzeptuelle Seite ist eine Leitfaden-Seite, die etwas erklärt oder lehrt. Allgemein gesagt, wenn eine Seite hauptsächlich Text enthält und nicht in einen anderen Seitentyp fällt, ist es wahrscheinlich eine Konzeptseite. Eine ausführliche Diskussion eines Themas kann sich über mehrere konzeptuelle Seiten erstrecken, die mit den Next und Previous Makros verlinkt sind.

Beispiele

Glossarseite

Eine Glossarseite enthält eine kurze Erklärung eines Begriffs, Themas oder Konzepts. Der erste Absatz sollte eine einfache, in sich geschlossene Beschreibung des Begriffs sein, nicht mehr als ein paar Sätze. Dies kann durch Links zu weiteren Informationen im Abschnitt Siehe auch ergänzt werden. Wenn die Seite länger als ein Bildschirm wird, ist sie zu lang und sollte in eine Konzeptseite umgewandelt werden. Weitere Details finden Sie unter Anleitung zur Erstellung und Verweise einer neuen Glossareintragung.

Beispiele

Vorlagen

Startseite

Eine Startseite dient als eine Art Menü für ihre Unterseiten und ist daher primär eine Navigationsseite. Ein Startseitenlayout wird typischerweise für die Root-Seite eines Baums von Seiten über ein bestimmtes Thema verwendet. Sie beginnt mit einer kurzen Zusammenfassung des Themas, gefolgt von einer strukturierten Liste von Links zu ihren Unterseiten und optional zusätzlichen Material, das für den Leser nützlich sein kann.

Die Liste der Unterseiten kann automatisch mit der SubpagesWithSummaries-Vorlage generiert werden. In komplexeren Fällen muss die Liste jedoch manuell erstellt (und gepflegt) werden.

Lernen-Webentwicklung-Seiten

Der Abschnitt Lernen-Webentwicklung von MDN richtet sich speziell an Personen, die die grundlegenden Grundlagen der Webentwicklung erlernen, und erfordert daher einen anderen Ansatz als der Rest der Inhalte von MDN. Weitere Richtlinien finden Sie unter Schreibrichtlinien für Lernen-Webentwicklung.

Es gibt nur wenige Seitentypen innerhalb von Lernen-Webentwicklung:

Modulgruppen-Startseite, zum Beispiel Core-Lernmodule

Diese enthalten einen Einleitungsabschnitt, einen Abschnitt, der die Voraussetzungen für den Start der Modulgruppe beschreibt, und eine Liste der Module, gefolgt von einer optionalen Liste von "Siehe auch"-Links.

Modul-Startseite, zum Beispiel Inhalte mit HTML strukturieren

Diese enthalten einen Einleitungsabschnitt, einen Abschnitt, der die Voraussetzungen für den Start des Moduls beschreibt, und eine Liste der enthaltenen Tutorials, gefolgt von einer optionalen Liste von "Zusätzlichen Tutorials", die verwandt, aber nicht Teil des zentralen Lernpfads sind, und einer optionalen Liste von "Siehe auch"-Links.

Tutorial-Seite, zum Beispiel Grundlegende HTML-Syntax

Die Struktur eines Lernen-Tutorials ist nicht strikt, aber es muss eine praktische Lernerfahrung bieten (siehe Schreibrichtlinien für Lernen-Webentwicklung > Ansatz), es muss eine Liste von "Voraussetzungen" und "Lernzielen" oben enthalten, und der Inhalt muss die angegebenen Lernziele unterrichten.

Beispiele

Siehe auch