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

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

In der Bachelorarbeit von Lukas Fischer (2020) mit dem Titel “Konzeption und Anwendung eines WordPress-Plugins für den Vergleich von Veranstaltungenwird 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 oder Funktionen. Dabei muss der Betreiber selbst keinen komplexen Programmcode schreiben. Auch können diese Erweiterungen als Erleichterung bei der Pflege von Informationen und Inhalten dienen. In der vorliegenden Bachelorarbeit wird die Konzipierung, Umsetzung und Anwendung eines solchen Plugins für den Vergleich von Veranstaltungen beschrieben. Dabei findet es Anwendung auf einer Internetseite zum Thema Festivals. Die Informationen bezüglich der Festivals werden per Import in einer Tabelle gespeichert und für den Vergleich dargestellt. Eintragungen können auch händisch getätigt werden, woraus sich schließlich ergibt, dass das Plugin mit seiner Importfunktion eine zeitsparende und sinnvolle Erweiterung ist.”

Die Bachelorarbeit von Lukas wurde vorbildlich über SerWisS veröffentlicht und ist als Volltext zu finden unter:

Das praktische Ergebnis der Bachelorarbeit kann unter https://www.konzertkalender.net/ ausprobiert werden.
 

Freie Bachelorthemen 2020: Das können Sie gerade bei uns machen

nITo Bachelorarbeiten WebLab 2020

Freie IM-Themen für Bachelorarbeiten

  1. Konzeption und Aufbau einer Foto-Datenbank für den IM-Studiengang
    Wir benötigen einen Foto-Pool für Studierende und Lehrende:

    • Webbasiert, mit Metadaten versehen
    • für Webseite und Social Media
    • auch die Erstellung von passendem IM-Fotomaterial kann Teil des Themas sein.

Freie nITo-Themen für Bachelorarbeiten

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. 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 (Stand September 2020) sind in den Oberbereichen interaktive IT-Wissensvermittlung, explorative Datenvisualisierung, Web-Mining und Datenmodellierung  freie Bachelorthemen zu vergeben.

Die im Folgenden genannten Themenbereiche können wir gern gemeinsam zu geeigneten Bachelorarbeitsthemen konkretisieren:

  1. Konzeption und Umsetzung von interaktiven Wissensangeboten zu IT-Fachwissen (Schwerpunkt “Interaktive Videos”, Podcasts, Videocasts, Social Media) z.B.:
    1. Instagram für IT-Wissensvermittlung
    2. TikTok für IT-Wissensvermittlung
    3. Interaktive Videos mit h5p für IT-Wissensvermittlung
  2. Explorative, interaktive Datenvisualisierung von IT-Kompetenzen mittels D3.js (Data Driven Documents)
  3. Untersuchung und prototypische Umsetzung von Beispielen für das Zusammenspiel von Python und D3.js für dynamische Datenvisualisierung
  4. Konzeption und prototypische Umsetzung einer Web Scraping App mittels Python, NLP und Flask
  5. Recherche, Analyse und Dokumentation von IT-Bildungsangeboten in Hannover (Ausbildung, Hochschule, Uni, …)
  6. IT-Kompetenz-Datenbasis: Weiterentwicklung einer flexiblen Datenstruktur für IT-Kompetenzen
  7. IT-Kompetenz-Klassifikation: Untersuchung und Weiterentwicklung von Taxonomien/Regelwerken für strukturierte IT-Kompetenz-Verarbeitung.

Bereits laufende und abgeschlossene Abschlussarbeiten finden Sie unter nITo Bachelorarbeiten.

Bei Interesse melden Sie sich bitte per Mail bei Monika Steinberg.

WebLab macht nITo: Nutzerzentrierte IT-KompetenzOptimierung

nITo WebLab Hsh

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.

SneakPeak Bachelor: IT-Kompetenzen analysieren und klassifizieren

WebLab HsH: Bachelorabiet von Matthias Olbrisch, 2019

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:

https://doi.org/10.25968/opus-1562

Videos rundum IM: Das Client-Server-Modell

WebLab HsH: 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 Piktogramme von Client und Server und animierte Textelemente, die deren Funktion erklären und verdeutlichen. Die Piktogramme und die Texte liegen auf verschiedenen Ebenen und sind somit im Compositing von „Blender“ separat mit Effekten animierbar.

