Schlagwort: OpenSource

Veröffentlicht am

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]

Veröffentlicht am

WebLab macht nITo: Nutzerzentrierte IT-KompetenzOptimierung

nITo WebLab Hsh

Seit diesem Sommersemester (März 20) ist das WebLab an einem neuen Forschungsprojekt mit dem Titel „nITo: Nutzerzentrierte IT-Kompetenzoptimierung„ beteiligt

nITo befasst sich mit IT-Kompetenz-Exploration in Hannover.

Aktuell ist eine Bachelorarbeit zu nITo bereits abgeschlossen und vier weitere laufen. Falls Sie auch noch ein Thema suchen, werden Sie vielleicht hier fündig.

Weitere Einzelheiten wie Forschungsziel und -schwerpunkte finden Sie hier.

Veröffentlicht am

SneakPeak Bachelor: IT-Kompetenzen analysieren und klassifizieren

WebLab HsH: Bachelorabiet von Matthias Olbrisch, 2019

In seiner Bachelorarbeit mit dem Titel “Analyse und Klassifikation der hannoverschen IT Kompetenzen in einer variablen Datenbasis“ schreibt Matthias Olbrisch (2019) in seinem Abstrakt:

„Die allgemeine Digitalisierung und besonders die IT-Branche in Hannover, stellen Arbeitgeber*innen vor große Herausforderungen. Berufsbezeichnungen im IT-Sektor zeichnen sich im Gegensatz zu klassischen Berufsfeldern nicht dadurch aus, dass sie vereinheitlicht sind. Unterschiedlichste Berufsbezeichnungen verlangen oftmals identische Kompetenzen. Die Kompetenzen und Fähigkeiten der Arbeitnehmer*innen stehen ebenso immer mehr im Fokus der Arbeitgeber*innen, wie die Bereitschaft der permanenten Weiterbildung.

Zielgebend der vorliegenden Abschlussarbeit ist eine Datenbasis zu liefern, die den Anspruch hat, die bereits beschriebenen Herausforderungen zu analysieren und zu klassifizieren. Zunächst ist daher eine Klassifikation, der auf dem hannoverschen Jobmarkt gesuchten IT-Kompetenzen, zu erstellen. Vorbereitend wird eine Marktanalyse angefertigt, die sowohl Jobsuchmaschinen auf ihre Kompetenzorientierung als auch IT-Kompetenzklassifikationen untersucht.

Die erstellte Klassifikation bildet anschließend die Grundlage für das Kompetenzmatching zwischen Klassifikation und den Kompetenzen, die hannoversche IT-Studierende erlernen, um zu verdeutlichen, in welchen Kompetenzen Weiterbildungsbedarf besteht. Die entstandene Datenbasis wird in einer MySQL Datenbank präsentiert, um eine möglichst flexible Verwendung und Weiterentwicklung des Datenbestands zu ermöglichen.“

Die Bachelorarbeit von Matthias ist Teil unseres Forschungsprojekts nITo (Nutzerzentrierte IT-Kompetenzoptimierung). Sie wurde vorbildlich über SerWisS veröffentlicht und ist als Volltext zu finden unter:

https://doi.org/10.25968/opus-1562

Veröffentlicht am

BestOf Bachelor: Webbasierte Programmierplattformen für Kinder im Vergleich

WebLab HsH: Bachelorarbeit von Sarah Büchting, 2019

In der Bachelorarbeit von Sarah Büchting (2019) mit dem Titel „Webbasierte Programmierplattformen für Kinder im Vergleich“ wird thematisiert, wie Coding zu Zwecken der sich im Umbruch befindenden MINT-Bildung eingesetzt werden kann und welche Kompetenzen durch das Erlernen von Programmierfähigkeiten gefördert werden.

Darüber hinaus wird ein Bezug zur Informatik als Herkunftswissenschaft des Coding hergestellt und die Relevanz einer frühzeitigen Aneignung von Programmierfähigkeiten in einer digitalen Gesellschaft beleuchtet.

Eine Analyse der webbasierten Programmierplattformen Open Roberta Lab, Scratch, Sprite Lab von Code.org und TurtleCoder, die zur Vermittlung von Programmierfähigkeiten bei Kindern genutzt werden können, gibt Aufschluss darüber, ob sich die benannten Programmierplattformen auch für den Einsatz in außerschulischen Bildungseinrichtungen, wie etwa öffentlichen Bibliotheken, eignen.

