Progressive Web Apps für IM: Interaktiver Stundenplan

Interaktiver Stundenplan

Autoren: Hozan Hassan, Frederik Pusch, Valentin Griese, Marcel Hemmer und Lukas Fischer

PWA: Interaktiver Stundenplan

Quellcode

Idee/Zielsetzung:

Die Progressive Web App (PWA) “Interaktiver Stundenplan” zum Studiengang Informationsmanagement bietet eineÜbers icht über aller Kurse des BIM unterteilt in die jeweiligen Semester. Die Kurse sollen einfach per Drag and Drop in einen Stundenplan gezogen werden.

Umsetzung

HTML und CSS

Der Stundenplan und die Liste der Fächer sind mit HTML und CSS umgesetzt.

Dabei wird bei der Strukturierung der Semester und Kurse mit einer Liste ausgeführt. Mit dem <details>-Tag können Seiteninhalte, in dem Fall die Tabelle mit den Fächern, versteckt werden.

index.html

<details>
    <summary>1. Semester</summary>
    <ul class="auswahl">
        <li id="0">Informationsstrukturen</li><br/>
        <li id="64">Grundlagen der Erschließung</li><br/>
        <li id="65">Relationale Datenbanken</li><br/>
        <li id="66">Grundlegende WWW-Techniken</li><br/>
        <li id="67">Grundlagen der Statistik</li><br/>
        <li id="1">Nutzerforschung 1 - Grundlagen</li><br/>
        <li id="2">Angewandte Kommunikation 1</li><br/>
        <li id="3">Wissenschaftliche Arbeitstechniken</li><br/>
        <li id="4">Grundlagen der Informatik</li><br/>
        <li id="5">Grundlagen der Mathematik</li><br/>
        <li id="6">Grundlagen der Informatik und Mathematik</li><br/>
    </ul>
</details>

Der Stundenplan an sich wird ebenfalls mit einer simplen Tabelle realisiert. Die Felder, in denen später ein Fach reingezogen werden kann, bleiben einfach leer.

index.html

<table>
    <col style="width:5%">
    <col style="width:19%">
    <col style="width:19%">
    <col style="width:19%">
    <col style="width:19%">
    <tr>
        <th class="zeit" style="text-align:center">Zeit</th>
        <th style="text-align:center">Montag</th>
        <th style="text-align:center">Dienstag</th>
        <th style="text-align:center">Mittwoch</th>
        <th style="text-align:center">Donnerstag</th>
        <th style="text-align:center">Freitag</th>
    </tr>
    <tr>
        <td class="zeit">08:00<br/>-09:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">09:30<br/>-11:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">11:00<br/>-12:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">12:30<br/>-14:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">14:00<br/>-15:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">15:30<br/>-17:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">17:00<br/>-18:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
</table>

Framework

Die PWA nutzt die JavaScript-Bibliothek JQuery UI, die die Drag and Drop Funktion sowie die Touch-Bedienung am Stundenplan umsetzt.

Drag and Drop

Erlaubt das Ziehen der Fächer in den Stundenplan.

Funktion.js:

$(function () {
    $("#div_drag li").draggable(
    {
        appendTo: "body",
        helper: "clone",
    });
    startDrop($("#div_drop table td"));
    function startDrop($elements) {
        $elements.droppable({
                hoverClass: "ui-drop-hover",
                over: function (event, ui) {
                    var $this = $(this);
                },
                drop: function (event, ui) {
                    var $this = $(this);
                    $("<span></span>").text(ui.draggable.text()).appendTo(this);
                    $(".auswahl").find(":contains('" + ui.draggable.text() + "')");
                }
        });
    }
});

Optimierung für Touchscreens

Damit die PWA responsiv wird, z.B. auch auf Handys läuft und die Drag and Drop-Funktion auch auf Touchscreens funktioniert, gibt es die Funktion jquery.ui.touch-punch.min. Diese Funktion stammt von touchpunch.

jquery.ui.touch-punch.min

!function(a){function f(a,b){
	if(!(a.originalEvent.touches.length>1)){
		a.preventDefault();
		var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");
		d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)
	}
}
if(a.support.touch="ontouchend"in document,a.support.touch){
	var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){
		var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){
			e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){
				var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")
			}),c.call(b)},b._mouseDestroy=function(){
				var b=this;b.element.unbind({
					touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")
				}),d.call(b)}}}(jQuery);

