NetzRose

Organisation

Für das Thema Webseite erstellen, ist ein neuer Lesezeichen-Ordner in der Browserleiste nützlich. Neben dem Link zu Selfhtml kann man dort künftig alle weiteren nützlichen Links speichern, falls man später nochmal was nachschauen möchte. Beispielsweise:

• die Liste der Fehlerquelle bei CSS,
• oder die Anleitung für das Schnipsel-PlugIn.
• Auch die Links zu den Validatoren, passen gut in den Lesezeichen-Ordner.

Für die Tastenschlüssel macht es Sinn, sich eine kleine Liste neben die Tastatur zu legen. Denn sonst sind die Schlüssel nach einigen Tagen Pause nicht mehr nützlich, da man sie vergessen hat. Mögen sie einem beim Erstellen auch noch so logisch erschienen sein.

Die fertig gestalteten Musterseiten werden mehrfach kopiert und gesichert. Sie sind die Grundlage für neue Artikel. Damit ich bestimmte individuelle Angaben (z.B. im head bei title und description) nicht vergesse, steht dort jeweils die Zeichenfolge XXX. Das fällt mir leichter auf. Vor der obligatorischen Rechtschreibprüfung durchsuche ich das Dokument einfach noch nach dieser Zeichenfolge und ersetze sie durch die entsprechenden fehlenden Angaben.

Gestaltung

Ziel ist ein Webauftritt, der das gängige Seitenverhältnis eines Monitors (16:9) ausnutzt, das dem menschlichen Blickfeld bestmöglich entspricht. Der Auftritt soll keine unnötige Ablenkungen bieten, sondern den Lesefluss unterstützen.

Dies geschieht einfach durch lesefreundliche fortlaufende Textspalten (columns).

Vorteil

man kann zuerst "mit einem Blick den Inhalt scannen"
und dann entscheiden,
ob und von wo an man lesen möchte.

Schwächen

Browser bieten für die Darstellung am Monitor (noch) keine ähnlichen Möglichkeiten, wie für den Druck. D.h. es kommt leider oft vor, dass eine

• Zwischenüberschrift am Spaltenende sitzt.
• neue Spalte mit der Restzeile eines Absatzes beginnt.

Nachhaltig

Komplette HTML-Seiten werden super schnell ausgeliefert.

Die Dateien sind untereinander mit relativen Pfadangaben referenziert. Weitergabe und Umzug sind unkompliziert.

Das Inhaltsverzeichnis spart zusätzliche Dateien (Kategorien, Stichwortlisten) und Suchfunktion.

Statt zusätzlicher Scripte werden wieder Browserfunktionen genutzt.
Große Artikel lassen sich per Browser durchsuchen.
Man navigiert mit der wieder mit dem Zurückbutton des Browsers.

In Anlehnung an Bedrohung Blackout von T. C. A. Greilich habe ich angefangen, dem meist ziemlich sinnlosen Treiben der Crawler, Bots und Spider entsprechend Grenzen zu setzen.
Es darf jetzt nur noch mein Inhaltsverzeichnis indexiert werden. Ich finde, das reicht.

...

Abgespeckte Navigation

Will man auf jeder Seite eine ausführliche Navigation, müsste man wegen einer dazu gekommenen Seite bei allen anderen die Navigation dafür erweitern.

Technisch geht das beispielsweise mit PHP auf dem vServer auch automatisch. Man legt für Inhalt, Kopf, Fuß und Navigation einzelne Templates an und der Server setzt aus diesen Dateien die HTML-Seite zusammen.

Alternativ böten sich fortlaufende Indexseiten an, wie sie ein CMS gewöhnlich ausliefert. Es werden typischerweise in Blogs Überschriften und Teaser gelistet. Die Liste zielt auf Aktualität und ist thematisch durcheinander. Also macht ein CMS zusätzliche Listen nach Kategorien.
Die Priorität auf Aktualität wird Beiträgen oft nicht gerecht.

Ich glaube, eine umfassende Navigation wird überbewertet. Eine kleine Navigation oben genügt.