Die Bachelorarbeit von Sarah wurde vorbildlich über SerWisS veröffentlicht und ist als Volltext zu finden unter:

https://doi.org/10.25968/opus-1326

Veröffentlicht am

Tutorial: Wetter Szenarien

Wetter Szenarien

Tutorial: Wetter Szenarien

Autoren: Fabian Krampe und Michel Kühne

Das Konzept

Das Konzept hinter dem Projekt sah vor, eine Animation zu schaffen, welche dem Nutzer alle möglichen Wetter Szenarien zeigt. Die Animation wird hierbei im Hintergrund eines einfachen Preloaders geladen. Der programmierte Button ermöglicht es außerdem, die Animation zu „verstecken“ oder diese wieder anzeigen zu lassen. Unten seht Ihr das fertige Projekt.

Das Tutorial

Fangen wir mit dem „Head“ des HTML-Dokuments an. Hierbei sind die standardisierten HTML Tags zu beachten, wie z.B. den DOCTYPE anzugeben. Außerdem ist es wichtig, im „Head“ auf die externe JavaScript Datei zu verlinken. Auf diese Verlinkung und die damit verbundenen Möglichkeiten gehe ich unten genauer ein.

Im Folgenden der „Head“ des HTML-Dokuments.

<!DOCTYPE html> 
<html> 
<head> 
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js </a> 
<meta charset="UTF-8" /> <link rel="stylesheet" href="css.css"> 
<a href="http://js.js">http://js.js</a>
 </head>

Nachdem wir nun den „Head“ erfolgreich programmiert haben, folgt auch schon der erste JavaScript Funktionsaufruf. Hierbei wird beim Laden des „Body“ die Funktion „myFunction“ aufgerufen. Auf die Funktion an sich wird später genauer eingegangen. Das Ganze sieht wie folgt aus:

<body onload="myFunction()" style="margin:0;">

Der nächste HTML Block zeigt zunächst einen DIV Aufruf. Dabei wird der DIV durch die oben beschriebene Funktion aufgerufen und erzeugt somit den Preloader. Anschließend werden die Button erzeugt, welche dafür zuständig sind, ob die Animation dargestellt wird oder bei entsprechendem Klick wieder verschwindet. Um dies zu realisieren benötigen wir einen DIV, welcher beim Klicken auf den entsprechenden Button entweder einen leeren DIV über die Animation legt oder diesen wieder verschwinden lässt. Das wird realisiert durch den DIV mit der ID „hidden“. In der letzten Zeile wird schlussendlich die eigentliche Animation aufgerufen.

<div id="loader"></div> 
<button id = "hide">Anzeigen</button> 
<button id = "show">Löschen</button> 
<div id="hidden"> <div style="display:none;" id="myDiv" class="animate-bottom">

Die Animation braucht definierte DIVs um die gewünschten Wetter Szenarien darzustellen. Diese DIVs werden im folgenden Abschnitt realisiert und definiert. Dabei ist es sinnvoll, dass nicht jeder Animationsschritt einzeln definiert wird. So kann z.B. bei der Darstellung der Wolke auf eine einmalige Definition dieser zurückgegriffen werden. Dadurch minimiert man den Quellcode und optimiert somit die Ladegeschwindigkeit. Nun der HTML-Code:

<div class="wrapper">
  <div class="sun"></div>
  <div class="cloud">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_s">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_vs">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="haze"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="thunder"></div>
  <div class="rain">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="sleet">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>

Im letzten Abschnitt des HTML-Codes erzeugen wir einen ebenso wichtigen DIV, damit die Nutzer erklärt bekommen, um welche Wetterlage es sich bei der Animation handelt. Dazu erzeugen wir einen DIV mit dem Namen „text“. Wie der Name bereits sagt, handelt es sich hierbei um den DIV, der nun die Unterschriften zur passenden Animation zeigt. Anschließend schließen wir sämtliche DIVs und beenden das HTML-Dokument mit dem entsprechenden Tag. Das könnte wie folgt aussehen:

 <div class="text">
    <ul>
      <li>Überwiegend sonnig</li>
      <li>Teilweise sonnig</li>
      <li>Teilweise bewölkt</li>
      <li>Überwiegend bewölkt</li>
      <li>Bewölkt</li>
      <li>Nebelig</li>
      <li>Stürmisch</li>
      <li>Regnerisch</li>
      <li>Schnee</li>
    </ul>
  </div>
