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.

 

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.

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

Expo Plaza

“Mit der Bahn zur Hochschule – vom Kröpcke zum Expo Plaza”

Autor: Marisa Kaminski

Konzept

Das Thema meines Erklärvideo lautet „Mit der Bahn zur Hochschule – vom Kröpcke zum Expo Plaza“ und beschreibt den Weg mit der Straßenbahnlinie 6 vom „Kröpcke“ zur Endhaltestelle „Messe Ost“ und von dort aus den Fußweg zur Hochschule am Expo Plaza 12. Dieses Thema habe ich mir überlegt, da es den Studierenden den genauen Weg mit zum Hochschulgebäude am Expo Plaza 12 veranschaulicht.

Besonderheiten

Das Besondere an diesem Erklärvideo ist der Skizzenstil. Ich wollte das Video aussehen lassen, als sei es gezeichnet worden, nachdem ich mein Storyboard nach diesem Konzept erstellt habe. Für die Zeichnung des Storyboards benutzte ich Graphit- und Kohlestifte. Eine weitere Besonderheit besteht in der Audio-Untermalung: hierfür habe ich originale Geräusche vom Bahnsteig aufgenommen.

Techniken

Die Fotos habe ich mit einer Lumix-Digitalkamera aufgenommen und anschließend mit GIMP bearbeitet; dazu duplizierte ich zunächst die einzelnen Bilder, entsättigte sie, duplizierte sie ein weiteres Mal, invertierte die Farben und benutzte den Modus „Abwedeln“, um sie anschließend mit einem Faktor von 30 bis 40 „weichzuzeichnen“ (Gaußscher Weichzeichner). Zudem bearbeitete ich einige Bilder zusätzlich mit Microsoft Paint, um beispielsweise die Fahrtdauer darzustellen.

Die Tonaufnahmen der einfahrenden Linie 6 sowie die Ansage der Endhaltestelle habe ich mit dem Olympus Linear PCM Recorder LS-3 aufgenommen. Die Schritte zum Expo-Plaza, die fahrende Bahn und die Stimmen am Kröpcke habe ich als Audio-Dateien im mp3-Format von der Plattform www.hoerpsielbox.de heruntergeladen. Mit dem Programm Audicity habe ich die Audiodateien bearbeitet (z.B. zugeschnitten, Töne abgestimmt, ein- und ausgeblendet).

Mein Videoprogramm war Cyberlink PowerDirector. In diesem Programm habe ich die Bild- und Audiodateien, sowie Text und Spezialeffekte auf verschiedenen Spuren übereinander gelegt. Das fertige Video im avi-Format habe ich per www.convertavitomp4.com in ein mp4-Format konvertiert.

Software

In Verwendung für die Erstellung dieses Erklärvideo war folgende Software: Audacity, GIMP, Paint, Cyberlink PowerDirector, Programm „convert avi to mp4“

 

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: Campus Expo Plaza

Campus Expo Plaza

Campus Expo Plaza

Autoren: Céline Schmelzer und Yannik Faulhaber

Idee

Die Idee für das Video war, den Campus der Fakultät III der Hochschule Hannover übersichtlich darzustellen und Erläuterungen zu den Räumlichkeiten der einzelnen relevanten Gebäude zu geben. Ursprünglich sollte der Campus aus Legosteinen nachgebaut werden, jedoch stellte sich die Umsetzung als sehr zeitaufwendig heraus. Deshalb wurde ein Übersichtsplan mit CAD erstellt und eine Figur gezeichnet. Die Figur wurde für jedes Foto ein Stück weiterbewegt und fotografiert.

Umsetzung

Die Bilder wurden dann mit der Stop-Motion Technik aneinandergefügt. Dafür wurde als Software Windows Movie Maker verwendet. Die Fotos wurden mit einer Nikon 5300 erstellt. Zudem wurde für die Gewährung der Bildstabilität ein Stativ verwendet. Zur perfekten Ausleuchtung wurde ein LED Baustrahler verwendet.

Die Audiodateien wurden bei http://freemusicarchive.org gefunden und heruntergeladen. Für das Intro wurde Track05 von Bi G K ausgewählt, da dieser passend zur Einblendung der Buchstaben passt. Für den restlichen Film fiel die Auswahl auf Immortal Wolferl von Dee Yan-Key, da dieser angenehm auf den erklärenden Inhalt des Films wirkt und eine nette Atmosphäre schafft.

Als Besonderheit wurde für weiche Übergänge zwischen dem Plan und den Infofenstern mit Hilfe der Animation Seitenumblättern oben rechts gesorgt.

Im Abspann befinden sich die Namen der Filmproduzenten, sowie die Quellen der Audiodateien und eine Anmerkung, weshalb dieser Film entstanden ist.

 

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: Einführung Bachelor Informationsmanagement

Einführung Bachelor Informationsmanagement

Einführung Bachelor Informationsmanagement

Autoren: Anthony Stevenson und Florian Lindmüller

Idee

Unsere Idee war ein Animiertes Video zum Thema Informationsmanagement an der Hochschule Hannover zu gestalten. Dabei sollten alle vermittelnden Kern-Kompetenzen transparent gemacht, sowie ein keiner Ausblick in eine mögliche berufliche Zukunft gegeben werden.

