Webdesign: KISS Tutorial

keep it simple stupid

KISS bedeutet für jeden etwas anderes, denn nicht alles ist allen gleich einfach. Hier möchte ich Sie in das KISS-Design einführen, wie ich es mir denke und es auch praktiziere.

Zusammen wollen wir jetzt eine Website erstellen!
Aber keine Angst, ausser der deutschen Sprache brauchen Sie kein spezielles Vorwissen...

... aber einen lokalen Webserver. Falls Sie den (noch) nicht aufgesetzt haben, können Sie dieses Tutorial mit Einschränkung denoch durchexerzieren.

Code Editor

Aber Sie brauchen einen Code-Editor. Falls Ihnen keiner verfügbar ist, empfehle ich Ihnen Notepad++. Dieser kann alles, was wir brauchen und noch viel viel mehr.

Sie haben jetzt tatsächlich Notepad++ installiert?
Dafür bekommen Sie gleich noch ein paar Tipps!

  1. Im Menu Einstellungen ➜ Optionen finden Sie im Abschnitt (links) Neue Dateien auf der rechten Seite den Bereich Kodierung. Wählen Sie dort die Variante Neue Dateien als UTF-8 ohne BOM erstellen.
  2. Im Menu Einstellungen ➜ Optionen finden Sie im Abschnitt (links) Sprache auf der rechten Seite die Tabulator Einstellung.
    Ich empfehle eine Breite von 2-4 Zeichen, aber ohne Ersetzung zu Leerzeichen.

Aber jetzt geht's los...

Lokaler Webserver

Falls nicht bereits vorhanden, und so Sie wirklich vorhaben, Ihre eigene Website jetzt zu erstellen, sollten Sie einen lokalen Webserver (wie z.B. Apache oder nginx) aufsetzen.
Ohne einen solchen werden Browser aus dem Dateisystem gestartet keine Inhalte in das Navigationsmenu einfüllen und es werden keine Fonts geladen.

Aber jetzt geht's wirklich los...

Ordnung muss sein!

Erstellen Sie irgendwo in Ihrem Dateisystem (bzw. in httpd-root) die folgenden Ordner und Unterordner:

KISS empfiehlt Ihnen, für Datei- und Ordnernamen auf Grossbuchstaben und Leerzeichen zu verzichten. Verwenden Sie statt Leerzeichen das Zeichen _ (Underscore).

Ressourcen Installieren

Kiss-Theme runterladen

Sie finden das Classic-Theme unter classic.js. (Link öffnet in neuem Tab)

➜ Selektieren Sie (Ctrl+A) und kopieren Sie (Ctrl+C) den gesamten Script-Text.
➜ Fügen Sie (Ctrl+V) den Text in eine neues Dokument in Ihrem Code-Editor ein.
➜ Speichern Sie die Datei in webdesign_kiss_tutorial/js/ unter dem Namen main.js.

Lora Fonts runterladen

Das Classic-Theme verwendet Webfonts der Familie Lora. Das vorbereitete Fontpaket (Link öffnet in neuem Tab) Lora.rar enthält die Varianten Regular, Bold, Italic und Bold-Italic für Latin und Latin-Extended im woff2-Format.

➜ Entpacken Sie das rar Archiv im fonts Ordner

Iconset runterladen

Sie brauchen auch ein paar Icons. (Links öffnen in neuem Tab)
Für helle Themes: gui.svg
Für dunkle Themes: gui_dark.svg

Lassen Sie sich (Kontextmenu mit Rechtsclick) den Quelltext der Bilder im Browser anzeigen. Danach kopieren Sie wie zuvor den Quelltext und fügen diesen in ein neues Dokument Ihres Code-Editors ein.
Speichern Sie die Datei diesmal in webdesign_kiss_tutorial/images/ unter dem Namen gui.svg.

Die Sitemap erstellen

Die Sitemap ist die wichtigste Seite, und gleichzeitig eine normale HTML-Seite. Wir starten deshalb mit der Sitemap.
Dabei möchte ich Ihnen HTML Stück für Stück erklären.
Bitte öffnen Sie ein neues Dokument in Ihrem Code-Editor.
Speichern Sie die (noch leere) Datei diesmal in webdesign_kiss_tutorial/pub/ unter dem Namen sitemap.html.

