Hier nun das angekündigte Tutorial, in welchem ich eine Seite (als Ersatz für Facebook-Seiten... und mit deutlich mehr Möglichkeiten) für eine Organisation erstelle.

Hier nun das angekündigte Tutorial, in welchem ich eine Seite (als Ersatz für Facebook-Seiten... und mit deutlich mehr Möglichkeiten) für eine Organisation erstelle.

Die Organisation dient hier nur als Beispiel. Es kann nach dem Prinzip auch eine Seite für eine Firma, ein Geschäft, eine Band, einen Künstler, Schriftsteller... für einfach alles erstellt werden.

Ich habe mich für eine Organisation entschieden, weil ich einmal mit einigen Mitstreitern eine gegründet habe. Sie ist allerdings inzwischen aufgelöst und die Webpräsenz (ehemals WordPress) nur noch als statisches Archiv vorhanden. Ich habe sie gewählt, weil ich mir keine Inhalte aus den Fingern saugen muss und es unschädlich ist, wenn ein Hubzilla-Kanal für sie existiert, obwohl es sie nicht mehr gibt.

Kanal erstellen

Kanal ist das erste Stichwort! Natürlich sollte man sich für ein solches Projekt einen Kanal bei Hubzilla anlegen. Wie das funktioniert kann man in der Hubzilla KnowledgeDB oder im Hubzilla Benutzerhandbuch nachlesen.



Je nach gewünschter Funktionalität muss man die passende Kanalrolle auswählen. Generell ist "Öffentlich" für solche Zwecke aber eine gute Wahl.

Profil "schärfen"

Wichtig ist nun, das Profil wirklich mit sinnvollen Informationen zu bestücken. Die Kurzbeschreibung ist ein Muss, weil sie in der Profilkarte erscheint und jeder Besucher so sehen kann, wo er denn gelandet ist.



Wenn die Veröffentlichung der Anschrift gewünscht ist (bei Organisationen sinnvoll und auch erforderlich), muss im Profil dann auch dieser Bereich ausgefüllt werden.



Schlüsselwörter für das Verzeichnis helfen, dass der Kanal auch gefunden werden kann.

Jetzt sollten auch noch ein Profilbild (z.B. das Logo der Organisation) und ein Header-Bild erstellt, hochgeladen und als solche verwendet werden.

Theme anpassen

Anschließend muss man sich Gedanken über die grundlegende Optik, insbesondere die Farbgebung Gedanken machen. Hier sollte man das Theme entsprechend anpassen.

Da meine Organisation im Logo die Farben Grün, Weiß und Schwarz nutzt, habe ich die "Primary theme color" auf ein entsprechendes Grün gesetzt und für einen etwas geringeren Kontrast die Hintergrundfarbe auf ein recht helles Grau. Hier kann und muss jeder selbst entscheiden, wie sehr er die Farben beeinflussen möchte.

Apps installieren

Jetzt müssen noch wichtige Apps installiert werden. Auf jeden Fall die ActivityPub App, damit der Kanal auch mit allen Diensten im Fediverse interagieren (föderieren) kann. Außerdem werden die Apps "Webseiten" und "PDL-Editor" benötigt. Möchte man ein Hilfe-System, eine FAQ oder ein richtiges kleines Wiki anbieten, dann installiert man auch noch die App "Wiki". Sollen Artikel auf der Seite veröffentlicht werden, installiert man außerdem die App"Artikel".

Auch eine Seite in einem Sozialen Netzwerk braucht sowas wie eine Homepage, eine Startseite. Und die erstellen wir jetzt.

Webseiten erstellen

Dafür ruft man aus dem App-Menü (⋮) die Webseiten-App auf.

Blöcke erstellen

Als erstes erstellt man nun einen neuen Block, welcher den Inhalt der Startseite enthält. Man hat die Wahl zwischen bbCode, HTML, Markdown, reinen Text, (Comanche Layout) und PHP für die Darstellung und Gestaltung des Inhalts. Ich habe mich für bbCode entschieden, weil dies für die Darstellung des Inhalts völlig genügt und bbCode quasi "das Blut in den Adern von Hubzilla" ist.

Einen Titel muss man hier nicht vergeben. Der erste Block, den man in einem Kanal erstellt, bekommt automatisch den Namen "main" (diesen benötigt man, um den Block später zur Nutzung zu referenzieren).



Nach dem Eingeben des Inhalts klickt man nun auf "Teilen" und der Block ist erstellt.

Blöcke mit dem PDL-Editor in Hubzilla-Seiten einbauen

