Videos rundum IM: Das Client-Server-Modell

WebLab HsH: Client-Server-Modell

Das Client-Server-Modell

Autor: Kirill Prokopov

Inhalt:

In der Animation erkläre ich die Rollen von Client und Server. Ebenso wird die Kommunikation zwischen beiden Geräten grob erläutert.

Software:

Verwendet habe ich hierzu die Software „Blender“ (für Animationen, das Compositing und Videoschnitt) und den freien Software Synthesizer „Synth1“ für das Einspielen von Audio.

Die „Hauptdarsteller“ sind dabei Piktogramme von Client und Server und animierte Textelemente, die deren Funktion erklären und verdeutlichen. Die Piktogramme und die Texte liegen auf verschiedenen Ebenen und sind somit im Compositing von „Blender“ separat mit Effekten animierbar.

Realisiert im Compositing sind die Unschärfe- und Helligkeitsanimationen der Piktogramme sowie die Farbwechselanimation des Hintergrundverlaufs. Dies erfolgt simultan zu den erklärenden Texten und deren Keyframeanimationen. Ich setzte Compositing und Ebenen vor allem ein, damit die Rechenzeit pro Bild in einem vertretbaren Rahmen von 15 Sekunden pro Bild bleibt. Ohne Compositing und Ebenen wären es ca. 2 Minuten pro Bild gewesen, was bei knapp 1500 Bildern nicht so schön gewesen wäre.

 Ablauf in Blender:

  • Programm berechnet die Ebene mit den Piktogrammen
  • Programm berechnet die Ebene mit den Texten
  • im Compositing wird der Hintergrundverlauf hinzugefügt und dessen Farbe nach Position in der Animation angepasst
  • über den Hintergrund wird die Ebene mit den Piktogrammen gelegt und je nach Position in der Animation Unschärfe und Helligkeit verändert
  • darüber wird letztendlich die Ebene mit den Texten gelegt und das Endergebnis als Bild abgespeichert
  • dies geschieht Bild für Bild bis die Animation (1481 Bilder) abgearbeitet und alle Einzelbilder abgespeichert sind
  • Titel und Nachspann sind separate Animationen, die ebenfalls im Programm berechnet werden und Einzelbilder ausgeben
  • danach Erzeugung einer kompletten Testanimation ohne Ton im Videoschnittbereich um in Synth1 Synthesizereinstellungen vornehmen zu können.

 Ablauf Synth1:

  • Auswahl einer Synthesizervoreinstellung, die zur Animation passt (nicht langweilig, aber auch nicht zu dominant) und kleinere Anpassungen an der Voreinstellung
  • grobes Einspielen des Synthesizers passend zur Animation als MIDI-Datei, dann kleinere Anpassungen an der MIDI-Datei um das Timing zu verbessern und letztendliche Ausgabe als WAV-Datei

Endschnitt in Blender:

  • hinzufügen der Einzelbilder von Titel, Animation und Nachspann zu Videospuren
  • hinzufügen der WAV-Datei zur Audiospur
  • Ausgabe der kompletten Animation als MP4-Datei.

Das ist meine Animation zum Thema “Das Client-Server-Modell”

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.

Progressive Web Apps für IM: Informationsmanagement-Info

WebLab Hsh: PWA IM-Info

Informationsmanagement-Info als PWA

Autoren: Laili Ghods, Cemre Toppuz und Ogulcan Aktas

PWA: Informationsmanagment – Info

Quellcode

Ziel:

Unsere PWA soll einige allgemeine Informationen über unseren Studiengang vorstellen. Dabei haben wir uns die Texte von der offiziellen Webseite des Studiengangs genommen: https://im.f3.hs-hannover.de/studium/

Anforderungen

