Was ist Flask?

Was ist Flask?

Autor: Esben Christian Pedersen


Inhalt

Was ist Flask überhaupt?

Flask ist ein WSGI Micro-Framework für Webapplikationen. Ursprünglich wurde Flask als Aprilscherz von Armin Ronacher im Jahr 2010 entwickelt. Auf Grund steigender Beliebtheit unter den Usern, gründete Armin Ronacher die „The Pallets Project“-Sammlung von Open Source Code Bibliotheken. Diese Sammlung dient nun als Organisation hinter Flask und weiteren Bibliotheken wie Werkzeug und Jinja, um die Flask aufgebaut ist. Dabei stützt sich Flask nur auf die nötigsten Komponenten die für die Webentwicklung benötigt werden ( routing, request handling, session). Alle anderen Komponenten müssen dementsprechende entweder selbst entwickelt oder über zusätzliche Pakete hinzugefügt werden.[1]

Was Flask so außergewöhnlich macht ist der simple Einstieg und die Effizienz im Zusammenspiel mit anderen Python Bibliotheken. Was dem Entwickler erlaubt Web-Applikationen mit Flask im größeren Stil zu entwickeln und auszubauen, ohne dem Entwickler etwas aufzuzwingen. Da die „The Pallets Project“-Sammlung sich einer großen Unterstützer Community erfreut, gibt es viele Erweiterungsmöglichkeiten welche die Funktionalität erhöhen und Flask äußerst flexibel werden lässt.[2]

Wie das Micro-Framwork Flask funktioniert soll in den folgenden Teilen dieses Beitrags deutlich werden. Sei es die simple installation, oder die einfach Handhabung.


Installation

Wie einfach es ist mit Flask eine Web-Applikation mit Flask zu erstellen soll in den folgenden Abschnitten deutlich werden.

Des Weiteren bietet es sich an beim Entwickeln einer Flask Web-Applikation eine virtuelle Entwicklungsumgebung wie Pythons hauseigene virtualenv zu verwenden um Projektabhängigkeiten und Bibliotheken für jedes Projekt entsprechend zu verwalten. Außerdem ermöglicht die virtualenv eine schnelle und einfach Portierung bzw. ein schnelles unkompliziertes Deployment einer Applikation.

Wie Pythons virtuelle Entwicklungsumgebung funktioniert ist hier näher beschrieben „virtualenv“.

Um Flask zu installieren kann man einfach „pip“ benutzen. Dies ist der Package Installer für Python:

$ pip install Flask

So einfach lässt sich Flask installieren mit seinen benötigten Paketen installieren.[3]

Hello World!

Wie einfach das erstellen einer Web Applikation mit Python und Flask ist soll an einem simplen „Hello World“ Beispiel verdeutlicht werden. Dazu wird die Datei „app.py“ angelegt. Diese lässt sich einfach mit einem Texteditor öffnen und bearbeiten (z.B. PyCharm oder VS Code).

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World!"

if __name__ == '__main___':
    app.run()

Zur Erklärung: In Zeile 1 importieren wir Flask und in initieren in Zeile 3 eine neue Instanz der Flask-Klasse und weisen sie der Variable „app“ zu. In Zeile 5 wird ein „Decorator“ benutzt um die Route/View „/“ der View-Funktion „index()“ zuzuweisen. Also einfach gesagt: Wird die Seite „/“ des Servers im Browser angefragt, so führt dieser die View-Funktion aus die den Content „Hello World!“ bereitstellt.[4]

Der letzt Abschnitt des Codes startet den Server sobald die Datei für den Interpreter aufgerufen wird. Wenn alles richtig installiert ist sollte nun folgender output zu sehen sein:

(webapp) $ py app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Die im Code erstellte Seite „/“ mit der „index()“-Funktion lässt sich einfach über den Webbrowser öffnen. Dazu lediglich in der Adresszeile des Browser auf „http://localhost:5000/“ oder „http://127.0.0.1:5000/“ aufrufen. Die aufgerufene Seite sollte nun „Hello World!“ in der linken oberen Ecke zeigen.

Routing and Views

Routing bezeichnet das auflösen und händeln von URLs. Dabei soll beim aufrufen einer URL der korrekte Inhalt im Browser dargestellt werden. Bei Flask wird dies mit dem Route- „Decorator“ eine Funktion an eine URL gebunden um ihren Content nach dem Aufrufen der URL bereitzustellen. Das folgende Bild soll den Ablauf der URL Auflösung und dem damit verbunden bereitstellen von Content verdeutlichen.[5]

Im vorangegangenen Hello World Beispiel wird dies in Zeile 5 und 6 gemacht. Nach dem aufrufen der URL „http://localhost:5000/“ sollte in der Konsole/der Shell folgendes zu sehen sein:

(webapp) $ py app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [29/Jan/2021 11:56:33] "GET / HTTP/1.1" 200 –

Es ist zu sehen das der Browser eine Anfrage für die „/“-Route an den Server stellt. Dieser verarbeitet die Anfrage entsprechend der mit der Route verbundenen View-Funktion „index()“. Im Anschluss sendet der Server http-status: 200 (OK) und rendert „Hello World!“.

In der Konsole stehen sämtliche Anfragen und http-status codes die vom Flask-Server verarbeitet werden.

Routen und http-Methoden:

Der „Decorator“ kann ein weiteres Argument annehmen. Dieses Argument ist eine Liste mit den für den „Decorator“ erlaubten http-Methoden.

from flask import Flask

app = Flask(__name__)

@app.route(„/users/“, methods=['GET', 'POST'])
def users():
    # Routr Logic #

Somit lassen sich Routen in der Nutzung bestimmter http-Methoden einschränken. Ist jedoch keine Liste angegeben so ist die „GET“-Methode als Standard festgelegt.

Mithilfe der „Decorator“ lassen sich auch dynamische und variable Regeln für Routen festlegen, da statische Routen eine Website stark einschränken können. So lässt sich im folgenden Beispiel eine Profilseite für registrierte User anlegen oder gepostete Artikel/Beiträge bekommen eine eigene URL basierend auf dem Datum an dem sie Online gestellt worden und ihrem Titel.

Dabei geben die „<>“ an ob es sich um eine Variable handelt. So lassen sich Routen dynamisch generieren. Zusätzlich lässt sich der Variablen-Typ angeben der verarbeitet werden soll „<datatype:variablename>“. Folgende Variablentypen sind für Routen vorgesehen und möglich:

  • string: Akzeptiert Text ohne „/“.
  • int: Akzeptiert ganze Zahlen (integers).
  • float: akzeptiert numerische Werte die einen Dezimalpunkt enthalten.
  • path: Akzeptiert Text mit „/“ (Pfadangaben)

