Buchtipp: Blended learning environments to foster Self-Directed Learning

Blended learning environments to foster Self-Directed Learning

Ein wunderbares und gesundes 2023 allerseits!

Da wir uns hier im WebLab öfter mal mit selbstgesteuertem Lernen befassen, möchte ich heute ein neues Buch zu dem Thema empfehlen:

Blended learning environments to foster Self-Directed Learning

Van der Westhuizen, C., Maphalala, M.C. & Bailey, R. (eds.), 2022, Blended learning environments to foster self-directed learning, NWU Self-Directed Learning Series, Vol. 8, pp. i-306, AOSIS Books, AOSIS Publishing (Pty) Ltd, Cape Town.

Es ist auf Englisch verfasst und über Open-Access frei verfügbar als pdf.

Synopsis

This book on blended learning environments to foster self-directed learning highlights the focus on research conducted in several teaching and learning contexts where blended learning had been implemented and focused on the fostering of self-directed learning. Several authors have contributed to the book, and each chapter provides a unique perspective on blended learning and self-directed learning research. From each chapter, it becomes evident that coherence on the topics mentioned is established. One of the main aspects drawn in this book, and addressed by several authors in the book, is the use of the Community of Inquiry (CoI) framework when implementing teaching and learning strategies in blended learning environments to foster self-directed learning. This notion of focusing on the CoI framework is particularly evident in both theoretical and empirical dissemination presented in this book. What makes this book unique is the fact that researchers and peers in varied fields would benefit from the findings presented by each chapter, albeit theoretical, methodological or empirical in nature – this, in turn, provides opportunities for future research endeavours to further the narrative of how blended learning environments can be used to foster self-directed learning.

Back Cover

In this book, self-directed learning is comprehensively examined as an indispensable 21st-century skill on the path to successful, lifelong learning in the most diverse facets.

Blended learning environments open the way to the future in order to promote and improve self-directed learning in the long term, taking into account metacognition, differences in socio-economic background and digital capability, among other factors. Since COVID-19, blended learning has gone from being optional to mandatory, so that the need for concepts, strategies and solutions for self-directed learning in blended learning environments has increased immensely.

The book is highly recommended as an introduction to the theory and practice of self-directed learning, but also of particular interest to researchers and teachers experienced in this field. It provides a comprehensive insight into contemporary concepts, challenges and practical solutions with precious experiences. The basics of self-directed learning in blended learning environments are explained in detail and, building on this, new trends and developments are discussed and formulated in a plausible way. The results presented are very well transferable to the international context, as educators and institutions worldwide are certainly in need of assistance and such valuable empirical evidence on precisely these points.

The contributions in this book definitely help to adequately underpin the importance of self-directed learning in science and education and to postulate it as a particularly important prerequisite for success in the 21st century. The diverse teaching strategies and practical examples in the book are an inspiration for lecturers and offer scientific orientation for designing one’s own teaching settings, with a focus on self-directed learning. The promotion of self-directed learning through blended learning scenarios becomes a symbiotic, future-oriented premise in the educational context.

Prof. Dr-Ing. Monika Steinberg, Department of Information and Communication, Faculty 3 – Media, Information and Design, University of Applied Sciences and Arts Hannover, Hannover, Germany

Consider to contribute: International Conference on Education Technology Management (ICETM 2022)


The 5th International Conference on Education Technology Management (ICETM 2022)
 will be held in Lincoln, United Kingdom, during December 16-18, 2022.

The conference has added online attendance / presentation for participants in case of you cannot attend the conference.

Call For Papers ICETM2022

The submission deadline is still open until Oct. 15, 2022.

Please consider to contribute.

Student contributions are welcome.

H5P in digitalen Lernplattformen

Autorinnen: Lisa Sommer und Leonora Zullufi

Im Gegensatz zum statischen Content wird bei interaktiven Inhalten der dynamische Content herangezogen. Das heißt, dass es nicht nur gewöhnliche Texte zum Lesen gibt oder Bilder nur betrachtet werden. Bei interaktiven Inhalten wird der Benutzer auch aktiv in das Geschehen eingebunden. Dadurch wird die Aufmerksamkeit erregt und gewonnen. Daher steigt auch die Motivation sich mit den Inhalten des jeweiligen Themas auseinanderzusetzen. Doch wie kommen diese interaktiven Inhalte zustande? Dafür ist es wichtig zu verstehen, was H5P ist, was es anbietet und wie es funktioniert.

Was ist H5P?

  • Optimierung Ihrer Website mit H5P
  • Mobilfreundlicher Inhalt
  • Reichhaltige Inhalte teilen
  • Kostenlos zu verwenden
  • Vorteile von H5P

Anwendungsmöglichkeiten

  • Arten der H5P-Einbettung
  • Content Typen

H5P in Moodle einfügen

  • Plug-ins einfügen
  • Erstellen einer H5P Aktivität 



Was ist H5P?

H5P [b]

In den letzten Jahren hat H5P zunehmend an Bedeutung gewonnen. Dabei handelt es sich um eine Open-Source-Software, die von der Firma Joubel im Jahr 2013 im Auftrag der NDLA (“Norwegian Digital Learning Arena”) entwickelt wurde. Für den Einsatz in (Hoch-)Schulen bietet H5P seit einigen Jahren einen kostenpflichtigen Hosting-Dienst mit zusätzlichen hochwertigen Funktionen an. Diese sind auch für den Einsatz in der Firmenumgebung interessant.

H5P basiert auf modernen Standards wie HTML5, CSS3 und Javascript. Der H5P-Kern ist dabei teils in Javascript, teils in einer Server-spezifischen Programmiersprache wie z. B. PHP geschrieben. Da aber die meisten Funktionalitäten aus Javascript stammen, ist der Teil des H5P-Cores, der portiert werden muss, so klein wie möglich gehalten. H5P kann somit auf unterschiedliche Web-Publishing-Systeme portiert und mit vorhandenen LMS („Lern-Management-Systemen“), wie Moodle, Totara, WordPress oder Drupal, integriert werden. Mittlerweile bieten auch proprietäre LMS, wie etwa Neon LMS, eine H5P-Integration.[1]

Optimierung Ihrer Website mit H5P

H5P macht es einfach, HTML5-Inhalte und -Anwendungen zu erstellen, teilen und wiederverwenden. H5P ermöglicht es jedem, reichhaltige und interaktive Weberlebnisse effizienter zu gestalten– alles, was Sie dazu benötigen, ist ein Webbrowser und eine Website mit einem H5P-Plug-in.[2]

Mobilfreundlicher Inhalt

H5P-Inhalte sind reaktionsschnell und mobilfreundlich. Das bedeutet, dass Benutzer auf Computern, Smartphones und Tablets dieselben reichhaltigen interaktiven Inhalte erleben.[2]

Reichhaltige Inhalte teilen

H5P ermöglicht es bestehenden CMS und LMS, reichhaltigere Inhalte zu erstellen. Mit H5P können Autoren interaktive Videos, Präsentationen, Spiele, Werbung und mehr erstellen und bearbeiten. Inhalte können importiert und exportiert werden. Zum Anzeigen oder Bearbeiten von H5P-Inhalten wird lediglich ein Webbrowser benötigt. H5P-Inhaltstypen und -Anwendungen werden auf H5P.org geteilt. Sie können auf jeder H5P-fähigen Website wie H5P.com oder Ihrer eigenen Drupal- oder WordPress-Website, mit installiertem H5P-Plug-in, erstellt werden.[2]

Kostenlos zu verwenden

H5P ist eine völlig kostenlose und offene Technologie, lizenziert mit der MIT-Lizenz.  Demos/Downloads, Anleitungen und Dokumentationen sind für Benutzer verfügbar, die der Community beitreten möchten.[2]

 Vorteile von H5P

  • H5P ist kostenlos verfügbar
  • H5P ist eine Open-Source-Software und ein Community-Projekt, – jeder kann mitmachen
  • Keine Programmierkenntnisse notwendig – dank des intuitiven H5P-Editors und der zahlreichen Anleitungen auf H5P.org ist das Erstellen von interaktiven Inhalten kinderleicht
  • Mehr als 40 Inhaltstypen – und es werden ständig mehr
  • H5P Inhalte können mit anderen geteilt und wiederverwendet werden
  • Responsives Design – Interaktionen passen sich allen Endgeräten an

 Anwendungsmöglichkeiten

Arten der H5P-Einbettung

  1. Die erste Möglichkeit, H5P einzubetten ist, indem man den Inhalt auf H5P.com erstellt und ihn direkt in die gewünschte Seite einbettet oder über einen direkten Link darauf zugreift.
    Dafür wird kein LMS benötigt.[3]
  2. H5P.com ist eine SaaS-Lösung (“Software-as-a-Service”), das sind cloudbasierte Anwendungen, die über den Webbrowser aufgerufen werden können.[4]
    Über LTI („Learning-Tools-Interoperability“) können externe Tools, Inhalte und Aktivitäten, die online verfügbar sind, in LMS eingebunden werden. [5]
    Beispiele dafür sind Moodle LTI Integration, Canvas LTI Integration, Brightspace LTI Integration und Blackboard LTI Integration.
    H5P.com kann mit fast allen LMS und Systemen, die LTI unterstützen, verwendet werden.[3]
  3. Wenn man H5P selbst hosten möchte, ist dies durch die Verwendung kostenfreier Plug-ins möglich. Offizielle Plug-ins liegen für Drupal, WordPress, und Moodle vor.
    Es liegen aber von der Community erstellte Plug-ins für weitere Plattformen vor. [3]

Content Typen[6]

Interaktives Video[c]

Erstellen Sie Verzweigungen, um verschiedene Aufgabentypen in Ihre Videos einbauen können.

Drag-and-drop

Drag-and-drop Aufgaben ermöglichen es, Inhalte miteinander in Verbindung zu setzen.

Multiple-Choice-Aufgaben[d]

Multiple-Choice-Aufgaben sind besonders gut zur Verständnis-Kontrolle geeignet.

Interaktive Grafiken[e]

Es gibt viele verschiedene Möglichkeiten, Grafiken mit H5P interaktiv zu gestalten. Hier sehen Sie die Gegenüberstellung zweier Bilder.


Viele weitere Anwendungen für H5P und die passenden Anleitungen finden Sie unter „Examples and Downloads“.


H5P in Moodle einfügen

Plug-ins einfügen[7]

Anleitung: Plug-ins in Moodle einfügen[f]

Bildergalerie


Erstellen einer H5P-Aktivität

H5P in Moodle

Achtung, dies ist nur möglich, wenn Sie als Administrator oder als Benutzer angemeldet sind, denn zum Erstellen einer H5P-Aktivität müssen Sie die Berechtigung in dem entsprechenden Kurs haben.

Gehen Sie zu dem Kurs, in den Sie einen H5P-Inhalt hinzufügen möchten. Es sollte sich ein Fenster öffnen, in das Sie Aktivitäten oder Ressourcen hinzufügen können. Dort klicken Sie auf den Plus-Button. Es öffnet sich ein weiteres Fenster, in dem Sie Aktivitäten oder Ressourcen hinzufügen können. Dort klicken Sie auf „H5P“ in der Kategorie „interaktiver Inhalt“ und fügen diese hinzu. Daraufhin müssen Sie einen Inhaltstypen auswählen, um den H5P-Hub zu öffnen. Sobald sich dieser öffnet, können Sie aus mehreren Inhaltstypen entscheiden, welchen Sie einbauen möchten. Nachdem Sie sich einen ausgesucht haben, rufen Sie ihn auf, wodurch Sie auf die Detailseite des Inhaltstypen gelangen. Dort können Sie die Einzelheiten zu beliebigen Inhaltstypen nachlesen.

Um einen Inhaltstypen zu installieren, müssen Sie rechts daneben auf „Installieren“ klicken. Sobald der Inhaltstyp installiert ist, ist er bereit, eingesetzt zu werden. Sobald Sie nun auf „Verwenden“ klicken, öffnet sich direkt der Editor. Wenn Updates zur Verfügung stehen, werden Sie darüber informiert.

Im H5P-Hub können Sie vorhandene H5P-Inhalte hochladen. Klicken Sie dazu oben auf die Registerkarte „Hochladen“. Sie müssen dann nur noch den Vorgang beenden und Ihre Aktivitäten abspeichern.[7]


Zusammenfassend kann man sagen, dass H5P eine cloudbasierte Anwendung ist, die durch entsprechende Plug-ins in verschiedensten Webseiten integriert werden kann. Dazu zählen auch LMS („Lern-Management-Systeme“).

Lehrende können interaktive Videos, Präsentationen, Spiele und mehr verwenden, um Inhalte zu vermitteln oder übersichtlich darzustellen.  


Literaturverzeichnis

[1] Ravalli, Paulo (2021): Apps für Fachexperten: Betriebliches Lernen mit H5P. Online unter https://link.springer.com/content/pdf/10.1007/s43443-021-0316-6.pdf [Abruf am 31.01.2022]

[2] H5P: Erstellen, teilen und verwenden Sie interaktive HTML5-Inhalte in Ihrem Browser. Online unter https://h5p.org/ [Abruf am 31.01.2022]

[3] H5P (2022): Integrations. Online unter https://h5p.org/integrations#integrations [Abruf am 31.01.2022]

