Trennung zwischen Vorlagen (Inhalte und Semantik) und optischer Gestaltung (Design)

Der Vorlagenkatalog besteht aus mehreren unterschiedlichen Elementen, mit dessen Hilfe Benutzer Webseiten in Teilen oder als Ganzes erstellen können. Im Gegensatz zu bisherigen Anwendungen oder Verfahren (die sich Homepage-Baukasten, Homepage-Wizard, Web-Templates oder ähnlich nennen) wird in diesem Projekt ein allgemeiner Ansatz verfolgt: Es findet eine Trennung zwischen den Inhalten, der Semantik (dem strukturellen Aufbau einer Seite) und dem Design statt. Die drei Teile können unabhängig voneinander verwaltet, gepflegt und verändert werden. Eine Änderung von Inhalten darf weder Einfluss auf die Semantik noch auf das Design haben; genauso wenig darf eine Änderung des Designs eine Anpassung seitens der Inhalte oder der Semantik erfordern. Um diese Unabhängigkeit voneinander zu gewährleisten, ist es erforderlich, dass die Semantik und damit der strukturelle Aufbau einer Seite fest sind.

Im Vorlagenkatalog ist die Beschreibung und Definition der Semantik ebenso Teil des Bereiches Vorlagen wie die Inhaltsvorlagen. Die optische Gestaltung wird in dem eigenen Bereich Design gegliedert.

Inhalte

Bei den Inhalten handelt es sich um die Texte, Bilder und Dokumente, die den eigentlichen Inhalt einer Webseite ausmachen. Die Inhalte werden über HTML im Inhaltsbereich einer Webseite eingestellt.

Die Inhalte können von Autoren oder von automatischen Anwendungen erstellt werden. Zudem werden die Autoren mit Inhaltsvorlagen unterstützt, in denen häufig verwendete Texte bereitgestellt werden, zum Beispiel der Text für ein Impressum.

Informationen über die verwendbaren HTML-Anweisungen innerhalb einer Webseite finden sich auf der Seite Elemente.

Semantik

Mit Semantik (auch Externer Link:  formale Semantik) ist hier die genaue Abfolge und Position aller Teile einer Webseite innerhalb des HTML-Quellcodes gemeint. Die Semantik definiert somit einen festen strukturellen Aufbau der Webseiten. Darin wird festgelegt,

  • wo Metaangaben über eine Seite gemacht werden,
  • wie Anweisungen für die optische Darstellung eingebunden werden,
  • welche Elemente zur Navigation an welchen Stellen eingebaut werden,
  • wo im HTML-Quellcode der Inhalt geschrieben wird
  • und wie interaktive Elemente eingebunden werden.

Wie bei den Inhalten können strukturelle Bereiche einer Webseite, wie bespielsweise die Navigation, durch interaktive Anwendungen erstellt werden.

Weitere Informationen zur Struktur der Webseiten entnehmen Sie bitte der Seite Struktur.

Optische Gestaltung (Design)

Ein Design besteht aus einem austauschbaren Satz an CSS- und Grafikdateien, mit dessen Hilfe eine spezielle optische Darstellung erzeugt wird. Jedes Design nutzt die durch Semantik fest definierten Strukturen einer Webseite, um die optische Darstellung jedes Elementes gezielt beeinflussen zu können.

Weitere Informationen zur der optischen Gestaltung und den verfügbaren Designs finden sich innerhalb der Seite Designs.

Vergleichbare Ansätze: Universal Design

Im Internet gibt es neben den oben genannten Homepage-Baukästen und Wizards vergleichbare Ansätze, die unter dem Oberbegriff Universal Design geführt werden.

Bei dem Externer Link:  YAML-Framework wird ein ähnliches Konzept verfolgt: YAML ist ein Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen. Dabei steht ein möglichst hohes Maß an Flexibilität und Zugänglichkeit im Vordergrund.

Im Unterschied zum Vorlagenkatalog richtet sich YAML jedoch eher an erfahrene Webdesigner und -entwickler, die das Framework anwenden können, um damit neue Webauftritte für Kunden erstellen zu können.
Zudem verfügt das YAML-Framework nicht über Inhaltsvorlagen und Anwendungen.