Filter in Onlinedokumentation

Die meisten Redaktionssysteme für Technische Dokumentation verfügen über eine Funktion für bedingte Texte. Damit lassen sich in der Regel jedoch nur statische Szenarien abbilden.

Mit den Mitteln von CSS können Sie zusätzlich in einer Onlinedokumentation auch auf Bedingungen reagieren, die erst zum Zeitpunkt der Anzeige bekannt werden oder entstehen – beispielsweise durch eine Entscheidung des Nutzers oder anhängig von dem zur Anzeige verwendeten Gerät.

Beispiel 1: Durch Nutzer filterbare Inhalte

Die in einer Onlinedokumentation angezeigten Inhalte zur Laufzeit per Knopfdruck zu filtern, ist schon mit vergleichsweise geringem Aufwand umsetzbar. Nutzen lässt sich dies z. B., um zwischen einer vollständigen Dokumentation und einer verkürzten Fassung umzuschalten.

Die hier vorgestellte Lösung funktioniert bei Bedarf auch mit mehr als zwei Kategorien. Zum Beispielspiel könnten Sie Ihre Inhalte nach Branchen filtern, nach Programmiersprachen, nach Zielgruppen, nach Versionen oder nach beliebigen anderen Kriterien. Immer mit dem Ziel, Nutzern das Lesen für sie irrelevanter Dinge zu ersparen.
 

First section

I am essential information that all users need to know.

Second section

I am some other essential information. Don’t miss me. I am key.

Implementierung zu Beispiel 1

Die hier vorgestellte Lösung basiert im Kern auf einem Tutorial der Seite W3Schools.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.filterDiv {
  display: none;
}
.show {
  display: block;
}
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
.btn:hover {
  background-color: #ddd;
}
.btn.active {
  background-color: #666;
  color: white;
}

Schritt 2: Fügen Sie an der Stelle Ihres Topics, an der die Schaltflächen zum Ein- und Umschalten der Filter erscheinen sollen, folgendes HTML-Schnipsel ein:

<div id="filterBtnContainer">
 <button class="btn active" onclick="filterSelection('all')">Full read</button>
 <button class="btn" onclick="filterSelection('quickread')">Quick read</button>
</div>

Schritt 3: Setzen Sie jeden Abschnitt des Topics, der ausblendbar werden soll, zwischen die folgenden beiden HTML-Schnipsel. Im ersten dieser HTML-Schnipsel steht auch der Name der Filtergruppe, zu der der jeweilige Abschnitt gehört. Im vorgestellten Beispiel gibt es nur eine einzige Filtergruppe mit dem Namen fullread.

<div class="filterDiv fullread">

</div>

Anmerkung: In diesem Beispiel filtern wir mit den Schaltflächen gar nicht nach der Gruppe „fullread“, sondern nach einer nicht existierenden Gruppe „quickread“. Da die als „fullread“ ausgezeichneten Abschnitte nicht zur Gruppe „quickread“ gehören, werden die Inhalte der Gruppe „fullread“ damit verborgen.

Schritt 4: Fügen Sie abschließend am Ende des Topics oder am Ende des Body-Abschnitts Ihrer Seitenvorlage noch folgenden JavaScript-Code ein:

<script>
filterSelection("all")
function filterSelection(c) {
 var x, i;
 x = document.getElementsByClassName("filterDiv");
 if (c == "all") c = "";
 for (i = 0; i < x.length; i++) {
  filterRemoveClass(x[i], "show");
  if (x[i].className.indexOf(c) > -1) filterAddClass(x[i], "show");
 }
}
function filterAddClass(element, name) {
 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
  if (arr1.indexOf(arr2[i]) == -1) {
   element.className += " " + arr2[i];
  }
 }
}
function filterRemoveClass(element, name) {
 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
  while (arr1.indexOf(arr2[i]) > -1) {
   arr1.splice(arr1.indexOf(arr2[i]), 1);
  }
 }
 element.className = arr1.join(" ");
}
var btnContainer = document.getElementById("filterBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
 });
}
</script>

Beispiel 2: Filter abhängig von Gerät und Anzeige

Manchmal kann es sinnvoll sein, je nach Gerät und Anzeige bestimmte Informationen auszublenden oder auszutauschen. Zum Beispiel könnten Sie:

• bestimmte Inhalte weglassen oder verkürzt darstellen, wenn ein Nutzer nur über einen kleinen Bildschirm zum Lesen der Dokumentation verfügt
• auf einem Mobilgerät eine andere Information anzeigen als auf einem Desktop-Gerät
• auf einem Gerät mit Touchscreen eine andere Handlungsanleitung geben als auf einem Gerät mit Tastatur und Maus

Mit den folgenden Abfragen ist so etwas umsetzbar. Testen Sie es einmal auf einem Computer und auf einem Mobiltelefon:

Nur auf großen Bildschirmen

Das folgende Bild und der zugehörige Text erscheinen nur, wenn die Anzeige mindestens 500 Pixel breit ist.

Nur auf kleinen Bildschirmen

Das folgende Bild und der zugehörige Text erscheinen nur, wenn die Anzeige höchstens 500 Pixel breit ist.

Nur auf Geräten mit Mauszeiger

Das folgende Bild und der zugehörige Text erscheinen nur auf Geräten, auf denen ein Mauszeiger verfügbar ist.

Nur auf Geräten ohne Mauszeiger (Touchscreen)

Das folgende Bild und der zugehörige Text erscheinen nur auf Geräten, auf denen kein Mauszeiger verfügbar ist – z. B. auf einem Touchscreen.

Implementierung zu Beispiel 2

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

@media not (min-width: 500px) {
  .only-if-large-screen {display: none;}
}
@media not (max-width: 500px) {
  .only-if-small-screen {display: none;}
}
@media (hover: none) and (pointer: coarse) {
  .only-if-pointer {display: none;}
}
@media not ((hover: none) and (pointer: coarse)) {
  .only-if-no-pointer {display: none;}  
}

Schritt 2: Setzen Sie jeden bedingten Abschnitt zwischen zwei HTML-Schnipsel.

> Für nur auf großen Bildschirmen anzuzeigende Inhalte:

<div class="only-if-large-screen">

</div>

> Für nur auf kleinen Bildschirmen anzuzeigende Inhalte:

<div class="only-if-small-screen">

</div>

> Für nur auf Geräten mit Mauszeiger anzuzeigende Inhalte:

<div class="only-if-pointer">

</div>

> Für nur auf Geräten ohne Mauszeiger (Touchscreens) anzuzeigende Inhalte:

<div class="only-if-no-pointer">

</div>