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 sowie Literatur über das Informationsmanagment an der Hochschule Hannover informiert.

Dabei wird eine Slideshow zur Hilfe genommen, die die Historie von der Gründung bis zur Entwicklung der heutigen Kompetenzfelder aufzeigt. Diese wird zur Illustration der Chronologie durch einen Zeitstrahl unterstützend visualisiert.

Arbeitswege

Entwurf/MockUp

Nach der Entwicklung einer grundlegenden Idee bestand der nächste Schritt darin, einige erste skizzenhafte Entwürfe und daraufhin MockUps zu einer ersten Visualisierung der Idee zu erstellen. Im Vorfeld musste überlegt werden, welche Themen und Bereiche in die PWA aufgenommen werden sollen. Die verwendeten Bilder stammen aus dem Filmarchiv Hannover sowie von der Hochschulwebsite und aus eigenen Fotos. Weiteres Bildmaterial wurde u.a. mithilfe des Adobe Illustrators erstellt. Die Bilder dienen dazu, die einzelnen Themen in der Slideshow zu veranschaulichen. Dazu wurden Informationen aus vielen verschiedenen Quellen verarbeitet.

Grundgerüst

Das Grundgerüst der PWA ist mit HTML, PHP und CSS entstanden. Dafür wurde zunächst eine index.html-Datei erzeugt, die als Basis aller weiteren Operationen diente. Sie besteht aus einem Head- und einem Bodypart. Im Head befindet sich der Titel, die Verlinkung zum Stylesheet und Metadaten, wie beispielsweise ein Hinweis auf die Autoren, das Datum und themenbezogene Schlagwörter. Diese machen es theoretisch möglich, dass die Website mit den passenden Suchwörtern von einer Suchmaschine erfasst werden kann.

    <!doctype html>
<html>
<!--Head-->
<head>
    <title>BIM Geschichte</title>
    <link rel="stylesheet" type="text/css" href="css/StyleSheetalt.css">
    <meta charset="utf-8">
    <meta name="description" content="BIM Geschichte">
    <meta name="author" content="Alina Balandis, Aline Brun, Monika Kolano, Rebecca Poets, Leonie Weber">
    <meta name="date" content="2018-11-17">
    <meta name="keywords" content="virtueller Rundgang, Informationsmanagement, BIM, Hochschule Hannover">
    <link rel="manifest" href="manifest.json"> <!-- Manifest Datei einfügen-->
    <link rel="serviceworker" href="sw.js"> <!-- Service Worker-->
    <script src="js/react.production.min.js"></script> <!--React Frameworks laden -->
    <script src="js/react-dom.production.min.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel" src="js/App.js"></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>

Der Body beinhaltet den Header mit ausklappbarem Menü zur Navigation dessen Funktionalität mit JavaScript erstellt wurde. Unter dem Header befindet sich der mit div-Containern gestaltete Hauptteil der Website, in dem sich u.a. die Slideshow befindet. Ganz unten gibt es den Footer, der einen Datumshinweis sowie einen Impressumslink beinhaltet.

Styling mit CSS

Das mit CSS generierte Stylesheet dient dem Design der Website. Die index.html-Datei enthält nur die HTML-Angaben für ein grobes Layout, welche im Stylesheet genauer definiert, angepasst und gestaltet werden.

Einsatz von Javascript

Die PWA besteht aus zwei Grundbestandteilen, die mit JavaScript realisiert wurden. Eine Slideshow, die den User visuell auf eine geschichtliche Reise rund um den Studiengang Informationsmanagement führt und ein Zeitstrahl mit den wichtigsten Eckdaten.

Die Slideshow ist in einem DIV-Container realisiert, der sich nach dem Klick auf einen Button öffnet und sich über die Website legt. Die Bilder im Slider können jeweils mit einen von zwei Pfeilbuttons an den Seiten angesehen werden. Mit dem Klick auf das “x” wird die Slideshow geschlossen.

<div class="slideshow-container" >
    <button id='display' onclick="openModal();currentSlide(1)">Virtueller Rundgang</button>
<div id="myModal" class="modal">
  
  <div class="modal-content">
  <p class="close" onclick="closeModal()">x</span>