Zielsetzung

Die Zielsetzung beinhaltete darauf aufbauend ein fertiges Vorstellungsvideo, dass man vor Einführungsveranstaltungen, Messen oder auf der Hochschulwebsite abspielen bzw. veröffentlichen könnte. Diese Zielsetzung haben wir erreicht.

Arbeitsweg

Wir begannen mit der Erstellung eines Konzepts. Hierfür war es wichtig eine Hauptfigur zu erstellen, welches wir auf Grundlage eines gesehenen Designs in abgewandelter Form nachgestellt hatten. Dann erarbeiteten wir uns die benötigten Informationen, die als Material im Video verwendet wurden. Schließlich stellten wir Visualisierungen der Informationen dar und fügten alles zusammen. Für die Audio-Spur schrieben wir einen Text und gaben ihm jemand mit einer angenehmen Stimme zum Vorlesen.

Verwendete Techniken

Für die Visualisierung der Hauptfigur „Bill“ haben wir Zeichnungen eingescannt, mit Photoshop bearbeitet und in PowerPoint eingefügt. Dazu kamen dann in PowerPoint erstellte Diagramme und Grafiken, die auch noch mit Photoshop bearbeitet wurden, damit sich diese besser in Adobe Premiere Pro verarbeiten ließen. Diese platzierten wir auf jeder Folie so genau, dass wir die Folien hintereinander abspielen konnten und nicht um modulieren mussten. Danach haben wir uns ein Soundtrack aus dem Internet heruntergeladen, welches als Hintergrundmusik abgespielt wird. Auf Bild und Hintergrundmusik folgte dann die Audio-Spur, die über ein Mikrofon aufgenommen wurde. Das Zusammensetzen von Audio und Videospur wurde dann mittels Adobe Premiere Pro realisiert.

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: Erklärvideo – Was sind Stakeholder?

Stakeholder - Erklärung

Erklärvideo – Was sind Stakeholder?

Autoren: Rabea Langholz

Idee/Zielsetzung

Meine Idee und Zielsetzung war es einen studiengangsbezogenen Fachbegriff zu erklären. Ich habe mich deshalb für die Art eines Erklärvideos entschieden. Nachdem ich den Begriff „Stakeholder“ für mein Video ausgewählt hatte, begann ich mit der Recherche nach Informationen. Darauffolgend erstellte ich eine Mindmap, in der ich alle Ideen sammelte. Nach Aufstellung einer Gliederung und der Sortierung meiner Daten konnte der grundlegende Prozess der Erstellung meines Videos starten.

Programme/Vorgehen

Ich habe mir dazu ein Online Programm namens „GoAnimate“ zur Hilfe gezogen. Innerhalb dieses Programmes hatte ich 2 kostenlose Testwochen, indem ich mein individuelles Projekt erstellen konnte (Vgl. Abbildung 1).

Abbildung 1 - Hauptmenu
Abbildung 1 – Hauptmenu

Nach der Anlegung eines Kontos und der Freischaltung konnte ich direkt mit meinem Projekt beginnen. Dazu musste ich zunächst einen „Style“ wählen, indem mein Video gestaltet sein soll. Ich habe mich in dem Fall für den Style „Whiteboard Animation“ entschieden.

Abbildung 2 - Auswahl Style
Abbildung 2 – Auswahl Style

Nach Auswahl des Styles öffnete sich ein neues Fenster in dem ich alles rund um mein Video bearbeiten konnte. Dabei war der Bildschirm in drei Hauptsegmente unterteilt. Links die Sammlung und aller Galerie aller Symbole und Figuren, unten die Zeitleiste und in der Mitte der Bildschirm auf dem die derzeit aktuelle Folie dargestellt wurde.

Bearbeitungsmodus
Abbildung 3 – Bearbeitungsmodus

Die Bearbeitung innerhalb des Programms erwies sich als sehr simpel und unkompliziert. Alle Schritte und Symbole waren genau kenntlich gemacht, sodass die Handhabung sehr benutzerfreundlich war.

Die Erstellung einer Folie beanspruchte je nach Thematik einige Zeit. Man muss jedes Symbol, jede Figur, jede Animation und jedes Textfeld individuell erstellen und zusammenfügen. Hierbei erwies sich das Schneiden von Sequenzen, die Auswahl der Animationen der Figuren und die Dauer der einzelnen „Felder“ als grundlegende Techniken.

Das Online Programm bietet für Nutzer drei verschiedene „Plans“ an. Plans sind in diesem Fall verschiedene Pakete, die man buchen kann. Jedes Paket hat andere Features. So höher der Preis, desto mehr lässt sich mit dem Programm gestalten und machen. Das Basispaket kostet 39$ pro Monat , das Premium Paket 79$ pro Monat und das Ultra Premium Paket indem alle Funktionen enthalten sind 159$ pro Monat (Vgl. Abbildung 4).

Screenshot Preise
Abbildung 4 – Preise

Innerhalb meiner Probewochen hatte ich leider keine Lizenz zum direkten Download meines Videos, weshalb ich eine andere Software für die Aufnahme meines Videos sowie für die Hinterlegung der Audiospur verwenden musste (Camtasia).

 

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