Kategorie: WebLab

Veröffentlicht am

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.

Veröffentlicht am

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.

Veröffentlicht am

BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum

Storytelling Bauhaus100 von Amy Hoang

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 und Medien” entstanden. Anlass für ihr interaktives Storytelling ist das Bauhaus100 Jubiläum 2019, zu dem es neben weiteren interaktiven Angeboten gesammelt bereitgestellt wird.

Hier geht’s zu Amys Storytelling.

Viel Spaß beim Anschauen!

Veröffentlicht am

WebLab-Projekt: Konzeption und Entwicklung einer mobilen App für die Biennale

Biennale App WebLab HsH

Leon Rostek vom WebLab hat in Zusammenarbeit mit Prof. Schult eine mobile App für die Biennale in Venedig entwickelt.

Anfänglich beinhaltete die interaktive Karte alle Nationenpavillons der Architektur-Biennale 2018, die von Mai bis November in Venedig stattfand.

Dieser Prototyp wird aktuell von von Studierenden des Studiengangs Informationsmanagement an die Kunst-Biennale 2019 angepasst und steht jetzt mit aktuellen Ausstellungsdaten bereit. Weitere Infos dazu finden Sie in unserem Beitrag zur Biennale Map Venice App.

Die kostenlose App ist für Android und iOS erhältlich.

Weitere Einzelheiten zu der Biennale-App finden Sie unter http://biennale-app.com.

Veröffentlicht am

WiSe 18/19: WebLab-Tutoren sind bei Lehre dabei

Webentwicklung mit JavaScript und HTML5

Im kommenden Wintersemester 2018/19 werden zwei unserer Lehrveranstaltungen im Studiengang Informationsmanagement (auch berufsbegleitend) tatkräftig durch unsere studentischen Hilfskräfte vom WebLab unterstützt.

Sowohl bei “Grundlegende Webtechniken 1” (WWW1) als auch bei “Entwicklung von Multimediasystemen 1” (MM-SYS-1) sind jeweils zwei Tutor*innen dabei.

Bei WWW1 helfen euch Sarah und Anja gern während Sprechstunden weiter, wenn es um Fragen rundum HTML5 und CSS3 geht. Bei MM-SYS-1 werden Thorsten und Leon euch bei der Entwicklung mit JavaScript und der Umsetzung von Progressive Web Apps unterstützen.

Wir freuen uns auf September! Aber erst einmal noch sonnige Semesterferien!

Euer WebLab-Team

Veröffentlicht am

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 und Diana Hamasur

Konzept:

Das Konzept wurde anhand der alltäglichen Aktivität eines digitalen Kalenders erstellt. Da immer mehr Nutzer zu der digitalen Variante greifen, weil diese einfacher zu bedienen ist.

Die Funktionen des digitalen Kalenders bestehen aus einem Sign in und aus einem Logout Button. Auf der Startseite sieht der Benutzer die Felder „Benutzer- und Passwort“. Diese haben jedoch in der Demo keine besondere Funktion, jedoch sind sie im alltäglichen Leben als Zugangsfelder gedacht. Die Felder können aber müssen in der Demo nicht ausgefüllt werden. Als Test kann etwas eingegeben werden, ob es funktioniert.

Aus Stilgründen steht unter dem Sign in Button noch ein Hinweis auf eine Registrierung, welche jedoch keine weitere Funktion hat. Wird auf den Sign in Button geklickt, erscheint ein sich drehender Kreis mit Punkten. Daraufhin wird die Maske kurz in der Farbe des Buttons erscheinen und führt dann zu dem eigentlichen Kalender.

Bei dem Öffnen des Kalenders scheint kurz das Benutzerbild hervor, die Linien der Lupe kreisen einmal um die Lupe herum und unten rechts erscheint der Log-out Button. Auf dieser Seite wird ein Benutzerbild mit einer Notifikation angezeigt. Da drüber befindet sich ein kurzer Satz, der beliebig sein kann.