Aber die sollte natürlich immer sichtbar sein.
Daher ist die Position des Kopfbereichs (Header) feststehend (fixed).
Das muss man natürlich berücksichtigen, wenn man innerhalb einer Datei verlinkt.
Das LinkZiel würde unweigerlich unter dem Kopfbereich verschwunden sein. Man muss also das Ziel höher verankern.

Über..., Impressum, Datenschutz

Wer in seine Statistik schaut, stellt fest: Es ist selten, dass sich jemand länger aufhält und mehr als drei Artikel öffnet. - Das hat in aller Regel nichts mit der Qualität der Inhalte und der Darbietung zu tun.

Ehe ich einen verlinkten Beitrag lese, will ich auf unbekannten Auftritten erst mal mehr über den Anbieter und sein Konzept wissen.
Nicht erst juristische Gründe, sondern Medienkompetenz erwarten also griffbereite Links zu Impressum, Datenschutz und dergleichen.

Start

Die Startseite als Cover bietet kleine Infos über neue Artikel. Und ggf. zusätzlichen Service Termine (passend zu meinen Schwerpunkten).

Inhaltsverzeichnis

Die Inhaltsübersicht zeigt, dass ich derzeit Artikel zu drei unterschiedlichen Themen biete.
Tatsächlich liegen auch die Artikel in entsprechende Unterverzeichnissen hier auf dem Rechner und auf dem vServer.

Den Überblick im Inhaltsverzeichnis unterstützen:

• Knappe, treffende Titel
• Datum und Neu-Icon
• saubere thematische Sortierung

Durch diese Logik erübrigen sich Hashtags und einzubauende Suchfunktion.

...

Farben

Jeder kann seine eigenen Vorlieben ergründen und in den Browserenstellungen modifzieren: Hintergrundfarbe, Schrift, Text- und Linkfarben, sowie ob Links unterstrichen sein sollen oder nicht. Browser dürften da allerdings gerne mehr Feinabstimmung anbieten. Nicht nur ganz oder gar nicht.

Textverteilung

Startseite, Impressum und Datenschutzerklärung sind nicht vierspaltig. Sie haben eine gemeinsame eigene CSS-Datei.

Die meisten anderen Dateien teilen sich ebenfalls ein gemeinsames, einzubindendes Stylesheet.

Die Artikel haben je nach Thema unterschiedliche Farben.Das unterstützt die Orientierung und beugt Ermüdung durch Langeweile vor. In eine HTML-Seite wird also das Haupt-Stylesheet und eine kleine zusätzliche CSS-Datei eingebunden.
Damit ich nicht durcheinander komme, liegt hier in jedem thematischen Ordner eine Datei muster.html, mit der ich neue Artikel anlege.

Zusammenhängende Artikel lassen sich, wie oben mit dem Menü-Punkt "Über NetzRose" auf mehrere Dateien verteilen und man kann dafür eine Unternavigation anbieten wie oben in der 1. Spalte mit |Internetauftritt|Notizen|Über mich|.

Ein Thema muss nicht künstlich zerrissen werden. Das belasse ich lieber auf einer Seite.
Ich unterteile so (... Linie ... Fortsetzung), dass man nicht ewig lange Spalten nach unten und wieder hoch scrollen muss.
Ist man am Ende angekommen, bekommt solch eine Seite noch am Fuß in der Mitte den Link "nach oben" zum bequemen Hochscrollen.

Validieren

• Zunächst ist natürlich die Rechtschreibprüfung zu nennen.
• Das World Wide Web Consortium W3C stellt Werkzeuge für Überprüfung der Dateien für HTML, CSS und Feed zur Verfügung.
• Meine Sicherheitsvorgaben in der .htaccess für User und für den Server prüfe ich beim Mozilla Observatory und bei Webkoll.. Nach den Angaben "Header set" füge ich von Jeff Starr die 7G Firewall vor weiteren eigenen Anweisungen ein.
• Der Link Checker des W3C hilft bei der regelmäßigen Überprüfung und Pflege von Linklisten. Er ist mir allerdings zu langsam. Weiter zur Linkpflege

...

Feed anbieten

