Kategorie: Tutorial

Veröffentlicht am

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Funktionale Animation und Infografik

Eine Infografik als funktionale Animation

erstellt im Rahmen des Moduls “Medienintegration” im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Frieda Josi

 Tutorial:

Einsatzzweck und Einordnung in Animationsart

Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit Hilfe der Animation wird das visuelle Erfassen der einzelnen Branchen, in denen Informationsmanager arbeiten, erleichtert. Die Daten, die für diese Infografik verwendet wurden, stammen aus der Absolventenbefragung 2016 von Prof. Dr. Jutta Bertram. Diese Infografik ist ein Kreisdiagramm und besteht aus Micro-Interaktionen wie z.B. Click, Hover und Mouse out und verschiedenen Übergängen (Transitions).

Verwendete Bibliotheken, APIs, weitere Ressourcen

HTML5
HTML5-Seite, die die benötigten Container und Texte (Beschriftungen der Branchen und der Prozentsätze) für die Infografik, bereitstellt.

CSS3
In der CSS3 Datei sind die animierten Übergänge: transition-delay, transform-origin, transition: opacity, transform:translate(), transition-duration, .button:hover für die Infografik und für den „Animation“- Button angelegt. Ebenso die Formatierungen für  HTML-Seite, Texte, Button und Infografik.

JavaScript
In der JavaScript-Datei befinden sich die Funktionen für das Ausblenden der Infografik: .addEventListener(’click’, function(e) …) und das Einblenden der Infografik: setTimeout(function()).

Verwendete Vorlagen

Animationsvorlage
Die Vorlage zu dieser funktionalen Animation wurde von Joshua Dorenkamp auf codepen.io zur Verfügung gestellt. Für das Kreisdiagramm hat er acht Teile verwendet (siehe Abb.). Link zum Original

Original von Joshua Dorenkamp

Buttonvorlage
Die Gestaltung des Buttons „Animation“”wurde mit einer Vorlage von w3schools.com erstellt. Link zum Original.

Vorgenommene Anpassungen an der Grafik

Zu den acht vorhandenen Teilen des Kreisdiagrammes wurden noch weitere acht hinzugefügt.

Für jeden der 16 Teile in der CSS-Datei:

1. Je eine farbige Fläche und ihre Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

2. Je eine Größe einer farbigen Fläche:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

3. Je eine Linie zu ihrer farbigen Fläche hin:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

4. Das Erscheinen der farbigen Fläche:
Wird unter “Änderungen der Grafik im Detail/Drehung” aufgezeigt.

5. Das Erscheinen der Linie:
[class^=”line-“].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

6. Das Erscheinen der Beschriftung:
[class^=”text-“].text-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

7. Die Formatierung der Beschriftung:
.text-lbl  {
font-size: 11px;}

Für jeden der 16 Teile in der HTML-Datei:

Je eine Prozentzahl (z.B. 20,50%) und je eine Beschriftung (z.B.Wissenschaftliche Bibliothek).
 <svg viewbox=”0 0 650 500″>
<circle class=”outline” r=”100″ cx=”210″ cy=”200″ />

<circle class=”pie-1″ r=”100″ cx=”210″ cy=”200″ />
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

In der JavaScript-Datei wurden keine Änderungen vorgenommen.

Vorgenommene Anpassungen am Button

1. Formatierung des Buttons
.button {
background-color: white;
border: 2px solid #555555;
color: black;
padding: 7px 23px;
text-align: center;
text-decoration: none
display: inline-block;
font-size: 13px;
font-weight: bold;
margin: 0% 10%;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;}

2. Formatierung des Buttons bei Mouse over
.button:hover {
background-color: #555555;
color: white;}

Änderungen an der Grafik im Detail

Für die Fläche eines einzelnen Teils aus dem Kreisdiagramm:

Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

Größe:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

Vergrößerung bei Mouse over:
[class^=”pie”]:hover
{stroke-width: 70;
border-radius: 4px;}

Position:
Die Position wird bestimmt durch die Angabe der Drehung in der Kreislinie. Siehe oben unter „Drehung“ (stroke-dashoffset: 488; /*Abstand des dasharray Musters*/).

Für die Linie einer Zuordnung von Beschriftung und farbiger Fläche im Kreisdiagramm:

Länge, Drehung und Position in der HTML-Datei:
<line class=”line-1″ x1=”165″ y1=”100″ x2=”144″ y2=”65″ />

Beschriftung und Prozentangabe im Kreisdiagramm:

Position in der HTML-Datei:
<text class=”text-1 text-head” x=”110″ y=”40″>20,50%</text>
<text class=”text-1 text-lbl” x=”100″ y=”55″>Wissenschaftliche Bibliothek</text>

