Website für Podcast Gleis 50

IDEENFINDUNG

Durch das CI/CD war das Design das kleinste Problem. Was uns zuerst vor eine Herausforderung stellte war, das definieren der Unterseiten. Wir haben uns dazu die Websiten der verschiedensten Podcasts angesehen. Viele davon haben eine Seite von .podigee.io, weshalb sie auch alle fast gleich aussehen. Sie haben insgesamt drei Seiten “Startseite”, “Alle Episoden” und “Abonnieren”, wobei die letztere in der “alle Episoden” Seite integriert ist. Viele Podcast Website sind auch One-Pager oder wenn sie schon eine grosse Reichweite haben noch mit einem Shop ausgebaut. Es war uns danach klar, dass wir sicherlich keinen One-Pager machen wollen. Eine Startseite brauchte es logischerweise, darauf sollten unsere Hörerinnen direkt alles wichtige finden und zu den Unterseiten weitergeleitet werden können, wenn sie mehr Informationen haben wollen. Danach war uns wichtig, das wir sicherlich eine Seite komplett zu uns und unserem Projekt dem Podcast haben. Weiter sollte auch unbedingt ein Kontaktformular integriert sein, damit sich jeder mit jeglichen Anliegen an uns wenden könnte. Dieses Kontaktformular war uns auch vor allem wichtig aus programmier-gründen, da es etwas ist, dass wir im ersten Semester nur designtechnisch machen konnten, aber nicht komplett funktionsfähig. Das wollten wir jetzt anders machen.

 

Hier gehört auch dazu, dass wir uns eine eigene Domain und ein Hosting bei hosttech.ch gekauft haben. Dafür zahlen wir pro Jahr ca. 60 CHF, was für uns ganz okay ist für die Leistungen, die wir davon erhalten.

 

HERAUSFORDERUNGEN UND LEARNINGS

Da wir noch weit davon entfernt sind Porgrammier-Profis zu sein, stellte uns das ein oder andere Element schon etwas vor Herausforderungen. Diese konnten wir aber alle mit ChatGPT, Googlen und vor allem viel Ausprobieren lösen.

Auf der Startseite stellte das Carousel mit den Titeln und Links der einzelnen Folgen eine grosse Herausforderung dar. Wir haben im Internet nach Vorlagen für solch ein Slider/Carousel gesucht, was sich als schwieriger herausstellte als gedacht. Es gab nicht einfach DIE Vorlage dafür und auch ChatGPT ergab nur komischen Code. Nach langem Suchen und zusammenbasteln ist aber dann ein einigermassen akzeptables Carousel entstanden. Da es grosse Probleme und Störungen gab beim responsive machen dieses Carousels, ist es im Moment noch nicht auf der Webseite zu sehen. Wir sind aber daran das Problem zu fixen und werden es hochladen, sobald es in Ordnung ist und funktioniert.

Auf der “aui fouge” Seite gab es “nur” die Herausforderung der Anordnung der Folgen und das Design generell. Es sollte übersichtlich sein und trotzdem noch etwas Zusatzinformation, als nur den Link enthalten. So wie es jetzt ist, sind wir auch noch nicht 100% zufrieden, aber die Website wird sich wahrscheinlich sowieso noch ein paar mal anpassen.

Der Header stellte uns vor die Herausforderung, dass wir bei grossen Bildschirmen die Links ausgeschrieben haben wollten und bei kleineren dann ein Burger-Menu. Zu Beginn fiel es uns schwierig uns den Code dazu vorzustellen, aber durch eine Vorlage auf Google, konnten wir das Ganze dann umsetzten ohne weitere zu grosse Struggles.

Das Kontaktformular nahm schlussendlich auch mehr Zeit in Anspruch als wir dachten. Wir haben uns als erstes mit dem nur designten Formular von letztem Semester auseinandergesetzt und dies ganz nach unserem Geschmack zusammengebaut. Eigentlich wollten wir, dass die Kontaktgründe als Icons anklickbar sind, jedoch hat schon nur das Ankommen des Ausgefüllten Kontaktformulars nicht geklappt. Wir haben also unser aktuelles Kontaktformular mal auf die Seite gelegt und uns an ein ganz neues Formular gewagt, um einfach mal zu schauen, ob das Formular mit dem Server verbindet werden kann. Wir wollten, dass sobald ein Formular abgesendet wird, wir eine E-Mail erhalten. Dazu haben wir uns PHP genauer angeschaut, da auf allen Websiten zu diesem Thema davon gesprochen wurde. Nach einiger Lesezeit und einigen YouTube-Videos haben wir es schlussendlich hinbekommen, dass ein ganz ungestyltes Kontaktformular von A-Z funktioniert. Der nächste Schritt war also, diese Formular nun nach unserem CICD zu designen. Was nach einigen Anläufen auch endlich geklappt hat. Als letztes haben wir dann die Kontaktgründe als Icon dargestellt. Dies war, dank dem Hovereffekt, auch wider nicht ganz ohne. Ursprünglich wollten wir die Icons mit dem Schild hintendran einfügen, allerdings haben wir uns dann, aufgrund des aussehens, gegen die Schilder entschieden und die Icons allein eingefügt.

Das Responsive machen war auch nicht einfach. Da haben wir vor allem gelernt, dass man die anderen Bildschirmformate schön möglichst früh in die Planung und in das Programmieren einführen sollte, und nicht erst zum Schluss.

Die gründliche, aber zeitintensive Planung der Website zu beginn hat sich gegen Ende als gut herausgestellt. Dank dieser detaillierten Planung war uns jederzeit klar, was wir von uns selbst erwarten, auch wenn die Planung der Website damals doch einige Zeit in Anspruch genommen hat.

Grösste Herausforderung: Am 11. Juni, also 1 Tag vor der Abgabe des Projekts hat unsere Seite/unser Server gespuckt und unsere Seite wurde als unsicher angezeigt und konnte nicht mehr geöffnet werden. Wir haben lange selbst versucht herauszufinden, wo das Problem liegen könnte, wurden aber nicht schlau daraus und sind fast daran verzweifelt, weil sonst alles endlich alles funktioniert hätte. Schlussendlich haben wir den Support von hosttech angefragt, welcher innerhalb von 3 Stunden die Seite wieder zum Laufen gebracht hat.

 

VERBESSERUNGEN

Der fahrende/animierte Zug oberhalb des Footers war nicht wirklich schwer zu programmieren, aber mit der Zeit ist uns dann aufgefallen, dass der ganze Footer wahrscheinlich aufgrund des Zuges sehr lange hat bis er lädt. Das konnten wir leider bis zur Veröffentlichung noch nicht komplett verbessern. Aber wir sind uns daran eine Lösung dafür zu finden.

Beim Kontaktformular unter Kontaktgrund springen jeweils die Icons minimal, sobald man darüber Hovert oder den Grund auswählt. Dies sieht nicht optimal aus und auch hier sind wir daran, eine schönere Lösung herauszufinden, damit sich das Icon nicht geografisch, sondern nur farblich verändert.