Rund um Informationsmanagement

Informationsmanagement

In einigen Lehrveranstaltungen haben wir uns mit der medialen Aufbereitung von Inhalten rundum den Studiengang Informationsmanagement befasst.

Beiträge zu IM-Themen, Videos, was Informationsmanagement überhaupt ist, interaktive Storytellings zum studentischen Leben oder Infografiken mit JavaScript findet ihr hier in unserer bisherigen Sammlung.

h5p für CM

Mehr Interaktivität im Kurs Content Management über h5p

In den letzten Corona-Semestern konnten viele Kurse nur online angeboten werden. Dadurch sind auch im Kurs Content Management in den Studiengängen Informationsmanagement und Informationsmanagement berufsbegleitend einige Screencasts entstanden. In einem nächsten Schritt haben wir die Screencast-Videos mit Interaktionselementen wie Wiederholungsfragen, Links, Inhaltsübersichten, Checklisten oder kleinen Quizzes über h5p ergänzt: Im aktuellen Wintersemester 21/22 setzen wir …

Nachhaltigkeit in Bibliotheken

Libraries for Future – Nachhaltigkeit in Bibliotheken im Kontext der Agenda 2030

 Autorin: Ann-Kathrin Wallmann Nachhaltigkeit ist ein Begriff, der uns derzeit so gut wie überall begegnet – auch im Bibliothekswesen wird das Thema seit ein paar Jahren präsenter. Oft wird es jedoch als eher abstrakt wahrgenommen, was beim Versuch der konkreten Umsetzung zu Problemen führen kann. Durch die Konkretisierung in Form der Nachhaltigkeitsziele der Agenda 2030 …

Beitragsbild Keywordrecherche

Die Keywordrecherche: Der Grundstein des Online Marketings

Autor*in: Linda Khorami Am Anfang steht die Keywordrecherche. Ob Blog, Onlineshop oder Unternehmenswebsite, die Onlinepräsenz spielt heutzutage eine immer größere Rolle und ist nicht mehr wegzudenken. [1] Du möchtest auch mit deiner Präsenz im Netz überzeugen und so viele Menschen wie möglich erreichen? Dann ist die Keywordrecherche genau das Richtige für dich! Finde heraus, worum es …

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 …

0 Kommentare
Beitragsbild

Durch guten Content auf Platz 1 im Google-Ranking?

Autor*in: Vivien Hirschberger Frage: Versteht Google meine Inhalte? Antwort: Nein, noch nicht, aber das lässt sich ändern! Ich zeige dir wie. Schritt für Schritt zum Ziel Was ist das Ziel? Warum sollte ich meine Inhalte für Google optimieren? Bilder, Texte und Videos aus SEO-Sicht Bilder optimieren Suchmaschinenoptimierte Texte Videos sind nicht gleich Videos Content Marketing …

Interaktive Videos

Was sind interaktive Videos?

Autor: Serkan Sarica Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt. Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch …

Beitragsbild

Tutorial: Prototype erstellen mit Figma – So funktioniert’s!

Autor*in: Anna Selitski und Anna-Lisa Voigt Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen.  …

Beitragsbild

Business Intelligence – Was ist das eigentlich?

Autor*in: Nick Jäger Dir sagt es vielleicht nichts, aber Business Intelligence kann dich retten! Das Scenario Dein bester Freund/deine beste Freundin und du führen ein Unternehmen. Alles läuft gut. Der Umsatz stimmt, eure Angestellten sind klasse und du kannst sogar 3 mal im Jahr nach Malle fliegen. Doch dann kommt der Tag, an dem alles …

Beitragsbild

Was sind Progressive Web Apps (PWAs)?

Bestimmt bist du im Netz schon mal der Abkürzung PWA über den Weg gelaufen. Doch, wofür steht diese Abkürzung überhaupt? Was sind PWAs? Um es schnell auf den Punkt zu bringen: PWA steht für Progressive Web App. Jetzt bleibt nur noch die nächste Frage. Was sind Progressive Web Apps?

Beitragsbild

React & Angular im Vergleich – Was führt dich zum Erfolg?

Autor*in: Melanie Hartkopf Ihr habt euch für die Webentwicklung entschieden – Glückwunsch. Ein Feld, so überlaufen wie kaum ein anderes. Hinter jeder Ecke wartet ein neues Projekt mit dem die Entwicklung einfacher, effektiver, schneller und sicherer sein soll. In dem Dschungel an Möglichkeiten ist es leicht, sich zu verirren. Deswegen stelle ich euch heute zwei …