Der Zeitstrahl wird in der App.js gerendert. Der Zeitstrahl öffnet, nachdem auf den Button geklickt wurde. Nun kann man den Zeitstrahl wieder zuklappen, in dem man auf die Jahreszahlen klickt. Damit diese Toggle-Funktion funktioniert, wurde folgender Code implementiert:

class Toggle2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isShow: false};
    this.handleClick = this.handleClick.bind(this);
  }
    
  handleClick() {
    this.setState(function(prevState) {
      return {isShow: !prevState.isShow};
    });
  }
class Toggle1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isShow: false};
    this.handleClick = this.handleClick.bind(this);
  }
    
  handleClick() {
    this.setState(function(prevState) {
      return {isShow: !prevState.isShow};
    });
  }

  render() {
    return (
      <div id="Zeitstrahl">
        <button className='control' id="display" onClick={this.handleClick}>Zeitstrahl</button>
        <div className={contentClass(this.state.isShow)}>

Mithilfe der Listenfunktion wurden die Inhalte des Zeitstrahls eingebunden und anschließend passend gestylt. Die Inhalte werden jeweils mit der “timeline-badge” voneinander abgegrenzt. Mit :before und :after wird im Stylesheet festgelegt, wie sich der Zeitstrahl nach dem Klicken verhält.

.timeline > li > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2018/19, Prof. Dr.-Ing. Steinberg, Viktor Eisenstadt) einige gute Progressive Web Apps (PWA) mithilfe des JavaScript-Frameworks ReactJS entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

 

QpLuS-IM-Projekt startet durch: Noch mehr Selbststeuerungskompetenz durch digitales Lernen

Im Rahmen des QpLuS-IM-Projekts werden die Studierenden des Studiengangs Informationsmanagement (regulär und berufsbegleitend) bei ihrer Kompetenzentwicklung durch selbstgesteuertes Lernen in digitalen Lernszenarien unterstützt. Studierende produzieren z.B. selbst digitale Lernformate und veröffentlichen Online-Inhalte zu ihren Kursergebnissen, die von den Studierenden nachfolgender Jahrgänge als Best Practice-Beispiele zum selbstgesteuerten Lernen genutzt werden. Mit der Bereitstellung von geeigneten Selbstlernmaterialien und durch tutorielle Betreuung werden die Studierenden in ihrer Selbststeuerungskompetenz im Bereich des digitalen Lernens unterstützt.

Im WebLab wird dieses Konzept bereits seit 2017 fortlaufend erprobt und in Lehrveranstaltungen der Medieninformatik wie Praktische Informatik oder Multimediasysteme im Kompetenzfeld Web Information Management erfolgreich eingesetzt. Im Rahmen von QpLuS-IM wird das WebLab-Angebot weiterentwickelt, augedehnt und verstetigt. Weiterhin unterstützen studentische Hilfskräfte des WebLabs Lehrende und Studierende bei technischen oder didaktischen Fragestellungen zu digitalen Lernlösungen.

Übergeordnetes Ziel von QpLuS-IM ist, angehende Informationsmanager*innen bestmöglich auf die sich ständig und schnell wandelnde, immer digitaler werdende Arbeitswelt vorzubereiten und dafür nötige Kernkompetenzen noch mehr zu fördern.

Ab Juni starten wir richtig durch und unser neuer Projektmitarbeiter Gerrit Wucherpfennig unterstützt uns zum Glück dabei. Zusätzlich brauchen wir aber noch Unterstützung von studentischen Hilfskräften, um in den nächsten drei Jahren gemeinsam noch viel mehr digitales selbstgesteuertes Lernen und Arbeiten über z.B. E-Portfolios, interaktive Online-Inhalte und Lernvideos für unseren Studiengang zu ermöglichen.

Hintergründe und Neues zum QpLus-IM-Projekt finden Sie auf unserer Projektwebsite.

Mehr Infos zu den Aufgaben als studentische Hilfskräfte für QpLuS-IM finden Sie dort ebenfalls.

Wr freuen uns auf Sie!

App “Biennale Map Venice” jetzt für Android und iOS

Biennale Map Venice App WebLab

Studierende aus dem 6. Semester im Studiengang Informationsmanagement entwickeln zurzeit die App Biennale Map Venice im Rahmen eines Projekts weiter, damit sich Besucher auf der Biennale in Venedig besser zurecht finden und zum richtigen Zeitpunkt am richtigen Ort sind. Hauptentwickler der App ist Leon Rostek vom WebLab. Aline Brun hat als Korrespondentin vor Ort dafür gesorgt, dass nun alle Ausstellungen mit Standort, Foto und Öffnungszeit auf der Karte zugänglich sind.

Die App findet Sie im Google Play Store und im Apple App Store unter dem Titel „Biennale Map Venice“.

Biennale Map Venice bei Instagram

Biennale Map Venice Website

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 Arbeit.

Bachelorarbeit Gamification-Plugins für WordPress von Christoph Breitsprecher (2018)

Erstgutachter: Prof. Dr.-Ing. Monika Steinberg
Zweitgutachter: Prof. Dr. Thomas Schult

Progressive Web Apps für IM: Fragebogen zur Auswahl des Studienschwerpunkts

Fragebogen zur Auswahl des Studienschwerpunkts

Autoren: Lukas Wojtke, Cedric Herrmann, Niklas Salge und Sharam Etemadi

PWA-Fragebogen zur Auswahl des Studienschwerpunktes

Grundidee

Die ursprüngliche Idee war eine Art Umfrage mit anschließender Auswertung. Im Verlauf der weiteren Ausarbeitung des Projektes wandelte sich die Zielsetzung in einen Selbsttest, welcher nach Beendigung unverzüglich ausgewertet wird. Das Ziel des Fragebogens ist es, mittels einer Handvoll speziell ausgewählter Fragen herauszufinden, welcher Schwerpunkt des Studiengangs Informationsmanagement für den Probanden am Besten geeignet ist. Die Auswahl des spezifischen Schwerpunktes zu Beginn des Studiums kann problematisch sein, deswegen dient der Fragebogen als kleine Entscheidungshilfe.

Mockup

Für die Visualisierung wurde ein klassisches Fragebogen-Layout ausgewählt. Hierbei wird ein warmer Hintergrund gewählt, sowie verschiedene Farben für die einzelnen Antwortmöglichkeiten.

Das Mockup verdeutlicht die erste Visualisierung des Fragebogens

Die Umsetzung

Fragen

Zunächst wurde ein Fragebogen angefertigt. Dieser umfasst zehn individuelle Fragen mit jeweils drei Antwortmöglichkeiten. Die Antworten lassen sich immer in die Kategorien “Medien”, “Intern” und “Bibliotheken” zurückführen.

Programmierung

Nach Einschätzung des benötigten Programmieraufwandes und den damit verbundenen Features trat eine Entwicklung mit React JS als effektivste Lösung hervor. React bietet hierbei eine eine relativ steile Lernkurve und einen einfachen Einstieg. Außerdem ist ein vereinfachter Aufbau der Anwendung durch den Kern von React und seine Komponenten möglich. Dieser Fokus auf die Komponenten erleichtert zusätzlich die Frontend-Entwicklung, da einzelne Teile der Anwendung optimiert werden können, ohne die gesamte Application überwachen zu müssen. Letztendlich resultiert daraus eine vereinfachte Gruppenarbeit, da sich jeder  auf “seine” Komponente konzentrieren kann.

Während der Programmierung wurden drei verschiedene Variablen erstellt, welche sich mit den unterschiedlichen Antworten des Users hochzählen. Dies wird für die Ausgabe der Ergebnisse benötigt.

class Knopf extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fragenID: 0,
      counterb1: 0,
      counterb2: 0,
      counterb3: 0
    }; //aktuellen Status der App definieren

    this.Klick1 = this.Klick1.bind(this);
    this.Klick2 = this.Klick2.bind(this);
    this.Klick3 = this.Klick3.bind(this);
    this.Prozentzahlen = this.Prozentzahlen.bind(this);
  } //Funktionen zu dem Keyword this binden

  Klick1() {
    this.setState({
      counterb1: this.state.counterb1 + 1,
      fragenID: this.state.fragenID + 1
    });
  }
  Klick2() {
    this.setState({
      counterb2: this.state.counterb2 + 1,
      fragenID: this.state.fragenID + 1
    });
  }
  Klick3() {
    this.setState({
      counterb3: this.state.counterb3 + 1,
      fragenID: this.state.fragenID + 1
    });
  }

