Idee
Unsere Grundidee war ursprünglich, eine Webseite zu gestalten, auf der alle aufgezeichneten Vorlesungen zu finden wären, die während der Coronazeit über Zoom aufgezeichnet wurden. Dies hat sich jedoch als schwierig herausgestellt, da wir keine Logins für unsere Webseite kreieren konnten. Somit wären sämtliche Vorlesungen für alle Nutzer von Digezz verfügbar gewesen. Wir haben unser Konzept also nochmals überdacht und den Inhalt der Webseite angepasst. Anstatt den Vorlesungen, sind jetzt nützliche Tutorials zu den Adobe-Programmen und weiteren Bereichen des Studiums zu finden. Es war uns wichtig, dass man auf der Webseite relevante Informationen auf einen Blick finden konnte, anstatt sich durchs Internet klicken zu müssen.
Umsetzung
Als Umsetzung haben wir uns die Metapher eines digitalen Klassenraums vorgestellt. Die Idee dahinter ist, dass ein Bücherregal universell verstanden wird. Man wählt ein Buch aus und kommt somit an die gewünschten Informationen. Auf dem Blackboard sind in Form von Notizzetteln Angebote der Fachhochschule und der Umgebung Chur dargestellt.
Angefangen haben wir mit einfachen Wireframes der Websites und einem Stylesheet. Nach dem die Idee stand, ging es ans erstellen der Grafiken für Desktop und Mobile.
Videolibrary
Beim coden, haben wir als erstes die Videolibrary umgesetzt. Die Idee ist einfach: eingebettete Youtube Videos die in einem Regal stehen. Damit die Anzahl an Etagen im Hintergrund genau auf die Anzahl der Videos passt, haben wir eine Reihe Videos jeweils in eine <div> gepackt. Diese <div> konnten wir dann mit dem Hintergrundbild versehen. So ist unten und oben am Regal nie ein leere Etage über. Um die Webseite auch Tablet und Mobile tauglich zu machen, haben wir mit Media Queries gearbeitet und dort jeweils das Hintergrundbild und die Videogrösse angepasst. Bei der Desktopversion haben wir mit fixen Grössen in Pixeln gearbeitet, damit die Bilder nicht über ihre Qualität hinaus vergrössert werden können. Bei den Tablet- und Mobilversionen sollten sich die Bilder jedoch an die Bildschirmgrösse anpassen, weswegen wir mit “vw” gearbeitet haben.
Library
Für die Navigation zwischen den Videolibraries haben wir uns ein Büchergestell überlegt. Ursprünglich sollte ein leeres Büchergestell als Hintergrund dienen und die einzelnen Bücher jeweils als <div> darübergesetzt werden. Dies stellte sich aber als eine ziemliche Herausforderung heraus, da wir unsere Webseite unbedingt responsive gestalten wollten und sich so die Grösse und die Position der Bücher stetig verändert hat. Nach einigem Pröbeln und Recherchieren, haben wir beschlossen, stattdessen “Image Maps” zu verwenden. Dies ist schon eine ältere HTML Technologie, die einem erlaubt, auf bestimmten Koordinaten etwas zu verlinken. Auch hier stellte sich unser Streben nach einer responsive Website als Problem dar. Beim Anpassen der Bildschirmgrösse, verändert sich die Grösse des Bildes, was auch die Koordinaten verändert. So war beispielsweise der Link zur Photoshoplibrary plötzlich auf dem InDesign-Buch. Dieses Problem konnten wir mit einem JQuery-Plugin lösen, das die Koordinaten automatisch auf die Bildgrösse anpasst.
Blackboard
Um die Notizzettel auf dem Blackboard gleichmässig zu positionieren, haben wir mit einer Flexbox gearbeitet. Der Vorteil hierbei ist, dass wenn sich die Seite verkleinert, sich die Notizzettel automatisch nach unten verschieben. Dies ist mit “flex-wrap: wrap” zu erreichen. Schon ist die Seite responsive. Damit die Seite nicht chaotisch wirkt und zu viel Informationen auf den Notizzetteln steht, haben wir uns für Modal Windows entschieden. Beim Klicken auf ein Notizzettel geht ein kleines Fenster auf, auf der mehr Informationen zu finden sind. Die Standardversion des Modal Windows haben wir direkt im HTML File gemacht. Diese haben wir dann jeweils mit der “InnerHTML”-Property mit Javascript angepasst. Um nicht für jedes Modal Window eine Funktion zu schreiben, haben wir jedem Notizzettel eine Variable zugeteilt, die wir dann mit Javascript ansprechen konnten.
Startseite und Navigationsmenü
Zu guter Letzt haben wir uns der Startseite und dem Navigationsmenü gewidmet. Bei der Startseite haben wir wieder mit denselben Grafiken gearbeitet und auch der bereits erwähnten Image Map. Um einfacher von Blackboard zur Library und umgekehrt zu gelangen, haben wir eine einfache Navigationsleiste geschaffen. Diese ist simpel und passend zum Design gestaltet.
Feinschliff
Am Schluss ging es noch darum alle Teile zusammenzufügen und die Grafiken richtig zu beschriften. Den Inhalt haben wir teils von der Webseite der Fachhochschule übernommen und sie mit den Tourismusangeboten des Kanton Graubündens ergänzt. Für die Bibliothek haben wir auf Youtube-Tutorials zurückgegriffen, die wir teils selber nutzten. Einige davon wurden uns auch von Dozenten vorgeschlagen. Weiter haben wir uns angesehen, was wir in im ersten und zweiten Semester gelernt haben und Tutorials basierend auf dem gesucht.
Learnings und Ideen zur Weiterführung der Webseite
Die Webseite ist eine Erstversion. Wir haben bereits viele Ideen, wie wir sie verbessern und weiterführend können. Beispielsweise wären Login eine gute Möglichkeit auch interne Informationen auszutauschen. Ebenfalls würden wir gerne mehr Interaktivität auf der Plattform haben, wo auch Studenten oder Dozenten Inhalte heraufladen können. Wir werden sehen, in welchem Masse wir die Webseite in kommenden Semestern ausbauen werden. Bei unser Konzeption haben wir einige Dinge nicht beachtet, beispielsweise, dass die Youtube Videos von den Vorlesungen nur für MMP-Studenten zugänglich sein sollten. Als wir dann anfingen Dozenten um ihre Erlaubnis zu Fragen, merkten wir, dass es doch nicht so einfach ist, wie wir gedacht haben.