Tutorial: Visual Graphic Novel Animation

Tutorial: Visual Graphic Novel Animation

Autori*n: Julia Karaschewski Vollansicht: Visual Graphic Novel Animation auf Codepen.io Quellcodeansicht: Visual Graphic Novel Animation auf Codepen.io ZIP-Datei zum Download (direkt von Codepen.io) Das Konzept Die Idee der Animation ist, ein erheiterndes, kleines Visual Graphic Novel zu erstellen, durch das der User mit visuellen Effekten durchgeführt wird. Das Ziel ist, den User von Anfang bis …

BestOf Bachelor: Webseitenübergreifende Nutzerverfolgung ohne Verwendung von Cookies in der EU

BestOf Bachelor: Webseitenübergreifende Nutzerverfolgung ohne Verwendung von Cookies in der EU

Das Ziel dieser Arbeit ist, verschiedene Trackingtechnologien unter Berücksichtigung gegebener Rahmenbedingungen im Rechtsraum der Europäischen Union in ihrer Funktionsweise zu vergleichen und die nach derzeitigem Stand realistische Nachfolgetechnologie zum Tracking via Cookies zu benennen – Fingerprinting.

WebLab HsH: SEO

SEO: Unterschied zwischen Onpage- und Offpage Optimierung

Autor*in: Julia Solohub SEO. Vielleicht bist auch du über diesen Begriff gestolpert, aber wusstest nie was er bedeutet. In diesem Beitrag versuche ich es dir mal zu erklären. Stell dir vor du würdest nach Informationen für deine Präsentation im Internet suchen.  Wahrscheinlich suchst du dafür in Google so wie es die Mehrheit tut. Dazu gibst …

0 Kommentare
Bachelorarbeit von Lukas Fischer: Ein Festival-Plugin für WordPress

BestOf Bachelor: Ein WordPress-Plugin für den Vergleich von Veranstaltungen

In der Bachelorarbeit von Lukas Fischer (2020) mit dem Titel “Konzeption und Anwendung eines WordPress-Plugins für den Vergleich von Veranstaltungen” wird thematisiert, wie WordPress über ein selbstentwickeltes Plugin für den komfortablen Vergleich von Festivals eingesetzt werden kann. In seinem Abstract schreibt Lukas: “Plugins erweitern die Funktionalität von WordPress und helfen Webseitenbetreibern beim Hinzufügen neuer Elemente …

Videopodcast zu Online-Lehre im Corona-Modus

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

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 …

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 …

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 …

WebLab HsH: Bachelorabiet von Matthias Olbrisch, 2019

SneakPeak Bachelor: IT-Kompetenzen analysieren und klassifizieren

In seiner Bachelorarbeit mit dem Titel “Analyse und Klassifikation der hannoverschen IT Kompetenzen in einer variablen Datenbasis” schreibt Matthias Olbrisch (2019) in seinem Abstrakt: “Die allgemeine Digitalisierung und besonders die IT-Branche in Hannover, stellen Arbeitgeber*innen vor große Herausforderungen. Berufsbezeichnungen im IT-Sektor zeichnen sich im Gegensatz zu klassischen Berufsfeldern nicht dadurch aus, dass sie vereinheitlicht sind. …

WebLab HsH: Client-Server-Modell

Videos rundum IM: Das Client-Server-Modell

Das Client-Server-Modell Autor: Kirill Prokopov Inhalt: In der Animation erkläre ich die Rollen von Client und Server. Ebenso wird die Kommunikation zwischen beiden Geräten grob erläutert. Software: Verwendet habe ich hierzu die Software „Blender“ (für Animationen, das Compositing und Videoschnitt) und den freien Software Synthesizer „Synth1“ für das Einspielen von Audio. Die „Hauptdarsteller“ sind dabei …

WebLab HsH: Scrum-Kochkurs

SneakPeak Bachelor: Kochkurs nach Scrum-Prinzip

Das Vermitteln von agilen Arbeitsmethoden ist für viele Menschen zwar interessant, jedoch sind Vorträge über solche Themen oftmals monoton und reizlos. Die Agile Kitchen GmbH hat sich einen individuellen Weg ausgedacht, um diese agilen Methoden auf unterhaltsame Weise zu vermitteln. Sie haben einen Kochkurs entwickelt, der nach dem Scrum-Prinzip funktioniert. Durch die metaphorische und praktische …

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 …

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 …