Dynamische Routen können dementsprechend im Gegensatz zu statischen Routen Parameter entgegennehmen und verarbeiten. Somit ließe sich auch eine API mit Flask umsetzen um Daten für User zugänglicher und nutzbarer zu machen oder einen erhöhten Automatisierungsgrad für Datenabfragen zu ermöglichen. Um dies deutlich zu machen dienen die folgenden Beispiele:[6]

from flask import Flask, escape

app = Flask(__name__)

@app.route(„/users/<username>“)
def profile(username):
    return f'<h1>Welcome { escape(username) }</h1>'
Return „randomuser“ nach Browseranfrage
from flask import Flask, escape

app = Flask(__name__)

@app.route(„/article/<int:year>/<int:month>/<title>“)
def article(year, month, title):
    month_dict = {
        "1": "January",
        "2": "February",
        "3": "March",
        "4": "April",
        "5": "May",
        "6": "June",
        "7": "July",
        "8": "August",
        "9": "September",
        "10": "October",
        "11": "November",
        "12": "December"
        }
    return f'<h1>"{ escape(title) }" from { escape(month_dict[str(month)]) } { escape(year) }</h1>'
Return Date and Title nach Browseranfrage

So einfach diese Beispiele sind, so geben sie doch einen deutlichen Ausblick auf die Möglichkeiten, welche sich mit Flask bieten. Welche Unternehmen Flask in ihrer Entwicklung benutzen kann hier eingesehen werden.

Die Template Engine

Wie werden jetzt aus statischen HTML-Dateien dynamische Websiten mit Flask? Ganz einfach, mit Hilfe der eingebauten Template Engine Jinja. Jinja ist eine vielseitige und einfache Templete Engine mit der sich unter anderem auch dynamische HTML-Inhalte erstellen lassen. Sie basiert dabei auf der „Django“ Template Engine bietet jedoch viel mehr Möglichkeiten wie volle „unicode“ Unterstützung und „automatic escaping“ für mehr Sicherheit in Webanwendungen. Zusätzlich lassen sich die gängisten verwendeten Codeblöcke der html-templates immer wieder verwenden und vielseitig einsetzen. Dabei verwendet die Template Engine Variablen, Ablauflogiken und Anweisungen um im Template verwendete Ausdrücke mit Inhalt zu füllen.[7]

Funktionsweise Template Engine Jinja

Um das ganze noch mehr zu veranschaulichen dient der folgende Beispiel Code mit der angegeben Projektstruktur:

