Interaktive Medien – Seite 4

29. Oktober 201815. Juni 2023

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:

Einer Progressbar, die sich direkt über dem Formular befindet und den Fortschritt visualisiert.
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.
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.

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

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.

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.

22. Oktober 201815. Juni 2023

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:

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

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

8. Oktober 201815. Juni 2023

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

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

18. Juni 201815. Juni 2023

Tutorial: Login Kalender

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

Login Kalender

Autoren: Melis Rufaioglu und Diana Hamasur

Konzept:

Das Konzept wurde anhand der alltäglichen Aktivität eines digitalen Kalenders erstellt. Da immer mehr Nutzer zu der digitalen Variante greifen, weil diese einfacher zu bedienen ist.

Die Funktionen des digitalen Kalenders bestehen aus einem Sign in und aus einem Logout Button. Auf der Startseite sieht der Benutzer die Felder „Benutzer- und Passwort“. Diese haben jedoch in der Demo keine besondere Funktion, jedoch sind sie im alltäglichen Leben als Zugangsfelder gedacht. Die Felder können aber müssen in der Demo nicht ausgefüllt werden. Als Test kann etwas eingegeben werden, ob es funktioniert.

Aus Stilgründen steht unter dem Sign in Button noch ein Hinweis auf eine Registrierung, welche jedoch keine weitere Funktion hat. Wird auf den Sign in Button geklickt, erscheint ein sich drehender Kreis mit Punkten. Daraufhin wird die Maske kurz in der Farbe des Buttons erscheinen und führt dann zu dem eigentlichen Kalender.

Bei dem Öffnen des Kalenders scheint kurz das Benutzerbild hervor, die Linien der Lupe kreisen einmal um die Lupe herum und unten rechts erscheint der Log-out Button. Auf dieser Seite wird ein Benutzerbild mit einer Notifikation angezeigt. Da drüber befindet sich ein kurzer Satz, der beliebig sein kann.

Oben links befindet sich ein „Menü“ Icon, rechts eine Lupe. Diese beiden haben keine weiteren Funktionen. Unter dem Benutzerbild stehen der aktuelle Monat und eine Kalenderwoche. Anschließend werden die entsprechenden To-Do´s angezeigt. Wenn der Log-out Button gedrückt wird, springt dieser in die Mitte des Fensters und übernimmt kurz das ganze Feld in seiner eigenen Farbe.

Anschließend wird wieder auf die Startseite zurückgeführt und es erscheint ein Haken, dieser steht für ein erfolgreiches Logout.

Technische Umsetzung

Der digitale Kalender mit einem Sign in und Logout System wurde mithilfe von Elementen aus HTML5, CSS3 und Javascript entwickelt. Darüber hinaus wurden Librarys von JQuery oder CSS bezüglich der Funktion und der visuellen Darstellung als Hilfe genommen. Das JQuery ist eingebunden und die ready Funktion ist befüllt. Diese Funktion ist dafür da, dass der Inhalt erst geladen wird, wenn die Seite vollständig geladen ist.

Die Plattformen wie „Codepen“, „Selfhtml“ und „W3Schools“ haben an der Entwicklung und Konzeption sowie der Inspiration weitergeholfen.

Die Icons „Benutzer“ und „Passwort“ wurden gestaltet und in die richtige Position gebracht. Der Button „Sign in“ wurde ebenfalls positioniert und animiert. Das ganze wird mit der ripple Funktion ausgeführt.

Um ein besseres technisches Verständnis dafür zu entwickeln, sind die hinterlegten Kommentare im Quellcode hilfreich.

Quellcode und das Konzept

Quellen:

24. März 201815. Juni 2023

Tutorial: Radiales Menü mit JavaScript

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

Technisches Konzept für ein radiales Menü

Autor: Julian Hundertmark

Als Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.

Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.

Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.

Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.

Link zu Codepen : https://codepen.io/hundertj/pen/YxwmpJ

23. März 201815. Juni 2023

Tutorial: Ein mobiles Hamburger Menü

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

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten „HOME“, „ABOUT“, „BLOG“ und „CONTACT“ sind zu sehen. Rechts neben dem Menüpunkt „ABOUT“ ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML

<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>

CSS

.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}

JavaScript

$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben 0deg und -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

22. März 201815. Juni 2023

Tutorial: Registrierungs- und Loginformular mit jQuery

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

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt, welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine „echte“ Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.

17. November 201715. Juni 2023

Tutorial: Scroll Percent Display with liquid Animation

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