WebLab Team HsH

WebLab und QpLuS-IM: Unser neues Team

Seit Januar 2019 ist das WebLab Teil des QpLuS-IM-Projekts im Studiengang Informationsmanagement. Auch QpLuS-IM widmet sich dem Ausbau von Blended-Learning-Szenarien sowie mehr Selbststeuerungskompetenz durch digitales Lernen und führt so den WebLab-Ansatz wunderbar weiter, wie im Detail auf der QpLuS-IM-Projekt-Website zu lesen ist. Neues WebLab-Team Da sich Einige des ursprünglichen 2017er WebLab-Teams inzwischen leider (und auch …

Das WebLab bei InfoInMotion2019

InfoInMotion2019: Das WebLab stellt sich vor

Am Freitag, 11. Oktober 2019 ist es soweit: Unsere Veranstaltung “InfoInMotion2019: Information in Transformation” findet im DesignCenter auf der Expo Plaza 2 statt. Auch das WebLab ist dabei und stellt einige seiner besten, studentischen Arbeiten vor. Mehr zu InfoInMotion2019 samt Online-Anmeldung und Programm finden Sie auf der Website des Studiengangs Informationsmanagement. Wir freuen uns auf ihren …

Progressive Web Apps für IM: Interaktiver Stundenplan

Interaktiver Stundenplan Autoren: Hozan Hassan, Frederik Pusch, Valentin Griese, Marcel Hemmer und Lukas Fischer PWA: Interaktiver Stundenplan Quellcode Idee/Zielsetzung: Die Progressive Web App (PWA) “Interaktiver Stundenplan” zum Studiengang Informationsmanagement bietet eineÜbers icht über aller Kurse des BIM unterteilt in die jeweiligen Semester. Die Kurse sollen einfach per Drag and Drop in einen Stundenplan gezogen werden. …

Progressive Web Apps für IM: Teilnehmerverzeichnis ‘Social Contact’

Social Contact Autoren: Matthias Galda, Catharina Ochsner, Anja Preuße, Sarah Gehrmann fertige PWA Quellcode Idee/Zielsetzung Zweck der Progressive Web Apps (PWA) soll es sein, die Kontaktdaten der Ansprechpartner aufzulisten, die an der Veranstaltung “InfoInMotion2019” am 11. Oktober teilnehmen. Überlegungen Die Startseite enthält eine Lightbox. Darin soll der User Informationen über die Website und ihren Zweck …

Bauhaus100 im WebLab

WebLab-Projekt: Bauhaus100 Jubiläum 2019

Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 sind Anja Preusse und Sarah Gehrmann vom WebLab an der Konzeption und Realisation von multimedialen Angeboten für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum beteiligt. In Kooperation mit der Abteilung Design und Medien und dem August Kestner Museum hat das WebLab ein kleines interaktives Spiel als …

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 …

QpLuS-IM-Projekt startet durch: Noch mehr Selbststeuerungskompetenz durch digitales Lernen

Im Rahmen des QpLuS-IM-Projekts werden die Studierenden des Studiengangs Informationsmanagement (regulär und berufsbegleitend) bei ihrer Kompetenzentwicklung durch selbstgesteuertes Lernen in digitalen Lernszenarien unterstützt. Studierende produzieren z.B. selbst digitale Lernformate und veröffentlichen Online-Inhalte zu ihren Kursergebnissen, die von den Studierenden nachfolgender Jahrgänge als Best Practice-Beispiele zum selbstgesteuerten Lernen genutzt werden. Mit der Bereitstellung von geeigneten Selbstlernmaterialien und durch …

Biennale Map Venice App WebLab

App “Biennale Map Venice” jetzt für Android und iOS

Studierende aus dem 6. Semester im Studiengang Informationsmanagement entwickeln zurzeit die App Biennale Map Venice im Rahmen eines Projekts weiter, damit sich Besucher auf der Biennale in Venedig besser zurecht finden und zum richtigen Zeitpunkt am richtigen Ort sind. Hauptentwickler der App ist Leon Rostek vom WebLab. Aline Brun hat als Korrespondentin vor Ort dafür …

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 …

Progressive Web Apps für IM: Fragebogen zur Auswahl des Studienschwerpunkts

Fragebogen zur Auswahl des Studienschwerpunkts Autoren: Lukas Wojtke, Cedric Herrmann, Niklas Salge und Sharam Etemadi PWA-Fragebogen zur Auswahl des Studienschwerpunktes Grundidee Die ursprüngliche Idee war eine Art Umfrage mit anschließender Auswertung. Im Verlauf der weiteren Ausarbeitung des Projektes wandelte sich die Zielsetzung in einen Selbsttest, welcher nach Beendigung unverzüglich ausgewertet wird. Das Ziel des Fragebogens …

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 …

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 …

WebLab bei Q-Plus

WebLab macht Q_pLuS

Wir freuen uns sehr, dass ein gemeinsamer Projektantrag für Qualität in der Lehre erfolgreich war! Das WebLab wird ab 2019 das durch das MWK geförderte Q-Plus-IM-Projekt fachlich und technisch im Bereich der Webtechnologien und Multimediaentwicklung unterstützen. Weitere Infos und Neuigkeiten zu QpLuS-IM finden Sie auf unserer Projektwebsite.

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

Biennale App WebLab HsH

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

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 …

Tutorials zu Webentwicklung

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.

Webentwicklung mit JavaScript und HTML5

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

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 …

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 …

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 …

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 …

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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.

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.

BestOf WebLab

BestOf studentischer Arbeiten

In diesem Portfolio-Bereich findet Ihr studentische Arbeiten aus dem Studiengang Informationsmanagement und berufsbgleoitend, 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 …

Frohe Weihnachten 2017

Wunderbare Weihnachten und guten Rutsch ins neue Jahr!

Wir wünschen Ihnen entspannte und besinnliche Weihnachtsfeiertage, einen guten Endspurt und einen tollen Start ins neue Jahr 2018! Ihr WebLab-Team 🙂

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 …

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 …

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.

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

BestOf studentische Arbeiten

WebLab-Projekt: Portfolio zu studentischen Arbeiten

In unserem Portfolio arbeiten wir fortlaufend daran, gute studentische Arbeiten aus verschiedenen Kursen im Studiengang Informationsmanagement hier aufzubereiten und zu veröffentlichen. Angefangen haben wir mit Inhalten aus den folgenden Kursen sowie sehr guten Bachelorarbeiten: Grundlegende Web-Techniken 1 Entwicklung von Multimediasystemen 1 und 2 Ausgewählten Fragen der Medieninformatik.

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 …

Storytelling IM

WebLab-Projekt: Online-Exponate für die Ideen Expo 2017

Das WebLab hat ein Interaktives Storytelling zum studentischen Alltag und mehrere Videos aus der Kategorie Rundum IM als Exponate für die Ideen Expo 2017 aufbereitet und zur Verfügung gestellt. So konnten insbesondere Schüler*innen einen anschaulichen Einblick in den Bachelorstudiengang Informationsmanagement an der Hochschule Hannover gewinnen.

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 …

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 …

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 …

(Photo by Nong Vang on Unsplash)

Interaktiv Lernen mit h5p

WebLab-Portfolio: Interaktives Video

Wir arbeiten an der Konzeption und Umsetzung von interaktiven Videos und Lernszenarien mit h5p. Hier sammeln wir Beispiele und fertiggestellte Arbeiten zu interaktivem Lernen mit h5p.

h5p für CM

Mehr Interaktivität im Kurs Content Management über h5p

In den letzten Corona-Semestern konnten viele Kurse nur online angeboten werden. Dadurch sind auch im Kurs Content Management in den Studiengängen Informationsmanagement und Informationsmanagement berufsbegleitend einige Screencasts entstanden. In einem nächsten Schritt haben wir die Screencast-Videos mit Interaktionselementen wie Wiederholungsfragen, Links, Inhaltsübersichten, Checklisten oder kleinen Quizzes über h5p ergänzt: Im aktuellen Wintersemester 21/22 setzen wir …

Interaktive Videos

Was sind interaktive Videos?

Autor: Serkan Sarica Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt. Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch …

Interaktives Suchmaschinenvideo mit H5P

Interaktives Video: Wie funktionieren Suchmaschinen?

Im Rahmen von QpLuS-IM hat das WebLab-Team in Zusammenarbeit mit Monika Maßmeyer ein interaktives Video zur Visualisierung der Fragestellung: “Wie funktionieren Suchmaschinen?“ erstellt. Hier das interaktive Video zu der Funktionsweise von Suchmaschinen mit H5P (über den Doppelpfeil in der rechten, unteren Ecke öffnet sich das Video im Vollbildmodus):  H5P ist ein Open-Source-Werkzeug für die …


Interaktives Video: Wie funktionieren Suchmaschinen?

Interaktives Suchmaschinenvideo mit H5P

Im Rahmen von QpLuS-IM hat das WebLab-Team in Zusammenarbeit mit Monika Maßmeyer ein interaktives Video zur Visualisierung der Fragestellung: “Wie funktionieren Suchmaschinen?“ erstellt.

Hier das interaktive Video zu der Funktionsweise von Suchmaschinen mit H5P (über den Doppelpfeil in der rechten, unteren Ecke öffnet sich das Video im Vollbildmodus):

H5P ist ein Open-Source-Werkzeug für die Erstellung von interaktiven Lernszenarien. Die Basis für unser interaktives Suchmaschinenvideo ist ein normales” Video ohne Interaktion. Das nicht interaktive Video ist auf dem YouTube Channel unseres Studiengangs Informationsmanagement zu finden. Über ein H5P-Plugin für z.B. WordPress oder Moodle werden im nächsten Schritt Interaktionen im Video ergänzt.

Ein paar Eindrücke zum “Making Of” finden Sie in unserem Post “Von Duplo-Steinen und Suchmaschinen? auf der QpLuS-IM-Webseite.

Das interaktive Suchmaschinenvideo hatte seine Premiere bereits auf der InfoInMotion2019, aber auch hier im WebLab-Blog darf es nicht fehlen. Wir arbeiten auch in Zukunft weiter mit H5P für die interaktive Aufbereitung von Lerninhalten.

WebLab-Projekt: Bauhaus100 Jubiläum 2019

Bauhaus100 im WebLab

Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 sind Anja Preusse und Sarah Gehrmann vom WebLab an der Konzeption und Realisation von multimedialen Angeboten für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum beteiligt. In Kooperation mit der Abteilung Design und Medien und dem August Kestner Museum hat das WebLab ein kleines interaktives Spiel als Progressive Web App (PWA) mit HTML5 und JavaScript entwickelt, bei dem Tänzerinnen unterschiedliche Bauhaus-Kostüme angezogen werden können:

Amy Linh Hoang hat ihre Bachelorarbeit mit dem Titel “Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums” bereits 2018 abgeschlossen und ein sehenswertes, interaktives Storytelling mit dem Titel “Oscar Schlemmers Weg zum Bauhaus” mittels JavaScript, CSS3 und HTML5 erstellt.

Im Sommersemester 2018 sind über eine Lehrkooperation zwischen den Abteilungen Design und Medien und Information und Kommunikation der Fakultät 3 im Rahmen des Kurses “Entwicklung von Multimediasystemen 2” (Leitung Alexandra Panzert und Viktor Eisenstadt) weitere digitale und interaktive Angebote zum Thema Bauhaus entstanden wie z.B. die Folgenden:

Modulverantwortliche und Initiatorin der WebLab-Bauhaus-Kooperation ist Prof. Steinberg.

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Bachelorarbeit von Alina Finger: 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 mit Kolor Panotour Pro, PTGui Pro für Videostitching sowie einer Canon 6D Kamera samt Fisheye Objektiv, Leveler, Stativ und Rotator gearbeitet. Das Equipment wurde vom WebLab bereitgestellt und kann gern für weitere virtuelle Rundgänge ausgeliehen werden. Einzelheiten zur Kamera-Ausrüstung und nötigen Arbeitsschritten finden Sie hier in Alinas Bachelorarbeit.

Viel Spaß beim Erkunden der Expo Plaza!

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

Tutorial: Ein mobiles Hamburger Menü

Hamburger Menü

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.

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten “HOME”, “ABOUT”, “BLOG” und “CONTACT” sind zu sehen. Rechts neben dem Menüpunkt “ABOUT” ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML
<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>
CSS
.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}
JavaScript
$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben  0deg und  -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

