Team Website
Übersicht
Mitglieder
Jan-Gerrit Göbel , Joana Becker , Lukas Schäfer , Tom Köhler
Einleitung
Diese Website soll als Anlaufpunkt für Interessenten am Projekt dienen, sei es Studenten auf der Suche nach einem Bachelor- oder Masterprojekt oder anderen Interessenten der Thematik. Da der Projekttag, auf dem die Ergebnisse der Projekte jährlich vorgestellt werden, abgesagt wurde, werden die Ergebnisse auf dieser Website präsentiert. Die Website wurde so designed, dass folgende Jahrgänge ihre Ergebnisse ebenfalls präsentieren können.
Ziele
Das Erstellen der Website folgt mehreren Gründen. Einerseits ist eine Website über die Aufgaben, Teilnehmer und Ergebnisse jedes Jahres ein guter Anlaufpunkt für Interessenten an dem Bachelorprojekt im nächsten Jahr. Des Weiteren bietet es einen formalen und angenehmen Überblick über die erreichten Ergebnisse, der optisch ansprechend dargestellt ist, außerdem stellt es einen Ersatz zu dem fehlenden Projekttag dar, der wegen Covid-19 abgesagt wurde. So können sich auch Firmen, andere Studierende, Dozenten und weitere Interessierte über das Projekt informieren, die sonst den Projekttag besucht hätten.
Struktur
Mithilfe des static Website Generators Jekyll wurde die Website aufgebaut. Jekyll erstellt eine statische Website anhand von Layout-Dateien und Inhaltsdateien.
Die Layout-Dateien geben Jekyll an wie es die Inhaltsdateien darstellen soll. Die Ordnerstruktur spiegelt die Aufteilung in Layout-Dateien und Inhaltsdateien wieder. Zu den Layout-Dateien zählen beispielsweise Dateien in den folgenden Ordnern: layouts, sass, assets, data und die config. Der Inhalt wird durch die *.html Dateien, Bilder und .pdf Dateien dargestellt.
Jekyll kann Internetseiten aus HTML- und Markdown-Dateien erstellen. Für die Vereinheitlichung wurden fast alle Seiten in HTML geschrieben. Die Optik ist hingegen in den sass-Dateien in SASS verfasst, einer Erweiterung von CSS. SASS lässt sich einfach schreiben und einbinden. Ebenso ermöglicht SASS die Anpassung von jedem Detail der Oberflächenoptik.
Um die Bearbeitung der Website einfacher und zukunftsgerichtet zu gestalten, wurden die Inhalte in Ordnern angelegt. Da die Verwendung der Website von den folgenden Projektgruppen ebenfalls eingeplant wurde, gibt es auch eine Aufteilung in Jahre. Die Projektdateien dieses Jahres befinden sich daher in einem eigenen Order. Allgemeine Informationen wurden ebenfalls in Ordnern nach Themen oder Inhalten sortiert. Damit ist ein einfacheres Auffinden der Dateien, eine simplere Benennung und eine bessere Übersicht über die Struktur sichergestellt.
Der strukturelle Aufbau der Website selbst folgt einem einfachen Schema. Es gibt einen allgemeinen Header, der auf allen erreichbaren Seiten angezeigt wird und das Logo, sowie die Navigation enthält. Dieser Header bleibt fix am oberen Rand der Website, unabhängig vom Scrollen im Inhalt des Bodys. Am Ende des Inhalts findet sich ein Footer, der eine kurze Beschreibung des Projekts und der Webseite enthält, sowie die Links zur Datenschutzerklärung und zum Impressum.
Die Informationen zum Projekt und die einzelnen Jahre sind jeweils über ein Drop-Down-Menü in der Navigation erreichbar. Nach Auswahl eines Jahrgangs wird dem Header eine weitere fixe Leiste hinzugefügt, über die die Informationsseiten zu dem jeweiligen ausgewählten Jahr erreichbar sind.
Damit die Nutzer einen schnellen Überblick über ihren Standort auf der Website erhalten, wurden die in Abbildung 1 dargestellten Breadcrumbs integriert. Diese stellen die Folge der aufgerufenen Unterseiten dar und ermöglichen dem Nutzer eine vereinfachte Navigation.
Inhaltlicher Aufbau
Wie im Abschnitt Ziele erwähnt, soll die Website einen Überblick über das Projekt im Allgemeinen geben,
aber auch die Arbeit der einzelnen Projektteams über die Jahre enthalten.
Der inhaltliche Aufbau richtet sich an diesen Zielen aus.
Wie in Abbildung 2 dargestellt,
ist der Grundaufbau der Website eingeteilt in die allgemeine Vorstellung des Projekts,
die Auswahl eines bestimmten Jahrgangs, die Ansprechpartner des Projekts
und Kursempfehlungen zur Vorbereitung auf das Projekt.
Die allgemeine Vorstellung des Projekts teilt sich auf in einen Einblick in das Projektumfeld,
mit einer kurzen Vorschau zu den Themen "Segmentierung anatomischer Strukturen in medizinischen Bildern",
"Vorarbeiten und Infrastruktur" und die "konkrete Aufgabenstellung",
sowie der Vorstellung der Arbeitsgruppe und der Geschichte des Projekts.
Der Bereich, in dem die Ergebnisse eines bestimmten Jahrgangs präsentiert werden, unterteilt sich, wie in Abbildung 3 zu sehen, in weitere Abschnitte. Im Abschnitt "Team *Jahrgang*" ist eine Übersicht mit einem Gruppenfoto und Links zu den im Folgenden beschriebenen Abschnitten zu sehen. Im Abschnitt "Ziele" sind die konkreten Ziele dieses Jahrgangs dargestellt, die im Abschnitt "Untergruppen" Teilen des Projektteams zugeordnet werden. Zusätzlich zu dieser Zuordnung wird im Abschnitt "Untergruppen" auf die Arbeit an den Zielen eingegangen. Dabei wird die Motivation hinter dem Ziel erläutert, das Vorgehen skizziert und das Endresultat präsentiert. In weiteren Abschnitten werden das Projektteam des Jahrgangs und die Verantwortlichen vorgestellt. Im letzten Abschnitt kann der Projektbericht, der am Ende jedes Durchlaufs erstellt wird, heruntergeladen werden.
GitLab CI-Pipeline
Um Fehler schneller zu bemerken, sowie den Deployment-Prozess zu beschleunigen, wurde eine CI-Pipeline definiert.
Die Pipeline soll bei jedem commit auf den master-Branch automatisiert das Projekt bauen
und auf Fehler während des Builds hinweisen.
Außerdem soll beim Pushen auf einen gesonderten Branch die Website deployt werden.
Damit Pipelines ausgeführt werden können wird ein GitLab Runner benötigt.
Ein GitLab Runner ist eine Virtuelle Maschine in welcher fest definierte Prozesse ablaufen können.
Ähnlich wie bei Docker gibt es eine Konfigurationsdatei in welcher unter anderem festgelegt wird welches Image benötigt wird.
Da zum Bauen der Website Jekyll, ein Static-Site Generator, verwendet wird, wird in der Pipeline ein Ruby Image benötigt.
Die Pipeline besteht aus zwei Phasen, der Build-Stage sowie der Deploy-Stage, welche nacheinander ausgeführt werden. Bevor die erste Stage durchlaufen wird, wird Bundler installiert. Bundler ist ein Package Manager für Ruby gems welcher für die Installation von Jekyll benötigt wird.
In der Build-Stage wird Jekyll installiert. Dadurch dass der Installationspfad im cache gehalten wird geschieht die Installation ein einziges mal und wird auch für die nächsten Durchläufe der Pipeline verwendet, bis der Runner heruntergefahren wird. Dies sorgt für eine erheblich schnellere Durchlaufzeit der Pipeline. Nach der Installation wird die Website gebaut und als Artifact ausgegeben.
In der Deploy-Stage wird das Artifact auf den Server auf dem die Seite gehostet wird deployt. Die Umsetzung dieser Stage geschah mit Unterstützung durch das IT-Team von MEVIS, welches auch das Einrichten eines Servers sowie die Registrierung der Domain deepanatomy.de übernahm.
Fazit
Die im Abschnitt Ziele formulierten Anforderungen wurden vollständig umgesetzt.
Es ist eine Website entstanden, auf der das diesjährige und die folgenden Projekte ihre Arbeitsergebnisse präsentieren können.
Außerdem wurde die durch das Team erstellte Website auf der Projekttagswebsite verlinkt,
um den interessierten Besuchern einen Einblick in unsere Arbeit zu gewähren.
Auch das Ziel, den Interessenten der nächsten Jahrgänge eine Anlaufstation zu bieten, wurde erreicht.
Ausblick
Eine der im Abschnitt Ziele formulierten Anforderungen war es, eine Website zu erschaffen, auf der auch die folgenden Bachelor- und Masterprojekte ihr Arbeitsergebnisse präsentieren können. Für dieses Ziel wurde mit dem inhaltlichen Aufbau der Grundstein gelegt, auf dem die folgenden Projektteams aufbauen können. Eine Erweiterungsmöglichkeit ist eine zusätzliche Seite, die bei einem Klick auf "Projektteams" geöffnet wird. Auf dieser Seite werden die unterschiedlichen Jahrgänge mit jeweils einem Bild als Gesamtübersicht dargestellt. Mit einem Klick auf eines der Bilder, wird der Bereich des entsprechenden Jahrgangs geöffnet. Eine weitere Erweiterungsidee wäre das Einbinden der Arbeitsergebnisse der Challenge Teams zur interaktiven Ansicht durch die Besucher der Website. Es könnte eine Seite erstellt werden, in der eine 3D Ansicht integriert ist. Es können verschiedene Datensätze und Strukturen ausgewählt werden, die in der 3D Ansicht angezeigt und selbst zu erforschen sind. Im Zuge dieser Erweiterung könnte es auch möglich sein, die eigenen MRT- oder CT-Bilder hochzuladen und die annotierten Bilder angezeigt zu bekommen.