Oben links befindet sich ein „Menü“ Icon, rechts eine Lupe. Diese beiden haben keine weiteren Funktionen. Unter dem Benutzerbild stehen der aktuelle Monat und eine Kalenderwoche. Anschließend werden die entsprechenden To-Do´s angezeigt. Wenn der Log-out Button gedrückt wird, springt dieser in die Mitte des Fensters und übernimmt kurz das ganze Feld in seiner eigenen Farbe.

Anschließend wird wieder auf die Startseite zurückgeführt und es erscheint ein Haken, dieser steht für ein erfolgreiches Logout.

Technische Umsetzung

Der digitale Kalender mit einem Sign in und Logout System wurde mithilfe von Elementen aus HTML5, CSS3 und Javascript entwickelt. Darüber hinaus wurden Librarys von JQuery oder CSS bezüglich der Funktion und der visuellen Darstellung als Hilfe genommen. Das JQuery ist eingebunden und die ready Funktion ist befüllt. Diese Funktion ist dafür da, dass der Inhalt erst geladen wird, wenn die Seite vollständig geladen ist.

Die Plattformen wie „Codepen“, „Selfhtml“ und „W3Schools“ haben an der Entwicklung und Konzeption sowie der Inspiration weitergeholfen.

Die Icons „Benutzer“ und „Passwort“ wurden gestaltet und in die richtige Position gebracht. Der Button „Sign in“ wurde ebenfalls positioniert und animiert. Das ganze wird mit der ripple Funktion ausgeführt.

Um ein besseres technisches Verständnis dafür zu entwickeln, sind die hinterlegten Kommentare im Quellcode hilfreich.

Quellcode und das Konzept

Quellen:

Veröffentlicht am

Tutorial: Klausuren Countdown

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

Die Idee

Die Idee der Webapplikation ist es dem Studenten eine App zu liefern, die ihm die Möglichkeit bietet, den Lernfortschritt bzw. den Lernstand bis zu einem Klausurtermin zu überwachen. Der Fokus lag hierbei nicht auf einem besonders aufwendigen Design, sondern auf der Funktionalität der Web Applikation.

Wie funktioniert das Ganze ?

Die einzige Eingabe, die ein Student dazu zu tätigen hat, ist die der Eingabe des Klausurensdatums in das dafür vorgesehene Feld unter der Frage „Wann ist deine Klausur?“ und die Bestätigung über den „Bestätigen“ Button.

Wann ist deine Klausur?
Abbildung 1 – Wann ist deine Klausur?

Danach generiert sich unter der Aussage „Wie viel Zeit du noch hast!“ ein Countdown, der die verbleibenden Tage bis zur Klausur berechnet und live herunterzählt.

Wie viel Zeit du noch hast!
Abbildung 2 – Wie viel Zeit du noch hast!

Der Code für den Countdown behandelt zwei Problemstellungen. In der Funktion time_remaining(startTime) wird die im Eingabefeld vom Nutzer eingegebene Zeit in Millisekunden von der Startzeit abgezogen, daher wird im anschließenden Verlauf von Millisekunden auf Sekunden, Minuten, Stunden usw. gerechnet. Schließlich gibt der Operator „math.floor“ den größten Integer zurück, der bei der Berechnung der Sekunden, Minuten usw. entsteht.

Codeausschnitt
Abbildung 3 – Codeausschnitt

Die Funktion SubmitDate update nun die Countdown Daten mittels z. B. days_span.innerhtml=t.days; die Countdown – Werte. Schließlich würde der definierte Countdown nach dessen logischem Ende noch in den Minus Bereich laufen. Dies wird mittels der bedingten Funktion verhindert.

Codeausschnitt
Abbildung 4 – Codeausschnitt

