Videos rundum IM: Highlight des Hochschulalltags

Hochschulalltag_hsh_hannover_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 in den nächsten Wochen nach und nach vor.

Highlight des Hochschulalltags

Autoren: Maleen Lorenzen, Michelle Orthmann, Kendra Wulf

Konzept, Software, Techniken und Besonderheiten unseres Stop Motion Films

Allgemeine Aspekte des Animationsfilms:

Bei unserer Projektarbeit für das Fach „Entwicklung von Multimediasystemen 1“ im fünften Semester Informationsmanagement haben wir uns entschiedenen ein Stop Motion Video zu erstellen. Behandelt werden sollte ein Thema aus unserem universitären Alltag.

Nachdem wir uns zusammengesetzt haben und ein erstes Brainstorming durchgeführt haben, hatten wir eine ungefähre Vorstellung davon, welches Thema das Video behandeln sollte, welche Settings in dem Video zu sehen seien sollen und einen ungefähren Ablauf der Geschichte.

Thematisiert haben wir letztendlich die Essenauswahl in der Mensa „Große Pause“ der Hochschule Hannover. Wichtig war uns, dass das Video witzig und ironisch werden, und den Zuschauer am Ende amüsierten sollte.

Wir begannen mit der konkreten Produktion des Videos, indem wir ein karikaturistisches, abstraktes Storyboard erstellt haben, welches den ungefähren Verlauf der einzelnen Szenen darstellte. Da wir nun den ungefähren Ablauf und eine Idee für die Darstellung der Szenen festgelegt haben, begannen wir damit den Weg zur Mensa zu „filmen“ bzw. Bild für Bild aufzunehmen. Die Aufnahme der einzelnen, aufeinanderfolgenden Bilder war sehr zeitaufwändig, erforderte gute Lichtverhältnisse und eine gute Kamera. Die Bilder mussten exakt aufeinander passen, es durften keine zu großen Sprünge entstehen und die Bilder durften nicht verwackeln. Während des Drehs kamen uns noch einige besondere Ideen, die in den Film eingefügt werden sollten. So sollte es am Ende zum Beispiel so aussehen, als würde Michelle die Treppen zur Bahnstation hinaufrutschen und den Weg über die Brücke fliegen. Besonders schwer war es Michelle im Sprung aufzunehmen.

Technische Aspekte des Animationsfilms:

Der Film wurde mit dem Programm „iMovie“ erstellt, welches auf allen Apple Geräten installiert ist. Zunächst ergab sich ein Problem, da das Programm nicht mit allen Bildern arbeiten konnte. Die ca. 1000 Einzelbilder mussten in einzelne Sequenzen eingeteilt und bearbeitet werden. Der Film besteht insgesamt aus zehn Sequenzen, die aneinander gefügt und mit verschiedenen Tempostufen bearbeiten wurden. Die Bilder wurden an einem sonnigen Tag aufgenommen, daher wurden die Bilder kaum bis gar nicht bearbeitet. Teilweise musste lediglich die Helligkeit angepasst werden.

Der Film enthält zwei Tonspuren. Hauptsächlich zu hören ist das Lied „Way to Success“ von Addict Sound, dieses geht zum Ende des Film über in das Lied „Happy“ von Alexey Anisimov. Beide Songs stammen aus der Gema-freien Bibliothek von Jamendo Music.

Storyboard Highlights des Hoschullebens

Videos rundum IM: Der Campus an der Hochschule Hannover – Fakultät III

hsh_informationsmanagement_expo_campus

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 in den nächsten Wochen nach und nach vor.

Der Campus an der Hochschule Hannover – Fakultät III

Autorin: Hagira Mohmand

Für die Veranstaltung “Entwicklung von Multimediasystemen I” war uns das Thema „Hochschule Hannover“ vorgegeben.

Als Idee kam mir bereits sehr schnell: der Campus an der Hochschule (Fakultät III). Bevor ich mit dem Storyboard angefangen habe, habe ich mir die in der Vorlesung zugestellten Folien sorgfältig angeschaut, um mir nicht nur Gedanken zur Umsetzung und der Technikmethoden zu machen, sondern um mich auch inspirieren zu lassen. Beim studieren der Folien hat mir die Methode mit dem Aufnehmen des Desktops sehr gefallen, welches ich mir dann auch als Ziel gesetzt habe.

Um mir selbst gut im Klaren zu sein, wie und was ich genau umsetze, habe ich dann auch vorerst mit der Umsetzung meines Storyboards begonnen. Hierfür habe ich die klassische Variante gewählt, nämlich dem schlichten aufzeichnen auf Papier. Nach mehreren unterschiedlichen Ideen die hierbei rauskamen, hat mir ein Storyboard besonders gut gefallen. Diesen habe ich mir dann auch schließlich als Ziel gesetzt. Bei der Umsetzung, habe ich vorher mit dem filmen und Fotografieren begonnen, um so auch überhaupt Material zu haben, welche ich dann digital bearbeiten kann.

Hierfür habe ich neben meiner Digitalkamera+Stativ auch meine Drohne zum filmen genutzt. Die Aufnahmen mit der Drohne (DJI Mavic Air Flammenrot) haben allerdings viel zu sehr gewackelt, da der Wind zu stark gewesen ist. Daher musste ich leider auf diese Aufnahmen verzichten. Nach mehreren Versuchen, gescheites Material zu sammeln bzw. zu drehen, habe ich dann doch gutes „Rohmaterial“ gesammelt. Zwei Videoaufnahmen und 1895 Bilder habe ich insgesamt gemacht. Die Bearbeitung habe ich an meinem Macbook Air und dem Videobearbeitungsprogramm „iMovie“ durchgeführt. Bevor ich mit dem Schneiden und bearbeiten begonnen habe, habe ich das Programm SCREEN CAPTURE – CAMTASIA STUDIO installiert. Mit diesem Programm habe ich mein Desktop zusammen mit der Website der Hochschule Hannover gefilmt.