Zur weiteren Strukturierung und dem Erhalt der Übersichtlichkeit des Codes gehörte es außerdem, die einzelnen Fragen in eine .json-Datei auszulagern. Diese werden durch einen Import

import fragen from "./fragen.json";
[
  {
    "ID": "1",
    "Frage": "Was interessiert dich am meisten?",
    "Antwort1": "Programmieren",
    "Antwort2": "Organisieren",
    "Antwort3": "Bücher"
  },
  {
    "ID": "2",
    "Frage": "Schon mal von Python gehört?",
    "Antwort1": "Ja klar!",
    "Antwort2": "Die Schlange?",
    "Antwort3": "Ich habe mal ein Buch darüber gelesen"
  },
[...]

Auf der Ergebnisseite werden, nach Durchführung des Fragebogens, die einzelnen Schwerpunkte in einem importierten Tortendiagramm dargestellt. Hierfür war es zunächst nötig, externen Code zu implementieren.

import ReactChartkick, { PieChart } from "react-chartkick"; //https://medium.com/@vickdayaram/using-chart-js-with-react-324b7fac8ee6
import Chart from "chart.js"; //https://medium.com/@vickdayaram/using-chart-js-with-react-324b7fac8ee6

Die optische Darstellung wurde auf dem klassischen Weg mit einer CSS Datei verwirklicht.

Alternativ kann zum klassischen Chart mittels eines Buttons zusätzlich die prozentualen Ergebnisanzeige abgerufen werden. Hierfür haben wir folgenden Code genutzt:

Prozentzahlen() {
  this.setState({
    M: (this.state.counterb1 / 10) * 100,
    N: (this.state.counterb2 / 10) * 100,
    B: (this.state.counterb3 / 10) * 100
  });
}

Quellcode

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2018/19, Prof. Dr.-Ing. Steinberg, Viktor Eisenstadt) einige gute Progressive Web Apps (PWA) mithilfe des JavaScript-Frameworks ReactJS entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Erklärvideo: Nutzung von Working Out Loud im Studium