Die Doctype Angabe

Wir wollen das Dokument sitemap.html jetzt bearbeiten.

Jedes HTML-Dokument beginnt mit einer Doctype Angabe!

<!DOCTYPE html>		

Die aktuelle HTML-Version, als HTML 5 bezeichnet, hat eine im Vergleich zu früheren Versionen viel einfachere Doctype-Angabe. Man kann sie sich sogar merken.

Das HTML-Element

Das HTML-Element wird mittels Start- und Endtag ausgezeichnet. Alles innerhalb dieser Tags ist Bestandteil des html-Elements.
Wir geben in diesem Element auch die Hauptsprache des Inhalts im Attribut lang an.

<!DOCTYPE html>
<html lang="de">		

</html>

Head und Body

Ein HTML-Element besteht aus zwei Hauptbereichen, die als head und body-Elemente bezeichnet werden.
Wir notieren Sie mittels der Start- und Endtags.

<!DOCTYPE html>
<html lang="de">		
	<head>

	</head>
	<body>
	
	</body>
</html>

Die Angabe der Zeichen-Kodierung

Die Zeichen-Kodierung (auch Charset genannt) ist eine unverzichtbare Angabe in allen Inhaltsseiten.
Sie sollten in der Regel alle Ihre Dokumente in UTF-8 speichern. Entspechend lautet die im head notierte Anweisung.

<!DOCTYPE html>
<html lang="de">		
	<head>
		<meta charset="utf-8">	
	</head>
	<body>
	
	</body>
</html>

Die Angabe einer Kurzbeschreibung

Die Kurzbeschreibung wird von Bots ausgewertet.
Von jetzt an werde ich nur noch ein Teil unseres Dokuments im Beispiel beschreiben.

...
<head>
	<meta charset="utf-8">
	<meta name="description" lang="de" 
		content="Die Sitemap - alle Links im Überblick">
</head>
...

Zeitangaben

Erstellungs- und Update-Datum können auf jeder Seite angegeben werden. Sie werden auf Wunsch von KISS-Themes eingeblendet.
Die Angaben sind aber optional und man kann sie auch weglassen.

...
<head>
	<meta charset="utf-8">
	<meta name="description" lang="de" 
		content="Die Sitemap - alle Links im Überblick">
	<meta name="date" content="2018-09-06">
	<meta name="last-modified" content="2018-09-10">
</head>
...

Titel der Seite

Das title-Element hat vielfältige Anwendung. Es erscheint in den Bookmarks, im Browser-Tab-Label etc...
Die Angabe entspricht einem kanonischen Link-Label.

...
<head>
	...
	<title>Sitemap</title>	
</head>
...

Das Theme-Script einbinden

Schliesslich binden wir das Classic Theme-Script ein. Der Name entspricht jenem, unter welchem wir das Script gespeichert haben.
Der relative Pfad führt uns zuerst mit .. eine Ebene über den aktuellen pub Ordner, und mit /js/ von dort in den Javascript-Ordner.

...
<head>
	...
	<title>Sitemap</title>	
	<script src="../js/main.js"></script>	
</head>
...

Der erste Inhalt

Wir wenden uns dem Body zu.
Jede Inhaltsseite beginne mit genau einem h1-Element, dem Haupttitel.
Danach folgt ein erster Absatz, ein p-Element (p = Paragraph), der vom Classic-Theme mit etwas grösserer Schrift als alle weitere Absätze gestylt wird.

...
<body>
	<h1>Sitemap</h1>
	<p>Das ganze Website-Angebot auf einen Blick.</p>	
</body>

Überschriften

HTML bietet 6 verschiedene Überschriften-Ebenen von h1 bis h6. Verwenden Sie diese logisch. Überspringen Sie keine Ebenen!
Das Classic Theme nimmt h1 und h2 Überschriften in die lokale Seiten-Navigation auf und fügt bei h2 Überschriften zusätzlich eine Nummerierung an.
Mit diesem Wissen ausgestattet schreiben wir eine nächste Überschrift.

...
<body>
	<h1>Sitemap</h1>
	<p>Das ganze Website-Angebot auf einen Blick.</p>	
	<h2>Permanente Menu-Einträge.</h2>	
</body>

Definitionslisten

HTML beschreibt Definitionslisten durch 3 Elemente: dl die Definitionsliste, dt für Listen-Titel und dd für Listen-Data.