[4] Beyer, Jakob (2022): SaaS – die anwenderfreundliche Ebene des Cloud-Computings. Zuletzt aktualisiert am 08.04.2019. Online unter https://www.bilendo.de/library/saas-loesung-definition [Abruf am 31.01.2022]

[5] Verdaguer, Júlia (2021): Was ist LTI und wie kann es Ihr Lernökosystem verbessern? Zuletzt aktualisiert am 17.02.2021. Online unter https://moodle.com/de/news/was-ist-lti-und-wie-es-kann-ihr-lern-okosystem-verbessern/ [Abruf am 31.01.2022]

[6] H5P: Examples and Downloads. Online unter https://h5p.org/content-types-and-applications [Abruf am 31.01.2022]

[7] H5P: Set up H5P for Moodle. Online unter https://h5p.org/moodle [Abruf am 31.01.2022]

Bilderquellen

[Beitragsbild] https://eabyas.com/wp-content/uploads/2019/11/H5P-integration.jpg [Abruf am 31.01.2022]

[b] https://d2be3atgmh2lyq.cloudfront.net/wp-content/uploads/2020/07/h5p-hero-image.png [Abruf am 31.01.2022]

[c] https://elements.envato.com/de/asian-working-businesswoman-talk-to-colleagues-tea-BG5CB9U [Abruf am 31.01.2022]

[d] https://www.pexels.com/de-de/foto/selektive-fokusfotografie-von-octopus-3046629/ [Abruf am 20.02.2022] [e] https://www.pexels.com/de-de/foto/architektur-bau-bekannt-beruhmt-149419/ und https://www.pexels.com/de-de/foto/eiffelturm-wahrend-der-nacht-3879071/ [Abruf am 20.02.2022]

[f] https://h5p.org/moodle [Abruf am 31.01.2022]

WT.Social: Eine Alternative zu Facebook & Co.?

Autorin: Maria H. Nguyen Thu


Mit 2,9 Mrd. aktiven Nutzer*innen im Monat1 bestimmt Facebook die Informations- und Kommunikationswege. Kritiker werfen der Plattform seit längerem vor, die Privatsphäre von Benutzer*innen zu verletzen und nicht gegen Falschinformationen vorzugehen.

Auf der Suche nach einer möglichen Alternative stolpert man über WT.Social, eine noch unbekannte Plattform von einem nicht unbekannten Gründer. Was steckt hinter dem Dienst und kann dieser als ernsthafte Konkurrenz zu den gängigen sozialen Netzwerken wahrgenommen werden?

Überblick


The non-toxic social network
Welcome to a place where advertisers don’t call the shots.
Where your data isn’t packaged up and sold.
Where you – not algorithms – decide what you see.
Where you can directly edit misleading content.
Where bad actors are kicked out and kept out.
Where you actually like spending time.
Welcome to social media the way it should be.
Welcome to WT.Social.

https://wt.social/

Was ist WT.Social?

Im Oktober 2019 veröffentlichte der Wikipedia-Gründer Jimmy Wales das soziale Netzwerk WT.Social. Anders als Facebook, Instagram oder Twitter, konzentriert sich WT.Social als „News Focused Social Media“ auf aktuelle Nachrichten und berücksichtigt weniger den persönlichen Aspekt. Wales begründet die Entscheidung damit, dass der Anteil an Fake News in den sozialen Medien zugenommen habe. So möchte er ein nachrichtenfokussiertes Netzwerk aufbauen, worin die Menschen sich frei jeglicher Einflussnahme über das aktuelle Geschehen informieren können.

Der Aufbau erinnert grob an eine Mischung aus Facebook und Reddit: es ist möglich, eigene Beiträge zu verfassen, sich mit anderen Personen zu vernetzen und einen persönlichen Feed zu erstellen.

Keine Werbung, Kein Tracking

Versprochen wird nicht nur der absolute Schutz von Privatsphäre und nutzerbezogenen Daten, sondern auch ein werbefreies und ausschließlich über Spendengelder gefördertes soziales Netzwerk, ähnlich wie Wikipedia. Damit gebietet Wales den Werbefinanzierungen Einhalt, deren Sponsoren häufig vorgeben, was die Nutzer*innen auf ihren Profilen sehen.

Schon vor WT.Social gab es mit Ello oder Diaspora den Versuch einer werbefreien sozialen Plattform. Sie konnten sich jedoch gegen die bekannten Social-Media-Dienste nicht durchsetzen und blieben als Nischenwerkzeuge im Verborgenen.2

Funktionsweise

Alle Mitteilungen sind veränderbar

Es gibt eine Eigenschaft, die WT.Social von anderen sozialen Plattformen unterscheidet: die Nutzer*innen sind in der Lage die Beiträge ihrer Mitmenschen zu bearbeiten!
Mit dieser Funktion wird die Handschrift der Muttergesellschaft deutlich. Auch auf Wikipedia kann jeder Artikel von verschiedenen Autor*innen editiert, ergänzt und korrigiert werden.

Um es an einem Beispiel zu verdeutlichen: im Oktober 2020 wurde auf WT.Social ein Link zu einem YouTube-Video geteilt, dessen Inhalt sich eindeutig im Spektrum der Verschwörungstheorien verorten ließ. Weil der Beitrag von jedem angemeldeten Nutzer bearbeitet werden kann, wurde die Meldung einem „Faktencheck“ unterzogen. Nachvollziehbar wird diese Überprüfungsmaßnahme erst mit einem Klick auf den Hinweis Full History rechts vom Beitrag. Hiermit werden frühere Versionen der Mitteilung dokumentiert und aufgezeigt, an welcher Stelle die Nutzer*innen etwas verändert haben.3

Subwikis für Interessen

Wer sich für ein bestimmtes Gebiet interessiert, kann sogenannte Subwikis abonnieren. Subwikis sind gemeinschaftliche Foren, die zum Diskutieren einzelner Themen einladen. Sie reichen von „Fighting misinformation“ (= Falschinformationen bekämpfen) über „Science“ (= Naturwissenschaften) bis hin zu „News about the internet“.4

© Novatrend

Besonderheiten

Auf Twitter und Facebook sind Algorithmen dafür verantwortlich, dass Beiträge im Feed gepusht werden. WT.Social zeigt dagegen – unabhängig von Likes oder Kommentaren – stets die neuesten Mitteilungen als Erste an. Die Einordnung in eine algorithmische Blase soll nicht erfolgen. Gestützt werde dies u.a. durch eine Spenden- statt Werbefinanzierung. Sponsoren üben keinen Einfluss aus und mögliche Falschnachrichten können von der Seite ferngehalten werden.5

Keine Äußerung ist jemals fertig

Für dieses ehrgeizige Ziel trägt hauptsächlich die Community Verantwortung. Hierzu wählte Wales einen radikalen Ansatz. Er transportierte die auf Wikipedia erfolgreiche Methode des Bearbeitens auf die Plattform: jeder Beitrag kann von jedem/jeder Nutzer*in editiert werden. Eigene und fremde Wörter verwachsen miteinander.

Mit der Herangehensweise widerspricht WT.Social dem ursprünglichen Gebot sozialer Medien, dass niemand jemandem reinreden dürfe. Stattdessen sollen in dem Experiment alle Mitglieder*innen dazu angeregt werden, sich vorbildlich zu verhalten und hetzerische Inhalte zu bearbeiten oder gar zu entfernen.

Mögliche Probleme

Zensur?

Die Bearbeitungsfreiheit kann sich als zweischneidiges Schwert erweisen. Während auf anderen sozialen Plattformen jede*r Nutzer*in seine/ihre Gedanken und Vorstellungen ungefiltert präsentieren kann, herrscht auf WT.Social eine „Zensur“ von unten nach oben. Meinungsfreiheit wird hier anders verstanden. Es könnte die Möglichkeit bestehen, dass eine Mitteilung verändert wird, bloß weil es nicht der persönlichen Auffassung eines Nutzers entspricht.

Sortieren?

Nachteilig sind auch die kaum vorhandenen Sortierungsmöglichkeiten. Mittlerweile zählt die Wikipedia-Tochter eine knappe halbe Million Mitglieder*innen. Täglich werden neue Beiträge veröffentlicht, welche sich kaum filtern lassen. Der Überblick geht somit schnell verloren.

Vernetzen?

Ebenfalls ausbaufähig ist die Vernetzungsfunktion. Zwar bietet WT.Social die Option sich mit Familie und Freunden in Verbindung zu setzen, konzentriert sich aber im Allgemeinen auf die News-Features. Für gewöhnlich benutzen wir jedoch soziale Medien gerade wegen der Communities oder um uns zu informieren, was unser Umfeld interessiert und bewegt.

Layout?

Problematisch könnte weiterhin der erste Eindruck sein, den die Plattform vor allem neuen Nutzer*innen verschafft. Mit einer überzeugenden User Experience kann WT.Social nicht punkten. Anders als ihr Vorgänger WikiTribune benutzt das soziale Netzwerk kein WordPress-System, sondern basiert auf einem selbstentwickelten Fundament. Die Optik ist eher gewöhnungsbedürftig und die Benutzeroberfläche schlicht gehalten. Verstärkt wird die Kargheit durch eine hohe Textlastigkeit sowie einen geringen Bildanteil.6

Es kann nur besser werden!

Trotz aller Kritikpunkte wurde das Projekt bewusst als Rohbau herausgebracht. Ganz nach dem Motto von Entwicklern freier Software beabsichtigte Wales eine frühzeitige Veröffentlichung. Von Beginn an würde WT.Social in der Realität getestet werden, um etwaige Anpassungen schnell vornehmen zu können. Da sich das soziale Netzwerk gemeinsam mit seinen Mitglieder*innen entwickeln soll, wären einige Baustellen demnach unvermeidlich.

Ausblick

Mit WT.Social möchte Jimmy Wales in der Social-Media-Landschaft Fuß fassen und diese nachhaltig verändern. Anders als die herkömmlichen sozialen Dienste liegt der Fokus auf dem nachrichtlichen Content. Die Nutzer*innen sollen angeregt werden qualitativen Journalismus zu betreiben und Falschmeldungen zu bearbeiten. Damit die Plattform sich jedoch als Konkurrenz zu Facebook & Co. behaupten kann, müssen zunächst ein paar Voraussetzungen geschaffen werden.

Um sich vom Schatten der Muttergesellschaft zu lösen, müsste WT.Social an ihrem Service und ihrer Benutzeroberfläche arbeiten. Derzeit erinnert das Netzwerk weniger an eine klassische soziale als vielmehr an eine kollaborative Plattform, präsentiert in „a social media way“ – nur dass es sich eben nicht so anfühlt. Eine wichtige Rolle sollten daher auch der Inhalt und die Diskussionen in den Foren spielen.7

Nach knapp anderthalb Jahren kann jedoch noch eine Menge passieren und wohin der Weg letztlich führt, lässt der Gründer offen: „This is a crazy and radical experiment of mine, to which I am happy to say that I do not know all the answers.“

Copyright checkpoll.de Datenschutz bei teilnahme.

Verweise

[1] Statista (2021): Number of monthly active Facebook users worldwide as of 3rd quarter 2021. Online unter: https://www.statista.com/statistics/264810/number-of-monthly-active-facebook-users-worldwide/ [Abruf am 16.11.2021]
[2] Holzki, Larissa (2019): Wikipedia-Mitgründer Jimmy Wales startet Facebook-Konkurrenz ohne Werbung. Online unter: https://app.handelsblatt.com/technik/it-internet/soziale-netzwerke-wikipedia-mitgruender-jimmy-wales-startet-facebook-konkurrenz-ohne-werbung/25252992.html [Abruf am: 23.11.2021]
[3] Bovermann, Philipp (2021): Achtung, an diesem Text wird gebaut!. Online unter: https://www.sueddeutsche.de/digital/jimmy-wales-social-media-facebook-alternative-twitter-1.5173137 [Abruf am: 20.11.2021]
[4] Moreau, Elise (2020): WT Social: What It Is and How to Use It. Online unter: https://www.lifewire.com/wt-social-what-it-is-and-how-to-use-it-4783366 [Abruf am: 20.11.2021]
[5] Affan, Ahmad (2020): WT Social Media by Wikipedia, Wikitribune Social Review: Features and Future?. Online unter: https://www.linkedin.com/pulse/wt-social-media-wikipedia-wikitribune-review-features-ahmad-affan [Abruf am: 02.12.2021]
[6] Polywka, Marlene (2019): „WT:Social“ – was steckt hinter der Facebook-Alternative?. Online unter: https://www.techbook.de/apps/social-media/wtsocial-facebook-alternative [Abruf am: 20.11.2021]
[7] Bacon, Jono (2019): WT.Social is Interesting, But Can It Work? Well, Maybe. Online unter: https://www.forbes.com/sites/jonobacon/2019/11/18/wtsocial-is-interesting-but-can-it-work-well-maybe/ [Abruf am: 30.11.2021]

Quelle – Beitragsbild: https://pixabay.com/de/illustrations/wikipedia-b%c3%bccher-enzyklop%c3%a4die-1802614/
Quelle – Subwiki Bild: https://blog.novatrend.ch/2019/12/02/wp-social-waechst/

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.

Scrollytelling: Geschichte eines Unternehmens

Beitragsbild Scrollytelling - Geschichte eines Unternehmens

