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

Beitragsbild

Autor*in: Anna Selitski und Anna-Lisa Voigt


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

Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen.  Aber wie funktioniert das Erstellen von einem Prototype mit Figma? Und was sind Figma und die User Journey überhaupt? Das und weitere spannende Informationen zu diesem Thema zeigen wir dir in dem folgenden Beitrag!

Dieser Beitrag im Überblick:

Eine Einführung zu Figma

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

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

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

Prototype, User Journey – Was genau ist das?

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

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

Tutorial: Wie erstelle ich einen Prototype in Figma?

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

Schritt 1:

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

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

Schritt 2:

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

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

Schritt 3:

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

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

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

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

Schritt 4:

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

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

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

Schritt 5:

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

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

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

Prototype erstellen – Alle Schritte auf einem Blick

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

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

Das Prototype-Testing mit Figma Mirror

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

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

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

Viel Erfolg!

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

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


Quellen

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

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

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


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

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

Tutorial: Interaktive Karte für Stipendiaten an deutschen Hochschulen

Interaktive Karte: Stipendiaten an Hochschulen

Autor*in: Linda Khorami


Zur interaktiven Karte (Hochschulwebspace Linda Khorami)
Quellcode zum Download (Zip-Archiv)

Stipendiaten an deutschen Fachhochschulen
One Pager – Stipendiaten an deutschen Fachhochschulen

1. Einleitung 

Im Rahmen des Seminars „Multimediasysteme 2“ wurde ein One Pager zum Thema „Stipendiaten an deutschen Fachhochschulen“ erstellt. Hierfür wurden Informationen des Statistischen Bundesamtes herangezogen. Die Daten stammen aus dem Jahr 2018. Bei der Deutschlandkarte handelt es sich um eine SVG-Datei von „amcharts“

Step by Step – eine Übersicht 

Die Realisierung des One Pager kann in mehrere Schritte unterteilt werden. Für die Umsetzung des Beispiels wurden Arbeitspakete im Wochenrhythmus formuliert. Dadurch war eine realistische Einschätzung des Arbeitsaufwandes möglich:

Zeitraum Tätigkeiten
 

 

 

Woche 1

Themenfindung

  • Allgemeine Recherche zu verschiedenen Themen
  • Themensammlung
  • Präzise Recherche zu einzelnen Themen
  • Thema wählen und benötigte Informationen zusammenfassen

Umsetzung prüfen

  • Fragen klären:
  • In welcher Form kann das gewählte Thema umgesetzt werden (Als Diagramm, Landkarte usw.)
  • Form wählen  ( z.B. Landkarte)
  • Geeignete Landkarte finden
  • Quellcode der SVG übersichtlicher gestalten bzw.      Aufräumen
 

 

 

Woche 2

Animationen und Layout

Recherche, um folgende Fragen zu beantworten:

  • Wie können Inhalte eingepflegt werden, ohne die Seite bzw. die Karte zu überladen?
  • Welche Animationen können dabei unterstützen?
  • Finale Festlegung der Animationen
 

 

Woche 3

Umsetzung

  • Umsetzung der Animationen
  • Quellcode erneut aufräumen
  • Funktionalität testen

Dokumentation der bisherigen Vorgehensweise

 

Woche 4

 

Kontrolle und Abgabe

 

Konzept

Ziel der Karte ist es Informationen zu dem Thema kompakt dazustellen und Studenten die Möglichkeit zu geben sich einen Überblick zu verschaffen. Hierfür werden folgende Informationen vermittelt: Anzahl der Stipendiaten sowie die Anzahl der Frauen und Männer die im Vorjahr ein Stipendium erhalten haben. Für die technische Umsetzung wird dabei HTML, CSS und JavaScript verwendet.

Besonderheiten im Code

Im Header der HTML-Datei befinden sich externe Libraries die eingebunden werden müssen, um gewisse Styles unabhängig von den Animationen umzusetzen. Dazu gehören z.B. die Schriftfarbe und die Navigationsleiste des One Pager, die mittels Bootstrap realisiert werden. Die Programmlogik ist mit JQuery umgesetzt, dazu ist im Header eine Library eingebunden, die auch für Bootstrap relevant ist.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- Bootstrap for Navigation-->

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script> <!--jquery-->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script> <!-- popper externe Libary für Tooltips-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>

Aufwand und Funktionalität 

Die Animationen des One Pager unterteilen sich in zwei Teile. Zum einen sind Animationen innerhalb der SVG-Datei und somit in der Deutschlandkarte eingebaut. Zum anderen wird eine Animation für die Infotext-Anzeige außerhalb der Karte verwendet, welche durch einen Klick auf das jeweilige Bundesland ausgelöst wird. Dabei verfolgen beide dasselbe Ziel: Informationen online übermitteln, ohne zu verwirren.

1.  Karte

Innerhalb der Deutschlandkarte wird beim hovern eine Animation ausgelöst. Wenn der Besucher mit der Maus über ein Bundesland fährt, ändert sich die Farbe des Bundeslandes und die Animation mit einer Zoom-Funktion wird ausgelöst. Dies dient zur Veranschaulichung sowie Verdeutlichung, damit der Besucher genau weiß, welches Bundesland gemeint ist.

Um die Farbe bei einem Mouse-Over zu verändern, kann z.B. der folgende Code verwendet werden:

/* changing color while hovering*/

        .state:hover {

            fill: #004085;

            animation: zoominout 1s infinite;

        }

Diese Angabe gilt für alle Bundesländer, da diese zur Klasse “state” gehören.  Wie und wo eine Klasse vergeben werden kann, zeigt der folgende Code:

<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"

1.1 Animation der Karte umsetzen

Beim initialen mouse-over wird das Bundesland innerhalb einer Sekunde von der Originalgröße um 2% auf und wieder zurück skaliert. Die Animation kann mittels Keyframes umgesetzt werden und sieht aus wie folgt:

@keyframes zoominout {
            0% {
                transform: scale(1.0);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1.0);
            }
        }

