Idee / Motivation
Der grösste Ansporn war wohl eine Webseite ganz alleine und nicht in einer Gruppe zu programmieren. Zusätzlich wollte ich meine Kenntnisse in der Programmierung vertiefen und wach halten, realisierte ich doch im zweiten Semester wie viel ich schon wieder vergessen habe von dem Gelernten aus dem ersten Semester.
Für meinen Vater eine Webseite zu machen, war mir eine Ehre, unterstütz er mich doch in einem Studium voll und ganz. So habe ich die Gelegenheit ihm etwas zurück zu geben und er profitiert auch von meiner Ausbildung.
Vorgehen / Umsetzung
Bevor ich mich in die visuelle Vorbereitung stürzte, fragte ich meinen Vater nach einer Aufstellung der Webseite. Also welche Informationen er drauf haben möchte und wie diese Geordnet sein sollen. So hatte ich schon eine gute Vorstellung im Kopf wie ich die Seite gliedern wollte. In einem zweiten Schritt erstellte ich im InDesign einen Prototypen ausgewählter Seiten und liess mir diese von meinem Vater absegnen. Das hat den Vorteil, dass er weiss wie es am Schluss in etwa aussehen wird und ich so nicht wild drauflos programmiere und gestalte, um am Schluss zu erkennen, dass es ihm gar nicht gefällt. Ausserdem hatte ich so immer eine Vorlage, an der ich mich orientieren konnte.
Schon in der Anfangsphase fragte ich Patrick Sutter, ein Tutor im Modul "Interaktive Medien", an, ob er mir bei allfälligen Fragen und Problemen helfen würde. Zu meinem Glück sagte er sofort zu und bot mir an, sobald ich den HTML-Code habe, ihn sich anzuschauen. Später realisierte wie wichtig es ist, dass der HTML-Code fehlerfrei und korrekt geschrieben ist, es vereinfacht die grafische Umsetzung mit dem CSS immens. Stolz erkannte ich, dass Patrick nicht viel zu korrigieren hatte und ich mich dann gleich ans CSS setzten konnte.
Mit dem CSS hatte ich dann und wann meine Mühe, vor allem die beiden Spalten "Seitennavigation" und "Inhalt" wollten lange nicht so, wie ich es wollte. Mehr als einmal verfluchte ich meine Idee, die Webseite ohne Bootstrap zu machen. Nach langem Ausprobieren kapitulierte ich und gestattete mir, das Raster-System zu übernehmen, den Rest aber links liegen zu lassen.
Als die Desktop-Version stand, machte ich mich an die Mobile-Version. Mit Java-Script stand ich schon zu Beginn auf Kriegsfuss, darum gestaltete sich die Darstellung der Navigation als schwierig. Ich entschied mich dann, Teile davon weg zu lassen und kein Dropdown-Menu zu erstellen. Obwohl diese Art der Navigation wohl etwas ungewöhnlich ist, sollte sie doch klar sein und die Besucher an den richtigen Ort führen. Für das Tablet habe ich nur kleine Anpassungen bei den Schriftgrössen gemacht.
Fazit / Selbstreflexion
Im Grossen und Ganzen bin ich sehr zufrieden mit dem Ergebnis. Beim nächsten Mal würde ich es aber organisierter angehen und mehr Zeit einplanen. So finde ich es sehr schade, dass erst das Gerüst steht und vom Inhalt der Webseite noch vieles fehlt. Auch würde ich mich früher über das Hosting informieren und nicht erst dann, wenn die Webseite schon fertig ist.
Gelernt habe ich sehr vieles und mit den beiden Programmiersprachen HTML und CSS komme ich mittlerweile recht gut zu Gange. Davon werden sicher künftige Projekte im Modul "Interaktive Medien" profitieren. Nun hoffe ich mit PHP und JavaScript genauso anzufreunden!
Leider funktioniert noch nicht alles nach Wunsch. Zum Beispiel funktioniert die Tablet-Ansicht nicht immer fehlerfrei. Es gibt also noch einige Baustellen, aber fürs Erste bin ich schon sehr zufrieden damit, dass mein Vater nun eine Webseite hat und diese auch auf dem Smartphone abrufbar ist.
Helfer
Patrick Sutter und alle anderen Programmier-Profis die mir meine Fragen beantwortet haben
HTML und CSS von Kopf bis Fuss, von Elisabeth Robson und Eric Freemann
Google, das mir geduldig auf jede noch so dumme Frage eine Liste mit möglichen Lösungen bereit stellte