Entwicklung der Webseite

Erstellung des Prototypen der Homepage:

1. und 2. Woche (03.05. - 16.05.17):

  1. Treffen am 03.05.17:
    Pepi und Mario bilden das Team Webseite
Zunächst werden Ideen gesammelt, wie die Homepage aussehen soll (Anordnung der verschiedenen Logos, Navigationsleiste etc.)
  • Handschriftliche Zeichnung auf Papier (siehe „Grundgedanke Webseite.pdf“)
  • Das Logo soll sich dauerhaft oben auf der Webseite befinden und als Verlinkung zur Homepage dienen. Wichtig ist dabei der Bezug zur Bioinformatik und zum Thema des Projekts – nämlich dem Alignmentpuzzle. Daher werden in dem Logo die vier typischen Farben der Basen der DNA – rot, blau, gelb und grün - als Elemente benutzt. Es soll zentriert sein.
  • Startsymbol mit Verlinkung zum Alignmentpuzzle soll fest oben links neben dem Logo der Webseite stehen, da dies den wesentlichen Bestandteil der Webseite ausmacht und dieser Bereich in der Webseite (oben links) ist, beruhend auf statistischen Untersuchungen, der erste Teil, welcher die Aufmerksamkeit des Nutzers auf sich zieht. Das Startsymbol soll die Aufmerksamkeit des Besuchers auf sich ziehen und wieder den Bezug zum Spiel haben.
  • Navigationsleiste soll sich links befinden und kann mittels Knopfdruck auftauchen oder verschwinden, sodass die Webseite dynamischer aussieht; zudem beinhaltet sie:
    • Einen Link zur Homepage
    • Einen Link zum Alignmentpuzzle zusätzlich zu dem Spielverweis auf der Homepage
    • Einen Link zu weiteren Themen der Bioinformatik (aufgeteilt in Unterpunkte) - Idee: Kurze Texte zur einigen Themen der Bioinformatik einbinden
    • Einen Link zum Impressum, in das am Ende die Namen der Teammitglieder, deren Studiengänge und ähnliches eingetragen werden sollen.
  • Eine Slideshow mit unterhaltsamen Antworten auf die Frage: „Was ist Bioinformatik?“; diese soll direkt unterhalb des Logos der Webseite befindlich sein und automatisch ablaufen.
  • Den zentralen Punkt der Homepage bildet ein Text der allgemein die Bioinformatik thematisieren soll. Verlinkungen innerhalb des Texts zu dem Thema „Topics of bioinformatics“ sollen möglich sein. Außerdem ist eine Idee Bilder mit in den Text zu integrieren (Bildrechte usw. beachten wegen möglichen Bildrechtsverletzungen!)
  • Die rechte Seite der Homepage soll durch einen dünnen schwarzen Strich von der Mitte getrennt sein. Zudem soll dort ein von Hand gezeichnetes und mit dem Computer bearbeitetes Bild der Evolution „Vom Affen zum Menschen“ zu sehen sein. Es soll bis zum Ende der Homepage reichen.
Erste Implementationen:
  • Erstellen einer HTML-Datei
  • Vorstellungen und Ideen sollen zunächst als Grundgedanke und daher nur oberflächlich dargestellt werden (Navigationsleiste vorhanden, Platzhalter für das noch nicht vorhandene Logo und den anderen Zeichnungen als Bilder in die Webseite eingefügt)
  • Erstellen weiterer HTML-Dateien für die unterschiedlichen Teile der Webseite, um dort die Ideen, das Spiel und die Dokumentation einbinden zu können

Innerhalb der zwei Wochen wird dann ein Logo kreiert. Zunächst als Zeichnung auf Papier, später mit dem Programm InkScaoe am Computer abgebildet. Ein analoger Prozess findet mit dem Bild zum Alignmentpuzzle statt sowie dem Evolutionsbild, das an der rechten Seite der Homepage integriert werden soll.

Ab der 3. Woche (17.05.17):

Erfolge / Neue Ziele:
  • Das Alignmentpuzzle wird in die dafür zugehörige HTML-Datei integriert.
  • „Deutsch“ als Standardsprache der Webseite:
    • Motivation hierfür unter anderem die geringe Anzahl an deutschen Bioinformatik-Webseiten (Stand: 17.05.17)
    • Studieninteressierten, die nur eingeschränkte Englischkenntnisse vorweisen können, sollen ebenfalls angesprochen werden
  • Überlegungen bezüglich der Schriftart: Welche der bisher verwendeten erscheint am besten geeignet für die Webseite?

Das Spiel ist ab diesem Zeitpunkt auf dem Prototyp der Webseite spielbar und kann über die Homepage sowie der Navigationsleiste erreicht werden.