Die Progressive Web App soll folgende Anforderungen (Use-Cases) erfüllen:

  1. Navigation:
    • Anforderung: Navigation
    • Beschreibung: Dem Nutzer soll es möglich sein, durch die Applikation zu navigieren. Dabei sollen Links für die einzelnen Ansichten zur Verfügung stehen.
    • Ziel: Übersichtlich verteilter Content
    • Akteure: Systemadministratoren, Informationsmanager
    • Detailbeschreibung: Die Navigation soll alle Ansichten der Webseite erreichbar machen. Vor allem soll dem Nutzer klar sein, welche Funktion die Links der Navigation haben.
    • Mockup:

       2. Progressive Web App

    • Anforderung: Progressive Web App
    • Beschreibung: Die Applikation soll eine Progressive Web App sein und demnach alle üblichen Anforderungen dafür erfüllen.
    • Ziel: Gute User Experience
    • Akteure:  Systemadministratoren, Informationsmanager
    • Detailbeschreibung:
      Quelle: https://developers.google.com/web/progressive-web-apps/checklist

      • Alle App Urls laden auch wenn man offline ist
      • Metadata sind so gesetzt, dass man die App zum Home-Screen hinzufügen kann
      • Jede Seite hat eine gültige URL
    • Mockup:

        3. Single Page Applikation

    • Anforderung: Single Page Applikation
    • Beschreibung: Die Applikation soll als Single Page Applikation umgesetzt werden.
    • Ziel: Bessere User Experience, schnellere Ansicht der einzelnen Seiten
    • Akteure: Systemadministratoren, Informationsmanager
    • Detailbeschreibung: Die Seite soll nur einmal geladen werden vom Browser. Daraufhin soll der komplette Content ohne neuladen der Seite erreichbar sein. Klickt man auf die Navigation, wird im Content Bereich der Seiteninhalt angezeigt, ohne das die komplette Seite neu lädt.
    • Mockup:  n/a

Implementierung

1. React App erstellen

Zuerst galt es die React App zu erstellen. Dafür haben wir ein nützliches Tool benutzt: https://github.com/facebook/create-react-app

create-react-app erlaubt es mit einigen wenigen Kommandozeilen eine React App zu erstellen und zu deployen.

Mit dem Tool konnten wir die App mit folgenden Befehl generieren:

Daraus entsteht dann folgende Dateistruktur und App.js:

2. Navigation einbauen (react-router-dom)

Um die Navigation in React zu gewährleisten, haben wir uns für ein weiteres nützliches Tool entschieden: react-router-dom (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)

Der react-router-dom bietet eine Vielzahl an Möglichkeiten an die Navigation so umzusetzen, dass der Code sauber bleibt und die Applikation eine Single-Page-Applikation bleibt. (Beim Aufruf der Unterseiten wird nicht die komplette Seite neu geladen.) Nach Implementation der Navigation mit Hilfe des Tools ergibt sich folgende index.js:

3. Seiteninhalte/Komponenten erstellen

Wir wollen die Unterseiten Inhalt, Struktur, Zeitplan und Praxisphasen von https://im.f3.hs-hannover.de/studium/ in der PWA darstellen. Dafür haben wir jeweils eine JavaScript Datei erstellt. Daraufhin wurden sie in die index.js importiert und in die Navigation eingebunden (siehe Punkt 2 screenshot). Hier als Beispiel die inhalt.js:

Dies wurde analog für die anderen drei Seiten ebenfalls umgesetzt.

4. Aus der React App eine PWA generieren