2. Infobox 

Durch die Infobox werden nähere Informationen vermittelt. Durch einen Klick auf das jeweilige Bundesland erscheint eine Infobox, in der die Gesamtanzahl der Stipendiatinnen und Stipendiaten sowie die Verteilung unter Männern und Frauen zu finden sind.

Die einzelnen Informationen zu den Stipendiaten sind in das “data-description”-Attribut der jeweiligen Bundesländer eingetragen. Das Attribut ist nicht Teil der SVG-Datei und muss manuell hinzugefügt werden.

<path id="DE-BW" title="Baden-Württemberg" class="state" data-description="<ul><li>Stipendiaten: 1.375 </li><li>Frauen: 666</li><li>Männer: 709</li</ul>"

Technische Umsetzung  der Ränder

Die Animation der Infobox kann mit zwei Keyframes umgesetzt werden. Die definierte Regel “beforeBorders” löst eine Animation aus, bei der ein Rahmen um die Infobox gezogen wird:

@keyframes beforeBorders {

          0% {

              top: calc(var(--border-width) * -1);

              left: 50%;

              bottom: auto;

              right: auto;

              width: 0;

              height: var(--border-width);

          }



          33% {

              top: calc(var(--border-width) * -1);

              left: calc(var(--border-width) * -1);

              bottom: auto;

              right: auto;

              width: calc(var(--border-width) + 50%);

              height: var(--border-width);

          }



          66% {

              top: calc(var(--border-width) * -1);

              left: calc(var(--border-width) * -1);

              bottom: auto;

              right: auto;

              width: var(--border-width);

              height: calc((var(--border-width) * 2) + 100%);

          }



          100% {

              top: auto;

              left: calc(var(--border-width) * -1);

              bottom: calc(var(--border-width) * -1);

              right: auto;

              width: calc(var(--border-width) + 50%);

              height: calc((var(--border-width) * 2) + 100%);

          }

      }

Für die Farbe der Ränder wird eine zweite Regel definiert, auch diese besteht aus vier Teilen:

/* border color */
@keyframes borderColors {

    0% {

        border-top-color: transparent;

        border-right-color: transparent;

        border-bottom-color: transparent;

        border-left-color: transparent;

    }



    33% {

        border-top-color: var(--color);

        border-right-color: transparent;

        border-bottom-color: transparent;

        border-left-color: transparent;



    }



    66% {

        border-top-color: var(--color);

        border-right-color: var(--color);

        border-bottom-color: transparent;

        border-left-color: var(--color);

    }



    100% {

        border-top-color: var(--color);

        border-right-color: var(--color);

        border-bottom-color: var(--color);

        border-left-color: var(--color);

    }

}

Technische Umsetzung  der Box

Mit Hilfe der JavaScript Funktion öffnet sich eine Infobox beim Klicken auf eines der Bundesländer und zeigt den Namen des Bundeslandes sowie die oben erwähnten Informationen über die Stipendiaten (siehe Kommentare).

$(function () {
          $('.state').on('click', function (e) {
              let box = $('.state-description-box'), // select the description-box
                  clonedBox = box.clone(true); // clone this box
              box.before(clonedBox); // put this cloned-box before the first box
              $('.state-description-box:last')
                  .remove(); // remove the old one to trigger the same animation again

              let title = $(this).attr('title'); // get the title from the clicked element
              let description = $(this).attr(
                  'data-description'); // get the description from the clicked element
              let fullText = '<h4>' + title + '</h4><p>' + description +
                  '</p>'; // put this text together
              $('#state_description').html(fullText); // write the text into the box
              $('#state_description').parent().show(); // show the box, just the first time
          });

      });

Gestalterische Umsetzung

Die Navigationsleiste, sowie der Footer werden in diesem Beispiel mittels Bootstrap verwirklicht.

Im Allgemeinen ist das Design sehr schlicht gehalten, damit die Informationen der Seite im Vordergrund stehen. Daher besteht die Seite hauptsächlich aus Blau- und Grautönen.

Eine Besonderheit bei der gestalterischen Umsetzung ist, dass für die SVG-Datei andere Attribute als für HTML Elemente verwendet werden.  Im Folgenden werden die einzelnen Klassen mittels Kommentare beschrieben:

       /* Setting for the states*/
       .state {

          fill: lightgrey;

          stroke: white;

          stroke-width: 1.5;

          stroke-linecap: butt;

          stroke-linejoin: miter;

          stroke-miterlimit: 10;

          stroke-dasharray: none;

          stroke-opacity: 1;

      }



      /* changing color while hovering*/

      .state:hover {

          fill: #004085;

          animation: zoominout 1s infinite;

      }



      /* Setting for description-box that appears after clicking on the Map */

      .state-description-box {

          --border-width: 0.2em;

          --animation-speed: 0.5s;

          --color: #004085;

          color: var(--color);

          transform: scale(1, 0.8);

          border: var(--border-width) solid transparent;

          animation: borderColors var(--animation-speed) steps(1) forwards;

          outline: none;

      }



      .state-description-box-inner {

          width: 100%;

          cursor: pointer;

          padding: 0.2em;

          background: #cce5ff;

          z-index: 1;

          border: solid var(--border-width) transparent;

      }

      /*Setting for the Footer */
      .footer {

          padding: 2.5rem 0;

          color: #999;

          text-align: center;

          background-color: #f9f9f9;

          border-top: .05rem solid #e5e5e5;

      }

 


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

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

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

Beitragsbild

Autor*in: Melanie Hartkopf


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

Der Beitrag in der Übersicht

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

Die Welt der Single-Page-Webanwendungen

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

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

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

Angular & React – Was haben sie gemein?

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

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

Angular – Googles Framework 2.0

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

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

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

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

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

React – Facebooks mächtige Bibliothek

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

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


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

Was solltest du wählen?

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

Logo von Angular
Angular Logo – Quelle: angular.io

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

Logo von React
React Logo – Quelle: reactjs.org

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

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

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

React oder Angular? And the winner is …

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

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

