Website für Podcast Morgestau
Im Rahmen eines anderen Digezz-Projekts haben wir einen Podcast gestartet. Um was es in dem Podcast inhaltlich geht, wird hier genauer erklärt. Da es Spotify uns nicht erlaubt, unser Projekt so zu platzieren wie wir es gerne gehabt hätten, habe ich mich dazu entschlossen, eine Website dazu zu programmieren.
Der Hauptzweck der Seite lässt sich simpel zusammenfassen: Die Playlists sollten einfach gefunden werden anstelle der vielen einzelnen Folgen. Spotify ermöglichte es mir die Playlists direkt einzubetten. Dies hat mir die Arbeit erleichtert, nimmt mir aber natürlich auch ein bisschen Freiraum in der Gestaltung.
Ich begann ganz einfach mit einem HTML/CSS framework. Als ich mit dem Programmieren begann, hatten wir noch keine Kurse aus IM 2. Ich kannte also JavaScript noch nicht und wusste weder was es kann, noch wie ich es verwende. Der erste Webseitenentwurf war also relativ langweilig. Eine Seite mit den von Spotify eingespielten Playlists und eine „Über uns“-Seite. Doch dann kam IM 2.
In IM 2 schauten wir uns Java Script an. Es wäre gelogen zu behaupten, ich hätte wahnsinnig viel verstanden in der ersten Kurswoche, doch ich sah was JS alles könnte und wusste, das wird hilfreich. Also wollte ich neben dem IM2-Projekt selbst noch ein bisschen mit JS herumpröbeln. So fing ich an, auf meiner Webseite für Morgestau einzelne Dinge mit JS umzusetzen.
Wie sinnvoll alle diese Anwendungsbeispiele sind, darüber lässt sich streiten. In vergangenen IM-Projekten hat es mich immer genervt, wenn ich den Header auf jeder einzelnen Seite anpassen musste. Diese Copy-Paste-Arbeit konnte ich mir nun dank einer Java Lösung sparen. Nun habe ich einfach einen Array mit den verschiedenen Seiten und den Links und dieser wird auf jeder Seite ausgespielt. Dasselbe passiert mit dem Footer.
Mich störte jedoch, dass sich der Mehrwert der Seite immernoch etwas in Grenzen hielt. Jetzt wo ich JavaScript so ein bisschen kannte, wollte ich noch etwas machen, das einen zusätzlichen Mehrwert bietet. Unsere Playlists sind nach Daten aufgebaut, also alles was wir im selben Moment aufgenommen haben, ist zusammen in einer Playlist. Wir wollen aber ja eben ein On-Demand-Angebot bieten. Da macht es doch viel mehr Sinn, wenn sich der Nutzer seine Folgen nach Themen aussuchen kann. Also programmierte ich die „Folgen“-Seite so, dass man mit einem Filter angeben kann welche Themen einen interessieren und es werden dann die passenden Folgen angezeigt.
Zu guter Letzt musste ich die Seite dann noch responsive machen, so dass sie auch auf Tablets und Handys funktioniert. Das hat mehr oder weniger einfach geklappt, da ich von Anfang an viel auf relative Messwerte setzte. Die Webseite befindet sich hier.
(eli)
Der erste Fehler, den ich gemacht hatte war ich erstellte keinen Prototypen. Ich codete einfach darauf los. Dementsprechend bin ich mit dem Design auch jetzt noch nicht zu 100% zufrieden. Es sieht schon um welten besser aus als die ersten Drafts aber ich glaube ich hätte auf der Visuellen Ebene noch wesentlich mehr herausholen können.
Allgemein Arbeitete ich mehr reaktionär als Strukturiert. Ich codete mal ein bisschen dann kam der Gedanke «Oh, das wäre doch auch noch cool» und dann codete ich etwas neues. Dieser Arbeitsstil funktioniert tiptop wenn am Anfang des Projektes noch unklar ist, wie das Projekt am Ende Aussehen sollte. Hätte ich genauere Vorgaben von Aussen gehabt wäre ich sicherlich ander vorgegangen.
Auf der Funktionalen Ebene hingegen bin ich recht zufrieden. Dafür, dass JS für mich immer noch absolutes Neuland ist bin ich Happy damit, wie die funktionen funktionieren. Es hat eine Weile gedauert und ohne ChatGPT wäre es absolut undenkbar gewesen aber schlussendlich hat es geklappt und ich finde die Seite bringt einen Mehrwert mit sich.
Dass ich dieses mal alleine codete erleichterte den Arbeitsprozess. So musste ich nicht dauernd sicher stellen, dass wir keine doppelspurigkeiten haben und ich konnte immer sämtliche files bearbeiten ohne die Arbeit von anderen zu überschreiben. Dementsprechend arbeitete ich dieses mal auch nur mit einem einzigen CSS file und nicht mit einem pro html seite, wie das in den Gruppenprojekten üblich war.