Ich habe beschlossen, dass der Inhalt der Startseite nicht nur auf der eigentlichen Startseite, sondern auch in der Profilansicht angezeigt werden soll, weil darin der Zweck der Organisation beschrieben wird, was gut zum Profil passt.

Damit der Block "main" in der Profilansicht angezeigt wird, ruft man den PDL-Editor auf. Im Hauptmenü des PDL-Editors (zentriert am unteren Bildschirmrand), wählt man zunächst im Menüpunkt "MODULES" das Modul "profile". In diesem Modul wählt man nun im Menüpunkt "ITEMS" das Modul "main", welches man ja selbst erstellt hat, aus und schiebt es per Drag-and-Drop in die Mitte (Inhaltsbereich) an die oberste Stelle. Damit die Änderungen übernommen werden, muss man nun noch im Menü auf "APPLY" klicken... und die Sache ist erledigt.





Ruft man nun das Profil des Kanals auf, so wird im Inhaltsbereich der Inhalt des Blockes "main" angezeigt.

Ein Navigations-Menü als Block

Weil bei der Organisationsseite noch weitere andere Inhalte und Seiten angezeigt werden sollen, benötigt man ein Navigations-Menü. Dieses kann man über die Funktion "Menüs" der App "Webseite" erzeugen. Es wird ein vertikales Menü als unsortierte Liste erzeugt, das man an verschiedenen Stellen in die Seite einbauen. Mir schwebte aber ein horizontales Menü vor, das auf jeder relevanten Seite an oberster Stelle des Inhaltsbereichs erscheint. Also habe ich das Menü als normalen Block selbst erstellt.

Achtung: Auch hier kann man für den Inhalt bbCode wählen. Allerdings hat das den Nachteil, dass Links, die zu anderen selbst erstellten Webseiten führen, in einem neuen Tab geöffnet werden, wenn man die Tags [url=][/url] verwendet. Für dieses Tag-Paar gibt es nicht die Option "target=_self". Hier ist es also sinnvoll, HTML zu verwenden.



Das Menü habe ich nun mit nebeneinander stehenden Menüpunkten, getrennt durch ein Leerzeichen, einen Stern und einem weiteren Leerzeichen gestaltet und die einzelnen Menüpunkte nach dem Schema