Quellen

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

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

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

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

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

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

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

8 Tillmann, Janna (2017): React vs. Angular – wann ist was besser? Online unter https://t3n.de/news/react-vs-angular-besser-845241/2/ [Abruf am 19.05.2020]


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

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

Tutorial: Einen Preloader erstellen

Preloader

Tutorial: Einen Preloader erstellen

Autoren: Straube und Wisnia

Konzept

Preloader sind Animationen, die während dem Ladevorgang einer Website angezeigt werden. Sie informieren den Nutzer über Ladeprozesse und befriedigen sein Bedürfnis  zu wissen, was während der Interaktion mit einer Website im Hintergrund abläuft. Gleichzeitig überbrücken die Wartezeit. So sind sie zum einen unterhaltsam, zum andern verbessern sie die User Experience einer Seite.

In diesem Beispiel dient der Preloader durch sein außergewöhnliches Design, passend zu einer Website aus dem Themenbereich Foodblogging, zusätzlich dem Branding. Die Animation bleibt dem Nutzer im Gedächtnis und steht in einem klaren thematischen Bezug zur Seite aus dem Genre.

Dabei handelt es sich um eine zustandsbehaftete Animation, die, zumindest in der praktischen Anwendung, mit HTML Statuscodes korrespondiert. Zur Erstellung wurde mit der Web Animation API und CSS3 eine native Animationstechnik genutzt.

Dieser Preloader besteht aus zwei Bestandteilen: Einem sehr grafiklastigen endless Spinner, der zur Unterhaltung der Betrachters dient und einem Ladebalken, der je nach Implementierung scheinbar oder tatsächlich einen Ladefortschritt anzeigt.

Nun zum praktischen Teil. Im Folgenden ist in 3 einfachen Schritten erklärt, wie ein individueller Leader selbst ‘gebaut’ werden kann.

Die Entwicklungsumgebung:

Entwicklungsumgebungen wie codepen.io eignen sich besonders gut zum Erstellen von Animationen, da sie den Code sehr übersichtlich visualisieren und das Ergebnis des Codes und Änderungen daran augenblicklich aktuell anzeigen. Dennoch eignen sich auch klassische Texteditoren wie Notepad++.

Schritt 1: HTML-Grundgerüst

Im ersten Schritt wird ein einfaches HTML-Grundgerüst erstellt. Dennoch sollte im Voraus bereits ein Polyfill für die Web Animation API (WAAPI) eingebunden werdende diese nicht von allen Browsern unterstützt wird.  Anschließend wird eine Div-Klasse für die gesamte Animation erstellt, sowie drei weitere für den oberen Teil der Animation sowie eine Klasse und Unterklasse für den Ladebalken, um diese Elemente später mit CSS3 und Java Script weiter bearbeiten zu können. Der gesamte HTML-Code sieht wie folgt aus:

 HTML-Grundgerüst
HTML-Grundgerüst

Schritt 2: Styling und Animation mit CSS

Das Entwickeln des CSS Codes ist der komplexeste Teil der Animation. Als erstes wird die Größe des Div-Containers für die gesamte Animation festgelegt. Anschließend werden die drei Elemente, die sich über dem Ladebalken befinden sollen und später animiert werden, gestylt. Durch eine Anweisung kann Größe, Höhe und Position für alle drei Elemente festgelegt werden und deren Farbe ggf. in individuellen Anweisungen für jedes Element. An dieser Stelle ist es wichtig, die Eigenschaft ‘display’ auf den Wert ‘inline-block’ zu setzten, sodass die Elemente nebeneinander angezeigt werden.

Um den Ladebalken zu erstellen, werden zunächst Größe, Form und Farbe sowie Position für diesen festgelegt. Dabei ist eine absolute Positionierung innerhalb des übergeordneten Containers zu empfehlen, um Verschiebungen der Grafik bei unterschiedlichen Bildschirmgrößen zu vermeiden. Darauffolgend werden die Animationsmöglichkeiten von CSS3 genutzt , da diese leicht einzusetzen und für einen Leader mit unbestimmten Ladefortschritt gut geeignet sind.

Zum Animieren des Ladebalkens wird zunächst ein weiterer Balken mit anderer Farbe und geringerer Größe innerhalb des ersten Balkens erstellt. Diesem wird mithilfe der CSS Eigenschaften ‘transition:’ und ‘animation’ Funktionalität verliehen. Durch die Attribute dieser Eigenschaften können ua. Dauer, Art und Iteration der Animation bestimmt werden. Anschließend werden für die load Eigenschaft des Ladebalkens Keyframes definiert. So startet in diesem Beispiel der Ladevorgang bei 2% und hat bei 10% ebenfalls 10% der Länge des Balkens erreicht.

    

 

Schritt 3: Animation mit JS

Im letzten Schritt wird der obere Teil des Loaders mithilfe von Java Script uns WAAPI animiert. Für einfache Ladegrafiken ist die Verwendung von CSS3 ausreichend. Animationenmit Java Script erlauben jedoch mehr Kontrolle und bieten mehr Möglichkeiten.  Das erste zuganimierende Element wird zunächst mit dem Quer Selektor ausgewählt und im Folgenden  mit der .animate() Methode animiert. Mit der Eigenschaft ‘transform’ werden Keyframes festgelegt. Das bedeutet in diesem Fall das Verschieben des Elementes auf der Y-Achse. Des Weiteren werden Dauer und Wiederholungsfreqenz festgelegt. In diesem Beispiel ist die Animation ‘infinite’, in der Implementierung in einer Website würde die Animation in Abhängigkeit mit dem Ladestatus der Website bzw. einem Systemstatus gesetzt werden. Der Vorgang wird für alle zu animierenden Elemente wiederholt.

Abschließend können nach Belieben an Stelle der mit CSS gestylten Elemente Grafiken eingefügt werden. Hier eignen sich besonders Icons im Flat Design, um eine optische Überladung der Animation zu vermeiden.

Listings:

 
  
  Loading Bar Food Blogger
      

