Tutorial: Interaktive Karte – Kiosktour Hannover

Kiosktour durch Hannover

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Interaktive Karte – Kiosktour Hannover

Autor: Marina Cordes und Catarina Schultz

Idee

Wir haben uns zu Anfang dieses Projekts gefragt, was das Studentenleben in Hannover besonders macht und was ein “Ersti” der Hochschule Hannover unbedingt für seine zukünftige Zeit in dieser schönen Stadt mitnehmen sollte. Sofort kam uns das Alleinstellungsmerkmal der höchsten Kioskdichte in Hannover in den Sinn. Ein absolut typischer Charakter unserer Landeshauptstadt und Basis für eine kostengünstige Freizeitaktivität für Studenten.

Also war das Ziel klar: Wir möchten eine geführte Kiosktour in Form einer Google-Karte mit zusätzlichen Informationen und Tipps erstellen.

Welcher Weg und welche Highlights für einen ersten durstfreien Spaziergang geeignet sind soll mithilfe einer Google-Karte aufgezeigt werden und durch Pop-up-Fenster mit Informationen einen zusätzlichen Mehrwert bieten.

 

Umsetzung und Erläuterung

Als Grundlage dient uns eine auf Codepen zur Verfügung gestellte Google-Karte. Diese Karte beinhaltet bereits eingebetteten Code für rote Map-Marker, die mittels der Angabe von den Koordinaten unsere Zwischenstopps einzeichnet und mit einer Legende, welche auf der rechten Seite der Karte eingeblendet wird, verbindet.

Nach und nach setzten wir sieben Markierungen (siehe Abbildung 1), die durch die aufsteigende Beschriftung mit Zahlen die Route verdeutlichen. Die angelegte Legenden-Box auf der rechten Seite zeigt, welches Ziel sich hinter welcher Nummer verbirgt. Durch einen Hover-Effekt auf den eingetragenen Zielen, wird farblich visualisiert, zu welchem Standort Informationen angezeigt werden würde, sollte der Nutzer hier klicken. Der Klick auf ein Ziel in der Legende öffnet den Informationskasten über dem Standort auf der Karte. Nicht nur über die Legende auf der rechten Seite, sondern auch beim Klick auf einen der Marker wird der Informationskasten geöffnet.

Screenshot - Beschreibung und Koordinaten von 2 Zwischenstopps
Abbildung 1: Beschreibung (grün) und Koordinaten (orange) von 2 Zwischenstopps in JavaScript (Screenshot aus Codepen)

Ein weiterer Hover-Effekt auf dem geöffneten Informationskasten lässt diesen größer werden, sodass der gesamte Text lesbar ist. Der Kasten ist vorerst etwas kleiner, um beim Erscheinen auf der Karte nicht zu viel von ihr zu verdecken. Außerdem ändert sich die Hintergrundfarbe des Kastens von einem etwas dunkleren zu einem helleren grün während des Hochskalierens, damit für das Auge des Nutzers noch klarer wird, dass sich der Inhalt verändert.

Auf der linken Seite der Karte ist ein weiterer, grüner Informationskasten angelegt, welcher als Überschrift und Einleitung in die Seite dient. Damit dieser auch als erstes gelesen und beachtet wird, haben wir einen Jumping-Effekt hinzugefügt, sodass der gesamte Kasten kontinuierlich leicht auf und ab schwebt. Dazu verwendeten wir Teile aus dem Codepen von Bandula Gamage.

Wir haben uns bei der Gestaltung für den Farbbereich “grün” entschieden, da die grüne Farbe auch bei der Google-Map aufgenommen wurde. So ergibt es ein harmonisches Bild und der Nutzer kann sich leichter orientieren, da allein die Marker in einem auffallenden rötlichen Ton gestaltet sind.

 

Code

Bei der Umsetzung der Map für eine Kiosktour haben wir HTML, CSS und JavaScript angewandt. Jegliche Styles und Effekte sind im CSS-Code beschrieben. Markierungen auf der Karte und die Legende sind mit JavaScript erstellt und auch mit CSS gestylt.