Autorinnen: Maria Sael  & Jeanice Noraman 


Inhalt

Einleitung

Jedes Unternehmen hat eine Geschichte, diese wird häufig auf der Unternehmenswebsite dargestellt. Doch wie kann man sich als Unternehmen von anderen abheben und die (potenziellen) Kunden und User ansprechen?

Eine Möglichkeit, um das zu erreichen ist das sogenannte “Scrollytelling”, bei dem Storytelling auf eine interaktive und kreative Ebene gehoben wird. Dem User wird mithilfe von unterschiedlichen Scroll-Techniken eine Geschichte auf eine neue und interessante Art übermittelt.

Einige Beispiele von Scrollytelling auf hohem Niveau:

Als Hilfestellung und Inspiration hat uns das Youtube-Video “Apple Airpod Pro Javascript Animation Tutorial” von Dev Ed gedient.

Konzept

Um die „Über uns“-Seite des Unternehmens „Cleantaxx“ spannender und interaktiver zu gestalten, kann der User durch die Implementierung von Scrollytelling die Seite selbst steuern. Durch Scrollen wird die Geschichte des Unternehmens erzählt, so dass der User auf die Reise in die Geschichte von Cleantaxx mitgenommen wird und sich ein Bild über das Unternehmen machen kann.

Das Ziel ist es, die Informationen auf interaktive Art zu vermitteln und den User zu ermutigen weiter zu scrollen und ihn zu animieren bis zum Ende dranzubleiben. Dabei sollen die Informationen weiterhin auf eine seriöse Art übermittelt werden.

Aufbau

Der User wird mit einem Intro-Video begrüßt, das er selbst durch Scrollen steuert. Beim Runterscrollen wird das Video abgespielt und durch Hochscrollen kann es wieder zurückgespult werden. Danach erhält der User mit einem kurzen Text die wesentlichen Informationen über das Unternehmen.

Scrollytelling Bild 1
Header und Intro

Anschließend beginnt die Unternehmensgeschichte, wobei man auch diese selbst steuert. Beginnend mit dem Jahr 2009 kann der User durch Scrollen die wichtigsten Ereignisse des Unternehmens erscheinen lassen. Auf der Reise durch die Unternehmensgeschichte wird der User von einem grünen Punkt auf der Timeline begleitet. Die blauen Punkte zeigen die wichtigsten Ereignisse im Verlauf der Jahre an, die erscheinen wenn man runterscrollt.

Scrollytelling Bild 2
Item auf der Timeline

Code

HTML

Da wir uns auf die Animation konzentrieren wollen und uns nicht mit dem Aufbau einer gesamten Website beschäftigen wollen ist der Header nur beispielhaft als Screenshot im Code eingefügt.

Der Content befindet sich innerhalb des Bodys in div-containern, angefangen mit dem Intro-Video und einem Text in der Mitte des Videos (welcher mithilfe von JavaScript durch scrollen verschwindet).

<!--Beispielhafter Header-->
  <header>
    <div class="container">
      <img src="Medien/header.png">
    </div>
  </header>

  <body>
    <!--Intro mit Video-->
    <div class="intro">
      <h1>Wer wir sind</h1>
      <video src="Medien/cleantaxxIntro.mp4" type="video/mp4"></video>
    </div>

Nach dem Video folgt ein Block mit einer kurzen Einführung zum Unternehmen und anschließend ist die Timeline platziert. Diese enthält in div-containern mit der Klasse “timeline-item” die Boxen links und rechts vom Zeitstrahl. Auf der Timeline haben wir für jedes timeline-item ein Timeline-Icon erstellt, welches ein wichtiges Ereignis darstellt. Im div “timelineContent” ist für jedes Ereignis die Jahreszahl, ein Bild und ein Text angegeben. Mithilfe der id’s “content1” etc. identifizieren wir im JS-Teil die Boxen, um sie pinnen zu können. Die fadeIn Klassen sind ebenfalls für den JS-Teil wichtig, damit wir die verschiedenen Elemente nacheinander erscheinen lassen können.

<!--Info übers Unternehmen-->
    <div class="container">
      <div id="info">
        <h1>Unternehmen</h1>
        <h2> Cleantaxx gehört in der Branche zu den Unternehmen mit der meisten Erfahrung im Bereich der Rußfilterreinigung. Jeden Tag liefern wir eine umweltschonende Alternative zum Neukauf. Trotz der anhaltenden positiven Entwicklung mit dem stetigen Wachstum sind wir ein flexibles, wegweisendes Unternehmen mit flachen Hierarchien geblieben. </h2>
      </div>

      <div id="timeline">
        <!--Box für Jahr 2009-->
        <div class="timelineItem">
          <div class="timelineIcon2"></div>
          <div class="timelineIcon"></div>
          <div class="timelineContent" id="content1">
            <h2>2009</h2>
            <img class="fadeIn" src="https://i.ibb.co/5xRmdw2/benjamin-kleemann-cleantaxx-geschaeftsfuehrer.jpg">
            <p class="fadeIn">Benjamin Kleemann gründete im Jahr 2009 nach einem Jahr Marktforschung das Unternehmen Cleantaxx. Geschaffen wurde damit ein unabhängiger Dienstleister für die Reinigung von Dieselpartikelfiltern (DPF). Das Unternehmen bietet seitdem maßgeschneiderte Lösungen für Hersteller, Händler, Werkstätten und Anwender. Gereinigt werden alle Dieselpartikelfilter, herstellerübergreifend vom PKW bis zum Schiff – für alles was mit einem Dieselmotor angetrieben wird. Die Säulen der Cleantaxx-Reinigung bilden eine taggleiche Logistik, eine umfangreiche Prüfung und Dokumentation, sowie eine zertifizierte und schonende Reinigung innerhalb 24 Stunden.
            </p>
          </div>
        </div>

Die beschriebene Vorgehensweise haben wir für jedes Ereignis angewendet. Im Body haben wir außerdem die verschiedenen JS-libraries bzw. Plugins angegeben, die wir verwenden wollen. Abschließend haben wir einen beispielhaften Footer eingefügt.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script> <!-- später rausnehmen-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/BezierPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/MotionPathPlugin.min.js"></script>

    <script src="app.js"></script>
  </body>
  <!--Beispielhafter Footer-->
  <footer>
    <img src="Medien/footer.png">
  </footer>

CSS

Um das Layout unserer Webseite zu formatieren, haben wir ein externes CSS-Stylesheet verwendet. Mithilfe des CSS-Stylesheet können wir Bilder, Box, Container, Video, Header, Textkörper, Links und Logogröße, Farbe und Stil, Aussehen und Positionierung der Timeline sowie den Abstand zwischen Elementen steuern und angeben, wie Elemente positioniert und angeordnet werden sollen. Box-sizing, html Seite, Body und Footer

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
}

body {
  background: #f9f9f9;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, tahoma, verdana;
  line-height: 20px;
  font-size: 14px;
  color: black;
}

footer {
  position:relative;
  width: 100% ;
  height:auto;
  overflow: hidden;
}

Intro Formatierung

/**********Intro*******/
.intro {
  height: 100vh;
}

.intro video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index:1;
}

.intro h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: #2c5697;
}

Images, Hyperlinks, Container

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/*****Überschriften*****/
h1, h2, h3, h4 {
  font-family: "Dosis", arial, tahoma, verdana;
  font-weight: 500;
}

Infobox

/*****Info Box*****/
#info {
  display: block;
  margin-left: 180px;
  margin-right: 180px;
  margin-bottom: 50px;
}

#info h1 {
  text-align: center;
  padding: 10px 0;
  color: #2c5697;
}

#info h2 {
  font-weight: lighter;
  text-align:center;
}

Die gesamte Timeline-Struktur wurde ebenfalls mit CSS erstellt, indem man die Timeline-Breite, Farbe, Länge, Position, Paddings und Margins definiert und die Boxen an den Seiten der Linie anordnet und zwischen den linken und rechten Containern unterscheidet, indem man sie auf eine andere Klasse definiert.

/*****Timeline*****/
#timeline {
  width: 100%;
  margin: 30px auto;
  position: relative;
  padding: 0 10px;
  content: "";
  clear: both;
  display: table;
}

#timeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #2c5697;
  left: 50%;
  top: 0;
  position: absolute;
}

#timeline .timelineItem {
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}

/**Punkte auf Timeline**/
#timeline .timelineItem .timelineIcon {
  background: #2c5697;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  border-radius: 50%;
}

#timeline .timelineItem .timelineIcon svg {
  position: relative;
  top: 14px;
  left: 14px;
}

/**Grüner Punkt auf Timeline**/
#timeline .timelineItem .timelineIcon2 {
  background: #3ea838;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  border-radius: 50%;
}

#timeline .timelineItem .timelineIcon2 svg {
  position: relative;
  top: 14px;
  left: 14px;
}

/*******Content auf Timeline*******/
#timeline .timelineItem .timelineContent {
  width: 45%;
  background: #fff;
  padding: 20px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  transform: translateX(50%);
}

#timeline .timelineItem .timelineContent h2 {
  padding: 15px;
  background: #2c5697;
  color: #fff;
  margin: -20px -20px 0 -20px;
  font-weight: 300;
  border-radius: 3px 3px 0 0;
}

#timeline .timelineItem .timelineContent.right {
  float: right;
  margin-left: 55%;
  transform: translateX(-50%);
}

Wir haben auch in den CSS-Dateiklassen definiert, die zu einigen Elementen hinzugefügt werden müssen, um Animationen von JavaScript aus anzuwenden. Zum Beispiel die Klasse “appear”, die hinzugefügt wird, damit die Elemente mit der Klasse eingeblendet werden, indem die Deckkraft des Elements mit Leichtigkeit (Opacity) von 0 auf 1 geändert wird.

Die “appear”-Klasse wird auch Elementen mit der Klasse timelineContent hinzugefügt, um sie mit einem Einblendeffektnach rechts und links und umgekehrt durch Ändern der Deckkraft und der Transformationsachse gleiten zu lassen.

/*****Fade in*****/
#timeline .timelineItem .timelineContent,
#timeline .timelineItem .timelineContent.right {
  transition: opacity 250ms ease-in, -webkit-transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in,
    opacity: 0;
}

#timeline .timelineItem .timelineContent.appear,
#timeline .timelineItem .timelineContent.right.appear {
  transform: translateX(0);
  opacity: 1;
}

.fadeIn {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fadeIn.appear {
  opacity: 1;
}

JavaScript

Content einsliden

Die gewünschte Funktion in diesem Code besteht darin, das “Timeline content -div” aus der Richtung des Punktes in der Timeline an seinen Platz gleiten zu lassen und den darin enthaltenen Inhalt (das Bild und den Text) erscheinen zu lassen, sobald der Inhalt nach unten gescrollt wurden.

Um diese Funktion in JavaScript zu erreichen, haben wir das IntersectionObserver() “Interface” (eine Art von Objekt) verwendet. Der IntersectionObserver()-Konstruktor erstellt ein neues IntersectionObserver-Objekt und gibt es zurück. Es benötigt zwei Parameter: callback und options (optional).

Callback-Parameter: Eine Funktion, die aufgerufen wird, wenn der Prozentsatz des Zielelements sichtbar ist, einen Schwellenwert” threshold” überschreitet. Der Callback erhielt als Eingabe zwei Parameter: entries und Observer.

  • entries: Ein Array von IntersectionObserverEntry-Objekten, von denen jedes einen überschrittenen ” threshold” darstellt und entweder sichtbar wird als der durch diesen ” threshold” angegebene Prozentsatz.
  • Observer: Der IntersectionObserver, für den der Rückruf aufgerufen wird.

Options-Parameter: Ein optionales Objekt, das den observer anpasst.

  • rootMargin: Um sicherzustellen, dass es syntaktisch korrekt ist
  • thresholds: Um sicherzustellen, dass sie alle im Bereich von 0,0 bis einschließlich 1,0 liegen.

In der Callback-Funktion haben wir eine foreach-Schleife definiert, die jeden Eintrag “Entry” durchläuft und prüft, ob der IntersectionObserver schneidet oder nicht. Und um Fehler zu vermeiden, geben wir die Funktion das Befehl “return”, falls sie sich nicht überschneidet. Aber wenn es sich überschneidet, soll die Funktion, die classList (appear) hinzuzufügen, die wir in CSS erstellt haben, die die Elemente erscheinen oder von links und rechts gleiten lässt. Danach haben wir die Funktion erstellt haben nachgerufen mit der (unobserved) Methode, damit die Funktion stoppt, sobald sie ihr definiertes Ziel erreicht.

//-----------fadeIn und von Seiten einsliden---------------
const faders = document.querySelectorAll(".fadeIn");
const sliders = document.querySelectorAll(".timelineContent");

const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -50px 0px"
};

//-------------------observer für fadeIn--------------------
const appearOnScroll = new IntersectionObserver(function(
    entries,
    appearOnScroll
  ) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add("appear");
        appearOnScroll.unobserve(entry.target);
      }
    });
  },
  appearOptions);

  faders.forEach(fader => {
    appearOnScroll.observe(fader);
  });

Und weil die definierten Optionen zu schnell waren, um bemerkt zu werden, haben wir den Schwellenwert auf eins und den rootMargin auf: 0px 0px -50px 0px festgelegt Damit die Animation funktioniert, sobald wir zum Inhalt herunterscrollen.