JavaScript-Animation

Die JavaScript-Animationen wurden, aus dem Original von Joshua Dorenkamp, unverändert übernommen.

Animation, die beim Mausklick auf den Button „Animation“ ausgelöst wird:
var btn = document.getElementById(‘toggle’); /* Button aus Zeile 14 index.html */
var wrap = document.getElementById(‘wrap’); /* Kontainer für die Tortengrafik */
btn.addEventListener(‘click’, function(e) /* Ereignisobjekt für Button “Animation” und einem einfachen Klick darauf.*/
{
wrap.className = “”; /*Ausblenden der Tortengrafik, bei Klick auf Button “Animation” */
setTimeout(function() {
wrap.className = “animated”;
},3000);
});
setTimeout(function()  /*Einblenden der Tortengrafik, beim Laden der Datei und als zweites Ereignis nach dem Klick auf Button “Animation” */
{
wrap.className = “animated”;
},1000);

Quelldateien Zip

Tutorial als PDF

Informationsmanager auf dem Arbeitsmarkt

Link zur Animation: hier

Zum Codepen

Veröffentlicht am

Tutorial: Scroll Percent Display with liquid Animation

Tutorial: Scroll Percent Display with liquid Animation

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.

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

<svg id> erstellt die Anzeige. Die ID ist wieder die Zuweisung für das Script.

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

 

Veröffentlicht am

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

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.

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

Veröffentlicht am

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

Ein Akkordeonmenü für die Fakultät III, Hochschule Hannover, Expo Plaza

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.

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:

  1. Mittels JQuerys .hide() Befehl werden zunächst alle Inhalte ausgeblendet
  2. Allen Reitern wird der Status „active“ durch „removeClass(„active“)“ entfernt, damit wirklich nur der angeklickte Reiter am Ende „active“ ist
  3. Der zum angeklickten Reiter passende Inhalt wird mittels seiner individuellen ID angesprochen und durch den .show() Befehl sichtbar gemacht.
  4. 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.

Veröffentlicht am

Tutorial: Ein responsives Menü mit jQuery für die HsH

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.

Ein responsives Menü mit jQuery für die HsH

Autor: Jan Jäger

Planung

Ziel des Projekts war ein kleines Menü für eine Homepage zu schaffen. Dieses sollte die folgende Funktionalität haben:

  • Ausklappen des Menüs
  • Hervorhebung der Menüpunkte
  • Änderung des Inhalts
  • responsives Design

Umsetzung

Ausklappen des Menüs

Das Menü ist standardmäßig versteckt. Eingeblendet wird es durch eine Schaltfläche. Hierfür wurde das aktuell populäre Hamburger-Menu-Icon (≡) verwendet.[1] Zusätzlich lässt sich das Menü auf diese auch wieder ausblenden. Ansonsten wird das Menü ausgeblendet, sobald ein Menüpunkt angeklickt wird.

Hervorhebung der Menüpunkte

Als beispielhafte Menüpunkte wurden die fünf Fakultäten der Hochschule Hannover gewählt. Zusätzlich ist das ‘Dach’ durch einen Klick auf den Schriftzug ‘Hochschule Hannover University of Applied Sciences and Arts’ im Banner (wieder) erreichbar.

Die Hervorhebung der Menüpunkte geschieht bei mouseover. Ohne Mauszeiger, also beispielsweise auf Smartphones, ist dieser Effekt daher nicht zu sehen. Für die Hervorhebung selbst wurde die Opazität verwendet.[2] Hierdurch kann ein Element trüb dargestellt werden.

Die Menüpunkte sind standardmäßig auf eine Opazität von 0.5 gestellt und werden bei mouseover auf 1.0 gesetzt und bei mouseout wieder auf 0.5 zurückgesetzt. Für das Banner sind die Werte genau umgekehrt gewählt.

Zusätzlich zur Opazität wurde überlegt auch noch die Größe der Menüpunkte zu ändern. Dies wirkte jedoch zu unruhig.

$("#fak3").mouseover(function() {
    $("#fak3").animate({
        padding: '10px',
        margin: '0px',
        opacity: '1.0'
    }, 500);
});

Änderung des Inhalts

Der Inhalt wird durch click auf einen Menüpunkt bzw. auf den oben erwähnten Schriftzug im Banner geändert. Geändert wird dann der Inhalt im content.[3] Gleichzeitig wird das Menü wieder zugeklappt.

Zusätzlich zum Inhalt wird auch die Farbe des Banners geändert, um dem Nutzer zu veranschaulichen auf welcher Seite er sich aktuell befindet. (Hierzu mehr bei der Erläuterung zu den verwendeten Bibliotheken.)