...
	<h2>Permanente Menu-Einträge.</h2>
	<dl>
		<dt>Allgemein</dt>
		<dd>
			unsere Links kommen hier hinein.
		</dd>
	</dl>

Funktionalität ergänzen

KISS-Themes werten die Attribute data-for und data-group aus.
Der Wert navigation bestimmt, dass die Einträge dieser Liste in die permanente Navigation übernommen werden.
Der Wert searchform bestimmt, dass die Einträge dieser Liste über das Suchformular findbar sind.

...
	<h2>Permanente Menu-Einträge.</h2>
	<dl data-for="navigation searchform">
		<dt>Allgemein</dt>
		<dd data-group="Allgemein">
			unsere Links kommen hier hinein.
		</dd>
	</dl>

Links eintragen

Wir definieren gleich 3 essentielle Links, im Wissen, dass wir 2 entsprechende Seiten noch anlegen müssen.

...
	<dl data-for="navigation searchform">
		<dt>Allgemein</dt>
		<dd data-group="Allgemein">
			<a rel="bookmark" href="index.html">Startseite</a>
			<a rel="impressum" href="impressum.html">Impressum</a>
			<a rel="sitemap" href="sitemap.html">Sitemap</a>
		</dd>
	</dl>

Links erklärt

...
	<a rel="bookmark" href="index.html">Startseite</a>

Das a-Element (en: a = anchor) wird, wenn mit einem href-Attribut (en: href = hyperlink reference) ausgestattet, zu einem Weblink. Das href Attribut erhält die URL der Zieladresse. Da alle unsere HTML-Seiten im gleichen pub Ordner liegen, reicht eine einfache Dateiangabe für unsere relative URL.
Die rel-Attribute (en: rel = relation) haben eine besondere Funktion. Das Iconset stattet diese mit entsprechenden Icons aus. Auf gewisse Werte reagieren auch Index-Bots.

Sitemap im Browser aufrufen

http://localhost/PATHTO/webdesign_kiss_tutorial/pub/sitemap.html
file:///C:PATHTO/webdesign_kiss_tutorial/pub/sitemap.html

Browser-Screenshot Browser-Screenshot

Falls etwas signifikant abweicht:
Bei lokalem Webserver: Sie haben wahrscheinlich einen Fehler im Code produziert.
Aufruf aus dem Filesystem: Wie zu erwarten werden Menuinhalt und Fonts nicht gerendert.

HTML validieren

Gerade Anfänger sollten ihr HTML validieren. Der W3C-Service unter https://validator.w3.org/#validate-by-input erlaubt direkte Code-Eingabe.
In unserem Fall wird er sich über die verwendeten rel="sitemap" und rel="impressum" beschweren. HTML 5 ist aber ein Living Standard, das heisst Teile sind nicht definiert, oder der W3C-Standard ist nicht mit dem WhatWG-Standard synchron.
im Falle der rel-Attribute brauchen wir uns keine Sorge machen. Das heisst aber nicht, dass wir den Validator nicht ernst nehmen sollen, denn seine Fehler können Browser-Anzeige-Missverhalten erklären und beheben helfen.

Weitere Seiten erstellen

Wir legen in webdesign_kiss_tutorial/pub/ zwei weitere Dateien an mit den Namen index.html und impressum.html.

Die Index-Seite (Startseite)

Webserver sind sehr oft so konfiguriert, dass sie bei einem Aufruf der Adresse www.example.org/ eine index.html Seite ausliefern.
Man bezeichnet diese Seite auch oft als Home oder Startseite.
Die Startseite erklärt dem Gast, worum es auf der Website insgesamt geht. Dabei werden wichtige Themengebiete zusammengefasst und die Eingangsseiten der Themengruppen verlinkt.
Die Startseite ist auch die prädestinierte Bookmarking-Seite. Das Classic Theme wird die Seite mit einem entsprechenden Stern-Icon versehen.

Startseite editieren

Schreiben Sie wieder das Grundgerüst inklusive head und body. Kopieren Sie danach den Inhalt des Heads aus der Sitemap in die index.html.
Danach müssen Sie folgende Einträge anpassen.

...
<head>
	...
	<meta name="description" lang="de" 
		content="Startseite - meine erste Website entsteht">
	...
	<title>Startseite</title>