Schließlich, um die Aktion zum Leben zu erwecken, wir rufen es mit einer ForEach-Schleife auf, die in die definierten Elemente (sliders und Faders) geht. und wendet die definierte Funktion (appearOnScroll und slideOnScroll) mit der Methode Observe an.

• sliders: wählt alle Elemente aus, die die Klasse “.timelineContent” haben • faders: wählt alle Elemente aus, die die Klasse “.fadeIn” haben

//------------------Einsliden Options----------------------
const sliderOptions= {
  threshold: 0,
  rootMargin: "0px 0px -50px 0px"
};
//------------Observer für von rechts und links------------
const slideOnScroll = new IntersectionObserver(function(
    entries,
    slideOnScroll
  ) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add("appear");
        slideOnScroll.unobserve(entry.target);
      }
    });
  },
  sliderOptions);

sliders.forEach(slider => {
  slideOnScroll.observe(slider);
});

Video-Animation

Um diese Animation umsetzen zu können werden verschiedene Libraries benötigt. Eine davon ist ScrollMagic, welche es ermöglicht auf Scroll zu animieren. Zusätzlich verwenden wir GSAP (genauer gesagt TweenMax), um den Text animieren zu können. Eine sinnvolle Hilfe die wir benutzt haben ist die das debug Plugin von ScrollMagic namens “addIndicators”, welches rechts am Bildschirm Indikatoren für die Trigger einfügt (wie der Name schon sagt).

Um ScrollMagic zu implementieren wird ein Controller im Code benötigt. Anschließend kann man anfangen die verschiedenen Szenen zu erstellen und dem Controller hinzuzufügen, wobei jede Szene ein Teil vom Code ist, den man animieren möchte.

Scrollytelling Bild 3
Indikatoren rechts

Die erste Szene beschäftigt sich mit der Animation des Videos. In der Szene gibt es verschiedene Optionen, wie die Dauer (wie viele Pixel soll gescrollt werden), das Trigger-Element (wann soll die Animation starten, wobei 0=oben, 0.5=Mitte, 1=unten) und die Trigger-Hook (wo auf dem Bildschirm soll das Element getriggert werden. Sobald der “Haken” auf das Element trifft, wird es animiert.

Anschließend muss die Szene durch “.addTo(controller);” dem Controller hinzugefügt werden. Um einen Pin zu setzen, damit das Video für die Dauer der Animation haften bleibt verwenden wir “.setPin(intro);”. Hier kann man ebenfalls die Indikatoren für Hook, Start und Ende mithilfe von “.addIndicators();” anzeigen lassen.

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");

//----------------------ScrollMagic-------------------------
const controller = new ScrollMagic.Controller();

//------------------------Szenen----------------------------
//------------------------Video-----------------------------
let scene = new ScrollMagic.Scene({
    duration: 5000,
    triggerElement: intro,
    triggerHook: 0
  })
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

Nach allen Szenen animieren wir nun das Video, wozu wir einige Variablen benötigen. Da wir nicht wollen, dass das Video beim scrolleln abgehackt aussieht, programmieren wir einen ease-Effekt. Mithilfe von einem Delay, wird das Video nachdem man aufhört zu scrollen noch kurz weiter abgespielt.

  • accelamount = ease-Effekt am Ende (das was von den Frames noch übrig ist)
  • scrollpos = Wo gescrollt wird
  • delay = Soll aufholen wohin wir scrollen

(Um Sekunden zu erhalten, teilen wir die Scroll-Position durch 1000.) Als letztes setzen wir ein Intervall, in dem wir dem delay das hinzufügen was gescrollt wird und es um 0.1 beschleunigen. Um den ease-Effekt nun zu erhalten geben wir an, dass video.currentTime = delay sein soll.

//--------------------Video Animation-----------------------
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos - delay) * accelamount;
  console.log(scrollpos, delay);

  video.currentTime = delay;
}, 43.5);

Um nun den Text zu animieren, sodass dieser nicht die ganze Zeit in der Mitte des Video bleibt, erstellen wir eine neue Szene. In der neuen Szene geben wir erneut an, wie weit gescrollt werden soll, was das Trigger-Element ist und wo die Trigger-Hook sein soll. Um es zu animieren brauchen wir Tweenmax, in dem wir angeben, dass der Text innerhalb von 3 Sekunden von einer opacity (Deckkraft) von 1 zu einer opacity von 0 gehen soll. In der soeben erstellten Szene setzen wir nun noch einen Tween, damit der Text nicht einach nach 3 Sekunden verschwindet, sondern durch scrollen verschwindet.

//---------------------Text Animation-----------------------
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

let scene2 = new ScrollMagic.Scene({
    duration: 3000,
    triggerElement: intro,
    triggerHook: 0
  })
  .setTween(textAnim)
  .addTo(controller);

Content anpinnen

Damit wir den Content, also die Boxen mit dem Inhalt, anpinnen können, brauchen wir jeweils eine ScrollMagic-Szene pro Box. Wie auch schon bei der Szene des Videos, geben wir die Dauer, das Trigger-Element und die Position der Trigger-Hook an. In diesem Fall wollen wir, dass jede Box für 300 Pixel angepinnt wird (es also trotz scrollen hängen bleibt). In jeder Szene ordnen wir dem Trigger-Element die entsprechende ID zu, sodass die Boxen nacheinander angepinnt werden.

//---------------------Pin Content--------------------------
var scene4 = new ScrollMagic.Scene({
    duration: 400,
    triggerElement: "#content1",
    triggerHook: 0.1
  })
  .setPin("#content1")
  .addIndicators({name: "1 (duration: 400)"})
  .addTo(controller);

var scene5 = new ScrollMagic.Scene({
    duration: 400,
    triggerElement: "#content2",
    triggerHook: 0.1
  })
  .setPin("#content2")
  .addIndicators({name: "2 (duration: 400)"})
  .addTo(controller);

//-----------------Und so weiter...--------------------

Die gleiche Methode verwenden wir auch, um den grünen Punkt in der Mitte anzupinnen und mitlaufen zu lassen.

//----------------------Pin Punkt---------------------------
var scene3 = new ScrollMagic.Scene({
    duration: 6200,
    triggerElement: ".timelineContent",
    triggerHook: 0.1
  })
  .setPin(".timelineIcon2")
  .addIndicators({name: "Punkt"})
  .addTo(controller);

Anmerkung

Das in unserer Animation verwendete Unternehmen Cleantaxx weiß von unserem Projekt, wir haben es jedoch nicht in Zusammenarbeit mit dem Unternehmen erstellt, sondern eigenständig und rein für unsere MM-SYS Abgabe. Wir sind nicht Urheber des Contents, welches wir in der Animation verwendet haben, haben jedoch die Erlaubnis bekommen den Content ihrer Seite zu verwenden. Nach Absprache mit uns dürfte das Unternehmen Cleantaxx die Animation zu eigenen Zwecken verwenden, falls gewünscht.

Quellen


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: Mini Game “Magic Garten” – Blumen pflanzen als interaktive Animation

eitragsbild Tutorial: Mini Game “Magic Garten” - Blumen pflanzen als interaktive Animation

Autorinnen: Maria Olberg  und Elisabeth Rutt 


In diesem Tutorial zeigen wir, wie man eine interaktive Animation entwickeln kann. Wir stellen dazu unsere Animation vor und gehen auf das Konzept, Techniken und Besonderheiten der Animation sowie Ausschnitte des Quellcodes ein.

Link zur Animation

ZIP-Ordner zum Downloaden

Inhaltsverzeichnis

Das Konzept unserer Animation

Bei unserer Animation handelt es sich um das kleine, interaktive Spiel “Magic Garten”, durch das sich der User mit Hilfe von Buttons weiter klicken kann. Das Ziel des Spiels ist es, Blumen in einem Garten zu pflanzen und diese wachsen zu lassen. Dabei kann man zwischen drei verschiedenen Arten von Blumen wählen. Außerdem können die Blumen u.a . auch mit Hilfe einer Gießkanne gegossen werden, damit sie weiter wachsen.

Die Idee zu dieser Animation kam dadurch, dass wir, unabhängig von der Person, die es spielt, für jeden User einen interessanten Zeitvertreib für Zwischendurch entwickeln wollten. Vor allem, soll sie aber Kindern Spaß machen. Die Darstellung der Elemente ist im Comic-Stil gehalten und die Hintergrundmusik verstärkt den Spiele-Charakter.

Das Ziel der Animation ist es, den User mit Hilfe von interaktiven Elementen durch die einzelnen Schritte des Spiels zu führen, damit er im Magic Garten die Blumen pflanzen kann. Dazu gibt es einen helfenden Charakter: eine Biene “Maja”, die den User mit hilfreichen Informationen zu den jeweiligen Schritten des Spiels versorgt. Über die interaktiven Buttons gelangt er entweder zum nächsten Schritt des Spiels oder erhält Anweisungen, was im jeweiligen Schritt zu tun ist. Die Anweisungen erscheinen mit Hilfe von visuellen Effekten in einer Sprechblase.

Insgesamt erfüllt die Animation daher zwei Funktionen: Die erste Funktion bezieht sich auf den Inhalt der Animation und ist das Spiel an sich, bei dem der User die Blumen einpflanzen und wachsen lassen soll sowie das Erzählen der Story, indem sich der User durch die einzelnen Szenen klickt. Die zweite Funktion ist die Optik, die den User zum Spielen animieren soll. Dafür wurden Elemente und visuelle Effekte eingebaut, die das Spiel attraktiver gestalten, wie z. B. die Biene, die den User durch das Spiel begleitet und die lachende Sonne, die über den Garten scheint.

Die Animation besteht aus 4 Szenen, die den User vom Intro bis zu den fertig gewachsenen Blumen leiten. Außerdem sind im Spiel auch Entscheidungen für den User eingebaut, die den weiteren Verlauf der Animation bestimmen.

Aufbau der Animation

Die Animation besteht insgesamt aus 4 aufeinander folgenden Szenen:

Erste Szene: Start und Intro

Der erste Teil der Animation ist der Startbildschirm mit dem Titelbild des Spiels. Hier befindet sich der “Play”-Button, über den der User zur ersten Szene gelangt. Zu Beginn erscheint die Biene “Maja”, die sich vorstellt dem User eine kurze Einführung in das Spiel gibt. Anschließend fordert sie ihn dazu auf, mit dem Spiel zu beginnen und Blumen zu pflanzen. Dazu erscheint der Button “Blumen auswählen”, über den der User in die zweite Szene gelangt, um die Art der Blume, die er pflanzen möchte, auszuwählen.

MagicGarten Bild
Weiterführender Button zum Auswählen der Blumen

Zweite Szene: Auswählen und Pflanzen von Blumen

Sobald der User auf “Blumen auswählen” geklickt hat, erscheinen drei Beutel mit verschiedenen Blumensamen, die Lieblingsblumen von Maja. Jeder Beutel zeigt auch das Bild der jeweiligen Blume. Fährt der Spieler mit der Maus über die Bilder der Blumen, sagt Maja auch etwas zu der jeweiligen Blumenart über ihre Sprechblase. Unter jedem Beutel gibt es den Button “Auswählen” und mit einem weiteren Klick auf den ausgewählten Beutel beginnt das Einpflanzen. Der Beutel beginnt anschließend, die Samen automatisch im Garten zu pflanzen und es sprießen bereits kleine Pflanzen.

MagicGarten2
Der User hat die Wahl zwischen drei Blumensorten

Dritte Szene: Blumen gießen und wachsen lassen

Während des Spiels gibt Maja hilfreiche Tipps zum Spielverlauf. In dieser Szene freut sie sich über die eingepflanzten Blumen und macht auf die Gießkanne aufmerksam, mit der der User die Blumen gießen kann, damit sie wachsen. Der User kann sie Gießkanne anklicken, um sie hoch zu heben und mit der Maus anschließend darüber fahren, um mit dem Gießen zu beginnen. Als nächstes gibt Maja den Tipp, die Blumen nun in der Sonne weiter wachsen zu lassen. Dazu kann der User nun auf die Sonne klicken, die daraufhin beginnt, stärker zu scheinen und über das Blumenfeld zu wandern. Anschließend bietet Maja einen Magic Booster an, um die Blumen doppelt so stark wachsen zu lassen. Der User kann hier zwischen “Ja” und “Nein” auswählen. Je nach dem, welche Antwort der User wählt, ändern sich die Animation und die Reaktion von Maja.

MagicGarten3
Der User wählt beispielhaft Sonnenblumen aus
MagicGarten4
Der User kann die Blumen gießen und durch die Sonne wachsen lassen

Vierte Szene: Outro

In der vierten Szene spielt der User nicht mehr aktiv mit. Maja beginnt mit Hilfe einer Animation über die Blumenwiese zu fliegen. Zum Schluss bedankt sie sich für die Hilfe des Users und schenkt ihm als Dank ein Glas mit Honig. An dieser Stelle ist die Animation beendet und es erscheint der Button “Restart”, wodurch die Seite neu geladen wird und der User wieder zum Intro gelangt.

MagicGarten5
Schlussszene: Maja bedankt sich für die Hilfe und der User kann das Spiel neu starten

Der Quellcode