Konzept und Quellcode mit Erläuterung von Scroll Percent Display with liquid Animation

Author: Lars Heinrich und Neele Lange

Einleitung

Mal ehrlich!? Schon mal auf einer Webseite gewesen und ihr musstet scrollen und scrollen und scrollen? Dabei habt ihr euch gefragt, wie weit denn noch? Wann kommt das Ende?

Um dieses kleine Problem mit einem Gimmick zu lösen, haben wir dieses Tutorial geschrieben.

Anmerkung: Diese Idee ist nicht in Stein gemeißelt. Sie kann beliebig erweitert, verbessert oder auch verändert werden.

Notwendige Dateien

Zuerst benötigt man die Grunddateien jeder Homepage. Dafür legt man sich folgende Dateien an.

index.html
style.css
script.js

zusätzlich

liquid.js

Erstellt diese Dateien einfach mit einem Editor eurer Wahl und speichert sie in einem separaten Ordner.

Libraries

Die Libraries beinhalten alle wichtigen Information, um die Liquid Animation herzustellen. Jquery und D3.js, sowie die liquid.js werden wir ganz einfach via API hinzufügen. Das hat den Vorteil, dass man immer die aktuellste Version hat.

HTML Datei vorbereiten

In der HTML Datei wird nun folgender Code eingefügt:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>
      </head>
    <body>
      </body>
</html>

Nun ist das Grundgerüst der HTML Datei erstellt.

<html> Ist dabei der äußerste Gerüst und schließt alles andere ein

<head> ist der Kopf und umfasst neben dem Titel der Seite auch alle Scripte, die Stylesheets und Metadaten.

<body> ist das was der Nutzer am Ende sehen wird. Hier kommen alle Informationen hinein, welche später zu sehen sein sollen.

</html></head></body> schließen die jeweiligen Felder.

Verbindungen herstellen

Da wir eine Verbindung zu den jeweiligen Dateien und API´s benötigen, fügen wir folgendes im Headbereich ein:

<script src="script.js" type="text/javascript"></script>

Das verbindet die index.html Datei mit eurer script.js Datei

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

<script src="liquid.js" type="text/javascript"></script>

Dieser Abschnitt stellt die Verbindung zu den notwendigen API´s her

<link rel="stylesheet" type="text/css" href="style.css">

und zu guter Letzt, ist auch die style.css Datei verbunden.

<body>

Die HTML Datei ist nun fast fertig. Zum Schluß wollen wir ja etwas sehen und müssen im Body noch unsere Prozent Anzeige hinzufügen.

Ihr vergibt euren <body> noch eine ID um später dem Script seine Aufgabe zuzuweisen zu können.

<body id="body">

Anschließend erstellt ihr einen DIV Container:

<div  class="box" >
    <svg id="fillgauge1" width="300%" height="300" ></svg>
</div>

Der <div> Container benötigt ein class, welches vom Stylesheet benötigt. *optional

Es ist auch ohne Div Container möglich, aber für die Übersicht praktischer.

Nach dem </div> muss man nur noch einmal das Script einbinden

<script src="script.js" type="text/javascript"></script>

Das bewirkt, dass das Script hier geladen wird. Ansonsten würde keine Anzeige entstehen.

Die HTML Datei ist fertig.

Komplette index.html Datei zur Übersicht:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>

<script src="script.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

       

        <link rel="stylesheet" type="text/css" href=„style.css">
</head>

  <body id=„body">

     <div class="box" >
           <svg id="fillgauge1" width="300%" height="300" ></svg>
     </div>

     <script src="script.js" type="text/javascript"></script>
    
  </body> 
</html>

Anmerkung: Die „id“ und „class“ Bezeichnungen könnt ihr auch beliebig anders benennen, man muss nur darauf achten, diese auch im Script und im Stylesheet anzupassen.

Script Datei mit Inhalt füllen

Jetzt wird gecodet. Aber alles sehr einfach.

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

Der Code erstellt das eigentliche Liquid-Display.

var x erstellt eine Variable und erzeugt die erste Zahl, welche beim Laden angezeigt werden soll. Da man immer oben bei einer Homepage beginnt, soll hier die Zahl 0 angezeigt werden, denn schließlich haben wir ja noch gar nicht gescrollt.

var config0 lädt die folgenden Einstellungen, welche auch im Hauptscript liegen, die wir auch für unsere Webseite anpassen möchten. „ACHTUNG: niemals das Hauptscript* ändern, da sonst das ganze Script zerstört werden kann“.*Muss dann als Datei vorliegen.