Bei mehr als 7 Tagen wird der Status „Alles Okay“ ausgegeben, bei weniger als 7 Tagen wird vermeldet, dass man „Nur noch eine Woche“ zur Vorbereitung hat. Unter oder bei 4 Tagen Restlaufzeit wird „Jetzt aber!!“ ausgeliefert und am letzten Tag wird angekündigt, dass man „Morgen“ die Klausur schreibt. Am Prüfungstag wird „Viel Glück und Erfolg“ gewünscht.

Alles okay
Abbildung 5 – Alles okay

Der entsprechende Code verdeutlicht, dass sofern 8 Tage oder mehr Vorbereitungszeit bleiben, „Alles okay“ ist. Dazu wird am Beginn die restliche Tageszahl über console.log(days) ausgelesen. Die unterschiedlichen Status werden über if – else Bedingungen formuliert.

Codeausschnitt
Abbildung 6 – Codeausschnitt

Zusätzlich zu diesen Statusmeldungen, wird ein Kreis gezeigt, der anhand des vorhandenen Puffers den Fortschritt des Lernens veranschaulicht darstellen soll. Dazu wächst er in den letzten 7 Tagen der Klausurvorbereitung um je 100/7 % pro Tag. Bis er schließlich voll ist. Dauert es noch länger als 7 Tage, wird der Kreis nicht angezeigt.

Codeausschnitt
Abbildung 7 – Codeausschnitt

Das Ergebnis:

Umsetzung

Die Applikation wurde mithilfe von Elementen aus HTML 5, CSS 3, Javascript sowie jQuery entwickelt. Unterstützung habe ich bei den Plattformen „codepen.io” und „W3schools“ gefunden.

Dateienliste: hier

Zum besseren Verständnis ist der Code mit ausführlichen Kommentaren versehen.

 

Veröffentlicht am

Freie Bachelorthemen: Das könntet ihr gerade bei uns machen

Hier findet ihr ein paar Themen, die aktuell (Stand Mai 2018) noch frei sind für mögliche Bachelorarbeiten im Studiengang Informationsmanagement. Meldet euch einfach per Email bei Frau Steinberg, wenn ihr euch für eins der Themen interessiert:

  • Weiterentwicklung eines Virtuellen Rundgangs der Expo Plaza: Konzeption und Implementierung von detaillierten Zusatzinformationen zur Expo Plaza bzw. zum Studiengang Informationsmanagement. Verwendete Techniken/Tools sind WebGL, Panotour und Videostitching mit PTGui.
  • Podcasts für den Studiengang Informationsmanagement: Konzeption und Umsetzung von Podcasts (Videocasts?) für die Website des Studiengangs Informationsmanagement. Es sollen regelmässig spannende Inhalte auf der IM-Website veröffentlicht werden. Wie kann das längerfristig funktionieren?
  • Search Engine Optimization (SEO) für die WebLab-Website: Diese Website muss/soll SEO-technisch optimiert und mit einem Content-Konzept verbessert werden. Eine Idee ist z.B. ein Webtechniken-Online-Glossar.
  • Gamification auf der WebLab-Website: Da zurzeit zwei Bachelorarbeiten zu Gamification laufen, sprechen sie Frau Steinberg bitte direkt an. Eine Idee ist z.B. ein WordPress-Plugin oder eine PHP-Anwendung für Highscore-Listen aus BestOf-Beiträgen.
  • Progressive Web App für Ersis: Konzeption und Implementierung einer PWA für die Orientierungsphase im Studiengang Informationsmanagement. React JS ist zurzeit der Favorit. für die Umsetzung.

Falls ihr eigene Ideen aus Bereichen wie Webentwicklung, Multimedia, Social Media, SEO oder Ähnliche habt, meldet euch gern.

Veröffentlicht am

Tutorial: Radiales Menü mit JavaScript

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 Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.

Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.

Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.

Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.

Link zu Codepen : https://codepen.io/hundertj/pen/YxwmpJ