Verwendete Programmiersprachen für die Animation sind HTML5, CSS3, JavaScript und jQuery. HTML wird für die Gestaltung sowie den Grundaufbau der Seite und des Spiels genutzt. CSS sorgt für die richtige Positionierung, Style-Anpassungen und mit Hilfe von keyframes auch für die kleine Animationen und visuelle Effekte.

Mit Hilfe von JavaScript werden die Objekte je nach Auswahl der Story-Optionen angezeigt bzw. versteckt, der Text bei den Hover-Effekten geändert, die Auswahl der Blumensorte für den weiteren Verlauf des Spiels gespeichert und die Index-Datei so umgeschrieben, dass sie sich automatisch angepasst hat. Außerdem erscheinen die Objekte durch JavaScript nach bestimmten Zeitangaben für ein optimales Spielerlebnis, wie z. B. die automatische Änderungen des Textes und die Bewegung der Gießkanne nach einigen Sekunden. Die Seite besteht aus drei DIV-Containern: Der erste zeigt die Überschrift “Magic Garten”, der zweite das Spielfeld und der dritte zeigt einen Untertitel.

<body>
    <script src="animation.js"></script> <!--Einbindung der JavaScript Datei--> </div>
    <div class="header"> <!--Div-Container wird angezeigt nach dem Spielstart--></div>
    <div id="animation_feld" class="animation_null"> <!--Hauptbereich: interaktives Spiel--></div>
    <div class="biene"> <!--Intro des Spieles und Platziereung der Beiene während des ganzen Spiel--></div>
<div class="footer"> <!--Unterbereich mit Autorennamen und versteckte Audio--> </div> </body>
Beispiel für DIV-Container im Quellcode

Gestaltung von besonderen Elementen

Innerhalb der Animation gibt es verschiedene interaktive Elemente, die sich mit Hilfe von Animationen durch die Szenen bewegen und gewisse Aktionen auslösen.

Die verwendeten Bilder sind im PNG-Format und stammen von Pixabay. Die Überschrift und der Untertitel sowie die fertig gewachsenen Blumen wurden selbst in Photoshop erstellt. Damit die Bilder optimal angezeigt werden, wurde der z-Index verwendet. Dieser unterscheidet sich bei den Bildern der jeweiligen Szenen und man sollte ihn so anpassen, dass Bilder möglichst gut dargestellt werden.

Bewegende Elemente und visuelle Effekte

Maja

Damit Maja dem User durch das Spiel helfen kann, wird sie durch von Keyframes zum Leben erweckt. Mit Hilfe des JavaScript Befehls .show() und .hide() wird sie passend zur jeweiligen Szene eingesetzt bzw. versteckt. Hierbei gibt es drei verschiedene Keyframe Animationen: Zuerst bewegt sich Maja vom Startbildschirm nach unten auf das folgende Bild, sobald der User das Spiel startet. Damit sie ihn mit nützlichen Informationen durch das Spiel führen kann, erhält sie Sprechblasen, die mit Hilfe der Anweisung

setTimeout(function() {$("#rede_1").css({"visibility": "visible"});}, 2000); 

angezeigt und mit bspw.

setTimeout(function() {$("#text_1").hide();$("#text_2").css({"visibility": "visible"});}, 500); 

nach 5 Sekunden automatisch geändert werden. Die Zeit, nach der sich die Animationen ändern, variiert hier während des Spiels und kann nach Belieben angepasst werden, damit man die Texte gut lesen kann.

    /*Biene startet das Gespräch mit dem User*/
    setTimeout(function() {
        $("#rede_1").css({"visibility": "visible"});
    }, 2000);
    setTimeout(function() {
        $("#text_1").css({"visibility": "visible"});
    }, 2500);
});	
$("#link_1").on("click", function () {
    setTimeout(function() {
        $("#text_1").hide();
        $("#text_2").css({"visibility": "visible"});
    }, 500);
    setTimeout(function() {
        $("#button_choose").css({"visibility": "visible"});
    }, 1500);
});
Einblenden und Verstecken der Sprechblase für Maja

Die zweite Keyframe Animation lässt Maja auf dem nächsten Bild nach oben wirbeln. Diese Animation wird mit Hilfe des Befehls

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

ausgelöst, sobald der User den Button “Blumen auswählen” anklickt. Hier werden die Texte in der Sprechblase wieder mit dem oben stehenden Befehl angezeigt und geändert (die konkreten Befehle ändern sich etwas je nach Text).

/*Übergang zur Szene #1.2
    Start des aktiven Spiels mit Anweisungen an den Spieler
    Elemente werden durch Änderungen des Styles angezeigt oder durch 
    jQuery Funktionen*/
$("#button_choose").on("click", function() {
    $("#button_choose").css({"visibility": "hidden"});
    $("#choose").hide();
    $("#rede_1").css({"visibility": "hidden"});
    $("#text_2").hide();
    $("#honey_biene").css({"visibility": "hidden"});
    $("#honey_biene_2").show();
    $("#honey_biene_2").css({"animation-play-state": "running"});
    setTimeout(function() {
        $("#rede_2").css({"visibility": "visible"});
    }, 1700);
    setTimeout(function() {
        $("#text_3").css({"visibility": "visible"});
    }, 2200);
    $(".sack").fadeIn(3000);
    setTimeout(function() {
        $(".blumen_choose").show();
    }, 3000);
Visuelle Effekte für Maja

Die dritte Keyframe Animation lässt Maja zum Ende des Spiels über die Blumenwiese fliegen. Mit Hilfe von translateX() bewegt sie sich hin und her und mit scaleX() dreht sie sich während der Animation um, um in die jeweils andere Richtung zu fliegen. Dabei wird das Bild gespiegelt. Ist der Magic Booster nicht ausgewählt, fliegt Maja standardmäßig durch die Eigenschaft animation-iteration-count: 1; einmal Hin und Her. Wenn der Magic Booster ausgewählt ist, dann fliegt sie zweimal Hin und Her. Dies wird mit Hilfe einer if-Anweisung angepasst.

/*Style Eigenschaften für die Biene im Outro.
Die keyframe-Animation für die fliegende Biene. In JS ist die Anpassung je nach
Antwort des Users*/

#biene_fly {
    position: absolute;
    z-index: 15;
    height: 15%;
    bottom: 60%;
    left: 22%;
    display: none;
    
    animation-name: bee_fly; 
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: running;
}

@keyframes bee_fly {
    0%  { transform: translateX(0px) scaleX(-1)}
    25%	{ transform: translateX(380%) scaleX(-1)}
    50%	{ transform: translateX(380%) scaleX(1)}
    100%  { transform: translateX(-10%) scaleX(-1)}
    
}
Style-Anpassungen für Maja im Outro
if ($(".plant_small").attr("src")==("media/Magic_Rose.png") || $(".plant_small").attr("src")==("media/Magic_Sunflower.png") || $(".plant_small").attr("src")==("media/Magic_Poppy.png")) {
    $("#biene_fly").css({"animation-iteration-count": "2"});
}
if-Anweisung bei der Auswahl des Magic Boosters

Säcke mit Blumensamen

Der Hover-Effekt bei den Blumensäcken wird mit der Anweisung $(“#rose_sack”).mousemove() erzeugt. So ändert sich der Text in der Sprechblase, wenn man mit der Maus über ein bestimmtes Element (in dem Fall ist es die Rose) fährt. Verlässt man mit der Maus diese Stelle wieder, wird der Text mit dem Befehl $(“#rose_sack”).mouseout() wieder automatisch geändert.

/*Information über Blumensorten erscheint, wenn die Maus auf dem Bild ist,
    und verschwindet, wenn die Maus weg ist*/
$("#rose_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_4").css({"visibility": "visible","display":"block"});	
});
$("#rose_sack").mouseout(function(evt) {
    $("#text_4").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
$("#sun_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_5").css({"visibility": "visible","display":"block"});	
});
$("#sun_sack").mouseout(function(evt) {
    $("#text_5").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
$("#mohn_sack").mousemove(function(evt) {
    $("#text_3").css({"display":"none"});
    $("#text_6").css({"visibility": "visible","display":"block"});	
});
$("#mohn_sack").mouseout(function(evt) {
    $("#text_6").css({"display":"none"});
    $("#text_3").css({"display":"block"});
});
Auswahl der Blumensorte mit Hover-Effekt

Nach der Auswahl der Blumesorte verschwinden durch die Anweisungen $(“.sack”).fadeOut(1200); und $(“.blumen_choose”).hide();  die Bilder der Säcke, die nicht ausgewählt wurden und der ausgewählte Sack erscheint in der Mitte.

$(".sack").fadeOut(1200);
$(".blumen_choose").hide();

/*Je nach Auswahl wird der Sack mit der richtigen Blume angezeigt. Animation an sich
    ist gleich und startet beim Klick auf jeweiliges Bild*/		
switch (blume) {
    case "Rose":
    setTimeout(function () {
        $(".rose").show();
        $("#sack_blume_rose").on("click", function () {
            $(".sack_blume").css({"animation-play-state": "running"});
            $(".oat_raw").css({"animation-play-state": "running"});
            setTimeout(function () {
                $(".rose").hide();
                $("#text_7").css({"display":"none"});
                $("#text_8").css({"visibility": "visible","display":"block"});
            }, 7200);
        })
    }, 1500);
    break;
Visuelle Effekte für die Blumensäcke

Beim Klick auf den Sack wird die Keyframe Animation aktiviert, wodurch er sich bewegt, um die Blumensamen auf der Wiese zu verteilen. Die Anweisung besteht aus 7 Schritten, in denen translateX(), translateY() und rotate() verwendet werden,sodass er sich zum Verteilen über die Wiese bewegt und dabei auch die Ausrichtung nach links und rechts ändert. Bei der Anweisung für die Blumensamen, die aus dem Sack in die Erde fallen, benutzt man zusätzlich scale(). Nachdem die Animation fertig abgespielt ist und damit die Samen verteilt sind, verschwindet der Sack automatisch.

/*Positionierung und Animation für alle Säcke in der Szene sind gleich*/

.sack_blume {
    position:absolute;
    top: 50%;
    left: 40%;
    height: 30%;
    z-index: 11;
    cursor:pointer;
    
    animation-name: sack_hoch; 
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: paused;
}

/*Animation mit mehreren Bewegungen*/
@keyframes sack_hoch {
    from  { transform: translateX(0px) translateY(0px)}
    18%	{ transform: translateX(-100px) translateY(-250px) rotate(-90deg)}
    36%	{ transform: translateX(-325px) translateY(-130px) rotate(-120deg)}
    52%	{ transform: translateX(100px) translateY(-250px) rotate(-120deg)}
    70%	{ transform: translateX(100px) translateY(-130px) rotate(-120deg)}
    88% { transform: translateX(350px) translateY(-250px) rotate(120deg)}
    to  { transform: translateX(400px) translateY(-130px) rotate(120deg)}
}
Anpassungen für die Animation der Blumensäcke
/*Positionierung und Animation für Blumensamen in der Szene sind gleich
Die Animation wiederholt die Bewegung des Sackes, mit der Ausnahme beim vorletzten
Schritt:
    Blumensamen verschwinden und erscheinen am Ende, wänhrend Sack sich umdreht*/
.oat_raw {
    position:absolute;
    top: 51%;
    left: 46%;
    height: 10%;
    z-index: 12;
    
    animation-name: oat_hoch; 
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: paused;
}

/*Animation mit mehreren Bewegungen*/

@keyframes oat_hoch {
    from  { transform: translateX(0px) translateY(0px)}
    18%	{ transform: translateX(-150px) translateY(-180px) rotate(-90deg)}
    36%	{ transform: translateX(-375px) translateY(-40px) rotate(-120deg) scale(0.85)}
    52%	{ transform: translateX(50px) translateY(-140px) rotate(-120deg) scale(0.75)}
    70%	{ transform: translateX(50px) translateY(-50px) rotate(-120deg) scale(0.7)}
    88% { transform: translateX(390px) translateY(-180px) rotate(120deg)scale(0.0)}
    to  { transform: translateX(465px) translateY(-40px) rotate(120deg) scale(0.65)}
}

Positionierung und Animation der Blumensäcke

Wachsende Blumen

Die Blumen wachsen in dem Spiel mit Hilfe einer Animation mittels JavaScript. Dazu gibt es für die verschiedenen Stadien des Wachstums verschiedene Bilder, die automatisch mit Hilfe von Anweisungen, wie bspw. $(“.plant_small”).attr(“src”, “media/grass.png”); ausgetauscht werden und anschließend durch die Anweisung $(“.plant_small”).css({“animation-play-state”:”running”}); animiert werden. Dadurch verändert sich das Wachstum der Blumen durch Animationen im Laufe des Spiels automatisch. Die Auswahl der Blumensorte zu Beginn des Spiels wird mit Hilfe einer Switch-Anweisung für den restlichen Spielverlauf übernommen

        /*Funktion für Blumen. Bilder sind von der Auswähl abhängig*/
        switch (blume) {
            case "Rose":
                $(".plant_small").attr("src", "media/Rose_Bush.png");
                break;
            case "Sonnenblume":
                $(".plant_small").attr("src", "media/Sunflower_Bush.png");
                break;
            case "Mohnblume":
                $(".plant_small").attr("src", "media/Poppy_Bush.png");
                break;
        }
        $("#sonne").css({"animation-play-state": "running"});
        $("#text_12").css({"display":"none"});
        $("#text_13").css({"visibility": "visible","display":"block"});
}, 2500);
});
Switch-Anweisung für die Übernahme des Blumenwahl für den weiteren Spielverlauf