Da ich hier ohne CMS oder HTML-Generator publiziere, fertige ich meine Feed-Datei ebenfalls manuell an.

Ob mein Feed korrekt ist, kann man beim W3C prüfen lassen.

Wer sich dafür interessiert, ich habe ein Muster mit einigen Anmerkungen zusammen gestellt als TXT-Datei zum Download.

Kommentarfunktion

"Diese Lösung einer Internetpräsenz enthält aber keine Kommentarfunktion!"

Ja, das stimmt. Ich will es kurz machen. Rein technisch sind Kommentare so natürlich nicht vorgesehen.

Es ließe sich zwar serverseitig mit dem Einbinden entsprechender Skripte bewerkstelligen. Aber das will ich nicht.
Ich will keine unnötigen Daten von Usern. Und ich will ihnen auch nicht zumuten, ihre Daten bei einer Kommentierplattform abzuliefern. Die ja Kommentare über verschiedene Internetpräsenzen hinweg zusammen stellen und wer weiß was damit machen kann.

Sinnvoll: Webseite mit Sozialem Netzwerk verknüpfen

Wieso gibt es die Sozialen Netzwerke? Wieso teilt man dort seine neuen Artikel mit?
Genau, weil allenfalls dort User Lust haben, sich zu äußern.

Also poste ich die Info über einen neuen Artikel bei Hubzilla, lasse mir den konkreten Link auf das Posting anzeigen und verlinke gezielt darauf am Ende des Artikels.
Schon sind mögliche Reaktionen und der Artikel miteinander verknüpft.

Auf vielen Webseiten werden Feeds für Artikel und Feeds für Kommentare angeboten.
Auf netzrose.de gibt es Feeds zu neuen Artikeln oder größeren Erweiterungen.
Und bei Hubzilla kann man die Kommentare in meinem Kanal als Feed dazu abonnieren.

Und das Beste: Jeder bleibt in seiner Verantwortung und behält die Datenhoheit.

Ich muss nur an einer Stelle, statt in vielen Netzwerken, darauf achten, ob etwas kommentiert wird.
Postings in Sozialen Netzwerken werden durch diese entstresste Organisation aufgewertet.
User bekommen vielleicht Lust, sich selbst irgendwo im Fediverse einen Account anzulegen.

Und natürlich gibt es die Möglichkeit, einen mir zur Veröffentlichung überlassenen Kommentar unter dem Artikel als Leserbrief einzupflegen, wie zum Beispiel hier und hier.

Weiterer Diskussions- oder Infobedarf?

Mir liegt daran, mitzuhelfen, das WWW für uns Menschen zu einem tollen Ort zu machen, ohne das analoge Leben zu vernachlässigen.

Ich habe hier sehr viele Punkte angeschnitten, zu denen ich mir vorstellen könnte, sie ausführlicher in Artikeln zu behandeln.

Damit will ich nicht sagen, dass ich das nicht auch ohne Feedback tun möchte. Sondern will darauf hin weisen, dass ich bei Bedarf z.B. gerne genauer erzähle bzw. diskutiere.

...

🆕️ Über die Schulter schauen

Stuktur der HTML-Datei

Für diesen Auftritt werden HTML5-Elementen so eingesetzt:

 
<!doctype html>
<html lang="de">
 | <head>
 | </head>
 | <body>
 | | <header>
 | | | <nav>
 | | | </nav>
 | | </header>
 | | <main>
 | | | <article>
 | | | </article>
 | | | <aside>
 | | | </aside>
 | | </main>
 | | <footer>
 | | </footer>
 | </body>
</html>

Meist bemühe ich mich, korrekte Begriffe zu verwenden, damit bei den o.g. Nachschlagewerken das Nötige vertieft werden kann.
Es hilft auch, sich auf Webseiten den Quellcode anzuschauen. Z.B. Bei Firefox in der Seite mit der rechten Maustaste - Menü - "Seitenquelltext öffnen".

Keine Angst. Jedenfalls meine HTML-Dateien sind recht übersichtlich. Denn JS wird nicht verwendet und aus Sicherheitsgründen prinzipiell CSS in separaten Dateien notiert.

