WebLab und QpLuS-IM: Unser neues Team

WebLab Team HsH

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 nicht “leider“,  weil ja genau richtig so) im Studiums-Endspurt mit Praktika und Bachelorarbeit befinden, haben wir inzwischen tolle Unterstützung durch fünf neue studentische Hilfskräfte bei QpLuS-IM und im WebLab. Wer das genau ist und was sie so machen, finden Sie unter WebLab-Team und auf der QpLuS-IM-Website.

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 tutorielle Betreuung werden die Studierenden in ihrer Selbststeuerungskompetenz im Bereich des digitalen Lernens unterstützt.

Im WebLab wird dieses Konzept bereits seit 2017 fortlaufend erprobt und in Lehrveranstaltungen der Medieninformatik wie Praktische Informatik oder Multimediasysteme im Kompetenzfeld Web Information Management erfolgreich eingesetzt. Im Rahmen von QpLuS-IM wird das WebLab-Angebot weiterentwickelt, augedehnt und verstetigt. Weiterhin unterstützen studentische Hilfskräfte des WebLabs Lehrende und Studierende bei technischen oder didaktischen Fragestellungen zu digitalen Lernlösungen.

Übergeordnetes Ziel von QpLuS-IM ist, angehende Informationsmanager*innen bestmöglich auf die sich ständig und schnell wandelnde, immer digitaler werdende Arbeitswelt vorzubereiten und dafür nötige Kernkompetenzen noch mehr zu fördern.

Ab Juni starten wir richtig durch und unser neuer Projektmitarbeiter Gerrit Wucherpfennig unterstützt uns zum Glück dabei. Zusätzlich brauchen wir aber noch Unterstützung von studentischen Hilfskräften, um in den nächsten drei Jahren gemeinsam noch viel mehr digitales selbstgesteuertes Lernen und Arbeiten über z.B. E-Portfolios, interaktive Online-Inhalte und Lernvideos für unseren Studiengang zu ermöglichen.

Hintergründe und Neues zum QpLus-IM-Projekt finden Sie auf unserer Projektwebsite.

Mehr Infos zu den Aufgaben als studentische Hilfskräfte für QpLuS-IM finden Sie dort ebenfalls.

Wr freuen uns auf Sie!

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

Biennale Map Venice App WebLab

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 gesorgt, dass nun alle Ausstellungen mit Standort, Foto und Öffnungszeit auf der Karte zugänglich sind.

Die App findet Sie im Google Play Store und im Apple App Store unter dem Titel „Biennale Map Venice“.

Biennale Map Venice bei Instagram

Biennale Map Venice Website

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.

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

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 besten Arbeiten findet ihr hier:

Um zur Animation bei CodePen zu kommen, einfach auf das Bild klicken.

WebLab-Projekt: Portfolio zu studentischen Arbeiten

BestOf studentische 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

Wir hoffen, dass sich in Zukunft auch weitere Dozent*innen unseres Studiengangs und aus benachbarten Fachrichtungen an der Veröffentlichung ihrer BestOf-Arbeiten beteiligen.

Falls Sie Interesse haben, Ihre Kursergebnisse oder sehr guten Bachelorarbeiten in unserem Portfolio zu veröffentlichen, freuen wir uns, wenn Sie sich bei uns melden.

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 entstanden. Eine davon ist ein interaktives Storytelling zum studentischen Alltag im Studiengang Informationsmanagement an der Hochschule Hannover (Expo Plaza).