Zu aller erst haben wir die Website-Struktur im HTML-Teil bearbeitet. Hier war bereits eine Klasse mit dem Namen “map” vorhanden. Für die Informationsbox an der linken Seite fügten wir eine ID mit dem Namen “box” hinzu. Diese Box sprechen wir im CSS-Teil an und definierten diese mit Angaben wie zB. Viewport-Breite, Viewport-Höhe, Hintergrundfarbe im RGBA Farbraum etc..

Den oben genannten Jumping-Effekt der Box fügten wir mit “animation: jump 2s infinite ease-in-out” ein. In dieser Zeile wird angegeben, dass die Box unendlich oft im zwei Sekunden Takt hoch und runter hüpft. Des Weiteren wird der Übergangseffekt mit einem langsamen Start und Ende spezifiziert. Durch das Einbringen von “-moz-” und “-webkit-” ist gegeben, dass der Effekt in den Webbrowsern Safari, Google Chrome und Mozilla Firefox richtig angezeigt wird.
Die Klasse “.gm-style-iw” gibt alle Styles und Effekte der Informationskästen wieder, welche Aufklappen, wenn man auf einen der Marker klickt. Die Klasse “.gm-style-iw:hover” zeigt die Styles und Effekte an, wie sich der Informationskasten verhält, wenn man mit dem Cursor über den Kasten fährt.

Hier können die Codes und das Ergebnis der interaktiven Kiosktour angesehen werden. Abbildung 2 zeigt einen Ausschnitt unseres Endergebnisses.

Screenshot aus Codepen: Pen zur Kiosktour in Hannover
Abbildung 2: Pen zur Kiosktour in Hannover (Screenshot aus Codepen)

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Funktionale Animation und Infografik

Eine Infografik als funktionale Animation

erstellt im Rahmen des Moduls “Medienintegration” im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Frieda Josi

 Tutorial:

Einsatzzweck und Einordnung in Animationsart

Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit Hilfe der Animation wird das visuelle Erfassen der einzelnen Branchen, in denen Informationsmanager arbeiten, erleichtert. Die Daten, die für diese Infografik verwendet wurden, stammen aus der Absolventenbefragung 2016 von Prof. Dr. Jutta Bertram. Diese Infografik ist ein Kreisdiagramm und besteht aus Micro-Interaktionen wie z.B. Click, Hover und Mouse out und verschiedenen Übergängen (Transitions).

Verwendete Bibliotheken, APIs, weitere Ressourcen

HTML5
HTML5-Seite, die die benötigten Container und Texte (Beschriftungen der Branchen und der Prozentsätze) für die Infografik, bereitstellt.

CSS3
In der CSS3 Datei sind die animierten Übergänge: transition-delay, transform-origin, transition: opacity, transform:translate(), transition-duration, .button:hover für die Infografik und für den „Animation“- Button angelegt. Ebenso die Formatierungen für  HTML-Seite, Texte, Button und Infografik.

JavaScript
In der JavaScript-Datei befinden sich die Funktionen für das Ausblenden der Infografik: .addEventListener(’click’, function(e) …) und das Einblenden der Infografik: setTimeout(function()).

Verwendete Vorlagen

Animationsvorlage
Die Vorlage zu dieser funktionalen Animation wurde von Joshua Dorenkamp auf codepen.io zur Verfügung gestellt. Für das Kreisdiagramm hat er acht Teile verwendet (siehe Abb.). Link zum Original

Original von Joshua Dorenkamp

Buttonvorlage
Die Gestaltung des Buttons „Animation“”wurde mit einer Vorlage von w3schools.com erstellt. Link zum Original.

Vorgenommene Anpassungen an der Grafik

Zu den acht vorhandenen Teilen des Kreisdiagrammes wurden noch weitere acht hinzugefügt.

Für jeden der 16 Teile in der CSS-Datei:

1. Je eine farbige Fläche und ihre Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

2. Je eine Größe einer farbigen Fläche:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

3. Je eine Linie zu ihrer farbigen Fläche hin:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

4. Das Erscheinen der farbigen Fläche:
Wird unter “Änderungen der Grafik im Detail/Drehung” aufgezeigt.

5. Das Erscheinen der Linie:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

6. Das Erscheinen der Beschriftung:
[class^=”text-“].text-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