Zu Anfang sollte auch der Inhaltsbereich beim Wechsel des Inhalts aus- und wieder eingeblendet werden. Dies wirkte jedoch insgesamt zu unruhig, da parallel bereits das Menü eingeklappt wird. Zudem hätte noch eine Möglichkeit gefunden werden müssen, eine Pause für den Wechsel des Inhalts einzufügen. Bei der getesteten Variante wurde der Inhalt bereits gewechselt, bevor der Inhaltsbereich komplett ausgeblendet wurde.

$("#content").slideUp(500);
// Code zum Wechseln des Inhalts
$("#content").slideDown(500);

Responsives Design

Die ganze Seite sowie speziell das Menü verhalten sich bei unterschiedlicher Seitenbreite quasi responsiv. Während dies für das Banner sowie den Inhaltsbereich noch vergleichsweise einfach war, weil diese direkt in Abhängigkeit der Elternelemente formatiert werden können, wurde sich vor allem auf das Menü konzentriert.

Üblich ist aktuell die Verwendung von Media Queries, also beispielsweise

@media (min-width: 900px) {
    /* anzupassende Elemente */
}

@media (min-width: 600px) {
    /* anzupassende Elemente */
}

@media (min-width: 300px) {
    /* anzupassende Elemente */
}

Dabei hätte in diesen Media Queries u.a. die Höhe und Breite der Menüpunkte in Abhängigkeit von der Seitenbreite gesetzt werden müssen. Dies hätte jedoch dazu geführt, dass das Menü nicht immer – wie gewünscht – die volle zur Verfügung stehende Breite einnimmt. Deswegen wurde bewusst der eher klassische Weg über JavaScript gewählt. Dies hatte dann auch noch den kleinen Nebeneffekt, dass das Menü durch die Neuberechnung bei Größenänderungen des Browserfensters quasi dynamisch seine Größe ändert. Im eigentlichen Sinne ist dies natürlich keine Animation.

Ursprünglich sollte auch noch die Schriftgröße dynamisch angepasst werden, damit die vollständige Beschriftung zu sehen ist.

if(pageWidth <= 480){
    $(".menu").css("fontSize", (pageWidth / 40) + "px");
}
else{
    $(".menu").css("fontSize", "15px");
}

Dies führte jedoch dazu, dass die Schrift im Menü im Vergleich zur Schrift in allen anderen Bereichen ziemlich klein gesetzt werden musste. Stattdessen wurde deswegen der Text mittels CSS ‘abgeschnitten’.

overflow: hidden;

Code

HTML + CSS

Es wurde ein eigenes HTML-Grundgerüst geschrieben und dieses mit CSS angepasst.

JS

Es wurden zwei Bibliotheken verwendet und zusätzlich eigener Code geschrieben.

Bibliotheken

Zur Umsetzung des Projekts wurden die folgenden Bibliotheken verwendet:

Ursprünglich sollte nur jQuery verwendet werden. Die Farbänderung im Banner war damit jedoch nur abrupt möglich. Gewünscht war jedoch ein fließender Übergang, also von einer Farben zur nächsten.

Dies hätte zwar auch mit @keyframes in CSS erreicht werden können. Dies hätte jedoch zu einer Vermischung von Methoden geführt, da die @keyframes noch mittels JavaScript zum Banner hinzugefügt werden müssen. Außerdem wäre dies sehr umfangreich gewesen, da in Abhängigkeit der Anzahl der verwendeten Farben im Banner eine Vielzahl @keyframes benötigt worden wäre. Genauer gesagt hätte es bei Verwendung von n Farben n * (n - 1) = n2 - n @keyframes benötigt, also bei den hier verwendeten 6 Farben 6 * (6 - 1) = 6 * 5 = 30 @keyframes.[4] Zusätzlich hätte es auch noch eine Menge JavaScript-Code benötigt, um die @keyframes zum Banner hinzuzufügen. Es muss ja für die Auswahl des richtigen @keyframes sowohl die Ausgangs- als auch die gewünschte Zielfarbe bestimmt werden müssen. Zusätzlich müssen die @keyframes so eingestellt werden, dass die Animation am Ende automatisch stoppt und nicht immer wieder von vorne beginnt. Dazu bedarf es dem folgenden CSS-Code:

animation-fill-mode: forwards;

Eine eventuelle Erweiterung des Menüs wäre dadurch nur mit sehr viel Aufwand möglich. Insgesamt wurde diese Variante als zu umfangreich angesehen. Nach Rücksprache mit Frau Steinberg wurde dann letztlich auch noch jQuery UI eingebunden, das die gewünschte Funktionalität mitbringt. Hier bedarf es nur einer Zeile JavaScript-Code pro Zielfarbe, unabhängig von der Ausgangsfarbe.[5] Um beispielsweise die Farbe des Banners in Richtung der Fakultät I zu ändern, muss nur die folgende Zeile JavaScript-Code eingefügt werden.