|-- app.py
|-- static
|   `-- css
|       `-- main.css
-- templates
    |-- about.html
    |-- index.html
    |-- layout.html
    `-- page1.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Title: -->
    <title>Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  </head>
    <!-- Start of body -->
  <body>
    <header>
      <h1>Flask Web App</h1>
    </header>
    <div class="navbar">
      <strong><ul class="navmenu">
        <li><a href="{{ url_for('home') }}">Home</a></li>
        <li><a href="{{ url_for('page1') }}">Page 1</a></li>
        <li><a href="{{ url_for('about') }}">About</a></li>
      </ul></strong>
    </div>
    <content>
      <div class="container">
        <!-- At this place the child templates get rendered by Flask -->
        {% block content %}
        {% endblock %}
      </div>
    </content>
  </body>
</html>
{% extends "layout.html" %}

{% block content %}
<br>
<br>
<h1> Welcome to the Flask Web App</h1>
<br>
<br>
{% endblock %}
{% extends "layout.html" %}

{% block content %}
<br>
<br>
<h1> Page 1 example</h1>
<br>
<br>
{% endblock %}
{% extends "layout.html" %}

{% block content %}
<br>
<h2> About this Web App:</h2>
<br>
<h3> This App was build using Flask</h3>
{% endblock %}
/* main.css file containing the styling information for the flask webapp */

body {
    margin: 10;
    padding: 5;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: #444;
}

/* Header */

header {
    background-color: lightblue;
    height: 40px;
    width: 100%;
    opacity: .9;
    margin-bottom: 10px;
}

header h1 {
    margin: 0;
    font-size: 1.7em;
    color: black;
    text-transform: uppercase;
    float: left;
}

/* Body content */

.container {
    width: 100%;
    margin: 15;
}

/* navbar */

.navbar {
    margin: 5px;
    padding: 5px;
    border: 5px;

}

.navmenu {
    float: left;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 5px;
}

.navmenu li {
    display: inline;
}



.navmenu li a {
    color:slategray;
    text-decoration: none;
}
from flask import Flask, escape, render_template

app = Flask(__name__)

# Routes and Views:

@app.route("/")
def home():
    return render_template('index.html')

@app.route("/about/")
def about():
    return render_template('about.html')

@app.route("/page1/")
def page1():
    return render_template('page1.html')

# run flask server:
if __name__ == '__main__':
    app.run()

Wird der Server nun gestartet und im Browser die einzelnen Seiten der Applikation aufgerufen werden die html-templates für die entsprechende Seite gerendert.

Die Möglichkeiten zum nutzen von Templates sind schier endlos für Flask und bieten viel Raum für eigene Ideen und Umsetzungsmöglichkeiten in der Webentwicklung.

Fazit

Flask ist eine tolle Möglichkeit zum Einstieg in die Webentwicklung und bietet vielseitige Umsetzungsmöglichkeiten für Applikation, Websites oder APIs. Zudem ist es einfach zu lernen. Die dahinter stehende Community, die Umfangreiche Dokumentation, die Möglichkeit jedes Python Package miteinzubeziehen und die Masse an Tutorials bieten viel Raum um sich, Flask und die eigene App zu entwickeln/weiterzuentwickeln. Ohne das Flask dabei den Entwickelnden Rahmenbedingungen aufzwingt. Zusätzlich ist Lernkurve recht klein und der Entwickler wächst schnell in die Anforderungen und Möglichkeiten hinein.

  1. Stender, Daniel (2017): Tropfen um Tropfen. In: Entwickler Magazin, Jg. 2017, H. 6. Online unter: https://kiosk.entwickler.de/entwickler-magazin/entwickler-magazin-6-2017/tropfen-um-tropfen/ [Abruf am 10.01.2021]
  2. Stender, Daniel (2017): Tropfen um Tropfen. In: Entwickler Magazin, Jg. 2017, H. 6. Online unter: https://kiosk.entwickler.de/entwickler-magazin/entwickler-magazin-6-2017/tropfen-um-tropfen/ [Abruf am 10.01.2021]
  3. The Pallets Project (2020): Installation. Online unter https://flask.palletsprojects.com/en/1.1.x/installation/ [Abruf am 04.01.2021]
  4. The Pallets Project (2020): A minimal application. Online unter https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application [Abruf am 04.01.2021]
  5. The Pallets Project (2020): Routing. Online unter https://flask.palletsprojects.com/en/1.1.x/quickstart/#routing [Abruf am 04.01.2021]
  6. The Pallets Project (2020): Variable Rules. Online unter: https://flask.palletsprojects.com/en/1.1.x/quickstart/#variable-rules [Abruf am 04.01.2021]
  7. The Pallets Project (2020): Templating. Online unter: https://flask.palletsprojects.com/en/1.1.x/templating/ [Abruf am 04.01.2021]

Alle Codebeispiele sind selbst erarbeitet und getestet.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden.

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

Der Computer für alle

Autor: Nils Dille


Computer waren früher ernsthafte Geräte für ernsthafte Arbeit und demnach auch nicht sehr einfach zu bedienen oder zugänglich.6 Der 1981 erschienen IBM 5150 startete bei einem umgerechneten Preis von ca. 4.400$ und kam dabei nicht mal mit einem Diskettenlaufwerk. Laden und Speichern von Programmen und Daten war so nur über Audiokassetten möglich. Eine sehr langsame und schmerzhafte Erfahrung. Warum man also als Privatperson einen Computer kaufen sollte war fragwürdig. Die rein Textbasierte Interaktion mit dem Gerät schreckte ebenfalls ab und nur technisch versierte Menschen könnten mit einem solchen Gerät etwas anfangen.11

Was ist also mit dem Rest der Menschen?

Ein neuer Weg

1984 kam eine andere Idee des Computers auf dem Markt. Es sollte ein freundliches Haushaltsgerät sein. Leicht zu bedienen und günstig. Dabei aber leistungsfähiger als andere Rechner. Ein Computer der Informationen ausspuckt wie ein Toaster geröstetes Brot.4 Die Rede ist von dem Macintosh von Apple. Der erste erschwingliche Heimcomputer mit grafischer Benutzeroberfläche und einem Zeigegerät namens Maus.

Anstatt Textbefehle einzugeben, konnte man nun einfach auf Ordner und Dateien zeigen, um sie zu öffnen oder zu verschieben. Textdokumente sahen auf dem Bildschirm so aus wie aus dem Ausdruck. Jalousie-Menüs machten die Arbeit einfacher.12 Alles Dinge die man heute von allen Computern kennt. Sie wurden auf dem PC allerdings erst ein Jahrzehnt später zum Standard.7 Der erste Mac war allerdings kein Erfolg. Schlicht zu teuer war er und nicht genug Software war auf dem Markt. 499$ war der Preis den Steve Jobs angedacht hatte. Daraus wurden dann aber 2.495$.12

Besser als ein Notebook, besser als ein Smartphone?

Was ist also aus der Idee des Informationstoasters geworden? Die Welt brauchte wohl noch ein bisschen. Apple probierte es 2010 nochmal mit einer ähnlichen Idee und diesmal mit einem Preis von 499$. Die Rede ist vom iPad. Ein Gerät, das bei seiner Vorstellung im Publikum für Verwirrung gesorgt hat. Die doch sehr zurückhalten Reaktion sind den Zuschauern deutlich anzuhören.2

Von der Presse wird die Daseinsberechtigung eines solchen Gerätes in Frage gestellt. Es sei doch nur ein großes iPhone ohne Telefon und ohne Computer kann man das Ding ja auch nicht einrichten.8 Für wen soll das also gut sein? Das iPad entspricht den ursprünglichen Ambitionen des Macintoshs besser als dieser es jemals konnte. „If you know how to point, you already know how to use it. “, so hieß es in einem Werbespot für den Mac von damals.5 Beim iPad kann man jetzt direkt auf den Bildschirm zeigen und braucht keine Maus mehr.

Tablet Computer Front
Das iPad von vorn
Tablet Computer hinten
Und einmal von hinten. Ganz schön wuchtig aus heutiger Sicht.

Die Idee
Tablet Computer existierten schon lange als Idee in den Köpfen von Sci-Fi Autoren. Eines der ersten Auftritte im Kino hatte das Tablet in Stanly Kubriks 2001: Odyssee im Weltraum aus dem Jahr 1968. Hier wurde ein Tablet verwendet, um einen Videoanruf vom Raumschiff Odyssee zur Erde herzustellen.14 Das iPad hat den Tablet PC nicht erfunden und es gab eine mannigfaltige Auswahl solcher gerate in den 90ern und 2000ern. So auch den Dauphin DTR-1 von 1993. DTR steht hierbei für Desktop-Replacement. Ausgestattet mit Windows 3.1 for Pen Computing und einem Intel 386 Prozessor im inneren stand der Arbeit nichts im Wege. Bis auch das häufig schmelzende Netzteil vielleicht. Das hat mich jedenfalls bisher abgehalten.13 Desktop Arbeitsumgebungen in Tablet Form zu pressen ist wohl ein anderer Grund. Es bedarf einer grundlegen neuen Bedienung, um eine Vernünftige Nutzererfahrung zu schaffen. Und das Internet fehlte damals auch noch.

Meine Erfahrung

Mein Vater kaufte das iPad direkt als es in Deutschland auf den Markt kam. Es übte eine eigenartige Faszination auf mich aus. Das iPad träumte großer als der Macintosh es sich jemals vorstellen konnte. Alles wollte alles sein und das zeigte sich auch. Ein Webbrowser, eine E-Mail-Maschine und Unterhaltungsgerät, aber auch so einige etwas absurdere Einsatzwecke waren angedacht. So kann man vom Sperrbildschirm aus eine Diashow starten und das Gerät zusammen mit dem Dock als digitalen Bilderrahmen verwenden. Mit dem eingebauten Line-Out im Dock kann man sein iPad mit der Stereoanlage verbinden und es so als Musikspieler verwenden. Mit dem AV-Kabel lässt sich das iPad auch an den Fernseher anschließen, um seine Verwandten mit Urlaubsfotos zu langweilen. Importieren kann man die Fotos mithilfe des 30-Pin-Dockconnenctor auf USB oder SD-Karten Adapters. Und wer längere Texte schreiben will, kann einfach eine Bluetooth Tastatur koppeln.

Tablet Computer Bilderrahmen
Der Digitale Bilderrahmen Modus. Wer braucht da noch echte Fotos…

All dieses Zubehör war in üblicher Apple Manier natürlich nicht mitenthalten, aber mein Vater hat sich alles gleich dazu bestellt. Es sollte sein neuer Heimcomputer sein und auch sein einziger. Das ist etwas was sich bis heute nicht geändert hat. Das iPad ist nicht mehr das gleiche, er ist jetzt bei seinem dritten, aber er hat traditionellen Computern den Rücken gekehrt. Größtenteils weil sie teurer und klobiger sind, aber vor allem weil sie schwieriger zu bedienen sind. Das ist etwas was mir schon so manches Mal aufgefallen ist. Wenn ich meine Eltern meinen Laptop vorsetze, um Ihnen etwas zu zeigen, kommt es häufig vor, dass sie den Finger heben und versuchen auf dem Display zu tippen. Das bringt nur Fingerabdrücke auf den Bildschirm, zeigt aber wie natürlich Touch-Bedienung geworden ist.

Der Computer ist tot, lange lebe der Computer!

Mobile Endgeräte machen den größten Teil des Internetverkehres aus. Klassische Computerumgebungen werden mehr und mehr zu einem Nischenmarkt für Entwickler und Professionelle.3, 10 Man hört selten am Esstisch jemanden davon reden, wie er seinen Arbeitsspeicher erweitert hat und nun endlich das neue Betriebssystem installieren kann. Oder wie man die Wärmeleitpaste seiner CPU erneuert hat, um die Temperatur im Betrieb zu senken. Die meisten wollen ein Gerät, das einfach funktioniert und das tut was es soll. Ohne irgendwelche Erweiterungen oder Instandhaltung. Und das ist genau das was Tablets bieten. Man kann und muss sich um nichts kümmern. Das Gerät an sich steht im Hintergrund und der Content im Vordergrund. Das beeinflusst dann auch unseren Umgang mit den Inhalten.

Ein prominentes Beispiel dafür ist der Tod des Flash Players von Adobe. Lange Zeit ein unverzichtbares Werkzeug bei der Erstellung von Webinhalten, ist dieses Jahr endgültig von Adobe eingestellt worden. Ab den 01.02.2021 ist sogar das reine Ausführen des Programms von seitens Adobe blockiert, wenn es noch auf dem Rechner installiert ist.1 Ein Grund für den Untergang von Flash war zu keinem kleinen Teil die sture Verweigerung Flash auf iOS Geräte zu bringen. Steve Jobs hatte seine Gründe damals in einem offenen Brief geäußert.9 Wenn Websites heutzutage keine mobile Version aufweisen, können sie als kaputt und nutzlos betrachtet werden. Ob es einem gefällt oder nicht, wir leben in der Zeit nach dem Computer.

Literaturverzeichnis

1 Abobe (2021): Allgemeine Informationen zur Produkteinstellung von Adobe Flash Player. Zuletzt aktualisiert am 13.01.2021. Online unter https://www.adobe.com/de/products/flashplayer/end-of-life.html [Abruf am 29.01.2021]

2 Ben Hollberg (2010): Introducing iPad. Video publiziert am 29.01.2010 aus YouTube. Online unter https://youtu.be/qxWEpp206lg [Abruf am 30.01.2020]

3 BroadbandSearch (2021): Mobile Vs. Desktop Internet Usage (Latest 2020 Data) Online unter https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics [Abruf am 28.02.2021]

4 Dernbach, Christoph (o.J.): The History of the Apple Macintosh. Online unter https://www.mac-history.net/top/2020-02-10/the-history-of-the-apple-macintosh [Abruf am 29.01.2021]

5 epicyoutubevideos (2015): Old macintosh ads (1984-85). Video publiziert am 11.08.2015 auf YouTube. Online unter https://youtu.be/JkU3WCSGSw4 [Abruf am 29.01.2021]

6 Hoffman, Cris (2014): PCs Before Windows: What Using MS-DOS Was Actually Like. Zuletzt aktualisiert am 11.05.2014. Online unter https://www.howtogeek.com/188980/pcs-before-windows-what-using-ms-dos-was-actually-like/ [Abruf am 29.01.2021]

7 Long, Tony (2011): Aug. 24, 1995: Say Hello to Windows 95. Zuletzt aktualisiert am 24.08.2014. Online unter https://www.wired.com/2011/08/0824windows-95/ [Abruf am 29.01.2021]

8 Seeger, Andreas (2010): iPad im Test: Keiner braucht das iPad, alle wollen es. Zuletzt aktualisiert am 11.05.2010. Online unter https://www.areamobile.de/iPad-3G-Tablet-273566/Tests/iPad-im-Test-Keiner-braucht-das-iPad-alle-wollen-es-1329423/ [Abruf am 29.01.2021]

9 Shankland, Stephen (2010): Steve Jobs‘ letter explaining Apple’s Flash distaste. Apple’s CEO doesn’t like Flash. Here’s the full memo explaining why the company is keeping Adobe Systems‘ software off the iPhone and iPad. Zuletzt aktualisiert am 29.04.2010. Online unter https://www.cnet.com/news/steve-jobs-letter-explaining-apples-flash-distaste/ [Abruf am 29.01.2021]

10 StatCounter (o.J.): Operating System Market Share Worldwide – December 2020. Online unter https://gs.statcounter.com/os-market-share [Abruf am 29.01.2021]

11 Steve’s Old Computer Museum (2020a): IBM Personal Computer (PC). Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/ibm5150.html [Abruf am 28.01.2021]

12 Steve’s Old Computer Museum (2020b): Apple Macintosh. Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/macintosh.html [Abruf am 28.01.2021]

13 Steve’s Old Computer Museum (2020a): Dauphin DTR-1. Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/dauphin-dtr-1.html [Abruf am 29.01.2021]

14 Wigley, Samuel (2019): Did Stanley Kubrick invent the iPad?. Zuletzt aktualisiert am 12.05.2019. Online unter https://www2.bfi.org.uk/news-opinion/news-bfi/features/did-stanley-kubrick-invent-ipad [Abruf am 29.01.2021]


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden.

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

Forty in 49: Ein Spiel für Gedächtnis und räumliches Vorstellungsvermögen

Beitragsbild forty in 49 - ein Spiel für das Gedächtnis und das räumliche Vorstellungsvermögen

Autor: Jannis Fortmann

Link zum Spiel
Zip Datei zum Download

Inhalt

Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen.

Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.

Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.

Animationen

Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.

Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.

Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, 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.

Tutorial: Ein Tag mit Bobby

Beitragsbild Tutorial zur Animation: Ein Tag mit Bobby

Autor*in: Julia Solohub 


Animation anschauen

Quellcode (Zip-Archiv zum Download)

Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten kann.

Inhaltsverzeichnis

Das Konzept

Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird.  Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.

Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.

Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.

Aufbau

Die Animation ist in vier Szenen aufgeteilt:

  1. Start-Szene (div class=“ story_start_scene“)
  2. Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
  3. Bobby im Park (div class=“background_image_park_day“)
  4. Schluss-Szene bei der Bobby im Park nachts ist (div class=“dog_in_park_night“)

Start Szene

Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.

Start Szene

Zweite Szene

In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.

Zweite Szene
Zweite Szene

Dritte Szene

Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.

Dritte Szene
Dritte Szene

Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.

Vierte Szene

Vierte Szene
Vierte Szene

Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.

Letzte Szene
Letzte Szene

Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten

Der Code

Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.

Allgemeine Einstellungen

In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.

<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
      <div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
         <img src="sleeping_dog.png" id="sleep"/>
         <img src="carpet.png" id="carpet"/>
       </div>
    
       <div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
          <div class="living_room_background">
            <img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
           </div> 
           <div class="dog_character">
             <img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
             <img src="sprechblase.png" id="speak1" style="visibility: hidden;"/> 
             <p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
           </div>
       </div>

       <div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
           <div class="background_image_park_day">
             <img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>        
           </div>
           <div class="park_items">
             <img src="grill.png" id="bbq" style="visibility: hidden;"/>
             <img src="food.png" id="hot_dog" style="visibility: hidden;"/>
             <img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
             <img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
             <p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
             <p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
             <img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
             <img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
             <img src="ball.png" id="toy" style="visibility: hidden;"/>    
           </div> 
       </div>

       <div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.--> 
           <div class="background_image_park_night">
             <img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/> 
             <img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
             <img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
             <img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>  
             <p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
             <p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
           </div>
       </div>
 </div><!--Ende der "animation_start"-->

In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.

<body>
  <!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
  <script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
  <aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
    <h1> Ein Tag mit Bobby</h1>
    <button id="button_aufwecken">
       <a class="button_1">Aufwecken</a>
    </button>
    <button id="button_park" style="visibility: hidden;">
      <a class="button_2">Lass uns in den Park gehen</a>
   </button>
   <button id="button_hot_dog" style="visibility: hidden;">
      <a class="button_3">Hot Dog geben </a>
    </button>
    <button id="button_play" style="visibility: hidden;">
      <a class="button_4">Mit Bello spielen</a>
    </button>
    <button id="button_next" style="visibility: hidden;">
     <a class="button_5">Weiter</a>
   </button>
   <button id="button_good_night" style="visibility: hidden;">
     <a class="button_6">Gute Nacht!</a>
  </button>
   <button id="button_reload" style="visibility: hidden;">
     <a class="button_7">Neustart</a>
 </button>
</aside> 

Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.

#animation { /*Ausrichtung der gesamten Animation*/
  align-items: center;
  min-height: 100%;
  position: absolute;
}

.whole_animation {
  max-width: 900px;
  margin: 0em auto 0;
  text-align: center;
  max-height:800px;  
  overflow: hidden;
}
  
.title_and_buttons { /*Ausrichtung aller Buttons und der h1*/
  max-width: 900px;
  text-align: center;
  margin: 1em auto; 
  padding:1px;
}
   
h1 {
  color: white;
  font-size: 1.7rem;
}

Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.

body {
  font-family: "Comic sans MS"; 
  background-size: cover; 
  justify-content:center;
  background-position: center;
  background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead); 
  background-size: 400% 400%;
  align-items: center;
  min-height: 100%;
  overflow:hidden;
  -webkit-animation: moving_background 13s ease infinite;
  animation: moving_background 13s ease infinite;
}

@-webkit-keyframes moving_background {  /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
  }
  100% {
      background-position: 0% 50%;
  }
}

Die Buttons

Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.

Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.

#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
  border-radius: 50%;
  align-items: center;
  font-size: 15px;
  display: flex;
  margin: auto;
  background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%);  /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
  background-size: 200% auto;
  box-shadow: #a05a9c 0px 0px 5px;
  -webkit-animation: push_buttom 3s infinite;
  animation: push_button 3s infinite;
  outline: none;
}


@-webkit-keyframes push_button {                       /*Inspired by https://css-tricks.com/css-animation-libraries/*/
  0% {
    box-shadow: 0px 0px 4px rgb(255,250,250);
  }
          
  
  50% {
    box-shadow: 0px 0px 23px rgb(255,250,250);
  
  }
  100% {
    box-shadow: 0px 0px 12px rgb(255,250,250);
  }
}

@keyframes push_button {                       
0% {
  box-shadow: 0px 0px 4px rgb(255,250,250);
}
        

50% {
  box-shadow: 0px 0px 23px rgb(255,250,250);

}
100% {
  box-shadow: 0px 0px 12px rgb(255,250,250);
 }
} 

#button_aufwecken:hover {
  background-position: right center;
  transition: all 0.5s ease-out;
  }
      
.button_1{
  flex: 1 auto;
  margin:5px;
  padding:10px 25px;
  text-align:center;
  transition: all 0.5s ease-out;
  cursor:pointer;
  background-size: 200% auto;
  font-family: "Comic sans MS";
}

Animierte Objekte

Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin.  Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.

Text in Sprechblase

Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.

#welcome_text { /*Annimation für Text in der Sprechblase. Wird in jeder Szene eingesetzt*/
  position: relative;
  bottom: 392px;
  left: 475px;
  z-index: 4;
  font-size: 10px;
  box-sizing: border-box;  
  overflow: hidden;
  border-width: 20px;
  border: 1px hidden;
  width: 135px;

  -webkit-animation: typing_hello 1.5s ease infinite; 
  -webkit-animation-delay: 0s;
  -webkit-animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;

  animation: typing_hello 1.5s ease infinite;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-play-state: paused;     
}

  @-webkit-keyframes typing_hello {
   0% {
    transform: 
       scale(0.7, 0.7);
       color:rgb(116, 9, 107)
  }
   50% {
    transform: 
       scale(0.9, 0.9);
       color:rgb(85, 25, 134)
  }
   100% {
    transform: 
      scale(0.7, 0.7);
      color:rgb(73, 41, 214)
  }
}

Fliegender Hot Dog

Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.

#hot_dog { /*Animation des fliegenden Hot-Dogs*/
  width: 47px;
  z-index: 2;
  position: relative;
  bottom: 300px;
  right: 225px;

  -webkit-animation-name: flying_hot_dog;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-play-state: paused;
  
  animation-name: flying_hot_dog; 
  animation-duration: 2s;
  animation-fill-mode:forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: paused;
}
 
  @-webkit-keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

  @keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

Bello und Bobby beim Ballspielen

Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.

#bello { /*Ab hier folgt die Animation der zwei mit dem Ball spielenden Hunde*/
  width: 90px;
  z-index: 3;
  position: relative;
  bottom: 430px;

  -webkit-animation: move_bello 2s infinite;
  -webkit-animation-delay: 1s;

  animation: move_bello 2s infinite;
  animation-delay: 1s;
}

@-webkit-keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

@keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

#bobby {
  width: 90px;
  z-index: 3;
  position: relative;
  left: 200px;
  bottom: 430px;

  -webkit-animation: move_bobby 2s infinite;
  animation: move_bobby 2s infinite;;
}

@-webkit-keyframes move_bobby {
  from {  bottom: 477px; animation-timing-function: ease-out; }
    50% { bottom: 570px; animation-timing-function: ease-out; }
     to { bottom: 477px; }
}

Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.

Saltomachender Bobby

In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.

#night_dog {
  width: 80px;
  position: relative;
  right: 380px;
  bottom: 1039px;
  -webkit-animation: salto_dog 2s infinite;
  -webkit-animation-timing-function: linear;
  animation: salto_dog 2s infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes salto_dog {  /*Animation von Bobby, der eine Rückwärtsrolle macht*/
  from  { transform: translateX(0px) translateY(0px)  rotate(0deg) }
  50%   { transform: translateX(0px) translateY(-80px) rotate(-180deg) }
  to    { transform: translateX(0px) translateY(0px)rotate(-360deg) }
}

Buttons

#button_reload {
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px; 
margin-top: -50px;
}

#button_reload {
-webkit-animation-name: button_load;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: paused;
-webkit-animation-direction: alternate-reverse;

animation-name: button_load; 
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count:infinite;
animation-play-state: paused;
animation-direction: alternate-reverse;
}

@-webkit-keyframes button_load {
  from  { transform: translateX(-20px) scaleX(1.0)}
  to    { transform: translateX(20px) scaleX(-1.0)}
} 

Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.

Gute Nacht, Bobby Schrift

Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.

#good_night_bobby{ /*Verabschiedung durch "Gute Nacht" Text Animation*/
  position: relative;
  bottom: 1500px;
  font-size: 30px;
  color: white;
  -webkit-animation: push_good_night 3s infinite;
  animation: push_good_night 3s infinite;
  animation-timing-function: cubic-bezier(.1,0,.7,1);
  outline: none;
}

  @-webkit-keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
    transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
    transform: scale(.97);
  }
   50% {
    text-shadow: 6px 6px 8px rgb(19, 236, 184);
 }
   60% {
    transform: scale(.99) rotate(-2deg);
 }
   80% {
    transform: scale(1.05);
 }
   100% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(135, 222, 241);
 }
 }

  @keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
   transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
   transform: scale(.97);
  }
   50% {
   text-shadow: 6px 6px 8px rgb(19, 236, 184);
}
   60% {
   transform: scale(.99) rotate(-2deg);
}
   80% {
   transform: scale(1.05);
}
   100% {
   transform: scale(1);
   text-shadow: 2px 3px 6px rgb(135, 222, 241);
}
}

JavaScript/jQuery

var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/

$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() {  /*Button "Aufwecken"*/
    $(".story_start_scene").css({"visibility": "hidden"});
    $(".backgroundimage_livingroom").css({"visibility": "visible"}); 
    $("#hello_dog").css({"visibility": "visible"});
    $("#speak1").css({"visibility": "visible"});
    $("#button_park").css({"visibility": "visible"});
    $("#button_aufwecken").css({"visibility": "hidden"})
    $("#welcome_text").css({"visibility": "visible"});
    $("#name_text").css({"visibility": "visible"});
    $("form").css({"visibility": "visible"});
    
    $("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
    $("#welcome_text").css({"-webkit-animation-play-state": "running"});

    name = prompt("Bitte gib deinen Namen ein", "Snoopy");     /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
    console.log(name);

    if (name != null) {                                                                    
        document.getElementById("welcome_text").innerHTML =
        "Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
      }

});

Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(„#button“).on(„click“, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.

Bobby JS
Bobby JS

Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.

Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.

$("#hot_dog_text").css({"-webkit-animation-play-state": "running"});
$("#button_hot_dog").css({"-webkit-animation-play-state": "running"});

Besonderheiten

Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.

Schwierigkeiten

Beim Erstellen der Animation traten zwei Probleme auf.

  1. Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der „abgetippte Text“ nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
  2. Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, 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.

Was sind interaktive Videos?

Interaktive Videos

Autor: Serkan Sarica


Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt.

Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch vorgefertigt aufgezeichnet. Die Technik hat sich durch höhere Auflösungen und bessere Farben etc. deutlich verbessert, aber gab es wirklich revolutionäre Veränderungen für den Zuschauer? Wir sitzen vor dem Bildschirm und gucken nur zu. An der Technik haben wir doch schon so viel getan, warum nicht auch dem Zuschauer neue Funktionen geben? Bist du auch davon gelangweilt die Geschehnisse einfach hinzunehmen? Dann sind interaktive Videos genau das Richtige für dich.

Überblick

Klick dich gern durch den Beitrag:

Was sind interaktive Videos?

Wenn dir jemand mehr Kontrolle geben will, würdest du es ablehnen?
Interaktive Videos animieren den Nutzern Interaktion durchzuführen und ermöglichen somit Kontrolle über den Inhalt. Somit werden diese Art von Videos nicht passiv konsumiert – ganz im Gegenteil: Du als Zuschauer nimmst eine aktive Rolle ein und beeinflusst den Inhalt. Obwohl diese Videos schon seit Jahren existieren, sind sie immer noch kaum verbreitet.[1]

Einsatzmöglichkeiten

Diese Technik kann in vielen Bereichen eingesetzt werden.

Beispiele:

  • Lehre
  • Werbung
  • Entertainment

Vorteile von interaktiven Videos

Die Marketingagentur Room214 gibt mit ihrer Statistik an, dass die Click-Through-Rate bei interaktiven Videos bei 5-12 % liegt. Die üblichen Videos hingegen liegen bei nur 1-2 %. Außerdem wurden sie zu 90% vollständig angeschaut. Normale Videos wurden hingegen zu 50% – 85% komplett angeschaut. Ein weiterer Vorteil ist, dass die Anzahl der Aufrufe steigt. Dies kommt zustande, weil verschiedene Szenarien auswählbar sind und die Neugier der Zuschauer somit steigt. Sie wollen nämlich wissen, wie das Video ausgeht, wenn sie einen alternativen Pfad auswählen.

Einsatz in der Lehre

Die Technik hat vor allem in der Lehre sein Nutzen. Es ermöglicht über interaktive Punkte die Aufmerksamkeit zu fokussieren. Dadurch können die Inhalte des Videos vertieft werden.

„Diese interaktiven Punkte erlauben es, die Aufmerksamkeit der lernenden Person auf eine bestimmte Sequenz oder ein bestimmtes Detail des Videos zu lenken und tragen damit zum Verständnis des Videoinhalts bei. Auf diese Weise können die Lernenden das Maß an
Informationen regulieren und damit eine kognitive Überlastung vermeiden.“
Mehrwert darstellen
Abb. 1.: Mehrwert von Videos und interaktiven Videos aus der Sicht von Lehrpersonen[3]

Vor allem für Lernende mit wenig Vorstellungskraft ist diese Technik somit besonders hilfreich!

Beispiele

Honda Presents The Other Side

Beim folgenden Video handelt es sich um eine Werbung von Honda. In diesem Video kannst du parallel zwei Geschichten erleben. Per Mausklick oder R-Taste kannst du entscheiden, welche Story du sehen möchtest.

360° Video New Lipton Magnificent Matcha Tea Takes You Inside the Cup

In diesem Fall dachte sich Lipton „Warum nicht mit einem 360° Video unseren Tee vermarkten?“. Diese Technik ermöglicht dir das Video aus verschiedenen Perspektiven zu sehen. Außerdem kannst du entscheiden, was du dir genauer anschauen möchtest.

Star Wars: Welche Farbe hat dein Lichtschwert?

Star Wars Fans aufgepasst, denn dieses Beispiel ist etwas Besonderes! Hierbei handelt es sich um eine Reihe von Videos die zusammen eine Interaktive Geschichte bilden. Du kannst nämlich am Ende des Videos selbst wählen, wie die Geschichte weitergeht. Dafür wirst du zu einem nicht gelisteten Video weitergeleitet. Am Ende erfährst du welche Farbe dein Lichtschwert hat.

Fazit

Interaktive Videos sind die Weiterentwicklung von Web Videos. Auch wenn die Technik noch nicht sehr verbreitet ist, zeigt sie sehr viel Potential für die Zukunft. Immer mehr Streamingdienste bieten bereits interaktive Titel an, denn die Nachfrage steigt. Video ohne Interaktionen mit dem Zuschauer können in naher Zukunft deutlich an Beliebtheit verlieren. Anbieter wie auch Nutzer profitieren von dieser Technik. Die Nutzung macht nicht nur Spaß, sondern hat viele Vorteile für beide Seiten. Eins ist klar, interaktive Videos werden das Internet revolutionieren!

Quellen

1 Pink University (2016): Interaktives Video in der Weiterbildung – Formate und Vorteile. Online unter https://www.pinkuniversity.de/blog/e-learning-interaktives-video-interaktives-schulungsvideo-in-der-weiterbildung/ [Abruf am 14.07.20]

Beitragsbild: Photo by Donovan Silva on Unsplash.


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

React & Angular im Vergleich – Was führt dich zum Erfolg?

Beitragsbild

Autor*in: Melanie Hartkopf


Ihr habt euch für die Webentwicklung entschieden – Glückwunsch. Ein Feld, so überlaufen wie kaum ein anderes. Hinter jeder Ecke wartet ein neues Projekt mit dem die Entwicklung einfacher, effektiver, schneller und sicherer sein soll. In dem Dschungel an Möglichkeiten ist es leicht, sich zu verirren. Deswegen stelle ich euch heute zwei der beliebtesten Frameworkes in Sachen Single-Page-Webanwendungen vor und vergleiche. React oder Angular (nicht zu verwechseln mit der Vorgängerversion AngularJS) – welches Framework passt am besten zu dir?

Der Beitrag in der Übersicht

Du kennst dich bereits aus? Dann spring doch gleich an die Stelle, die dich interessiert!

Die Welt der Single-Page-Webanwendungen

Single-Page-Applications, kurz SPA unterscheiden sich von herkömmlichen Webanwendungen insbesondere in einem Punkt – es gibt nur eine einzige HTML-Datei. Hierauf können Daten verändert und/oder dynamisch geladen werden. Die Verarbeitung ist somit client-seitig. Soll also beispielsweise etwas durch User-Interaktion geändert werden, wird keine neue HTML-Datei geladen, sondern die Datei client-seitig verändert.

Ablauf SPA vs normale Webanwendungen
Ablauf einer Webanwendung vs. SPA – Quelle: Selbst erstellt

Veranschaulicht seht ihr den Vorgang in dieser Grafik. Am Anfang arbeiten normale Webanwendungen genau wie SPAs. Die allererste Anfrage wird vom Client an den Server geschickt, welche mit einer HTML-Datei antwortet. Während sich bei der SPA diese niemals ändert, wird bei einer herkömmlichen Webanwendung dieser Vorgang wiederholt (sieht rote Pfeile). Findet eine neue Abfrage mittel POST statt, wird auch eine neue HTML-Datei von dem Server an den Client geschickt – und die Seite lädt neu. Bei SPAs (siehe grüne Pfeile) wird eine Anfrage mittels AJAX gesendet und mittels JSON wird die HTML Datei verändert.
Kein neues Laden, keine langen Wartezeiten. SPAs sind schneller und genau deshalb in der Webentwicklung immer beliebter.1 Nun aber zurück zu unseren SPAs Angular und React.

Angular & React – Was haben sie gemein?

Beide Plattformen sind Vorreiter in der Webentwicklung, genauer gesagt der Frontend-Entwicklung, da sowohl Angular, wie auch React eine Komponentenhierachie verwenden.

Kleiner Exkurs: Komponenten verwalten immer einen Teil einer View und können Unterkomponenten haben. Beide Projekte sind Open Source unter MIT Lizenz. Freier Zugang also. Auch auf die Community hinter beiden Plattformen könnt ihr euch verlassen.2 So glänzt insbesondere React mit inzwischen rund 149.000 Sternen auf Github. So gut wie jede Frage, die während der Entwicklung aufkommen wird, wurde bereits gefragt und beantwortet. Aber was zeichnet Angular und React aus? Und wer steht dahinter?
Wenn ihr einen schnellen Einblick über den Aufbau von Angular und React sucht, dann schaut am besten auf Stackblitz oder einer ähnlichen Seite vorbei. Dort könnt ihr ohne großen Aufwand ein Projekt mittels Angular oder React starten und euch mit den Strukturen vertraut machen, bevor ihr euch entscheidet.

Angular – Googles Framework 2.0

Hello World Aufbau von Angular
Hello World von Angular – Quelle: eigener Screenshot

So könnte auch euer erstes Projekt in Angular starten. Das Hello World der komplexen Ordnerstruktur von Angular.

Ihr fangt grade erst mit der Webentwicklung an und versteht schon jetzt die Welt nicht mehr? Ihr habt noch nie etwas von Angular gehört? Dann schaut dieses Video, in dem Angular simpel für Beginner erklärt wird und lest danach weiter.
Angular ist ein Framework von Google, welches 2016 auf dem Markt erschienen ist, es ist also relativ „frisch“. Allerdings ist Angular kein Neuling, denn schon lange vor Angular gab es AngularJS. Die Vorgängerversion erschien bereits 2010. AngularJS und Angular sind nicht kompatibel, da Angular ein komplett neues Konzept vertritt und auch in einer neuen Sprache geschrieben ist – TypeScript. Diese Sprache wird auch in der Entwicklung mittels Angular verwendet.3

TypeScript? Aber ich kann doch nur JavaScript? Muss ich für Angular eine komplett neue Sprache lernen?

Keine Sorge, Angular ist für jeden verwendbar. Zwar empfiehlt das Team von Angular, TypeScript zu verwenden, aber auch reines JavaScript ist möglich. Die Chancen, die TypeScript bietet, sind aber nicht zu verachten. Und der Unterschied zwischen TypeScript und JavaScript ist gar nicht groß. Der Name sagt schon alles, was ihr Wissen müsst. TypeScript arbeitet mit Typen, erkennt, wenn falsche Typen deklariert werden – und warnt, was JavaScript allein nicht tut.4 Ein schneller Einstieg gelingt euch beispielsweise mit diesem Kurs.
Angular verwendet das Model-View-View Model. Sagt dir nichts? Macht nichts, im nachfolgenden Video wird es schnell und simpel erklärt.

React – Facebooks mächtige Bibliothek

Hello World Aufbau von React
Hello World von React – Quelle: eigener Screenshot

Simple Ordnerstrukturen, verwirrender Code. So beginnt das Hello World von React.


Ein großes Fragezeichen steht über euren Köpfen, wenn Ihr React hört? Dann schaut am besten dieses Video als fixen Einstieg.
React ist genaugenommen gar kein Framework, sondern nur eine JavaScript Bibliothek. Geschaffen 2011, von niemand anderem als Facebook, ist React wohl der beste Indikator dafür, dass eine einfache Bibliothek mächtiger sein kann, als man denkt. Der wichtigste Unterschied zu einem Framework ist, dass React sich einzig auf die View Ebene beschränkt. Zwar ist React relativ simpel aufgebaut, es lassen sich aber viele weitere Bibliotheken sehr einfach integrieren.5
Hinzu bietet React eine JavaScript-Syntax-Erweiterung mittels JSX, was vergleichbar mit XML ist. Aber wieso? Das Ziel von JSX ist es, das komplette User-Interface mittels einzelner Komponenten nachzubauen, um HTML in JavaScript zu integrieren. Richtig gehört, die Realität ist bei React einmal komplett verdreht worden. Standardgemäß wird nämlich JavaScript in HTML integriert. So wird nicht nur der Code übersichtlicher, sondern auch DOM-Manipulation fast unmöglich gemacht.6

Was solltest du wählen?

Viel Input, aber immer noch keine klare Empfehlung. Ich entschuldige mich – auch dafür, dass ihr vielleicht noch immer eine klare Empfehlung erwartet. Denn leider ist es nicht einfach zu sagen, zu wem React und zu wem Angular passt. Ein paar einfache Tipps kann ich euch aber mit auf den Weg geben.

Logo von Angular
Angular Logo – Quelle: angular.io

Angular gilt im allgemeinen als einsteigerfreundlicher, sowohl für Neulinge in der Web-Entwicklungswelt, als auch für Entwickler, die bereits Erfahrungen mit Java oder C++ gesammelt haben. Aber auch React hat viele Vorteile und ist nicht umsonst das beliebteste Framework, ohne überhaupt ein Framework zu sein.

Logo von React
React Logo – Quelle: reactjs.org

Ein Anreiz für React ist der Virtueller DOM, wodurch alles deutlich schneller wird, Angular kann hier nicht mithalten. Hinzu ist React auch bei kleineren Projekten gut geeignet, Angular wirkt dahingehend schnell überladen. Durch die schnell hinzufügbaren Bibliotheken ist React sehr flexibel und auch bei großer Interaktivität nützlich. Angular ist durch seine vielen vordefinierten Funktionen eher funktionabel als flexibel und bei geringer Interaktivität besser.7

React arbeitet mit JSX, was für Einsteiger abschreckend wirken kann. Oft kommt viel Code in einer Datei zusammen. Angular hingegen arbeitet mit HTML, erweitert mit Direktiven. React arbeitet mit dem One-Way-Binding, wodurch die Applikation schneller und flüssiger wird, aber insbesondere wird das Debuggen erleichtert. Angular arbeitet mit einem Double-Blind-Feature, wird also auf der einen Seite etwas verändert, verändert sich die andere Seite ohne, dass dafür etwas getan werden muss. So wird die Seite sehr schnell und responsiv, ein wichtiger Faktor.8

Angulars größter Anreiz ist wohl das, was viele Neulinge auf den ersten Blick abschreckt – TypeScript. Diese Sprache ist allerdings nicht mehr aufzuhalten und wird immer mehr verwendet. Sie ist relativ schnell zu lernen und öffnet viele neue Möglichkeiten. Wenn nicht jetzt, wann dann?

React oder Angular? And the winner is …

Auf wen fällt meine Wahl? Das wird wohl immer davon abhängen, was ich mit meiner Single-Page-Webanwendung erreichen will und wie. Arbeite ich allein oder im Team? Wie ist die Vorerfahrung von jedem einzelnen und wie die Vorlieben? Was ist das Ziel des Projekts?

Eine richtige oder falsche Wahl gibt es kaum. Eher zählt das subjektive Empfinden jedes Einzelnen. Also, wie fällt deine Wahl aus? React oder Angular?
Erstellen Sie Ihre eigene Umfrage zu Nutzerfeedback.

Quellen

1 Domin, Andreas (2018): Was ist eigentlich eine Single-Page-Webanwendung? Online unter https://t3n.de/news/single-page-webanwendung-1023623/ [Abruf am 11.05.2020]

2 Schlemmer, Frederik (2019): Angular, React oder vue.js? Eine Entscheidungshilfe. Online unter https://www.adesso.de/de/news/blog/angular-react-oder-vue-js-eine-entscheidungshilfe.jsp[Abruf am 19.05.2020]

3 Gosebrink, Fabian (2017): Ein Überblick über Angular. Online unter https://www.digicomp.ch/blog/2017/01/16/angular-ein-uberblick [Abruf am 16.05.2020]

4 Tillmann, Janna (2017): Was ist eigentlich Typescript? Online unter https://t3n.de/news/eigentlich-typescript-859869/ [Abruf am 14.05.2020]

5 Österle, Jonas (2017): React — Eine Einführung in fünf Minuten. Online unter https://medium.com/brickmakers/react-eine-einf%C3%BChrung-in-f%C3%BCnf-minuten-515dc38ceb73 [Abruf am 12.05.2020]

6 Gude, Thomas (2016): React und seine Alternativen. Online unter https://entwickler.de/online/javascript/react-244922.html [Abruf am 12.05.2020]

7 Ventzke Media (2018): Angular vs. React – Ein ausführlicher Vergleich. Welche Bibliothek passt zu Ihrem Projekt? Online unter https://www.ventzke-media.de/blog/angular-vs-react-vergleich.html [Abruf am 19.05.2020]

8 Tillmann, Janna (2017): React vs. Angular – wann ist was besser? Online unter https://t3n.de/news/react-vs-angular-besser-845241/2/ [Abruf am 19.05.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.

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.