Diejenigen, die in der Webdesignbranche arbeiten, vergleichen die Entwicklung von Frontend-Websites mit einem dreibeinigen Hocker. Diese drei Bereiche - die drei Schichten der Webentwicklung - umfassen Struktur, Stil und Verhalten.
Warum sollten Sie die Schichten trennen?
Wenn Sie eine Webseite erstellen, sollte ihre Struktur in HTML, visuelle Stile in CSS und Verhalten in Skripts umgewandelt werden. Einige der Vorteile der Trennung der Schichten sind:
- Freigegebene Ressourcen: Wenn Sie eine externe CSS- oder JavaScript-Datei schreiben, kann jede Seite der Website diese Datei verwenden. Wenn Sie eine Änderung an dieser Datei vornehmen müssen, um beispielsweise einige typografische Stile auf der Website zu aktualisieren, wird jede Seite, die dieses Stylesheet verwendet, die Änderung erhalten. Es ist nicht notwendig, jede Seite der Website einzeln zu bearbeiten, was für eine große Website ein zermürbendes Unterfangen sein kann.
- Schnellere Downloads: Nachdem das Skript oder das Stylesheet zum ersten Mal von Ihrem Kunden heruntergeladen wurde, wird es vom Webbrowser zwischengespeichert. Da diese gemeinsam genutzten Ressourcen jetzt im Cache des Browsers enthalten sind, werden andere Seiten, die im Browser angefordert werden, schneller geladen, was die allgemeine Seitengeschwindigkeit und -leistung verbessert.
- Mehrpersonen-Teams: Wenn auf einer Website mehrere Personen gleichzeitig arbeiten, können Sie Systeme verwenden, mit denen Dateien ein- und ausgecheckt werden können, um sicherzustellen, dass alle mit den neuesten Versionen arbeiten. Dies ist viel schwieriger, wenn Stile und Verhalten mit Strukturdokumenten verknüpft sind.
- SEO: Eine Website, die eine klare Trennung von Stil und Struktur aufweist, ist wahrscheinlich für Suchmaschinen besser, da sie den Inhalt effektiver crawlen und die Seite verstehen können, ohne sich in den visuellen Stil- und Verhaltensinformationen festzusetzen.
- Zugänglichkeit: Auf externe Stylesheets und Skriptdateien können Benutzer und Browser besser zugreifen. Software wie Screenreader können Inhalte aus der Strukturebene einfacher verarbeiten, ohne sich mit Stilen zu beschäftigen, die sie ohnehin nicht verwenden können.
- Rückwärtskompatibilität: Eine Website, die mit separaten Entwicklungsebenen erstellt wird, ist eher abwärtskompatibel, da Browser und Geräte, die bestimmte CSS-Stile nicht verwenden können oder deren JavaScript deaktiviert ist, den HTML-Code weiterhin anzeigen können. Sie können Ihre Website dann schrittweise mit Funktionen für die Browser erweitern, die sie unterstützen.
HTML: Die Strukturebene
Die Struktur oder Inhaltsebene einer Webseite ist der zugrunde liegende HTML-Code dieser Seite. So wie der Rahmen eines Hauses ein starkes Fundament schafft, auf dem der Rest des Hauses aufgebaut ist, schafft ein solides Fundament von HTML eine Plattform, auf der eine Website erstellt werden kann.
In der Strukturebene speichern Sie alle Inhalte, die Ihre Kunden lesen oder anzeigen möchten. Die HTML-Struktur kann aus Text und Bildern bestehen und enthält die Hyperlinks, über die Besucher auf der Website navigieren können. Dies ist in standardkonformem HTML5 codiert und kann Text, Bilder und Multimedia (Video, Audio usw.) enthalten.
Jeder Aspekt des Inhalts einer Site sollte in der Strukturschicht dargestellt werden. Dies ermöglicht Kunden, die JavaScript deaktiviert haben oder CSS nicht anzeigen können, den Zugriff auf die gesamte Website, wenn nicht alle Funktionen.
CSS: Die Stilebene
Diese Ebene legt fest, wie ein strukturiertes HTML-Dokument für die Besucher einer Website aussehen wird und wird durch CSS (Cascading Style Sheets) definiert. Diese Dateien enthalten stilistische Anweisungen, wie das Dokument in einem Webbrowser angezeigt werden soll. Die Stilebene enthält normalerweise Medienabfragen, die die Anzeige einer Site basierend auf Bildschirmgröße und Gerät ändern.
Alle visuellen Stile für eine Website sollten sich in einem externen Stylesheet befinden. Sie können mehrere Stylesheets verwenden. Denken Sie jedoch daran, dass für jede CSS-Datei eine HTTP-Anforderung erforderlich ist, um sie abzurufen, was sich auf die Site-Leistung auswirkt.
JavaScript: Die Verhaltensebene
Die Verhaltensebene macht eine Website interaktiv, sodass die Seite auf Benutzeraktionen reagieren oder basierend auf einer Reihe von Bedingungen ändern kann. JavaScript ist die am häufigsten verwendete Sprache für die Verhaltensebene, aber auch CGI und PHP werden sehr häufig verwendet.
Wenn sich Entwickler auf die Verhaltensebene beziehen, bedeutet dies meistens die Ebene, die direkt im Webbrowser aktiviert wird. Sie verwenden diese Schicht, um direkt mit dem DOM (Document Object Model) zu interagieren. Das Schreiben von gültigem HTML-Code in die Inhaltsebene ist wichtig für DOM-Interaktionen in der Verhaltensebene. Wenn Sie die Verhaltensebene erstellen, sollten Sie, wie bei CSS, externe Skriptdateien verwenden, um die Geschwindigkeit und Leistung zu optimieren.
