Commit ac51f305 authored by Adrian Jagusch's avatar Adrian Jagusch
Browse files

Mitglieder in Config-Datei ausgelagert

parent 16b5c4f5
......@@ -10,3 +10,53 @@ markdown: kramdown
# Outputting
permalink: /:categories/:title/
members:
-
name: Stephan A.
role: Autor
image: stephan_a.jpg
-
name: Martin B.
role: Autor
image: martin_b.jpg
-
name: Florian D.
role: Qualitätsbeauftragter
image: florian_d.jpg
-
name: Jan H.
role: Autor
image: jan_h.jpg
-
name: Dario I.
role: Außenminister
image: dario_i.jpg
-
name: Adrian J.
role: Webseitenbeauftragter
image: jannik_s.jpg
-
name: Jörn J.
role: Autor
image: joern_j.jpg
-
name: Hendrik K.
role: Autor
image: hendrik_k.jpg
-
name: Lennart K.
role: Autor
image: lennart_k.jpg
-
name: Wenke N.
role: Autorin
image: wenke_n.jpg
-
name: Jannik S.
role: Autor
image: jannik_s.jpg
-
name: Martin S.
role: Autor
image: martin_s.jpg
......@@ -4,7 +4,7 @@
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Kontakt aufnehmen</h2>
<hr class="primary">
<p>Wir sind ist am besten über den E-Mail-Verteiler zu erreichen:</p>
<p>Wir sind ist am besten über unseren E-Mail-Verteiler zu erreichen:</p>
</div>
</div>
<div class="col-lg-6 col-lg-offset-3 text-center">
......
<section class="no-padding" id="members">
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/jannik_s.jpg" class="img-responsive" alt="">
{% for member in site.members %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="portfolio-box">
<img src="img/members/{{ member.image }}" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
{{ member.role }}
</div>
<div class="project-name">
Jannik S.
{{ member.name }}
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/adrian_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Adrian J.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/wenke_n.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Wenke N.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/martin_b.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin B.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/martin_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin S.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/lennart_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Lennart K.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/joern_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jörn J.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/stephan_a.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Stephan A.
</div>
</div>
</div>
</a>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/florian_d.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Florian D.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/jan_h.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jan P. H.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/hendrik_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Hendrik K.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/dario_i.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Dario I.
</div>
</div>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<section class="no-padding" id="membersAlternative">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/jannik_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jannik Spieker
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/adrian_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Adrian Jagusch
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/wenke_n.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Wenke Namuth
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/martin_b.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin Bieder
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/martin_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin Sonntag
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/lennart_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Lennart Krühsel
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/joern_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jörn Jürgens
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/stephan_a.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Stephan Adolf
</div>
</div>
</div>
</a>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/florian_d.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Florian Decker
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/jan_h.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jan P. Hörding
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/hendrik_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Hendrik Kahlen
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/dario_i.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Dario Imsande
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
......@@ -9,7 +9,6 @@
{% include call-to-action.html %}
{% include services.html %}
{% include members.html %}
{% include membersAlternative.html %}
{% include aside.html %}
{% include contact.html %}
{% include footer.html %}
......
......@@ -5,9 +5,10 @@ subtitle: Es gibt viele Usability-Fettnäpfchen die vermieden werden sollten
category: usability
author: Hendrik Kahlen
---
Usability-Fehler findet man zahlreich auf beinahe jeder Webseite, mit größeren und kleineren Auswirkungen. Wir wollen in diesem Artikel bei der Veranschaulichung der wichtigsten Usability-Fehler unter anderem Fragen beantworten wie: „Warum ist der Usability-Fehler so schlimm?“, „Welche weiteren Auswirkungen hat dieser Fehler?“ und „Wie kann der Fehler vermieden werden?“. Ziel dabei ist es insgesamt ein klareres Verständnis für Usability-Fehler und deren Vermeidung zu schaffen, sodass Besucher Ihrer Seite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden.
### Falsches Desing
### Falsches Design
Eine der wohl am häufigsten gemachten Fehler ist der eines falschen Designs. Dieses muss nicht etwa schillernd, blinkend und/oder bunt sein, es reicht aus, wenn das gewählte Design nicht zum Content passt und damit den Besucher verwirrt. Als Besucher eines eines großen Unternehmens erwartet man schließlich auch ein schlichtes und seriöses design und kein "flippiges Start-up"-Design. Ist dies nicht so, sorgt dies für Verwirrung aufgrund des Kontrasts zu den Erwartungen. Ebenso wichtig ist es dabei, dass sich das gewählte Design über die gesamte Webseite erstreckt, ein Bruch auf Unterseiten verwirrt den Nutzer ebenfalls.<sup>1</sup>
Auch ist es möglich, dass Hintergründe und andere Designelemente so gewählt sind, dass Sie Informationsaufnahme stören. Ein Beispiel dafür sind Texte die kaum einen [Kontrast zum Hintergrund] bieten. Zu bemerken sei an dieser Stelle aber, dass es für gewisse Zwecke durchaus sinnvoll ist den Kontrast niedrig zu halten, z.B. wenn man die Aufmerksamkeit auf einen anderen Bereich legen möchte. Vergewissern Sie sich also, dass Sie ihre Schriftart, Schriftfarbe und den Hintergrund richtig gewählt haben.<sup>1</sup><sup>6</sup>
......
......@@ -6,14 +6,9 @@ category: konventionen
author: Lennart Krühsel
---
Usability spielt eine wichtige Rolle, wenn es darum geht, Besucher auf eine Webseite zu bekommen und diese auch zu halten. Deshalb sind über die Jahre Konventionen und Richtlinien bezüglich der Usability entstanden, deren Umsetzung von den Besuchern eine Webseite erwartet wird.
<br>
### Auswahl von Schrift und Design:
### Auswahl von Schrift und Design
Die richtige Schrift und das richtige Design, spielen eine große Rolle für die Benutzerfreundlichkeit und Barrierefreiheit einer Seite. Das Design sollte so gewählt sein, dass der relevante Inhalt der Webseite im Vordergrund steht. Überschriften sollten auf Webseiten deutlich hervorgehoben, zum Beispiel durch größere, unterstrichene oder fettgedruckte Buchstaben, da Überschriften dem Benutzer bei der Navigation helfen. <sup>3</sup>
......@@ -26,8 +21,6 @@ Im Allgemeinen gilt bei dem Design, weniger ist mehr, da eine Reizüberflutung b
### Ansprüche an die Navigation:
Für Benutzer ist es wichtig, sich schnell auf einer Seite zurechtzufinden, da er i.d.R. Keine Lust hat, sich lange mit der Navigation aufzuhalten. Falls dem Besucher eine Webseite nicht zusagt, kann er sich ganz einfach eine andere Webseite suchen, die ähnliche Inhalte hat.
Deshalb ist die Navigation von großer Wichtigkeit, auch hier gibt es einige Sachen, die von den Benutzern mehr oder weniger erwartet werden. Wichtig ist, dass dem Besucher jederzeit klar ist, wo er sich auf unserer Webseite befindet, dazu gibt es verschiedene Möglichkeiten, man kann zum Beispiel in der Navigationsleiste die gerade ausgewählte Seite hervorheben oder sog. Breadcrumbs
......@@ -50,22 +43,15 @@ Bei größeren Webseiten kann es schwer sein, eine Konsistenz zu erhalten, dabei
<br>
### Hilfestellungen:
### Hilfestellungen
Für den Fall, dass Besucher auf unserer Seite auf Probleme stoßen, bietet es sich an, bestimmte Hilfestellungen zur Verfügung zu stellen. Zum Einen wäre das ein FAQ (Frequently Asked Questions), welches häufig gestellte Fragen beantwortet und bereits einen großen Teil der aufkommenden Fragen oder Probleme löst. Eine weitere Hilfestellung wäre eine Hilfeseite, die die auf der Webseite verfügbaren Funktionen erklärt. Sollten auf der Webseite viele Fremdwörter vorkommen, bietet sich ein Glossar an, in dem die Wörter erklärt werden.<sup>2</sup><sup>3</sup>
<br>
### Weitere Usabilityaspekte:
### Weitere Usabilityaspekte
Ein mittlerweile sehr wichtiger Aspekt der Usability bildet die korrekte Darstellung der Webseite auf mobilen Endgeräten. Dazu gibt es verschiedene Umsetzungsmöglichkeiten, zum Einen kann das „Responsive Design“ angewendet werden, bei dem sich alle Webinhalte an die Größe des Fensters anpassen, was allerdings auch einige Nachteile birgt, wie man unter „Nachteile von Responsive Design“ nachlesen kann. Zum Anderen gibt es die Möglichkeit, eine zweite Seitenversion zu erstellen, die speziell auf mobile Endgeräte zugeschnitten ist, dabei werden die Besucher auf die mobile-URL umgeleitet, die normalerweise eine der folgenden Formen hat: "http://m.webseite.de" oder "http://mobile.webseite.de". <sup>6</sup>
Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten, da zu lange Ladezeiten die Geduld des Besuchers strapazieren und ihn unnötig Zeit kosten. <sup>3</sup>
<br>
<small>
<sup>1</sup> [Richtlinien für barrierefreie Webinhalte 2.0](http://www.w3.org/Translations/WCAG20-de/#content-structure-separation). Abgerufen: 18.11.2015.
</small><br>
......
......@@ -5,6 +5,7 @@ subtitle: Heute Hui morgen Pfui, dieser Grundsatz gilt zuweilen auch für Usabil
category: usability
author: Hendrik Kahlen
---
Ist die Usability von heute noch die gleiche wie vor 5 Jahren? –kurz „Nein“! Die Gründe dafür liegen überweigend in gestiegenen Nutzererwartungen und –Erfahrungen. In diesem Artikel soll daher einmal ein genauerer Blick auf den Wandel in der Usability geworfen werden. Wem noch die [Normen und Konventionen] der Usability noch nicht bekannt sind, der werfe einen Blick auf unsere Unterrubrik.
### Gründe für Usability-Änderungen
......
......@@ -13,8 +13,6 @@ Bei diesen Leitlinien geht es um die Interaktion zwischen Mensch und Computer un
Gebrauchstauglichkeit geführt werden kann. Im deutschsprachigen Raum ist die Norm DIN EN ISO 9241-110 gültig, welche sich aus folgenden
Grundsätzen zusammensetzt:<sup>2</sup>
<br>
### Aufgabenangemessen
Die Dialogwege zwischen Fenstern, Webpages und Internetseiten und die auf diesen dargestellten informationen, sollten Aufgabenangemessen sein
und somit die Arbeitsschritte zur Erledigung einer Arbeitsaufgabe genau abbilden.<sup>1</sup>
......@@ -23,15 +21,11 @@ Damit ist gemeint, dass der Benutzer bei einer Aufgabe, die er sich selbst stell
kann zum Beispiel der Bestellvorgang auf einer Seite sein, bei dem der Benutzer über den Warenkorb, bis hin zum Bezahlvorgang, durch die komplette
Bestellung geleitet wird.
<br>
### Selbstbeschreibend
Alle Texte, Labels, Buttons, Meldungen und weitere Bestandteile der Internetseite sollten auf Anhieb vertständlich sein. Diese Bestandteile sollten
sich selbst so gut beschreiben, dass der Benutzer dieser Internetseite direkt weiß, was passiert wenn er diese Benutzt, beziehungsweise wenn diese
auftauchen.<sup>1</sup>
<br>
### Steuerbar
Die Dialogwege auf der Internetseite, über Schaltflächen, Menüeinträge und Icons, sollten den Benutzer einfach und vor allem flexibel zum Ziel seiner
Aufgabe führen. Dabei sollten Arbeitschritte rückgängig und Menüeinträge aufgehoben werden können.<sup>1</sup>
......@@ -40,8 +34,6 @@ Der Benutzer soll zum Beispiel beim ausfüllen eines Bestellformulares am Ende n
Arbeitschritten, bis hin zur endgültigen Bestellung, ohne weiteres wechseln können. Dabei soll der Benutzer auch selbst bestimmen können, wann und ob
er einen Schritt weiter in der Arbeitsreihenfolge machen möchte.
<br>
### Erwartungskonform
Bedienungsabläufe, Symbole und die Anordnung der Informationen auf der Internetseite sollten innerhalb dieser konsistent sein und für den Benutzer dem
gewohnten Muster einer Internetseite entsprechen.<sup>1</sup>
......@@ -49,8 +41,6 @@ gewohnten Muster einer Internetseite entsprechen.<sup>1</sup>
Der Benutzer soll also beim erstmaligen Benutzen der Internetseite, alleine durch seine Erfahrungswerte, wissen, wo er zum Beispiel die Suche findet oder
wie er sich im allgemeinen auf dieser Internetseite zurecht findet und sich durch diese Navigieren kann.
<br>
### Fehlertolerant
In allen Situationen, insbesondere bei einer Arbeitsaufgabe, soll die Internetseite weitestgehend dabei helfen Fehler zu vermeiden und dem Benutzer im
nachhinein Möglichkeiten zur Kontrolle und zur Korrektur geben.<sup>1</sup>
......@@ -58,8 +48,6 @@ nachhinein Möglichkeiten zur Kontrolle und zur Korrektur geben.<sup>1</sup>
So soll zum Beispiel bei einem Bestellformular darauf geachtet werden, dass bei dem Geburtsdatum gar nicht erst Buchstaben eingetragen werden können und falls
doch etwas Falsch gemacht wird, soll der Benutzer vor der Bestellbestätigung nochmal alles kontrollieren und korrigieren können.
<br>
### Individualisierbar
Fenstereinstellungen, Spaltenanordnungen in Listen, Menüs und weiteres sollte vom Benutzer selbst einstellbar und somit individualisierbar sein.<sup>1</sup>
Ein Beispiel hierfür ist, dass der Benutzer zum Beispiel sein Profil auf einer Internetseite selbst einstellen kann, durch ein eigenes Foto und einer eigenen
......
......@@ -5,6 +5,7 @@ subtitle: Erwartungskonforme Funktionalitäten bereitstellen
category: funktionalitaet
author: Dario Imsande
---
Durch das Bereitstellen bestimmter Funktionalitäten kann sich die Verweildauer von Besuchern der Website erhöhen. Andersherum gibt es jedoch auch Funktionalitäten, die Nutzer dazu bringen die Website zu verlassen. Deshalb ist die Wahl der richtigen Funktionalitäten besonders wichtig. Hierbei sollten sich die Auswahlkriterien an den Bedürfnissen und Fähigkeiten der Zielgruppe orientieren. Beispielsweise können Nutzer mit zu vielen oder unbekannten Funktionen überfordert sein. <sup>1</sup>
### Welche Funktionalitäten sollte eine EW bereitstellen?
......
......@@ -8,15 +8,11 @@ author: Jörn Jürgens
###Definition
<br>
###Impressumspflicht
Die Impressumspflicht, welche 1997 in Kraft getreten ist, dient in erster Linie dem Verbraucherschutz, aber auch Konkurrenten oder Kunden, die sich über
den Inhaber einer Internetseite informieren oder gerichtlich gegen diesen vorgehen wollen.<sup>3</sup> Dieses Gesetz besagt schlicht, dass ein Impressum zur Anbieterkennzeichnung
geführt werden muss, welches unmittelbar von der Internetseite erreichbar sein muss.<sup>2</sup>