Für die Bearbeitung einer Zoomeinstellung dieser Aufnahme habe ich das Programm „Photogrid“ benutzt und mit „iMovie“ passend bearbeitet bzw. geschnitten. Für gute und anschauliche Übergänge habe ich anhand des Programms „iMovie“ unter der Einstellung „Trailer“ ein Trailer-Video erstellt. Hierfür musste ich die Überschriften alle pro Sequenz eingeben und ausrichten. Diese von mir fertig bearbeitete Trailer-Datei habe ich anschließend, zusammen mit der Hintergrundmusik „Soundtrack-Retro“, die mir ebenfalls von „iMovie“ zur Verfügung gestellt ist, in eine Film-Datei umgewandelt. So konnte ich für meine aufgenommenen Videos und Fotos, diesen Trailer ideal als Vorspann, Abspann sowie Zwischenübergänge einsetzen. Nachdem ich diese Sequenzen zusammen mit der Aufnahme durch Capture-Camtasia Studio eingefügt habe, fügte ich die Bilder in Bilderreihen zusammen. Hier musste ich die Dauer in 0,2 Sekunden pro Bild ändern. Eine Videoaufnahme am Campus habe ich unter anderem „rückwärts“ und in einem verlangsamten Tempo bearbeiten und einfügen lassen. Die laufende Uhr habe ich zusammen mit dem Programm Photoshop CS4 erstellt.

Den Soundton der tickenden Uhr habe ich bei „AppleMusic“ heruntergeladen. Unter „Videoüberlagerung“→„Bild-in-Bild“→„Blenden“ habe ich sowohl die tickende Uhr, als auch die roten Kreise und Pfeile in die Foto- bzw. Videosequenzen eingefügt.

Die roten Kreise und Pfeile habe ich von Pixabay legal heruntergeladen.

Insgesamt habe ich sowohl Videos gekürzt, geschnitten, Bilderreihen erstellt, Desktop-Aufnahmen gedreht, Geschwindigkeiten eingestellt, Audiodateien eingesetzt, Audiodateien geschnitten, überblendet eingesetzt und oder auch stummgeschaltet, Fotos überblendet oder auch als „Bild-in-Bild“ eingesetzt, Überschriften bzw. Texte eingefügt, Überblendungen eingesetzt und einen Vor- und Abspann erstellt und eingefügt. So kam ich zu meiner Fertigstellung meiner Animation als Hausarbeit für mein Studium Informationsmanagement, zum Thema „Der Campus an der Hochschule Hannover Fakultät III“.

Zusammenfassung

Storyboard

Endpräsentation bei Prezi

Videos rundum IM: Was ist Informationsmanagement?

Was ist Informationsmanagement?

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 in den nächsten Wochen nach und nach vor.

Was ist Informationsmanagement?

Autoren: Mareike Schulte, Sven Bessel

Kurzbeschreibung

In unserem Studium Informationsmanagement hörten wir folgenden Satz in verschiedene Varianten immer wieder:

„Die richtige Information zum richtigen Zeitpunkt in der richtigen Form und für die richtige Zielgruppe.“

Dieser Satz beschreibt kurz und knapp die Bedeutung von Informationsmanagement. Daher kam uns die Idee, diesen Satz als Grundlage für unsere Animation zu nehmen. Dabei sollten die einzelnen Elemente des Satzes visuell dargestellt werden. Bei der Erstellung des Skripts entschieden wir uns dafür die Animation inhaltlich auszuschmücken. Daher fügten wir eine Sequenz ein, in der auf humorvolle Art der Mangel an Informationen mit traurigen Menschen und schlechtem Wetter gezeigt wird. Der Erhalt von Informationen führt im Gegenzug zu fröhlichen Menschen und gutem Wetter. Zum Schluss fügten wir noch einen Aufruf zum Studieren unseres Studiengangs hinzu.

Wir entschieden uns bewusst gegen Software für Erklärvideos und für die eigene Herstellung aller Elemente. Nach den ersten Versuchen mit der Legetechnik entschieden wir uns für eine andere Vorgehensweise, da wir mit dem Ergebnis nicht zufrieden waren.

Die Zeichnungen wurden komplett als Vektorgrafiken in Adobe Photoshop erstellt und anschließend mit Keyframes in Adobe Premiere Pro animiert. Die Animation setzt sich aus einer Mischung von nicht bewegten und mit Keyframes animierten Bildern zusammen, welche auf verschiedenen Ebenen liegen. Die zeitliche Abfolge und die Menge der Keyframes haben wir nach Bedarf angepasst. Den eingesprochenen Text haben wir mit Audacity aufgenommen und anschließend in Adobe Premiere Pro importiert und passend zum Video zurechtgeschnitten.

Die Soundeffekte haben wir aus dem Internet heruntergeladen, alle sind Creative Commons lizensiert. Diese haben wir ebenfalls in Adobe Premiere Pro importiert und passend zurechtgeschnitten. Die Reduzierung des Hintergrundrauschens und die Erstellung des Vorspanns erfolgten nachträglich mit iMovie für Mac.

Das Ergebnis ist ein kleiner unterhaltsamer Werbefilm zum Thema Informationsmanagement und dem Studiengang an der HsH.

Das Storyboard zur Animation ist hier zu finden.

 

WebLab-Portfolio: Tutorials

Hier findet ihr Tutorials zu Webentwicklung mit HTML5, CSS3 und JavaScript sowie zu weiteren Themen, die im Studiengang Informationsmanagement oder auch sonst immer mal wieder interessant sein können.
Nach und nach ergänzen wir hier neue Tutorials, die entweder von Studierenden im Rahmen von Lehrveranstaltungen oder vom WebLab-Team erstellt werden.

Gern nehmen wir natürlich auch eure Vorschläge zu neuen Tutorials entgegen. Meldet euch einfach bei uns!

Wetter Szenarien

Tutorial: Wetter Szenarien

Tutorial: Wetter Szenarien Autoren: Fabian Krampe und Michel Kühne Das Konzept Das Konzept hinter dem Projekt sah vor, eine Animation zu schaffen, welche dem Nutzer alle möglichen Wetter Szenarien zeigt. Die Animation wird hierbei im Hintergrund eines einfachen Preloaders geladen. Der programmierte Button ermöglicht es außerdem, die Animation zu “verstecken” oder diese wieder anzeigen zu …

