Benutzer-Werkzeuge

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
de:projects:dokuwiki:ad-hominem-template [2024/10/04 11:38] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:projects:dokuwiki:ad-hominem-template [2025/03/18 15:09] (aktuell) – [„Dunkelmodus“] sascha
Zeile 1: Zeile 1:
 +====== Ad Hominem Template ======
  
 +Ein einfaches und leichtgewichtiges Template, welches sich am Standard-Template von DokuWiki orientiert, aber viele zusätzliche, moderne Features mitbringt.
 +
 +<aside float-right box>
 +  * Dokuwiki: \\ [[doku>template:ad-hominem|template:ad-hominem]]
 +  * Github: \\ [[github>dokuwiki-template-ad-hominem|dokuwiki-template-ad-hominem]]
 +</aside>
 +
 +Die wichtigsten Features sind hier aufgelistet:
 +
 +===== Suche =====
 +
 +Eine der Stärken von DokuWiki ist die gut integrierte und mächtige [[doku>de:search|Suchfunktion]]. Das Suchfeld bringt diese Funktionen alle zusammen:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projects:dokuwiki:ad-hominem-search.png?nolink|Ad Hominem Template: Suchfeld mit Ergebnisliste}}</div>
 + <figcaption>Suchfeld mit aufgeklappter Ergebnisliste</figcaption></figure>
 +
 +===== Ausklappbare Seitenleiste und Inhaltsverzeichnis =====
 +
 +Auch die [[doku>config:sidebar|Seitenleiste]] ist eine Kernfunktion in DokuWiki((Siehe hierzu auch den Artikel: [[doku>de:faq:sidebar|Wie füge ich eine Sidebar hinzu?]].)) Dieses Template hat deswegen gleich zwei verschiedene Ansätze, damit diese dem Benutzer nicht so sehr im Weg steht:
 +
 +Auf **Desktop**-Bildschirmgrößen gibt es einen unscheinbaren Knopf, um die Seitenleiste an den Rand zu klappen:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-sidebar-collapse.png?nolink|Ad Hominem Template: Seitenleiste im zu- und aufgeklapptem Zustand}}</div>
 + <figcaption>Seitenleiste im zu- und aufgeklapptem Zustand.</figcaption></figure>
 +
 +In einigen Modi – etwa beim Bearbeiten der Seite – ist die Seitenleiste automatisch eingeklappt (kann aber bei Bedarf aufgeklappt werden.
 +
 +Anders sieht es auf kleineren Bildschirmen – etwa auf Smartphones – aus: Ist nicht genug Platz da, um die Navigation als Seitenleiste anzuzeigen, wird sie stattdessen zu einem Menü, das beim Öffnen über dem Seiteninhalt erscheint:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-sidebar-als-menue.png?nolink|Ad Hominem Template: Seitenleiste als Menü}}</div>
 + <figcaption>Seitenleiste als Menü auf kleineren Bildschirmen.</figcaption></figure>
 +
 +==== Inhaltsverzeichnis ====
 +
 +Auch das Inhaltsverzeichnis der Seite ist meist eher im Weg. Aus diesem Grund ist es nach dem Öffnen der Seite erst einmal hinter einem unscheinbaren Icon, ganz oben rechts auf der Seite versteckt:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-inhalt-geschlossen.png?nolink|Ad Hominem Template: Inhaltsverzeichnis im geschlossenen Zustand}}</div>
 + <figcaption>Inhaltsverzeichnis im geschlossenen Zustand.</figcaption></figure>
 +
 +Ein Klick auf das Icon und das Inhaltsverzeichnis wird aufgeklappt und sieht dann etwa wie folgt aus:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-inhalt-offen.png?nolink|Ad Hominem Template: Inhaltsverzeichnis im ausgeklappten Zustand}}</div>
 + <figcaption>Inhaltsverzeichnis im ausgeklappten Zustand.</figcaption></figure>
 +===== Linkvorschau =====
 +
 +Ein Alleinstellungsmerkmal dieses Templates (zumindest bis mein neues [[projekte:dokuwiki:nuropa-template|Nuropa]] Template veröffentlicht wird): Hält man den Mauszeiger über einem Link, wird eine Vorschau der verlinkten Seite angezeigt:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-linkvorschau.png?nolink|Ad Hominem Template: Linkvorschau für interne Links}}</div>
 + <figcaption>Linkvorschau für interne Links.</figcaption></figure>
 +
 +Für die Linkvorschau wird der erste Absatz der verlinkten Seite (ausschließlich der Hauptüberschrift) verwendet((Es ist generell eine gute Praxis, jeden Artikel mit einer Übersicht über den zu erwartenden Inhalt zu beginnen)).
 +
 +Neben internen Links funktioniert das auch für Wikipedia-Links (für alle Sprachversionen, die von DokuWiki unterstützt werden). Das sieht dann so aus:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-linkvorschau-wikipedia.png?nolink|Ad Hominem Template: Linkvorschau für Wikipedia-Links}}</div>
 + <figcaption>Linkvorschau für Wikipedia-Links.</figcaption></figure>
 +
 +Und schließlich können so auch Verweise auf andere Wikis, die entweder dieses Template, oder Wikipedias Software „[[wpde>MediaWiki|MediaWiki]]“ verwenden eine Vorschau erhalten. Hierfür sind aber tiefergehende Konfigurationen notwendig.
 +
 +===== Druckmodus =====
 +
 +Der Druckmodus wird von vielen Templates eher stiefmütterlich behandelt, nicht so hier. Dieses Template hat nicht nur //einen//, sondern gleich //zwei// gut durchdachte Druckmodi, die an die Grenzen dessen gehen, was heutzutage möglich ist.
 +
 +In beiden Fällen gelten die folgenden Merkmale:
 +
 +  * Der erste Textabsatz („Spitztext“) wird halbfett gedruckt, um ihn besonders hervorzuheben (im zweispaltigen Druckmodus geht dieser Absatz auch über beide Spalten hinweg).
 +  * Überschriften und Absätze wurden trickreich darauf optimiert, sogenannte „[[wpde>Hurenkind und Schusterjunge|Hurenkinder und Schusterjungen]]“ zu vermeiden.
 +  * Das Seitenlayout orientiert sich am Buchdruck, mit großzügigem Platz für [[wpde>Marginalie|Marginalien]] und offenem Fußraum.
 +
 +==== Einspaltiger Druck ====
 +
 +Der normale Druckmodus (Einstellung: „einfach“) ist einspaltiger Druck. Dieses Format ist für gute Lesbarkeit optimiert und benötigt keine besonderen Formatierungen. Der Druck sieht etwa wie folgt aus((je nach verwendetem Browser kann es zu kleineren Abweichungen kommen)):
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-druck-einfach.png?nolink&600|Druckvorschau für den einfachen Modus}}</div>
 + <figcaption>Druckvorschau für den einfachen Modus.</figcaption></figure>
 +
 +==== Zweispaltiger Druck ====
 +
 +Durch Umschalten in den „kompakten“ Modus wird der zweispaltige Druck aktiviert. Durch das kompaktere Layout (und eine etwas kleinere Schrift für den Fließtext) passt so mehr Text auf jede Seite. Dafür macht es mehr Aufwand, solche Seiten für einen hochwertigen Druck vorzubereiten.
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-druck-kompakt.png?nolink&600|Druckvorschau für den kompakten Modus}}</div>
 + <figcaption>Druckvorschau für den kompakten Modus.</figcaption></figure>
 +
 +Überschriften der Größen ''h1'' und ''h2'' werden automatisch „breit“, d.h. über beide Spalten hinweg gedruckt; ebenso ''figure''-Blöcke((Um HTML Elemente (einschließtlich Klassen) in den Wiki-Code einzufügen wird das [[projekte:dokuwiki:ad-hoc-html-plugin|Ad-Hoc HTML Plugin]] empfohlen. Alternativ kann auch das [[doku>plugin:wrap|Wrap Plugin]] benutzt werden.)). Für andere Elemente gibt es die Klasse ''print-wide'', welche einen Druck über beide Spalten erzwingt.
 +
 +Umgekehrt kann ein „breites“ Element in eine einzelne Spalte gebracht werden, indem ihm die Klasse ''print-narrow'' zugewiesen wird.
 +
 +Während der normale //einspaltige// Druck recht zuverlässig und ohne größere Nacharbeiten mit allen üblichen Wiki-Inhalten funktioniert, wird beim zweispaltigen Druck empfohlen, diesen ausführlich und nach jeder größeren Änderung zu testen und ggf. die Formatierung nachzubearbeiten. Da dies recht arbeitsaufwändig sein kann, ist dieser Modus nicht für alle Wikis empfehlenswert!
 +
 +===== Barrierefreiheit =====
 +
 +Das Template wurde von Grund auf so konzipiert, dass alle Elemente eine Barrierefreiheit nach [[https://www.w3.org/TR/WCAG21/|WCAG 2.1]] auf dem Niveau AA implementieren.
 +
 +Es gibt ein paar Einschränkungen, die sich aus der Implementierung insbesondere des DokuWiki-Renderers und anderer DokuWiki-interner Funktionen ergeben. Diese sind jedoch für den normalen Gebrauch nur wenig relevant (zum Beispiel sind die Buttons im Editor, welche das Bearbeitungsfeld größer oder kleiner machen, nicht barrierefrei).
 +
 +Allerdings ist es möglich, z.B. durch Änderung der Farben, oder durch un-semantische Elemente im Textinhalt der Seiten, Probleme zu generieren. Wenn Barrierefreiheit für Ihre Site verpflichtend ist (z.B. bei Behörden), sollten Sie daher regelmäßig zumindest automatische Tests (etwa mit [[https://wave.webaim.org/|Wave]]) machen, um solche Probleme zu finden – und dann natürlich auch zu beheben.
 +
 +Grundsätzlich ist dies übrigens für alle Website-Betreiber zu empfehlen – ganz unabhängig von eventuellen rechtlichen Pflichten!
 +
 +===== Datenschutz =====
 +
 +Das Template lädt von sich aus keine externen Dateien wie Schriften oder ähnliches, welche datenschutzrechtlich relevant wären.
 +
 +Die [[#linkvorschau|Linkvorschau]] (siehe oben) kann unter bestimmten Umständen eine Anfrage an die Server verlinkter Sites machen. Dies betrifft insbesondere Anfragen an //Wikipedia// für Vorschautexte für Links dorthin.
 +
 +Außerdem können spezifische, konfigurierte DokuWiki-Sites (welche dieses Template benutzen) auf dieselbe Weise kontaktiert werden. In der Standardkonfiguration ist dies nur für die Sites [[dfo>wiki/hauptseite|denkfehler.online]] und [[fo>wiki/index|fallacies.online]] konfiguriert.
 +
 +In keinem dieser Fälle werden nach bestem Wissen Daten über die Benutzer gesammelt, für die solche Anfragen gemacht werden.
 +
 +<aside info>
 +**Hinweis:** Bitte beachten Sie, dass für <abbr>GDPR</abbr>-Konformität auch in den Site-[[projekte:dokuwiki:index?do=admin&page=config|Einstellungen]] die [[doku>config:jquerycdn|jquerycdn]]-Einstellung auf „nur lokale Auslieferung“ gesetzt werden muss.
 +</aside>
 +
 +<h3>Cookie-Banner</h3>
 +
 +Das Template hat einen eingebauten Cookie-Banner, der wie folgt aussieht:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-cookies-banner.png?nolink&600|Ad Hominem Template: Cookies-Banner}}</div>
 + <figcaption>Eingebauter Cookies-Banner</figcaption></figure>
 +
 +Da DokuWiki keine datenschutzrelevanten Cookies setzt (alle Cookies sind „funktional“), ist die einzige Option hier ein „OK“. Ein Link zu weiteren Informationen sollte zur Seite mit detaillierteren Cookies-Infos führen.
 +
 +Sowohl der Text im Banner, als auch der Link können in den Einstellungen geändert werden. Außerdem kann dort die Position des Banners (unten oder oben) gewählt, und natürlich kann der Banner auch komplett ausgeschaltet werden (nicht empfehlenswert innerhalb der EU).
 +==== „Dunkelmodus“ ====
 +
 +Es sind nicht wenige Benutzer, welche einen „Nachtmodus“ auf dem Bildschirm bevorzugen, während andere lieber ein helles Erscheinungsbild haben. Anstatt der Site ein generell „helles“ oder „dunkles“ Erscheinungsbild zu geben, kann dieses Template den Benutzervorgaben folgen, also automatisch einen dunkles Erscheinungsbild verwenden, wenn im Betriebssystem der Dunkelmodus aktiv ist und ein helles, wenn nicht.
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-dunkelmodus.png?nolink&600|Ad Hominem Template: Hell- und Dunkelmodus derselben Seite}}</div>
 + <figcaption>Hell- und Dunkelmodus derselben Seite</figcaption></figure>
 +
 +Der Dunkelmodus muss in den Template-Einstellungen ausdrücklich für die Site //erlaubt// werden. Es ist auch nicht möglich die Site //nur// im Dunkelmodus zu veröffentlichen (außer man kopiert die dunklen Farben in die regulären Farbeinstellungen um); der Dunkelmodus erscheint nur, wenn der //Besucher// dies in den Betriebssystemeinstellungen ausdrücklich ausgewählt hat.
 +
 +Daneben sollte man sich darüber im Klaren sein, das dieser Modus auch möglicherweise unerwartete Nebenwirkungen auf den Inhalt der Site haben kann:
 +
 +Zum einen haben alle Elemente, die zugewiesene **Farben** haben, dies auch im Dunkelmodus. Wer also farbige Hervorhebungen benutzt, sollte diese sorgfältig so auswählen, dass sie in beiden Modi gut sichtbar sind (oder das Plugin [[projekte:dokuwiki:ad-doc-plugins#ad-hoc-wrap|Ad-Hoc Wrap]] benutzen, welches den Dunkelmodus voll unterstützt!).
 +
 +Dasselbe gilt für **Bilder**: Solche, die sich darauf verlassen, dass sie auf einem hellen Hintergrund angezeigt werden, sehen auf einem dunklen Hintergrund womöglich nicht mehr gut aus. Um schwarze Zeichnungen auf dunkelgrauem Hintergrund zu vermeiden, werden daher im Dunkelmodus alle Bilder grundsätzlich //invertiert//!
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-abbildung-hell-dunkel.png?nolink|Ad Hominem Template: Abbildung im Hell- und Dunkelmodus (invertiert)}}</div>
 + <figcaption>Abbildung im Hell- und Dunkelmodus (invertiert)</figcaption></figure>
 +
 +Während das für Strichzeichnungen gut funktioniert, sieht das dann bei Vollfarb- oder sogar schon Graustufen-Bildern nicht mehr gut aus. Hier ein Beispiel:
 +
 + <figure>
 + <div outline [style=width:max-content]>{{:projekte:dokuwiki:ad-hominem-abbildung-invertiert.png?nolink|Ad Hominem Template: Graustufen-Bild in drei Modi: Hell, dunkel (invertiert) und dunkel (nicht invertiert)}}</div>
 + <figcaption>Graustufen-Bild in drei Modi: Hell, dunkel (invertiert) und dunkel (nicht invertiert)</figcaption></figure>
 +
 +Um diese Invertierung zu vermeiden, sollten solche Bilder in ein Element „verpackt“ werden, welches die Klasse ''no-filter'' enthält.
 +
 +Das könnte z.B. mit dem [[projekte:dokuwiki:ad-hoc-plugins#ad-hoc-html|Ad-Hoc HTML]]-Plugin so aussehen:
 +<code HTML5>
 +<figure no-filter>{{:abbildung.png|Title}}</figure>
 +</code>
 +
 +Oder mit dem Wrap-Plugin wie folgt:
 +<code HTML5>
 +<WRAP no-filter>{{:abbildung.png|Title}}</WRAP>
 +</code>
 +
 +Auch hier gilt: wird der Dunkelmodus verwendet, sollte man die Seiten regelmäßig in beiden Modi betrachten, um mögliche Probleme aufzuspüren und zu beheben.
 +
 +<aside info>
 +**Hinweis:** Manche Betriebsysteme (z.B. [[wpde>macOS|MacOS]], [[wpde>iOS (Betriebssystem)|iOS]]) können automatisch bei Sonnenauf- bzw. -untergang zwischen hellem und dunklem Modus umschalten. Bei anderen ([[wpde>Microsoft Windows|Windows]]) muss die Umschaltung manuell erfolgen. \\ Um einfach zwischen beiden Modi wechseln zu können, empfiehlt es sich, ein Tool wie „[[https://www.wintools.info/index.php/easy-dark-mode|Easy Dark Mode]]“ (Link zur Herstellerseite) zu benutzen, das im <i :en>Tray</i> residiert und von dort die Umschaltung mit einem Klick möglich macht.
 +</aside>
 +===== Homelink =====
 +
 +Nicht alle Wikis sind „Standalone“. In vielen Fällen ist das Wiki nur eine Unterseite eines größeren Webauftrittes. In diesen Fällen sollte dies auch in der Struktur der Site widergespiegelt werden.
 +
 +Dafür erlaubt es das Template, einen spezifischen „Homelink“ anzugeben. Ist dieser gesetzt, erscheint dieser Link an allen relevanten Stellen als Startseite:
 +
 +  * Klick auf das Wiki-Logo führt zu diesem Link.
 +  * In der „hierarchischen Pfadnavigation“ ([[doku>config:youarehere|youarehere]]) wird dieser Link als Wurzelverzeichnis angezeigt. Die eigentliche Wiki-Homepage ist dann der zweite Eintrag in dieser Liste.
 +
 +Bleibt dieses Feld leer, wird das normale Verhalten dieser Elemente beibehalten.
 +
 +===== Sonstiges =====
 +
 +  * <i :en>Responsive</i> Design, funktioniert auf einem breiten Spektrum von Bildschirmgrößen: vom kleinen Smartphone bis zum 4K-Monitor (zum Bearbeiten wird ein Bildschirm mit 1980px Seitenbreite empfohlen).
 +
 +  * Zahlreiche kleinere und größere Verbesserungen in den Admin-Tools, wie dem Upload-Manager, Einstellungsseite, u.s.w.
 +
 +  * Sauber formatierter und standardkonformer HTML Code (soweit möglich – auch hier ist der DokuWiki-Renderer der begrenzende Faktor)
 +
 +  * Kompatibel mit <abbr>PHP8</abbr> und DokuWiki "Kaos" oder später.
 +
 +<aside info>
 +**Hinweis:** Diese Site benutzt das Ad-Hominem Template. Viele der Beispielbilder hier sind daher tatsächlich von dieser Seite abfotografiert. Andere Bilder stammen von meinem Hauptprojekt, der Website [[https://denkfehler.online/wiki/hauptseite|denkfehler.online]].
 +</aside>

Diese Website verwendet Cookies. Durch die Nutzung der Website erklären Sie sich mit der Speicherung von Cookies auf Ihrem Computer einverstanden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzrichtlinie gelesen und verstanden haben. Wenn Sie damit nicht einverstanden sind, verlassen Sie bitte die Website.

Weitere Information