Tutorial: Registrierungs- und Loginformular mit jQuery

Login und Registrierungsformular

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.

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt,  welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine “echte” Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.

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.

h5p für CM

Mehr Interaktivität im Kurs Content Management über h5p

In den letzten Corona-Semestern konnten viele Kurse nur online angeboten werden. Dadurch sind auch im Kurs Content Management in den Studiengängen Informationsmanagement und Informationsmanagement berufsbegleitend einige Screencasts entstanden. In einem nächsten Schritt haben wir die Screencast-Videos mit Interaktionselementen wie Wiederholungsfragen, Links, Inhaltsübersichten, Checklisten oder kleinen Quizzes über h5p ergänzt: Im aktuellen Wintersemester 21/22 setzen wir …

Interaktive Videos

Was sind interaktive Videos?

Autor: Serkan Sarica Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt. Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch …

Interaktives Suchmaschinenvideo mit H5P

Interaktives Video: Wie funktionieren Suchmaschinen?

Im Rahmen von QpLuS-IM hat das WebLab-Team in Zusammenarbeit mit Monika Maßmeyer ein interaktives Video zur Visualisierung der Fragestellung: “Wie funktionieren Suchmaschinen?“ erstellt. Hier das interaktive Video zu der Funktionsweise von Suchmaschinen mit H5P (über den Doppelpfeil in der rechten, unteren Ecke öffnet sich das Video im Vollbildmodus):  H5P ist ein Open-Source-Werkzeug für die …