0 Kommentare
Preloader

Tutorial: Einen Preloader erstellen

Tutorial: Einen Preloader erstellen Autoren: Straube und Wisnia Konzept Preloader sind Animationen, die während dem Ladevorgang einer Website angezeigt werden. Sie informieren den Nutzer über Ladeprozesse und befriedigen sein Bedürfnis  zu wissen, was während der Interaktion mit einer Website im Hintergrund abläuft. Gleichzeitig überbrücken die Wartezeit. So sind sie zum einen unterhaltsam, zum andern verbessern …

0 Kommentare
multisteplogin

Tutorial: Multistep Login Formular

Tutorial: Multistep Login Formular Autor: Ilja Melnik Einleitung Bei dieser Prüfungsleistung handelt es sich um eine konzeptionelle Erstellung eines Multistep Formulars mit funktionalen Animationen. Für die Umsetzung wurden ausschließlich Html-5, Css3 und Javascript (JQuery) verwendet. Die Grundidee ist ein Formular mit visuellem Feedback und einer inhaltlichen Strukturierung. Dies wird primär mit drei funktionalen Animationen umgesetzt: …

0 Kommentare
Onepager

Tutorial: Informativer OnePager für Austauschstudenten

Tutorial: Informativer OnePager für Austauschstudenten Autor: Cagla Bacaksiz Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit …

0 Kommentare
Dynamische Notendarstellung

Tutorial: Dynamische Notendarstellung

Dynamische Notendarstellung Autor: Jana Avemarg Design Die Grundlage bildet eine auf HTML5 basierte Single-Page Website (1). Diese bietet den Vorteil, dass die Navigation ohne Verzögerung ausgeführt, da sich der Besucher immer der gleichen Seite befindet, ohne es zu merken. Für eine schönere Darstellung wurde eine öffentlich verfügbare Schriftart von google (2) und ein Farbschema von coolors.co …

0 Kommentare
Tutorials zu Webentwicklung

WebLab-Projekt: Tutorials zu Webentwicklung

Als fortlaufendes WebLab-Projekt veröffentlichen wir hier Tutorials zum Thema Webentwicklung. Einige Tutorials werden vom WebLab-Team erstellt, andere entstehen im Rahmen von Lehrveranstaltungen durch Studierende des Studiengangs Informationsmanagement (auch berufsbegleitend). Wir freuen uns auf Ihre Vorschläge für neue Tutorials! Bisher veröffentlichte Tutorials finden Sie hier.

0 Kommentare

Tutorial: Login Kalender

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Login Kalender Autoren: Melis Rufaioglu …

0 Kommentare
Klausuren Countdown

Tutorial: Klausuren Countdown

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Klausuren Countdown Autor: Matthias Olbrisch …

0 Kommentare
Radiales Menü mit JavaScript

Tutorial: Radiales Menü mit JavaScript

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Technisches Konzept für ein radiales Menü Autor: Julian Hundertmark Als …

0 Kommentare
Hamburger Menü

Tutorial: Ein mobiles Hamburger Menü

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Konzept: Ein mobiles Hamburger Menü Autorinnen: Katharina Suhr, Anna Ratzke …

0 Kommentare
Login und Registrierungsformular

Tutorial: Registrierungs- und Loginformular mit jQuery

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Registrierungs- und Loginformular Autoren: Felix Struckmann, Yannik Wissner Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV Ziel …

0 Kommentare
Dropdown Multiselect List mit Semantic UI

Tutorial: Multiselect Dropdown Liste mit Semantic UI

Eine Multiselect Dropdown Liste erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg) Autor: Franziska Braun Tutorial Die Multiselect Dropdown-Listen werden in Online-Formularen (Bestellungen, Kontaktformulare) oder Online-Fragebögen verwendet. In diesem Beispiel können Lehrveranstaltungen ausgewählt werden. Die Anzahl ist auf maximal 3 Lehrveranstaltungen begrenzt. Eine HTML Dropdown-Listen allein ist …

0 Kommentare
Kiosktour durch Hannover

Tutorial: Interaktive Karte – Kiosktour Hannover

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Interaktive Karte – Kiosktour Hannover Autor: Marina Cordes und Catarina Schultz …

1 Kommentar
Funktionale Animation und Infografik

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Eine Infografik als funktionale Animation erstellt im Rahmen des Moduls “Medienintegration” im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg) Autor: Frieda Josi  Tutorial: Einsatzzweck und Einordnung in Animationsart Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit …

1 Kommentar
Tutorial: Scroll Percent Display with liquid Animation

Tutorial: Scroll Percent Display with liquid Animation

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Konzept und Quellcode mit Erläuterung von Scroll Percent Display with …

0 Kommentare
Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Interaktive Führung durch den Studiengang Informationsmanagement Autor: Lena Meyer Der Studiengang …

0 Kommentare
Google Floating Menü Erweiterung

Tutorial: Ein animiertes Menü im Stil von Googles “floating menu”

Autor: Birte Rohden Als Prüfungsleistung für den Kurs “Entwicklung von Multimedia-Systemen II” im Sommersemester 2017 (Hochschule Hannover, Studiengang Informationsmanagement) sollten die Studierenden eine funktionale Animation entwickeln und folgend ein Tutorial für ebenjenes schreiben. Konzept dieser Animation war, Googles “floating menu”, wie es vor allem auf Smartphones bekannt ist, nachzubauen und diesem als Bonus in seinen …

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

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

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Ein Akkordeonmenü für die Fakultät …

0 Kommentare

Tutorial: Ein responsives Menü mit jQuery für die HsH

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Ein responsives Menü mit jQuery …

0 Kommentare
WebLab HsH

Tutorial: WWW-Techniken 1 – Wie bekomme ich meine Website ins Internet?