https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.1.4/web-animations.min.js


http://js/index.js

 

 

 

 

 

Loading…

 

 

https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.1.4/web-animations.min.js http://js/index.js

var a = document.querySelector('.a');
var animation = a.animate([
  { transform: 'translateY(-1em)' },
  { transform: 'translateY(0em)' }], 
  { duration: 700,
  iterations: Infinity,
  direction: 'alternate',
});

var b = document.querySelector('.b');
var animation = b.animate([
  { transform: 'translateY(-1em)'},
  { transform: 'translateY(0em)'}],
  { duration: 700,
  iterations: Infinity,
  direction: 'alternate',
  delay: 250
  });  

var c = document.querySelector('.c');
var animation = c.animate([
   { transform: 'translateY(-1.2em)'},
   { transform: 'translateY(-0.2em)'}],
   { duration: 700, 
   iterations: Infinity,
   direction: 'alternate',
   delay: 500
  });
.container_animation {
  position:absolute;
  left:45%;
  top: 30%;
  height: 400px;
  width:400px;
}


.a, .b, .c {
  postition:absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 4em;
  border-radius: 50%;
  margin-right:0%;
  padding: 10px;
  top:20px;
  left:25%;
}


/* Loading CSS */


.body {
	color: #333;
}
.progressbar{
  height: 26px;
  position: absolute;
  left: 25%;
  top: 110px;;
  width: 300px;
  background: rgba(150, 0, 0, 0.5);
  border-radius: 10px;
  margin: -20px 0 0 -100px;
  padding: 2px;
}
.loading{
  transition: all 500ms ease;
  height: 20px;
  width: calc(100% - 10px);
  border-radius: 8px;
  background: #474747;
  position: absolute;
  margin: 3px;
  display: inline-block;
  animation: load 15s ease infinite;
}
.load{
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
}

@keyframes load{
  0%{
    width: 2%;
  }
  10%{
    width: 10%;
  }
} 

https://codepen.io/unicorn01/pen/ayNwzb/

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials 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: Multistep Login Formular

multisteplogin

Tutorial: Multistep Login Formular

Autor: Ilja Melnik

Einleitung

Bei dieser Prüfungsleistung handelt es sich um eine konzeptionelle Erstellung eines Multistep Formulars mit funktionalen Animationen. Für die Umsetzung wurden ausschließlich Html-5, Css3 und Javascript (JQuery) verwendet.

Die Grundidee ist ein Formular mit visuellem Feedback und einer inhaltlichen Strukturierung.

Dies wird primär mit drei funktionalen Animationen umgesetzt:

  1. Einer Progressbar, die sich direkt über dem Formular befindet und den Fortschritt visualisiert.
  2. Einer Strukturierung in 4 Formulareinheiten (Slides), die mit 2 Navigationsbuttons bedient werden und an die Progressbar geknüpft sind. Die Übergänge der einzelnen Slides sind zusätzlich animiert, um die Bedienung intuitiver zu gestalten.
  3. Einem Shake-Feedback bei nicht Ausfüllen von benötigten Feldern (im Beispiel nur das Username Feld).

Die Progressbar:

Zunächst wurde in Html ein Grundgerüst für die Progressbar erstellt und das erste <li> Element mit der class=”active” markiert. Diese Klasse wird später mithilfe von Javascript an die weiteren <li> Elemente weitergegeben um den gewünschten Fortschritt zu visualisieren.

Grundgerüst für die Progressbar
Grundgerüst für die Progressbar

Anschließend wird mit Css die visuelle Struktur eines Balkens erstellt, der mithilfe der :before und :after Selektoren die einzelnen Punkte verbindet. Zusätzlich wird ein counter erstellt, der eine Nummerierung durchführt. Zuletzt wird das “first-child” der :before Selektoren (also das erste Verbindungselement) ausgeblendet, um die gewünschte Struktur zu erhalten. Es würde sonst links überstehen, z.b. ist das Blau gefärbte Verbindungsstück in der unteren Abbildung tatsächlich der :before Element des zweiten Punktes <li>).

Code des Balkens
Fortschrittsbalken

 

 

 

 

 

 

 

 

 

 

Die Sliderstruktur:

In Html wird nun die Grundstruktur für die verschiedenen Slider geschaffen, indem jeweils pro Slide ein <fieldset> Element geschaffen wird. Anschließend werden den <fieldset> Elementen die <input> Elemente, die aus Formelementen wie text, password, email, tel und dem Submitelement Button bestehen untergeordnet.

Grundstruktur der verschiedenen Slider

Nachdem die einzelnen Slider in Css visuell angepasst wurden, ist vor allem ein Schritt interessant: Momentan befinden sich noch alle Slides, bzw. <fieldset> Elemente untereinander, wir blenden also alle außer dem ersten zunächst aus. Dies ist mit einer Zeile Code möglich, da die Html Struktur hierarchisch so aufgebaut ist, dass die <fieldset> Elemente direkt dem <form> Element mit der id #formwrapper untergeordnet sind.

Nun werden im JQuery Teil zunächst die Variablen definiert, die uns die Übergangsanimation ermöglichen: Die Fieldsets, um richtig iterieren zu können, die Attribute, die wir verändern um eine Animation zu erschaffen und der Animationszustand selbst, mit dem wir bei wiederholtem Knopfdruck Überschneidungen verhindern können.

Der Übergang läuft wie folgt ab:

Mit dem next_fs index übergeben wir den active Status auf der Progressbar. Dann beginnen wir das momentane Fieldset zu verstecken, während das nächste angezeigt wird. Das momentane Fieldset wird transparenter, da die opacity auf 0 geht, zusätzlich wird es auf 80% Größte herunterskaliert. Gleichzeitig wird das nächste Fieldset von rechts eingeschoben, während dessen opacity auf 1 hochgeht.