$("#header").animate({backgroundColor: "rgb(30,190,235)",}, 1000 );

Eigener Code

Am Ende wurde auch noch eigener JavaScript-Code geschrieben, um das Menü automatisch in abhängig von der Seitenbreite anzupassen. Dazu wurde zunächst eine globale Variable definiert, in die die Seitenbreite geschrieben wird. Mit dieser wird dann die selbst geschriebene Funktion menuWidth() aufgerufen, die die gewünschte Höhe und Breite der Elemente des Menüs berechnet und in diese schreibt. Bei Änderungen an der Seitenbreite, z.B. durch Größenänderung des Browserfensters, würde dies jedoch bestehen bleiben. Deswegen wurde zusätzlich ein EventListener definiert, der bei Änderungen der Seitenbreite diese abfragt und die Funktion menuWidth() erneut aufruft.

Ergebnis

See the Pen menu for HsH by Jan Jäger (@jaegerjan) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

[1] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon.

[2] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Opazit%C3%A4t.

[3] Um dies zu simulieren wird nur die Überschrift mit der ID greetings geändert. Prinzipiell müsste stattdessen Inhalt nachgeladen und in div-Element mit der ID content geschrieben werden.

[4] Es liegt quadratisches Wachstum vor.

[5] Es liegt lineares Wachstum vor.

Veröffentlicht am

Tutorial: WWW-Techniken 1 – Wie bekomme ich meine Website ins Internet?

WebLab HsH

Bevor Sie eine Website online stellen können, müssen Sie ein paar Vorbereitungen treffen:

  1. Beantragen Sie einen eigenen Webspace beim Webhosting-Team der Hochschule Hannover.
    beachten Sie hierbei, dass der dort gewählte Benutzername der erste Teil Ihres Domainnamens wird. Fassen Sie sich also möglichst kurz. Der Webspace ist nötig, damit Ihre Internetseite später rundum die Uhr öffentlich über einen Webserver zugänglich ist.
  2. Um Zugang zu Ihrem Webspace zu bekommen, benötigen Sie einen SFTP-Client (Secure File Transfer Protocol-Client). Im weitern Tutorial benutzen wir dafür FileZilla.
  3. Möchten Sie neue Inhalte außerhalb der Hochschule auf Ihren Webspace laden, benötigen Sie einen Zugang zum Hochschulnetz über VPN (Virtual Privat Network), bevor Sie sich mit FileZilla zu Ihrem Hochschule-Webspace verbinden können. Wie  eine VPN-Verbindung mittels eines VPN-Clients eingerichtet und hergestellt wird, wird hier ausführlich erklärt. Wenn Sie sich bereits im Netzwerk der Hochschule befinden, ist keine VPN-Verbindung nötig.
Tutorial WWW1
VPN-Verbindung zum Hochschulnetzwerk herstellen.
Tutorial WWW1
VPN-Verbindung zum Hochschulnetz erfolgreich hergestellt.

 

Öffnen Sie FileZilla und trage Sie in die Felder: Server, Benutzername, Passwort und Port wie folgt ein.

 

Tutorial WWW1

 

Server:  sftp://Name_deines_Webspaces.wp.hs-hannover.de
Benutzername: dein_Benutzername
Passwort: dein_Passwort
Port: 22

 

Tutorial WWW1

 

Falls ein Fenster mit dem Titel “Unbekannter Server-Schlüssel” erscheint, muss dieses mit “ok” beantwortet werden. Danach verbindet FileZilla Sie mit ihrem Webspace.

 

Tutorial WWW1

 

Auf der linken Seite befinden sich nun die Verzeichnisse Ihres Computers. Rechts sehen Sie das Verzeichnis des Webspaces. Um Inhalte auf Ihrer Seite erscheinen zu lassen, klicken Sie auf den Ordner docs.

 

Tutorial WWW1 Tutorial WWW1

 

In dem Verzeichnis docs befinden sich die Dateien Ihrer Internetseite. Anfangs sollte allerdings nur die index.html vorhanden sein. Die Dokumente Ihrer Seite ziehen Sie jetzt in den Ordner docs auf dem Webspace.

 

Tutorial WWW1

Wurden die Dateien auf den Server geladen, sollte die Seite unter der Domain des Webspaces sichtbar sein. HTML und PHP-Dateien, die index.html bzw. index.php heißen, werden automatisch bei Verzeichnisaufruf angezeigt. Hiervon abweichende Dateinamen müssen in der Adresszeile (URL) mit angegeben werden, um sie direkt aufzurufen.

Viel Erfolg!