var gauge1 erstellte die Animation. Darauf ist zu Achten, dass die Klammer folgende Werte enthällt.

(„ID“, Anfangswert, Konfiguration)

Scrollscript

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

Im Grunde ist dieser Code Abschnitt das Herzstück des Ganzen. Ohne diesen Abschnitt hätten wir keine Scrollfunktion.

Hier könnte man auch eine andere Funktion implementieren, wenn man die Liquid Animation nicht verwenden möchte.

Beim Scrollen aktivieren wir diesen Code, da wir zuvor dem Body die ID „body“ hinzugefügt haben. Beim Scrollen lösen wir die Function gauge1.update aus, die auf die NewValue2 Function zugreift.

Um beim Scrollen einen Wert zu erhalten benötigen wir diesen Codeabschnitt:

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
}

Die Function NewValue2 erfasst die Höhe der Seite und berechnet den Abstand der Seite mit dem TOP der Seite. Var scrollPercent berechnet den Wert in Prozent.

Die untere if – else Schleife ist ein Hilfsmittel um immer nur maximal 100% angezeigt zu bekommen.

Achtung: Hier kann es zu Fehlern kommen, wenn eure Seite kürzer oder länger ist, als die Tutorial Seite. Ggf. muss man hier den Code anpassen.

Die Script Datei ist nun fertig erstellt.

Komplette script.js Datei zur Übersicht:

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
        
        }

Stylen nicht vergessen

Ohne Style geht es nicht. Alle Einstellungen sind veränderbar und auf die eigenen Wünsche und Homepage leicht anzupassen. Also Mut zum ausprobieren.

Komplette style.css Datei zur Übersicht:

body {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 200%;
}

.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }

.box {
    	position: fixed;
    margin: 0 auto;
    	margin-top: 20%;
    width:300;
    	height: 300;
    color: "black";
    text-align: center;
}

Das Tutorial ist in der Funktion nun abgeschlossen.

GESCHAFFT!!!

Beispiel Dateien zum Download

Beispiel:

Beispiel ansehen

13. November 201715. Juni 2023

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

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

Interaktive Führung durch den Studiengang Informationsmanagement

Autor: Lena Meyer

Der Studiengang Informationsmanagement ist einzigartig und wird derzeit nur an der Hochschule Hannover gelehrt. Damit sich Studieninteressierte einen ersten Eindruck verschaffen können, wird die nachfolgende Website über eine Slideshow die Location der Fakultät kurz darstellen und über die interaktive Timeline einen Überblick zu den inhaltlichen Studienthemen geben.

Konzept

Die Website wurde zum Zweck der inhaltlichen und zugleich der visuellen Darstellung der Studieninhalte eines Informationsmanagers entwickelt. Sie soll den Nutzer interaktiv mithilfe von diversen funktionalen Animationselementen durch den Studiengang Informationsmanagement führen.

Aus Stilgründen wird die Website mit dem einfliegenden Text „Welcome“ gestartet. Dieser hat für den Nutzer jedoch keine weitere Funktion bzw. Bedeutung. Er dient ausschließlich der Gestaltung eines innovativen Layouts.

Die interaktive Navigation soll den Nutzer durch den Studienablauf eines Informationsmanagers führen. Über die farbliche Hervorhebung der Navigation-Tabs erhält der Nutzer die sofortige Rückmeldung an welchem Navigationspunkt er sich aktuell befindet.

Hinter dem Navigationspunkt „Location“ verbirgt sich eine Slideshow. Dadurch erhält der Studieninteressierte einen ersten Eindruck von dem Gebäude und dem dazugehörigen Campus der Hochschule Hannover. Aktuell befinden sich in der Slideshow drei Beispielbilder, diese können nach Belieben ausgetauscht oder ergänzt werden. Allerdings ist dies nur über den Quellcode möglich. Über die Pfeile Links und Rechts kann der Nutzer die Bilder anklicken. Dies gelingt zusätzlich durch das Klicken auf einer der drei im unteren Teil befindlichen Rechtecke. Über eine farbliche Hervorhebung der Rechtecke wird dem Nutzer jeweils signalisiert, welches Bild er zurzeit ausgewählt hat.

