WebLab-Projekt: Bauhaus100 Jubiläum 2019

Bauhaus100 im WebLab

Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 sind Anja Preusse und Sarah Gehrmann vom WebLab an der Konzeption und Realisation von multimedialen Angeboten für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum beteiligt. In Kooperation mit der Abteilung Design und Medien und dem August Kestner Museum hat das WebLab ein kleines interaktives Spiel als Progressive Web App (PWA) mit HTML5 und JavaScript entwickelt, bei dem Tänzerinnen unterschiedliche Bauhaus-Kostüme angezogen werden können:

Amy Linh Hoang hat ihre Bachelorarbeit mit dem Titel “Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums” bereits 2018 abgeschlossen und ein sehenswertes, interaktives Storytelling mit dem Titel “Oscar Schlemmers Weg zum Bauhaus” mittels JavaScript, CSS3 und HTML5 erstellt.

Im Sommersemester 2018 sind über eine Lehrkooperation zwischen den Abteilungen Design und Medien und Information und Kommunikation der Fakultät 3 im Rahmen des Kurses “Entwicklung von Multimediasystemen 2” (Leitung Alexandra Panzert und Viktor Eisenstadt) weitere digitale und interaktive Angebote zum Thema Bauhaus entstanden wie z.B. die Folgenden:

Modulverantwortliche und Initiatorin der WebLab-Bauhaus-Kooperation ist Prof. Steinberg.

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza

Alina Finger hat in ihrer Bachelorarbeit im Studiengang Informationsmanagement (Hochschule Hannover) am Beispiel der Expo Plaza gezeigt, wie anschaulich ein virtueller Rundgang einen ersten Eindruck eines Ortes oder eines Gebäudes vermitteln kann. Insbesondere für die Erstorientierung an unbekannten Orten oder um sich einfach erst einmal umzuschauen sind virtuelle Rundgänge eine gute Idee.

Alina hat bei ihrem virtuellen Rundgang mit Kolor Panotour Pro, PTGui Pro für Videostitching sowie einer Canon 6D Kamera samt Fisheye Objektiv, Leveler, Stativ und Rotator gearbeitet. Das Equipment wurde vom WebLab bereitgestellt und kann gern für weitere virtuelle Rundgänge ausgeliehen werden. Einzelheiten zur Kamera-Ausrüstung und nötigen Arbeitsschritten finden Sie hier in Alinas Bachelorarbeit.

Viel Spaß beim Erkunden der Expo Plaza!

Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza
Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza

Tutorial: Ein mobiles Hamburger Menü

Hamburger Menü

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.

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten “HOME”, “ABOUT”, “BLOG” und “CONTACT” sind zu sehen. Rechts neben dem Menüpunkt “ABOUT” ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML
<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>
CSS
.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}
JavaScript
$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben  0deg und  -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

Tutorial: Registrierungs- und Loginformular mit jQuery

Login und Registrierungsformular

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.

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt,  welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine “echte” Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.

WebLab-Portfolio: Rundum Informationsmanagement

In einigen Lehrveranstaltungen haben wir uns mit der medialen Aufbereitung von Inhalten rundum den Studiengang Informationsmanagement befasst. Von Videos, was Informationsmanagement überhaupt ist oder den Kompetenzfeldern bis zu interaktiven Storytellings zum studentischen Leben oder Infografiken mit JavaScript findet ihr hier in unserer bisherigen Sammlung.

Progressive Web Apps für IM: Geschichte des Studiengangs Informationsmanagement

Geschichte des Studiengangs Informationsmanagement Autoren: Alina Balandis,  Aline Brun, Rebecca Poets und Leonie Weber PWA: Geschichte des Studiengangs Informationsmanagement Quellcode Idee/Zielsetzung Die Progressive Web App (PWA) soll Interessierten die Geschichte des Studiengangs Informationsmanagement an der Hochschule Hannover näher bringen. Dabei kann zwischen drei Menüpunkten ausgewählt werden. Neben einem virtuellen Rundgang wird ebenfalls durch einen Zeitstrahl …