Gießkanne

Für die Animation der Gießkanne werden sowohl Keyframe als auch jQuery Animationen verwendet. Bei den keyframes handelt es sich um rein visuelle Effekte, bei der sich die Gestaltung der Gießkanne ändert. Mit Hilfe von bspw. transform:scale() ändert sich ihre Größe, durch opacity ändert sich die Transparenz und durch animation-iteration-count:2 wiederholt sich diese Animation zweimal. Die Bewegung wird anhand von .animate() realisiert, sodass sich die Kanne über die Pflanzen bewegt. Dabei ändert sich mit Hilfe der Anweisung .mousemove ihre Ausrichtung, sobald der User mit der Maus über sie fährt und mit .mouseleave verschwindet die Gießkanne. Gleichzeitig wird auf diese Weise auch die Animation für die Wassertropfen ausgelöst.

/*jQuery-Animation für die Gießkanne und Style Änderungen für Interaktivität*/
$("#giesskanne").click(function() {
    $("#giesskanne").animate({
        bottom: "50%",
        left: "50%",
        }, 4000, "linear", function() {
            /*Animation wird aktiviert nur beim Bewegen auf dem Bild*/
            $("#giesskanne").mousemove(function(evt) {
            $(".wasser_tropfen").css({"display":"block"});
            $("#giesskanne").css({"transform":"rotate(-30deg)"});
            $(".wasser_tropfen").animate({
                bottom: "-55%"
                }, 2500 )
            });
            /*Ausschaltung der Animation*/
            $("#giesskanne").mouseleave(function(evt) {
                $(".wasser_tropfen").css({"display":"none"});
                setTimeout(function () {
                    $("#giesskanne").hide('slow');
                }, 3000);
            });
        });
Animation der Gießkanne

Sonne

Die Sonne bewegt sich im Spiel mit Hilfe von keyframes automatisch über die Blumenwiese bewegt und scheint stärker, sobald der User sie anklickt.

/*Durchgehende Animation für besseres Spiel. Einige Style Egenschaften werden später 
via JS ergänzt*/ 
#sonne {
    position: absolute;
    z-index: 2;
    bottom: 60%;
    left: 70%;
    height: 25%;
    cursor:pointer;
    
    animation-name: sonne_bewegung; 
    animation-duration: 45s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    animation-play-state: running;
}

@keyframes sonne_bewegung {
    from  { transform: translateX(0px) translateY(0px)}
    to  { transform: translateX(-500px) translateY(-20px)}
}
CSS Anpassungen für die Sonne

Nachdem die Gießkanne eingesetzt wird, stoppt die Bewegungs-Animation der Sonne, damit der User sie leichter anklicken kann. Bei dem Klick auf die Sonne wird sie größer und scheint stärker, um sie hervorzuheben. Das geschieht mit Hilfe der Anweisung 

$("#sonne").click(function() {$("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
/*Animation für die Sonne wird aktiviert beim Klick. Für den richtigen
    Spielablauf ist das Anklicken der Sonne nur nach der Animation mit der 
    Gießkanne möglich*/
$("#sonne").click(function() {
    $("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
    $(".plant_small").css({"animation-play-state":"running"});
Animation für die Sonne

Magic Booster

Der Magic Booster erscheint mit Hilfe der jQuery Anweisung $(“#booster”).show();. Die Animation wird automatisch ausgelöst, sobald er vom User ausgewählt wurde und läuft mit Hilfe der Anweisung animation-iteration-count: infinite; unendlich in einer Schleife. Durch die Anweisung $(“#booster”).fadeOut(4000); verschwindet der Booster automatisch innerhalb von 4 Sekunden. Auch hier kann man die Zeiteinstellungen nach Belieben und Funktionalität anpassen.

/*Magic Bosster wird angezeigt nur bei "Ja"-Antwort
Animation ist unendlich und startet mit der Erscheinung des Bildes*/

#booster {
    position: absolute;
    z-index: 15;
    height: 150;
    bottom: 70%;
    left: 40%;
    
    animation-name: magic_booster; 
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode:backwards;
    animation-play-state: running;
}

/*Animation zeigt den Effekt indem der Booster über die Blumenwiese gegossen wird.*/

@keyframes magic_booster {
    0%  { transform: scale(0.5) rotate(0deg)}
    50%	{ transform: scale(1) rotate(180deg)}
    100%  { transform: scale(0.5) rotate(-180deg)}
    
}
Keyframe Animation für den Magic Booster
/*Bei der Anwendung des Magic Boosters erscheint der animierte 
Booster und fängt an, langsamautomatisch zu verschwinden */
$("#btn_ja").click( function() {
    $(":button").hide();
    $("#booster").show();
    $("#booster").fadeOut(4000);
    setTimeout (function () {
jQuery für den Magic Booster, falls der User “Ja” auswählt

Interaktive Buttons

Sobald die Maus über die Buttons fährt, erscheint ein Hover-Effekt, in dem sich die Farben ändern. Der Hover-Effekt wird durch diese Eigenschaft umgesetzt:

button:hover {

transition: 3s in-back;

background-image: radial-gradient(#ffd700, #ff5433);

}

Außerdem wird der Cursor durch die Eigenschaft cursor:pointer; in Form einer Hand angezeigt, sobald der User mit der Maus über interaktive Elemente fährt. Dadurch weiß er, welche Elemente anklickbar und für den Spielverlauf wichtig sind.

Besonderheiten

Eine Besonderheit der Animation ist die Hintergrundmusik, die während des Spiels läuft. Sie startet automatisch, wenn der User das Spiel beginnt. Beginnt der User ein neues Spiel, indem er auf “Restart” klickt, startet auch die Musik wieder neu. Dies wird mit Hilfe des jQuery-Befehls $(“#background_musik”)[0].play(); umgesetzt. Bei der Hintergrundmusik haben wir darauf geachtet, eine lizenzfreie Musik zu nehmen, die zum Thema die Spiels passt. Dafür haben wir den Titel “The Small Farm” gewählt. Mit dem Befehl $(“#background_musik”)[0].pause(); endet die Musikwiedergabe zum Ende des Spiels automatisch.

Eine weitere Besonderheit ist das Responsive Design. Dieses wird eingesetzt, damit die Animation auf allen Desktopgrößen richtig angezeigt wird und gespielt werden kann. Das Responsive Design wurde mit Hilfe von CSS angepasst und bezieht sich auf alle Elemente im Quellcode. Dies wurde mit der Eigenschaft position: absolute; sowie der Anpassung der Abstände durch bottom: left: right: top: height: in Prozent-Angaben umgesetzt. Die Eigenschaft font-size: 1.05vw; führt dazu, dass auch die Texte optimiert dargestellt werden.


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.

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

Konzept

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.

Technische Umsetzung

Die Seite wurde mithilfe von HTML, CSS und JavaScript erstellt.

HTML

In der HTML-Datei wird der Aufbau der Seite bestimmt. Alle nicht-dynamischen Inhalte werden definiert und mithilfe von DIV-Containern positioniert.

In dem DIV „wrap“ befinden sich alle anderen Objekte, es definiert den Abstand zu den Seitenrändern. Unter der Überschrift und einer kurzen Spielbeschreibung befindet sich der Start-Button und darunter der aktuelle Punktestand.

Das Spielfeld besteht aus 49 einzelnen DIVs für die kleinen, quadratischen Felder. Diese sind umschlossen von dem DIV „grid“, welches sich innerhalb des DIV „background“ befindet.

Darunter befinden sich die DIVs „gameOver“ und „finalScore“ sowie der Restart-Button. Diese Elemente bestimmen die Karte, die zum Ende des Spiels erscheint, bis dahin sind sie unsichtbar.

Jedem der 49 Spielfeld-DIVs werden drei Klassen zugeordnet. Alle bekommen die Klasse „cell“, über die alle Felder auf einmal angesprochen werden können. Außerdem bekommt jedes Feld eine individuelle Klasse (c1 bis c49) und entweder die Klasse „bomb“ oder „noBomb“. Damit können die beiden Arten von Feldern getrennt voneinander bearbeitet werden.

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>forty in 49</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="wrap">
      <h1>
        forty in 49
      </h1>
      <p>
        a simple game<br>
        49 tiles - 40 are good 9 are bad<br>
        press start to see the bad ones<br>
        click on all the good ones
      </p>
      <button id="start">
        start
      </button>
      <div id="score">
        score: 0
      </div>
      <div class="background">
      </div>
      <div class="gameOver">
        your final sccore is: 
        <div id="finalScore">
          0
        </div>
        <button id="restart">
          restart
        </button>
      </div>
    </div>
    <script  src="./script.js">
    </script>
  </body>
</html>
<div class="background">
   <div class="grid">
     <div class="cell c1 noBomb"></div>
     <div class="cell c2 bomb"></div>
     <div class="cell c3 noBomb"></div>
     <div class="cell c4 noBomb"></div>
     <div class="cell c5 noBomb"></div>
     <div class="cell c6 noBomb"></div>
     <div class="cell c7 noBomb"></div>
     <div class="cell c8 noBomb"></div>
     <div class="cell c9 noBomb"></div>
     <div class="cell c10 noBomb"></div>
     <div class="cell c11 bomb"></div>
     <div class="cell c12 noBomb"></div>
     <div class="cell c13 bomb"></div>
     <div class="cell c14 noBomb"></div>
     <div class="cell c15 noBomb"></div>
     <div class="cell c16 noBomb"></div>
     <div class="cell c17 noBomb"></div>
     <div class="cell c18 noBomb"></div>
     <div class="cell c19 noBomb"></div>
     <div class="cell c20 noBomb"></div>
     <div class="cell c21 noBomb"></div>
     <div class="cell c22 noBomb"></div>
     <div class="cell c23 noBomb"></div>
     <div class="cell c24 bomb"></div>
     <div class="cell c25 noBomb"></div>
     <div class="cell c26 bomb"></div>
     <div class="cell c27 noBomb"></div>
     <div class="cell c28 noBomb"></div>
     <div class="cell c29 bomb"></div>
     <div class="cell c30 noBomb"></div>
     <div class="cell c31 noBomb"></div>
     <div class="cell c32 noBomb"></div>
     <div class="cell c33 noBomb"></div>
     <div class="cell c34 bomb"></div>
     <div class="cell c35 noBomb"></div>
     <div class="cell c36 noBomb"></div>
     <div class="cell c37 bomb"></div>
     <div class="cell c38 noBomb"></div>
     <div class="cell c39 noBomb"></div>
     <div class="cell c40 noBomb"></div>
     <div class="cell c41 noBomb"></div>
     <div class="cell c42 noBomb"></div>
     <div class="cell c43 noBomb"></div>
     <div class="cell c44 noBomb"></div>
     <div class="cell c45 noBomb"></div>
     <div class="cell c46 bomb"></div>
     <div class="cell c47 noBomb"></div>
     <div class="cell c48 noBomb"></div>
     <div class="cell c49 noBomb"></div>
   </div>
 </div>

CSS

In CSS wird das optische Erscheinungsbild der Seite bestimmt.

Die Hintergrundfarbe und Stil der Schrift werden definiert.

body {
  background-color: #4d4d4d;
  color: #b488b8;
  font-family: Calibri;
  text-align: center;
  text-transform: uppercase;
}

h1 {
  font-size: 60px;
}

Die Buttons werden abgerundet und bekommen jeweils eine Hintergrundfarbe.

#start {
  color: #b488b8;
  background-color: #fff;
  font-family: Arial;
  font-size: 24px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
}

#restart {
  display: none;
  color: #b488b8;
  background-color: #4d4d4d;
  font-family: Arial;
  font-size: 24px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
}

Der Bereich unter dem Spielfeld wird abgerundet und bekommt eine andere Farbe.

.background {
  position: relative;
  box-sizing: border-box;
  float: left;
  background-color: #ababab;
  width: 100%;
  border-radius: 10px;
  padding-bottom: 5%;
  margin-top: 30px;
}

Die Spielfelder werden zu abgerundeten Quadraten und bekommen einen Rand und eine Farbe.

.cell {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float: left;
  width: 14.28%;
  padding-bottom: 13.8%;
  border: 1px solid white;
  background-color: #1e1e1e;
  border-radius: 5px;
}

Die Karte, die nach Beendung des Spiels erscheint, wird im gleichen Stil designt.

.gameOver {
  opacity: 0;
  box-sizing: border-box;
  float: left;
  background-color: #fff;
  width: 94%;
  padding: 5%;
  margin: 3%;
  border-radius: 10px;
  transition: transform 1s cubic-bezier(0.38, 0.4, 0, 1.18);
  transition-delay: 3s;
}

Auch die Animationen werden in CSS erzeugt.

Beim Klick auf den Start-Button werden alle Felder, die keine Bomben sind, für wenige Sekunden langsam durchsichtig und dann wieder sichtbar.

/* fade-out fade-in der nicht-Bomben beim Klick des Start-Buttons (keyframe fade) */
.noBomb.start {
  animation: fade 7s;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Beim hovern über einen der Buttons wird dieser um 10% größer.

#start:hover,
#restart:hover {
  transition: transform;
  transform: scale(1.1);
}

Die Farbe der der einzelnen Felder ändert sich beim hovern und sie wachsen langsam um 30%.

.cell:hover {
  transition: background-color, transform 0.5s;
  background-color: #b488b8;
  transform: scale(1.3);
}

Wird ein Feld angeklickt, das keine Bombe ist, wird es grün und in einer rotierenden Bewegung kleiner, bis es verschwunden ist.

/* Animation der nicht-Bomben nach Klick */
.noBomb.clicked {
  transition: background-color, transform 4s;
  background-color: #81c7a2 !important;
  transform: scale(0) rotate(720deg);
  pointer-events: none;   /* verhindert, dass ein Feld mehrfach geklickt werden kann */
}

Beim Klick auf eine Bombe wird diese rot und dreht sich um die y- und die z-Achse.

/* Animation der Bomben nach Klick */
.bomb.clicked {
  transition: background-color, transform 4s;
  background-color: #ff695e !important;
  transform: rotateY(180deg) rotateZ(45deg);
  pointer-events: none;
}

Nach Beendung des Spiels erscheint die Karte mit dem Punktestand, verliert langsam ihre Durchsichtbarkeit und wandert von unten nach oben, bis sie über der Mitte des Spielfelds landet.

JavaScript

JavaScript ist zuständig für die Funktionalität der Seite. Hier wird unter anderem definiert, was genau passiert, wenn ein bestimmtes Objekt angeklickt wird. Dabei wird dem Objekt eine neue Klasse zugeordnet, was die in CSS bestimmte Animation auslöst.

Beim Klick auf den Start-Button werden alle Objekte der Klasse „noBomb“ ausgewählt. Mithilfe einer For-Schleife wird ihnen die Klasse „start“ zugeordnet, was die in CSS definierte Animation auslöst.

// fade-out / fad-in bei Klick auf den Start-Button
let start = document.querySelector("#start");
let noBomb = document.querySelectorAll(".noBomb");
start.addEventListener("click", () => {
  for (var i = 0; i < noBomb.length; i++) {
    noBomb[i].classList.add("start");
  }
});

Ein Klick auf den Restart-Button sorgt dafür, dass die Seite neu geladen wird.

// neu laden der Seite bei Klick  auf Restart-Button
let restart = document.querySelector("#restart");
restart.addEventListener("click", () => {
  window.location.href = window.location.href;
});

Beim Klick auf eins der normalen Felder wird dem Objekt die Klasse „clicked“ zugeordnet und dadurch die CSS-Animation ausgelöst. Zusätzlich wird ein Soundeffekt abgespielt. Außerdem wird der Punktestand um 1 erhöht und überprüft, ob dadurch die maximale Punktzahl erreicht wurde. Falls dass der Fall ist, wird die Spielabschlusskarte gezeigt und animiert.

// Animation der nicht-Bomben und counter der Punktzahl
let c1 = document.querySelector(".c1");
c1.addEventListener("click", () => {
  c1.classList.add("clicked");
  count += 1;
  score.innerHTML = "score: " + count;
  finalScore.innerHTML = count;
  if (count == 40) {
    restart.classList.add("true");
    for (var i = 0; i < cell.length; i++) {
      cell[i].classList.add("over");
    }
    gameOver.classList.add("true");
  }
  audioNoBomb.play();
});

Der Klick auf eine der Bomben funktioniert ähnlich, auch hier wird die Animation ausgelöst. Außerdem wird allen Feldern die Klasse „over“ zugeordnet, was dafür sorgt, dass keine weiteren Felder angeklickt werden können.

// Animation der Bomben und der Karte nach Beendung des Spiels
let c2 = document.querySelector(".c2");
let cell = document.querySelectorAll(".cell");
c2.addEventListener("click", () => {
  finalScore.innerHTML = count;
  c2.classList.add("clicked");
  restart.classList.add("true");
  for (var i = 0; i < cell.length; i++) {
    cell[i].classList.add("over");
  }
  gameOver.classList.add("true");
  audioBomb.play();
});

Auch die Audiodateien werden über JavaScript eingebettet.


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 Memory-Spiel

Beitragsbild Tutorial: Memory-Spiel

Autorin: Linda Görzen 


Memory-Spiel

Konzept

Ziel dieses Projektes war die Erstellung eines Spiels , das durch sämtliche Animationen bzw. Animationseffekte modern und dynamisch wirken sollte. Memory ist ein Spiel, das weltbekannt und nicht zu kompliziert zu programmieren ist. Im Internet gibt es sämtliche frei verfügbare Beispielcodes. Einer davon wurde in diesem Projekt verwendet.

Der Spielvorgang läuft folgendermaßen ab: Der Start des Spieles muss durch das Klicken eines Buttons ausgelöst werden. Danach hat man 30 Sekunden Zeit, um das Spiel zu gewinnen. Wenn man es nicht schafft, bricht das Spiel nach 30 Sekunden ab und man hat somit verloren.

Inhaltsverzeichnis

Aufbau

Das Spiel besteht aus drei Ebenen: 1. Startbildschirm 2. Spiel 3. Endbildschirm: gewonnen oder verloren

Für die Einfachheit und Übersichtlichkeit besteht das Spiel aus zwei HTML-Dateien. Die Datei game_start.html beinhaltet die erste Ebene. Die Datei game.html die Ebenen zwei und drei.

Startbildschirm

Hier erscheinen nacheinander ein Button, der zum Spiel weiterführen soll, ein Austronaut und ein Raumschiff. Im Hintergrund bewegen sich von oben nach unten und von unten nach oben kleine Punkte, die Sterne repräsentieren sollen. Der Button hat einen Hover-Effekt: Wenn man über ihn mit der Maus fährt, verändert sich der Text und die Farbe .

Memory-Spiel Bild 1
Abbildung 1: Startansicht

Memory-Spiel

Das eigentliche Spiel befindet sich im rechten Drittel des Bildschirms und besteht aus zwölf Karten, welche in drei Reihen gestapelt sind. Links vom Spiel sieht man den Astronauten und eine Sprechblase. Über den Astronaut schwebt ein Button, mit dem das Spiel neu gestartet werden kann. Beim Klicken auf die Karten, erscheint zusätzlicher Text in der Sprechblase. Nach ein paar Sekunden verschwindet dieser.

Memory-Spiel Bild 2
Abbildung 2: Spiel

Gewonnen – Endbildschirm

Wenn man innerhalb der 30 Sekunden alle Paare gefunden hat, verschwinden die Sprechblase und die Karten. Stattdessen blendet das Programm Konfetti und Überschrift “6/6! Gut gemacht gemacht!” ein. Im Hintergrund wird einmalig Triumpfsound “Ta-Da” abgespielt.

Memory-Spiel Bild 3
Abbildung 3: Spiel gewonnen

Verloren – Endbildschirm

Wenn 30 Sekunden verstrichen sind und nicht alle Paare gefunden wurden, dann bricht das Spiel ab und statt der Sprechblase und der Karten erscheint die Überschrift “Verloren” und in der Sprechblase steht jetzt “Schande!”. Der Astronaut fängt zu weinen an.

Memory-Spiel Bild 4
Abbildung 4: Spiel verloren

Erläuterung des Codes

Erste Ebene

HTML und javascript

Für die Erzeugung bestimmter Animationen lohnt es sich auf JS-Bibliotheken zurückzugreifen. In diesem Projekt wurde GSAP eingesetzt. Bei GSAP handelt es sich um eine JS-Bibliothek für zeitleistenbasierte Animationen . Die GSAP Funktionen lassen sich über CDN laden, indem man ihn im Head-Bereich einbindet.

Der CDN für allgemeine Funktionen reicht aber nicht aus, um Bewegung entlang eines vorgeschriebenen Pfades zu erzeugen. Der Code muss zusätzlich mit dem Plugin für GSAP-MotionPath ergänzt werden.

  <head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Memory game done with javascript and css animation">
    <meta name="keywords" content="game, interactive, avascript, css, html">
    <title>Memory Game</title>
	<link rel="stylesheet" href="styles_start.css"> <!-- Nur für game_start -->
	<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <!-- Polyfill -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!-- Core Green Sock-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Plugin für MotionPath von Green Sock-->
  </head>

Der HTML-Grundgerüst der ersten Ebene ist simpel aufgebaut. Es wurden nacheinander Elemente eingefügt, die in bestimmten Reihenfolge sichtbar werden sollten.

	<div class="sternenhimmel-bild">	
		<!-- Sterne, die sich von unten nach oben und umgekehrt bewegen, insperiert von https://www.youtube.com/watch?v=aywzn9cf-_U  -->
				<div id="stars"></div>
				<div id="stars2"></div>
				
				<div id="stars_2"></div>
				<div id="stars2_2"></div>	
			<img id="astro" src="Bilder/astro.png">
		
			<div>
				<a href="game.html"><button id="button1"></button></a>
			</div>
			
			<img id="spaceship" src="Bilder/futurama.png">
	</div>

Auf der ersten Ebene befindet sich der Javascript-Code in der HTML-Datei . Dank GSAP kann man den Code für die schwebende Bewegung des Astronauten kurz halten. Mit GSAP wird auch das Erscheinen des Buttons animiert. Man darf nicht vergessen den MotionPathPlugin zu registrieren, sonst wird motionPath nicht ausgeführt. Mit gsap.timeline() geben wir die Reihenfolge der Animationen vor. Zuerst soll der Button und dann der Astronaut erscheinen. Der Astronaut soll daraufhin im Kreis um den Button schweben und dann stehen bleiben.

		<script>
				//Plugin registrieren
				gsap.registerPlugin(MotionPathPlugin);
				
				//#astro 
				gsap.timeline().from('#button1', {opacy: 0.05, scale: 0, rotation: 10, ease:'back', duration: 1.5, })
							   .from("#astro", {duration: 2, x: 200, opacity: 0, scale: 0.5, rotation: 10})
							   .to("#astro", {
							  duration: 13, 
							  motionPath:{
							  path: [{x:220, y:440, scale:0.5, rotation:10}, {x:780, y:240,scale: 0.7, rotation:-30}, {x:470, y:10, scale:1, rotation:5}]
							  }
							});

				MotionPathHelper.create("#astro")
		</script>
CSS

Der Inhalt des Buttons wurde mit dem Pseudoelement ::after eingefügt. Das Ziel war es, den Text beim Hovern über den Button zu ändern. Beim Hovern sollen auch die Hindergrundfarbe und der Schatten sich verändern. Da :hover::after nur den Inhalt (also Text) ansteuert, muss man noch einmal :hover benutzen.

#button1 {
	display:inline-block;
	box-sizing: border-box;
	min-width: 11em;
	border-width: 4px;
	border-radius: 20px;
	background-color: rgba(204, 102, 255, 0.55);
	border-color: rgba(239, 204, 255);
	text-align: center;
	font-size: 31px;
	padding: 25px;
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.29);
}

#button1::after{
    content:'Eine Runde spielen?';
}
#button1:hover::after{
    content:"Los geht's!";
}

#button1:hover {
    background-color: rgba(251, 41, 253, 0.9);
    cursor: pointer;
      box-shadow: 0 8px 70px 0 rgba(255,250,250,0.3), 0 8px 70px 0 rgba(255,250,250,0.3),  0 8px 70px 0 rgba(255,250,250,0.3), 0 8px 70px 0 rgba(255,250,250,0.3);
    transition: background-color 2s ease-out;
}

Um den Hintergrund dynamischer wirken zu lassen, werden zwei Sterne-Animationen hinzugefügt. Die Idee der Erstellung der Sterne mit box-shadow und sie dann in Bewegung zu setzten stammt von diesem Youtube-Video . Im Spiel bewegen sich die Sterne sowohl von oben nach unten als auch von untern nach oben. Ermöglicht wird es durch zwei Keyframes.

/* von unten nach oben */
#stars {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background:transparent;
	animation: animStar 50s linear infinite;
	box-shadow: 789px 1341px #fff, 
				364px 52px #fff, 
				353px 596px #fff,
				1412px 376px #fff, 
				451px 625px #fff, 
				521px 1931px #fff, 
				1087px 1871px #fff,
				36px 1546px #fff, 
				132px 934px #fff, 
				1698px 901px #fff, 
				1418px 664px #fff,
				1448px 1157px #fff,
				1084px 232px #fff, 
				347px 1776px #fff, 
				1222px 343px #fff; /* 15*/
}

#stars2 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background:#bb33ff;
	animation: animStar 100s linear infinite;	 
	box-shadow: 1448px 320px #00ffff, 
				1775px 1663px #00ffff, 
				332px 1364px #00ffff,
				878px 340px #00ffff, 
				569px 1832px #00ffff,
				1422px 1684px #00ffff, 
				1946px 1907px #00ffff,
				121px 979px #00ffff, 
				1044px 1069px #00ffff, 
				463px 381px #00ffff, 
				
				423px 112px #ffffb3,
				523px 1179px #ffffb3, 
				779px 654px #ffffb3,
				1398px 694px #ffffb3, 
				1085px 1464px #ffffb3;
}

@keyframes animStar{
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-1000px);
	}
}


/* von oben nach unten*/

#stars_2 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background:transparent;
	animation: animStar_2 50s linear infinite;
	box-shadow: 779px 1331px #fff, 
				324px 42px #fff, 
				303px 586px #fff,
				1312px 276px #fff, 
				451px 625px #fff, 
				521px 1931px #fff, 
				1087px 1871px #fff,
				36px 1546px #fff, 
				132px 934px #fff, 
				1698px 901px #fff, 
				1418px 664px #fff,
				1448px 1157px #fff,
				1084px 232px #fff, 
				347px 1776px #fff, 
				1722px 243px #fff; /* 15*/
}

#stars2_2 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background:#bb33ff;
	animation: animStar_2 100s linear infinite; 
	box-shadow: 1448px 320px #9acd32, 
				1775px 1663px #9acd32, 
				332px 1364px #9acd32,
				878px 340px #9acd32, 
				569px 1832px #9acd32,
				1422px 1684px #9acd32, 
				1946px 1907px #9acd32,
				121px 979px #9acd32, 
				1044px 1069px #9acd32, 
				463px 381px #9acd32, 
				
				423px 112px #ffffb3,
				523px 1179px #ffffb3, 
				779px 654px #ffffb3,
				1398px 694px #ffffb3, 
				1085px 1464px #ffffb3;
}