Buttons

Die Funktionen der Buttons wurden mit JavaScript umgesetzt.

Fächer

Blendet die Liste mit den Fächern aus.

<script>                                                       
    $('#btn').click(function(){$('#div_drag').toggle();});
</script>

Zeit

Blendet die Zeit-Spalte aus.

<script>
    $('#btn_zeit').click(function() {$('.zeit').toggle();}); 
</script>

Zurücksetzten

Lädt das Fenster einfach neu und setzt es einfach auf den Ausgangszustand zurück

Ergebnis und Funktionen

Die Oberfläche ist simpel gehalten und kann in drei Teile geteilt werden. Auf der linken Seite die Kurse, welche nach Semester sortiert sind, auf der anderen Seite der Stundenplan. Über den Hauptelementen sind drei Buttons angeordnet.

Semester & Kurse

Auf der linken Seite stehen die Semester, die per Klick eine Liste mit den Kursen aufklappen lässt. Die danach gezeigten Kurse können dann per Drag and Drop in den Stundenplan gezogen werden.

Stundenplan

Im Plan sind die wesentlichen Merkmale eines Stundenplanes eingepflegt. Wochentage (Spalten), von Montag bis Freitag, und Zeiten (Reihen), in 90 Minuten Phasen, realisieren den Aufbau. Jede zweite Reihe ist dabei grau eingefärbt.

Buttons

Über dem Stundenplan befinden sich drei Buttons: „Fächer“, „Zeit“ und „Zurücksetzten“.

Um die Ansicht übersichtlicher zu machen, kann man mit den Buttons Fächer und Zeit, Teile des Stundenplanes ausblenden. Der Zeit-Button entfernt oder fügt die Zeitleiste links am Plan hinzu.  Per Klick auf „Fächer“ geschieht dasselbe mit den Listen der Kurse. Der dritte Button „zurücksetzten“ löscht alle Einträge im Stundenplan.

 

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.

 

Progressive Web Apps für IM: Teilnehmerverzeichnis ‘Social Contact’

Social Contact

Autoren: Matthias Galda, Catharina Ochsner, Anja Preuße, Sarah Gehrmann

fertige PWA
Quellcode

Idee/Zielsetzung

Zweck der Progressive Web Apps (PWA) soll es sein, die Kontaktdaten der Ansprechpartner aufzulisten, die an der Veranstaltung “InfoInMotion2019” am 11. Oktober teilnehmen.

Überlegungen

Die Startseite enthält eine Lightbox. Darin soll der User Informationen über die Website und ihren Zweck sowie über die Veranstaltung „InfoInMotion2019“ erhalten.

Mock-Up der Startseite
Mock-Up der Startseite

Mithilfe einer Suchfunktion soll es dem User möglich sein, nach interessanten Kontakten zu suchen. Hier sollte der User angeben können zu welcher Gruppe er gehört (Studenten, Studieninteressiert oder Unternehmen) und eine Kontaktgruppe wählen, zu der er Informationen erhalten möchte (Studenten, Dozenten oder Unternehmen).

 

 

Mock-Up der Übersichtsseite
Mock-Up der Übersichtsseite

Des Weiteren wurden drei Seiten geplant und erstellt, auf denen die einzelnen Gruppen vorgestellt werden. Dort sollen einzelne Personen oder Unternehmen aufgeführt werden.

Für den Fall, dass der User mehr über eine Person oder ein Unternehmen erfahren will, kann er diese anklicken und wird auf eine Profilseite der jeweiligen Person/ des Unternehmens weitergeleitet.

Zuletzt soll das Impressum die üblichen Informationen über die Autoren enthalten.
In der Kopfzeile kann der User den Namen der Website finden sowie die direkt darunterliegende Navigation mit dem „Burger“-Menü. Die Fußzeile sollte Links zu dem Impressum und zu dem Studiengang enthalten.
Das genaue Design und den Aufbau der PWA haben wir zusätzlich in Mock-Ups festgehalten.