Autorin: Nina Stellmann

Konzept:

Der Studiengang Informationsmanagement – berufsbegleitend setzte sich im Sommersemester 2018 mit der Methode „Working Out Loud (WOL)“ auseinander. Hierbei wurde WOL getestet und Konzepte zur Nutzung im Studium erstellt.

Das folgende Erklärvideo soll anderen Studierenden näher zu bringen, worum es sich bei „Working Out Loud“ handelt und wie davon auch im Studium profitiert werden kann.

Techniken/Software:

Zur Erstellung wurde die kostenlose Version der Software VideoScribe verwendet, mit der animierte Videos erstellt werden können. Dabei wird der angezeigte Inhalt im laufenden Video per Hand gezeichnet. Das geschieht per Stop-Motion-Technik Schritt für Schritt (per Hand) als Sequenzen des Videos. Im Storyboard wurden alle Elemente erstellt.

Zur Vorbereitung mussten einzelne Figuren, Zeichnungen und Icons ausgewählt, Texte geschrieben und formatiert sowie im Storyboard in die richtige Reihenfolge gebracht werden. Abschließend wurde das Ganze mit der Einstellung der (virtuellen) Kamera aufgezeichnet.

Die Audioaufnahmen wurden mit der Software Audacity und einem Realtek High Definition Mikrofon eines Lenovo-Notebooks aufgenommen. Dann wurde die Audiospur als MP3-Datei abgespeichert und in das Video eingefügt.

Erfahrungen

Die Software VideoScribe bietet gute Möglichkeiten das Video nachträglich an die Geschwindigkeit der Audiodatei anzupassen.  Ebenfalls kann das Zeichnen der Objekte entsprechend länger oder kürzer dargestellt werden. Durch wenige Klicks an den entsprechenden Stellen im Video, lässt sich die Geschwindigkeit verändern, sodass sie mit der Audiospur übereinstimmt.

VideoScribe bietet eine einfache und direkte Möglichkeit das erstellte Video in sozialen Netzwerken, wie z.B. YouTube, zu veröffentlichen. Im ganzen Video ist zu sehen, dass es sich um die frei verfügbare Software von VideoScribe handelt. Für ein Video, das professionell veröffentlicht werden und entsprechend genutzt werden soll, sollte besser die kostenpflichtige Version der Software genutzt werden, um kein Wasserzeichen im Hintergrund zu sehen.