Dieser Vorgang findet innerhalb eines click Events beim drücken des ‘Next’ Button statt, ein Ablauf feuert auch bei der Interaktion mit dem ‘Previous’ Button. Dabei sind dann die Animationsrichtungen angepasst, außerdem werden die entsprechenden active Klassen auf der Progressbar wieder entfernt.

Das Shake-Feedback:

Bei dem Shake-Feedback in diesem Beispiel handelt es sich um eine kurze links-rechts Bewegung des Inputs, wenn der ‘Next’ Button gedrückt wird, während ein benötigtes Feld noch nicht ausgefüllt wurde (in diesem Fall nur bei dem ersten Slider und dem ‘Username’ Input Feld). Hierfür erstellen wir zunächst eine .error Klasse im Css, die eine Animation beinhaltet und noch keinem Html Element zugewiesen wird. Zusätzlich erstellen wir einen zugehörigen Keyframe at-rule und definieren hier die links-rechts Bewegung mithilfe der 0-100% Skala.

Als muss mit Javascript sichergestellt werden, dass diese Klasse allen leeren Input Elementen hinzugefügt wird, die sich im aktuellen Fieldset befinden, während der ‘Next’ Button gedrückt wird (In diesem Beispiel selektieren wir statisch die id ‘#username’). Anschließend erstellen wir einen Timer, der diese Klasse nach 2 Sekunden wieder löscht, damit diese Interaktion nochmal stattfinden kann (In diesem Beispiel selektieren wir statisch die id ‘#username’).

Weitere Features:

Ein weiteres Feature, was nicht unbedingt den funktionalen Animationen zugehört ist die Erkennung des Inputs ins Username Feld und die Übergabe an das Titel Feld des folgenden Fieldsets. Hierbei ist zu beachten, dass das Titel Feld beim feuern der Buttons mit der empty Funktion zurückgesetzt wird, um eine Überflutung von Worten zu vermeiden.

Zuletzt ist der ‘Done!’ Submit-Button zu erwähnen, dieser ist rein dekorativer Natur und hat absolut keine Funktion.

https://codepen.io/IM123/pen/zdrPqv

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials 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: Informativer OnePager für Austauschstudenten

Onepager

Tutorial: Informativer OnePager für Austauschstudenten

Autor: Cagla Bacaksiz

Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit amerikanischen Austauschstudenten an unserer Fakultät war, ist mir diese Idee in den Sinn gekommen. Technischer Anspruch bestand darin, eine platzsparende Navigationsleiste und einen intuitiven Slider zu implementieren.

Erster Entwurf

Hierfür wurde zunächst eine Zeichnung erstellt, um zu visualisieren wie der One-Pager aussehen soll:

 

Sektion 1: Navigation & Parralax Effekt

 

Sektion 1: Slider

Der One-Pager sollte zunächst zwei Sektionen beinhalten (natürlich ist dies zukünftig erweiterbar), welche durch einfaches scrollen oder per Navigation erreichbar sein sollten. Die Navigation wird aufklappbar sein, um zum einen Platz zu sparen und zum Anderen eine funktionale Interaktion mit dem User zu bieten. Optisch soll das Logo der Hochschule mithilfe des Parallax-Effektes mit nach unten scrollen und die Überschrift beim Start der Seite einfliegen. Der Vor- und Zurückbutton soll hierbei beim drüberhovern vergrößert werden.

Technische Umsetzung:

Zur Implementierung der oben beschriebenen interaktiven Funktionen und Effekte wurde JavaScript verwendet und externe jQuery-Bibliotheken hinzugezogen. Zum Aufbau wurde eine HTML-Datei erstellt, die die Seitenstruktur enthält und eine CSS-Datei für Layout und Design.

Es bestehen insgesamt sechs JavaScript-Dateien: eine für die erste Sektion, eine für die Zweite, eine für das Menü (Navigation), eine für den Scroll-Effekt, und zwei jQuery-Bibliotheken (jQuery Foundation und Waypoints).

Hier einige Aspekte des Projektes beispielhaft dargelegt:

Scroll-Effekt

Zunächst wird mithilfe eines Eventhändlers in der section1.js Datei auf die scroll.js Datei zurückgegriffen, welche wiederum die jQuery-Bibliothek nutzt.

function parallax(){
    var layer_1 = document.getElementById('layer_1');
    var layer_2 = document.getElementById('layer_2');
    
    layer_1.style.top = -(window.pageYOffset / 3) + 'px'; 
    layer_2.style.top = -(window.pageYOffset / 3) + 'px';	
}
window.addEventListener("scroll", parallax, false);
// ##############################################################################################
// Smooth Scrolling 
// Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll 
// ##############################################################################################

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      // tried to delete the next function line to see what happens here but the scroll didn't work correct 
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // 1500 is the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1500, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
})

Fly-In-Text

Es wird hier ebenfalls auf jQuery zurückgegriffen.

// 	Text Animation 
// 	Source: https://www.youtube.com/watch?v=QZpZ1zRcR6c
$(function(){
    setTimeout(function(){
        $(".fly-in-text").removeClass("hidden");
        }, 400);
        
})();

// 	Explanation: 
// 	-	has a $-sign because we use jquery for the 'animation'  
// 	- 	remove class from fly-in-text 
// 	-	setTimeout() method calls a function or evaluates an expression after 400 milliseconds

Es entstand so eine für den User übersichtliche und ansprechende Seite, welche intuitiv bedienbar ist und durch die Navigation und den Ankerpunkten gut steuerbar ist ohne von eigentlich Inhalt der Seite abzulenken. Zukünftig könnte die Seite um weitere Sektionen erweitert werden. Beispielsweise könnte man eine Sektion mit Kontaktformular ergänzen, um es ausländischen Studenten zu ermöglichen, Fragen zu stellen.

One-Pager:

https://codepen.io/caglaba/pen/xLGQGd

Code des Projektes auf Codepen.io

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Videos rundum IM: Vormerkung Stabi Bremen

Vormerkung Stabi Bremen

Autoren: Tore Hoffmann und Jacob Radel

Arbeitsschritte in der Produktion:

Zur Ideenfindung zum Thema Vormerkung in einer Bibliothek wurde zunächst über Inhalte in einem Brainstorming nachgedacht. Die möglichen Tools wurden auf Ihre Animationsmöglichkeiten und allgemeine Tauglichkeit geprüft. Die Hintergrundmusik wurde aus Programm Powtoon verwendet. Um die Inhalte in das Video einfügen zu können, wurden das Programm Gimp verwendet. Damit wurden die benötigten Fotos aus dem Online-Katalog der Stadtbibliothek Bremen abgegriffen. Im Anschluss wurden die Fotos zugeschnitten und um sie später in die einzelnen Szenen einbauen zu können. Damit die Videosequenzen lebendiger werden und das Interesse beim Zuschauer geweckt wird, wurden passende Audioaufnahmen angefertig werden. Die Audioaufnahmen für der einzelnen Videosequenzen wurden in einem Musikprogramm bearbeitet. Bei der Bearbeitung der Aufnahmen wurden Hintergrundgeräusche entfernt und die Lautstärke angepasst. Nach Festlegung der Dauer wurden die einzelnen Szenen anhand des Storyboards erstellt. Danach folgte die Auswahl passender Animationen in Form von Charakteren und ihren Emotionen sowie Gegenständen. Übergänge wurden angepasst und End-und Anfangszenen erstellt, um ein stimmiges Gesamtbild zu schaffen. Im letzten Schritt wurden Ton- und Videoaufnahmen zusammengeführt und optimiert. Um Feedback zu erhalten, wurde der Film sowohl Fach- als auch Laienpublikum vorgeführt.

Werkzeuge:

Storyboard:

PDF: Storyboard

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

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

Tutorial: Dynamische Notendarstellung

Dynamische Notendarstellung

Dynamische Notendarstellung

Autor: Jana Avemarg

Design

Die Grundlage bildet eine auf HTML5 basierte Single-Page Website (1). Diese bietet den Vorteil, dass die Navigation ohne Verzögerung ausgeführt, da sich der Besucher immer der gleichen Seite befindet, ohne es zu merken.

Für eine schönere Darstellung wurde eine öffentlich verfügbare Schriftart von google (2) und ein Farbschema von coolors.co (3) benutzt.

Benutzung / Chart

Der interessante Teil befindet sich unter dem Menüpunkt ‘Chart’. Das erste Eingabefenster reagiert auf Eingaben und beinhaltet die, unter dem Diagramm angezeigten, Labels. Das zweite Eingabefenster reagiert ebenfalls auf Eingaben und beinhaltet die Anzahl der jeweiligen Note. Die Eingaben müssen mit einem Komma getrennt werden. Nachkommastellen werden mit einem Punkt abgebildet (z.B. 2,1.75,1.5,1.25,1). So ist es auch möglich verschiedene Notenschemata zu verwenden. Der Chart wurde mit Hilfe der Library Chart.js (4) erstellt. Unter dem Chart wird die auf zwei Nachkommastellen gerundete Durchschnittsnote angezeigt. Über die Checkbox ‘Barchart’ lässt sich die Darstellung des Charts zwischen Barchart und Linienchart schaltet.

Tutorial

Das Tutorial erklärt zuerst, wie ein statisches Diagramm angezeigt werden kann. Ab Kapitel 5. wird erklärt, wie sich das Diagramm dynamisch verändern lässt. In Kapitel 8. wird die Berechnung der Durchschnittsnote gezeigt. Abschließend ist das Resultat auf Codepen.io zusehen.

Die Darstellung eines statischen Diagramms gestaltet sich als relativ einfach.

1. Import der Chart.js-Library

<head>

< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" >

< /script >

</head>

2. Es muss ein <canvas>-Element erstellt werden

<canvas id="myChart"></canvas>

3. Chart mit 2D-Kontext des Canvas verbinden

Die Konfiguration (‘{configuration}’) wird im nächsten Schritt erläuert.

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {configuration...}

4. Konfiguration des Charts

Der Chart wird mit Hilfe eines javascript-Objektes konfiguriert. Dieses Objekt beinhaltet alle Information, die für die Darstellung notwendig sind.

Die einzelnen Konfigurationsmöglichkeiten werden in den Kommentaren erläutert.

{
   type: 'bar', //Zeigt die Daten in einem Balkendiagramm an
   data: { //Datenobjekt
    labels: ["6", "5", "4", "3", "2", "1"], //Beschriftung der Y-Achse
    datasets: [   //Liste von Daten, da mehrere pro Chart angezeigt werden können.
     {
       label: 'Notenverteilung',  //Überschrift
       data: [0, 2, 3, 5, 8, 5],  //Dateneingabe: Anzahl des jeweiligen Labels (z.B. Note '6' = 0)
       backgroundColor: 'rgba(255, 99, 132, 0.2)', //Hintergrundfarbe der Balen (Listen sind möglich für verschiedene Farben)
       borderColor: 'rgba(255,99,132,1)', //Farbe der Umrandung (auch hier sind Listen möglich)
       borderWidth: 1 //Weite der Umrandung
     }
    ]
   }
}

Bis jetzt haben wir einen statischen Chart, der die vorkonfigurierten Labels (“6″,”5″,”4″,”3″,”2″,”1”) und die dazugehörige Verteilung (0,2,3,5,8,5) anzeigt.

5. Reagieren auf Benutzereingaben

Zuerst erstellen wir ganz normale HTML-Textareas. Eins für die Labels und eins für die Anzahl der Noten. Wir definieren das Event ‘onkeyup’, das ausgeführt wird, sobald eine Taste in der entsprechenden Textarea losgelassen wird. Das Event soll den Aufruf der javascript-Funktion ‘zeicheneGraph()’ ausloesen. Diese Methode wird im folgendem Punkt erläutert.

<h3>Eingabe<h3>

<p>Labels</p>

<textarea id ="labelInput"rows="4" cols="50" onkeyup="zeichneGraph()">1,2,3,4,5,6</textarea>

