Bibliotheken im digitalen Wandel: Von der Buchkarte zum digitalen Nutzerkonto

Autorinnen: Anna Pläp und Tamara Schaufler

Bibliotheken befinden sich im digitalen Wandel – in aktuellen Zeiten von Corona mehr denn je.  Dass viele Publikationen online verfügbar sind, wir unsere Medien am Verbuchungsautomaten selbst ausleihen können und diese über das Internet mit ein paar Klicks verlängern, ist für viele Bibliotheksnutzer:innen der ganz normale Alltag. So wird der digitale Wandel in Bibliotheken meist mit Zukunftsvisionen verbunden. Doch wie viel Digitalisierung von Bibliotheksdiensten gab es in den vergangenen Jahr(zehnt)en bereits, und wie sah es eigentlich früher aus? [1]

Inhaltsverzeichnis

Buchkarten und Katalogkarteien – konventionelle Ausleihverfahren

Manch eine:r erinnert sich noch daran: bevor digitale Ausleihsysteme Einzug in die Bibliothekswelt erhalten haben, gestaltete sich das Ausleihverfahren analog. Dies war zum Teil mit erheblichem Aufwand verbunden.

Hierzu gab es verschiedene Vorgehensweisen:

Die Buchkarte

Jedes ausleihbare Buch im Bestand der Bibliothek hatte eine Buchtasche an der vorderen oder hinteren Innenseite des Buchdeckels eingeklebt. Darin befand sich eine Buchkarte, auf der Signatur, Verfasser:in und Titel des Buches vermerkt waren. Ein Großteil der Karte war frei für die Eintragung der Nutzernummer und ggf. Fristdaten des Entleihenden. Wollte man es ausleihen, ging man zur Leihstelle der Bibliothek, wo durch eine:n Mitarbeiter:in die Nutzernummer und teilweise der Name der entleihenden Person auf die Buchkarte eingetragen wurde. Diese wurde anschließend nach Rückgabedatum in die sogenannte Fristkartei einsortiert. Auf dem Vorsatzblatt oder dem Rückcover des Buches gab es ein Fristblatt, worauf das Rückgabedatum gestempelt wurde. [2]

Für die Bibliotheksmitarbeiter:innen ergab sich somit der Aufwand, die Fristkartei regelmäßig manuell zu überprüfen. Waren Leihfristen überschritten, haben sie die Mahngebühren manuell erstellt. Verlängerungswünsche musste man als Kund:in für jedes Buch persönlich vortragen, um die Leihfrist anpassen zu lassen.

Leihscheine

Für die Ausleihe eines Buches hat der Entleihende einen Leihschein ausgefüllt. Dieser bestand in der Regel aus drei Teilen, in einigen Bibliotheken fand er zweiteilig Anwendung. Der erste Abschnitt (Stammabschnitt) enthielt die Daten des Bestellenden sowie Titel und Verfasser:in des Buches. Die beiden weiteren Abschnitte, der Kupon und der Löschabschnitt enthielten die Signatur des Buches und die Benutzernummer des Entleihenden. Bei zweiteiligem Leihschein entfiel der Löschabschnitt.

In der Leihstelle der Bibliothek gab es zwei Karteien: die Benutzerkartei und die Kuponkartei. Die Benutzerkartei war nach Namen oder Benutzernummer aufgestellt. Hier wurden der Stammabschnitt und der Löschabschnitt, gestempelt mit der Leihfrist, einsortiert. Die Kuponkartei war nach Signaturen aufgestellt, sodass anhand dieser festgestellt werden konnte, bei welchem Entleihenden sich ein bestimmtes Buch befindet.

Der Löschabschnitt kam bei der Rückgabe des Buches zum Einsatz. Anhand dieses Abschnitts wurde der Kupon aus der Kuponkartei gezogen. Den Stammabschnitt erhielt der Entleihende des Buches als Rückgabequittung.

Gab es keinen Löschabschnitt, wurde der Kupon anhand der Bücher selbst gezogen. Mitunter gab es keine Kuponkartei, folglich verblieb der Kupon als Repräsentant im Regal an der jeweiligen Stelle des Buches. [3]

Kartenkataloge

Erste Kartenkataloge (auch Zettelkataloge genannt) mit einfachsten Mitteln gab es bereits gegen Ende des 16. Jahrhunderts. Kartenkataloge, wie wir sie heute teilweise noch kennen, gab es seit Anfang der 1930er Jahre. [4]

Es gab teilweise mehrere Kartenschränke, in denen für jedes Buch im Bestand der Bibliothek eine Karte mit den bibliografischen Angaben lag. Diese wurde mit Hilfe einer Schreibmaschine angefertigt und teilweise handschriftlich ergänzt. Für die Recherche darin konnte nach Verfasser:in, Titel, Schlagwort, Standort (=Signatur) oder Regionen gesucht werden. Natürlich gab es für jede dieser Optionen einen eigenen Kartenschrank mit entsprechenden Karten. Für ein Buch gab es also mehrere Karten.

Viele Bibliotheken haben ihre Kartenkataloge digitalisiert, sodass darin weiterhin nach Altbestand gesucht werden kann.  Zwar sind die Daten zum Teil in digitale Datenbanken eingespielt worden, aufgrund der Vielzahl an Datensätzen jedoch nicht immer vollständig. Beispiele (anklicken, um auf die entsprechende Website zu kommen):

Kartenkatalog der ZBW

Kartenkataloge des Hauses Berliner Stadtbibliothek

Neuer Videopodcast: Lernen und Lehren in Zeiten der Corona-Krise

Videopodcast zu Online-Lehre im Corona-Modus

In unserem neuen Videopodcast zu Lernen und Lehren in Zeiten der Corona-Krise hat sich Gerrit Wucherpfennig vom QpLuS-IM-Projekt mit Studierenden des Studiengangs Informationsmanagement zu ihren bisherigen Erfahrungen in den letzten Wochen unterhalten.

Wie erleben sie die Corona-Auswirkungen im Studium? Wie funktioniert die Lehre? Und wie kommen beide persönlich damit zurecht? Antworten findet ihr im folgenden Videopodcast:

Videopodcast: Lernen und Lehren in Zeiten der Corona-Krise

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