Video & Storyboard

Storyboard: Storyboard-PDF

Videos rundum IM: Das erste Semester – Informationsmanagement

1. 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 war.

Zielsetzung

Unser Ziel war es den Unterschied zwischen Schule und Hochschule und außerdem die Naivität und Motivation eines Erstsemester-Studenten darzustellen.

Arbeitsweg

Für die Vorbereitung haben wir erst der Story besprochen und sind die ungefähre Reihenfolge durchgegangen, dadurch haben wir das Storyboard gezeichnet und ebenfalls angefangen die Hintergründe zu zeichnen. Nach den Hintergründen haben wir passend dazu die Menschen auf den Bildern gezeichnet und die Legofiguren herausgesucht.

Als die Vorbereitung fertig war konnten wir anfangen die Bilder für den Film zu schießen und diese zu einem zusammenhängenden Film zusammen zu fügen.

Mit dem fertigen Bildmaterial haben wir uns mit Marco Benduch getroffen bei dem wir zusammen die Musik erarbeitet haben. Er hat schon im Vorfeld die Hintergrundmelodie komponiert und wir mussten diese dann nur noch an die Filmszenen anpassen. Die Geräusche, Soundeffekte und Stimmen haben wir daraufhin aufgenommen und alles zusammengeschnitten. Marco hat den Ton am Ende abgemixt damit alles die richtige Lautstärke hat.

Besonderheiten

Die Hintergründe sind komplett selbstgezeichnet und die Hintergrundmusik selbst komponiert. Eine Besonderheit ist außerdem, dass nur die Hauptpersonen in Wörtern sprechen und die restlichen Personen unverständlich sind. Die Hauptperson „Alice“ summt teilweise die Melodie des Films mit, was verdeutlichen soll, dass die Melodie in ihrem Kopf ist und sie während des ersten Semester begleitet. Um den Aufstieg zum zweiten Semester hervorzuheben ist ebenfalls die Melodie einen Ton höher gespielt.

Um den Hochschulalltag zu verdeutlichen, sind im Unterricht verschiedene Charaktere die offensichtlich nicht aufpassen, oder früher gehen, was in der Schulzeit nicht möglich war.

Verwendete Techniken

Für das Zusammenfügen der Bilder haben wir Camtasia 9 benutzt und für die Tonbearbeitung Cubase 9.

 

PDF: Storyboard

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 hier nach und nach vor.

Tutorial: Klausuren Countdown

Klausuren Countdown

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige 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.

Klausuren Countdown

Autor: Matthias Olbrisch

Die Idee

Die Idee der Webapplikation ist es dem Studenten eine App zu liefern, die ihm die Möglichkeit bietet, den Lernfortschritt bzw. den Lernstand bis zu einem Klausurtermin zu überwachen. Der Fokus lag hierbei nicht auf einem besonders aufwendigen Design, sondern auf der Funktionalität der Web Applikation.

Wie funktioniert das Ganze ?

Die einzige Eingabe, die ein Student dazu zu tätigen hat, ist die der Eingabe des Klausurensdatums in das dafür vorgesehene Feld unter der Frage „Wann ist deine Klausur?“ und die Bestätigung über den „Bestätigen“ Button.

Wann ist deine Klausur?
Abbildung 1 – Wann ist deine Klausur?

Danach generiert sich unter der Aussage „Wie viel Zeit du noch hast!“ ein Countdown, der die verbleibenden Tage bis zur Klausur berechnet und live herunterzählt.

Wie viel Zeit du noch hast!
Abbildung 2 – Wie viel Zeit du noch hast!

Der Code für den Countdown behandelt zwei Problemstellungen. In der Funktion time_remaining(startTime) wird die im Eingabefeld vom Nutzer eingegebene Zeit in Millisekunden von der Startzeit abgezogen, daher wird im anschließenden Verlauf von Millisekunden auf Sekunden, Minuten, Stunden usw. gerechnet. Schließlich gibt der Operator „math.floor“ den größten Integer zurück, der bei der Berechnung der Sekunden, Minuten usw. entsteht.

