Autor*in: Linda Khorami
Zur interaktiven Karte (Hochschulwebspace Linda Khorami)
Quellcode zum Download (Zip-Archiv)
1. Einleitung
Im Rahmen des Seminars „Multimediasysteme 2“ wurde ein One Pager zum Thema „Stipendiaten an deutschen Fachhochschulen“ erstellt. Hierfür wurden Informationen des Statistischen Bundesamtes herangezogen. Die Daten stammen aus dem Jahr 2018. Bei der Deutschlandkarte handelt es sich um eine SVG-Datei von „amcharts“ .
Step by Step – eine Übersicht
Die Realisierung des One Pager kann in mehrere Schritte unterteilt werden. Für die Umsetzung des Beispiels wurden Arbeitspakete im Wochenrhythmus formuliert. Dadurch war eine realistische Einschätzung des Arbeitsaufwandes möglich:
| Zeitraum | Tätigkeiten |
|
Woche 1 |
Themenfindung
Umsetzung prüfen
|
|
Woche 2 |
Animationen und Layout
Recherche, um folgende Fragen zu beantworten:
|
|
Woche 3 |
Umsetzung
Dokumentation der bisherigen Vorgehensweise |
|
Woche 4 |
Kontrolle und Abgabe
|
Konzept
Ziel der Karte ist es Informationen zu dem Thema kompakt dazustellen und Studenten die Möglichkeit zu geben sich einen Überblick zu verschaffen. Hierfür werden folgende Informationen vermittelt: Anzahl der Stipendiaten sowie die Anzahl der Frauen und Männer die im Vorjahr ein Stipendium erhalten haben. Für die technische Umsetzung wird dabei HTML, CSS und JavaScript verwendet.
Besonderheiten im Code
Im Header der HTML-Datei befinden sich externe Libraries die eingebunden werden müssen, um gewisse Styles unabhängig von den Animationen umzusetzen. Dazu gehören z.B. die Schriftfarbe und die Navigationsleiste des One Pager, die mittels Bootstrap realisiert werden. Die Programmlogik ist mit JQuery umgesetzt, dazu ist im Header eine Library eingebunden, die auch für Bootstrap relevant ist.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- Bootstrap for Navigation-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script> <!--jquery-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script> <!-- popper externe Libary für Tooltips-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
Aufwand und Funktionalität
Die Animationen des One Pager unterteilen sich in zwei Teile. Zum einen sind Animationen innerhalb der SVG-Datei und somit in der Deutschlandkarte eingebaut. Zum anderen wird eine Animation für die Infotext-Anzeige außerhalb der Karte verwendet, welche durch einen Klick auf das jeweilige Bundesland ausgelöst wird. Dabei verfolgen beide dasselbe Ziel: Informationen online übermitteln, ohne zu verwirren.
1. Karte
Innerhalb der Deutschlandkarte wird beim hovern eine Animation ausgelöst. Wenn der Besucher mit der Maus über ein Bundesland fährt, ändert sich die Farbe des Bundeslandes und die Animation mit einer Zoom-Funktion wird ausgelöst. Dies dient zur Veranschaulichung sowie Verdeutlichung, damit der Besucher genau weiß, welches Bundesland gemeint ist.
Um die Farbe bei einem Mouse-Over zu verändern, kann z.B. der folgende Code verwendet werden:
/* changing color while hovering*/
.state:hover {
fill: #004085;
animation: zoominout 1s infinite;
}
Diese Angabe gilt für alle Bundesländer, da diese zur Klasse “state” gehören. Wie und wo eine Klasse vergeben werden kann, zeigt der folgende Code:
<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"
1.1 Animation der Karte umsetzen
Beim initialen mouse-over wird das Bundesland innerhalb einer Sekunde von der Originalgröße um 2% auf und wieder zurück skaliert. Die Animation kann mittels Keyframes umgesetzt werden und sieht aus wie folgt:
@keyframes zoominout {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1.0);
}
}
2. Infobox
Durch die Infobox werden nähere Informationen vermittelt. Durch einen Klick auf das jeweilige Bundesland erscheint eine Infobox, in der die Gesamtanzahl der Stipendiatinnen und Stipendiaten sowie die Verteilung unter Männern und Frauen zu finden sind.
Die einzelnen Informationen zu den Stipendiaten sind in das “data-description”-Attribut der jeweiligen Bundesländer eingetragen. Das Attribut ist nicht Teil der SVG-Datei und muss manuell hinzugefügt werden.
<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"
Technische Umsetzung der Ränder
Die Animation der Infobox kann mit zwei Keyframes umgesetzt werden. Die definierte Regel “beforeBorders” löst eine Animation aus, bei der ein Rahmen um die Infobox gezogen wird:
@keyframes beforeBorders {
0% {
top: calc(var(--border-width) * -1);
left: 50%;
bottom: auto;
right: auto;
width: 0;
height: var(--border-width);
}
33% {
top: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
bottom: auto;
right: auto;
width: calc(var(--border-width) + 50%);
height: var(--border-width);
}
66% {
top: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
bottom: auto;
right: auto;
width: var(--border-width);
height: calc((var(--border-width) * 2) + 100%);
}
100% {
top: auto;
left: calc(var(--border-width) * -1);
bottom: calc(var(--border-width) * -1);
right: auto;
width: calc(var(--border-width) + 50%);
height: calc((var(--border-width) * 2) + 100%);
}
}
Für die Farbe der Ränder wird eine zweite Regel definiert, auch diese besteht aus vier Teilen:
/* border color */
@keyframes borderColors {
0% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
33% {
border-top-color: var(--color);
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
66% {
border-top-color: var(--color);
border-right-color: var(--color);
border-bottom-color: transparent;
border-left-color: var(--color);
}
100% {
border-top-color: var(--color);
border-right-color: var(--color);
border-bottom-color: var(--color);
border-left-color: var(--color);
}
}
Technische Umsetzung der Box
Mit Hilfe der JavaScript Funktion öffnet sich eine Infobox beim Klicken auf eines der Bundesländer und zeigt den Namen des Bundeslandes sowie die oben erwähnten Informationen über die Stipendiaten (siehe Kommentare).
$(function () {
$('.state').on('click', function (e) {
let box = $('.state-description-box'), // select the description-box
clonedBox = box.clone(true); // clone this box
box.before(clonedBox); // put this cloned-box before the first box
$('.state-description-box:last')
.remove(); // remove the old one to trigger the same animation again
let title = $(this).attr('title'); // get the title from the clicked element
let description = $(this).attr(
'data-description'); // get the description from the clicked element
let fullText = '<h4>' + title + '</h4><p>' + description +
'</p>'; // put this text together
$('#state_description').html(fullText); // write the text into the box
$('#state_description').parent().show(); // show the box, just the first time
});
});
Gestalterische Umsetzung
Die Navigationsleiste, sowie der Footer werden in diesem Beispiel mittels Bootstrap verwirklicht.
Im Allgemeinen ist das Design sehr schlicht gehalten, damit die Informationen der Seite im Vordergrund stehen. Daher besteht die Seite hauptsächlich aus Blau- und Grautönen.
Eine Besonderheit bei der gestalterischen Umsetzung ist, dass für die SVG-Datei andere Attribute als für HTML Elemente verwendet werden. Im Folgenden werden die einzelnen Klassen mittels Kommentare beschrieben:
/* Setting for the states*/
.state {
fill: lightgrey;
stroke: white;
stroke-width: 1.5;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 10;
stroke-dasharray: none;
stroke-opacity: 1;
}
/* changing color while hovering*/
.state:hover {
fill: #004085;
animation: zoominout 1s infinite;
}
/* Setting for description-box that appears after clicking on the Map */
.state-description-box {
--border-width: 0.2em;
--animation-speed: 0.5s;
--color: #004085;
color: var(--color);
transform: scale(1, 0.8);
border: var(--border-width) solid transparent;
animation: borderColors var(--animation-speed) steps(1) forwards;
outline: none;
}
.state-description-box-inner {
width: 100%;
cursor: pointer;
padding: 0.2em;
background: #cce5ff;
z-index: 1;
border: solid var(--border-width) transparent;
}
/*Setting for the Footer */
.footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2020, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.