<p>Noten</p>

<textarea id ="notenInput"rows="4" cols="50" onkeyup="zeichneGraph()">0,2,3,5,8,5</textarea>

6. Manipulation der Chart-Daten

Wie zuvor erklärt, wird die zeichneGraph()-Funktion bei jeder Eingabe ausgelöst. Nun wird beschrieben, wie die Eingaben in den Chart gelangen.

Zuerst muss die Eingabe in ein Format gebracht werden, wo mit der Chart arbeiten kann. Das sind in diesem Fall Listen von Labels und Daten.

Vorbedingung: Die Informationen liegen komma-getrennt vor, z.B. 1, 2, 3,….

6.1 Zugriff auf die Eingabefelder

Auf das Eingabefeld wird mit jQuery zugegriffen und dessen Wert ausgelesen:

$('#notenInput').val()
6.2 Eingabe in eine Liste konvertieren

Der Befehl split(‘,’) zerlegt die Eingabe an der Stelle des Kommas und liefert so eine Liste von Werten, z.B. [1,2,3,…].

var noten = $('#notenInput').val().split(',');
6.3 Zuweisung der Liste in den Chart

Diese Liste muss jetzt nur noch dem Objektes unseres Charts zugewiesen werden.

In der Konfiguration kann man erkennen das die Labels in dem Objekt data liegen. Der Zugriff erfolgt so auf myChart.data.labels.

myChart.data.labels = labels;

Die Daten liegen in dem dataset-Objekt, welches wiederum auch in dem Objekt data liegt. Das dataset-Objekt ist eine Liste, da mehrere Graphen in einem Chart angezeigt werden können. Wir haben nur einen Graphen definiert und die Daten befinden sich daher an der ersten Stelle in der Liste. Der Zugriff erfolgt daher auf die Stelle 0.

myChart.data.datasets[0].data = noten;
6.4 Chart neu zeichnen

Damit der Chart neu gezeichnet wird, muss auf dem Objekt die update()-Methode aufgerufen werden.

myChart.update();
6.5 Gesamte Methode

Abschließend noch mal die Methode in ihrer Gesamtheit.

function zeichneGraph(){

      var noten = $('#notenInput').val().split(',');
      var labels = $('#labelInput').val().split(',');
      myChart.data.datasets[0].data = noten;
      myChart.data.labels = labels;

      myChart.update();
}

7. Änderung der Chart-Art

Die Änderung der Chart-Art (z.B. Linien- und Balken-Diagramm) gestaltet sich ähnlich, wie die Änderung der angezeigten Werte aus Kapitel 6.

7.1 Erstellung einer Checkbox

Es wird eine HTML-Checkbox verwendet, deren Änderungs-Event (onchange) mit einer javascript-Funktion verbunden ist. Das Attribut checked definiert, dass die Checkbox direkt gesetzt ist.

<label>

<input type="checkbox" onchange='klickAufBarchart(this);' checked/> Barchart

</label>
7.2 Prüfen des Checkbox-Zustandes

Eine Checkbox kann gesetzt bzw. checked sein, oder nicht.

Wir übergeben unserer Funktion die Checkbox selber über den Parameter mit (this).

In unserer javascript-Funktion können wir auf das Attribut checked zugreifen und prüfen, ob die Checkbox gesetzt ist oder nicht.

function klickAufBarchart(cb) {
   if(cb.checked){
       aendereGraph('bar');
   }
   else{
       aendereGraph('line');
   }

}
7.3 Änderung der Art des Charts ausführen

Das Object myChart muss komplett gelöscht und neu erstellt werden.

Dazu wird zuerst die destroy-Funktion aufgerufen und danach ein neues Chart-Objekt mit der übergebenen art-Objekt (z.B. ‘line‘ oder ‘bar‘) neu erstellt.

Die Daten werden auf den Ursprung-Zustand gesetzt, aber abschließend, durch den Aufruf der zeichneGraph()-Funktion mit den Werten der Eingabefelder aktualisiert.

function aendereGraph(art){

myChart.destroy();

myChart = new Chart(ctx, {
   type: art,
   data: chartData,
});

zeichneGraph();
}

8. Berechnung der Durchschnittsnote

Die Durchschnittsnote wird bei jeder Eingabe neu berechnet. Es bietet sich daher an, die Funktion, die wir schon für die Änderung des Diagramms (zeichneGraph()) erstellt haben, zu erweitern.

Ein Status-Text soll hier mögliche falsche Eingaben abfangen und eine Fehlermeldung ausgeben.

8.1 Überprüfung der gleichen Längen

Um eine Berechnung machen zu können, müssen die Labels die gleiche Anzahl wie die Noten haben.

if(noten.length==labels.length){ ... }
8.2 Berechnung der Zwischenwerte

Es muss berechnet werden, wie viele Noten in Summe eingetragen worden sind um die Anzahl von Klausuren zu erhalten.

Und es muss eine Summe errechnet werden, welche die Klausuren nach ihren Noten gewichtet z.B. (6*0)+(5*2)+(4*5)+….

Das passiert in einer Schleife, bei der über die Liste der Noten und Labels gelaufen wird.

Nachdem beide Summen errechnet worden sind, wird der Durchschnitt errechnet, indem die gewichtete Summe durch die Anzahl der Klausuren geteilt wird.

Abschließend wird der Durchschnitt auf zwei Stellen gerundet mit Math.round(durchschnitt * 100) / 100).

var notenSum=0;
var notenAnzahl=0;
var breakup = false;
for(var i=0; i< noten.length;i++){
    //https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
    //zu Zahlen konvertieren
    var label= parseFloat(labels[i]);
    var note = parseFloat(noten[i]);
    //https://www.w3schools.com/jsref/jsref_isnan.asp
    //Falls keine Zahl => Berechnung abbrechen und Fehlermeldung anzeigen
    if(isNaN(label) || isNaN(note)){

        breakup = true;
        break;
    }else{
        notenAnzahl = notenAnzahl + note;
        notenSum = notenSum + (note*label);
    }
}
if(breakup){
    $('#status').text('Bitte nur komma-getrennte Zahlen eingeben (z.B. 1,3,2).');
        $('#durchschnitt').text('');
}
else{
    var durchschnitt = notenSum/notenAnzahl;
    //https://stackoverflow.com/questions/9453421/how-to-round-float-numbers-in-javascript
    $('#durchschnitt').text('Durchschnittsnote: '+ Math.round(durchschnitt * 100) / 100);
}