Der zweite Navigationspunkt ist die Timeline. Dahinter sollen sich die Studieninhalte innerhalb der insgesamt sieben Semester befinden. Dargestellt wird ein Zeitstrahl, der mit unterschiedlichen Daten versehen ist. Sobald der Nutzer auf eines der Daten klickt, erhält er eine kurze inhaltliche Darstellung der Themen des Semesters. Der Zeitstrahl wurde in einem Responsive Design entwickelt, über die Buttons links und rechts, lässt sich der Zeitstrahl dementsprechend verschieben. Abhängig des angeklickten Datums färbt sich zusätzlich der Zeitstrahl in der Farbe orange, dadurch wird dem Nutzer signalisiert, welches Datum er aktuell ausgewählt hat.

Der Navigationspunkt „Map“ beinhaltet eine Metrik, die aus drei unterschiedlichen Boxen besteht. Die Boxen sollen den Nutzer zum Klicken animieren. Nach dem Klick erhält der Nutzer eine Zusatzinformation, die ausschließlich beim Klick ersichtlich ist. Über das „X“, welches sich oben rechts befindet, kann die Box wieder geschlossen werden.

Der letzte Navigationspunkt ist das Impressum. Allerdings erreicht der Nutzer das Impressum nicht direkt durch das Klicken des Tabs. Er wird dazu animiert, auf den sich im unteren Bereich befindlichen „Scroll-Down Button“ zu klicken. Durch einen Anker gelangt er anschließend zum Inhalt des Impressums. Durch das Bouncen des Buttons, soll der Nutzer auf den Scroll-Down Button aufmerksam werden.

Technische Umsetzung

Die Website wurde mithilfe von Elementen aus HTML 5, CSS 3 und Javascript entwickelt. Zusätzlich wurden diverse Librarys von jquery oder css bezüglich der Funktion und der visuellen Darstellung hinzugezogen. Um welche Libraries es sich dabei handelt wird unter dem Punkt „Quellen“ aufgezeigt.

Plattformen, wie „W3schools“ oder „Codepen“ haben maßgeblich an der Entwicklung der Website mitgewirkt. Zum einen galten sie als Inspiration und zum anderen als technische Unterstützung bei der Umsetzung. Um welche Code Beispiele es sich dabei jeweils handelt, wird ebenfalls in den Quellen aufgeführt.

Zum vollständigen Nachvollzug des Aufbaus und der technischen Gestaltung der Website, ist der dazugehörige Quellcode mit zahlreichen Kommentaren ausgestattet. Dadurch kann ein noch besseres technisches Verständnis erzielt werden.

Die Website ist unter dem folgenden Link zu erreichen : Informationsmanagement.

Der dazugehörige Quellcode mitsamt des Konzepts und Screenshots ist unter dem folgenden Link zu erreichen: Informationsmanagement Quellcode.

Quellen

Libraries:

https://fonts.googleapis.com/css?family=Lato:400,700

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

https://fonts.googleapis.com/css?family=Montserrat:400,700

https://code.jquery.com/jquery-3.2.1.min.js

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js

Codepen:

http://codepen.io/hellaFont/pen/CdgAv

Stackoverflow:

http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript

9. November 201715. Juni 2023

Tutorial: Ein Akkordeonmenü für die Fakultät III

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

Ein Akkordeonmenü für die Fakultät III

Autoren: Svenja Hamacher und Alina Finger

Umsetzung: hier

Quellcode+Bild: multimediasysII

Konzept

Die Aufgabenstellung zur Entwicklung und Implementierung einer funktionalen Web Animation hat als Vorgabe, dass es keine rein dekorative Animation ohne Funktion sein durfte. Weiterhin sollte nach Möglichkeit das Thema Studium/ Informationsmanagement aufgegriffen werden.

Vor dem Hintergrund der Funktionalität fiel unsere Wahl recht schnell auf eine Abwandlung eines Akkordeonmenüs. Der Vorteil dieser Art von Menü ist, dass man viel Inhalt auf wenig Raum darstellen kann und somit detaillierte Inhalte zu unterschiedlichsten Themen abbildbar werden. Gerade Kontaktdetails haben dabei oft nur einen geringen Umfang, weswegen bei Fakultäten oft verschiedene Kontaktinformationen auf eine Seite geschrieben werden. Um also die Kontaktinformationen der Fakultät 3 übersichtlicher und schöner zu gestalten, entschlossen wir uns eine einfache Navigation mit JavaScript zu bauen, die den platzsparenden Gedanken des Akkordeonmenüs aufgreift. Derzeit gibt es mehrere Seiten, auf welchen verschiedene Kontakt- und Weginformationen zur Fakultät 3 und ihren Abteilungen „Design und Medien“ und „Information und Kommunikation“ zu finden sind.