Als wir die React Applikation soweit fertig hatten, galt es als nächstes daraus auch eine PWA zu generieren. Dafür nutzen wir das Chrome Tool Lighthous – Audits (https://developers.google.com/web/tools/lighthouse/)

Das Tool kann Webseiten darauf prüfen, ob diese PWA geeignet sind. Die Ergebnisse unseres ersten Tests waren wie folgt:

Als wir online recherchiert haben, sind wir auf folgende Anleitung gestoßen:

https://dzone.com/articles/a-step-by-step-tutorial-for-developing-a-progressi

Die Anleitung beschreibt Schritt für Schritt, wie man aus einer react Applikation eine PWA erstellt.

Damit die Seite auch funktionieren kann, wenn der Nutzer offline ist (welches eine Voraussetzung für PWA’s ist), mussten wir einen ServiceWorker registrieren. Dafür haben wir eine worker.js Datei erstellt:

Und die index.html angepasst, sodass die App prüft, ob der genutzte Browser einen ServiceWorker unterstützt:

Natürlich muss auch der ServiceWorker noch in der index.js registriert werden:

Als nächstes haben wir die Splash-Icons hinzugefügt und Anpassung an der manifest.json durchgeführt. Dadurch kann der Nutzer die Webseite als App herunterladen und offline nutzen. Die gesetzten Icons werden dann als Verknüpfungssymbol genutzt:

Nach den Anpassungen gab uns der Test von Lighthouse Audits folgendes Ergebnis:

5. Deployment

Da unsere PWA nun startklar war, mussten wir diese nur noch deployen. Dafür reichte ein einzelner Befehl in der Kommandokonsole:

Damit wurde der Ordner “build” generiert, welcher auf den Produktionsserver (unser webspace) hochgeladen werden konnte.

Link zur Applikation:

http://ogulcanaktas.wp.hs-hannover.de

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: 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: 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 können, wurden das Programm Gimp verwendet. Damit wurden die benötigten Fotos aus dem Online-Katalog der Stadtbibliothek Bremen abgegriffen. Im Anschluss wurden die Fotos zugeschnitten und um sie später in die einzelnen Szenen einbauen zu können. Damit die Videosequenzen lebendiger werden und das Interesse beim Zuschauer geweckt wird, wurden passende Audioaufnahmen angefertig werden. Die Audioaufnahmen für der einzelnen Videosequenzen wurden in einem Musikprogramm bearbeitet. Bei der Bearbeitung der Aufnahmen wurden Hintergrundgeräusche entfernt und die Lautstärke angepasst. Nach Festlegung der Dauer wurden die einzelnen Szenen anhand des Storyboards erstellt. Danach folgte die Auswahl passender Animationen in Form von Charakteren und ihren Emotionen sowie Gegenständen. Übergänge wurden angepasst und End-und Anfangszenen erstellt, um ein stimmiges Gesamtbild zu schaffen. Im letzten Schritt wurden Ton- und Videoaufnahmen zusammengeführt und optimiert. Um Feedback zu erhalten, wurde der Film sowohl Fach- als auch Laienpublikum vorgeführt.

Werkzeuge:

Storyboard:

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.

Videos rundum IM: Die Funktionen der CampusCard

Funktion Campus Card

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 hat eine Laufzeit von 1:01 Minuten (exklusive des Wasserzeichens der gewählten Plattform Moovly). Wir haben uns für diese kurze Laufzeit entschieden, weil eine Laufzeit von mehreren Minuten eine abschreckende Wirkung hat und die Nutzer das Video tendenziell seltener anschauen. Das Video ist so aufgebaut, dass man es, durch integrierte Textbausteine, sowohl mit als auch ohne Ton anschauen kann und die vermittelten Inhalte versteht. Die einzelnen Funktionen werden nacheinander erklärt, mit Bildern visualisiert und am Ende nochmal zusammen aufgelistet.

Technik

Wir haben uns bei der Herstellung unseres Videos für die digitale Legetechnik entschieden. Diese bietet einige Vorteile gegenüber der Hand-Legetechnik. Eine gleichmäßige Ausleuchtung und die Synchronität von Bewegtbild und Sprechertext können für das gesamte Video gewährleistet werden und nachträgliche Anpassungen sind schneller und präziser umsetzbar.

Besonderheiten

Besonderheiten in Bezug auf die Technik:

Moovly Studio muss nicht heruntergeladen und installiert werden, da es sich um eine webbasierte Software handelt. Desweiteren bietet Moovly Angehörigen von Bildungsinstitutionen, wie z.B. Lehrern oder auch Studierenden, einen kostenfreie Nutzung an.

Software

Nachdem wir uns einen Überblick über in Frage kommende Software verschafft haben, haben wir uns für die cloudbasierte Software Moovly Studio entschieden, da diese einen großen Funktionsumfang bietet und eine umfangreiche Bibliothek mit Bildern in verschiedenen Stilrichtungen bereithält. Zusätzlich besteht die Möglichkeit eigene Inhalte in Bild- und Audioform hochzuladen und in das Video zu integrieren. Außerdem haben uns die Benutzeroberfläche und die Bedienung von Moovly zugesagt, da sie einfach und schnell zu verstehen sind und man sich in kurzer Zeit in die Bedienung einarbeiten kann.

Die Bilder und Icons im Video stammen überwiegend aus der eigenen Bibliothek von Moovly. Die CampusCard ist ein Scan unserer eigenen Ausweise, die wir mit Hilfe von Photoshop verfremdet haben. Die musikalische Untermalung ist frei verfügbaren über die Homepage  Terrasound zu bekommen. Die Textpassagen wurden mit der in Moovly integrierten Audiobearbeitung eingesprochen, geschnitten und in das Video eingefügt.

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.

Videos rundum IM: Kurzeinführung in den Bibliothekskatalog

Kurzeinführung 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. Das Bild wurde entfernt und durch einen entsprechenden Avatar ersetzt. Das Avatar-Bild habe ich unter der Lizenzfreien-Datenbank pixabay.com gedownloadet. Auch die Gültigkeit der Campuscard, Name der Person sowie Matrikelnummer wurden freigestellt und mit neuem Inhalt ergänzt.

Weitere Videobearbeitung

Zur Bearbeitung wurde Camtasia (Version 9) genutzt. Das Programm ermöglicht Video- und Tonaufnahmen aufzuzeichnen und anschließend zu bearbeiten. Die Wahl ist auf dieses Programm gefallen, weil es alle Funktionen vereint, die ich für dieses Video brauche: Aufnahme vom Bildschirm und anschließende Bearbeitung aller Inhalte. Es ist kein weiteres Programm zur Bearbeitung notwendig.

Da die Tonqualität meines Notebooks nicht geeignet war für die Audioaufnahmen, habe ich mein Samsung Galaxy A3 (2016) Smartphone zur Anfertigung der Roh-Audiodateien verwendet.

Die Bildschirmaufnahmen wurden hingegen mit Camtasia angefertigt. Die Materialien wurden anschließend weiter in Camtasia geschnitten, mit Effekten versehen und zusammengesetzt.

Die Schwierigkeit dieses Projektes lag darin, dass Video- und Audiospur im Einklang sein sollten. Zunächst wurde eine komplette Bildschirmaufzeichnung gestartet. Es stellte sich später raus, dass es an einigen Stellen besser war, die Aufzeichnungen zu teilen. Daher besteht das Video nun aus den folgenden Komponenten:

  • Willkommen-Tonspur startet parallel mit der Titelfolie
  • Bild der Bibliotheken parallel mit der Audiospur bzgl. Anmeldung/Campuscard
  • Bild der Campuscard wird auf das Bild der Bibliothek eingeblendet (Effekt eingespielt)
  • Tonspur zur Erläuterung, dass Recherche startet + entsprechende Bildschirmaktion
  • Ergebnisliste als weitere Bildschirmaufnahme mit gesprochenem Wort
Screenshot vom Bearbeitungs-Bord
Bearbeitungs-Bord

 

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.

Videos rundum IM: iCMS System Hochschule Hannover

ICMS HsH

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 können. Jene Schritte führen die Lernenden vom Login im iCMS-System, über die einzelnen Schritte, wie das Erstellen und Herunterladen der Termine als PDF-Datei, die Exportierung in ein lokales Kalender-System (hier Apple-Oberfläche), sowie die Verwendung der heruntergeladenen Kalender-Datei für die Importierung in einen Online-Kalender (hier: google calendar).

Vorgehen:

Hierbei wurde der vorinstallierte Quicktime-Player aus der Mac-Welt verwendet. Der Player ist nicht nur ein Abspielgerät, sondern verfügt auch über die Möglichkeit Ausschnitte oder komplette Bildschirme mitzuschneiden. In den Einstellungen gibt es die Option, die Computer-Maus hervorzuheben und bei Bedarf den Ton bereits mit aufzunehmen. Es ist sich jedoch gegen Letzteres entschieden worden. Die Tonspur wurde nachträglich bei der Videobearbeitung hinzugefügt. Im Erklärvideo werden immer wieder einzelne Folien, wie Vor- und Abspann, eingeblendet. Diese Folien wurden aus der kostenfreien Software GIMP erstellt. Hierbei wurden mehrere Ebenen angelegt. Hintergrund, Text und Corporate-Design Vorlagen von der Hochschule wurden an die jetzigen Positionen justiert. Das Design der Folien wurde von den Vorspann-Folien der Erklärvideos des ELC Hannover übernommen, beziehungsweise angelegt. Videomaterial und Folien wurden anschließend mit dem ebenfalls vorinstallierten Mac-Programm iMovie zum endgültigen Erklärvideo geschnitten. Hierbei wurden einzelne Sequenzen herausgeschnitten, Übergänge zwischen zwei Video-Sequenzen, beziehungsweise Video-Sequenz und Folie mit Feature des Programms „verknüpft“ und Text-Überschriften eingefügt. Anschließend wurde die Tonspur mit dem Diktier-Programm „Sprachmemo“ eines iPhones aufgenommen, bei der Videobearbeitung hinzugefügt und passend zum Video geschnitten.

Der Entschluss für dieses System ein Erklärvideo zu kreieren lag darin begründet, dass das dieses sehr komplex und unübersichtlich für StudienanfängerInnen sei.  Durch die richtige Verwendung jener Zielgruppe kann dieser viel Zeit eingespart und der Studienalltag erleichtert werden.

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.