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: Interaktives Memory-Spiel für IM-Studiengang

WebLab-HsH_Interaktives_Memory_Spiel

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 die Karten zu sehen sind und im unteren Bereich die Felder für die verschiedenen Kategorien angeordnet sind. Für die Karten haben wir ein vorläufiges Design entwickelt.

Als Kategorien für das untere Feld haben wir uns für “Programmiersprachen“,”Bibliotheken“,”Suchmaschinen” und “Expo Plaza” entschieden. Im Weiteren wurden noch mehr Karten entwickelt und ein Timer eingebaut, da der Spieler ja gegen die Zeit spielen soll.

Was nun entstanden ist, ist ein interaktives Memory-Spiel mit Timer und zahlreichen Animationen, die das Geschehen anschaulicher gestalten. Wir hoffen dadurch potentielle Studierende zu begeistern und dass diese genauso viel Spaß beim Spielen haben, wie wir beim Anfertigen dieses Projektes.

Zu dem Spiel gelangt ihr hier.

Viel Spaß!

Videos rundum IM: Vom Hauptbahnhof zur Expo Plaza

Die Fakultät III der Hochschule Hannover, zu der der Studiengang Informationsmanagement und auch das WebLab gehören, liegt nicht zentral in der Innenstadt, sondern etwas weiter außerhalb, an der Expo Plaza.
Um neuen Studierenden und Besuchern die erste Anfahrt zu erleichtern und zu veranschaulichen haben wir hier ein kurzes Video für euch, das den Weg vom Hauptbahnhof Hannover bis zum Standort der Fakultät III im Zeitraffer demonstriert.
Erstellt wurde dieses Video von Roman Berthold mithilfe des Programms Adobe Premiere im Rahmen der Lehrveranstaltung Entwicklung von Multimediasystemen I.

Dieses Video findet ihr auch über unseren Youtube-Kanal: Weblab HsH .