Verbesserung des Prototypen

Ab der 4. Woche (24.05.17):

Prototyp überarbeiten:
  • Überlegungen bezüglich den Anforderungen der Zielgruppe (Studieninteressierte)
  • Design der Webseite:
    • Wirkt nicht modern und ansprechend
    • Der weiße Hintergrund wirkt langweilig und soll durch Farbe und/oder spannende Highlights ersetzt werden.
  • Der Protoyp wird generell in Frage gestellt und eine komplette Überholung in Betracht gezogen.

Ab der 7. Woche (14.06.17):

Neue Implementationen:
  • Grundidee bezüglich „Alignmentpuzzle“, „Themen der Bioinformatik“ und „Über uns“ ist weiterhin das zentrale und prägende Gerüst der Webseite und führt von der Homepage aus, auf drei unterschiedliche HTML Dateien. Diese werden als Logos in Kästen auf der Homepage abgebildet. Auf diese Weise werden die Themen der Webeite klar voneinander getrennt und der Nutzer kann sich leicht zum gewünschten Inhalt navigieren.
  • Diese drei Hauptsektionen sollen jederzeit und von überall aus von der Webseite erreichbar sein, indem am oberen Webseitenrand jeweils drei Kästen eingefügt sind, ähnlich wie auf der Homepage. Je nach dem bei welchem Punkt der Benutzer aktuell ist, sind jeweils die anderen drei Punkte am oberen Bildschirmrand zu sehen (Bsp.: Benutzer befindet sich bei dem Punkt „Über uns“: Am oberen Bildschirmrand sind demnach in den Kästchen folgende Punkte angezeigt: „Zurück zur Startseite“, „Themen der Bioinformatik“ und „Alignmentpuzzle“)
  • Unter dem Punkt „Themen der Bioinformatik“ sollen die Themen „Wirkstoffdesign“, „Alignment“ sowie „Sequenzierung“ in eine manuelle Slideshow mit Informationstexten und Bildern integriert werden. Außerdem soll hier zusätzlich die Bioinformatik allgemein noch vorgestellt werden.
  • Der Punkt „Alignmentpuzzle“ führt zu dem Spiel der Webseite.
  • Die Sektion „Über uns“ enthält einen Verweis zur Dokumentation des Projekts, sowie eine Vorstellungsrunde zu den einzelnen Mitgliedern des Teams
  • Die unterschiedlichen Inhalte bei „Themen der Bioinformatik“ und bei „Über uns“ sind durch eine kleine Navigationsleiste, jeweils auf der linken Seite, zugänglich. Beim Wechseln des gerade genannten Inhalts, gibt es einen visuellen Effekt; der alte Inhalt verschwindet langsam, während der neue ebenfalls langsam angezeigt wird (Fade-Effekt).
  • Der Hintergrund soll durch ein entsprechendes Hintergrundbild ansprechender und moderner wirken, das im Bezug zur Bioinformatik steht. Damit es auch zum Thema des Projekts passt, ist ein DNA-Strang das Hauptmotiv.
  • Die Farbe der Schrift soll allgemein weiß sein, damit es in einem guten Kontrast zu dem dunkelblauen Hintergrund steht.

Ab der 8. Woche (20.06.17):

Umsetzung der Ideen aus der 7. Woche. Für das Alignmentpuzzle steht ein Template zur Verfügung.

Anpassung von Feinheiten

Ab der 9. Woche (28.06.17):

Ein User-Test in Form einer Umfrage zu der Webseite sowie zu dem Spiel wird durchgeführt. Die aufgekommenen Probleme werden auf die bestmögliche Weise gelöst.

Informationstexte für Themen der Bioinformatik stehen auf der Webseite zum Lesen zur Verfügung. Die Texte sollen mithilfe von erklärenden Bildern aufgelockert werden.

Es erfolgen weitere Verfeinerungen am Hintergrund: Sowohl Farbe als auch Sättigung werden angepasst. Der Hintergrund bei der Startseite wird ganz oben durch einen Farbverlauf verdunkelt, damit die weiße Schrift lesbar ist.

Alle Schriften werden aufeinander abgestimmt, wobei die Schrift der Knöpfe auf der Startseite (sowie die Knöpfe zur Verlinkung der anderen Seiten, die sich ganz oben an jeder einzelnen Seite befinden) von Hand mit Inkscape erstellt wurden.

Ein Link zur Dokumentation wird auch auf der Hauptseite hinzugefügt.

Der HTML-/CSS-Code aller Seiten wird so angepasst, dass alles bei Vergrößerung/Verkleinerung gut lesbar bleibt.