Realisiert im Compositing sind die Unschärfe- und Helligkeitsanimationen der Piktogramme sowie die Farbwechselanimation des Hintergrundverlaufs. Dies erfolgt simultan zu den erklärenden Texten und deren Keyframeanimationen. Ich setzte Compositing und Ebenen vor allem ein, damit die Rechenzeit pro Bild in einem vertretbaren Rahmen von 15 Sekunden pro Bild bleibt. Ohne Compositing und Ebenen wären es ca. 2 Minuten pro Bild gewesen, was bei knapp 1500 Bildern nicht so schön gewesen wäre.

 Ablauf in Blender:

  • Programm berechnet die Ebene mit den Piktogrammen
  • Programm berechnet die Ebene mit den Texten
  • im Compositing wird der Hintergrundverlauf hinzugefügt und dessen Farbe nach Position in der Animation angepasst
  • über den Hintergrund wird die Ebene mit den Piktogrammen gelegt und je nach Position in der Animation Unschärfe und Helligkeit verändert
  • darüber wird letztendlich die Ebene mit den Texten gelegt und das Endergebnis als Bild abgespeichert
  • dies geschieht Bild für Bild bis die Animation (1481 Bilder) abgearbeitet und alle Einzelbilder abgespeichert sind
  • Titel und Nachspann sind separate Animationen, die ebenfalls im Programm berechnet werden und Einzelbilder ausgeben
  • danach Erzeugung einer kompletten Testanimation ohne Ton im Videoschnittbereich um in Synth1 Synthesizereinstellungen vornehmen zu können.

 Ablauf Synth1:

  • Auswahl einer Synthesizervoreinstellung, die zur Animation passt (nicht langweilig, aber auch nicht zu dominant) und kleinere Anpassungen an der Voreinstellung
  • grobes Einspielen des Synthesizers passend zur Animation als MIDI-Datei, dann kleinere Anpassungen an der MIDI-Datei um das Timing zu verbessern und letztendliche Ausgabe als WAV-Datei

Endschnitt in Blender:

  • hinzufügen der Einzelbilder von Titel, Animation und Nachspann zu Videospuren
  • hinzufügen der WAV-Datei zur Audiospur
  • Ausgabe der kompletten Animation als MP4-Datei.

Das ist meine Animation zum Thema “Das Client-Server-Modell”

Storyboard

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

Die besten Videos stellen wir euch hier nach und nach vor.

Progressive Web Apps für IM: Informationsmanagement-Info

WebLab Hsh: PWA IM-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:

  1. Navigation:
    • Anforderung: Navigation
    • Beschreibung: Dem Nutzer soll es möglich sein, durch die Applikation zu navigieren. Dabei sollen Links für die einzelnen Ansichten zur Verfügung stehen.
    • Ziel: Übersichtlich verteilter Content
    • Akteure: Systemadministratoren, Informationsmanager
    • Detailbeschreibung: Die Navigation soll alle Ansichten der Webseite erreichbar machen. Vor allem soll dem Nutzer klar sein, welche Funktion die Links der Navigation haben.
    • Mockup:

       2. Progressive Web App

    • Anforderung: Progressive Web App
    • Beschreibung: Die Applikation soll eine Progressive Web App sein und demnach alle üblichen Anforderungen dafür erfüllen.
    • Ziel: Gute User Experience
    • Akteure:  Systemadministratoren, Informationsmanager
    • Detailbeschreibung:
      Quelle: https://developers.google.com/web/progressive-web-apps/checklist

      • Alle App Urls laden auch wenn man offline ist
      • Metadata sind so gesetzt, dass man die App zum Home-Screen hinzufügen kann
      • Jede Seite hat eine gültige URL
    • Mockup:

        3. Single Page Applikation

    • Anforderung: Single Page Applikation
    • Beschreibung: Die Applikation soll als Single Page Applikation umgesetzt werden.
    • Ziel: Bessere User Experience, schnellere Ansicht der einzelnen Seiten
    • Akteure: Systemadministratoren, Informationsmanager
    • Detailbeschreibung: Die Seite soll nur einmal geladen werden vom Browser. Daraufhin soll der komplette Content ohne neuladen der Seite erreichbar sein. Klickt man auf die Navigation, wird im Content Bereich der Seiteninhalt angezeigt, ohne das die komplette Seite neu lädt.
    • Mockup:  n/a

Implementierung

1. React App erstellen

Zuerst galt es die React App zu erstellen. Dafür haben wir ein nützliches Tool benutzt: https://github.com/facebook/create-react-app

create-react-app erlaubt es mit einigen wenigen Kommandozeilen eine React App zu erstellen und zu deployen.