Codeausschnitt
Abbildung 3 – Codeausschnitt

Die Funktion SubmitDate update nun die Countdown Daten mittels z. B. days_span.innerhtml=t.days; die Countdown – Werte. Schließlich würde der definierte Countdown nach dessen logischem Ende noch in den Minus Bereich laufen. Dies wird mittels der bedingten Funktion verhindert.

Codeausschnitt
Abbildung 4 – Codeausschnitt

Bei mehr als 7 Tagen wird der Status „Alles Okay“ ausgegeben, bei weniger als 7 Tagen wird vermeldet, dass man „Nur noch eine Woche“ zur Vorbereitung hat. Unter oder bei 4 Tagen Restlaufzeit wird „Jetzt aber!!“ ausgeliefert und am letzten Tag wird angekündigt, dass man „Morgen“ die Klausur schreibt. Am Prüfungstag wird „Viel Glück und Erfolg“ gewünscht.

Alles okay
Abbildung 5 – Alles okay

Der entsprechende Code verdeutlicht, dass sofern 8 Tage oder mehr Vorbereitungszeit bleiben, „Alles okay“ ist. Dazu wird am Beginn die restliche Tageszahl über console.log(days) ausgelesen. Die unterschiedlichen Status werden über if – else Bedingungen formuliert.

Codeausschnitt
Abbildung 6 – Codeausschnitt

Zusätzlich zu diesen Statusmeldungen, wird ein Kreis gezeigt, der anhand des vorhandenen Puffers den Fortschritt des Lernens veranschaulicht darstellen soll. Dazu wächst er in den letzten 7 Tagen der Klausurvorbereitung um je 100/7 % pro Tag. Bis er schließlich voll ist. Dauert es noch länger als 7 Tage, wird der Kreis nicht angezeigt.

Codeausschnitt
Abbildung 7 – Codeausschnitt

Das Ergebnis:

Umsetzung

Die Applikation wurde mithilfe von Elementen aus HTML 5, CSS 3, Javascript sowie jQuery entwickelt. Unterstützung habe ich bei den Plattformen „codepen.io” und „W3schools“ gefunden.

Dateienliste: hier

Zum besseren Verständnis ist der Code mit ausführlichen Kommentaren versehen.

 

Tutorial: Ein Akkordeonmenü für die Fakultät III

Ein Akkordeonmenü für die Fakultät III, Hochschule Hannover, Expo Plaza

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige 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.

Ein Akkordeonmenü für die Fakultät III

Autoren: Svenja Hamacher und Alina Finger

Umsetzung: hier

Quellcode+Bild: multimediasysII

Konzept

Die Aufgabenstellung zur Entwicklung und Implementierung einer funktionalen Web Animation hat als Vorgabe, dass es keine rein dekorative Animation ohne Funktion sein durfte. Weiterhin sollte nach Möglichkeit das Thema Studium/ Informationsmanagement aufgegriffen werden.

Vor dem Hintergrund der Funktionalität fiel unsere Wahl recht schnell auf eine Abwandlung eines Akkordeonmenüs. Der Vorteil dieser Art von Menü ist, dass man viel Inhalt auf wenig Raum darstellen kann und somit detaillierte Inhalte zu unterschiedlichsten Themen abbildbar werden. Gerade Kontaktdetails haben dabei oft nur einen geringen Umfang, weswegen bei Fakultäten oft verschiedene Kontaktinformationen auf eine Seite geschrieben werden. Um also die Kontaktinformationen der Fakultät 3 übersichtlicher und schöner zu gestalten, entschlossen wir uns eine einfache Navigation mit JavaScript zu bauen, die den platzsparenden Gedanken des Akkordeonmenüs aufgreift. Derzeit gibt es mehrere Seiten, auf welchen verschiedene Kontakt- und Weginformationen zur Fakultät 3 und ihren Abteilungen „Design und Medien“  und „Information und Kommunikation“ zu finden sind.