Aus der bestehenden Webseite der Fakultät 3 konnten wir als wesentliche Kontaktinformationen den Anfahrtsweg, den Campusplan, die Raumverwaltung und Ausstellungsfläche, die Kontaktinformationen von DM und IK, sowie das Impressum entnehmen. Diese Informationen haben wir zum Großteil übernommen und umstrukturiert. Nur beim Anfahrtsweg haben wir die bestehenden Informationen komplett ersetzt. Für den Anfahrtsweg entschieden wir uns zum einen dazu, Google Maps direkt einzubinden, da so die Adresse, ein Grundriss des Expo Plazas und nahegelegene Bus- und Bahnhaltestellen ersichtlich werden. Zum anderen haben wir einen Button eingefügt, welcher direkt zur Google Maps Navigation weiterleitet und den Expo Plaza 12 als Zieladresse einstellt.

Die verschiedenen Inhalte sollen dabei durch Javascript aus- und eingeblendet werden, je nachdem welcher Reiter aktiviert wird. Durch diese Animation wird das ursprüngliche Ziel des Platzersparnisses erreicht. Als zusätzliche Animation werden die Bilder der Menüreiter animiert. Die Symbole verlassen dabei den Reiter und „fliegen“ in eine der Inhaltsboxen, wodurch der aktive Reiter zusätzlich zur farblichen Hervorhebung gekennzeichnet wird und der Benutzer sich besser orientieren kann. Als Grundlage für den Code wurde der Pen gewählt, welcher unter https://codepen.io/rss/pen/itjqC zu finden ist.

How To

Die Animation besteht aus drei Dateien. Im Folgenden wird beleuchtet, wie die HTML-, CSS- und JavaScript-Datei zusammenspielen, um die Animationen zu erzeugen.

In der HTML-Datei werden die Informationsinhalte gespeichert. Dabei wird jeder Menüreiter zunächst in einem Divcontainer gespeichert, welcher sowohl eine ID, als auch einen weiteren Divcontainer mit der Klasse des zugehörigen Icons enthält. Die verfügbaren Icons hängen dabei von dem Iconpaket ab, welches in der CSS Datei eingebunden wird und können daher beliebig verändert oder auch selbst gestaltet werden. Die ID des Divcontainers wird später in der JavaScript-Datei wichtig, da über diese ID die Animation, also das Ein- und Ausblenden der Inhalte, funktioniert. Dazu ist es eben falls wichtig, dass die Inhalte, welche beim aktivierten Reiter gezeigt werden sollen, von Divcontainer mit individueller ID umschlossen sind.

Standardmäßig ist in unserer Animation der erste Reiter, welcher die Anfahrt via Google Maps enthält, als „active“ gekennzeichnet. Bei einem Klick auf einen anderen Reiter werden folgende Prozesse in Bewegung gesetzt:

Mittels JQuerys .hide() Befehl werden zunächst alle Inhalte ausgeblendet
Allen Reitern wird der Status „active“ durch „removeClass(„active“)“ entfernt, damit wirklich nur der angeklickte Reiter am Ende „active“ ist
Der zum angeklickten Reiter passende Inhalt wird mittels seiner individuellen ID angesprochen und durch den .show() Befehl sichtbar gemacht.
Dem angeklickten Reiter wird durch .addClass(„active“) die Klasse „active“ hinzugefügt, wodurch die farbliche hervorhebung und etwaige Symbolanimationen aktiviert werden.

Diese vier Schritte sollten so schnell ablaufen, dass der Nutzer nur einen flüssigen Wechsel wahrnimmt. Durch diese vier Befehle wird verhindert, dass mehr als ein individueller Div-Container zurzeit angezeigt wird. Ohne JavaScript würden also alle Inhalte einfach untereinander in einzelnen Boxen angezeigt werden.

Die Animation der Icons im Reiter wird dabei nur indirekt durch JavaScript beeinflusst. Standardmäßig erhalten die Icons ihre Positionseigenschaften von der Klasse contactype. Sobald mittels JavaScript jedoch die Klasse „active“ an den jeweiligen Div vergeben wird, werden mittels CSS neue Positionseigenschaften für das Icon gültig. Durch Anpassen des jeweiligen CSS-Containers kann also bestimmt werden, wohin sich das Icon beim Anklicken bewegt, oder ob es (wie beim Reiter Anfahrt) einfach im Reiter stehen bleibt. So können auch, wie bei der Sprechblase des Reiters „Kontakt DM“, Drehungen und andere Transformationen des Symbols vorgenommen werden, was für den Benutzer interessant ist.