Umsetzung

Für die Umsetzung der Funktionalitäten haben wir das Framework React in Kombination mit JavaScript genutzt. Die Grundstruktur und die Benutzeroberfläche wurde mit HTML5 und CSS3 erstellt.

Das Design der Seite haben wir schlicht gehalten und uns farblich an den Farben der Fakultät III der Hochschule Hannover orientiert.
In der Praxis haben wir eine vereinfachte Version der oben beschriebenen PWA entworfen. Beim Aufruf der Startseite erscheint eine Lightbox, die den Besucher auf die Offline- sowie App-Nutzung hinweist. Direkt auf der Startseite sind Informationen über die Lehrveranstaltung und den Zweck der PWA zu finden. Über die „Suche“ kann der Benutzer nach Personen und Unternehmen suchen und sich die Ergebnisse in einer Tabelle ausgeben lassen.

Ergebnisse in Tabellenform
Ergebnisse in Tabellenform

Die einzelnen Seiten zu den Personen und Unternehmen haben wir zur besseren Übersicht und aus technischen Gründen weggelassen. Allerdings können diese später noch hinzugefügt werden. Das Impressum wurde wie geplant angelegt. Dort findet der Leser die Informationen zu den Autoren. Die Kopf- und Fußzeile wurden ebenfalls wie geplant umgesetzt.

 

Funktionalität

Die Lightbox wird beim Laden der Startseite abgerufen und mittig angezeigt. Mit einem Klick auf das X kann die Lightbox geschlossen werden.


Um die Lightbox anzuzeigen wird einem DIV-Container ein Zustand zugewiesen, der sich ändert, sobald das X angeklickt wird. Beim Neuladen der Startseite wird der Zustand des DIV-Containers auf den zuvor gesetzten Standard zurückgesetzt. Mithilfe einer if-Funktion wird der Zustand des DIV-Containers abgefragt. Entspricht der Zustand dem vorher gesetzten, wird die Box wieder aufgerufen.

Codeausschnitt der Lightbox
Codeausschnitt der Lightbox

Die Daten über die Personen und Unternehmen wurden über die asynchrone API von IndexedDB eingepflegt. Dadurch können die Daten sowohl online als auch offline abgerufen werden. Diese Daten werden ausschließlich für die Suche benötigt. Dabei hat der User die Möglichkeit über ein Dropdown-Menü auszuwählen, welche Zielgruppe er sucht. Dieses Dropdown-Menü wird mithilfe einer Funktion erstellt, die die jeweilige Kategorie eines Dateneintrags sucht und so zusammenfasst, dass keine doppelten Einträge erscheinen. Durch das Auslesen der Kategorie kann die Tabelle so gefiltert werden, dass nur Einträge der entsprechenden Kategorie aufgelistet werden.

Für die mobile Ansicht haben wir die Tabelle so beschrieben, dass sie auch horizontal scrollbar ist. Ansonsten wäre eine mobile Ansicht nur schwer realisierbar gewesen.

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.

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.

 

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.

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

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

Neue Tagesschließfächer an der Hochschule Hannover

Autoren: Nadine Siesing

Konzept

Der Hintergrund des Videos war die Anschaffung der neuen Tagesschließfächer (50) der Hochschule Hannover, auf dem Expo-Plaza 12 und die Problematik der berufsbegleitenden Studierenden und die dazugehörige Frage „Wohin mit dem Gepäck?“

Technik

Als Technik wurde die „Legetechnik“ gewählt. Einzelne Schlüsselbilder befinden sind im dazugehörigen Storyboard. Textausschnitte und einzelne Bilder (Freeware) werden ins Bild (Aufnahme einzelner Videosequenzen) gelegt und wieder aus dem Aufnahmebereich gewischt oder herausgenommen.

Zubehör

Für die Aufnahmen wurden weiße Blätter (als Untergrund), ausgedruckte Bilder, ausgedruckte Texte, ein Stativ, eine Kodak Digitalkamera, Kartenlesegerät, helles Licht, Laptop, Bearbeitungssoftware, eine Person (zum Legen + Wischen + Videodreh) benötigt.

Software

Es wurden frei verwendbare Bilder / Piktogramme und frei verfügbare Musik benutzt.

