Dokumentation: Technische Umsetzung
Die technische Umsetzung bildet das Herzstück jeder Website – hier wird das zuvor geplante Konzept in eine funktionierende, sichtbare Form übertragen. Sie umfasst alle Schritte, die notwendig sind, um Inhalte strukturiert, gestaltet und interaktiv im Web darzustellen. Dabei spielen technische Standards wie HTML und CSS ebenso eine Rolle wie das eingesetzte Content-Management-System und die verwendeten Programme. In diesem Kapitel geht es darum, wie die technischen Bausteine meiner Website zusammenwirken, um eine stabile, übersichtliche und benutzerfreundliche Plattform zu schaffen. Der Fokus liegt darauf, wie Struktur, Gestaltung und Funktion ineinandergreifen und wie aus theoretischem Wissen eine praktische, umsetzbare Lösung entsteht.
Meine Inhaltsarchitektur
Die Inhaltsstruktur wurde bewusst logisch und hierarchisch klar aufgebaut, um eine einfache Orientierung und einen verständlichen Wissensaufbau zu ermöglichen. Ziel war es, den Nutzer Schritt für Schritt durch die verschiedenen Themenbereiche zu führen – von den grundlegenden Konzepten bis hin zur praktischen Umsetzung und abschliessenden Dokumentation. Auf der Startseite erhält der Nutzer einen direkten Einstieg und Überblick über den gesamten Inhalt. Der Bereich Grundlagen bildet die theoretische Basis des Projekts und ist in zwei Hauptkapitel gegliedert: die technischen Grundlagen, die das technische Verständnis fördern, und die gestalterischen Grundlagen, die das visuelle und konzeptionelle Fundament abdecken. Diese Trennung unterstützt ein systematisches Lernen und schafft Klarheit zwischen Funktion und Gestaltung. Der Abschnitt Umsetzung zeigt, wie das zuvor erarbeitete Wissen in der Praxis angewendet wurde. Hier werden sowohl die technischen Aspekte (z. B. HTML, CSS und eingesetzte Programme) als auch die inhaltlich-gestalterischen Komponenten erläutert. Dadurch wird der gesamte Entstehungsprozess nachvollziehbar und transparent dargestellt. Die Dokumentation am Ende rundet die Struktur ab. Sie dient der Reflexion und Nachvollziehbarkeit des Projekts und fasst die wichtigsten Erkenntnisse und Arbeitsschritte zusammen. Insgesamt sorgt diese Struktur für eine klare inhaltliche Gliederung, logischen Aufbau und gute Benutzerführung, was sowohl die Verständlichkeit als auch die Zugänglichkeit der Inhalte verbessert.
Startseite
│
├── Grundlagen
│ ├── Technische Grundlagen
│ │ ├── Internetgeschichte
│ │ ├── Server
│ │ ├── Client
│ │ ├── Host
│ │ ├── Provider
│ │ └── CMS
│ │
│ ├── Gestalterische Grundlagen
│ │ ├── Farbenlehre
│ │ ├── Typografie
│ │ ├── Layout
│ │ └── Usability
│ │
│ └── Rechtliche Grundlagen
│ ├── Urheberrecht & Bildrechte
│ ├── Datenschutz & Impressumspflicht
│ └── Barrierefreiheit im Web
│
├── Umsetzung
│ ├── Technische Umsetzung
│ │ ├── HTML
│ │ ├── CSS
│ │ ├── Seitenarchitektur
│ │ └── Programme (Technisch)
│ │
│ └── Inhaltliche Umsetzung
│ ├── User Interface
│ ├── Komponenten
│ ├── Gestalterische Inhalte
│ ├── Textliche Inhalte
│ └── Programme
│
└── Dokumentation
├── Technische Grundlagen
├── Gestalterische Grundlagen
├── Rechtliche Grundlagen
├── Technische Umsetzung
└── Inhaltliche Umsetzung
└── FazitReflexion: Inhaltsarchitektur
Die Erstellung der Inhaltsarchitektur hat deutlich mehr Zeit beansprucht, als ich anfangs erwartet hatte. Bis die Struktur wirklich stimmig war, habe ich sie sechs- bis siebenmal überarbeitet – Begriffe angepasst, Seiten neu geordnet und Inhalte immer wieder umstrukturiert. Besonders hilfreich war dabei die kritische Rückmeldung meiner Mutter, die mich darauf aufmerksam machte, dass eine Struktur nicht nur für mich selbst, sondern auch für andere nachvollziehbar sein muss. Dadurch habe ich gelernt, Inhalte konsequent aus der Sicht der Nutzer zu denken und verständlich zu benennen. Dank des CMS Contao konnte ich Seiten beliebig umbenennen, verschieben und neu verlinken, ohne dass dabei das System beschädigt wurde. Diese Flexibilität wäre in WordPress in dieser Form kaum denkbar, da dort viele Bereiche voneinander abhängen und Änderungen schnell zu fehlerhaften Links oder Konflikten mit Plugins führen können. Contao hat mir dagegen ermöglicht, die Seitenarchitektur frei, sicher und intuitiv zu gestalten – was gerade im Lernprozess ein grosser Vorteil war.Insgesamt habe ich verstanden, wie viel Zeit, Planung und Überarbeitung nötig sind, um eine logische, nutzerorientierte und funktionale Struktur aufzubauen.
Mein eingebundenes CSS
Ich habe mich bewusst für ein externes CSS-Stylesheet entschieden, um das Design meiner Website klar zu strukturieren, übersichtlich zu verwalten und einheitlich zu gestalten. Während HTML die Struktur und den Inhalt bestimmt, sorgt CSS für das visuelle Erscheinungsbild und die Benutzererfahrung.
Unterschied zwischen HTML und CSS – Funktion und Wirkung
Eine Website, die nur aus HTML besteht, zeigt Inhalte in ihrer Rohform: Texte, Bilder und Links werden lediglich untereinander dargestellt – ohne Farben, Abstände, Schriftarten oder Layout. Alles erscheint schlicht, technisch und ungestaltet. HTML sorgt also nur für die Struktur einer Seite, etwa welche Bereiche Überschriften, Absätze oder Bilder sind.
Erst durch CSS (Cascading Style Sheets) erhält die Website ihr Aussehen und Design. CSS definiert Farben, Schriftgrössen, Abstände, Anordnungen und sogar Animationen. Während HTML also das „Gerüst“ einer Website bildet, ist CSS die „Gestaltungsschicht“, die dieses Gerüst optisch ansprechend und benutzerfreundlich macht.
Eine Seite mit CSS wirkt dadurch modern, übersichtlich und lebendig, während dieselbe Seite ohne CSS einfach, unformatiert und schwer lesbar wäre.
MIt CSS
ohne CSS
Gestaltung mit externem Stylesheet
Der Vorteil eines externen Stylesheets ist die einheitliche Gestaltung aller Seiten. Änderungen am Design können zentral vorgenommen werden, was den Pflegeaufwand stark reduziert und die Effizienz bei zukünftigen Anpassungen verbessert. Zudem hatte ich das Glück, auf Erfahrungen und CSS-Strukturen aus früheren Arbeiten meiner Mutter zurückgreifen zu können. Einige ihrer Codeabschnitte – beispielsweise für die Spaltenansichten – konnte ich übernehmen und an mein eigenes Projekt anpassen. Dadurch habe ich nicht nur Zeit gespart, sondern auch ein besseres Verständnis dafür gewonnen, wie wiederverwendbare CSS-Komponenten aufgebaut sind und wie sie zur Gesamtstruktur beitragen. Insgesamt ermöglicht der Einsatz von CSS eine klare Trennung von Inhalt und Gestaltung, schafft Konsistenz, Übersicht und Barrierefreiheit und sorgt für ein modernes, professionelles Erscheinungsbild, das den Nutzer gezielt durch die Website führt.
Reflexion: CSS
Während der Arbeit am CSS habe ich erkannt, wie entscheidend Stylesheets für das Erscheinungsbild und die Benutzerfreundlichkeit einer Website sind. Anfangs habe ich den Aufwand und die Wirkung von CSS etwas unterschätzt – doch der direkte Vergleich zwischen der Seite ohne und mit CSS hat mir deutlich gezeigt, wie gross der Unterschied tatsächlich ist. Ohne CSS wirkt eine Website leer, unstrukturiert und schwer lesbar. Erst durch gezielte Gestaltung mit Farben, Typografie, Abständen und Layout entsteht ein professionelles und zugängliches Gesamtbild, das Inhalte klar vermittelt und Nutzer gezielt führt. Ich habe dabei gelernt, wie wichtig es ist, Inhalt und Gestaltung zu trennen und mit einem externen Stylesheet zu arbeiten, um Struktur, Übersicht und Wiederverwendbarkeit sicherzustellen. Diese Erfahrung hat mein Verständnis für den gestalterischen und technischen Zusammenhang von HTML und CSS deutlich vertieft und gezeigt, wie stark Design zur Benutzererfahrung beiträgt.
Quellenangaben: CSS
Etwas HTML und keine Programmiersprache
In meinem Projekt habe ich nur in geringem Umfang HTML angewendet, da das verwendete Content-Management-System Contao viele Aufgaben automatisch übernimmt. Contao stellt eine umfangreiche Benutzeroberfläche bereit, über die Inhalte, Layouts und Module einfach erstellt und verwaltet werden können – ganz ohne tiefe Eingriffe in den Code. Durch die Struktur und den Aufbau von Contao ist es nicht notwendig, jede Seite manuell mit HTML zu programmieren. Viele Elemente wie Überschriften, Textbereiche, Bilder oder Navigationen werden über das Backend des CMS generiert. HTML dient hier hauptsächlich zur Grundstrukturierung einzelner Bereiche oder zur Anpassung kleiner Details, während die eigentliche technische Umsetzung vom System übernommen wird. Der Verzicht auf weitere Programmiersprachen wie PHP oder JavaScript war daher bewusst gewählt, da Contao bereits alle wichtigen Funktionen integriert. So konnte ich mich auf die Gestaltung, Struktur und Benutzerfreundlichkeit konzentrieren, anstatt aufwendige Programmierlogik zu entwickeln. Insgesamt hat sich gezeigt, dass durch den Einsatz von Contao nur wenig manuelles HTML notwendig ist, um ein professionelles und funktionales Ergebnis zu erzielen. Das CMS bietet damit eine effiziente Grundlage für sauberes Webdesign ohne komplexe Programmierung.
Reflexion: HTML
Während der Arbeit mit Contao habe ich erkannt, wie stark ein Content-Management-System den Umgang mit Code vereinfacht. Anfangs ging ich davon aus, dass ich viele Inhalte manuell mit HTML aufbauen muss, doch im Laufe des Projekts wurde mir bewusst, dass Contao bereits einen grossen Teil dieser Arbeit übernimmt. Ich habe gelernt, dass durch die integrierten Funktionen und die modulare Struktur von Contao nur wenig eigenes HTML notwendig ist, um ansprechende und technisch saubere Seiten zu gestalten. Das System generiert viele HTML-Elemente automatisch, wodurch ich mich stärker auf Gestaltung, Struktur und Benutzerfreundlichkeit konzentrieren konnte. Gleichzeitig hat mir die Arbeit gezeigt, dass ein grundlegendes Verständnis von HTML trotzdem wichtig bleibt, um gezielte Anpassungen vorzunehmen oder kleinere Probleme eigenständig zu lösen. Insgesamt habe ich ein besseres Gefühl dafür entwickelt, wie ein CMS die Verbindung zwischen Design und Code herstellt und wie effizient Webentwicklung dadurch werden kann.