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

Beitragsbild

Autor*in: Anna Selitski und Anna-Lisa Voigt


User Experience Scala
Von einer very bad zu einer exzellenten User Experience ©Olivier Le Moal – stock.adobe.com

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.  Aber wie funktioniert das Erstellen von einem Prototype mit Figma? Und was sind Figma und die User Journey überhaupt? Das und weitere spannende Informationen zu diesem Thema zeigen wir dir in dem folgenden Beitrag!

Dieser Beitrag im Überblick:

Eine Einführung zu Figma

Fangen wir erst einmal mit Figma an. Figma ist ein Web-basiertes Programm, welches zum Designen von Screens für eine App oder Webseite gedacht ist. Vielleicht kennst du auch das Tool Sketch. Dort kannst du auch leicht und unkompliziert Designs erstellen, jedoch spätestens wenn man zu zweit an einem Projekt arbeitet, kann man sich dort schnell in die Quere kommen. Figma hingegen ermöglicht dir das Designen von Screens mit vier oder mehr Händen! Du fragst dich wie das gehen soll? In Figma können mehrere Designer gleichzeitig an ihrem eigenen Gerät und an derselben Datei arbeiten, ohne sich dabei zu stören.

Fünf Gründe für Figma[1]

Fünf Gründe für Figma - Prototype erstellen
Das sind die wichtigsten fünf Gründe für Figma. ©Song_about_summer – stock.adobe.com
  1. Das Interface von Figma:
    Wer mit Figma arbeitet merkt schnell, dass das Interface dieses Tools von Designern für Designer entwickelt wurde. Aber auch für Anfänger ist das Bedienen der Software, nach ein paar Stunden Einarbeitung, kein großes Problem mehr. Die zahlreichen Shortcuts sind unserer Meinung nach unbezahlbar! Shortcuts? Das sind unzählige Tastenkombinationen für verschiedene Werkzeuge. Somit bleiben dir Klicks und Zeit erspart!
  2. Schnell zum Ergebnis mit wenig Aufwand:
    Wie schon erwähnt ist Figma ein nutzerfreundliches Tool und du kannst den Umgang mit dem Programm schnell lernen. Aber kennst du das Problem, wenn du in einer großen Gruppe arbeitest und du immer alles hin und her schicken musst, um auf dem aktuellsten Stand zu bleiben? Und dann musst du auf das Dokument deines Gruppenmitglieds warten, um mit deiner Arbeit anfangen zu können. Tja, bei Figma kommt sich bei einer Gruppenarbeit keiner mehr in die Quere, denn jeder kann an seinem Gerät in der gemeinsamen Datei arbeiten! Wir finden das großartig, denn so kann jeder die Schritte des anderen verfolgen und dementsprechend seine Arbeit anpassen. Somit musst du nicht mehr auf die anderen warten, bis du mit deiner Aufgabe anfangen kannst.
  3. Verknüpfungen:
    Jetzt fragst du dich sicherlich was Figma nicht kann? Figma ist ein Tool für die interaktive Gestaltung von Screens, hat aber auch seine Schwächen. Diese umgeht Figma mit Verknüpfungen zu anderen Tools, wie Sketch oder Photoshop. So kannst du ganz leicht Funktionen von anderen Programmen über Figma verwenden.
  4. Für jeden und zu jeder Zeit verfügbar:
    Du verspürst mitten in der Nacht den Drang, an deinen Screens weiterzuarbeiten, aber dein Gerät liegt auf der Arbeit? Mit Figma kannst zu jederzeit und überall auf deine Dateien zugreifen, solange du einen Internetzugang und deine Zugangsdaten hast.
  5. Immer aktuell sein:
    Das lästige Problem mit der Aktualität der Dateien ist mit Figma Geschichte. Kein ständiges Fragen mehr, welche Version die aktuellste ist, denn es gibt nur noch die eine Version, die online ist! Auch das selbstständige Speichern von Figma erleichtert deine Arbeit und Ergebnisse können nicht mehr verloren gehen. Perfekt, oder?!

Prototype, User Journey – Was genau ist das?

Ein Klickdummy wird für ein Projekt erarbeitet
Du kannst einen Prototype erstellen, um die Funktionen und den Sinn von Interaktionsmodulen deiner zukünftigen App zu zeigen.  ©artursfoto – stock.adobe.com

Einen Prototype benötigst du dann, wenn du Funktionen und Sinn von bestimmten Buttons und Interaktionsmodulen zeigen möchtest. Du kannst einen Klickdummy auch für die Darstellung der User Journey, also der Weg, den der Nutzer in deiner App oder auf deiner Webseite beschreiten soll, zeigen[2].
Sowas ist dann nützlich, wenn du zum Beispiel die Screens  deinem Auftraggeber vorstellen möchtest. Mit einem Klickdummy kann sich der Auftraggeber besser vorstellen, welche Funktionen ein Button auslöst, wenn der Nutzer darauf klickt. Außerdem ist so ein Prototype auch dann sinnvoll, wenn du deine Logik der User Experience überprüfen möchtest. Denn es kann schon mal vorkommen, dass man zum Beispiel vergisst, einen Zurück-Button einzubauen und der Nutzer nicht mehr den Weg nach Hause – also zur Home Seite – findet.

Tutorial: Wie erstelle ich einen Prototype in Figma?

Jetzt fragst du dich wie das gehen soll? Kein Problem, zu Beginn musst du dafür die Figma Datei öffnen. Wenn  du dort noch keine Screens angelegt hast, machst du das jetzt erst einmal.  Du wirst die Screens benötigen, welche du anschließend miteinander zu einem Prototype verbinden möchtest.

Schritt 1:

Hast du die Screenshots angelegt? Falls du mit ja antwortest, klickst du einfach oben rechts auf das Symbol Prototype. Du weißt nicht genau wo? Siehst du den orangen Pfeil im Screenshot? Er zeigt dir genau den Bereich, den du auswählen solltest. Der Prototype Bereich öffnet sich anschließend nach der Auswahl rechts in Figma (Schritt 1).