Bevor Sie eine Website online stellen können, müssen Sie ein paar Vorbereitungen treffen: Beantragen Sie einen eigenen Webspace beim Webhosting-Team der Hochschule Hannover. beachten Sie hierbei, dass der dort gewählte Benutzername der erste Teil Ihres Domainnamens wird. Fassen Sie sich also möglichst kurz. Der Webspace ist nötig, damit Ihre Internetseite später rundum die Uhr öffentlich über …

3 comments

WebLab-Portfolio: Rundum Informationsmanagement

In einigen Lehrveranstaltungen haben wir uns mit der medialen Aufbereitung von Inhalten rundum den Studiengang Informationsmanagement befasst. Von Videos, was Informationsmanagement überhaupt ist oder den Kompetenzfeldern bis zu interaktiven Storytellings zum studentischen Leben oder Infografiken mit JavaScript findet ihr hier in unserer bisherigen Sammlung.

WebLab Hsh: PWA IM-Info

Progressive Web Apps für IM: Informationsmanagement-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: Navigation: Anforderung: Navigation Beschreibung: Dem Nutzer soll …

0 Kommentare

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 …

1 Kommentar

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 …

0 Kommentare
Funktion Campus Card

Videos rundum IM: Die Funktionen der CampusCard

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 …

0 Kommentare
Kurzeinführung Bibliothekskatalog

Videos rundum IM: Kurzeinführung in den 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. …

0 Kommentare
ICMS HsH

Videos rundum IM: iCMS System Hochschule Hannover

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 …

0 Kommentare
Expo Plaza

Videos rundum IM: “Mit der Bahn zur Hochschule – vom Kröpcke zum 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 …

0 Kommentare
Campus Expo Plaza

Videos rundum IM: 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 …

0 Kommentare
Einführung Bachelor Informationsmanagement

Videos rundum IM: 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 …

0 Kommentare
Stakeholder - Erklärung

Videos rundum IM: Erklärvideo – Was sind Stakeholder?

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 …

0 Kommentare
1. Semester Informationsmanagement

Videos rundum IM: Das erste 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 …

0 Kommentare
Callums Legofilm

Videos rundum IM: Callums Legofilm

Callums Legofilm Autoren: Callum Berlin Konzept Zunächst wusste ich nicht, was für einen Film ich erstellen sollte, da ich das Studium in irgendeiner Weise einbinden musste. Ich wollte von Anfang an einen Legofilm erstellen, weil ich schon vorher testweise Legofilme gedreht habe. Als ich dann erfahren habe, dass der Alltag eines Studenten auch dargestellt werden …

0 Kommentare
Videos rundum IM: Ein Tag an der Expo Plaza

Videos rundum IM: Ein Tag an der Expo Plaza

Ein Tag an der Expo Plaza Autoren: Laura von Urff und Vanessa Brüning Idee Mit dem Film zeigen wir einen Tag  aus der Sicht eines Studenten an der Hochschule Hannover. Dabei gehen wir auf den etwas weiteren Anfahrtsweg ein, das Essen in der Mensa und die Umgebung des Expo-Geländes. Die Szenen des Films zeigen die …

0 Kommentare
Neue Tagesschließfächer an der Hochschule Hannover

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

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Videos rundum IM: Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

Was ist Informationsmanagement? Autor: Kira Neukam Idee Die Idee hinter dem Film war, eine kurze, verständliche Beschreibung des Studiengangs Informationsmanagement und dessen Inhalte wiederzugeben. Bei der Animationstechnik wurde, eine einfache Legetechnik mit Bildern verwendet. Die dazu benötigten Zeichnungen habe ich selber per Hand angefertigt. Mit diesen einfach gehaltenen Bildern sollten wichtige Sachverhalte und Merkmale visuell …

0 Kommentare
Die Funktionen der CampusCard

Videos rundum IM: Funktionen der CampusCard der HsH

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 …

0 Kommentare
Kompetenzfelder im Studiengang IM

Videos rundum 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 …

0 Kommentare
HsH - Rundgang

Videos rundum IM: HsH-Rundgang

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos stellen wir euch …

0 Kommentare
Students Insider

Videos rundum IM: Students insider

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 …

0 Kommentare
Effizienz im Studium

Videos rundum IM: Effizienz im Studium

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 …

0 Kommentare
Lego Python

Video rundum IM: Lego Python

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 …

0 Kommentare
Dein Weg zum Bachelor

Videos rundum IM: Dein Weg zum Bachelor

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 …

0 Kommentare
Fernleihe in der Bibliothek

Videos rundum IM: Was ist eigentlich die Fernleihe?

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 …

0 Kommentare
Hochschulalltag_hsh_hannover_im

Videos rundum IM: Highlight des Hochschulalltags

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 …

0 Kommentare
hsh_informationsmanagement_expo_campus

Videos rundum IM: Der Campus an der Hochschule Hannover – Fakultät III

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 …

0 Kommentare
Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

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 …

1 Kommentar

Stop-Motion: Post-Its und Gaming

Im Rahmen des Kurses “Entwicklung von Multimediasystemen I” (Studiengang Informationsmanagement, Fakultät 3, Hochschule Hannover) erstellten Philipp Höltermann und Christian Koch ein Stop-Motion-Video. Das Video greift Videospielklassiker und Gaming-Neuheiten mittels Post-Its auf. Erstellt wurde das Video nach klassischer Stop-Motion-Technik mit Adobe Photoshop und Premiere.

0 Kommentare
WebLab-HsH_Interaktives_Memory_Spiel

WebLab-Projekt: Interaktives Memory-Spiel für IM-Studiengang

Im Rahmen der Ideen-Expo wurde von der Hochschule ein Kartenspiel gedruckt, das an potentielle Studieninteressierte ausgehändigt werden soll. Damit dieses Kartenspiel jedoch nicht nur analog verfügbar ist, hat das WebLab der Hochschule Hannover eine digitale Version des Spiels mittels JavaScript entwickelt. Als erstes haben wir eine vorläufige Spieloberfläche geschaffen, auf der momentan im oberen Bereich …

0 Kommentare

Stop-Motion: Imagination – Das Entstehen einer Zeichnung