@keyframes animStar_2{
	from {
		transform: translateY(-1000px);
	}
	to {
		transform: translateY(1000px);
	}
}

Die Animation des Raumschiff ist ähnlich wie bei den Sternen umgesetzt. Die Keyframes teilen wir dieses Mal in Prozente ein.

#spaceship{
	animation-delay: 4s;
	animation: futurama 10s linear forwards;
}

@keyframes futurama{
	0% {
		max-width: 1%; 
		transform: translateX(-20em);
	}
	25% {
		max-width: 4%; 
	}
	100% {
		transform: translateX(-10em);
		max-width: 14%; 
	}
}

Zweite Ebene

HTML

Für die zweite Ebene, also für die Datei game.html , fügen wir im Head-Bereich zusätzlich zu GSAP ein Script von LottieFiles hinzu . Dieser ermöglicht später eine Lottie-Animation zu starten.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!--Green Sock-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Green Sock-->		 

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <!-- Lottiefiles-->

Der HTML-Code ist auch hier unkompliziert gestaltet. Der Div mit der class=”grid” ist der wichtigste Bestandteil dieses HTML-Codes. Über ihn erzeugt die app.js-Datei die Memory-Karten .

Bei der Lottie-Animation handelt es sich um eine Konfetti-Animation, die nur beim Gewinnen des Spiels über Javascript aktiviert wird. Sie ist in der HTML-Datei über den <lottie-player>-Tag eingebunden und über CSS angepasst.