Prototype erstellen
Schritt 1: Klicke oben rechts auf Prototype (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 2:

Jetzt klickst du  auf das gewünschte Objekt, also die Stelle, wo der Nutzer hinklicken wird (Schritt 2).

Prototype erstellen über Figma
Schritt 2: Wähle das gewünschte Objekt aus (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 3:

Nun siehst du um das ausgewählte Objekt herum den Umriss eines blauen Vierecks. Klicke auf den Punkt, der sich auf der rechten Kante des Vierecks befindet und halte dabei deine Maustaste gedrückt. Ziehe nun deine Maus auf den nächsten Screen, der danach angezeigt werden soll. Jetzt kannst du einen blauen Pfeil sehen, der von dem ausgewählten Objekt auf den nächsten Screen zeigt (Schritt 3).

Prototype erstellen
Schritt 3: Der blaue Pfeil zeigt auf den nächsten Screen Kalender. Jetzt sind die Screens miteinander verbunden (zum Vergrößern anklicken) ©Voigt; Selitski

In dem von uns dargestellten Beispiel, wählten wir die App Kalender von dem Screen Startscreen aus. Die Kalenderapp soll sich nun bei einem Klick oder Touch mit dem Finger öffnen, dies zeigt jetzt der blaue Pfeil, welcher auf den nächsten Screen Kalender zeigt.

Auf diese Art und Weise kannst du nun weitere Screens mit den vorherigen verbinden und so die User Journey des Nutzers in deiner App oder Webseite darstellen. Genauso kannst du ganz schnell und einfach einen Prototype in Figma erstellen!

Schritt 4:

Pass dabei auf, dass du die richtigen Objekte mit den richtigen Screens zusammenführst. Sodass der Prototype die richtige, und von dir gewünschte, Reihenfolge anzeigt. Um die richtige Reihenfolge zu kontrollieren, kannst du dich an den blauen Pfeilen orientieren (Schritt 4).

Prototype erstellen
Schritt 4: Kontrolliere die Reihenfolge deines Prototypes anhand der blauen Pfeile (zum Vergrößern anklicken) ©Voigt; Selitski

In unserem Beispiel zeigen wir dir, dass wir vom Startscreen anfangen und auf das App-Symbol des Kalenders drücken. Daraufhin öffnet sich der Kalender, jetzt wollen wir einen Kalendereintrag hinzufügen. Dafür drücken wir auf das runde Plus-Icon und der Kalendereintrag öffnet sich.

Schritt 5:

Wenn du alle Schritte erfolgreich erledigt hast und die Pfeile soweit stimmen, ist es an der Zeit, den Klickdummy zu starten. Dafür klickst du einfach oben links, bei dem ersten Screen, auf das blaue Viereck mit dem weißen Dreieck (Schritt 5).

Prototype erstellen - Schritt 5
Schritt 5:  Klick nun oben links auf das blaue Viereck (zum Vergrößern anklicken) ©Voigt; Selitski

Daraufhin öffnet sich in einer neuen Datei der, von dir erstellte, Prototype. Jetzt kannst du auf die Objekte klicken, die du zuvor ausgewählt hast. Wenn daraufhin der nächste angezeigte Screen der Richtige ist, stimmt deine User Journey überein und der Prototype ist bereit für die Vorstellung bei deinem Auftraggeber!

Prototype erstellen – Alle Schritte auf einem Blick

  1. Klicke auf Prototype oben rechts bei den Werkzeugtools.
  2. Wähle das gewünschte Objekt, welches du in dem Prototype anklicken möchtest.
  3. Klicke auf den Punkt innerhalb des blauen Vierecks und ziehe diesen zum gewünschten Screen.
  4. Wiederhole jetzt die gleichen Schritte (Schritt 2) für die nächsten Screens.
  5. Klicke oben rechts auf den Pfeil, um den Prototype zu starten.

Etwas hat nicht geklappt, oder hast du vielleicht einen Schritt vergessen? Keine Panik! Im folgenden Video Prototype / Klickdummy über Figma erstellen zeigen wir dir, die einzelnen Schritte per Desktopaufnahme.

Das Prototype-Testing mit Figma Mirror

Du kannst den Klickdummy und die User Journey auch mit der App Figma Mirror testen. Dies bringt dir den Vorteil, dass du deine erstellten Screens auch auf deinem Smartphone sehen kannst. So kannst du das Look and Feel deiner Screens auf deinem Smartphone bekommen. Auch die Größe von deinen Objekten und Texten kannst du so überprüfen.

Dafür brauchst du nur Figma Mirror aus dem Play Store oder dem App Store auf dein Smartphone/Tablet herunterladen. Anschließend meldest du dich mit deinen gewohnten Daten aus Figma an. Zu guter Letzt klickst du in deiner Arbeitsmappe auf den Startscreen deines Prototypes, dieser wird dir nun auf deinem Smartphone angezeigt. Jetzt kannst du auf deine ausgewählten Objekte tippen und so überprüfen, ob der darauffolgende Screen der Gewünschte ist und ob die User Journey mit der gezeigten Reihenfolge übereinstimmt.

Ein Tipp von uns: Wenn du die User Journey von einer App darstellen möchtest, nimm am besten dafür dein Smartphone. Möchtest du  dir aber eine Webseite anschauen, welche noch nicht responsiv ist, verwende dafür lieber die App auf einem Tablet.

Viel Erfolg!

great user experience
Mit einer exzellenten User Experience hast du auch zufriedene Nutzer ©blacksalmon – stock.adobe.com

Wir hoffen, dass wir dir mit der Anleitung für die Erstellung eines Prototypes mit Figma helfen konnten und du damit deine User Journey darstellen kannst!


Quellen

Auf die [Hochzahl] klicken, um zum zugehörigen Absatz zurückzukehren.

1 Vgl. Ornella (2018): Designen mit vier Händen: 5 Gründe warum du Figma brauchst. Online unter https://www.dieproduktmacher.com/blog/designen-mit-vier-haenden-5-gruende-warum-du-figma-brauchst [Abruf am 06.06.2020]

2 Vgl. usability.de (o. J.): User Experience ganzheitlich verstehen und optimieren. Online unter https://www.usability.de/leistungen/methoden/user-journey-mapping.html [Abruf am 06.06.2020]


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Was sind Progressive Web Apps (PWAs)?

Beitragsbild

Autor*in: Pascal Wissner


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?

Im Rahmen dieses Beitrages erkläre ich dir die Grundlagen zum Thema PWAs. Am Ende dieses Beitrages erwartet dich ein Link zu einer Anleitung. Mit Hilfe dieser Anleitung kannst du dir im Handumdrehen eine eigene Progressive Web App erstellen. In relativ kurzer Zeit und ohne viel Aufwand kannst du erste Ergebnisse erzielen! Probier es doch mal aus.

Zunächst kämpfen wir uns durch ein bisschen Theorie. Wir schauen uns den technischen Aufbau und mögliche Funktionen von Progressive Web Apps an. Danach werfen wir einen kurzen Blick auf bereits erfolgreich umgesetzte PWAs. Zum Schluss zeige ich dir am Beispiel der Twitter PWA, wie du diese erfolgreich auf deinem Endgerät installierst.

Ob Laptop, Tablet oder Smartphone - der Inhalt einer Webseite muss heutzutage responsiv dargestellt werden können! Progressive Web Apps erfüllen diesen Punkt.

PWA – Progressive Web App

Der technische Aufbau

Eine Progressive Web App besteht, wie viele Internetseiten heutzutage aus diesen drei wesentlichen Bestandteilen:

Auf Grundlage dieser drei Technologien, die eine unabhängige Plattform darstellen, sollen sich Web-Anwendungen an Zielgeräte so weit anpassen, dass die Nutzung möglich ist. [1]

In diesem Zusammenhang ist auch häufig die Rede von einem sogenannten “responsiven Design” einer Webseite. Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet. Somit kann der Inhalt gänzlich und schnell vom Besucher aufgenommen werden. [2]

Was macht eine Webseite zu einer Progressive Web App?

Progressive Web Apps sind, anders als normale Webseiten, auf dem jeweiligen Endgerät installierbar. Durch diesen Vorteil, bieten sie eine App-ähnliche Erfahrung, wie man sie bereits von Programmen auf einem Computer oder aus Apps aus dem Apple AppStore oder Google Play Store kennt. Das bedeutet auch, dass eine Progressive Web App in einem bestimmten Umfang auch “offline”, also ohne aktive Internetverbindung funktionieren kann. Somit kann eine PWA auch als eine Art Symbiose aus einer responsiven Webseite und einer App beschrieben werden.

Eine große Rolle spielt ebenfalls die Performance deiner PWA. Die Ladegeschwindigkeit und User Experience ist das A und O für den Erfolg.

Kurz zusammengefasst: Ausgehend von einer gemeinsamen Code-Basie, funktionieren PWAs auf allen möglichen Endgeräten in unterschiedlichsten Browsern. [3]

Sowohl die Browser Google Chrome, Firefox und Microsoft Edge, sowie Apples Safari unterstützen, Stand heute (26.07.2020), die Nutzung von Progressive Web Apps. [4]

Twitter – Eine erfolgreiche Progressive Web App

Als prominentes Beispiel für eine erfolgreiche Progressive Web App, kann ich dir die Twitter PWA empfehlen. Anstatt die App über den Google PlayStore oder Apple AppStore zu beziehen, kannst du auch einfach die PWA installieren. Über folgende Schritte bekommst du die schlanke App-Web-Version von Twitter über den Browser Google Chrome installiert:

Twitter PWA auf einem PC oder Laptop

Wenn du dich gerade am PC oder Laptop befindest, dann folge dieser Anleitung:

  1. Rufe auf deinem Endgerät die Webseite www.twitter.com auf.
  2. Nachdem du Schritt 1 durchgeführt hast, kannst du oben rechts auf die drei Punkte klicken.
  3. Jetzt wählst du den Punkt: “Twitter installieren” aus.
  4. Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Desktop/Schreibtisch starten.

Twitter - Eine erfolgreiche Progressive Web App

Klicke oben rechts auf die drei Punkte und wähle „Twitter installieren“ aus:

Twitter - Eine erfolgreiche Progressive Web AppInstallierte Twitter PWA auf macOS in Google Chrome.

Twitter PWA auf einem Android Endgeräit installieren

Wenn du dich gerade an einem Android Smartphone befindest, dann folge dieser Anleitung:

  1. Rufe auf deinem Android-Endgerät die Webseite www.twitter.com auf.
  2. Nachdem du Schritt 1 durchgeführt hast, kannst du oben rechts auf die drei Punkte klicken.
  3. Jetzt wählst du den Punkt: “Zum Startbildschirm hinzufügen” aus.
  4. Installiere die Twitter PWA, indem du auf “Hinzufügen” klickst.
  5. Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Homescreen starten.

Twitter

Twitter PWA auf einem Apple Endgerät installieren

Wenn du dich gerade an einem Apple-Smartphone mit dem Safari Browser befindest, dann folge dieser Anleitung:

  1. Rufe auf deinem Apple-Endgerät die Webseite www.twitter.com auf.
  2. Nachdem du Schritt 1 durchgeführt hast, kannst du unten in der Mitte auf den “Teilen…”-Knopf klicken.
  3. Als nächstes wählst du den Punkt: “Zum Home-Bildschirm” aus.
  4. Installiere die Twitter PWA, indem du auf “Hinzufügen” klickst.
  5. Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Homescreen starten.

Twitter

Probiere es gerne auf deinem eigenen Gerät aus!

Weitere Progressive Web Apps

Da es für PWAs keine Art AppStore oder PlayStore gibt, haben sich diverse Internetseiten mit der Sammlung von bekannten Progressive Web Apps beschäftigt.

Unter folgenden Links kannst du dir zahlreiche weitere PWAs anschauen:

https://pwa.bar/ oder https://findpwa.com/

Ob ich wohl dein Interesse wecken konnte und dich das Thema nun brennend interessiert? Dann schaue dir doch mal dieses übersichtliche Tutorial von Google an: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

 

Eigene Meinung und Ausblick von PWAs

Ich finde die Idee und die umfangreichen Einsatzzwecke von Progressive Web Apps enorm spannend. Die Möglichkeit seinen Webseitenbesuchern auf einfach Art und Weise eine App-Version seines Internetauftritts zur Verfügung zu stellen, bietet großes Potential.

Gerade die Kosteneinsparung bei der Entwicklung von “nur” einer Webseite, die dann zusätzlich mit wenig Aufwand als App erscheinen kann, finde ich für Unternehmen sehr interessant. Solche Unternehmen, die PWAs einsetzen können mit einer höheren Verweildauer ihrer Kunden auf ihrer Webseite rechnen. Dies fördert zugleich die Conversion-Rate.

In Zukunft werden sicher mehr und mehr Unternehmen auf den erst kurzen Erfolgszug der Progressive Web Apps aufspringen. Die einzigen benachteiligten dürften hier der Google PlayStore und der Apple Appstore sein, da ihnen wohlmöglich ein gewisser Anteil In-App-Verkäufe weg brechen könnte.

Mich persönlich hat das Konzept einer PWA überzeugt und ich werde es bei einem meiner nächsten privaten Projekte auf jeden Fall in Betracht ziehen.

 

 

Literatur und Quellen

[ 1 ] Ruppert, Sven (2019): How-to: Progressive Web Apps praktisch erklärt. Online unter: https://entwickler.de/online/web/progressive-web-apps-tutorial-tipps-579830771.html [Abruf am 26.07.2020]

 

[ 2 ] wendweb GmbH (2020): Was ist Responsive Webdesign. Online unter: https://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/ [Abruf am 26.07.2020]

 

[ 3 ] Google LLC (2020): Your First Progressive Web App. Online unter: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 [Abruf am 26.07.2020]

 

[ 4 ] Vaadin Ltd. (2020): Progressive Web App Browser Support. Online unter: https://vaadin.com/pwa/learn/browser-support [Abruf am 26.07.2020]

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

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 Ende durch mehrere kleine Animationen zu führen, während er Interaktionen ausführt und Feedback zu den ausgeführten Aktionen erhält. Das Feedback besteht ebenfalls aus visuellen Effekten, sodass der User jederzeit weiß, wo und in welcher Ebene er sich befindet.

Die Führung durch das Visual Graphic Novel erfolgt visuell durch verschieden aufleuchtende Buttons. Durch sich farblich (türkis) abgrenzende Umrandungen der Buttons wird der User zu den gewünschten Aktionen gelotst, da diese am meisten auffallen (über Bewegung und Farbe).

Das Visual Graphic Novel besteht aus zwei Szenen, die der Nutzer frei wählen kann. Die Reihenfolge der Auswahl hat dabei keine Auswirkungen.

Inhaltsverzeichnis des Beitrags

Aufbau des Visual Graphic Novels

Es gibt 4 Ebenen:

  • 1. Start-Bildschirm
  • 2. Szenen-Wahl
  • 3. Home-Scene
  • 3. Outdoor-Scene
  • 4. End-Bildschirm

Die erste Ebene, der Startbildschirm, dient dem User dazu, das Visual Graphic Novel zu starten.
Auf der zweiten Ebene kann der User eine Szene (Home- oder Outdoor-Szene) auswählen, ohne jedoch das Szenenbild vorher zu sehen. Hier liest er nur den Text der Entscheidungsmöglichkeiten, was auch einen kleinen Überraschungseffekt bei der Auswahl geben soll.
Auf der dritten Ebene kann der User dann zwischen den beiden Szenen hin und her springen, so oft er möchte. Um das ganze unterhaltsamer zu machen, spricht die Figur einen Text. Die Sprechblase wiederholt sich hierbei unendlich oft, sodass der User den Text gut lesen kann, ungeachtete der Lesegeschwindigkeit.
Die vierte Ebene ist der Endbildschirm, wo sich ein “Thanks for playing” (DE: “Danke für das Spielen”) bei dem User verabschiedet. Auf dieser Ebene hat der User die Möglichkeit, das Visual Graphic Novel erneut zu starten.

Verwendete Programmiersprachen:

Die ganze Animation wurde auf Codepen erstellt. Für die Erstellung der einzelnen Animation/-en wurden verwendet:

    • HTML5
    • CSS3
    • JavaScript & JQuery

Um JQuery zu verwenden, muss dies bei den Codepen-Einstellungen erst mit diesem Link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js importiert werden, wie auf der folgenden Abbildung:

Eigene Abbildung: Bei Codepen JQuery importieren
Eigene Abbildung: Bei Codepen JQuery importieren

Besonderheiten

Die Besonderheiten bei dem Visual Graphic Novel sind klein, haben jedoch einen großen Effekt und Einfluss.
Zunächst ist das Design schlicht gehalten, bzw. der Hintergrund und die Hauptfarbe der Buttons. Dadurch wird die Aufmerksamkeit des Users auf die Szenen(-bilder) und die einzelnen, visuellen Effekte gelenkt.

Die Effekte der Klasse ‘hint

Die Klasse ‘hint’ hat das Ziel, den User durch das Visual Graphic Novel zu führen. Der visuelle Effekt ist ein türkis-farbenes Pulsieren (in CSS definiert). Beim Startbildschirm (Ebene 1) wird die Aufmerksamkeit des Users somit vor allem auf den Start-Button gelenkt. Danach (Ebene 2) wird der Effekt “verschoben” und ist nun nur auf der Szenen-Auswahl zu sehen, damit der User weiß, dass er sich nun für eine der beiden Optionen entscheiden soll. Ist nun eine Szene ausgewählt (Ebene 3), wird der pulsierende Farb-Effekt auf die nicht ausgewählte Option verschoben, sowie den Stop-Button. Damit weiß der User zum Einen, dass die andere Option noch ausgewählt werden kann, und zum Anderen, dass jederzeit das Spiel nun beendet werden kann. Wird nun auf den Stop-Button geklickt, wird der Farb-Effekt erneut auf den Start-Button geschoben, damit der User nun die Möglichkeit erkennt, erneut auf Start zu klicken. Die Steuerung, wann der Farb-Effekt, bzw. die Klasse ‘hint’ wo hin verschoben werden soll, wird mit Hilfe der Buttons in JavaScript festgelegt. Der Effekt selbst wird mit CSS erstellt, mehr dazu unter dem Abschnitt Visuelle Effekte.

Die Figur und Objekte

Die Figur ist nicht nur eine Dekoration, sondern erfüllt auch einen Zweck: Ein Feedback an den User. Das Feedback ist simpel: Wurde sich nun für eine Szene entschieden, taucht eine Sprechblase von der Figur auf. Damit wird dem User gezeigt, dass die Szenen-Auswahl durchgeführt wurde und etwas passiert ist. Dabei wird der gesprochene Text in der Sprechblase unendlich oft wiederholt, damit der User jederzeit den Text erneut und so oft er will lesen kann. Des Weiteren erheitert der gesprochene Text der Figur (hoffentlich!) den User und hinterlässt somit einen positiven Eindruck. Die Figur wird in CSS mit der Klasse ‘figure’ definiert.
Die anderen Objekte / Graphiken dienen hier der Dekoration und erhöhen den Spaß-Effekt beim Umschalten der Szenen.

Der Wegweiser

Der Wegweiser (eine SVG-Graphik), der einzig allein in Ebene 2 auftaucht, besitzt eine wichtige Funktion: Das Wegweisen. Da Graphiken, bzw. Bilder, meist mehr für sich sprechen als Text, wird dem User vor dem Lesen der Optionen bereits gezeigt, dass nun eine Entscheidung auf ihn zukommt. Ein Wegweiser ist hierbei ein allgemein bekanntes Symbol, dass von dem User nicht falsch verstanden werden kann, und dabei schneller auffällt als der Text in den Optionen. Der Wegweiser wird mit der ID ‘#signpost’ in CSS definiert und mit Hilfe von JavaScript gesteuert. Mehr dazu unter dem Abschnitt Buttons & Option.

Grundbausteine

Da es in dem Visual Graphic Novel viele verschiedene Elemente gibt, die von JavaScript gesteuert werden und auf verschiedenen Instanzen auftauchen sollen, schließen verschiedene div-Container diese ein.

Body

body {
background-size:cover;
font-family: "Comic Sans MS", Helvetica, sans-serif;
border: 1px dashed #ffffff;
border-radius: 30%;
box-shadow:0px 0px 350px; #000000;;
background: radial-gradient(#28427B,#14213D, #0d001f);
justify-content:center;
background-position: center;

Im ‘body’ wird alles Wichtige wie background-size, background-color, sowie die Inhaltsplatzierung innerhalb des ‘bodys’ und die Schriftart definiert. Die border- und box-shadow-Einstellungen schaffen hierbei eine Abgrenzung von dem restlichen Browserfenster und begrenzen die Darstellungsoberfläche des Visual Graphic Novels.

Main-Content-Container

.main-content {
max-width: 700 px;
margin: 0em auto 0;
text-align: center;
max-height:500px;
overflow: hidden;

Der div-Container mit der Klasse ‘main-content’ ist dafür da, um den gesamten Inhalt (also alle Graphiken) als eine Einheit zu platzieren und sie durch JavaScript und JQuery zu steuern, d.h. einen Start-Bildschirm zu erschaffen. Damit kann der gesamte Inhalt in ‘main-content‘ mit einem Klick aus- und eingeblendet werden, wenn einer der Buttons gedrückt wird. Das geschieht dadurch, dass dieser Klasse eine Id ‘gamestop’ und ‘gamestart’ (definiert in CSS) mit der Eigenschaft ‘visibility:hidden’ zugewiesen und wieder entfernt wird.

<!-- die Id wird in JS genutzt, um einen Startbildschirm zu erschaffen --!>
<div id="gamestart" class="main-content"> <!-- wird genutzt, um den main-content zu steuern und zu positionieren -->
$(".start-button").on("click", function() {
$(".main-content").removeAttr("id", "gamestart");
$(".stop-button").on("click", function() {
$(".main-content").attr("id", "gamestop");

 

Mehr zu den Buttons später.

Illustration-Container

.illustration {
position: relative;
align-self: flex-end;
marfin: auto;
height: 250px;
width: 250px;

Der div-Container ‘illustration’ enthält alle Graphiken, bzw. SVG-Graphiken, und fixiert diese. Da nicht alle SVG-Graphiken eine geeignete Proportionalität besitzen, um zusammen dargestellt zu werden, hilft das Fixieren auch dabei, um sie gegenseitig aufeinander abzustimmen.

Person-type: Home-Body & Outdoor-Person

<div class="person-type home-body active"> <!-- hier ist die home-scene mit dazugehörigen Objekten -->
<div class="scenery">
<img src="https://image.freepik.com/free-vector/living-room-interior-with-panoramic-window-night-time_33099-1735.jpg" class="backgroundimg"/>
</div>
<div class="background.items">
<img src="https://image.flaticon.com/icons/svg/214/214283.svg" width="100px" height="400px"/>
</div>
<div class="foreground-items">
>img src="http://image.flatcon.com/icons/svg/198/198916.svg" width="65px" style="margin-left:-10%"/>
<img src="Http://image.flaticon.com/icons/svg/3145/3145435.svg" width="65px" style="padding-left:30%;"/>
</div>
</div>

Mit der Klasse ‘person-type‘ werden in CSS alle Kindelemente dieser Klasse definiert und in JavaScript zwischen den Szenen hin- und hergewechselt, wenn die jeweilige Option ausgewählt wird.

.person-type > div {
transform: scale(0);
opacity:0;
}
.person-type.active > div {
transform: scale(1);
opacity: 1;

Durch ‘person-type > div’ werden alle Kindelemente der Klasse ‘person-type‘ ausgewählt. Es gibt ‘person-type‘ einmal für die Home-Szene (inklusive der dazugehörigen Graphiken) und dann für die Outdoor-Szene. Wenn eine der Szenen ausgewählt wird, wird diese Szene durch ‘person-type.active’ (definiert in CSS) nach “vorne geschoben‘(transform:scale (1))’ und durch ‘opacity:1’ sichtbar gemacht. Die andere Szene wird durch ‘person-type > div’ nach “hinten geschoben ‘(transform:scale(0))’ und mit ‘opacity:0’ unsichtbar gemacht. Dadurch können beide Szenen an den gleichen Platz im Container geschoben werden, ohne dass sie sich gegenseitig verdrängen. Die Szenenauswahl wird durch den Button mit JavaScript ausgelöst. Darauf wird später in Buttons & Option noch mehr eingegangen.

Container Scenery & Backgroundimg

Der div-Container ‘scenery’ umfasst das Szenenbild (für jeweils die Home- und Outdoor-Szene). Mit dieser Klasse wird der Einblendungseffekt / Übergangseffekt beim Szenenwechsel in CSS mit ‘transition:’ definiert.

<div class="scenery">
<img src="https://image.freepik.com/free-vector/living-room-interior-with-panoramic-window-night-time_33099-1735.jpg" class="backgroundimg"/>
</div>

Der div-Container ‘backgroundimg’ wird in CSS definiert und erfüllt den Zweck, die Hintergrundbilder der Szenen auf die gleiche Größe zu skalieren und dem Bild mit ‘border-radius’ und ‘box-shadow’ eine Form und einen visuellen Tiefen-Effekt zu geben.

.scenery 7
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
0/* Styled die Hintergrundbilder der Scenen */
.backgroundimg7
border-radius:50%;
margin-left:-73%;
width:626px;
height: 3356px;
box-shadow: 0px 0px 15px #000000;

Foreground-items Container

<div class="foreground-items">
<img src="https://image.flaticon.com/icons/svg/198/198916.svg" width="65px" style="margin-left:-10%;"/>
<img src="https://image.flaticon.com/icons/svg/3145/3145435.svg" width="65px" style="padding-left:30%;"/>
</div>

Der ‘foreground-items’ div-Container beinhaltet die Graphiken, die sich in den beiden Szenen jeweils weiter vorne befinden und bei einem Szenenwechsel später eingeblendet werden als die Graphik im Hintergrund und das Hintergrundbild.

.forground-items {
transition: all 300ms cubuic-bezier(0.68, -0,55, 0.265, 1.55) 200ms;
margin-top:100%;
}

Mit ‘transition:’ wird der Einblendungseffekt / Übergangseffekt dieser Objekte beim Szenenwechsel festgelegt.

Background-items Container

Der div-Container mit der Klasse “background-items” beinhaltet die eine Graphik (jeweils in beiden Szenen), die zu einem früheren Zeitpunkt als die Graphiken in dem ‘foreground-items container’ in der ausgewählten Szene auftauchen. Dies ist in CSS mit ‘transition:’ definiert, wie in der folgenden Abbildung zu sehen ist.

.backgrouznd-items {
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
top: 23px;
}

Option-Wrapper

Der div-Container ‘option-wrapper’ beinhaltet beide Szenen-Optionen und umschließt diese, damit sie zusammen in einem Button erscheinen können. Außerdem wird mit dieser Klasse der div-Container per JavaScript “anvisiert”, bzw. mit einem Leuchteffekt versehen, damit dieser zum geeigneten Augenblick die Aufmerksamkeit des Users bekommt. Zu den Buttons unter Buttons und zu dem Leucht-Effekt unter Visuelle Effekte mehr.

<div class="option-wrapper">
<aclass="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in. </a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>

Buttons & Option

Die Klasse ‘option’ ist allen Buttons zugeteilt. Also jeweils dem Start- und Stop-Button sowie beiden Szenen-Optionen. Die Klasse ‘option’ regelt mit ‘transition:’ in CSS den Übergang der ausgewählten Option sowie den Style der einzelnen Optionen. Somit grenzen sich z.B. die Outdoor-Szene und Home-Szene innerhalb des ‘Option-Wrappers’ voneinander ab und erscheinen als zwei eigene Buttons. Mit ‘cursor’ wird zudem der Cursor über dem Button definiert.
Die Klasse ‘active’ definiert, wie die ausgewählte Option aussieht. Durch die Klasse ‘active’ verändert sich die Hintergrundfarbe und Schriftfarbe des Buttons (gelber Hintergrund, schwarze Schrift), wenn dieser angeklickt wird.

.option {
transition: all 200ms ease;
padding: 10px 10px 8px;
width: 50%;
border-radius: 50px;
cursor: pointer;
color: #ffffff;
} /* gibt aktiver Option style */
.active{
background: #FFB200;
pointer-events: none;
color: '000000;
}
.option:hover: {
text-decoration: none;
}

Bei der Szenenauswahl wird der ‘person-type’ der jeweiligen Option angesprochen, der bei beiden Szenen unterschiedlich ist und in der JavaScript-Funktion jeweils definiert ist, bzw. welche Elemente dazugehören. Der Wechsel der Optionen, sowie die Zuweisung der Klasse ‘active’, geschieht mit folgender Funktion in JavaScript:

$(".option").on("click", function() {
$(".person-type").removeClass(active");
$(".option").removeClass("active");
$(this).addClass("active");
var type = $(this).data("option");
console.log($(type));

Die beiden Person-Types (‘data-option’ in HTML) der Optionen, also ‘person-type home’ und ‘person-type outdoor’ in JavaScript, bestimmen, welche weiteren Grafiken / Objekte dargestellt werden. Dies ist definiert als if und else if (untere Abbildung) in der Funktion “click”, (obere Abbildung). Wird also die ‘option’ mit dem ‘type == “home”‘ (in HTML data-option) angeklickt, wird der Klasse ‘home-body’ die Klasse ‘active’ zugewiesen. Desweiteren werden damit alle benötigten Elemente für diese Szene eingeblendet, sowie nicht benötigte ausgeblendet, mit folgender Funktion:

setTimeout(function() {
if (type === "home") {
$(".home-body").addClass("active");
$("#signpost").css({"visibility": "hidden"});
$("#bubbletoggle1").css({"visibility": "visible"});
// Hier der Wechsel der Sprachblasen
$(".bubble2").hidden();
$(".bubble1").show();
$".stop-button").addClass("hint");
$(".homeoption").removeClass("hint");
}
<div class="option-wrapper ">
<a class="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in.</a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>

Der ‘Signpost’ ist eine Grafik, die in Ebene 2 eingeblendet wird, hier jedoch ausgeblendet werden soll. Mit der Klasse ‘hint’ wird eine farbliche (türkis-farbene) Umrandung um den Stop-Button gesetzt, damit der User darauf aufmerksam gemacht wird, dass er das Visual Graphic Novel ab jetzt beenden kann. Gleichzeitig wird diese Klasse der jetzt ausgewählten Option entzogen, da die Aufmerksamkeit des Users bereits auf diesem Button liegt. Die ID ‘#bubbletoggle1’ ist in einem anderen Abschnitt erklärt.

Der Start- und Stop-Button

Der Start- und Stop-Button dient dazu, einen Start-Bildschirm und einen End-Bildschirm zu erschaffen, sowie dem User die Möglichkeit zu geben, dass Visual Graphic Novel jederzeit zu verlassen. Dazu wird den beiden Buttons die Klasse ‘active’ gegeben, damit diese genauso wie die Szenen-Options reagieren (weiter oben beschrieben). Ebenso wird zum Zwecke der User-Lenkung und User-Aufmerksamkeit die Klasse ‘hint’ vergeben, die farbliche Effekte (türkis-farbene Umrandung) vergibt.

<span class="hint">
<div class="button hint" style="">
<a class="Start-button option wobble-veretical-on-hover hint">Star !</a>
<a class="stop-button option wobble-vertical-on-hover">Stop playing !</a>
</div>
</span>

Der Style der beiden Buttons wird in CSS festgelegt. Dafür wird die Klasse ‘buttons’ vergeben. Der Zweck der Klasse ‘hint’ wird im Abschnitt ‘Besonderheiten’ und die CSS-Definition unter Visuelle Effekte  mehr erläutert.

.button{
display: flex;
position: center;
margin:0en auto;
background: rgba(255,255,255,0.25);
border-radius: 50px;
padding: 5px;
max-width: 300px;
font-size: 15px;
line-height: 1.2;
} /* Wird genutzt, um per JS zu steuern, wann der Inhalt auftaucht, wenn die buttons gedrückt werden*/
#gamestart{
visibility:hidden;
}
#gamestop{
visibility:hidden;
}/* Danke-Text am Ende des Spiels */

Die ID ‘#gamestart{visibility:hidden;}’ und ‘#gamestop{visibility:hidden;}’ werden in JavaScript dafür verwendet, um beim Klicken der Buttons den ‘main-content’ einzublenden und beim Drücken des Stop-Buttons den ‘main-content’ auszublenden. Zur Übersichtlichkeit der Steuerung in JavaScript wurden also die beiden ID’s jeweils einzeln in CSS definiert, obwohl sie die gleichen Attributwerte besitzen. Die beiden Funktionen für den Start-Button und den Stop-Button sehen wie folgt aus:

$(".star-button").on("click", function() {
$(".main-content").removeAttr("id", "gamestart");
$(".thanks").css({"visibility": "hidden"});
$("#signpost").css({"visibility": "visible"});
// "hint" gibt dem User Hinweise, wo hingeklickt werde
$(".button").removeClass("hint");
$(".start-button").removeClass("hint");
$(".option-wrapper").addClass("hint");
});
//Funktion und eizelne Aktionen, die ausgeführt werde
$(".stop-button").on("click", function() {
$(".mnain-content").attr("id", "gamestop");
$(".bubble").hide();
$("#signpost").removeAttr("style", "visible");
$(".thanks").css({"visibility": "visible"});
$(".button").addClass("hint");
// wenn der stop-button geklickt wird, muss das lightni
$(".stop-button").removeClass("hint");
//hiermit wird die Klasse "hint" den beiden Scenen-Opt
$(".homeoption").addClass("hint");
$(":outdooroption").addClass("hint");
});

Die beiden Funktionen definieren auch, was beim Drücken des Buttons eingeblendet und ausgeblendet werden soll. Dies geschieht durch die Klassen und ID’s, die in CSS definiert sind (wenige Ausnahmen befinden sich als Attributwert in HTML).

Sprechblase

Die Sprechblase der Figur in beiden Szenen hat jeweils einen verschiedenen Text. Aus diesem Grund wurden einmal die Klassen ‘bubble1’, ‘bubbletoggle1’, ‘bubble2’, ‘bubbletoggle2’ vergeben und an beide jeweils die Klassen ‘bubble’ und ‘anim-typewriter’.

<div id="bubbletoggle1" class="buble1" style="visibility:hidden;">
<a lass="bubble bubble1 anim-typewriter "> Ah! That was a good desicion! Now a nice cup of tea...would you set the kettle on? </a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibilioty:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? Ans such charming strangeers visiting!</a>
</div>

Die Klasse bubble

Die Klasse ‘bubble’ ist dafür da, um die Sprechblase per CSS zu stylen. Die CSS-Attributwerte von ‘min-width’, ‘max-width’, ‘max-height’ sind hierbei besonders wichtig, da sie bestimmen, wie groß die Sprechblase werden kann, wenn der Text auftaucht. Je nachdem, wie lang der Text ist, muss natürlich auch die ‘min-width’, ‘max-width’ und ‘max-height’ angepasst werden. Wäre ‘max-height’ in diesem Fall kleiner als die festgelegten ’50px’, würde nicht der ganze Text auftauchen können.

.bubble {
z-index:4;
min-width: 0px;
max-width: 210px;
max-height: 50px;
font-size: 15px;
line-height: 1.2;
display: flex;
text-align: center;
position: absolute;
border-radius: 50px;
margin-right:auto;
margin-left: auto;
left: 85%;
righht:0;
top:50%;
padding:1px;

Des Weiteren ist die Klasse ‘bubble’ auch dafür da, um mit dem Stop-Button die Sprechblase an sich vollends auszublenden (siehe Abschnitt Buttons.

Die Klasse anim-typewriter

Diese Klasse ist in CSS definiert. Sie sorgt für den Effekt der auftauchenden Sprechblase, wo der Text nach und nach erscheint.

.anim-typewriter{
animation: typing 7s steps(8,end) intinite normal both;
-webkit-animation-duration: 7s;
}
@keyframes typing{
from{width: 0;}
to{width: 20em;}

Wichtig hierbei ist der Attributwert infinite, der leider etwas schwierig zu handhaben ist. Darauf wird in “bubbletoggle: Der unendliche Text” weiter eingegangen.

Die Klassen bubble1 und bubble2

Die Klassen ‘bubble1’ und ‘bubble2’ werden in JavaScript verwendet, um die jeweilige Sprechblase in der richtigen Szene einzublenden und auszublenden. Die Klasse ‘bubble1’ ist hierbei für die Home-Szene, ‘bubble2’ für die Outdoor-Szene. Aus- und eingeblendet wird die Klasse in JavaScript mit ‘$(.bubble1).hide()’ und ‘$(.bubble1).show()’. Da beide Szenen auch unterschiedlich helle Hintergründe haben, wird mit dieser Klasse in CSS auch die Farbe der Sprechblasen angepasst.

.bubble.bubble1{
background:rgba(255, 255, 255, 0.30);
padding: 6px 6px 4px;
}
.bubble.bubble2{
background:rgba(26, 22, 95, 0.55);
padding: 6px 6px 4px;

Bubbletoggle: Der unendliche Text

Eigene Abbildung: Der unendliche Text der Sprechblase
Eigene Abbildung: Der unendliche Text der Sprechblase

Der Text in den Sprechblasen wird unendlich wiederholt, um dem User das Lesen zu ermöglichen und zu vereinfachen, wann auch immer die Szene ausgewählt wird und unabhängig davon, wie schnell die Lesegeschwindigkeit des Users ist. Die Klassen ‘bubbletoggle1’ und ‘bubbletoggle2’ werden dafür verwendet, um den Text der Sprechblasen durch JavaScript (und CSS) in HTML mit ‘visibility:hidden’ und ‘visibility:visible’ unsichtbar und sichtbar zu machen. Dies ist sehr ähnlich wie das, was die Klassen ‘bubble’ und ‘bubble1’ (oder bubble2) schon machen. Hierbei gibt es aber ein Problem: Unendlich heißt unendlich. Die einzige Möglichkeit in diesem Fall, den sich unendlich wiederholenden Text in der Sprechblase unsichtbar zu machen, ist über eine extra ID und ein dazugehöriger Style-Attributwert in HTML, der in JavaScript gezielt angesprochen wird. Damit wird keine andere Klasse beeinflusst oder verändert, was später zu Komplikationen führen könnte. In JavaScript sieht das dann folgendermaßen aus: $(“bubbletoggle1″).css({visibility:”visible”}); für die Home-Szene und für die Outdoor-Szene $(“#bubbletoggle2”).css({“visibility:”visible”}); . In dem Abschnitt Buttons ist die gesamte Funktion erklärt und zu sehen.

<div id="bubbletoggle1" class="bubble1" style="visibility:hidden;">
<a class="bubble bubble1 anim-typewriter ">Ah! That was a good decision! Now a nice cup of tea...would you set the kettle on?</a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibility:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? And such charming strangers visiting!</a>
</div>

Visuelle Effekte

Die Klasse hint

Eigene Abbildung: Klasse hint beim Start-Button und Stop-Button
Eigene Abbildung: Klasse hint beim Start-Button und Stop-Button

Die User-Lenkung durch die Klasse ‘hint’ wurde vom Zweck und der Funktion her im Abschnitt Besonderheiten erläutert. Der Licht-Pulse-Effekt wird in CSS erstellt und definiert.

.hint{
-moz-border-radius: 200px/200px;
-webkit-border-radius: 200px 200px;
border-radius: 200px/ 200px;;
border:1px solid #52c7aa;
width: auto;
height:auto;
outline:none;
-webkit-animation-name: hintPulse;
-webkit-animation-duration: 2s;
-webkit-animation-interation-count: infinite;
}
@-webkit-keyframe hintPulse {
from { -webkit-box-shadow: 0 0 3px #0c2720; }
50% { -webkit-box-shado: 0 0 21px #52c7aa; }
to {-webkit-box-shadow: 0 0 12px #246E5B; }
}

Die Dauer der Animation ist mit ‘-webkit-animation-duration:2s;’ festgelegt. Der Farbwechsel (oder auch die Intensität) im Verlauf der Animation ist durch die ‘@-webkit-keyframes hintpulse’ definiert. Dabei wurden verschiedene Abstufungen des original Farbtons für die Intensität verwendet.

Der Wobble-Effekt

Der Wobble-Effekt wird durch die Klasse ‘wobble-vertical-on-hover’ in CSS definiert. Beim Hovern über ein Element mit dieser Klasse “wobbelt” jenes. Damit weiß der User, dass mit diesem Element interagiert werden kann. Die Definition und Animation ist in CSS festgelegt.

.wobble-vertical-on-hover:hover, .wobble-vertical-on-hover:focus, .wobble-verical-on-hover:active {
-webkit-animation-name: wobble-vertical-on-hover;
animation-name: wobble-vertical-on-hover;
-webkit-animation-duration: 1s;
animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: 1;
-webkit-animation-interation-count: 1;
animation-interation-count: infinite;
} /* Bewegungen der Animation wobble, aufgeteilt nach Prozent */
@keyframes wobble-vertical-on-hover {
16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
100% {-webkit-transform: translateY(0);transform: translateY(0);}
}

Mit der Klasse ‘wobble-vertical-on-hover’ und zusätzlich ‘:hover’, ‘:focus’, ‘:active’ wird festgelegt, dass sowohl beim hover, als auch so lange die Maus darauf ist der Effekt gilt. Mit ‘animation-iteration-count:infinite’ wird dieser Effekt so lange wiederholt, bis weder ‘hover’,’active’ noch ‘focus’ für dieses Element gilt, bzw. es dadurch nicht mehr ausgelöst wird. Mit ‘@keyframes wobble-vertical-on-hover’ wird die Bewegung nach oben und unten definiert/ festgelegt; also die Vektoren, wo sich das Element mit dieser Klasse an einem bestimmten Prozent(-punkt) der Bewegung befinden muss.

Und nun sind alle wichtigen Code-Abschnitte erklärt. Falls das Interesse an dem Quellcode (inklusive Kommentare darin!) vorhanden ist, muss nur wieder nach zum Seitenanfang gesprungen, die ZIP-Datei heruntergeladen und entpackt werden!


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2020, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir Euch hier in den nächsten Wochen 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.

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.

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 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.

Arbeitswege

Entwurf/MockUp

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.

Grundgerüst

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.

Styling mit CSS

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.

Einsatz von Javascript

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.

 

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 ist es, mittels einer Handvoll speziell ausgewählter Fragen herauszufinden, welcher Schwerpunkt des Studiengangs Informationsmanagement für den Probanden am Besten geeignet ist. Die Auswahl des spezifischen Schwerpunktes zu Beginn des Studiums kann problematisch sein, deswegen dient der Fragebogen als kleine Entscheidungshilfe.

Mockup

Für die Visualisierung wurde ein klassisches Fragebogen-Layout ausgewählt. Hierbei wird ein warmer Hintergrund gewählt, sowie verschiedene Farben für die einzelnen Antwortmöglichkeiten.

Das Mockup verdeutlicht die erste Visualisierung des Fragebogens

Die Umsetzung

Fragen

Zunächst wurde ein Fragebogen angefertigt. Dieser umfasst zehn individuelle Fragen mit jeweils drei Antwortmöglichkeiten. Die Antworten lassen sich immer in die Kategorien “Medien”, “Intern” und “Bibliotheken” zurückführen.

Programmierung

Nach Einschätzung des benötigten Programmieraufwandes und den damit verbundenen Features trat eine Entwicklung mit React JS als effektivste Lösung hervor. React bietet hierbei eine eine relativ steile Lernkurve und einen einfachen Einstieg. Außerdem ist ein vereinfachter Aufbau der Anwendung durch den Kern von React und seine Komponenten möglich. Dieser Fokus auf die Komponenten erleichtert zusätzlich die Frontend-Entwicklung, da einzelne Teile der Anwendung optimiert werden können, ohne die gesamte Application überwachen zu müssen. Letztendlich resultiert daraus eine vereinfachte Gruppenarbeit, da sich jeder  auf “seine” Komponente konzentrieren kann.

Während der Programmierung wurden drei verschiedene Variablen erstellt, welche sich mit den unterschiedlichen Antworten des Users hochzählen. Dies wird für die Ausgabe der Ergebnisse benötigt.

class Knopf extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fragenID: 0,
      counterb1: 0,
      counterb2: 0,
      counterb3: 0
    }; //aktuellen Status der App definieren

    this.Klick1 = this.Klick1.bind(this);
    this.Klick2 = this.Klick2.bind(this);
    this.Klick3 = this.Klick3.bind(this);
    this.Prozentzahlen = this.Prozentzahlen.bind(this);
  } //Funktionen zu dem Keyword this binden

  Klick1() {
    this.setState({
      counterb1: this.state.counterb1 + 1,
      fragenID: this.state.fragenID + 1
    });
  }
  Klick2() {
    this.setState({
      counterb2: this.state.counterb2 + 1,
      fragenID: this.state.fragenID + 1
    });
  }
  Klick3() {
    this.setState({
      counterb3: this.state.counterb3 + 1,
      fragenID: this.state.fragenID + 1
    });
  }

Zur weiteren Strukturierung und dem Erhalt der Übersichtlichkeit des Codes gehörte es außerdem, die einzelnen Fragen in eine .json-Datei auszulagern. Diese werden durch einen Import

import fragen from "./fragen.json";
[
  {
    "ID": "1",
    "Frage": "Was interessiert dich am meisten?",
    "Antwort1": "Programmieren",
    "Antwort2": "Organisieren",
    "Antwort3": "Bücher"
  },
  {
    "ID": "2",
    "Frage": "Schon mal von Python gehört?",
    "Antwort1": "Ja klar!",
    "Antwort2": "Die Schlange?",
    "Antwort3": "Ich habe mal ein Buch darüber gelesen"
  },
[...]

Auf der Ergebnisseite werden, nach Durchführung des Fragebogens, die einzelnen Schwerpunkte in einem importierten Tortendiagramm dargestellt. Hierfür war es zunächst nötig, externen Code zu implementieren.

import ReactChartkick, { PieChart } from "react-chartkick"; //https://medium.com/@vickdayaram/using-chart-js-with-react-324b7fac8ee6
import Chart from "chart.js"; //https://medium.com/@vickdayaram/using-chart-js-with-react-324b7fac8ee6

Die optische Darstellung wurde auf dem klassischen Weg mit einer CSS Datei verwirklicht.

Alternativ kann zum klassischen Chart mittels eines Buttons zusätzlich die prozentualen Ergebnisanzeige abgerufen werden. Hierfür haben wir folgenden Code genutzt:

Prozentzahlen() {
  this.setState({
    M: (this.state.counterb1 / 10) * 100,
    N: (this.state.counterb2 / 10) * 100,
    B: (this.state.counterb3 / 10) * 100
  });
}

Quellcode

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.

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 den Bauhausstiles mit den Farben Weiß und Grau. Dabei vereinfacht die Farbwahl die Kombination der einzelnen Elemente. Um den Fokus auf den Inhalt zu legen, wurden Schriftfarben und Arten ebenfalls schlicht gehalten und die Contentboxen lediglich mit Schattierungen und Außenlinien vom Rest der Seite abgehoben. Etwas auffälliger hingegen sind die Bilder und die Hover Effekten der Seite.

Animationen

Menü

Im oberen linken Bereich der Seite wurde ein Hamburger Menü eingebunden. Neben einem Hover Effekt leitet das Menü zu den verschiedenen Textblöcken weiter. Bei Klick auf ein Thema springt die Seite automatisch zu dem jeweiligen Block.

Überschrift

Beim Aufruf der Seite baut sich die Überschrift aus einzelnen Buchstaben zusammen. Sie fliegen von verschiedenen Positionen auf ihren Platz. Die Animation soll die Aufmerksamkeit auf den Inhalt der Seite lenken.

Social Media

Am unteren Ende der Seite verbirgt sich ebenfalls eine kleine Animation. Hier sind Verknüpfungen zu Social Media Accounts des Bauhaus Archivs Berlin gelistet. Beim Anwählen der jeweiligen Social Media Plattformen gibt verfärben sich die Symbole in die jeweilige Farbe der verknüpften Seite.

Responsives Designs

Um auch mobil gut auszusehen und den heutigen Standards des responsiven Designs gerecht zu werden, wurden alle Elemente der Seite an verschiedene Browser/Displaygrößen angepasst. Der Hintergrund der Navigation wechselt von transparent zu einem dunklerem Grau, um sich so über die restlichen Elemente zu legen und der Vermischung des Textes entgegenzuwirken. Die Überschriften ändern ihren Abstand zum oberen Bildschirmrand und werden so ungehindert angezeigt. Boxen und Bilder, die den Content der Seite darstellen, passen ihre Höhen und Breiten an.

Links/Quellen

Genutzte Codezeilen:

Social Media Links:

Bilderquellen:

Seitentext:

 

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:

  1. Header mit integriertem Slider und Navigation
  2. Die Hauptseite mit dem vertikalem Zeitstrahl
  3. Footer mit den Direktoren

One Pager

Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den gesamten Inhalt darstellt. Der “One Pager” wird in diesem Fall vertikal aufgebaut und grenzt die drei Bereiche mit grafischen Elementen voneinander ab. Die Navigation erfolgt entweder durch Klicken auf den Menüpunkt im Header, hierbei wird direkt zum gewählten Bereich im Zeitstrahl gesprungen, oder durch eigenständiges Herunterscrollen. Anders als bei Webseiten mit Unterseiten wird die Struktur über sogenannten Sektionen und Sprungmarken erreicht, die über die Navigationsleiste bedient werden können.

Scroll-to-top

Für eine besucherfreundliche Seite wurde ein “Scroll-to-top-button” eingeführt, der es ermöglicht, längere Bereiche der Seite zu überspringen. In der rechten unteren Seite des Browsers erscheint ein Button, sobald min. 300 Pixel nach unten gescrollt wurden. Ein Klick auf den Button und der Seitenbesucher wird per animiertem Scrolling zurück ans obere Seitenende geleitet.

Favicon

Als kleines Extra verfügt die Seite über ein Favicon. Zu erkennen ist dieses Tab-Fenster des Browsers. Ein Favicon ist ein sehr kleines Logo, welches normalerweise eine Größe von 16×16 Pixel besitzt.  Dazu dient das Favicon meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.

Footer/Slider

Footer und Slider der Seite sind responsiv gestalltet.

Vorgehenweise

Um die Menge der Daten und Texte darzustellen, die von Design-Studenten bereitgestellt wurden, schien eine vertikale Timeline am sinnvollsten, um das Konzept des “One-Pager´s” nicht zu verletzen. Des Weiteren mussten die vorhandenen Bilder ebenfalls sinnvoll eingebaut werden. Letztendlich geschah dies in Form eines Sliders im oberen Bereich der Seite und mit einer Animation der Direktorenbilder im Footer.

Realisierung

One Pager

Die Realisierung des One-Pagers über sogenannte Sections, einer Art Anker innerhalb einer HTML-Seite.

<body>
  
  <section id="start"> </section>
  
  <nav role='navigation'>
  <ul>
    <li><a href="#start" class="active">Start</a></li>
    <li><a href="#weimar">Bauhaus Weimarer Zeit</a></li>
    <li><a href="#dessau">Bauhaus Dessauer Zeit</a></li>
    <li><a href="#berlin">Bauhaus Berlin</a></li>
    <li><a href="#direktoren">Direktoren</a></li>
  </ul>
</nav>  


<div class="css-slider">
  <h1 class="title">Bauhaus-Ereignisse 1919 - 1933</h1>
</div>
 
  
  

  </br>
  <h2>
    <img src="css/bauhaus.gif">
  <section id="weimar">Bauhaus Weimarer Zeit (1919 - 1925)  </section>
  </h2>
  <section class="timeline">
  <ul>
    <li>
      <div>
        <time>1919</time> Gründung des Staatlichen Bauhauses durch Walter Gropius am 1. April 1919 in Weimar. 
        </br>Johannes Itten wird zum Meister berufen und Leiter des Vorkurses den er selbst als Einführungssemester entwickelt hat.
      </div>
    </li>

Slider

  • Zeile 290
    •   Dauer des ganzen Sliders  20 Sekunden
    • fünf Sekunden pro Bild
  • Zeile 285 – 288
    • enthält die Bilder
    • Startbild die Eigenschaft“repeat”
  • Zeile 276:
    • Funktion des Z-index: hält Slider in einer der hinteren Ebenen,  wäre dieser höher, wäre die Navigation nicht mehr sichtbar
    • Navigation im Browser “fest”,  höchste Z-Index von allen Elementen der Navigation
.css-slider h1 {
   font-size: 5.5vw;
   color: #fff;
   text-align: center; 
   
}

.css-slider {
  overflow: hidden;
  padding: 10% 0 15%;
  position: relative;
  margin: 48px auto 0;
  max-width: 100%;  
  
}

.css-slider:before,
.css-slider:after {
   content: "";
   z-index: -1;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}

.css-slider:before {
  width: 500%; 
  background: url("dessau.jpg") no-repeat,  
  url("weimar.jpg") no-repeat,  
  url("sw.jpg") no-repeat,
  url("100.jpg") repeat-x;
  background-position: 75% top, 50% top, 25% top, 0% top; 
  background-size:  20% auto; 
  animation: slide 20s ease-in-out  infinite;

}

.css-slider:after {
  right: 0;
  background:rgba(0, 0, 0, .25);
  
}

JS-Erläuterungen

  • Zeile 5
    • Sections, die als Links mit “#” versehen sind
  • Zeile 7
    • Container, zu dem man scrollen will
  • Zeile 8
    • Scroll Speed in Millisekunden
  • Zeile 10
    • Höhe der Navigation
$.fn.pageScroller = function( options ){

    var settings = $.extend({ 
        nav: 				$(this),
        links: 				$(this).find('a'),
        navActiveClass:		'active',
        scrollContainer: 	$('html, body'),
        scrollSpeed:		1500,
        section: 			$('section'),
        navHeight: 			$(this).outerHeight()
    }, options);

Quellen

Element Bemerkung
Scroll-to-top-Button JS-Datei verändert und Design selber angepasst. Die Kommentare auf der Webseite benutzt.
Timeline Die Timeline dient lediglich Impuls. Wir haben zusätzlich zu diesem Template einen Header und Footer konfiguriert. Innerhalb der Timeline wurden die Epochen als animierte Elemente innerhalbs eines One-Pagers runter gebrochen.
Bilder genutzte Bilder
Ajax genutztes Frameworks