</div>
</div></div>



</body>
</html>

CSS

Kommen wir nun zum oben eingebundenen CSS-Code. Dieser ist leider zu lang um ihn hier einzeln zu erläutern. Deshalb werde ich nur grob umschreiben, was die wichtigsten CSS-Funktionen sind. Der gesamte Code kann oben in der CodePen-Fassung eingesehen und nachvollzogen werden.
Der DIV mit dem Namen „loader“ definiert den PreLoader. Wichtig ist hierbei der sogenannte „Z-Index“. Dieser gibt an, in welcher Reihenfolge die DIVs auf den Ebenen verteilt sind. Mit „Z-Index 1“ ist der Preloader auf der ersten Ebene untergebracht und steht somit vor allen anderen Ebenen. Dies ist wichtig, damit der Preloader die eigentlich Seite während des Ladens überlagert.
Anschließend werden die einzelnen Animationen näher definiert. Hierbei ist ebenfalls der „Z-Index“ sehr wichtig um die einzelnen Animationen überlagern zu können. Andere Befehle definieren die Farbe, Position und so weiter.
Ebenfalls sehr wichtig, sind die „animation“ Befehle. Damit werden die einzelnen DIVs angesprochen und so animiert, dass es zu einem fließenden Übergang zwischen den einzelnen Wetteranimationen kommt.
Zum Schluss werden die einzelnen Keyframes definiert. Hierbei wird besonderer Wert auf die „Durchsichtigkeit“ der einzelnen DIVs gelegt. So wird schlussendlich ein fließender Übergang mit einem „Slide-Effekt“ ermöglicht.
Wie oben bereits erwähnt, können all diese Funktionen innerhalb der CodePen Einbettung nachvollzogen und geändert werden.

Der JavaScript Teil

Kommen wir nun zum letzten Teil, dem Javascript-Code. Um die ganze Animation zu starten und die Button mit Funktionen zu versehen, starten wir mit dem ersten Teil der Animation. Und zwar dem Preloader. Hierzu wird eine Funktion beim Laden des „Body“ aufgerufen. Diese lädt eine neue Funktion namens „showPage“. Das erste was in der neuen Funktion aufgerufen wird, ist der DIV „loader“. Dieser wird laut der ersten Funktion drei Sekunden lang gezeigt. Nach diesen drei Sekunden wird laut „showPage“ ein anderer DIV aufgerufen und zwar der DIV mit dem Namen „myDiv“. Die beiden Funktionen sehen wie folgt aus:

 function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}

Zum Abschluss müssen noch die Buttons eine Funktion bekommen. Dazu sprechen wir die oben erzeugten Buttons mit „document“ an. Anschließend bestimmen wir Anhand der id die genaue Funktion der einzelnen Button. Wird z.B. der Button mit der id „show“ betätigt, wird der DIV „hidden“ aktiviert und überlagert laut CSS Definition die gesamte Seite. Es wird das Bild der „gelöschten“ Animation erzeugt. Das ganze kann per Klick auf den Button „hide“ wieder rückgängig gemacht werden, denn dieser lässt den DIV hidden wieder „verschwinden“. Das ganze kann wie folgt aussehen:

 $(document).ready(function(){
    $("#hide").click(function(){
        $("#hidden").hide();
    });
    $("#show").click(function(){
        $("#hidden").show();
    });
});

Ich hoffe wir konnten euch mit diesem Tutorial die Funktionsweise unseres Projektes nahelegen. Für Anregungen, Kritik oder Lob stehen wir euch immer zur Verfügung.

 

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.

Veröffentlicht am

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%;
  }
} 






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.

	


	





		

		
Veröffentlicht am 
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. 

  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. 

  3. Einem Shake-Feedback bei nicht Ausfüllen von benötigten Feldern (im Beispiel nur das Username Feld).
    4. 



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.




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.

	


	





		

		
Veröffentlicht am 
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:




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.

	


	





		

		
Veröffentlicht am 
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.