logo

NetzRose

Gepflegte Linklisten, onlineTermine und Artikel für IT, Freiheit und Genuss.

Notizen zum Webauftritt NetzRose


Internetauftritt | Notizen | Über mich


Konzept

So lief das früher:

Noch ein Artikel und noch einer, damit man bei der Suchmaschine sein Ranking nicht verliert.
Und damit man seine User in den Sozialen Netzwerken bei Laune hält.
Und was wird der kommende Hype? Möglichst Erster sein, der das Thema im Blog behandelt.
Welches Stöckchen hält die Suchmaschine einem aktuell wieder hin? Was muss man vermeiden? Was muss rein? Hat der Artikel genug Zeichen oder muss ich ihn künstlich aufblähen? usw. usw.

Wenn man längere Zeit aus der SEO -Tretmühle ausgestiegen ist, kann man nachhaltiger publizieren und der Informationsflut entgegen steuern.

So handelt es sich bei netzrose.de eher um eine Art lebendes, ewig junges Buch. Ab einer gewissen Basis wächst es nur noch langsam. Statt dessen verjünge (aktualisiere) und vertiefe ich seinen Inhalt hauptsächlich.

Das "Buch" bietet Inhalte zu einer begrenzten Zahl an Themen.

Bevor ein neuer Artikel dazu kommt, wird geprüft, ob nicht statt dessen auch ein vorhandener inhaltlich gestrafft, um veraltete Infos gekürzt und mit aktuellen ergänzt werden kann.

Schreibe ich wirklich einen neuen Artikel, überprüfe ich vorhandene, wo ich das Thema schon kurz gestreift habe, nehme die Textpassagen heraus und verlinke statt dessen auf den neuen Beitrag.

Durch die thematische Begrenzung wird vermieden, dass man immer wieder ähnliche Artikel schreibt, die insgesamt mit ihrer hohen Zeichenzahl eher einen geringen Informationswert bieten, da man sich oft wiederholt.

Nachschlagewerke

Zur Darstellung der Seiten wird nur HTML5 und CSS benötigt. Quellen sind z.B.

Werkzeuge

Vom Computer auf den vServer lade ich die fertigen Dateien mit FileZilla hoch.

Derselbe Tippfehler oder später sonstige Änderungen in vielen Dateien lassen sich schnell mit einem dateiübergreifenden "Suchen und Ersetzen" z.B. per grep und als graphisches Werkzeug: z.B. "regexxer" erledigen.

Produziert werden die Dateien mit gedit, einem einfachen Texteditor.
Er bietet für die verschiedenen Klammerformen und Gänsefüßchen bereits eine automatische Vervollständigung mit dem passenden Gegenstück.

Ein HTML-Generator auf dem eigenen Rechner wäre auch möglich. Man muss sich eingewöhnen und mit entsprechenden Unzulänglichkeiten klar kommen wollen.
Ich gewöhne mich lieber wieder direkt an HTML sowie an CSS und brauche nur einen guten Texteditor.

Eine Alternative wäre allenfalls Bluefish. Der Editor ist ggf. praktisch, wenn man im wesentlichen fertige Texte noch mit HTML strukturieren möchte. Man kann, wie im CMS-Backend oder in der Textverarbeitung eine Textstelle markieren und ihr Anfang- und Endtags für fett, kursiv oder Absatz, sowie Listenzeile durch Buttons oder Tastenschlüssel zuweisen.
Da der Editor für so viele Programmiersprachen ausgelegt ist, ist sein Menü für meinen Bedarf eher umständlich. Ich habe meine Musterseiten ja fertig ausgetüftelt und benötige schon deshalb anschließend nur noch sehr wenig aus der Vielzahl an Auszeichnungen. Obwohl ich eigentlich eine "Maus-Schubserin" bin, fällt mir das Tippen von Text, gleich in Verbindung mit den Tags leichter.

Praktische Tastenschlüssel

Nützlich ist die Erweiterung Schnipsel (Snippets).
Beispiel: tippt man ref und löst den Schnipsel mit der Tabulatortaste aus, erscheint der komplette Tag für einen Link.
Man kann selbst weitere Schnipsel festlegen. Und sollte vorhandene Schnipsel überprüfen, ob sie noch für HTML5 konform sind. Finde ich schön, dass man das kann. Bei einem HTML-Generator hat man oft gar keine Möglichkeit, entsprechend einzugreifen.

Schnipsel zum Markieren
Im Inhaltsverzeichnis verwende ich ein Neu-Icon bei Links zu neuen oder stark überarbeiteten Artikeln.
Im Textfenster - rechter Maustaste - "Emoticon einfügen" - auswählen - einfügen.
Damit ich in der großen Auswahl nicht immer dieses Icon suchen muss, habe ich mir dafür ebenfalls ein Schnipsel angelegt.

Schnipsel als Glossar.
Manche Abkürzung mag nicht allen Usern geläufig sein. Um Lese- und Schreibfluss im Fließtext nicht zu beeinträchtigen, nutze ich zur Erklärung einen Tooltipp, den ich mir als Schnipsel gespeichert habe.
Beispiele: SEO oder CMS. Der Tooltipp wird eingeblendet, wenn der Mauszeiger darauf positioniert wird.
Ich tippe einfach, wie als Tastenschlüssel festgelegt: die [Abkürzung in Kleinbuchstaben] und [Tabulatortaste].
Kommt eine Abkürzung höchst selten vor, lohnt sich nicht, sie extra anzulegen. Um mir die Arbeit der Anweisung aber zu vereinfachen (und sie mir nicht merken zu müssen), verwende ich einen bereits vorhandenen Tastenschlüssel und ersetze einfach manuell Abkürzung und Erklärungstext.

...


... Fortsetzung

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:

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

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.

...


... Fortsetzung

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:

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

...


... Fortsetzung

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

...


... Fortsetzung

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.

...


... Fortsetzung

🆕️ Ü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:

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:

Titel und kurze Beschreibung:

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.