Für die Bearbeitung der einzelnen Videosequenzen, das Zuschneiden der Sequenzen zu einem Video und das Unterlegen der Musik wurde die Software Adobe Premiere Pro CC verwendet.

 

PDF: Storyboard

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 dargestellt werden.

Vorgehen

Gedreht wurde mittels einer Sony SLTA77V, die über Kopf an einem Stativ über der benutzten Oberfläche positioniert wurde. Für die einheitliche Beleuchtung sorgten insgesamt vier fest installierte Lampen. Die Aufnahmen wurden in zwei Etappen gemacht, die mit dem Windows Movie Maker geschnitten und nachbearbeitet  wurden. Zur Nachbearbeitung gehörten nur die Beschleunigung des Videos auf die doppelte Geschwindigkeit und das Ausschalten des Videotons. Ansonsten wurden die Aufnahmen nicht weiter bearbeitet. Durch das Beschleunigen sollte der Film an mehr Dynamik gewinnen. Unterlegt wurden die Aufnahmen mit einem GEMA-freien Titel namens „Funk Warte“ von Dag Reinbott. Das einzige Geräusch stammt von der Seite findsounds.com. Die Audiospuren sind ebenfalls nur mit Windows Movie Maker bearbeitet und geschnitten worden.

Verbesserungen

Trotz allem ist der Film in vielerlei Hinsicht noch verbesserungswürdig. Beispielsweise hätten die leichten Spiegelungen der Lampen auf der Metalloberfläche vermieden werden können. Eine eine andere, matte Oberfläche oder eine geeignete Abdeckung hätten dieses vermeiden können. Diese hätte wiederum aber so glatt sein müssen, dass die Papierzeichnungen ohne Probleme darauf hätten, herum geschoben werden können. Ebenso hätte durch eine passende farbige Unterlage dem Video einen schöneren farblichen Kontrast geben können. Durch einen farbigen Untergrund hätten die Zeichnungen noch viel besser wirken können.

PDF: Storyboard , Beschreibung des Konzepts

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.

Videos rundum IM: Funktionen der CampusCard der HsH

Die Funktionen der CampusCard

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. Heute:

Funktionen der CampusCard der HsH

Autor: Lisa Heeg

Pre-Producation

Werkzeuge:

Zeichen- und Malutensilien, Schere, Handykamera

Arbeitsschritte:

Konzepterstellung zur  Grundidee in Form des Storyboards, dabei auch:
Festlegen der Technik: Mix aus Legetechnik (gezeichnete Objekte nacheinander in die Szene gebracht, allerdings nicht gefilmt, sondern fotografiert, ohne sichtbare Hände) und Stop-Motion
Überlegungen zu Ton: Musik unterlegen und eigenen Kommentar
Ablauf: 7 Abschnitte: Einleitung, die 5 Funktionen (Identifikation als Student, Semesterticket, Kopierkarte, Bibliotheksausweis, Mensakarte), Abschluss
Zeichnen und Ausschneiden der benötigten Elemente für die Szenen
Legen der Szenen entsprechend des Storyboards und fotografieren

Production

Werkzeuge:

Gimp, Windows Movie Maker, Handymikrofon, Audacity, Recherche

Arbeitsschritte:
Fotobearbeitung:

Die fotografierten Szenen werden mit Gimp bearbeitet. Zum einen werden Helligkeit und Kontrast sowie zum Teil Größe der Objekte und des Hintergrundes optimiert.  Zum anderen werden  Stop-Motion-Effekte vorbereitet. Dazu wurden Position, Größe, Perspektive oder Farbe von Objekten verändert. Des Weiteren werden mit Gimp erstellte Elemente hinzugefügt (z.B. Text) oder einzelne Objekte kombiniert (Bild der CampusCard mit Gesicht der gezeichneten Studentin). Jede Veränderung wird in einem Einzelbild gespeichert.

Videoerstellung:

Sämtliche Einzelbilder werden im Windows Movie Maker zu einem Video zusammengefügt. Dabei wird die Dauer der einzelnen Bilder festgelegt, z.B. besonders kurze Zeiten für Stop-Motion-Effekte. Es werden Animationen für Übergänge, sowie ein Intro und Abspann erstellt.