Mit dem Tool konnten wir die App mit folgenden Befehl generieren:

Daraus entsteht dann folgende Dateistruktur und App.js:

2. Navigation einbauen (react-router-dom)

Um die Navigation in React zu gewährleisten, haben wir uns für ein weiteres nützliches Tool entschieden: react-router-dom (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)

Der react-router-dom bietet eine Vielzahl an Möglichkeiten an die Navigation so umzusetzen, dass der Code sauber bleibt und die Applikation eine Single-Page-Applikation bleibt. (Beim Aufruf der Unterseiten wird nicht die komplette Seite neu geladen.) Nach Implementation der Navigation mit Hilfe des Tools ergibt sich folgende index.js:

3. Seiteninhalte/Komponenten erstellen

Wir wollen die Unterseiten Inhalt, Struktur, Zeitplan und Praxisphasen von https://im.f3.hs-hannover.de/studium/ in der PWA darstellen. Dafür haben wir jeweils eine JavaScript Datei erstellt. Daraufhin wurden sie in die index.js importiert und in die Navigation eingebunden (siehe Punkt 2 screenshot). Hier als Beispiel die inhalt.js:

Dies wurde analog für die anderen drei Seiten ebenfalls umgesetzt.

4. Aus der React App eine PWA generieren

Als wir die React Applikation soweit fertig hatten, galt es als nächstes daraus auch eine PWA zu generieren. Dafür nutzen wir das Chrome Tool Lighthous – Audits (https://developers.google.com/web/tools/lighthouse/)

Das Tool kann Webseiten darauf prüfen, ob diese PWA geeignet sind. Die Ergebnisse unseres ersten Tests waren wie folgt:

Als wir online recherchiert haben, sind wir auf folgende Anleitung gestoßen:

https://dzone.com/articles/a-step-by-step-tutorial-for-developing-a-progressi

Die Anleitung beschreibt Schritt für Schritt, wie man aus einer react Applikation eine PWA erstellt.

Damit die Seite auch funktionieren kann, wenn der Nutzer offline ist (welches eine Voraussetzung für PWA’s ist), mussten wir einen ServiceWorker registrieren. Dafür haben wir eine worker.js Datei erstellt:

Und die index.html angepasst, sodass die App prüft, ob der genutzte Browser einen ServiceWorker unterstützt:

Natürlich muss auch der ServiceWorker noch in der index.js registriert werden:

Als nächstes haben wir die Splash-Icons hinzugefügt und Anpassung an der manifest.json durchgeführt. Dadurch kann der Nutzer die Webseite als App herunterladen und offline nutzen. Die gesetzten Icons werden dann als Verknüpfungssymbol genutzt:

Nach den Anpassungen gab uns der Test von Lighthouse Audits folgendes Ergebnis:

5. Deployment

Da unsere PWA nun startklar war, mussten wir diese nur noch deployen. Dafür reichte ein einzelner Befehl in der Kommandokonsole:

Damit wurde der Ordner “build” generiert, welcher auf den Produktionsserver (unser webspace) hochgeladen werden konnte.

Link zur Applikation:

http://ogulcanaktas.wp.hs-hannover.de

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.

InfoInMotion2019: Das WebLab stellt sich vor

Das WebLab bei InfoInMotion2019

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!
🙂

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.

Umsetzung

HTML und CSS

Der Stundenplan und die Liste der Fächer sind mit HTML und CSS umgesetzt.

Dabei wird bei der Strukturierung der Semester und Kurse mit einer Liste ausgeführt. Mit dem <details>-Tag können Seiteninhalte, in dem Fall die Tabelle mit den Fächern, versteckt werden.

index.html

<details>
    <summary>1. Semester</summary>
    <ul class="auswahl">
        <li id="0">Informationsstrukturen</li><br/>
        <li id="64">Grundlagen der Erschließung</li><br/>
        <li id="65">Relationale Datenbanken</li><br/>
        <li id="66">Grundlegende WWW-Techniken</li><br/>
        <li id="67">Grundlagen der Statistik</li><br/>
        <li id="1">Nutzerforschung 1 - Grundlagen</li><br/>
        <li id="2">Angewandte Kommunikation 1</li><br/>
        <li id="3">Wissenschaftliche Arbeitstechniken</li><br/>
        <li id="4">Grundlagen der Informatik</li><br/>
        <li id="5">Grundlagen der Mathematik</li><br/>
        <li id="6">Grundlagen der Informatik und Mathematik</li><br/>
    </ul>
</details>

Der Stundenplan an sich wird ebenfalls mit einer simplen Tabelle realisiert. Die Felder, in denen später ein Fach reingezogen werden kann, bleiben einfach leer.

index.html

<table>
    <col style="width:5%">
    <col style="width:19%">
    <col style="width:19%">
    <col style="width:19%">
    <col style="width:19%">
    <tr>
        <th class="zeit" style="text-align:center">Zeit</th>
        <th style="text-align:center">Montag</th>
        <th style="text-align:center">Dienstag</th>
        <th style="text-align:center">Mittwoch</th>
        <th style="text-align:center">Donnerstag</th>
        <th style="text-align:center">Freitag</th>
    </tr>
    <tr>
        <td class="zeit">08:00<br/>-09:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">09:30<br/>-11:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">11:00<br/>-12:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">12:30<br/>-14:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">14:00<br/>-15:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">15:30<br/>-17:00</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td class="zeit">17:00<br/>-18:30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
</table>

Framework

Die PWA nutzt die JavaScript-Bibliothek JQuery UI, die die Drag and Drop Funktion sowie die Touch-Bedienung am Stundenplan umsetzt.

Drag and Drop

Erlaubt das Ziehen der Fächer in den Stundenplan.

Funktion.js:

$(function () {
    $("#div_drag li").draggable(
    {
        appendTo: "body",
        helper: "clone",
    });
    startDrop($("#div_drop table td"));
    function startDrop($elements) {
        $elements.droppable({
                hoverClass: "ui-drop-hover",
                over: function (event, ui) {
                    var $this = $(this);
                },
                drop: function (event, ui) {
                    var $this = $(this);
                    $("<span></span>").text(ui.draggable.text()).appendTo(this);
                    $(".auswahl").find(":contains('" + ui.draggable.text() + "')");
                }
        });
    }
});

Optimierung für Touchscreens

Damit die PWA responsiv wird, z.B. auch auf Handys läuft und die Drag and Drop-Funktion auch auf Touchscreens funktioniert, gibt es die Funktion jquery.ui.touch-punch.min. Diese Funktion stammt von touchpunch.

jquery.ui.touch-punch.min

!function(a){function f(a,b){
	if(!(a.originalEvent.touches.length>1)){
		a.preventDefault();
		var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");
		d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)
	}
}
if(a.support.touch="ontouchend"in document,a.support.touch){
	var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){
		var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){
			e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){
				var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")
			}),c.call(b)},b._mouseDestroy=function(){
				var b=this;b.element.unbind({
					touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")
				}),d.call(b)}}}(jQuery);