9. Resultat:

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

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

Videos rundum IM: Die Funktionen der CampusCard

Funktion Campus Card

Die Funktionen der CampusCard (für Studierende der HSH)

Autoren: Sarah Büchting und Antje Pellowski

Kurzbeschreibung

In unserem Video beschreiben wir  die Funktionen der Campuscard. Wir stellen Martina, eine Studierende der Hochschule Hannover vor und erklären anhand dieses Beispiels die Funktionen der CampusCard. Die Informationen dazu entnahmen wir der Homepage der Hochschule (https://www.hs-hannover.de/it/services/stud/fhhcard).

Konzept

Unser Video hat eine Laufzeit von 1:01 Minuten (exklusive des Wasserzeichens der gewählten Plattform Moovly). Wir haben uns für diese kurze Laufzeit entschieden, weil eine Laufzeit von mehreren Minuten eine abschreckende Wirkung hat und die Nutzer das Video tendenziell seltener anschauen. Das Video ist so aufgebaut, dass man es, durch integrierte Textbausteine, sowohl mit als auch ohne Ton anschauen kann und die vermittelten Inhalte versteht. Die einzelnen Funktionen werden nacheinander erklärt, mit Bildern visualisiert und am Ende nochmal zusammen aufgelistet.

Technik

Wir haben uns bei der Herstellung unseres Videos für die digitale Legetechnik entschieden. Diese bietet einige Vorteile gegenüber der Hand-Legetechnik. Eine gleichmäßige Ausleuchtung und die Synchronität von Bewegtbild und Sprechertext können für das gesamte Video gewährleistet werden und nachträgliche Anpassungen sind schneller und präziser umsetzbar.

Besonderheiten

Besonderheiten in Bezug auf die Technik:

Moovly Studio muss nicht heruntergeladen und installiert werden, da es sich um eine webbasierte Software handelt. Desweiteren bietet Moovly Angehörigen von Bildungsinstitutionen, wie z.B. Lehrern oder auch Studierenden, einen kostenfreie Nutzung an.

Software

Nachdem wir uns einen Überblick über in Frage kommende Software verschafft haben, haben wir uns für die cloudbasierte Software Moovly Studio entschieden, da diese einen großen Funktionsumfang bietet und eine umfangreiche Bibliothek mit Bildern in verschiedenen Stilrichtungen bereithält. Zusätzlich besteht die Möglichkeit eigene Inhalte in Bild- und Audioform hochzuladen und in das Video zu integrieren. Außerdem haben uns die Benutzeroberfläche und die Bedienung von Moovly zugesagt, da sie einfach und schnell zu verstehen sind und man sich in kurzer Zeit in die Bedienung einarbeiten kann.

Die Bilder und Icons im Video stammen überwiegend aus der eigenen Bibliothek von Moovly. Die CampusCard ist ein Scan unserer eigenen Ausweise, die wir mit Hilfe von Photoshop verfremdet haben. Die musikalische Untermalung ist frei verfügbaren über die Homepage  Terrasound zu bekommen. Die Textpassagen wurden mit der in Moovly integrierten Audiobearbeitung eingesprochen, geschnitten und in das Video eingefügt.

PDF: Storyboard

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

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

Videos rundum IM: Einführung Bachelor Informationsmanagement

Einführung Bachelor Informationsmanagement

Einführung Bachelor Informationsmanagement

Autoren: Anthony Stevenson und Florian Lindmüller

Idee

Unsere Idee war ein Animiertes Video zum Thema Informationsmanagement an der Hochschule Hannover zu gestalten. Dabei sollten alle vermittelnden Kern-Kompetenzen transparent gemacht, sowie ein keiner Ausblick in eine mögliche berufliche Zukunft gegeben werden.

Zielsetzung

Die Zielsetzung beinhaltete darauf aufbauend ein fertiges Vorstellungsvideo, dass man vor Einführungsveranstaltungen, Messen oder auf der Hochschulwebsite abspielen bzw. veröffentlichen könnte. Diese Zielsetzung haben wir erreicht.

Arbeitsweg

Wir begannen mit der Erstellung eines Konzepts. Hierfür war es wichtig eine Hauptfigur zu erstellen, welches wir auf Grundlage eines gesehenen Designs in abgewandelter Form nachgestellt hatten. Dann erarbeiteten wir uns die benötigten Informationen, die als Material im Video verwendet wurden. Schließlich stellten wir Visualisierungen der Informationen dar und fügten alles zusammen. Für die Audio-Spur schrieben wir einen Text und gaben ihm jemand mit einer angenehmen Stimme zum Vorlesen.

Verwendete Techniken

Für die Visualisierung der Hauptfigur „Bill“ haben wir Zeichnungen eingescannt, mit Photoshop bearbeitet und in PowerPoint eingefügt. Dazu kamen dann in PowerPoint erstellte Diagramme und Grafiken, die auch noch mit Photoshop bearbeitet wurden, damit sich diese besser in Adobe Premiere Pro verarbeiten ließen. Diese platzierten wir auf jeder Folie so genau, dass wir die Folien hintereinander abspielen konnten und nicht um modulieren mussten. Danach haben wir uns ein Soundtrack aus dem Internet heruntergeladen, welches als Hintergrundmusik abgespielt wird. Auf Bild und Hintergrundmusik folgte dann die Audio-Spur, die über ein Mikrofon aufgenommen wurde. Das Zusammensetzen von Audio und Videospur wurde dann mittels Adobe Premiere Pro realisiert.

PDF: Storyboard

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

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