Die Challenge eine Webseite zu programmieren

Ist es möglich nach nur einem Jahr Programmier-Unterricht eine Webseite zu erstellen, die auch den hohen Ansprüchen einer gelernten Polygrafin gerecht wird? Dieser Challenge habe ich mich in diesem Semester gestellt und ich finde, das Ergebnis kann sich sehen lassen.

Im zweiten Semester an der HTW Chur programmierten wir im Modul “Interaktive Medien” in Gruppen eine Webseite. Der Stolz es geschafft zu haben, motiviert unheimlich zum es alleine probieren zu wollen. Die Webseite aus dem Modul wurde hauptsächlich mit dem Framework “Bootstrap” programmier und gestaltet. Mein Ziel war es, es ohne ein Framework zu schaffen und die Webseite einzig mit meinen HTML- und CSS-Kenntnissen zum laufen zu bringen.

Mein Vater hat seit über 10 Jahren ein kleines Architekturbüro, fast noch länger hat er die Domain bertet.ch für sich reserviert. Doch in all den Jahren erhielt man, wenn man die Site aufrief, nur die Meldung “Diese Seite befindet sich im Aufbau.”. Das Geschäft läuft und so hielt mein Vater es bis jetzt nicht nötig, eine eigene Webseite zu haben. Ich als seine Tochter fand das schon seit längerem eine nicht so tolle Situation. Spätestens seit ich an der HTW Multimedia Production studiere reifte der Gedanke, ihm eine Webseite zu machen. Und so kam es, dass mein Vater nun endlich eine eigene Webseite für sein Büro hat.

Gerne hätte ich die Webseite mit Bildern gefüllt, doch braucht es viel Zeit, diese zu organisieren. Aus der umfangreichen Bilddatenbank meines Vaters müsste erst eine geeignete Auswahl erstellte werden und dann die jeweiligen Hausbesitzer angefragt werden, ob man die Bilder ihrer Häuser ins Internet stellen darf. Da ich in Chur doch recht weit weg vom Geschehen bin und mein Vater ein viel beschäftigter Mann, so entschieden wir die Bildergeschichte auf später zu vertagen und unseren Fokus auf das Grundgerüst der Webseite zu setzte.

Und das ist nur das Ergebnis.

Kritik
von Noemi Bertet

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

Keine Kommentare

Schreibe einen Kommentar