Buttons

Die Funktionen der Buttons wurden mit JavaScript umgesetzt.

Fächer

Blendet die Liste mit den Fächern aus.

<script>                                                       
    $('#btn').click(function(){$('#div_drag').toggle();});
</script>

Zeit

Blendet die Zeit-Spalte aus.

<script>
    $('#btn_zeit').click(function() {$('.zeit').toggle();}); 
</script>

Zurücksetzten

Lädt das Fenster einfach neu und setzt es einfach auf den Ausgangszustand zurück

Ergebnis und Funktionen

Die Oberfläche ist simpel gehalten und kann in drei Teile geteilt werden. Auf der linken Seite die Kurse, welche nach Semester sortiert sind, auf der anderen Seite der Stundenplan. Über den Hauptelementen sind drei Buttons angeordnet.

Semester & Kurse

Auf der linken Seite stehen die Semester, die per Klick eine Liste mit den Kursen aufklappen lässt. Die danach gezeigten Kurse können dann per Drag and Drop in den Stundenplan gezogen werden.

Stundenplan

Im Plan sind die wesentlichen Merkmale eines Stundenplanes eingepflegt. Wochentage (Spalten), von Montag bis Freitag, und Zeiten (Reihen), in 90 Minuten Phasen, realisieren den Aufbau. Jede zweite Reihe ist dabei grau eingefärbt.

Buttons

Über dem Stundenplan befinden sich drei Buttons: „Fächer“, „Zeit“ und „Zurücksetzten“.

Um die Ansicht übersichtlicher zu machen, kann man mit den Buttons Fächer und Zeit, Teile des Stundenplanes ausblenden. Der Zeit-Button entfernt oder fügt die Zeitleiste links am Plan hinzu.  Per Klick auf „Fächer“ geschieht dasselbe mit den Listen der Kurse. Der dritte Button „zurücksetzten“ löscht alle Einträge im Stundenplan.

 

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.

 

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 sowie über die Veranstaltung „InfoInMotion2019“ erhalten.