BestOf studentischer Arbeiten

BestOf WebLab

In diesem Portfolio-Bereich findet Ihr studentische Arbeiten aus dem Studiengang Informationsmanagement und berufsbgleoitend, 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.

Nachhaltigkeit in Bibliotheken

Libraries for Future – Nachhaltigkeit in Bibliotheken im Kontext der Agenda 2030

 Autorin: Ann-Kathrin Wallmann Nachhaltigkeit ist ein Begriff, der uns derzeit so gut wie überall begegnet – auch im Bibliothekswesen wird das Thema seit ein paar Jahren präsenter. Oft wird es jedoch als eher abstrakt wahrgenommen, was beim Versuch der konkreten Umsetzung zu Problemen führen kann. Durch die Konkretisierung in Form der Nachhaltigkeitsziele der Agenda 2030 …

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 …

0 Kommentare
Beitragsbild

Tutorial: Prototype erstellen mit Figma – So funktioniert’s!

Autor*in: Anna Selitski und Anna-Lisa Voigt Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen.  …

Beitragsbild

React & Angular im Vergleich – Was führt dich zum Erfolg?

Autor*in: Melanie Hartkopf Ihr habt euch für die Webentwicklung entschieden – Glückwunsch. Ein Feld, so überlaufen wie kaum ein anderes. Hinter jeder Ecke wartet ein neues Projekt mit dem die Entwicklung einfacher, effektiver, schneller und sicherer sein soll. In dem Dschungel an Möglichkeiten ist es leicht, sich zu verirren. Deswegen stelle ich euch heute zwei …

