Bei der Erstellung der Webseite wurden zunächst die Grundstrukturen angelegt. Hierbei wurde damit angefangen, eine Unterteilung in einen Header, einen Body und einen Footer zu unternehmen.
Der Header soll hierbei später primär zur Navigation zwischen den geplanten Seiten dienen – einer Infoseite und einer Seite, auf welcher alle Informationen des Flaschenuntersatzes angezeigt werden.
Um diese Abschnitte später deutlich unterscheiden zu können, wurde daraufhin mit CSS gearbeitet. Es wurde zusätzlich darauf geachtet, dass die Webseite eine vollständige Barrierefreiheit aufweist.
Im nächsten Schritt wurde die Navigation zwischen Seiten implementiert. Um dies zu gestalten, wurden zusätzlich Bilder von Flaticon verwendet, welche thematisch zum Inhalt der jeweiligen Seite, aber auch der Webseite passen. Zudem wurde ein Logo für die Webseite in der Suchleiste sowie auf der Webseite selber angelegt.
Im Footer wurden Buttons angelegt, welche auf das Impressum und die Datenschutzerklärung verlinken (letztere wurden mit einem Tool von Dr. Thomas Schwenke generiert).
Bei der Gestaltung mit CSS war das Ziel, die Webseite möglichst leicht navigierbar für alle Nutzer*innen zu machen, auch hier wurde darauf geachtet, dass die Seite barrierefrei bleibt.
Zusätzlich wurde beachtet, dass die Webseite für alle Endgeräte problemfrei nutzbar ist, hierbei wurden Endgeräte mit den Maßen 375 x 667 bis hin zu Desktops in Erwägung gezogen.
Zur Validierung der Barrierefreiheit wurde das Wave-Tool verwendet. Die Funktionalität der Webseite wurde sowohl über die Entwicklertools als auch über den Resizer geprüft.
Zur Gestaltung der Texte wurden Google-Fonts genutzt, auch wenn die Google-Fonts innerhalb von Europa nicht mehr benutzt werden sollten, da es zum Ende des Jahres 2021 eine Entscheidung diesbezüglich gab, welche dies für öffentliche Webseiten verbieten würde. Da unsere Webseite nicht produktionsfertig sein wird, wurde sich hier dafür entschieden, dies beizubehalten.
Im nächsten Schritt wurden die Inhalte der Seite zunächst mit Dummy-Daten gefüllt. Außerdem wurde für diese ein Styling angelegt.
Um die Daten dem/der Nutzer*in sinnvoll darstellen zu können (das heißt diese zu aktualisieren), wurde mit JavaScript beziehungsweise AJAX gearbeitet. Hierzu wird zunächst eine XML-Request erstellt, welche die Daten abruft und diese dann ohne das erneute Laden der Seite aktualisiert.
Die Daten werden hierbei einmal beim Laden der Seite und einmal alle 24 Stunden aktualisiert.
Comments are closed