Mock-Up der Startseite
Mock-Up der Startseite

Mithilfe einer Suchfunktion soll es dem User möglich sein, nach interessanten Kontakten zu suchen. Hier sollte der User angeben können zu welcher Gruppe er gehört (Studenten, Studieninteressiert oder Unternehmen) und eine Kontaktgruppe wählen, zu der er Informationen erhalten möchte (Studenten, Dozenten oder Unternehmen).

 

 

Mock-Up der Übersichtsseite
Mock-Up der Übersichtsseite

Des Weiteren wurden drei Seiten geplant und erstellt, auf denen die einzelnen Gruppen vorgestellt werden. Dort sollen einzelne Personen oder Unternehmen aufgeführt werden.

Für den Fall, dass der User mehr über eine Person oder ein Unternehmen erfahren will, kann er diese anklicken und wird auf eine Profilseite der jeweiligen Person/ des Unternehmens weitergeleitet.

Zuletzt soll das Impressum die üblichen Informationen über die Autoren enthalten.
In der Kopfzeile kann der User den Namen der Website finden sowie die direkt darunterliegende Navigation mit dem „Burger“-Menü. Die Fußzeile sollte Links zu dem Impressum und zu dem Studiengang enthalten.
Das genaue Design und den Aufbau der PWA haben wir zusätzlich in Mock-Ups festgehalten.

Umsetzung

Für die Umsetzung der Funktionalitäten haben wir das Framework React in Kombination mit JavaScript genutzt. Die Grundstruktur und die Benutzeroberfläche wurde mit HTML5 und CSS3 erstellt.

Das Design der Seite haben wir schlicht gehalten und uns farblich an den Farben der Fakultät III der Hochschule Hannover orientiert.
In der Praxis haben wir eine vereinfachte Version der oben beschriebenen PWA entworfen. Beim Aufruf der Startseite erscheint eine Lightbox, die den Besucher auf die Offline- sowie App-Nutzung hinweist. Direkt auf der Startseite sind Informationen über die Lehrveranstaltung und den Zweck der PWA zu finden. Über die „Suche“ kann der Benutzer nach Personen und Unternehmen suchen und sich die Ergebnisse in einer Tabelle ausgeben lassen.

Ergebnisse in Tabellenform
Ergebnisse in Tabellenform

Die einzelnen Seiten zu den Personen und Unternehmen haben wir zur besseren Übersicht und aus technischen Gründen weggelassen. Allerdings können diese später noch hinzugefügt werden. Das Impressum wurde wie geplant angelegt. Dort findet der Leser die Informationen zu den Autoren. Die Kopf- und Fußzeile wurden ebenfalls wie geplant umgesetzt.

 

Funktionalität

Die Lightbox wird beim Laden der Startseite abgerufen und mittig angezeigt. Mit einem Klick auf das X kann die Lightbox geschlossen werden.


Um die Lightbox anzuzeigen wird einem DIV-Container ein Zustand zugewiesen, der sich ändert, sobald das X angeklickt wird. Beim Neuladen der Startseite wird der Zustand des DIV-Containers auf den zuvor gesetzten Standard zurückgesetzt. Mithilfe einer if-Funktion wird der Zustand des DIV-Containers abgefragt. Entspricht der Zustand dem vorher gesetzten, wird die Box wieder aufgerufen.

Codeausschnitt der Lightbox
Codeausschnitt der Lightbox

Die Daten über die Personen und Unternehmen wurden über die asynchrone API von IndexedDB eingepflegt. Dadurch können die Daten sowohl online als auch offline abgerufen werden. Diese Daten werden ausschließlich für die Suche benötigt. Dabei hat der User die Möglichkeit über ein Dropdown-Menü auszuwählen, welche Zielgruppe er sucht. Dieses Dropdown-Menü wird mithilfe einer Funktion erstellt, die die jeweilige Kategorie eines Dateneintrags sucht und so zusammenfasst, dass keine doppelten Einträge erscheinen. Durch das Auslesen der Kategorie kann die Tabelle so gefiltert werden, dass nur Einträge der entsprechenden Kategorie aufgelistet werden.

Für die mobile Ansicht haben wir die Tabelle so beschrieben, dass sie auch horizontal scrollbar ist. Ansonsten wäre eine mobile Ansicht nur schwer realisierbar gewesen.

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.

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.