Audioerstellung:

Für die Musik wird nach lizenzfreien Titeln im Internet gesucht, genutzt wird: „Happy Chloé“ von https://www.terrasound.de/lizenzfreie-musik-fuer-youtube-videos/ . Die Audiokommentare wurden mit dem Handymikrofon und einer  App für „Sprachmemos“ selbst aufgezeichnet und mit Audacity geschnitten.

Postproduction


Werkzeuge:

Windows Movie Maker

Arbeitsschritte:

Zusammenführen der Videodatei mit den beiden Audiodateien. Dabei wird die Lautstärke der Musik angepasst, sodass der Audiokommentar gut zu hören ist und die einzelnen Audiokommentare bildgenau unter die einzelnen Szenen gelegt. Außerdem erfolgte eine nachträgliche Anpassung der Dauer der Einzelbilder, um sie auf den Audiokommentar optimal abzustimmen. Abschließend erfolgt das Rendering des Videos durch Export in das mp4-Format.

Storyboard

Videos rundum IM: Kompetenzfelder im Studiengang 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 stellen wir euch hier nach und nach vor. Heute:

Autoren: Charlotte Schröer, Franziska Altemeier

Kompetenzfelder im Studiengang IM

Idee / Zielsetzung

Ziel unserer Animation ist es, die Kompetenzfelder des Studiengangs Informationsmanagement an der Hochschule Hannover zu erläutern. Im Rahmen des neuen Curriculums wurden die sogenannten Kompetenzfelder eingeführt, von denen jeder Studierende zwei belegen muss. Gerade jetzt, wo die ersten Studierenden ihre Kompetenzfelder wählen müssen, macht ein Erklärvideo, das die Inhalte und Möglichkeiten der einzelnen Bereiche kurz und bündig erläutert, Sinn.

Welche Kompetenzen für welches Kompetenzfeld benötigt werden, was in welchem Feld gelernt werden kann, das soll in unserem Erklärvideo auf den Punkt gebracht werden.

Arbeitsschritte / Arbeitsweg

Unser erster Arbeitsschritt nach der Entwicklung einer grundlegenden Idee war die Erstellung eines Storyboards. Dieses hat uns geholfen, die vielen Informationen, die uns zu unserem Thema zur Verfügung standen, zu reduzieren und Kernaussagen zu formulieren.

Anhand des Storyboards konnten wir unsere Informationen visualisieren, in sinnvolle Abschnitte aufteilen und eine grobe Reihenfolge festlegen.

Software

Da wir unsere Animation in Form eines Erklärvideos umsetzen wollten, haben wir uns insbesondere die im Unterricht vorgestellte Software speziell für Erklärvideos hinsichtlich verschiedener Aspekte verglichen. Diese waren GoAnimate, VideoScribe und Powtoon.

GoAnimate bietet eine 14-tägige kostenfreie „trial period“ an. In dieser Zeit hat man den vollen Zugriff auf alle Angebote, die auch die Premium Version hätte, allerding mit dem Unterschied/der Einschränkung, dass alle Videos mit Wasserzeichen versehen sind und die erstellten Videos lediglich geteilt, nicht aber heruntergeladen werden können.

GoAnimate bietet insgesamt drei verschiedene Nutzungsmodelle, die alle kostenpflichtig sind. Wollen mehrere Personen Videos kreieren, ist man gezwungen, die kostenintensivste Version „GoTeam“ für $159 pro Monat zu nutzen.

Aufgrund der Preisregelung und der Tatsache, dass wir als zwei Personen an die „GoTeam“-version gebunden gewesen wären, war die Software für uns keine ernsthafte Option. Hätte man die 14-tägige „trial period“ nutzen wollen, wäre man zudem zeitlich sehr eingeschränkt gewesen, da man auf die Videos nur zugreifen kann, wenn man einen Account hat