<!-- Memory-Spiel -->
    <div class="grid"></div> <!-- Memorykarten werden über app.js erzeugt -->   

    <img id="gameAstro" src="Bilder/astro.png"/>        <!-- Astronaut -->
    <img id='Traene' src='Bilder/water.svg'> <!-- erscheint, wenn verloren -->
    <div id="score" >
        <h3>
            Du hast 30 Sekunden Zeit <br/> 
            Dein Score:<span id="result"></span>
        </h3>
        <p id="message"></p>
    </div>


<!--Spiel gewonnen-->
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_u4yrau.json" id='confetti' background="transparent"  speed="1.15"    loop  autoplay></lottie-player>
<div id='gewonnen'><h1>6/6! Gut gemacht!</h1></div>


<!--Spiel verloren-->    
<div id="Schande"><p>Schade!</p></div>
<div id='verloren'><h1>Verloren</h1></div>


<!-- "Neues Spiel"  Button -->  
<a href="javascript:location.reload()"><div id="nochMal">Neues Spiel</div></a>
Javascript

Der grundlegende JS-Code für das Memory-Spiel stammt aus diesem YouTube-Video. Der Code wurde modifiziert und an eigene Bedürfnisse angepasst.

Das Programm führt folgende Schritte aus: createBoard() kreiert innerhalb des .grid-Divs Child-Elemete, die für die Erstellung der Karten benötigt werden. Timer löst nach 30 Sekunden die Funktion verloren() aus, die die Elemente .grid und und scoreDiv entfernt und stattdessen andere Elemente aktiviert. Die Funktion checkForMatches() erfüllt gleich mehrere Aufgaben: Sie vergleicht die angeklickten Karten und je nach Auswahl gibt einen Text in der Sprechblase aus. Wenn sie feststellt, dass alle Paare gefunden wurden, löscht bzw. deaktiviert sie bestimmte Elemente und blendet neue ein. Die flipCard()-Funktion sorgt dafür, dass die Karten “umgedreht” werden und man das verborgene Bild sieht. Es können nur zwei Karten gleichzeitig umgedreht werden.

document.addEventListener('DOMContentLoaded', () => {

  //Kartenauswahl
  
  const cardArray = [
    {
      name: 'mond',
	  img: 'Bilder/mond.svg'
    },
    {
      name: 'alien',
	  img: 'Bilder/alien.svg'
    },
    {
      name: 'ufo',
	  img: 'Bilder/ufo.svg'
    },
    {
      name: 'rocket',
	  img: 'Bilder/rocket.svg'
    },
    {
      name: 'space',
      img: 'Bilder/space.svg'
    },
    {
      name: 'sun',
      img: 'Bilder/sun.svg'
    },
    {
      name: 'mond',
      img: 'Bilder/mond.svg'
    },
    {
      name: 'alien',
      img: 'Bilder/alien.svg'
    },
    {
      name: 'ufo',
      img: 'Bilder/ufo.svg'
    },
    {
      name: 'rocket',
      img: 'Bilder/rocket.svg'
    },
    {
      name: 'space',
      img: 'Bilder/space.svg'
    },
    {
      name: 'sun',
      img: 'Bilder/sun.svg'
    }
  ];

  cardArray.sort( () => 0.5 - Math.random());
  

  const grid = document.querySelector('.grid');
  const resultDisplay = document.querySelector('#result');
  const wordCloud = document.querySelector('#message');
  const scoreDiv = document.querySelector('#score');
  const gameAstro = document.querySelector('#gameAstro');
  
  let cardsChosen = [];
  let cardsChosenId = [];
  let cardsWon = [];
  
  //create your board

  function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
	const cardDiv = document.createElement('div') //Um die karten herum einen Div erstellen
	cardDiv.setAttribute('class', 'imgDiv') //Um die karten herum einen Div erstellen
	
    const card = document.createElement('img')
	card.setAttribute('class', 'Spielbilder')
    card.setAttribute('src', 'Bilder/logo.svg')
    card.setAttribute('data-id', i)
    card.addEventListener('click', flipCard)
	  
	grid.appendChild(cardDiv).appendChild(card) //Um die Karten herum einen Div erstellen
    }
  };
  
    
  //Timer. Falls das Spiel mach 30 Sekunden nicht gewonnen wurde, wird das Spiel abgebrochen
  	var timer = setTimeout( function(){verloren();}, 30000);
	function verloren(){
	  grid.remove()
	  scoreDiv.remove()
	  gameAstro.style.marginTop = '17em'
	  gameAstro.style.marginLeft = '7em'
	  gameAstro.style.width = '10em'
	  
	  document.querySelector('#verloren').style.display = 'block'
	  document.querySelector('#Schande').style.display = 'block'
	    
	  gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'});
	  
	  document.querySelector('#Traene').style.display = 'block'
	};
  

  //check for matches
  function checkForMatch() {
    const cards = document.querySelectorAll('img')
    const optionOneId = cardsChosenId[0]
    const optionTwoId = cardsChosenId[1]
	
    
    if(optionOneId == optionTwoId) {
      cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
	  wordCloud.textContent = 'Du hast die gleiche Karte angeklickt!'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
    }
    else if (cardsChosen[0] === cardsChosen[1]) {
	  wordCloud.textContent = 'Du hast ein Paar gefunden!'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
      cards[optionOneId].removeAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].removeAttribute('src', 'Bilder/logo.svg')
      cards[optionOneId].removeEventListener('click', flipCard)
      cards[optionTwoId].removeEventListener('click', flipCard)
      cardsWon.push(cardsChosen)
    } else {
      cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
	  wordCloud.textContent = 'Schade, versuch es noch mal'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
    }
    cardsChosen = []
    cardsChosenId = []
    resultDisplay.textContent = cardsWon.length
	var audio = new Audio('ta-da.mp3');
    if  (cardsWon.length === cardArray.length/2) {
      //Falls das Spiel innerhalb von 30 Sekunden gewonnen:
	  clearTimeout(timer)  //Timer aussetzen, damit das Spiel nicht abgebrochen wird
      audio.play();
	  grid.remove()
	  scoreDiv.remove()
	  gameAstro.style.marginTop = '17em'
	  gameAstro.style.marginLeft = '7em'
	  gameAstro.style.width = '10em'
	  
	  document.querySelector('img#gameAstro').style.animationName = 'none' //Animation entfernen, damit GreenSock-Animation abgespilt werden kann
	  document.querySelector('#gewonnen').style.display = 'block'
	  document.querySelector('#confetti').style.display = 'block'
	  
	  //Freudiges Springen
	  gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'})
					.to('#gameAstro', { duration: .25, y: -50,  repeat: -1, yoyo: true, ease: "sine.inOut", autoRound: false}); 
    }
  };

  //flip your card
  function flipCard() {
	
    let cardId = this.getAttribute('data-id')
    cardsChosen.push(cardArray[cardId].name)
    cardsChosenId.push(cardId)
    this.setAttribute('src', cardArray[cardId].img)
    if (cardsChosen.length === 2) {
      setTimeout(checkForMatch, 300)
    }
  };

	createBoard();
});
css

Das Aussehen der Karten wird über die Klassen .grid , .imgDiv und .Spielbilder bestimmt. Die Klasse .grid ist für die Verteilung der Karten auf dem Bildschirm zuständig. Hier empfielt es sich, die Einstellung display:flex zu wählen. Es ist der leichteste Weg ist, die Karten zu positionieren. Für die richtige Reihung der Karten ist es wichtig, dass die Breite des .grid-Containers und die Breite der einzelnen Karten, die von .imgDiv gesteuert werden, auf einander abgestimmt sind.

/* Während des Spiels*/

.grid{
	display: flex;
	flex-wrap: wrap;
	width: 30em;
	margin-right: 5em;
	margin-top: 3em;
	float:right;

}

.imgDiv {
	background-color: rgba(204, 102, 255, 0.55);
	border-radius: .25em;
	width:7em;
	height:12em;
	margin:.25em;
	box-shadow: rgba(50, 50, 93, 0.65) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px, rgba(10, 37, 64, 0.65) 0px -2px 6px 0px inset;	
}
.imgDiv:hover {
	box-shadow: rgba(153, 255, 102, 0.65) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px, rgba(153, 255, 102, 0.65) 0px -2px 6px 0px inset;	
}
img.Spielbilder { 
	max-height:100%; 
	max-width:100%;
	padding:1em;
}

Dritte Ebene

Die einzelnen Elemente der dritten Ebene werden je nach Ergebnis des Spieles durch den JS-Code aktiviert. Aus diesem Grund sind sie alle mit display:none versehen. Der JS-Code verändert sie dann mit document.querySelector zu display:block.

/* Spiel gewonnen*/
h1 {
	font-size: 5em;
}

#gewonnen {
     animation: Schweben 5s linear easy-in;
    display: none;
    position: absolute;
    left: 53em;
    top: 20em;
    z-index: 10;
}
#confetti{
	display: none;
	width:75em;
	height: auto;
	float: right;
}
/* Spiel verloren*/
#verloren {
	display: none;
	animation: Schweben 6s linear infinite;
    position: absolute;
    left: 53em;
    top: 20em;
    z-index: 10;
	float:left;
}
#Schande {
	display: none;
	animation: Schweben 13s linear infinite;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 69% 75%, 5% 100%, 27% 76%, 0% 75%);
	width: 16em;
	height:9em;
	margin-top: 13em;
	margin-left:4em;
	padding: 1em;
	float: left;	
	background-color: rgba(204, 102, 255, 0.55);
}
#Schande p {
	font-size: 2em;
	text-align: center;
}

#Traene {
	display: none;
	width: 0em;
	position:absolute;
    left: 12.5em;
	top: 22em;
	z-index: 15;
	animation: traene 3s linear infinite;
	transition: ease-in;
	animation-delay: 3s;
}
@keyframes traene{
	from {
		transform: translateY(0em);
		width: 0.5em;
	}
	to {
		transform: translateY(13em);
		width: 3em;

	}
	to {
		transform: translateY(15em);
	}
	to {
		transform: translateY(16em);
		opacity: 60%;
	}
	to {
		transform: translateY(17em);
		opacity: 7%;
	}
}

Sowohl in der zweiten als auch in der dritten Ebene werden alle sichtbaren Elemente (bis auf die Memory-Karten) mit einer Schwebeanimation versehen, um den Eindruck zu vermitteln, dass die Objekte wie im echten Weltall schweben.

/*Alles soll schweben*/
@keyframes Schweben {
	0% {

		transform: translatey(0px);
	}
	25%{
		transform: translatex(-5px);
	}
	50% {

		transform: translatey(-10px);
	}
	100% {

		transform: translatey(0px);
	}

}

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.