[Tutorial] Fortschrittsbalken und eigene Lesestandsanzeige

Sonntag, 10. März 2019 | Kommentieren
Code auf schwarzem Hintergrund

Fortschrittsbalken finden sich auf vielen Blogs in den unterschiedlichsten Variationen: Als Fortschrittsanzeige für Aktionen, als grafischer Countdown bis zu irgendeinem Ereignis oder als sichtbarer Fortschritt beim Ausfüllen eines Formulars. Auf Buchblogs begegnen sie mir vor allem als Lesestandsanzeige (z.B. im Widget von Lovelybooks) oder als grafischer Challenge-Fortschritt (z.B. im Widget der Goodreads-Reading Challenge).
Seit dem Inkrafttreten der DSGVO sind gerade diese Widgets jedoch nicht mehr ganz so einfach zu verwenden. Früher hat man sie einfach eingefügt und fertig. Heute gelten sie als Drittanbieter-Dienste, weil über die Widgets Daten von anderen Seiten abgerufen werden. Das führt dazu, dass diese Widgets in der Datenschutzerklärung eures Blogs genannt werden müssen - und zwar nicht nur namentlich, sondern inkl. dem Anbieter, seiner Adresse, der Art der übertragenen Daten und der Verwendung der Daten. Manche Drittanbieter machen dazu Angaben, die ihr einfach nutzen könnt, andere nicht. In jedem Fall ist der Einbau eines Widgets heute mit deutlich mehr Nachdenken verbunden.

Warum dieser Ausflug in den Datenschutz?

Zum einen, um nochmal darauf hinzuweisen, weil ich das Gefühl habe, dass es bei vielen immer noch nicht angekommen ist.
Zum anderen - und das ist wichtig für den heuten Post - weil ihr diese Widgets gar nicht unbedingt braucht. Es ist nämlich total einfach, so eine Fortschrittsanzeige selbst zu bauen. Ich möchte euch heute zeigen, wie das geht. Weiter unten gibt es dann noch einen Code für eine selbstgebaute Lesestandsanzeige, die ganz ohne Hinweis in der Datenschutzerklärung genutzt werden kann.

Das progress-Element

Die fünfte Fassung von HTML (HTML5) brachte das progress-Element als Neuerung mit. Entsprechend seines Namens kann man mit diesem Element den Fortschritt darstellen; genauer: Fortschrittsbalken. Das Element sieht folgendermaßen aus:
<progress value="..." max="...">Beschriftung</progress>
Zwei Attribute gehören standardmäßig zu diesem Element:

max
benennt die Gesamtheit der Schritte oder Aufgaben, die bis zum Ziel notwendig sind. Das kann z.B. die Seitenzahl eines Buches sein oder die Zahl 100, um 100 % abzubilden. Wichtig ist nur, dass die Zahl größer als 0 ist.

value
gibt an, wie viele dieser Schritte, Aufgaben oder Prozent bereits erreicht wurden. Diese Zahl muss kleiner oder gleich max sein.

Neben diesen zwei Pflichtangaben solltet ihr die Beschriftung nicht vergessen, die aus Gründen der Barrierefreiheit unbedingt angeraten wird.

Beispiel

Ein "gefülltes" progress-Element kann dann z.B. so aussehen:

<progress value="30" max="100">Stand der Erledigung: 30 %</progress>

 Fügt ihr diesen Code z.B. in den HTML-Bereich eures Blogposts ein, erhaltet ihr dieses Ergebnis: Stand der Erledigung: 30 %
Wenn ihr euren Fortschritt anpassen wollt, müsst ihr nur noch den value-Wert ändern und schon passt sich der grafische Balken an.

Gestaltung

Der Fortschrittsbalken, der mit dem progress-Element angezeigt wird, sieht in jedem Browser anders aus. Bspw. ist es bei Firefox ein grüner Balken, bei Chrome ein blauer und bei Edge ist er zwar auch blau, aber wesentlich schmaler und länger als in den anderen beiden Versionen. Wen das stört, der kann mit etwas CSS die Gestaltung angleichen. Ein Beispiel-Code sieht so aus:
/* Allgemeine Angaben */
progress {
  width: 10em; /* Breite */
  background: lightgrey; /* Hintergrundfarbe */
  color: green; /* value-Farbe */
  border: .1em solid darkgrey; /* Rahmen */
}

/* value-Farbe für Firefox */
progress::-moz-progress-bar {
  background: green; /* value-Farbe */
}

/* Chrome und Safari */
progress::-webkit-progress-bar {
  background: transparent;
}  
progress::-webkit-progress-value {  
  width: 10em; /* Breite */
  background: green; /* value-Farbe */
  border: none; /* Rahmen */
}
Da die Browser auf unterschiedlichen System basieren, müssen sie unterschiedlich angesprochen werden. Daher müssen die Gestaltungsrichtlinien mehrfach geschrieben werden.