BestOf Bachelor: Webseitenübergreifende Nutzerverfolgung ohne Verwendung von Cookies in der EU

BestOf Bachelor: Webseitenübergreifende Nutzerverfolgung ohne Verwendung von Cookies in der EU

Das Ziel dieser Arbeit ist, verschiedene Trackingtechnologien unter Berücksichtigung gegebener Rahmenbedingungen im Rechtsraum der Europäischen Union in ihrer Funktionsweise zu vergleichen und die nach derzeitigem Stand realistische Nachfolgetechnologie zum Tracking via Cookies zu benennen – Fingerprinting.

WebLab HsH: SEO

SEO: Unterschied zwischen Onpage- und Offpage Optimierung

Autor*in: Julia Solohub SEO. Vielleicht bist auch du über diesen Begriff gestolpert, aber wusstest nie was er bedeutet. In diesem Beitrag versuche ich es dir mal zu erklären. Stell dir vor du würdest nach Informationen für deine Präsentation im Internet suchen.  Wahrscheinlich suchst du dafür in Google so wie es die Mehrheit tut. Dazu gibst …

0 Kommentare
Bachelorarbeit von Lukas Fischer: Ein Festival-Plugin für WordPress

BestOf Bachelor: Ein WordPress-Plugin für den Vergleich von Veranstaltungen

In der Bachelorarbeit von Lukas Fischer (2020) mit dem Titel “Konzeption und Anwendung eines WordPress-Plugins für den Vergleich von Veranstaltungen” wird thematisiert, wie WordPress über ein selbstentwickeltes Plugin für den komfortablen Vergleich von Festivals eingesetzt werden kann. In seinem Abstract schreibt Lukas: “Plugins erweitern die Funktionalität von WordPress und helfen Webseitenbetreibern beim Hinzufügen neuer Elemente …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

Beitragsbild: Photo by Jason Dent on Unsplash.