</head>
...

Startseite Inhalt

Als etwas Neues wird hier das br-Element (en: br = break) für harte Umbrüche im Text gezeigt. Nutzen Sie diese nur für wirkliche Umbrüche und nicht etwa, um Abstand zwischen verschiedenen Text-Blöcken zu schaffen. Denn das ist die Aufgabe von CSS.
Ich schlage Ihnen provisorisch diesen Inhalt für den body vor:

...
<body>
	<h1>Startseite</h1>
	<p>Willkommen auf meiner Webseite. <br>
	Diese ist noch ganz im Entstehen. 
	Unterstützt werde ich dabei durch das Classic-Theme.</p>
	<h2>Titel des Hauptthemas Ihrer Seite</h2>
	<p>Etwas Text</p>	
</body>

Die Impressum-Seite (Startseite)

Domain-Inhaber sind in verschiedenen Ländern Europas dazu verpflichtet, eine gut erreichbare Impressum-Seite zu betreiben. Das Classic Theme trägt dem Rechnung. Die Adresse ist deshalb im Konfigurationsabschnitt einstellbar. Zusätzlich wird ein Icon ergänzt. Der Inhalt der Impressum-Seite ist Kontaktinformation. Dazu gehört mindestens eine Email-Adresse.
Sie können zudem in der Impressum-Seite Ihre Datenschutzerklärung angeben.
Das Classic Theme setzt selber keine Cookies. Als rein statische Javascript-Datei veranlasst es keinerlei besondere Log-Tätigkeit. Da Sie hier angeregt wurden, Icons, Fonts und Script selber zu hosten und das Theme das auch voraussetzt, erzeugt das Theme keinerlei zusätzliche Datenschutzrelevante Tatsachen.

Impressum editieren

Gehen Sie wie zuvor vor, passen Sie den head an und erstellen Sie eine Hauptüberschrift Impressum -Kontakt. Wir verwenden wieder Definitionslisten, um Kontaktdaten im body anzugeben. Wir zeigen auch, wie man einen Email-Link beschreibt. Entscheidend ist, dass der Wert des href mit dem Protokoll mailto: beginnt.

...
	<dl>
		<dt>Email</dt>
		<dd><a href="mailto:yourmailbox@example.org">yourmailbox@example.org</a></dd>
		<dt>Adresse</dt>
		<dd>Hans Mustermann<br>
			 Beispielstrasse 0815<br>
			 0815 Beispielhausen-D<br>
		</dd>
	</dl>
...

Lokale Styles einfügen.

Manchmal braucht eine Seite eine besonder CSS-Regel aber es lohnt sich nicht, eine globale Regel ins Theme user.css zu schreiben. Wir schreiben ein style-Element in die betreffende Seite. Die folgende Regel gestaltet die Definitionsliste in der Sitemap.

...
<head>
	...
	<style>
main dl a {display:block}
main dl {display: grid; grid-column-gap: 0.3em; grid-template-columns: 1fr 5fr; justify-content: center; }
main dl dd { min-width:35vw; padding-bottom:0.5em; }
	</style>	
</head>
...

noscript CSS

Gewisse Seiten sind so essentiell, dass man auch bei deaktiviertem Javascript unbedingt eine korrekte Anzeige gewährleisten will. Wir können für diesen Fall ein spezielles leichtgewichtiges nojs.css einbinden.

...
<head>
	...
	<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>
</head>
...

Mehr Information

Sie können hier mehr Informationen erhalten über Die Rolle der Sitemap und weitere Möglichkeiten, über Iconsets inklusive einer Referenz aller semantischen Icon-Klassen und eine allgemeine Dokumentation zu weiteren gestylten Elementen und Klassen, die das Classic Theme unterstützt.

Ende

Damit kommen wir zum Schluss.
Ich hoffe, dieses Tutorial war inspirierend und hat gezeigt, dass man nicht immer eine serverseitige Logik braucht, um eine schlichte Inhaltsseite mit dem erwarteten wie praktischen Website-Drumherum zu versehen.
Ganz übersprungen haben wir, dass Sie das Classic-Theme konfigurieren können und sollen. Aber das muss ich Ihnen, so glaube ich, nicht erklären.

Danke für Ihre Geduld und Teilnahme.