Spalten

HTML ist sowieso responsive.
Da ich einfach die gesamte Breite für fortlaufende Spalten (columns) nutze, erübrigt sich eine Aufteilung der HTML-Datei per Flexbox oder Grid. Denn sonst hätte ich für schmalere Geräte viele Angaben zusätzlich modifizieren müssen.
Würde ich die Navigation seitlich haben wollen, käme ich um eine arbeitsaufwändigere CSS-Datei nicht herum.

Die Spalten für den fortlaufenden Text befinden sich also zwischen den article-Bereichen.
Würden die Spalten zu lang, beende ich den article und beginne einen neuen.

Zwar kümmere ich mich nicht um die schmaleren Geräte, aber ich nehme mir die Freiheit manchmal weniger und dafür breitere Spalten zu nutzen. Daher lege ich die maximale Spaltenzahl fest und nutze entsprechend unterschiedliche CSS-Dateien.
Beispiele:

• Dreispaltig
• Zweispaltig

Im Quelltext sieht man, dass immer zwei CSS-Datein eingebunden werden. Ich habe es so eingerichtet, dass Menschen sich diese Dateien aus dem Quelltext jeweils aufrufen können (Spider, Bots und Crawler nicht).
Neben den eigentlichen, für den Hauptteil mit den Spalten, gibt es noch CSS-Dateien benamt zur thematisch farblichen Absetzung (beige, blau, it und weiss).

Arbeitsweise

Wenn ich eine neue Seite (Artikel, Beitrag) schreiben möchte, dann gehe ich folgendermaßen vor:

• Je nach Kategorie (IT, Freiheit, Genuss) öffne ich mit gedit meine dazu passende Musterseite und speichere sie mit ihrem zukünftigen Namen ab.
• Den Artikel verfasse ich direkt im article-Bereich.
• Dann lese ich ihn mir durch,
• setze weiche Umbrüche und Absetze, ggf. Aufzählungspunkte etc. sowie Zwischenüberschriften.
• Prüfe im Browser, ob und wo ich den Artikel unterteile, damit die Spalten nicht zu lang sind.
• Lege den Titel fest für Überschrift und head-Bereich.
• Formuliere stichwortartig im head-Bereich die Metaangabe description.
• Rechtschreibprüfung.
• Damit ist der Artikel fertig und wird wieder gespeichert, bleibt aber noch offen.

Titel und kurze Beschreibung:

• trage ich im Inhaltsverzeichnis (index.html) ein;
• übernehme ich in den Feed (rss.xml);

Der Artikel, sowie aktualisiertes Inhaltsverzeichnis und ergänzten Feed lade ich per FTP auf den vServer.

Mit Titel, Beschreibung und Link wird der neue Artikel auf Hubzilla geteilt.
Vom so entstandenen Hubzilla-Posting die Original-URL kopiere ich in den immer noch in gedit offenen neuen Artikel unten in der Fußzeile (Hubzilla-Link für Kommentare).
Speichern.
Nun wird der aktualisierte Artikel erneut per FTP hoch geladen.
Fertig.

Zum Monatsanfang werden im Inhaltsverzeichnis die Neu-Icons entfernt.

Möglicherweise kommt einem das recht arbeitsaufwändig vor.
Aber ich blogge ja nicht, sondern führe ein "lebendes Buch".
Es kommt also gar nicht so oft vor, dass ich neue Artikel schreibe.
Wenn ich bestehende Artikel umstrukturiere und ergänze, brauche ich im Artikel und im Inhaltsverzeichnis nur ggf. das Datum anpassen. Und beim bereits verlinkten Post auf Hubzilla teile ich noch Änderungen mit.

Unbezahlbar: Diese Arbeitsweise ist zudem zeitlos. Einmal angewöhnt, geht sie leicht von der Hand. Ich weiß und verstehe, was ich tue. Auf Weiterentwicklungen in HTML und CSS kann ich direkt reagieren, ohne von diverser Software abhängig zu sein, die wiederum auch abhängig ist von PHP-Entwicklungen etc.