Aus der bestehenden Webseite der Fakultät 3 konnten wir als wesentliche Kontaktinformationen den Anfahrtsweg, den Campusplan, die Raumverwaltung und Ausstellungsfläche, die Kontaktinformationen von DM und IK, sowie das Impressum entnehmen. Diese Informationen haben wir zum Großteil übernommen und umstrukturiert. Nur beim Anfahrtsweg haben wir die bestehenden Informationen komplett ersetzt. Für den Anfahrtsweg entschieden wir uns zum einen dazu, Google Maps direkt einzubinden, da so die Adresse, ein Grundriss des Expo Plazas und nahegelegene Bus- und Bahnhaltestellen ersichtlich werden. Zum anderen haben wir einen Button eingefügt, welcher direkt zur Google Maps Navigation weiterleitet und den Expo Plaza 12 als Zieladresse einstellt.

Die verschiedenen Inhalte sollen dabei durch Javascript aus- und eingeblendet werden, je nachdem welcher Reiter aktiviert wird. Durch diese Animation wird das ursprüngliche Ziel des Platzersparnisses erreicht. Als zusätzliche Animation werden die Bilder der Menüreiter animiert. Die Symbole verlassen dabei den Reiter und „fliegen“ in eine der Inhaltsboxen, wodurch der aktive Reiter zusätzlich zur farblichen Hervorhebung gekennzeichnet wird und der Benutzer sich besser orientieren kann. Als Grundlage für den Code wurde der Pen gewählt, welcher unter https://codepen.io/rss/pen/itjqC​  zu finden ist.

How To

Die Animation besteht aus drei Dateien. Im Folgenden wird beleuchtet, wie die HTML-, CSS- und JavaScript-Datei zusammenspielen, um die Animationen zu erzeugen.

In der HTML-Datei werden die Informationsinhalte gespeichert. Dabei wird jeder Menüreiter zunächst in einem Divcontainer gespeichert, welcher sowohl eine ID, als auch einen weiteren Divcontainer mit der Klasse des zugehörigen Icons enthält. Die verfügbaren Icons hängen dabei von dem Iconpaket ab, welches in der CSS Datei eingebunden wird und können daher beliebig verändert oder auch selbst gestaltet werden. Die ID des Divcontainers wird später in der JavaScript-Datei wichtig, da über diese ID die Animation, also das Ein- und Ausblenden der Inhalte, funktioniert.  Dazu ist es eben falls wichtig, dass die Inhalte, welche beim aktivierten Reiter gezeigt werden sollen, von Divcontainer mit individueller ID umschlossen sind.

Standardmäßig ist in unserer Animation der erste Reiter, welcher die Anfahrt via Google Maps enthält, als „active“ gekennzeichnet. Bei einem Klick auf einen anderen Reiter werden folgende Prozesse in Bewegung gesetzt:

  1. Mittels JQuerys .hide() Befehl werden zunächst alle Inhalte ausgeblendet
  2. Allen Reitern wird der Status „active“ durch „removeClass(„active“)“ entfernt, damit wirklich nur der angeklickte Reiter am Ende „active“ ist
  3. Der zum angeklickten Reiter passende Inhalt wird mittels seiner individuellen ID angesprochen und durch den .show() Befehl sichtbar gemacht.
  4. Dem angeklickten Reiter wird durch .addClass(„active“) die Klasse „active“ hinzugefügt, wodurch die farbliche hervorhebung und etwaige Symbolanimationen aktiviert werden.

Diese vier Schritte sollten so schnell ablaufen, dass der Nutzer nur einen flüssigen Wechsel wahrnimmt. Durch diese vier Befehle wird verhindert, dass mehr als ein individueller Div-Container zurzeit angezeigt wird. Ohne JavaScript würden also alle Inhalte einfach untereinander in einzelnen Boxen angezeigt werden.

Die Animation der Icons im Reiter wird dabei nur indirekt durch JavaScript beeinflusst. Standardmäßig erhalten die Icons ihre Positionseigenschaften von der Klasse contactype. Sobald mittels JavaScript jedoch die Klasse „active“ an den jeweiligen Div vergeben wird, werden mittels CSS neue Positionseigenschaften für das Icon gültig. Durch Anpassen des jeweiligen CSS-Containers kann also bestimmt werden, wohin sich das Icon beim Anklicken bewegt, oder ob es (wie beim Reiter Anfahrt) einfach im Reiter stehen bleibt. So können auch, wie bei der Sprechblase des Reiters „Kontakt DM“, Drehungen und andere Transformationen des Symbols vorgenommen werden, was für den Benutzer interessant ist.

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).