Das Stop-Motion-Video wurde von Sebastian Brielich, Sebastian Bartsch und Henning Otto erstellt. Die Ersteller schreiben zu ihrer Idee: “Die grundlegende Idee hinter „Imagination“ soll das Entstehen einer Zeichnung vorweisen, aus der schließlich eine reale Handlung hervorgeht. Nach Ablauf der realen Handlung soll schließlich wieder die Wirklichkeit zur „Imagination“ werden, in dem die Darsteller aus dem Bild …

0 Kommentare
Interaktives Storytelling: Studentischer Alltag

Interaktives Storytelling: Studentischer Alltag

Das von Birte Rohden und Julian Hundertmark erstellte Storytelling zeigt einen typischen Tagesablauf eines Informationsmanagement Studenten. Für die Umsetzung wurden HTML5, CSS3, Bootstrap, JavaScript (u.a. AngularJS), Adobe Photoshop und Windows Live Movie Maker benutzt. Hier geht’s zum Storytelling: Interaktives Storytelling: Studentischer Alltag Im Kurs “Ausgewählte Fragen der Medieninformatik” sind im Wintersemester 2016/17 einige gute Arbeiten …

0 Kommentare

Videos rundum IM: Vom Hauptbahnhof zur Expo Plaza

Die Fakultät III der Hochschule Hannover, zu der der Studiengang Informationsmanagement und auch das WebLab gehören, liegt nicht zentral in der Innenstadt, sondern etwas weiter außerhalb, an der Expo Plaza. Um neuen Studierenden und Besuchern die erste Anfahrt zu erleichtern und zu veranschaulichen haben wir hier ein kurzes Video für euch, das den Weg vom …

0 Kommentare
Was ist Informationsmanagement?

Videos rundum IM: Was ist Informationsmanagement?

Was ist eigentlich Informationsmanagement? Diese Frage stellt sich mit Sicherheit jeder, der zum ersten Mal von dem Studiengang hört. Die Informationsmanagementstudentin Frieda Josi hat sich dieser Frage für die Prüfungsleistung des Moduls Wissensverarbeitung von Audio- und Bildinformationen angenommen und ein einminütiges Informationsvideo angefertigt, das sich mit der Definition, den Aufgaben und dem Einsatzgebiet von Informationsmanagement …

2 comments
Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Im Projekt “Infografiken” (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt. Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche …

0 Kommentare

WebLab-Portfolio: BestOf studentischer Arbeiten

In diesem Portfolio-Bereich findet ihr studentische Arbeiten aus dem Studiengang Informationsmanagement, die besonders gut gelungen sind. Hier veröffentlichen wir sehr gute Ergebnisse aus Lehrveranstaltungen und herausragende Bachelorarbeiten. Bislang findet ihr hier Arbeiten aus dem Kompetenzfeld Web Information Management mit Schwerpunkt auf interaktive Medien und Webentwicklung. Wir hoffen, dass wir in Zukunft auch Arbeiten aus anderen Kompetenzfeldern und Schwerpunkten hier veröffentlichen dürfen.

Falls ihr einen Vorschlag für eine BestOf-Arbeit habt, freuen wir uns, wenn ihr euch meldet.

 

WebLab HsH: Data Mining und Warenkorbanalyse

Data Mining bei der Warenkorbanalyse

Autori*nnen: Judith Hauschulz und Verena-Christin Schmidt Oder: Werden Windeln und Bier wirklich oft zusammen gekauft? Die Warenkorbanalyse gehört zum Data Mining und ist ein Anwendungs-gebiet der Assoziationsanalyse. Wenn du diese Begriffe hörst, ist dir wahrscheinlich klar, dass es um Daten geht. Aber das klingt nun vielleicht etwas trocken, deshalb fangen wir nochmal neu an: Du …

0 Kommentare
WebLab HsH: Data Mining

Aufgabentypen des Data Mining

Autorin:  Linda Görzen Dieser Beitrag im Überblick: Einführung: Data Mining – Was ist das? Klassifikation Regressionsanalyse Assoziationsanalyse Ausreißererkennung Clusteranalyse Fazit Einführung: Data Mining – Was ist das? ”Signals always point to something. In this sense, a signal is not a thing but a relationship. Data becomes useful knowledge of something that matters when it builds …

0 Kommentare
WebLab HsH: Bachelorarbeit von Sarah Büchting, 2019

BestOf Bachelor: Webbasierte Programmierplattformen für Kinder im Vergleich

In der Bachelorarbeit von Sarah Büchting (2019) mit dem Titel “Webbasierte Programmierplattformen für Kinder im Vergleich” wird thematisiert, wie Coding zu Zwecken der sich im Umbruch befindenden MINT-Bildung eingesetzt werden kann und welche Kompetenzen durch das Erlernen von Programmierfähigkeiten gefördert werden. Darüber hinaus wird ein Bezug zur Informatik als Herkunftswissenschaft des Coding hergestellt und die …

0 Kommentare

BestOf Bachelor: Gamification-Plugins für WordPress

Christoph Breitsprecher hat eine interessante Bachelorarbeit mit dem Titel “Evaluation von Gamification-Plugins für WordPress” im Studiengang Informationsmanagement verfasst. Dabei hat er detailliert untersucht, welche Möglichkeiten WordPress in Form von Plugins bietet, einfache Gamification-Mechanismen wie Punktesysteme oder Bestenlisten in WordPress zu integrieren. Auch Grundlagen zu Gamification erklärt Christoph anschaulich. Mehr finden Sie in der Pdf-Version seiner …

1 Kommentar

MM-SYS-2: Der Architekturstil Bauhaus

Autor: Arlind Ukaj Die fertige Arbeit finden sie hier. Konzept Als Grundkonzept dient ein One-Pager, die Seitenbesucher mit intuitiven Mitteln durch die Seite zu führen. Thematisch informiert die Seite über die wichtigsten Personen und Bauwerke des Bauhauses. Desgin Das Template der Seite ist eine komplette Eigenkreation und inspiriert sich anderen Bauhaus Webseiten sowie Anlehnung an …

2 comments

MM-SYS-2: Bauhaus-Ereignisse 1919-1933

Autoren: Amelie Andresen & Artjom Arustamov Die fertige Arbeit finden sie hier. Konzept Die Seite zum “Bauhaus-Ereignisse 1919 – 1933” kann in drei Teilbereiche aufgeteilt werden: Header mit integriertem Slider und Navigation Die Hauptseite mit dem vertikalem Zeitstrahl Footer mit den Direktoren One Pager Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den …

0 Kommentare
Onepager

Tutorial: Informativer OnePager für Austauschstudenten

Tutorial: Informativer OnePager für Austauschstudenten Autor: Cagla Bacaksiz Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit …

0 Kommentare
Storytelling Bauhaus100 von Amy Hoang

BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum

Amy Linh Hoang hat ihre sehr gute Bachelorarbeit im Studiengang Informationsmanagement mit dem Titel “Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums” abgeschlossen und ein sehenswertes, interaktives Storytelling mittels JavaScript, CSS3 und HTML5 erstellt. Der Titel des Storytellings lautet “Oscar Schlemmers Weg zum Bauhaus“. Amys Bachelorarbeit ist als Kooperation der Abteilungen “Information und Kommunikation” und “Design …

0 Kommentare
Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Alina Finger hat in ihrer Bachelorarbeit im Studiengang Informationsmanagement (Hochschule Hannover) am Beispiel der Expo Plaza gezeigt, wie anschaulich ein virtueller Rundgang einen ersten Eindruck eines Ortes oder eines Gebäudes vermitteln kann. Insbesondere für die Erstorientierung an unbekannten Orten oder um sich einfach erst einmal umzuschauen sind virtuelle Rundgänge eine gute Idee. Alina hat bei ihrem virtuellen Rundgang …

0 Kommentare
Funktionale Animation und Infografik

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Eine Infografik als funktionale Animation erstellt im Rahmen des Moduls “Medienintegration” im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg) Autor: Frieda Josi  Tutorial: Einsatzzweck und Einordnung in Animationsart Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit …

1 Kommentar

BestOf: Funktionale Animationen (Multimediasysteme II / Medienintergration SoSe 2017)

Im Rahmen der Kurse Entwicklung von Multimediasystemen II und Medienintegration (Studiengang Informationsmanagement, Prof. Dr.-Ing. Steinberg) im Sommersemester 2017 entstanden einige funktionale Animationen durch die Studierenden. Anforderung an die Arbeiten war, keine rein dekorativen Animationen zu erstellen, sondern sich kleinen, abgeschlossenen, funktionalen Aspekten der Nutzerinteraktion zu widmen. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Ein paar der …

8 comments
Interaktives Storytelling: Studentischer Alltag

Interaktives Storytelling: Studentischer Alltag

Das von Birte Rohden und Julian Hundertmark erstellte Storytelling zeigt einen typischen Tagesablauf eines Informationsmanagement Studenten. Für die Umsetzung wurden HTML5, CSS3, Bootstrap, JavaScript (u.a. AngularJS), Adobe Photoshop und Windows Live Movie Maker benutzt. Hier geht’s zum Storytelling: Interaktives Storytelling: Studentischer Alltag Im Kurs “Ausgewählte Fragen der Medieninformatik” sind im Wintersemester 2016/17 einige gute Arbeiten …

0 Kommentare
Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Im Projekt “Infografiken” (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt. Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche …

0 Kommentare

BestOf: WWW-Techniken I Wise 2016/17

Im Wintersemester 2016/17 fand für die Erstsemester des Studiengangs Informationsmanagement der Kurs WWW-Techniken I statt. Die Prüfungsleistung bestand darin, eine eigene Website mit HTML5 und CSS3 zu entwickeln und auf dem eigenen Hochschulwebspace zu veröffentlichen. Die Meisten haben im Rahmen des Kurses ihre erste Website überhaupt erstellt und waren absolute HTML-Newbies. Umso beeindruckender, dass so viele …

0 Kommentare

Tutorial: Multiselect Dropdown Liste mit Semantic UI

Dropdown Multiselect List mit Semantic UI

Eine Multiselect Dropdown Liste

erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Franziska Braun

Tutorial

Die Multiselect Dropdown-Listen werden in Online-Formularen (Bestellungen, Kontaktformulare) oder Online-Fragebögen verwendet. In diesem Beispiel können Lehrveranstaltungen ausgewählt werden. Die Anzahl ist auf maximal 3 Lehrveranstaltungen begrenzt.

Eine HTML Dropdown-Listen allein ist allerdings nicht nutzerfreundlich. Durch CSS und Javascript kann die Nutzerfreundlichkeit dieser einfachen Web-Komponente optimiert werden. Die verbesserte Nutzerfreundlichkeit der Web-Komponte in diesem Beispiel ist mittels CSS und Webanimation mithilfe der Semantic UI realisiert. Ziel ist die effektiviere Interaktion des Nutzer mit folgenden Web-Animationen:

  • Visuelles Feedback bei Nutzereingabe
  • Micro Interaktionen
  • Visuelle Zustandsübergänge

Da die realisierten Web-Animationen zur Verbesserung der Interaktion und zur User Experience dienen, sind sie als funktionale Animation einzuordnen.

HTML

HTML-Seite (index.html) beinhaltet die Dropdown-Liste, die mit den Tag  <select> eingeleitet wird. Innerhalb dieses Tags sind die Auswahloptionen der Liste mit dem HTML Tag <option> festgelegt.
Außerdem sind in die HTML Seite innerhalb des HTML Tag <head> folgende externe CSS-Dateien mit dem Tag <link> eingebunden:

Darüber hinaus beinhaltet die HTML folgende externe Script-Bibliotheken, jeweils im Tag <script>:

Javascript

Die Javascript-Datei (index.js)  dient zum Aufruf der Funktion multi-select für die Dropdown-Liste (siehe auch Multiple Selections). Die Funktion ist erweitert um {maxSelections: 3}, damit aus der Dropdown-Liste nur max. 3 Optionen ausgewählt werden können (siehe auch Maximum Selection).

CSS

Die CSS-Datei (index.css) beinhaltet Layoutänderungen, die für eine bessere Nutzerfreundlichkeit erachtet wurden. Als Farbschema sind zwei Material Farbcodes ausgewählt.

Bespiele für Änderungen:

Unnötige Farbeffekte von beispielweise :focus und :hover vereinheitlicht.

Farbänderung des vorhandenen Font Awesome Icons fa-caret-down bei :hover.
.ui.selection.dropdown > .dropdown.icon:hover
{color:#6b9b37;}

Einfügen des Font Awesome Icons fa-caret-up bei aktiver Dropdown-Liste.
.ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon::before
{content: '\f0d8';color: #4b636e;}

Änderung der Farbe der ausgewählten Optionen (label) bei aktiver und inaktiver Dropdown-Liste.
.ui.visible.selection.dropdown > .label,.ui.selection.dropdown .label
{background-color: #a7c0cd; color: #fff;  box-shadow: 0 0 0 1px #4b636e inset;}

Änderung der Farbe des Delete Icons bei Mouse-Hover.
.ui.label > .delete.icon:hover
{color: red;}

multiselect-dropdown-list-semantic-ui.zip

Tutorial: Interaktive Karte – Kiosktour Hannover

Kiosktour durch Hannover

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Interaktive Karte – Kiosktour Hannover

Autor: Marina Cordes und Catarina Schultz

Idee

Wir haben uns zu Anfang dieses Projekts gefragt, was das Studentenleben in Hannover besonders macht und was ein “Ersti” der Hochschule Hannover unbedingt für seine zukünftige Zeit in dieser schönen Stadt mitnehmen sollte. Sofort kam uns das Alleinstellungsmerkmal der höchsten Kioskdichte in Hannover in den Sinn. Ein absolut typischer Charakter unserer Landeshauptstadt und Basis für eine kostengünstige Freizeitaktivität für Studenten.

Also war das Ziel klar: Wir möchten eine geführte Kiosktour in Form einer Google-Karte mit zusätzlichen Informationen und Tipps erstellen.

Welcher Weg und welche Highlights für einen ersten durstfreien Spaziergang geeignet sind soll mithilfe einer Google-Karte aufgezeigt werden und durch Pop-up-Fenster mit Informationen einen zusätzlichen Mehrwert bieten.

 

Umsetzung und Erläuterung

Als Grundlage dient uns eine auf Codepen zur Verfügung gestellte Google-Karte. Diese Karte beinhaltet bereits eingebetteten Code für rote Map-Marker, die mittels der Angabe von den Koordinaten unsere Zwischenstopps einzeichnet und mit einer Legende, welche auf der rechten Seite der Karte eingeblendet wird, verbindet.

Nach und nach setzten wir sieben Markierungen (siehe Abbildung 1), die durch die aufsteigende Beschriftung mit Zahlen die Route verdeutlichen. Die angelegte Legenden-Box auf der rechten Seite zeigt, welches Ziel sich hinter welcher Nummer verbirgt. Durch einen Hover-Effekt auf den eingetragenen Zielen, wird farblich visualisiert, zu welchem Standort Informationen angezeigt werden würde, sollte der Nutzer hier klicken. Der Klick auf ein Ziel in der Legende öffnet den Informationskasten über dem Standort auf der Karte. Nicht nur über die Legende auf der rechten Seite, sondern auch beim Klick auf einen der Marker wird der Informationskasten geöffnet.

Screenshot - Beschreibung und Koordinaten von 2 Zwischenstopps
Abbildung 1: Beschreibung (grün) und Koordinaten (orange) von 2 Zwischenstopps in JavaScript (Screenshot aus Codepen)

Ein weiterer Hover-Effekt auf dem geöffneten Informationskasten lässt diesen größer werden, sodass der gesamte Text lesbar ist. Der Kasten ist vorerst etwas kleiner, um beim Erscheinen auf der Karte nicht zu viel von ihr zu verdecken. Außerdem ändert sich die Hintergrundfarbe des Kastens von einem etwas dunkleren zu einem helleren grün während des Hochskalierens, damit für das Auge des Nutzers noch klarer wird, dass sich der Inhalt verändert.

Auf der linken Seite der Karte ist ein weiterer, grüner Informationskasten angelegt, welcher als Überschrift und Einleitung in die Seite dient. Damit dieser auch als erstes gelesen und beachtet wird, haben wir einen Jumping-Effekt hinzugefügt, sodass der gesamte Kasten kontinuierlich leicht auf und ab schwebt. Dazu verwendeten wir Teile aus dem Codepen von Bandula Gamage.

Wir haben uns bei der Gestaltung für den Farbbereich “grün” entschieden, da die grüne Farbe auch bei der Google-Map aufgenommen wurde. So ergibt es ein harmonisches Bild und der Nutzer kann sich leichter orientieren, da allein die Marker in einem auffallenden rötlichen Ton gestaltet sind.

 

Code

Bei der Umsetzung der Map für eine Kiosktour haben wir HTML, CSS und JavaScript angewandt. Jegliche Styles und Effekte sind im CSS-Code beschrieben. Markierungen auf der Karte und die Legende sind mit JavaScript erstellt und auch mit CSS gestylt.

Zu aller erst haben wir die Website-Struktur im HTML-Teil bearbeitet. Hier war bereits eine Klasse mit dem Namen “map” vorhanden. Für die Informationsbox an der linken Seite fügten wir eine ID mit dem Namen “box” hinzu. Diese Box sprechen wir im CSS-Teil an und definierten diese mit Angaben wie zB. Viewport-Breite, Viewport-Höhe, Hintergrundfarbe im RGBA Farbraum etc..

Den oben genannten Jumping-Effekt der Box fügten wir mit “animation: jump 2s infinite ease-in-out” ein. In dieser Zeile wird angegeben, dass die Box unendlich oft im zwei Sekunden Takt hoch und runter hüpft. Des Weiteren wird der Übergangseffekt mit einem langsamen Start und Ende spezifiziert. Durch das Einbringen von “-moz-” und “-webkit-” ist gegeben, dass der Effekt in den Webbrowsern Safari, Google Chrome und Mozilla Firefox richtig angezeigt wird.
Die Klasse “.gm-style-iw” gibt alle Styles und Effekte der Informationskästen wieder, welche Aufklappen, wenn man auf einen der Marker klickt. Die Klasse “.gm-style-iw:hover” zeigt die Styles und Effekte an, wie sich der Informationskasten verhält, wenn man mit dem Cursor über den Kasten fährt.

Hier können die Codes und das Ergebnis der interaktiven Kiosktour angesehen werden. Abbildung 2 zeigt einen Ausschnitt unseres Endergebnisses.

Screenshot aus Codepen: Pen zur Kiosktour in Hannover
Abbildung 2: Pen zur Kiosktour in Hannover (Screenshot aus Codepen)

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Funktionale Animation und Infografik

Eine Infografik als funktionale Animation

erstellt im Rahmen des Moduls “Medienintegration” im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Frieda Josi

 Tutorial:

Einsatzzweck und Einordnung in Animationsart

Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit Hilfe der Animation wird das visuelle Erfassen der einzelnen Branchen, in denen Informationsmanager arbeiten, erleichtert. Die Daten, die für diese Infografik verwendet wurden, stammen aus der Absolventenbefragung 2016 von Prof. Dr. Jutta Bertram. Diese Infografik ist ein Kreisdiagramm und besteht aus Micro-Interaktionen wie z.B. Click, Hover und Mouse out und verschiedenen Übergängen (Transitions).

Verwendete Bibliotheken, APIs, weitere Ressourcen

HTML5
HTML5-Seite, die die benötigten Container und Texte (Beschriftungen der Branchen und der Prozentsätze) für die Infografik, bereitstellt.

CSS3
In der CSS3 Datei sind die animierten Übergänge: transition-delay, transform-origin, transition: opacity, transform:translate(), transition-duration, .button:hover für die Infografik und für den „Animation“- Button angelegt. Ebenso die Formatierungen für  HTML-Seite, Texte, Button und Infografik.

JavaScript
In der JavaScript-Datei befinden sich die Funktionen für das Ausblenden der Infografik: .addEventListener(’click’, function(e) …) und das Einblenden der Infografik: setTimeout(function()).

Verwendete Vorlagen

Animationsvorlage
Die Vorlage zu dieser funktionalen Animation wurde von Joshua Dorenkamp auf codepen.io zur Verfügung gestellt. Für das Kreisdiagramm hat er acht Teile verwendet (siehe Abb.). Link zum Original

Original von Joshua Dorenkamp

Buttonvorlage
Die Gestaltung des Buttons „Animation“”wurde mit einer Vorlage von w3schools.com erstellt. Link zum Original.

Vorgenommene Anpassungen an der Grafik

Zu den acht vorhandenen Teilen des Kreisdiagrammes wurden noch weitere acht hinzugefügt.

Für jeden der 16 Teile in der CSS-Datei:

1. Je eine farbige Fläche und ihre Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

2. Je eine Größe einer farbigen Fläche:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

3. Je eine Linie zu ihrer farbigen Fläche hin:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

4. Das Erscheinen der farbigen Fläche:
Wird unter “Änderungen der Grafik im Detail/Drehung” aufgezeigt.

5. Das Erscheinen der Linie:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

6. Das Erscheinen der Beschriftung:
[class^=”text-“].text-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

7. Die Formatierung der Beschriftung:
.text-lbl  {
font-size: 11px;}

Für jeden der 16 Teile in der HTML-Datei:

Je eine Prozentzahl (z.B. 20,50%) und je eine Beschriftung (z.B.Wissenschaftliche Bibliothek).
 <svg viewbox=”0 0 650 500″>
<circle class=”outline” r=”100″ cx=”210″ cy=”200″ />

<circle class=”pie-1″ r=”100″ cx=”210″ cy=”200″ />
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

In der JavaScript-Datei wurden keine Änderungen vorgenommen.

Vorgenommene Anpassungen am Button

1. Formatierung des Buttons
.button {
background-color: white;
border: 2px solid #555555;
color: black;
padding: 7px 23px;
text-align: center;
text-decoration: none
display: inline-block;
font-size: 13px;
font-weight: bold;
margin: 0% 10%;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;}

2. Formatierung des Buttons bei Mouse over
.button:hover {
background-color: #555555;
color: white;}

Änderungen an der Grafik im Detail

Für die Fläche eines einzelnen Teils aus dem Kreisdiagramm:

Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

Größe:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

Vergrößerung bei Mouse over:
[class^=”pie”]:hover
{stroke-width: 70;
border-radius: 4px;}

Position:
Die Position wird bestimmt durch die Angabe der Drehung in der Kreislinie. Siehe oben unter „Drehung“ (stroke-dashoffset: 488; /*Abstand des dasharray Musters*/).

Für die Linie einer Zuordnung von Beschriftung und farbiger Fläche im Kreisdiagramm:

Länge, Drehung und Position in der HTML-Datei:
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />

Beschriftung und Prozentangabe im Kreisdiagramm:

Position in der HTML-Datei:
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

JavaScript-Animation

Die JavaScript-Animationen wurden, aus dem Original von Joshua Dorenkamp, unverändert übernommen.

Animation, die beim Mausklick auf den Button „Animation“ ausgelöst wird:
var btn = document.getElementById(‘toggle’); /* Button aus Zeile 14 index.html */
var wrap = document.getElementById(‘wrap’); /* Kontainer für die Tortengrafik */
btn.addEventListener(‘click’, function(e) /* Ereignisobjekt für Button “Animation” und einem einfachen Klick darauf.*/
{
wrap.className = “”; /*Ausblenden der Tortengrafik, bei Klick auf Button “Animation” */
setTimeout(function() {
wrap.className = “animated”;
},3000);
});
setTimeout(function()  /*Einblenden der Tortengrafik, beim Laden der Datei und als zweites Ereignis nach dem Klick auf Button “Animation” */
{
wrap.className = “animated”;
},1000);

Quelldateien Zip

Tutorial als PDF

Informationsmanager auf dem Arbeitsmarkt

Link zur Animation: hier

Zum Codepen