Web-Engineering-Labor der Hochschule Hannover
In unserem neuen Videopodcast zu Lernen und Lehren in Zeiten der Corona-Krise hat sich Gerrit Wucherpfennig vom QpLuS-IM-Projekt mit Studierenden des Studiengangs Informationsmanagement zu ihren bisherigen Erfahrungen in den letzten Wochen unterhalten.
Wie erleben sie die Corona-Auswirkungen im Studium? Wie funktioniert die Lehre? Und wie kommen beide persönlich damit zurecht? Antworten findet ihr im folgenden Videopodcast:
Hier finden Sie einen Überblick zu ersten Ergebnissen im Forschungsprojekt nITo.
Im Rahmen des Forschungsprojekts “nITo: Nutzerzentrierte IT-Kompetenzoptimierung” widmen wir uns der Analyse, Auswertung und Visualisierung von IT-Kompetenzen sowie interaktivem IT-Fachwissen in und für Hannover. Freie nITo-Themen für Bachelorarbeiten Wir untersuchen z.B. Möglichkeiten der interaktiven Vermittlung von IT-Fachwissen oder Verfahren aus dem Web-Mining für IT-Skill-Analyse. Dynamische, explorative Datenvisualisierung zu IT-Kompetenzen mittels JavaScript ist ein Forschungsaspekt. Aktuell …
„Freie Bachelorthemen 2020: Das können Sie gerade bei uns machen“ weiterlesen
Seit diesem Sommersemester (März 20) ist das WebLab an einem neuen Forschungsprojekt mit dem Titel “nITo: Nutzerzentrierte IT-Kompetenzoptimierung“ beteiligt nITo befasst sich mit IT-Kompetenz-Exploration in Hannover. Aktuell ist eine Bachelorarbeit zu nITo bereits abgeschlossen und vier weitere laufen. Falls Sie auch noch ein Thema suchen, werden Sie vielleicht hier fündig. Weitere Einzelheiten wie Forschungsziel und …
„WebLab macht nITo: Nutzerzentrierte IT-KompetenzOptimierung“ weiterlesen
Seit diesem Sommersemester (März 20) ist das WebLab an einem neuen Forschungsprojekt mit dem Titel “nITo: Nutzerzentrierte IT-Kompetenzoptimierung“ beteiligt
nITo befasst sich mit IT-Kompetenz-Exploration in Hannover.
Aktuell ist eine Bachelorarbeit zu nITo bereits abgeschlossen und vier weitere laufen. Falls Sie auch noch ein Thema suchen, werden Sie vielleicht hier fündig.
Weitere Einzelheiten wie Forschungsziel und -schwerpunkte finden Sie hier.
Autori*nnen: Judith Hauschulz und Verena-Christin Schmidt
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:
dir beim Online-Shopping “passende” Artikel vorgeschlagen werden?Dann bist du hier genau richtig! Wir erklären dir, wie das funktioniert. Doch dazu fangen wir erst einmal beim Allgemeinen an: dem Data Mining.
Eigentlich heißt Data Mining nur „Datenschürfen“. Dabei soll aus Daten Wissen erzeugt werden.1 Mit Wissen ist hier ein Muster gemeint, das für NutzerInnen interessant ist oder auch interessant sein kann. Ein Muster besteht dann wiederum aus Beziehungen zwischen Daten oder Regelmäßigkeiten und wird Datenmustererkennung genannt. 2
In der Graphik kannst du den Ablauf des Data Minings ablesen. Das Ganze stellt einen Prozess dar, bei dem das Ziel ist, dass man neue Erkenntnisse gewinnt. Dabei beschränkt man zuerst eine große Menge an Rohdaten auf eine kleinere Auswahl, sodass sie anschließend verarbeitet werden können. So dienen sie also als Grundlage für die Muster, die das Data Mining aufdecken soll.3
Abb.: Von den Rohdaten zum Wissen
Es gibt sehr viele Verfahren im Data Mining. Wir erklären dir aber nur die Assoziationsanalyse, weil sie relevant für die Analyse von Waren ist. Sie zählt zu den bekannteren beziehungsweise typischen Methoden des Data Minings.4
"Die Assoziationsanalyse gehört zu einem der grundlegendsten Verfahren in der Datenanalyse und spielt im wirtschaftlichen Bereich eine große Rolle."5
Mit der Assoziationsanalyse kannst du Abhängigkeiten und Zusammenhänge in großen Datenmengen ermitteln. Dazu benutzt man sogenannte Items. Stell sie dir am besten wie Produkte im Supermarkt vor! Mit diesen Items können wir dann Berechnungen durchführen. Wir könnten also schauen, ob zwei von ihnen auffällig oft gemeinsam vorkommen.
Es kann aber auch passieren, dass ein Item besonders dann auftritt, wenn ein anderes Item vorhanden ist. Ein Item kann sogar das Vorkommen eines anderen Items begünstigen. Wenn das eintritt, lassen sich da-raus Assoziationsregeln ableiten.1 Aus ihnen können wir beispielsweise Vorhersagen treffen oder Empfehlungen aussprechen.
Als Ergebnis erhalten wir Regeln, die folgende Form haben:
"Wenn Item A vorliegt, dann tritt in X Prozent
"6
Diese Regeln der Assoziationsanalyse können wir benutzen, um zum Beispiel Wechselwirkungen verschiedener Medikamente zu erforschen. Und auch wenn man Zusammenhänge bei der Wahl von Anlageformen bei Banken aufdecken möchte, ist sie nützlich.7 Ein wesentlich bekannteres Beispiel ist aber die Empfehlung von Artikeln im Online-Handel. Wenn wir einen Artikel aufrufen, dann zeigt uns die Seite oft, was andere KundInnen noch gekauft haben.8 Solche Vorhersagen lassen sich auch aufgrund von Warenkorbanalysen treffen.
In einer Folge der Serie “Numb3rs – Die Logik des Verbrechens” geht es um ein beliebtes Beispiel der Warenkorbanalyse. Windeln und Bier werden hier sehr oft zusammen gekauft. Auch wenn es erstaunlich erscheint, so haben sie eine logische Erklärung dafür: Männer, die von ihren Frauen zum Windelkauf aufgefordert werden, kaufen gerne noch Bier dazu. Damit haben sie etwas, worauf sie sich nach der „Arbeit mit dem Kind“ freuen und was sie genießen können. Darum kommt es zu dem Ergebnis, dass das Bierregal auf dem Weg von den Windeln zur Kasse platziert und so der Umsatz gesteigert wird.9
Bei der Warenkorbanalyse wertet man die Einkäufe von KundInnen aus, um dadurch verschiedene Items zu untersuchen. Die Items bestehen hier aus den Artikeln von zum Beispiel Supermärkten. Alle Kaufaktionen zusammengefasst ergeben die Datenbasis.7
Fast alle Unternehmen, die Waren verkaufen, haben die Daten, die für das Data Mining mit der Warenkorbanalyse nötig sind. Schon einige Kassenbons reichen aus und es wird kein spezielles System benötigt. Damit lassen sich dann stark nachgefragte Produkte ermitteln oder Verbindungen zwischen verschiedenen Waren untersuchen.10 Mit der Analyse können wir also auch erfahren, wie oft ein Produkt mit einem anderen im Warenkorb landet. Um dabei die „Spreu vom Weizen“ zu trennen, werden Assoziationsregeln erstellt.11 Aber wie können wir denn nun Muster finden?
Wenn Menschen Lebensmittel einkaufen gehen, haben sie meistens eine Einkaufsliste dabei, damit sie nichts vergessen. Auf manchen Listen befinden sich viele gesunde Produkte, wohingegen auf anderen eher Bier und Chips stehen. Daraus können wir schon Muster erkennen, durch die sich die Waren im Supermarkt entsprechend sortieren lassen.12
Wenn wir Zusammenhänge und Abhängigkeiten berechnen wollen, müssen wir (leider) etwas mathematisch werden. Aber keine Angst, wir benutzen dafür ein leicht verständliches und nachvollziehbares Beispiel.
Zuerst brauchen wir die drei Kennzahlen Support, Konfidenz und Lift. In der Tabelle steht ein Beispiel, dass dir helfen wird, um diese Kennzahlen zu verstehen. Bei uns geht es lediglich um zwei Produkte. Insgesamt untersuchen wir hier aber 1.000.000 Transaktionen beziehungsweise Einkäufe. Darin kommen auch 200.000-mal der Kauf von Bier und 50.000-mal der Kauf von Windeln vor. Die KundInnen dieses Supermarkts haben Bier und Windeln sogar 20.000-mal gleichzeitig gekauft.
| Anzahl | Waren |
|---|---|
| 1.000.000 | Transaktionen insgesamt |
| 200.000 | Bier |
| 50.000 | Windeln |
| 20.000 | Windeln und Bier |
Wie oft werden Bier und Windeln denn nun zusammen gekauft? Um das zu erfahren, berechnen wir den Support. Dafür setzen wir zuerst die Anzahl der Käufe von Bier und Windeln separat ins Verhältnis aller vorliegenden Einkäufe. Danach machen wir das genauso mit der Anzahl der gemeinsamen Käufe, sodass wir einen Support von 2% erhalten.
Die Konfidenz sagt uns, wie oft eine Assoziationsregel („Wenn Bier gekauft wird, dann werden auch Windeln gekauft”) richtig ist. Sie gibt außerdem einen Hinweis darauf, wie stark der Zusammenhang zwischen Bier und Windeln ist.11
Wenn wir die Konfidenz berechnen wollen, brauchen wir die Support-Werte. Zu Beginn teilen wir dabei den gemeinsamen Support durch den einzelnen Support des Biers. Daraus ergibt sich eine Konfidenz von 10%. Weil das noch nicht besonders viel ist, drehen wir die Assoziationsregel einfach mal um. Somit ergibt sich eine Konfidenz von 40%, da nun die Anzahl der Windel-Einkäufe die Bezugsgröße darstellt.
Die zweite Regel zeigt also ein Muster auf, das der Supermarkt so nutzen kann: Wenn das Bier in Sichtweite der Windeln positioniert wird, dann wird beides häufiger zusammen gekauft werden.7
Ob der Kauf von Bier und Windeln nun wirklich zusammenhängt, verrät der Lift. Er sagt uns auch, um wieviel wahrscheinlicher Windeln den Kauf von Bier machen. Dafür müssen wir den gemeinsamen Support durch das Produkt der einzelnen Support-Werte teilen.
Das Ergebnis ist ein Lift von 200%. Das heißt, dass der Kauf von Windeln die Wahrscheinlichkeit für den zusätzlichen Kauf von Bier sogar verdoppelt!
Zur Erklärung: Ein Lift von 100% würde stattdessen bedeuten, dass beide Items unabhängig voneinander sind. Bei einem Lift, der kleiner als 100% ist, ist es unwahrscheinlich ist, dass beide Items zusammen auftreten.11
Wie du siehst, ist es eigentlich doch ganz einfach, Muster und Abhängigkeiten zu entdecken. Wenn wir uns aber nicht nur mit zwei, sondern mit allen Artikeln eines Supermarkts beschäftigen würden, so wäre es deutlich schwieriger. Wir hätten dann ja viel mehr Daten, wodurch sich der Umfang der Berechnungen massiv erhöhen würde. Umso besser ist aber dadurch das Endergebnis. Aus einer großen und umfangreichen Warenkorbanalyse gewinnt man nämlich nicht nur ein paar Muster, sondern das gesamte Einkaufsverhalten der KundInnen. Das können Unternehmen für Dinge nutzen, wie zum Beispiel:
Sobald Unternehmen die Warenkorbanalyse benutzen, geht es aber auch immer darum, das Angebot zu optimieren und den Umsatz zu steigern.10
Gut aufgepasst? Überprüfe jetzt dein Wissen mit dem Quiz zum Data Mining mit der Warenkorbanalyse!
Wenn du mehr darüber erfahren willst, warum wir diesen Beitrag geschrieben haben, dann lies dir doch unser Konzept durch. Darin erklären wir auch, wie wir beim Verfassen von “Data Mining mit der Warenkorbanalyse” vorgegangen sind.
1 vgl. Cleve, Jürgen; Lämmel, Uwe (2016): Data Mining. 2. Auflage. Berlin, Boston: De Gruyter Saur
5 Begerow, Markus u.a. (2019): Assoziationsanalyse. Online unter https://www.datenbanken-verstehen.de/lexikon/assoziationsanalyse/ [Abruf am 20.12.2019]
8 vgl. Zaki, Mohammed J. ; Meira Jr., Wagner (2013): Data Mining and Analysis. Fundamental Concepts and Algorithms. Online unter https://repo.palkeo.com/algo/information-retrieval/Data%20mining%20and%20analysis.pdf [Abruf am 16.12.2019]
9 vgl. Swoyer, Stephen (2016): Beer and Diapers. The impossible correlation. Online unter https://tdwi.org/articles/2016/11/15/beer-and-diapers-impossible-correlation.aspx [Abruf am 17.12.2019]
10 vgl. Poliakov, Vladimir (2019): Data Science. Warenkorbanalyse in 30 Minuten. Online unter https://www.heise.de/developer/artikel/Data-Science-Warenkorbanalyse-in-30-Minuten-4425737.html [Abruf am 13.12.2019]
11 vgl.Rabanser, Alexander (2018): Warenkorbanalyse Teil 1. Analytische Grundlagen und Korrelationsanalyse in Excel. Online unter https://linearis.at/blog/2018/04/06/warenkorbanalyse-teil-1-analytische-grundlagen-und-korrelationsanalyse-in-excel/ [Abruf am 13.12.2019]
Dieser Beitrag ist im Rahmen der Lehrveranstaltung Content Management im Wintersemester 2019/20 bei Andre Kreutzmann (und Monika Steinberg) entstanden.
Autorin: Linda Görzen
Dieser Beitrag im Überblick:
”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 a bridge between a question and an answer. This connection is the signal.”
― Stephen Few, Signal: Understanding What Matters in a World of Noise[5]
Unter Data Mining versteht man einen Prozess, bei dem man mithilfe anspruchsvoller mathematischer und statistischer Algorithmen in großen Datenmengen nach Mustern, Trends und Zusammenhängen sucht.[1] Die Besonderheit des Data Mining ist die automatische Generierung der neuen Hypothesen aus den Datenmengen.[4] So kann man beispielsweise anhand der Verkaufsdaten untersuchen, ob und wann Kunden, die Produkt A gekauft haben, auch Produkt B kaufen.
Ziele der Untersuchung einer Datenmenge können unterschiedlich sein. Je nach Ziel gibt es im Data Mining dafür passende Aufgabenstellungen beziehungsweise -typen und dazugehörige Methoden. Typische Aufgabentypen sind Klassifikation, Regressionsanalyse, Assoziationsanalyse, Ausreißererkennung und Clusteranalyse. Darüber hinaus werden die Aufgabentypen des Data Mining oftmals nur in zwei Gruppen eingeteilt. Diese sind Beobachtungsprobleme (Clusteranalyse, Ausreißererkennung) und Prognoseprobleme (Klassifikation, Regressionsanalyse). [6]
Die Objekte der vorhandenen Daten werden anhand ihrer Merkmale in Klassen zusammengefasst. Die dadurch gebildeten Klassenmengen dienen als Grundlage für die Entwicklung eines Klassifikationsmodells. Mit dem Klassifikationsmodell lässt sich nun die Klassenzugehörigkeit eines neuen Objekts automatisch vorhersagen.[2]
Die Regressionsanalyse basiert auf den Konzepten der Varianz und Kovarianz. Dies bedeutet, es wird nach Zusammenhängen beziehungsweise Abhängigkeiten zwischen Variablen gesucht. Meistens setzt man eine Regressionsanalyse bei Prognosen und Vorhersagen ein.[3]
So ist es möglich, aus den historischen Daten der Umsätze eines Kunden und seinem Wohnort eine Kennzahl zu ermitteln. Diese Kennzahl kann beispielsweise der zu erwartende Umsatz, den der Kunde in Zukunft einbringen wird, sein.[8]
Bei der Assoziationsanalyse untersucht man die einzelnen Datensätze eines Datenbestandes auf Zusammenhänge, bei denen auf ein Ereignis konsequent ein anderes folgt. [8] Diese Zusammenhänge werden über Wenn-dann-Regeln beschrieben. Typischer Anwendungsbereich der Assoziationsanalyse ist die Untersuchung des Warenkorbes. Ein Beispiel dafür ist folgendes: Wenn ein Kunde Mehl kauft, dann kauft er wahrscheinlich auch die Butter. Die Assoziationsanalyse kann aber auch für die Untersuchung komplexerer Zusammenhänge benutzt werden. Etwa, in welchem Zeitabstand nach dem Kauf des Produktes A, der Kauf des Produktes B erfolgt. [1]
Ausreißer sind die Werte, die deutlich von den erwarteten Werten abweichen und gar nicht in die Messreihe passen. Sie können die Datenergebnisse stark verzerren und ungültig machen. Aus diesem Grund muss ein Datenbestand von den Ausreißern bereinigt werden. [3] Die Verfahren zur Analyse von Ausreißern sollen mithilfe der historischen Daten die Wahrscheinlichkeit ermitteln, mit der ein neuer Datensatz ein Ausreißer ist. Dieser soll dann entweder automatisch gelöscht oder zur manuellen Analyse gesammelt werden. [8]
Die zentrale Aufgabe einer Clusteranalyse ist es, neue Kategorien bzw. Gruppen zu identifizieren. Denn im Gegensatz zu Klassenanalyse sind bei dieser Methode die Klassen nicht vorgegeben. Bei der Clusteranalyse werden große Datenmengen in kleinere Gruppen eingeteilt (siehe Abbildung 1). Die Mitglieder eines Clusters sollen möglichst ähnliche (homogen) Eigenschaften aufweisen. Die einzelnen Clusterkategorien sollen sich wiederum möglichst stark unterscheiden (heterogen).[7]
Da die Cluster ohne Vorwissen generiert werden, ist es nicht immer eindeutig, was die Cluster ähnlich macht und ob sie auch inhaltlich relevant sind. Für eine Aufklärung sind zusätzliche Analysen zuständig.[7]
Abbildung 1: Clusteranalyse[9] (Autor: Chire Linzenz: CC BY-SA)
Im folgenden Video sind weitere Informationen zum Thema Methoden beziehungsweise Aufgabentypen des Data Mining mit dazugehörigen Beispielen zu finden:
Das Anwendungspotenzial des Data Mining ist vielfältig, da es in unterschiedlichen Bereichen verwendet werden kann. Aber vor allem in der Wirtschaft spielt es eine große Rolle. Mit dem Einsatz der Datenanalyse durch Data Mining können sich Händler besser auf das Kaufverhalten der Kunden anpassen und ihnen ein besseres Einkaufsserlebnis sowohl online als auch im Laden anbieten. Ferner können Banken und Versicherungen die Bonität ihrer Kunden schneller beurteilen.
Nichtsdestotrotz sollte man immer bedenken, dass die Daten nicht immer vollständig oder zum Teil fehlerhaft sein können, was zu verfälschten Resultaten führt. Somit ist die Qualität der Daten ausschlaggebend für aussagekräftige Ergebnisse.
Quellen:
1 Computerwoche (2015): Was ist bei Predictiv Analytics? Online unter: https://www.tecchannel.de/a/was-ist-was-bei-predictive-analytics,3199559,2 [Abruf am 25.01.2020]
2 Dürr, Holger (2004): Anwendungen des Data Mining in der Praxis. Online unter: http://www.mathematik.uni-ulm.de/sai/ws03/dm/arbeit/duerr.pdf [Abruf am 25.01.2020]
3 Entwickler.de (2014): Data Mining: typische Verfahren und Praxisbeispiele. Online unter: https://entwickler.de/online/datenbanken/data-mining-typische-verfahren-und-praxisbeispiele-115010.html [Abruf am 25.01.2020]
4 Enzyklopädie der Wirtschaftsinformatik Online – Lexikon (2019): Data Mining. Online unter: https://www.enzyklopaedie-der-wirtschaftsinformatik.de/wi-enzyklopaedie/lexikon/daten-wissen/Business-Intelligence/Analytische-Informationssysteme–Methoden-der-/Data-Mining/index.html [Abruf am 25.01.2020]
5 Goodreads (2020): Signal Quotes. Online unter: https://www.goodreads.com/work/quotes/45158439-signal-understanding-what-matters-in-a-world-of-noise [Abruf am 30.01.2020]
6 MSO Digital (2019): Data Mining. Online unter: https://www.mso-digital.de/wiki/data-mining/ [Abruf am 25.01.2020]
7 Novustat (2019): Data Mining Methoden – ein verständlicher Überblick über die wichtigsten Verfahren. Online unter: https://novustat.com/statistik-blog/data-mining-methoden-ueberblick.html [Abruf am 25.01.2020]
8 Ordix AG (o. J.): Data Mining in der Praxis (Teil I). Online unter: https://www.ordix.de/ordix-news-archiv/1-2017/data-mining-in-der-praxis-teil-i-was-ist-data-mining.html [Abruf am 25.01.2020]
9 Wikipedia commons (2016): EM-Gausian-data.svg. Online unter: https://commons.wikimedia.org/wiki/File:EM-Gaussian-data.svg [Abruf am 31.01.2020]
Dieser Beitrag ist im Rahmen der Lehrveranstaltung Content Management im Wintersemester 2019/20 bei Andre Kreutzmann (und Monika Steinberg) entstanden.
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. Unterschiedlichste Berufsbezeichnungen verlangen oftmals identische Kompetenzen. Die Kompetenzen und Fähigkeiten der Arbeitnehmer*innen stehen ebenso immer mehr im Fokus der Arbeitgeber*innen, wie die Bereitschaft der permanenten Weiterbildung.
Zielgebend der vorliegenden Abschlussarbeit ist eine Datenbasis zu liefern, die den Anspruch hat, die bereits beschriebenen Herausforderungen zu analysieren und zu klassifizieren. Zunächst ist daher eine Klassifikation, der auf dem hannoverschen Jobmarkt gesuchten IT-Kompetenzen, zu erstellen. Vorbereitend wird eine Marktanalyse angefertigt, die sowohl Jobsuchmaschinen auf ihre Kompetenzorientierung als auch IT-Kompetenzklassifikationen untersucht.
Die erstellte Klassifikation bildet anschließend die Grundlage für das Kompetenzmatching zwischen Klassifikation und den Kompetenzen, die hannoversche IT-Studierende erlernen, um zu verdeutlichen, in welchen Kompetenzen Weiterbildungsbedarf besteht. Die entstandene Datenbasis wird in einer MySQL Datenbank präsentiert, um eine möglichst flexible Verwendung und Weiterentwicklung des Datenbestands zu ermöglichen.”
Die Bachelorarbeit von Matthias ist Teil unseres Forschungsprojekts nITo (Nutzerzentrierte IT-Kompetenzoptimierung). Sie wurde vorbildlich über SerWisS veröffentlicht und ist als Volltext zu finden unter:
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 Relevanz einer frühzeitigen Aneignung von Programmierfähigkeiten in einer digitalen Gesellschaft beleuchtet.
Eine Analyse der webbasierten Programmierplattformen Open Roberta Lab, Scratch, Sprite Lab von Code.org und TurtleCoder, die zur Vermittlung von Programmierfähigkeiten bei Kindern genutzt werden können, gibt Aufschluss darüber, ob sich die benannten Programmierplattformen auch für den Einsatz in außerschulischen Bildungseinrichtungen, wie etwa öffentlichen Bibliotheken, eignen.
Die Bachelorarbeit von Sarah wurde vorbildlich über SerWisS veröffentlicht und ist als Volltext zu finden unter:
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 Besuch!
🙂
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.
Autoren: Alina Balandis, Aline Brun, Rebecca Poets und Leonie Weber
PWA: Geschichte des Studiengangs Informationsmanagement
Die Progressive Web App (PWA) soll Interessierten die Geschichte des Studiengangs Informationsmanagement an der Hochschule Hannover näher bringen. Dabei kann zwischen drei Menüpunkten ausgewählt werden. Neben einem virtuellen Rundgang wird ebenfalls durch einen Zeitstrahl sowie Literatur über das Informationsmanagment an der Hochschule Hannover informiert.
Dabei wird eine Slideshow zur Hilfe genommen, die die Historie von der Gründung bis zur Entwicklung der heutigen Kompetenzfelder aufzeigt. Diese wird zur Illustration der Chronologie durch einen Zeitstrahl unterstützend visualisiert.
Nach der Entwicklung einer grundlegenden Idee bestand der nächste Schritt darin, einige erste skizzenhafte Entwürfe und daraufhin MockUps zu einer ersten Visualisierung der Idee zu erstellen. Im Vorfeld musste überlegt werden, welche Themen und Bereiche in die PWA aufgenommen werden sollen. Die verwendeten Bilder stammen aus dem Filmarchiv Hannover sowie von der Hochschulwebsite und aus eigenen Fotos. Weiteres Bildmaterial wurde u.a. mithilfe des Adobe Illustrators erstellt. Die Bilder dienen dazu, die einzelnen Themen in der Slideshow zu veranschaulichen. Dazu wurden Informationen aus vielen verschiedenen Quellen verarbeitet.
Das Grundgerüst der PWA ist mit HTML, PHP und CSS entstanden. Dafür wurde zunächst eine index.html-Datei erzeugt, die als Basis aller weiteren Operationen diente. Sie besteht aus einem Head- und einem Bodypart. Im Head befindet sich der Titel, die Verlinkung zum Stylesheet und Metadaten, wie beispielsweise ein Hinweis auf die Autoren, das Datum und themenbezogene Schlagwörter. Diese machen es theoretisch möglich, dass die Website mit den passenden Suchwörtern von einer Suchmaschine erfasst werden kann.
<!doctype html>
<html>
<!--Head-->
<head>
<title>BIM Geschichte</title>
<link rel="stylesheet" type="text/css" href="css/StyleSheetalt.css">
<meta charset="utf-8">
<meta name="description" content="BIM Geschichte">
<meta name="author" content="Alina Balandis, Aline Brun, Monika Kolano, Rebecca Poets, Leonie Weber">
<meta name="date" content="2018-11-17">
<meta name="keywords" content="virtueller Rundgang, Informationsmanagement, BIM, Hochschule Hannover">
<link rel="manifest" href="manifest.json"> <!-- Manifest Datei einfügen-->
<link rel="serviceworker" href="sw.js"> <!-- Service Worker-->
<script src="js/react.production.min.js"></script> <!--React Frameworks laden -->
<script src="js/react-dom.production.min.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel" src="js/App.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
Der Body beinhaltet den Header mit ausklappbarem Menü zur Navigation dessen Funktionalität mit JavaScript erstellt wurde. Unter dem Header befindet sich der mit div-Containern gestaltete Hauptteil der Website, in dem sich u.a. die Slideshow befindet. Ganz unten gibt es den Footer, der einen Datumshinweis sowie einen Impressumslink beinhaltet.
Das mit CSS generierte Stylesheet dient dem Design der Website. Die index.html-Datei enthält nur die HTML-Angaben für ein grobes Layout, welche im Stylesheet genauer definiert, angepasst und gestaltet werden.
Die PWA besteht aus zwei Grundbestandteilen, die mit JavaScript realisiert wurden. Eine Slideshow, die den User visuell auf eine geschichtliche Reise rund um den Studiengang Informationsmanagement führt und ein Zeitstrahl mit den wichtigsten Eckdaten.
Die Slideshow ist in einem DIV-Container realisiert, der sich nach dem Klick auf einen Button öffnet und sich über die Website legt. Die Bilder im Slider können jeweils mit einen von zwei Pfeilbuttons an den Seiten angesehen werden. Mit dem Klick auf das “x” wird die Slideshow geschlossen.
<div class="slideshow-container" >
<button id='display' onclick="openModal();currentSlide(1)">Virtueller Rundgang</button>
<div id="myModal" class="modal">
<div class="modal-content">
<p class="close" onclick="closeModal()">x</span>
Der Zeitstrahl wird in der App.js gerendert. Der Zeitstrahl öffnet, nachdem auf den Button geklickt wurde. Nun kann man den Zeitstrahl wieder zuklappen, in dem man auf die Jahreszahlen klickt. Damit diese Toggle-Funktion funktioniert, wurde folgender Code implementiert:
class Toggle2 extends React.Component {
constructor(props) {
super(props);
this.state = {isShow: false};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function(prevState) {
return {isShow: !prevState.isShow};
});
}
class Toggle1 extends React.Component {
constructor(props) {
super(props);
this.state = {isShow: false};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function(prevState) {
return {isShow: !prevState.isShow};
});
}
render() {
return (
<div id="Zeitstrahl">
<button className='control' id="display" onClick={this.handleClick}>Zeitstrahl</button>
<div className={contentClass(this.state.isShow)}>
Mithilfe der Listenfunktion wurden die Inhalte des Zeitstrahls eingebunden und anschließend passend gestylt. Die Inhalte werden jeweils mit der “timeline-badge” voneinander abgegrenzt. Mit :before und :after wird im Stylesheet festgelegt, wie sich der Zeitstrahl nach dem Klicken verhält.
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2018/19, Prof. Dr.-Ing. Steinberg, Viktor Eisenstadt) einige gute Progressive Web Apps (PWA) mithilfe des JavaScript-Frameworks ReactJS entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten PWAs stellen wir euch hier in den nächsten Wochen nach und nach vor.