1 Kommentar

Videos rundum IM: Vormerkung Stabi Bremen

Vormerkung Stabi Bremen Autoren: Tore Hoffmann und Jacob Radel Arbeitsschritte in der Produktion: Zur Ideenfindung zum Thema Vormerkung in einer Bibliothek wurde zunächst über Inhalte in einem Brainstorming nachgedacht. Die möglichen Tools wurden auf Ihre Animationsmöglichkeiten und allgemeine Tauglichkeit geprüft. Die Hintergrundmusik wurde aus Programm Powtoon verwendet. Um die Inhalte in das Video einfügen zu …

0 Kommentare
Funktion Campus Card

Videos rundum IM: Die Funktionen der CampusCard

Die Funktionen der CampusCard (für Studierende der HSH) Autoren: Sarah Büchting und Antje Pellowski Kurzbeschreibung In unserem Video beschreiben wir  die Funktionen der Campuscard. Wir stellen Martina, eine Studierende der Hochschule Hannover vor und erklären anhand dieses Beispiels die Funktionen der CampusCard. Die Informationen dazu entnahmen wir der Homepage der Hochschule (https://www.hs-hannover.de/it/services/stud/fhhcard). Konzept Unser Video …

0 Kommentare
Kurzeinführung Bibliothekskatalog

Videos rundum IM: Kurzeinführung in den Bibliothekskatalog

Kurzeinführung in den Bibliothekskatalog-ein Lernvideo Autor: Carina Dony Das Video soll einen Kurzüberblick in den Bibliothekskatalog der Hochschule Hannover geben. Dazu wird eine Beispielrecherche erläutert. Die Bildschirmaktionen werden aufgezeichnet und durch eine Audiospur erläutert. Programme Das Storyboard wurde in einer Excel-Tabelle erfasst und Bild der Campuscard wurde mit GIMP bearbeitet. Ausgangsmaterial war meine gescannte Campuscard. …

0 Kommentare
ICMS HsH

Videos rundum IM: iCMS System Hochschule Hannover

iCMS System Hochschule Hannover Autor: Dominic Funk Idee: Das Erklärvideo soll allen Studierenden helfen, Ihre Termine aus dem iCMS System richtig darstellen zu lassen, als PDF herunterzuladen oder in die jeweiligen Systeme exportieren bzw. importieren zu können. Als beste Darstellung wurde sich für die Screenview-Variante entschieden, um die einzelnen Schritte im Stundenplansystem „hautnah“ zeigen zu …

0 Kommentare
Expo Plaza

Videos rundum IM: “Mit der Bahn zur Hochschule – vom Kröpcke zum Expo Plaza”

“Mit der Bahn zur Hochschule – vom Kröpcke zum Expo Plaza” Autor: Marisa Kaminski Konzept Das Thema meines Erklärvideo lautet „Mit der Bahn zur Hochschule – vom Kröpcke zum Expo Plaza“ und beschreibt den Weg mit der Straßenbahnlinie 6 vom „Kröpcke“ zur Endhaltestelle „Messe Ost“ und von dort aus den Fußweg zur Hochschule am Expo …

0 Kommentare
Campus Expo Plaza

Videos rundum IM: Campus Expo Plaza

Campus Expo Plaza Autoren: Céline Schmelzer und Yannik Faulhaber Idee Die Idee für das Video war, den Campus der Fakultät III der Hochschule Hannover übersichtlich darzustellen und Erläuterungen zu den Räumlichkeiten der einzelnen relevanten Gebäude zu geben. Ursprünglich sollte der Campus aus Legosteinen nachgebaut werden, jedoch stellte sich die Umsetzung als sehr zeitaufwendig heraus. Deshalb …

0 Kommentare
Einführung Bachelor Informationsmanagement

Videos rundum IM: Einführung Bachelor Informationsmanagement

Einführung Bachelor Informationsmanagement Autoren: Anthony Stevenson und Florian Lindmüller Idee Unsere Idee war ein Animiertes Video zum Thema Informationsmanagement an der Hochschule Hannover zu gestalten. Dabei sollten alle vermittelnden Kern-Kompetenzen transparent gemacht, sowie ein keiner Ausblick in eine mögliche berufliche Zukunft gegeben werden. Zielsetzung Die Zielsetzung beinhaltete darauf aufbauend ein fertiges Vorstellungsvideo, dass man vor …

0 Kommentare
Stakeholder - Erklärung

Videos rundum IM: Erklärvideo – Was sind Stakeholder?

Erklärvideo – Was sind Stakeholder? Autoren: Rabea Langholz Idee/Zielsetzung Meine Idee und Zielsetzung war es einen studiengangsbezogenen Fachbegriff zu erklären. Ich habe mich deshalb für die Art eines Erklärvideos entschieden. Nachdem ich den Begriff „Stakeholder“ für mein Video ausgewählt hatte, begann ich mit der Recherche nach Informationen. Darauffolgend erstellte ich eine Mindmap, in der ich …

0 Kommentare
1. Semester Informationsmanagement

Videos rundum IM: Das erste Semester – Informationsmanagement

Das erste Semester – Informationsmanagement Autoren: Sabrina McElhanon und Lena Irmler Idee Wir wollten das erste Semester unseres Studiengangs auf emotionaler Basis darstellen und nicht die Studieninhalte zeigen. Unser Grund war die Annahme, dass viele Gruppen die Studieninhalte thematisieren würden. Wichtig war für uns die Prüfungsphase, welche eine große Veränderung zu dem uns bekannten Schulalltag …

0 Kommentare
Callums Legofilm

Videos rundum IM: Callums Legofilm

Callums Legofilm Autoren: Callum Berlin Konzept Zunächst wusste ich nicht, was für einen Film ich erstellen sollte, da ich das Studium in irgendeiner Weise einbinden musste. Ich wollte von Anfang an einen Legofilm erstellen, weil ich schon vorher testweise Legofilme gedreht habe. Als ich dann erfahren habe, dass der Alltag eines Studenten auch dargestellt werden …

0 Kommentare
Videos rundum IM: Ein Tag an der Expo Plaza

Videos rundum IM: Ein Tag an der Expo Plaza

Ein Tag an der Expo Plaza Autoren: Laura von Urff und Vanessa Brüning Idee Mit dem Film zeigen wir einen Tag  aus der Sicht eines Studenten an der Hochschule Hannover. Dabei gehen wir auf den etwas weiteren Anfahrtsweg ein, das Essen in der Mensa und die Umgebung des Expo-Geländes. Die Szenen des Films zeigen die …

0 Kommentare
Neue Tagesschließfächer an der Hochschule Hannover

Videos rundum IM: Neue Tagesschließfächer an der Hochschule Hannover

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Videos rundum IM: Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

Was ist Informationsmanagement? Autor: Kira Neukam Idee Die Idee hinter dem Film war, eine kurze, verständliche Beschreibung des Studiengangs Informationsmanagement und dessen Inhalte wiederzugeben. Bei der Animationstechnik wurde, eine einfache Legetechnik mit Bildern verwendet. Die dazu benötigten Zeichnungen habe ich selber per Hand angefertigt. Mit diesen einfach gehaltenen Bildern sollten wichtige Sachverhalte und Merkmale visuell …

0 Kommentare
Die Funktionen der CampusCard

Videos rundum IM: Funktionen der CampusCard der HsH

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos …

0 Kommentare
Kompetenzfelder im Studiengang IM

Videos rundum IM: Kompetenzfelder im Studiengang IM

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos …

0 Kommentare
HsH - Rundgang

Videos rundum IM: HsH-Rundgang

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Students Insider

Videos rundum IM: Students insider

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Effizienz im Studium

Videos rundum IM: Effizienz im Studium

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Lego Python

Video rundum IM: Lego Python

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Dein Weg zum Bachelor

Videos rundum IM: Dein Weg zum Bachelor

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Fernleihe in der Bibliothek

Videos rundum IM: Was ist eigentlich die Fernleihe?

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Hochschulalltag_hsh_hannover_im

Videos rundum IM: Highlight des Hochschulalltags

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
hsh_informationsmanagement_expo_campus

Videos rundum IM: Der Campus an der Hochschule Hannover – Fakultät III

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare

Stop-Motion: Post-Its und Gaming

Im Rahmen des Kurses “Entwicklung von Multimediasystemen I” (Studiengang Informationsmanagement, Fakultät 3, Hochschule Hannover) erstellten Philipp Höltermann und Christian Koch ein Stop-Motion-Video. Das Video greift Videospielklassiker und Gaming-Neuheiten mittels Post-Its auf. Erstellt wurde das Video nach klassischer Stop-Motion-Technik mit Adobe Photoshop und Premiere.

0 Kommentare
WebLab-HsH_Interaktives_Memory_Spiel

WebLab-Projekt: Interaktives Memory-Spiel für IM-Studiengang

Im Rahmen der Ideen-Expo wurde von der Hochschule ein Kartenspiel gedruckt, das an potentielle Studieninteressierte ausgehändigt werden soll. Damit dieses Kartenspiel jedoch nicht nur analog verfügbar ist, hat das WebLab der Hochschule Hannover eine digitale Version des Spiels mittels JavaScript entwickelt. Als erstes haben wir eine vorläufige Spieloberfläche geschaffen, auf der momentan im oberen Bereich …

0 Kommentare

Stop-Motion: Imagination – Das Entstehen einer Zeichnung

Das Stop-Motion-Video wurde von Sebastian Brielich, Sebastian Bartsch und Henning Otto erstellt. Die Ersteller schreiben zu ihrer Idee: “Die grundlegende Idee hinter „Imagination“ soll das Entstehen einer Zeichnung vorweisen, aus der schließlich eine reale Handlung hervorgeht. Nach Ablauf der realen Handlung soll schließlich wieder die Wirklichkeit zur „Imagination“ werden, in dem die Darsteller aus dem Bild …

0 Kommentare
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 …

0 Kommentare

Videos rundum IM: Vom Hauptbahnhof zur Expo Plaza

Die Fakultät III der Hochschule Hannover, zu der der Studiengang Informationsmanagement und auch das WebLab gehören, liegt nicht zentral in der Innenstadt, sondern etwas weiter außerhalb, an der Expo Plaza. Um neuen Studierenden und Besuchern die erste Anfahrt zu erleichtern und zu veranschaulichen haben wir hier ein kurzes Video für euch, das den Weg vom …

0 Kommentare
Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

Was ist eigentlich Informationsmanagement? Diese Frage stellt sich mit Sicherheit jeder, der zum ersten Mal von dem Studiengang hört. Die Informationsmanagementstudentin Frieda Josi hat sich dieser Frage für die Prüfungsleistung des Moduls Wissensverarbeitung von Audio- und Bildinformationen angenommen und ein einminütiges Informationsvideo angefertigt, das sich mit der Definition, den Aufgaben und dem Einsatzgebiet von Informationsmanagement …

2 comments
Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

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 …

0 Kommentare

WebLab-Portfolio: BestOf studentischer Arbeiten

In diesem Portfolio-Bereich findet ihr studentische Arbeiten aus dem Studiengang Informationsmanagement, die besonders gut gelungen sind. Hier veröffentlichen wir sehr gute Ergebnisse aus Lehrveranstaltungen und herausragende Bachelorarbeiten. Bislang findet ihr hier Arbeiten aus dem Kompetenzfeld Web Information Management mit Schwerpunkt auf interaktive Medien und Webentwicklung. Wir hoffen, dass wir in Zukunft auch Arbeiten aus anderen Kompetenzfeldern und Schwerpunkten hier veröffentlichen dürfen.

Falls ihr einen Vorschlag für eine BestOf-Arbeit habt, freuen wir uns, wenn ihr euch meldet.

 

BestOf Bachelor: Gamification-Plugins für WordPress

Christoph Breitsprecher hat eine interessante Bachelorarbeit mit dem Titel “Evaluation von Gamification-Plugins für WordPress” im Studiengang Informationsmanagement verfasst. Dabei hat er detailliert untersucht, welche Möglichkeiten WordPress in Form von Plugins bietet, einfache Gamification-Mechanismen wie Punktesysteme oder Bestenlisten in WordPress zu integrieren. Auch Grundlagen zu Gamification erklärt Christoph anschaulich. Mehr finden Sie in der Pdf-Version seiner …

1 Kommentar

MM-SYS-2: Der Architekturstil Bauhaus

Autor: Arlind Ukaj Die fertige Arbeit finden sie hier. Konzept Als Grundkonzept dient ein One-Pager, die Seitenbesucher mit intuitiven Mitteln durch die Seite zu führen. Thematisch informiert die Seite über die wichtigsten Personen und Bauwerke des Bauhauses. Desgin Das Template der Seite ist eine komplette Eigenkreation und inspiriert sich anderen Bauhaus Webseiten sowie Anlehnung an …

2 comments

MM-SYS-2: Bauhaus-Ereignisse 1919-1933

Autoren: Amelie Andresen & Artjom Arustamov Die fertige Arbeit finden sie hier. Konzept Die Seite zum “Bauhaus-Ereignisse 1919 – 1933” kann in drei Teilbereiche aufgeteilt werden: Header mit integriertem Slider und Navigation Die Hauptseite mit dem vertikalem Zeitstrahl Footer mit den Direktoren One Pager Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den …

0 Kommentare
Onepager

Tutorial: Informativer OnePager für Austauschstudenten

Tutorial: Informativer OnePager für Austauschstudenten Autor: Cagla Bacaksiz Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit …

0 Kommentare
Storytelling Bauhaus100 von Amy Hoang

BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum

Amy Linh Hoang hat ihre sehr gute Bachelorarbeit im Studiengang Informationsmanagement mit dem Titel “Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums” abgeschlossen und ein sehenswertes, interaktives Storytelling mittels JavaScript, CSS3 und HTML5 erstellt. Der Titel des Storytellings lautet “Oscar Schlemmers Weg zum Bauhaus“. Amys Bachelorarbeit ist als Kooperation der Abteilungen “Information und Kommunikation” und “Design …

0 Kommentare
Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Alina Finger hat in ihrer Bachelorarbeit im Studiengang Informationsmanagement (Hochschule Hannover) am Beispiel der Expo Plaza gezeigt, wie anschaulich ein virtueller Rundgang einen ersten Eindruck eines Ortes oder eines Gebäudes vermitteln kann. Insbesondere für die Erstorientierung an unbekannten Orten oder um sich einfach erst einmal umzuschauen sind virtuelle Rundgänge eine gute Idee. Alina hat bei ihrem virtuellen Rundgang …

0 Kommentare
Funktionale Animation und Infografik

Tutorial: Informationsmanager auf dem Arbeitsmarkt

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 …

1 Kommentar

BestOf: Funktionale Animationen (Multimediasysteme II / Medienintergration SoSe 2017)

Im Rahmen der Kurse Entwicklung von Multimediasystemen II und Medienintegration (Studiengang Informationsmanagement, Prof. Dr.-Ing. Steinberg) im Sommersemester 2017 entstanden einige funktionale Animationen durch die Studierenden. Anforderung an die Arbeiten war, keine rein dekorativen Animationen zu erstellen, sondern sich kleinen, abgeschlossenen, funktionalen Aspekten der Nutzerinteraktion zu widmen. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Ein paar der …

2 comments
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 …

0 Kommentare
Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

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 …

0 Kommentare

BestOf: WWW-Techniken I Wise 2016/17

Im Wintersemester 2016/17 fand für die Erstsemester des Studiengangs Informationsmanagement der Kurs WWW-Techniken I statt. Die Prüfungsleistung bestand darin, eine eigene Website mit HTML5 und CSS3 zu entwickeln und auf dem eigenen Hochschulwebspace zu veröffentlichen. Die Meisten haben im Rahmen des Kurses ihre erste Website überhaupt erstellt und waren absolute HTML-Newbies. Umso beeindruckender, dass so viele …

0 Kommentare

Tutorial: Multiselect Dropdown Liste mit Semantic UI

Dropdown Multiselect List mit Semantic UI

Eine Multiselect Dropdown Liste

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

Autor: Franziska Braun

Tutorial

Die Multiselect Dropdown-Listen werden in Online-Formularen (Bestellungen, Kontaktformulare) oder Online-Fragebögen verwendet. In diesem Beispiel können Lehrveranstaltungen ausgewählt werden. Die Anzahl ist auf maximal 3 Lehrveranstaltungen begrenzt.

Eine HTML Dropdown-Listen allein ist allerdings nicht nutzerfreundlich. Durch CSS und Javascript kann die Nutzerfreundlichkeit dieser einfachen Web-Komponente optimiert werden. Die verbesserte Nutzerfreundlichkeit der Web-Komponte in diesem Beispiel ist mittels CSS und Webanimation mithilfe der Semantic UI realisiert. Ziel ist die effektiviere Interaktion des Nutzer mit folgenden Web-Animationen:

  • Visuelles Feedback bei Nutzereingabe
  • Micro Interaktionen
  • Visuelle Zustandsübergänge

Da die realisierten Web-Animationen zur Verbesserung der Interaktion und zur User Experience dienen, sind sie als funktionale Animation einzuordnen.

HTML

HTML-Seite (index.html) beinhaltet die Dropdown-Liste, die mit den Tag  <select> eingeleitet wird. Innerhalb dieses Tags sind die Auswahloptionen der Liste mit dem HTML Tag <option> festgelegt.
Außerdem sind in die HTML Seite innerhalb des HTML Tag <head> folgende externe CSS-Dateien mit dem Tag <link> eingebunden:

Darüber hinaus beinhaltet die HTML folgende externe Script-Bibliotheken, jeweils im Tag <script>:

Javascript

Die Javascript-Datei (index.js)  dient zum Aufruf der Funktion multi-select für die Dropdown-Liste (siehe auch Multiple Selections). Die Funktion ist erweitert um {maxSelections: 3}, damit aus der Dropdown-Liste nur max. 3 Optionen ausgewählt werden können (siehe auch Maximum Selection).

CSS

Die CSS-Datei (index.css) beinhaltet Layoutänderungen, die für eine bessere Nutzerfreundlichkeit erachtet wurden. Als Farbschema sind zwei Material Farbcodes ausgewählt.

Bespiele für Änderungen:

Unnötige Farbeffekte von beispielweise :focus und :hover vereinheitlicht.

Farbänderung des vorhandenen Font Awesome Icons fa-caret-down bei :hover.
.ui.selection.dropdown > .dropdown.icon:hover
{color:#6b9b37;}

Einfügen des Font Awesome Icons fa-caret-up bei aktiver Dropdown-Liste.
.ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon::before
{content: '\f0d8';color: #4b636e;}

Änderung der Farbe der ausgewählten Optionen (label) bei aktiver und inaktiver Dropdown-Liste.
.ui.visible.selection.dropdown > .label,.ui.selection.dropdown .label
{background-color: #a7c0cd; color: #fff;  box-shadow: 0 0 0 1px #4b636e inset;}

Änderung der Farbe des Delete Icons bei Mouse-Hover.
.ui.label > .delete.icon:hover
{color: red;}

multiselect-dropdown-list-semantic-ui.zip

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

Stop-Motion: Post-Its und Gaming

Im Rahmen des Kurses “Entwicklung von Multimediasystemen I” (Studiengang Informationsmanagement, Fakultät 3, Hochschule Hannover) erstellten Philipp Höltermann und Christian Koch ein Stop-Motion-Video. Das Video greift Videospielklassiker und Gaming-Neuheiten mittels Post-Its auf. Erstellt wurde das Video nach klassischer Stop-Motion-Technik mit Adobe Photoshop und Premiere.