7. Die Formatierung der Beschriftung:
.text-lbl  {
font-size: 11px;}

Für jeden der 16 Teile in der HTML-Datei:

Je eine Prozentzahl (z.B. 20,50%) und je eine Beschriftung (z.B.Wissenschaftliche Bibliothek).
 <svg viewbox=”0 0 650 500″>
<circle class=”outline” r=”100″ cx=”210″ cy=”200″ />

<circle class=”pie-1″ r=”100″ cx=”210″ cy=”200″ />
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

In der JavaScript-Datei wurden keine Änderungen vorgenommen.

Vorgenommene Anpassungen am Button

1. Formatierung des Buttons
.button {
background-color: white;
border: 2px solid #555555;
color: black;
padding: 7px 23px;
text-align: center;
text-decoration: none
display: inline-block;
font-size: 13px;
font-weight: bold;
margin: 0% 10%;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;}

2. Formatierung des Buttons bei Mouse over
.button:hover {
background-color: #555555;
color: white;}

Änderungen an der Grafik im Detail

Für die Fläche eines einzelnen Teils aus dem Kreisdiagramm:

Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

Größe:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

Vergrößerung bei Mouse over:
[class^=”pie”]:hover
{stroke-width: 70;
border-radius: 4px;}

Position:
Die Position wird bestimmt durch die Angabe der Drehung in der Kreislinie. Siehe oben unter „Drehung“ (stroke-dashoffset: 488; /*Abstand des dasharray Musters*/).

Für die Linie einer Zuordnung von Beschriftung und farbiger Fläche im Kreisdiagramm:

Länge, Drehung und Position in der HTML-Datei:
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />

Beschriftung und Prozentangabe im Kreisdiagramm:

Position in der HTML-Datei:
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

JavaScript-Animation

Die JavaScript-Animationen wurden, aus dem Original von Joshua Dorenkamp, unverändert übernommen.

Animation, die beim Mausklick auf den Button „Animation“ ausgelöst wird:
var btn = document.getElementById(‘toggle’); /* Button aus Zeile 14 index.html */
var wrap = document.getElementById(‘wrap’); /* Kontainer für die Tortengrafik */
btn.addEventListener(‘click’, function(e) /* Ereignisobjekt für Button “Animation” und einem einfachen Klick darauf.*/
{
wrap.className = “”; /*Ausblenden der Tortengrafik, bei Klick auf Button “Animation” */
setTimeout(function() {
wrap.className = “animated”;
},3000);
});
setTimeout(function()  /*Einblenden der Tortengrafik, beim Laden der Datei und als zweites Ereignis nach dem Klick auf Button “Animation” */
{
wrap.className = “animated”;
},1000);

Quelldateien Zip

Tutorial als PDF

Informationsmanager auf dem Arbeitsmarkt

Link zur Animation: hier

Zum Codepen

Interaktives Storytelling: Studentischer Alltag

Interaktives Storytelling: Studentischer Alltag

Das von Birte Rohden und Julian Hundertmark erstellte Storytelling zeigt einen typischen Tagesablauf eines Informationsmanagement Studenten. Für die Umsetzung wurden HTML5, CSS3, Bootstrap, JavaScript (u.a. AngularJS), Adobe Photoshop und Windows Live Movie Maker benutzt.

Hier geht’s zum Storytelling:

Interaktives Storytelling: Studentischer Alltag

Im Kurs “Ausgewählte Fragen der Medieninformatik” sind im Wintersemester 2016/17 einige gute Arbeiten entstanden. Eine davon ist ein interaktives Storytelling zum studentischen Alltag im Studiengang Informationsmanagement an der Hochschule Hannover (Expo Plaza).

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Infografik zu Informationsmanagement an der Hochschule Hannover

Im Projekt “Infografiken” (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt.

Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche wie Informationsrecht, Medienwissenschaften oder Kommunikation gefragt. Über die unterschiedlichen Größen der Themenrechtecke wird zusätzlich der prozentuale Anteil am Studium sichtbar. Bei Klick erhält man weitere Informationen zum ausgewählten Bereich.

Hier gelangt ihr zur Infografik für den Studiengang Informationsmanagement.