Eigene Lesestandsanzeige

Das progress-Element könnt ihr in verschiedenen Zusammenhängen nutzen. Ich möchte euch zeigen, wie es in eine Lesestandsanzeige eingebaut werden kann. Das Ergebnis wird so aussehen:
Lesestandsanzeige
Anstelle des grauen Platzhalters kann ein Cover-Bild eingefügt werden.

Um diese Lesestandsanzeige zu bekommen, braucht ihr zunächst den folgenden HTML-Code.
<div id="Lesestand">
<h2>Lesestand</h2>
<img src="Bild-URL" alt="cover" />
<span id="Autor">Autor*in</span><br />
<span id="Titel">Buchtitel</span><br />
<progress max="300" value="30">30 von 300 Seiten</progress>
<br />
<span id="Stand">30 von 300 Seiten</span></div>

Fügt diesen Code an der Stelle ein, an dem euer Lesestand-Widget angezeigt werden soll. Das kann z.B. ein HTML-/Javascript-Widget in der Seitenleiste sein.
Wer kein Bild in der Anzeige haben möchte entfernt den img-Tag.

Um das Widget hübsch zu machen, brauchen wir jetzt noch etwas CSS. Um es einzufügen, geht ihr bei Blogspot unter "Design", macht ein Backup und klickt anschließend auf "HTML bearbeiten". Scrollt, bis ihr diese Angabe findet: }]]></b:skin>
Alternativ klickt ihr in das Code-Feld, drückt Strg + F und sucht es via Suchfeld.
Fügt den CSS Code vor }]]></b:skin> ein.
#Lesestand {
  width: 15em; /* Breite des Widgets */
  height: 10em; /* Höhe des Widgets */
  border: 1px solid lightgrey; /* Rahmen des Widgets */
  padding: 1em; /* Innenabstand des Widgets */
  color: black; /* Textfarbe */
}

/* Überschrift */
#Lesestand h2 {
  text-align: center;
  color: brown; /* Farbe der Überschrift */
  margin-top: 0;
}

/* Bild */
#Lesestand img {
  display: inline-block;
  height: 7em; /* Höhe */
  float: left;
  padding-right: .5em; /* Abstand nach rechts */
}

/* Angabe des Autors */
#Autor {
  display: inline-block;
  margin-bottom: .5em; /* Abstand nach unten */
  font-weight: bold; /* Fettdruck */
  font-size: 80%; /* Schriftgröße (80% der normalen Größe) */
}

/* Angabe des Titels */
#Titel {
  display: inline-block;
  margin-bottom: 1em; /* Abstand nach unten */
  font-size: 110%; /* Schriftgröße (110% der normalen Größe) */
  text-transform: uppercase; /* Großbuchstaben */
}

/* Fortschrittsbalken */
#Lesestand progress {
  float: left;
  display: block;
  width: 8em; /* Breite */
  background: lightgrey; /* Hintergrund */
  color: green; /* value-Farbe */
  border: .1em solid darkgrey; /* Rahmen */
}

/* value-Farbe für Firefox */
#Lesestand progress::-moz-progress-bar {
  background: green; /* value-Farbe */
}

/* Chrome und Safari */
#Lesestand progress::-webkit-progress-bar {
  background: transparent;
}  
#Lesestand progress::-webkit-progress-value {  
  width: 8em; /* Breite */
  background: green; /* value-Farbe */
  border: none; /* Rahmen */
}

/* Fortschritt in Worten */
#Stand {
  display: inline-block;
  font-size: 80%; /* Schriftgröße (80% der normalen Größe) */
  color: black; /* Schriftfarbe */
  padding-top: -.5em;
}

Alles, was in diesem Code kommentiert ist (/* Kommentar */), könnt ihr nach euren Vorstellungen anpassen und so eure ganz individuelle Lesestandsanzeige kreieren.

Im Gespräch

Falls ihr Fragen habt oder  Hilfe braucht - allgemein zum progress-Element oder zur Lesestandsanzeige - lasst mir gern einen Kommentar da!

Auch über Wünsche zu HTML-/CSS-Tutorials freue ich mich immer.

0 Kommentare

Schreibe einen Kommentar

Vielen Dank für deinen Kommentar!

Hinweis: Mit dem Abschicken deines Kommentars akzeptierst du, dass der von dir geschriebene Kommentar und die personenbezogenen Daten, die damit verbunden sind (z.B. Username, E-Mailadresse, verknüpftes Profil auf Google/ Wordpress) an Google-Server übermittelt werden. Mehr Informationen dazu erhältst du in meiner Datenschutzerklärung und in der Datenschutzerklärung von Google.