[url=https://webseite.tld]Menüpunkt[/url]

verlinkt.

Um z.B. auf der Profilseite das Menü zur Verfügung zu stellen, schiebt man im PDL-Editor das selbst erstellte ITEM "menu" im MODUL "profile" an die oberste Stelle und klickt auf APPLY. Nun erscheint das Navigationsmenü auf der Profil-Seite.

Startseite mit dem Block "main"

Der Block "main" sollte aber nun auch die Startseite der Webseite sein. Der Inhalt muss also, unabhängig von den hubzilla-eigenen Seiten der Apps als Webseite angezeigt werden. Und das soll in einem konsistenten Layout geschehen. So soll auch auf solchen Webseiten in der linken Seitenleiste die Profilkarte erscheinen und die Verbindungen des Kanals.

Ein Layout erstellen

Was man braucht, ist also ein Layout. Ein solches kann man mit der App "Webseiten" erstellen.

Regionen

Layouts beschreiben den grundsätzlichen Aufbau einer Hubzilla-Webseite und die Inhalte der verschiedenen Regionen auf dem Bildschirm.

[region=banner][/region] ist der obere Bereich, wie er auf der Kanalseite angezeigt wird. Dort zeigt er das Cover-Foto an.

Das bietet sich für die Webseiten ebenfalls an. Also beginnt unser Layout mit den Zeilen

[region=banner]
[widget=cover_photo][/widget]

Als nächstes wird die Gestaltung der linken Seitenleiste, also der Region [region=aside] [/region] festgelegt.

Dort sollte ja nun die Profilkarte und die Liste der Verbindungen angezeigt werden.

Die Layout-Beschreibung dafür ist

[region=aside]
[widget=fullprofile][/widget]
[widget=common_friends][/widget]
[/region]

Im Inhaltsbereich, also der Region [region=content] [/region] soll schließlich das Navigationsmenü und darunter der Inhalt des Blocks "main" zu sehen sein. Das codieren wir so:

[region=content]
[block]menubar[/block]
[block]main[/block]
[/region]

Für die rechte Seitenleiste [region=right_aside] [/region] ist mir noch nix eingefallen... die lassen wir also erstmal leer.

Der Inhalt des Layouts für die Startseite sieht also so aus:

[region=banner]
[widget=cover_photo][/widget]
[/region]
[region=aside]
[widget=fullprofile][/widget]
[widget=common_friends][/widget]

[/region]
[region=content]
[block]menubar[/block]
[block]main[/block]

[/region]
[region=right_aside]

[/region]

Das Layout braucht auch einen Namen, um es später für die Webseite referenzieren zu können. Hier habe ich den Namen "startseite" gewählt.

Ein Klick auf "Teilen" und das Layout für die Startseite ist erstellt.

Webseite erstellen

Nun muss nur noch aus den Einzelteilen die eigentliche Webseite erstellt werden. Dafür wählt man in der App "Webseiten" den Punkt "Seiten".

Hier habe ich dann eine Webseite erstellt. Inhaltstyp habe ich bei bbCode belassen. Der ist in diesem Fall ohnehin unerheblich, weil der Inhalt der Webseite hier ja nicht erstellt wird, sondern im Block.

Bei Seiten-Layout wählt man nun das soeben erstellte Layout aus der Auswahlliste.

Bei der eigentlichen Webseite ist es auch sinnvoll, der Seite einen Titel zu geben, denn dieser erscheint bei der Ansicht im Titel des jeweiligen Browser-Tabs.

Und ein Name muss vergeben werden. Da es die Startseite ist, habe ich "home" gewählt. Unter diesem Namen ist die Seite später aufrufbar (/page//, also in meinem Fall https://klacker.org/page/exraucher_ig/home).

In unserem Fall ist der Inhalt unerheblich, er darf nur nicht leer sein. Ich habe einfach "main" hineingeschrieben.



Und nun wieder auf "Teilen" klicken... die Startseite ist fertig. Ruft man sie auf, sieht sie nun so aus:

Menü erweitern

Jetzt ist es an der Zeit, den Block "menubar" zu editiern und den Link "Startseite" mit dem Link zu der gerade erstellten Webseite zu hinterlegen.

In meinem Beispiel sieht der Block nun so aus:

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ Manifest ★ Aktuell ★ Positionen ★ Informationen

Und die Startseite so:



Weitere Seiten

Nach dem selben Schema habe ich dann auch die Seite "manifest" (Manifest / Vereinbarungen; Seitenlink: manivereinb) mit dem Inhalt als Block und dem identischen Layout (nur dass hier im Inhaltsbereich der Block "manifest" dargestellt wird) erstellt. Der Link zu der neuen Seite (das war einmal die Anzeige des Manifests der Organisation, also sowas wie bei einem Verein die Satzung) wurde in den Menüblock eingebaut:

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ [url=https://klacker.org/page/exraucher_ig/mani-vereinb]Manifest[/url] ★ Aktuell ★ Positionen ★ Informationen

Artikel mit der Artikel-App

Unter "Aktuelles" wurden bei der ursprünglichen Original-Seite, Artikel zu verschiedensten relevanten Themen angezeigt. Nun könnte man das auch als Webseite realisieren, aber es wäre ein hoher Aufwand, die Beiträge komfortabel zugänglich zu machen. Bei solchen Bereichen bietet es sich an, die hubzilla-eigene Funktionalität zu nutzen, nämlich die Artikel.

Ich habe zu Demonstrationszwecken die letzten beiden veröffentlichten Artikel in dem Kanal mit der App "Artikel" (muss installiert und aktiviert werden, sofern nicht schon geschehen) veröffentlicht. Dabei habe ich jeweils auch eine Kategorie angegeben, damit auf der Artikelseite auch die Kategorie-Anzeige zu sehen ist.

Damit sich die Seite der Artikel-App optisch und in der Art der Navigation in die Organisations-Seite einfügt, habe ich im PDL-Editor im MODUL "articles" den Menu-Bar Block wieder im Inhaltsbereich ganz oben eingefügt.

Artikel im Menü zugänglich machen

In den Menü-Bar Block wird nun noch der Link zur Artikel-App eingefügt:

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ [url=https://klacker.org/page/exraucher_ig/mani-vereinb]Manifest[/url] ★ [url=https://klacker.org/articles/exraucher_ig]Aktuell[/url] ★ Positionen ★ Informationen

Dokumente in der Cloud anbieten[7h3]

Auf der Original-Webseite findet man unter dem Menüpunkt "Positionen" verschiedene Stellungnahmen der Interessengemeinschaft zu diversen Themen. Diese könnte man als einzelne Webseiten anbieten, aber ich habe mich entschlossen, die Beiträge (Stellungnahmen) mittel der Cloud-Funktionalität von Hubzilla zu verwirklichen. Zu diesem Zweck habe ich in der Cloud des Kanals einen öffentlich zugänglichen Ordner erstellt und in diesen die Texte als PDF-Dateien hochgeladen.

Cloud-Ordner im Menü zugänglich machen

Im PDL-Editor habe ich im MODUL "cloud" den Menü-Block wieder im Inhaltsbereich an die oberste Position gesetzt und schließlich den Link zu dem Ordner als Link in die Menü-Bar eingefügt:

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ [url=https://klacker.org/page/exraucher_ig/mani-vereinb]Manifest[/url] ★ [url=https://klacker.org/articles/exraucher_ig]Aktuell[/url] ★ [url=https://klacker.org/cloud/exraucher_ig/Positionen]Positionen[/url] ★ Informationen



Der Menüpunkt "Informationen" führte zu einer Sammlung von Flyern und Informations-Texten, die ich ebenfalls mit Hilfe der Cloud zur Verfügung stelle. Dafür habe ich einen weiteren Ordner erstellt ("Informationen"), die Dateien dort hochgeladen und im Menü-Block verlinkt.

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ [url=https://klacker.org/page/exraucher_ig/mani-vereinb]Manifest[/url] ★ [url=https://klacker.org/articles/exraucher_ig]Aktuell[/url] ★ [url=https://klacker.org/cloud/exraucher_ig/Positionen]Positionen[/url] ★ [url=https://klacker.org/cloud/exraucher_ig/Informationen]Informationen[/url]



[h3]Weitere Möglichkeiten
Die ursprüngliche Organisations-Seite bot auch ein Wiki an, das allerdings extern mittels MediaWiki betrieben wurde (wird!). Das könnte man in der Menü-Bar natürlich auch verlinken. Oder, wenn die Funktionalität der Wiki-App von Hubzilla ausreicht, kann man auch mit Hubzilla ein Wiki (z.B. auch als Hilfe-Seite oder für FAQ) erstellen und über das Menü zugänglich machen.

Aber das spare ich mir hier jetzt. Jeder ist eingeladen, eigene Ideen umzusetzen und dabei alle Funktionen von Hubzilla dazu zu verwenden.

Bei der Einbindung aller Apps sollte man nicht vergessen, den Menü-Block im entsprechenden MODUL mit dem PDL-Editor an oberster Stelle einzufügen.

Weil die Organisations-Präsenz ja aber auch ins Fediverse eingebunden ist, ist es sinnvoll, auch die Kanalseite im Menü-Block anzubieten, um ggf. Interaktion anzubieten (ist ja auch der Sinn von solchen Seiten). Also auch noch schnell eingebaut:

[url=https://klacker.org/page/exraucher_ig/home]Startseite[/url] ★ [url=https://klacker.org/channel/exraucher_ig]Kanal[/url] ★ [url=https://klacker.org/page/exraucher_ig/mani-vereinb]Manifest[/url] ★ [url=https://klacker.org/articles/exraucher_ig]Aktuell[/url] ★ [url=https://klacker.org/cloud/exraucher_ig/Positionen]Positionen[/url] ★ [url=https://klacker.org/cloud/exraucher_ig/Informationen]Informationen[/url]



Das war es jetzt erst einmal...

Das Ergebnis

Und so sieht ein nicht angemeldeter (nicht authentifizierter) Besucher die Seite:



Die Seite im Echtbetrieb kann man sich hier anschauen: ExRaucher (IG)

Ich hoffe, ich konnte zeigen, wie man die Entsprechung einer "Facebook-Seite" hervorragend - und mit wesentlich erweiterter Funktionalität - mit Hubzilla umsetzen kann. Man kann als Kanalbetreiber das Fediverse für die Zwecke der Organisation ganz normal nutzen, mit anderen interagieren und bietet Besuchern alle relevanten Informationen.

Fragen zu diesem Thema können im Forenkanal Pepes Hubzilla-Sprechstunde (hubzillasprechstunde@hub.hubzilla.hu) oder im Matrix-Raum Pepes Hubzilla-Hilfe (#pepes-hubzillahilfe:matrix.org) geklärt werden. Oder auch per DN an pepecyb@hub.hubzilla.hu .

Als nächstes folgt ein Artikel über die Nutzung der App "Webseiten", in welchem ich näher auf die Struktur von Webseiten bei Hubzilla und die Realisierung bestimmter Ideen als Webseite eingehe.