Unsere zweite Option VideoScribe bietet ebenfalls eine Trial Version an, die jedoch nur sieben Tage gültig ist. Als einzelner Nutzer kann man verschiedene Zahlungspläne wählen. Man kann einmalig 480 Euro zahlen, ein Jahresplan, bei dem 132 Euro gezahlt werden und eine Zahlung per 20-Euro- Monatsraten. VideoScribe bietet außerdem Team-Lizenzen an, die preiswerteste Version liegt hier bei 115 Euro pro Nutzer. Aufgrund der Kosten war VideoScribe keine Option für uns, insbesondere da die kostenfreie Trial Version noch kürzer ist als bei GoAnimate.

Im Gegensatz zu VideoScribe und GoAnimate bietet Powtoon eine dauerhafte Gratis-Version. Diese hat ein paar Einschränkungen, so sind z.B. alle Videos mit Wasserzeichen versehen und auch die Bildqualität ist (beim Export zu Youtube) eingeschränkt. Die Arbeit fällt einem mit Powtoon auch als Laie nicht schwer, da alles sehr übersichtlich und verständlich aufgebaut ist und erklärt wird. Sehr positiv war vor allem, dass man bei Powtoon auch gut als Team arbeiten kann. So kann man beispielsweise ein Video an einen weiteren Powtoon-Nutzer schicken und so kollaborativ an einem Projekt arbeiten.

Bei der Erstellung von Videos bietet Powtoon viele Formen, Symbole und Styles, die auch in der freien Version implementiert sind. Außerdem können auch eigene Bilddateien eingefügt werden.

Des Weiteren ermöglicht Powtoon die Einbindung einer Audiospur. Für die Audiospur haben wir zunächst ein Skript erstellt. Dies haben wir anhand des Inhaltes der einzelnen Folien in Powtoon ausgerichtet. Powtoon arbeitet ähnlich wie Powerpoint mit Folien, sodass es möglich ist, für jede Folie eine eigene Audiodatei hinzuzufügen. Ein Schneiden der Audiospur entfällt.
Die Audioaufnahmen haben wir mit Hilfe der App MP3 recorder aufgenommen. Wir haben uns für diese App entschieden, da sie die Audiodateien im mp3 Format abspeichert und einen Export zu Google Drive ermöglicht. Über Google Drive haben wir die Aufnahmen anschließend gespeichert und bei Powtoon hochgeladen. Die Lautstärkeeinstellungen der Audiodateien können dann direkt beim Voiceover in Powtoon angepasst werden.

Insgesamt hat sich Powtoon als sehr nützlich und für unsere Anforderungen passend herausgestellt. Die Gratis-Version bietet umfangreiche Features. Insbesondere die Möglichkeit, kollaborativ an dem Video arbeiten zu können, war sehr hilfreich. Leider müssen in der Gratis-Version Abstriche bei der Qualität hinsichtlich des Youtube-Exports gemacht werden.

Das fertige Produkt, unser Video “Kompetenzfelder im Studiengang IM”, könnt ihr hier anschauen.
Außerdem findet ihr hier unser Storyboard:

Storyboard

Videos rundum IM: HsH-Rundgang

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

HsH-Rundgang

Autor: Abdullah Emin Kubilay

Worum geht es in diesem Video?

In diesem Video geht es um einen kurzen Rundgang durch die Fakultät 3 der Hochschule Hannover. Das Video soll den Erstsemestern einen groben Einblick geben, wo man was finden kann. Es werden einige wichtige Bereiche gezeigt, wie zum Beispiel die Dozentenfächer, der PC-Raum oder die Bibliothek.

Welche Software wurden benutzt?

Bei der Erstellung des Videos wurden Video- sowie Bildbearbeitungsprogramme genutzt.

– Videobearbeitungsprogramme:

– Bildbearbeitungsprogramme:

Welche Techniken wurden eingesetzt?

Grundsätzlich wurde für das Video die Stop-Motion-Technik angewendet. Dabei wurde für ein Bild 3 Millisekunde eingestellt, sodass am Ende das Video insgesamt 1,5 Minuten dauert.

Welche Effekte sind zu sehen?

  • Schwarz/Weiß-Effekt mit Retroeffekt
  • Einfliegende Texte
  • Regeneffekt
  • Audiospur
  • Vorspann
  • Abspann
  • Besondere Effekte (z.B. Windeffekt am Ende, Regeneffekt, …)

PDF: Storyboard & Zwischen- und Endpräsenation